Adjust row height in grid (#21311)

* Set row height to 56px

* Adjust padding and sizes

* Adjust margin

* Fix pointer-events

* Fix image size

* Clean code

src/components/ha-grid-size-picker.ts

@@ -20,7 +20,7 @@ export class HaGridSizeEditor extends LitElement {
 
   @property({ attribute: false }) public value?: GridSizeValue;
 
-  @property({ attribute: false }) public rows = 6;
+  @property({ attribute: false }) public rows = 8;
 
   @property({ attribute: false }) public columns = 4;
 
@@ -205,7 +205,7 @@ export class HaGridSizeEditor extends LitElement {
       .preview {
         position: relative;
         grid-area: preview;
-        aspect-ratio: 1 / 1;
+        aspect-ratio: 1 / 1.2;
       }
       .preview > div {
         position: absolute;

src/components/tile/ha-tile-icon.ts

@@ -17,7 +17,7 @@ export class HaTileIcon extends LitElement {
     return css`
       :host {
         --tile-icon-color: var(--disabled-color);
-        --mdc-icon-size: 24px;
+        --mdc-icon-size: 22px;
       }
       .shape::before {
         content: "";
@@ -32,9 +32,9 @@ export class HaTileIcon extends LitElement {
       }
       .shape {
         position: relative;
-        width: 40px;
+        width: 36px;
-        height: 40px;
+        height: 36px;
-        border-radius: 20px;
+        border-radius: 18px;
         display: flex;
         align-items: center;
         justify-content: center;

src/components/tile/ha-tile-image.ts

@@ -25,9 +25,9 @@ export class HaTileImage extends LitElement {
     return css`
       .image {
         position: relative;
-        width: 40px;
+        width: 36px;
-        height: 40px;
+        height: 36px;
-        border-radius: 20px;
+        border-radius: 18px;
         display: flex;
         flex: none;
         align-items: center;

src/components/tile/ha-tile-info.ts

@@ -33,7 +33,7 @@ export class HaTileInfo extends LitElement {
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        min-height: 40px;
+        height: 36px;
       }
       span {
         text-overflow: ellipsis;

src/panels/lovelace/card-features/common/card-feature-styles.ts

@@ -0,0 +1,30 @@
+import { css } from "lit";
+
+export const cardFeatureStyles = css`
+  ha-control-select-menu {
+    box-sizing: border-box;
+    --control-select-menu-height: var(--feature-height);
+    --control-select-menu-border-radius: var(--feature-border-radius);
+    line-height: 1.2;
+    display: block;
+    width: 100%;
+  }
+  ha-control-select {
+    --control-select-color: var(--feature-color);
+    --control-select-padding: 0;
+    --control-select-thickness: var(--feature-height);
+    --control-select-border-radius: var(--feature-border-radius);
+    --control-select-button-border-radius: var(--feature-border-radius);
+  }
+  ha-control-button-group {
+    --control-button-group-spacing: var(--feature-button-spacing);
+    --control-button-group-thickness: var(--feature-height);
+  }
+  ha-control-slider {
+    --control-slider-color: var(--feature-color);
+    --control-slider-background: var(--feature-color);
+    --control-slider-background-opacity: 0.2;
+    --control-slider-thickness: var(--feature-height);
+    --control-slider-border-radius: var(--feature-border-radius);
+  }
+`;

src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiShieldOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -21,6 +21,7 @@ import {
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
 import { AlarmModesCardFeatureConfig } from "./types";
 
@@ -135,7 +136,6 @@ class HuiAlarmModeCardFeature
     }
 
     return html`
-      <div class="container">
       <ha-control-select
         .options=${options}
         .value=${this._currentMode}
@@ -151,28 +151,11 @@ class HuiAlarmModeCardFeature
         .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-card-feature.ts

@@ -0,0 +1,51 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { LitElement, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant } from "../../../types";
+import type { HuiErrorCard } from "../cards/hui-error-card";
+import { createCardFeatureElement } from "../create-element/create-card-feature-element";
+import type { LovelaceCardFeature } from "../types";
+import type { LovelaceCardFeatureConfig } from "./types";
+
+@customElement("hui-card-feature")
+export class HuiCardFeature extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: HassEntity;
+
+  @property({ attribute: false }) public feature?: LovelaceCardFeatureConfig;
+
+  @property({ attribute: false }) public color?: string;
+
+  private _element?: LovelaceCardFeature | HuiErrorCard;
+
+  private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
+    if (!this._element) {
+      this._element = createCardFeatureElement(feature);
+      return this._element;
+    }
+
+    return this._element;
+  }
+
+  protected render() {
+    if (!this.feature) {
+      return nothing;
+    }
+
+    const element = this._getFeatureElement(this.feature);
+
+    if (this.hass) {
+      element.hass = this.hass;
+      (element as LovelaceCardFeature).stateObj = this.stateObj;
+      (element as LovelaceCardFeature).color = this.color;
+    }
+    return html`${element}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-feature": HuiCardFeature;
+  }
+}

src/panels/lovelace/card-features/hui-card-features.ts

@@ -1,17 +1,8 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import {
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
-  CSSResultGroup,
-  LitElement,
-  TemplateResult,
-  css,
-  html,
-  nothing,
-} from "lit";
 import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
-import type { HuiErrorCard } from "../cards/hui-error-card";
+import "./hui-card-feature";
-import { createCardFeatureElement } from "../create-element/create-card-feature-element";
-import type { LovelaceCardFeature } from "../types";
 import type { LovelaceCardFeatureConfig } from "./types";
 
 @customElement("hui-card-features")
@@ -24,44 +15,23 @@ export class HuiCardFeatures extends LitElement {
 
   @property({ attribute: false }) public color?: string;
 
-  private _featuresElements = new WeakMap<
-    LovelaceCardFeatureConfig,
-    LovelaceCardFeature | HuiErrorCard
-  >();
-
-  private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
-    if (!this._featuresElements.has(feature)) {
-      const element = createCardFeatureElement(feature);
-      this._featuresElements.set(feature, element);
-      return element;
-    }
-
-    return this._featuresElements.get(feature)!;
-  }
-
-  private renderFeature(
-    featureConf: LovelaceCardFeatureConfig,
-    stateObj: HassEntity
-  ): TemplateResult {
-    const element = this._getFeatureElement(featureConf);
-
-    if (this.hass) {
-      element.hass = this.hass;
-      (element as LovelaceCardFeature).stateObj = stateObj;
-      (element as LovelaceCardFeature).color = this.color;
-    }
-
-    return html`${element}`;
-  }
-
   protected render() {
     if (!this.features) {
       return nothing;
     }
     return html`
-      ${this.features.map((featureConf) =>
+      <div class="container">
-        this.renderFeature(featureConf, this.stateObj)
+        ${this.features.map(
+          (feature) => html`
+            <hui-card-feature
+              .hass=${this.hass}
+              .stateObj=${this.stateObj}
+              .color=${this.color}
+              .feature=${feature}
+            ></hui-card-feature>
+          `
         )}
+      </div>
     `;
   }
 
@@ -69,8 +39,24 @@ export class HuiCardFeatures extends LitElement {
     return css`
       :host {
         --feature-color: var(--state-icon-color);
+        --feature-padding: 12px;
+        --feature-height: 42px;
+        --feature-border-radius: 12px;
+        --feature-button-spacing: 12px;
+        position: relative;
+        width: 100%;
+      }
+      .container {
+        position: relative;
         display: flex;
         flex-direction: column;
+        padding: var(--feature-padding);
+        padding-top: 0px;
+        gap: var(--feature-padding);
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        justify-content: space-evenly;
       }
     `;
   }

src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiFan } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { ClimateFanModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { ClimateFanModesCardFeatureConfig } from "./types";
 
 export const supportsClimateFanModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -140,7 +141,6 @@ class HuiClimateFanModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentFanMode}
@@ -153,12 +153,10 @@ class HuiClimateFanModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
@@ -187,32 +185,11 @@ class HuiClimateFanModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiThermostat } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
@@ -19,6 +19,7 @@ import {
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
 import { ClimateHvacModesCardFeatureConfig } from "./types";
 
@@ -139,7 +140,6 @@ class HuiClimateHvacModesCardFeature
 
     if (this._config.style === "dropdown") {
       return html`
-        <div class="container">
         <ha-control-select-menu
           show-arrow
           hide-label
@@ -169,12 +169,10 @@ class HuiClimateHvacModesCardFeature
             `
           )}
         </ha-control-select-menu>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select
         .options=${options}
         .value=${this._currentHvacMode}
@@ -187,31 +185,11 @@ class HuiClimateHvacModesCardFeature
         .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiTuneVariant } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { ClimatePresetModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { ClimatePresetModesCardFeatureConfig } from "./types";
 
 export const supportsClimatePresetModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -142,7 +143,6 @@ class HuiClimatePresetModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentPresetMode}
@@ -155,19 +155,14 @@ class HuiClimatePresetModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
-          .label=${this.hass!.formatEntityAttributeName(
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
-            stateObj,
-            "preset_mode"
-          )}
         .value=${this._currentPresetMode}
         .disabled=${this.stateObj.state === UNAVAILABLE}
         fixedMenuPosition
@@ -194,32 +189,11 @@ class HuiClimatePresetModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiArrowOscillating } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { ClimateSwingModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { ClimateSwingModesCardFeatureConfig } from "./types";
 
 export const supportsClimateSwingModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -142,7 +143,6 @@ class HuiClimateSwingModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentSwingMode}
@@ -155,12 +155,10 @@ class HuiClimateSwingModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
@@ -192,32 +190,11 @@ class HuiClimateSwingModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiStop } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import {
@@ -18,6 +18,7 @@ import {
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { CoverOpenCloseCardFeatureConfig } from "./types";
 
 export const supportsCoverOpenCloseCardFeature = (stateObj: HassEntity) => {
@@ -128,12 +129,7 @@ class HuiCoverOpenCloseCardFeature
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-cover-position-card-feature.ts

@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeCssColor } from "../../../common/color/compute-color";
@@ -10,10 +10,11 @@ import { stateColorCss } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { CoverEntityFeature } from "../../../data/cover";
 import { UNAVAILABLE } from "../../../data/entity";
+import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { CoverPositionCardFeatureConfig } from "./types";
-import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 
 export const supportsCoverPositionCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -72,14 +73,14 @@ class HuiCoverPositionCardFeature
       : stateColorCss(this.stateObj);
 
     const style = {
-      "--color": color,
+      "--feature-color": color,
       // Use open color for inactive state to avoid grey slider that looks disabled
       "--state-cover-inactive-color": openColor,
     };
 
     return html`
-      <div class="container" style=${styleMap(style)}>
       <ha-control-slider
+        style=${styleMap(style)}
         .value=${value}
         min="0"
         max="100"
@@ -97,7 +98,6 @@ class HuiCoverPositionCardFeature
         .unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_position}
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -112,19 +112,7 @@ class HuiCoverPositionCardFeature
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-slider {
-        --control-slider-color: var(--color);
-        --control-slider-background: var(--color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts

@@ -1,19 +1,20 @@
 import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import {
+  CoverEntityFeature,
   canCloseTilt,
   canOpenTilt,
   canStopTilt,
-  CoverEntityFeature,
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { CoverTiltCardFeatureConfig } from "./types";
 
 export const supportsCoverTiltCardFeature = (stateObj: HassEntity) => {
@@ -120,12 +121,7 @@ class HuiCoverTiltCardFeature
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts

@@ -13,6 +13,7 @@ import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 import { generateTiltSliderTrackBackgroundGradient } from "../../../state-control/cover/ha-state-control-cover-tilt-position";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { CoverTiltPositionCardFeatureConfig } from "./types";
 
 const GRADIENT = generateTiltSliderTrackBackgroundGradient();
@@ -72,14 +73,14 @@ class HuiCoverTiltPositionCardFeature
       : stateColorCss(this.stateObj);
 
     const style = {
-      "--color": color,
+      "--feature-color": color,
       // Use open color for inactive state to avoid grey slider that looks disabled
       "--state-cover-inactive-color": openColor,
     };
 
     return html`
-      <div class="container" style=${styleMap(style)}>
       <ha-control-slider
+        style=${styleMap(style)}
         .value=${value}
         min="0"
         max="100"
@@ -98,7 +99,6 @@ class HuiCoverTiltPositionCardFeature
       >
         <div slot="background" class="gradient"></div
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -113,24 +113,15 @@ class HuiCoverTiltPositionCardFeature
   }
 
   static get styles() {
-    return css`
+    return [
-      ha-control-slider {
+      cardFeatureStyles,
-        /* Force inactive state to be colored for the slider */
+      css`
-        --control-slider-color: var(--color);
-        --control-slider-background: var(--color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
         .gradient {
           background: -webkit-linear-gradient(left, ${GRADIENT});
           opacity: 0.6;
         }
-    `;
+      `,
+    ];
   }
 }
 

src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiTuneVariant } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -10,12 +10,13 @@ import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import "../../../components/ha-control-select-menu";
 import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu";
-import { FanEntity, FanEntityFeature } from "../../../data/fan";
 import { UNAVAILABLE } from "../../../data/entity";
+import { FanEntity, FanEntityFeature } from "../../../data/fan";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { FanPresetModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { FanPresetModesCardFeatureConfig } from "./types";
 
 export const supportsFanPresetModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -139,7 +140,6 @@ class HuiFanPresetModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentPresetMode}
@@ -152,19 +152,14 @@ class HuiFanPresetModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
-          .label=${this.hass!.formatEntityAttributeName(
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
-            stateObj,
-            "preset_mode"
-          )}
         .value=${this._currentPresetMode}
         .disabled=${this.stateObj.state === UNAVAILABLE}
         fixedMenuPosition
@@ -191,32 +186,11 @@ class HuiFanPresetModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts

@@ -24,6 +24,7 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
 import { FanSpeedCardFeatureConfig } from "./types";
 import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 
 export const supportsFanSpeedCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -88,7 +89,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
       const speed = fanPercentageToSpeed(this.stateObj, percentage);
 
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${speed}
@@ -103,14 +103,12 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     const value = Math.max(Math.round(percentage), 0);
 
     return html`
-      <div class="container">
       <ha-control-slider
         .value=${value}
         min="0"
@@ -127,7 +125,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
         .unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage}
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -153,28 +150,16 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
   }
 
   static get styles() {
-    return css`
+    return [
-      ha-control-slider {
+      cardFeatureStyles,
-        --control-slider-color: var(--feature-color);
+      css`
-        --control-slider-background: var(--feature-color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
         ha-control-select {
-        --control-select-color: var(--feature-color);
+          /* Color the background to match the slider style */
           --control-select-background: var(--feature-color);
           --control-select-background-opacity: 0.2;
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
         }
-      .container {
+      `,
-        padding: 0 12px 12px 12px;
+    ];
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiTuneVariant } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -17,8 +17,9 @@ import {
 } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { HumidifierModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { HumidifierModesCardFeatureConfig } from "./types";
 
 export const supportsHumidifierModesCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -143,7 +144,6 @@ class HuiHumidifierModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentMode}
@@ -153,12 +153,10 @@ class HuiHumidifierModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
@@ -190,32 +188,11 @@ class HuiHumidifierModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiPower, mdiWaterPercent } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, PropertyValues, TemplateResult, css, html } from "lit";
+import { LitElement, PropertyValues, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -11,6 +11,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import { HumidifierEntity, HumidifierState } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { HumidifierToggleCardFeatureConfig } from "./types";
 
 export const supportsHumidifierToggleCardFeature = (stateObj: HassEntity) => {
@@ -95,7 +96,6 @@ class HuiHumidifierToggleCardFeature
     }));
 
     return html`
-      <div class="container">
       <ha-control-select
         .options=${options}
         .value=${this._currentState}
@@ -108,24 +108,11 @@ class HuiHumidifierToggleCardFeature
         .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiHomeImportOutline, mdiPause, mdiPlay } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
@@ -14,6 +14,7 @@ import {
 } from "../../../data/lawn_mower";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import {
   LAWN_MOWER_COMMANDS,
   LawnMowerCommand,
@@ -171,12 +172,7 @@ class HuiLawnMowerCommandCardFeature
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts

@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateActive } from "../../../common/entity/state_active";
@@ -8,6 +8,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import { lightSupportsBrightness } from "../../../data/light";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { LightBrightnessCardFeatureConfig } from "./types";
 
 export const supportsLightBrightnessCardFeature = (stateObj: HassEntity) => {
@@ -58,7 +59,6 @@ class HuiLightBrightnessCardFeature
         : undefined;
 
     return html`
-      <div class="container">
       <ha-control-slider
         .value=${position}
         min="1"
@@ -70,7 +70,6 @@ class HuiLightBrightnessCardFeature
         unit="%"
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -85,19 +84,7 @@ class HuiLightBrightnessCardFeature
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-slider {
-        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--feature-color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts

@@ -16,6 +16,7 @@ import { LightColorMode, lightSupportsColorMode } from "../../../data/light";
 import { generateColorTemperatureGradient } from "../../../dialogs/more-info/components/lights/light-color-temp-picker";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { LightColorTempCardFeatureConfig } from "./types";
 
 export const supportsLightColorTempCardFeature = (stateObj: HassEntity) => {
@@ -73,7 +74,6 @@ class HuiLightColorTempCardFeature
     const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);
 
     return html`
-      <div class="container">
       <ha-control-slider
         .value=${position}
         mode="cursor"
@@ -89,7 +89,6 @@ class HuiLightColorTempCardFeature
         .unit=${DOMAIN_ATTRIBUTES_UNITS.light.color_temp_kelvin}
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -108,22 +107,18 @@ class HuiLightColorTempCardFeature
   }
 
   static get styles() {
-    return css`
+    return [
+      cardFeatureStyles,
+      css`
         ha-control-slider {
-        --control-slider-color: var(--feature-color);
           --control-slider-background: -webkit-linear-gradient(
             left,
             var(--gradient)
           );
           --control-slider-background-opacity: 1;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
         }
-      .container {
+      `,
-        padding: 0 12px 12px 12px;
+    ];
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiLock, mdiLockOpenVariant } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { CSSResultGroup, LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 
@@ -14,6 +14,7 @@ import {
 } from "../../../data/lock";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { LockCommandsCardFeatureConfig } from "./types";
 
 export const supportsLockCommandsCardFeature = (stateObj: HassEntity) => {
@@ -88,12 +89,7 @@ class HuiLockCommandsCardFeature
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return cardFeatureStyles;
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts

@@ -15,6 +15,7 @@ import {
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
 import { LockOpenDoorCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 
 export const supportsLockOpenDoorCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -112,14 +113,12 @@ class HuiLockOpenDoorCardFeature
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
+      cardFeatureStyles,
+      css`
         ha-control-button {
           font-size: 14px;
         }
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
         .open-button {
           width: 130px;
         }
@@ -140,7 +139,8 @@ class HuiLockOpenDoorCardFeature
           height: 40px;
           text-align: center;
         }
-    `;
+      `,
+    ];
   }
 }
 

src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts

@@ -1,16 +1,17 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { isUnavailableState } from "../../../data/entity";
-import { HomeAssistant } from "../../../types";
-import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { NumericInputCardFeatureConfig } from "./types";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-number-buttons";
 import "../../../components/ha-control-slider";
 import "../../../components/ha-icon";
+import { isUnavailableState } from "../../../data/entity";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
+import { NumericInputCardFeatureConfig } from "./types";
 
 export const supportsNumericInputCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -81,10 +82,9 @@ class HuiNumericInputCardFeature
 
     const stateObj = this.stateObj;
 
+    if (this._config.style === "buttons") {
       return html`
-      <div class="container">
+        <ha-control-number-buttons
-        ${this._config.style === "buttons"
-          ? html`<ha-control-number-buttons
           value=${stateObj.state}
           min=${stateObj.attributes.min}
           max=${stateObj.attributes.max}
@@ -93,8 +93,11 @@ class HuiNumericInputCardFeature
           .disabled=${isUnavailableState(stateObj.state)}
           .unit=${stateObj.attributes.unit_of_measurement}
           .locale=${this.hass.locale}
-            ></ha-control-number-buttons>`
+        ></ha-control-number-buttons>
-          : html`<ha-control-slider
+      `;
+    }
+    return html`
+      <ha-control-slider
         value=${stateObj.state}
         min=${stateObj.attributes.min}
         max=${stateObj.attributes.max}
@@ -103,28 +106,12 @@ class HuiNumericInputCardFeature
         .disabled=${isUnavailableState(stateObj.state)}
         .unit=${stateObj.attributes.unit_of_measurement}
         .locale=${this.hass.locale}
-            ></ha-control-slider>`}
+      ></ha-control-slider>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-number-buttons {
-        width: auto;
-      }
-      ha-control-slider {
-        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--feature-color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-select-options-card-feature.ts

@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -10,8 +10,9 @@ import { InputSelectEntity } from "../../../data/input_select";
 import { SelectEntity } from "../../../data/select";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { SelectOptionsCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { SelectOptionsCardFeatureConfig } from "./types";
 
 export const supportsSelectOptionsCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
@@ -119,7 +120,6 @@ class HuiSelectOptionsCardFeature
     );
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
@@ -139,25 +139,11 @@ class HuiSelectOptionsCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts

@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-control-slider";
@@ -7,6 +7,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import { HumidifierEntity } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { TargetHumidityCardFeatureConfig } from "./types";
 
 export const supportsTargetHumidityCardFeature = (stateObj: HassEntity) => {
@@ -84,7 +85,6 @@ class HuiTargetHumidityCardFeature
     }
 
     return html`
-      <div class="container">
       <ha-control-slider
         .value=${this.stateObj.attributes.humidity}
         .min=${this._min}
@@ -92,31 +92,15 @@ class HuiTargetHumidityCardFeature
         .step=${this._step}
         .disabled=${this.stateObj!.state === UNAVAILABLE}
         @value-changed=${this._valueChanged}
-          .label=${this.hass.formatEntityAttributeName(
+        .label=${this.hass.formatEntityAttributeName(this.stateObj, "humidity")}
-            this.stateObj,
-            "humidity"
-          )}
         unit="%"
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-slider {
-        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--feature-color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts

@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../../common/const";
@@ -18,6 +18,7 @@ import {
 } from "../../../data/water_heater";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { TargetTemperatureCardFeatureConfig } from "./types";
 
 type Target = "value" | "low" | "high";
@@ -283,12 +284,7 @@ class HuiTargetTemperatureCardFeature
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-update-actions-card-feature.ts

@@ -1,6 +1,6 @@
 import { mdiCancel, mdiCellphoneArrowDown } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateActive } from "../../../common/entity/state_active";
@@ -16,6 +16,7 @@ import {
 import { showUpdateBackupDialogParams } from "../../../dialogs/update_backup/show-update-backup-dialog";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { UpdateActionsCardFeatureConfig } from "./types";
 
 export const DEFAULT_UPDATE_BACKUP_OPTION = "ask";
@@ -149,12 +150,7 @@ class HuiUpdateActionsCardFeature
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts

@@ -8,7 +8,7 @@ import {
   mdiTargetVariant,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
@@ -25,6 +25,7 @@ import {
 } from "../../../data/vacuum";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import {
   VACUUM_COMMANDS,
   VacuumCommand,
@@ -210,12 +211,7 @@ class HuiVacuumCommandCardFeature
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
   }
 }
 

src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

@@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -18,8 +18,9 @@ import {
 } from "../../../data/water_heater";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { WaterHeaterOperationModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { WaterHeaterOperationModesCardFeatureConfig } from "./types";
 
 export const supportsWaterHeaterOperationModesCardFeature = (
   stateObj: HassEntity
@@ -118,7 +119,6 @@ class HuiWaterHeaterOperationModeCardFeature
     }));
 
     return html`
-      <div class="container">
       <ha-control-select
         .options=${options}
         .value=${this._currentOperationMode}
@@ -131,28 +131,11 @@ class HuiWaterHeaterOperationModeCardFeature
         .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
-      </div>
     `;
   }
 
   static get styles() {
-    return css`
+    return cardFeatureStyles;
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
   }
 }
 

src/panels/lovelace/cards/hui-tile-card.ts

@@ -113,8 +113,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     let grid_min_columns = 2;
     let grid_rows = 1;
     if (this._config?.features?.length) {
-      const featureHeight = Math.ceil((this._config.features.length * 2) / 3);
+      grid_rows += this._config.features.length;
-      grid_rows += featureHeight;
     }
     if (this._config?.vertical) {
       grid_rows++;
@@ -279,6 +278,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         >
           <ha-ripple .disabled=${!this.hasCardAction}></ha-ripple>
         </div>
+        <div class="container">
           <div class="content ${classMap(contentClasses)}">
             <div
               class="icon-container"
@@ -324,6 +324,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                 ></hui-card-features>
               `
             : nothing}
+        </div>
       </ha-card>
     `;
   }
@@ -371,31 +372,43 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         margin: calc(-1 * var(--ha-card-border-width, 1px));
         overflow: hidden;
       }
+      .container {
+        margin: calc(-1 * var(--ha-card-border-width, 1px));
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
       .content {
+        position: relative;
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: 12px;
+        padding: 0 10px;
+        min-height: var(--row-height, 56px);
+        flex: 1;
+        pointer-events: none;
       }
       .vertical {
         flex-direction: column;
         text-align: center;
+        justify-content: center;
       }
       .vertical .icon-container {
-        margin-bottom: 12px;
+        margin-bottom: 10px;
         margin-right: 0;
         margin-inline-start: initial;
         margin-inline-end: initial;
       }
       .vertical ha-tile-info {
         width: 100%;
+        flex: none;
       }
       .icon-container {
         position: relative;
         flex: none;
-        margin-right: 12px;
+        margin-right: 10px;
         margin-inline-start: initial;
-        margin-inline-end: 12px;
+        margin-inline-end: 10px;
         direction: var(--direction);
         transition: transform 180ms ease-in-out;
       }
@@ -414,8 +427,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         inset-inline-end: -3px;
         inset-inline-start: initial;
       }
-      .icon-container:not([role="button"]) {
+      .icon-container[role="button"] {
-        pointer-events: none;
+        pointer-events: auto;
       }
       .icon-container[role="button"]:focus-visible,
       .icon-container[role="button"]:active {
@@ -423,11 +436,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       }
       ha-tile-info {
         position: relative;
-        flex: 1;
         min-width: 0;
         transition: background-color 180ms ease-in-out;
         box-sizing: border-box;
-        pointer-events: none;
       }
       hui-card-features {
         --feature-color: var(--tile-color);

src/panels/lovelace/sections/hui-grid-section.ts

@@ -214,7 +214,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           --column-count: 4;
           --row-gap: var(--ha-section-grid-row-gap, 8px);
           --column-gap: var(--ha-section-grid-column-gap, 8px);
-          --row-height: 66px;
+          --row-height: var(--ha-section-grid-row-height, 56px);
           display: flex;
           flex-direction: column;
           gap: var(--row-gap);