Migrate deprecated Web Awesome size values to short form (s/m/l)

gallery/src/pages/components/ha-alert.ts

@@ -78,13 +78,13 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action",
     type: "error",
-    actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
+    actionSlot: html`<ha-button size="s" slot="action">restart</ha-button>`,
   },
   {
     title: "Unsaved data",
     description: "You have unsaved data",
     type: "warning",
-    actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
+    actionSlot: html`<ha-button size="s" slot="action">save</ha-button>`,
   },
   {
     title: "Slotted icon",

gallery/src/pages/components/ha-button.markdown

@@ -26,7 +26,7 @@ title: Button
     filled button
   </ha-button>
 
-  <ha-button size="small">
+  <ha-button size="s">
     small
   </ha-button>
 </div>
@@ -34,7 +34,7 @@ title: Button
 ```html
 <ha-button> simple button </ha-button>
 
-<ha-button size="small"> small </ha-button>
+<ha-button size="s"> small </ha-button>
 ```
 
 ### API
@@ -57,7 +57,7 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 | ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
 | appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
-| size       | "small"/"medium"/"large"                       | "medium" | Sets the button size.                                                             |
+| size       | "xs"/"s"/"m"/"l"/"xl"                          | "m"      | Sets the button size.                                                             |
 | loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
 | disabled   | Boolean                                        | false    | Disables the button and prevents user interaction.                                |
 

gallery/src/pages/components/ha-button.ts

@@ -49,7 +49,7 @@ export class DemoHaButton extends LitElement {
                           <ha-button
                             .appearance=${appearance}
                             .variant=${variant}
-                            size="small"
+                            size="s"
                           >
                             ${titleCase(`${variant} ${appearance}`)}
                           </ha-button>
@@ -100,7 +100,7 @@ export class DemoHaButton extends LitElement {
                           <ha-button
                             .variant=${variant}
                             .appearance=${appearance}
-                            size="small"
+                            size="s"
                             disabled
                           >
                             ${titleCase(`${appearance}`)}

gallery/src/pages/components/ha-slider.markdown

@@ -17,13 +17,13 @@ subtitle: A slider component for selecting a value from a range.
 ### Example Usage
 
 <div class="wrapper">
-  <ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-  <ha-slider size="medium"></ha-slider>
+  <ha-slider size="s" with-markers min="0" max="8" value="4"></ha-slider>
+  <ha-slider size="m"></ha-slider>
 </div>
 
 ```html
-<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-<ha-slider size="medium"></ha-slider>
+<ha-slider size="s" with-markers min="0" max="8" value="4"></ha-slider>
+<ha-slider size="m"></ha-slider>
 ```
 
 ### API

gallery/src/pages/components/ha-slider.ts

@@ -29,7 +29,7 @@ export class DemoHaSlider extends LitElement {
                 ></ha-slider>
                 <span>Small</span>
                 <ha-slider
-                  size="small"
+                  size="s"
                   min="0"
                   max="8"
                   value="4"
@@ -37,7 +37,7 @@ export class DemoHaSlider extends LitElement {
                 ></ha-slider>
                 <span>Medium</span>
                 <ha-slider
-                  size="medium"
+                  size="m"
                   min="0"
                   max="8"
                   value="4"

package.json

@@ -180,7 +180,7 @@
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.0.7",
+    "lint-staged": "17.0.6",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",

src/components/chart/state-history-charts.ts

@@ -167,7 +167,7 @@ export class StateHistoryCharts extends LitElement {
           )}`}
       ${this.syncCharts && this._hasZoomedCharts
         ? html`<ha-button
-            size="large"
+            size="l"
             class="reset-button"
             @click=${this._handleGlobalZoomReset}
           >

src/components/entity/ha-entity-name-picker.ts

@@ -117,7 +117,7 @@ export class HaEntityNamePicker extends LitElement {
         <div class="header">
           ${this.label ? html`<label>${this.label}</label>` : nothing}
           <ha-button-toggle-group
-            size="small"
+            size="s"
             .buttons=${modeButtons}
             .active=${this._mode}
             .disabled=${this.disabled}

src/components/ha-button-toggle-group.ts

@@ -15,7 +15,7 @@ import "./ha-svg-icon";
  *
  * @attr {ToggleButton[]} buttons - the button config
  * @attr {string} active - The value of the currently active button.
- * @attr {("small"|"medium")} size - The size of the buttons in the group.
+ * @attr {("s"|"m")} size - The size of the buttons in the group.
  * @attr {("brand"|"neutral"|"success"|"warning"|"danger")} variant - The variant of the buttons in the group.
  *
  * @fires value-changed - Dispatched when the active button changes.
@@ -26,7 +26,7 @@ export class HaButtonToggleGroup extends LitElement {
 
   @property() public active?: string;
 
-  @property({ reflect: true }) size: "small" | "medium" = "medium";
+  @property({ reflect: true }) size: "s" | "m" = "m";
 
   @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
   public nowrap = false;

src/components/ha-button.ts

@@ -27,7 +27,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @cssprop --ha-button-height - The height of the button.
  * @cssprop --ha-button-border-radius - The border radius of the button. defaults to `var(--ha-border-radius-pill)`.
  *
- * @attr {("small"|"medium"|"large")} size - Sets the button size.
+ * @attr {("xs"|"s"|"m"|"l"|"xl")} size - Sets the button size.
  * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
  * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
  * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
@@ -65,7 +65,7 @@ export class HaButton extends Button {
           box-shadow: var(--ha-button-box-shadow);
         }
 
-        :host([size="small"]) .button {
+        :host([size="s"]) .button {
           --wa-form-control-height: var(
             --ha-button-height,
             var(--button-height, 32px)
@@ -74,7 +74,7 @@ export class HaButton extends Button {
           --wa-form-control-padding-inline: var(--ha-space-3);
         }
 
-        :host([size="large"]) .button {
+        :host([size="l"]) .button {
           --wa-form-control-height: var(
             --ha-button-height,
             var(--button-height, 48px)

src/components/ha-duration-input.ts

@@ -61,7 +61,7 @@ export class HaDurationInput extends LitElement {
         ${this.allowNegative
           ? html`
               <ha-button-toggle-group
-                size="small"
+                size="s"
                 .buttons=${[
                   { label: "+", iconPath: mdiPlusThick, value: "+" },
                   { label: "-", iconPath: mdiMinusThick, value: "-" },

src/components/ha-file-upload.ts

@@ -120,7 +120,7 @@ export class HaFileUpload extends LitElement {
             @dragend=${this._handleDragEnd}
             >${!this.value
               ? html`<ha-button
-                    size="small"
+                    size="s"
                     appearance="filled"
                     @click=${this._openFilePicker}
                   >

src/components/ha-filter-integrations.ts

@@ -1,19 +1,17 @@
 import type { SelectedDetail } from "@material/mwc-list";
-import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
-import { internationalizationContext, manifestsContext } from "../data/context";
 import type { IntegrationManifest } from "../data/integration";
-import { domainToName } from "../data/integration";
+import { domainToName, fetchIntegrationManifests } from "../data/integration";
 import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-domain-icon";
 import "./ha-expansion-panel";
@@ -23,26 +21,15 @@ import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-integrations")
 export class HaFilterIntegrations extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public value?: string[];
 
   @property({ type: Boolean }) public narrow = false;
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n!: ContextType<typeof internationalizationContext>;
-
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @consume({ context: manifestsContext, subscribe: true })
-  @state()
-  private _manifests?: ContextType<typeof manifestsContext>;
-
-  private _manifestList = memoizeOne(
-    (manifests: ContextType<typeof manifestsContext>) =>
-      Object.values(manifests)
-  );
+  @state() private _manifests?: IntegrationManifest[];
 
   @state() private _shouldRender = false;
 
@@ -51,10 +38,6 @@ export class HaFilterIntegrations extends LitElement {
   @query("ha-list") private _list?: HTMLElement;
 
   protected render() {
-    const manifests = this._manifests
-      ? this._manifestList(this._manifests)
-      : undefined;
-
     return html`
       <ha-expansion-panel
         left-chevron
@@ -63,7 +46,7 @@ export class HaFilterIntegrations extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this._localize("ui.panel.config.integrations.caption")}
+          ${this.hass.localize("ui.panel.config.integrations.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -72,7 +55,7 @@ export class HaFilterIntegrations extends LitElement {
                 ></ha-icon-button>`
             : nothing}
         </div>
-        ${manifests && this._shouldRender
+        ${this._manifests && this._shouldRender
           ? html`<ha-input-search
                 appearance="outlined"
                 .value=${this._filter}
@@ -86,11 +69,10 @@ export class HaFilterIntegrations extends LitElement {
               >
                 ${repeat(
                   this._integrations(
-                    this._localize,
-                    manifests,
+                    this.hass.localize,
+                    this._manifests,
                     this._filter,
-                    this.value,
-                    this._i18n.locale.language
+                    this.value
                   ),
                   (i) => i.domain,
                   (integration) =>
@@ -135,8 +117,9 @@ export class HaFilterIntegrations extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  protected firstUpdated() {
-    this._i18n.loadBackendTranslation("title");
+  protected async firstUpdated() {
+    this._manifests = await fetchIntegrationManifests(this.hass);
+    this.hass.loadBackendTranslation("title");
   }
 
   private _integrations = memoizeOne(
@@ -144,8 +127,7 @@ export class HaFilterIntegrations extends LitElement {
       localize: LocalizeFunc,
       manifest: IntegrationManifest[],
       filter: string | undefined,
-      _value: string[] | undefined,
-      language: string
+      _value
     ) =>
       manifest
         .map((mnfst) => ({
@@ -162,20 +144,17 @@ export class HaFilterIntegrations extends LitElement {
               mnfst.name.toLowerCase().includes(filter) ||
               mnfst.domain.toLowerCase().includes(filter))
         )
-        .sort((a, b) => stringCompare(a.name, b.name, language))
+        .sort((a, b) =>
+          stringCompare(a.name, b.name, this.hass.locale.language)
+        )
   );
 
   private _itemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
-    if (!this._manifests) {
-      return;
-    }
-
     const integrations = this._integrations(
-      this._localize,
-      this._manifestList(this._manifests),
+      this.hass.localize,
+      this._manifests!,
       this._filter,
-      this.value,
-      this._i18n.locale.language
+      this.value
     );
 
     const visibleDomains = new Set(integrations.map((i) => i.domain));

src/components/ha-form/ha-form-optional_actions.ts

@@ -129,7 +129,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
               @wa-select=${this._handleAddAction}
               @closed=${stopPropagation}
             >
-              <ha-button slot="trigger" appearance="filled" size="small">
+              <ha-button slot="trigger" appearance="filled" size="s">
                 <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
                 ${this.localize?.("ui.components.form-optional-actions.add") ||
                 "Add interaction"}

src/components/ha-generic-picker.ts

@@ -174,7 +174,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
           <slot name="field">
             ${this.addButtonLabel && !this.value
               ? html`<ha-button
-                  size="small"
+                  size="s"
                   appearance="filled"
                   @click=${this.open}
                   .disabled=${this.disabled}

src/components/ha-labels-picker.ts

@@ -171,7 +171,7 @@ export class HaLabelsPicker extends LitElement {
             : nothing}
           <ha-button
             id="picker"
-            size="small"
+            size="s"
             appearance="filled"
             @click=${this._openPicker}
             .disabled=${this.disabled}

src/components/ha-lawn_mower-action-button.ts

@@ -53,7 +53,7 @@ class HaLawnMowerActionButton extends LitElement {
           appearance="plain"
           @click=${this.callService}
           .service=${action.service}
-          size="small"
+          size="s"
         >
           ${this.hass.localize(`ui.card.lawn_mower.actions.${action.action}`)}
         </ha-button>

src/components/ha-picture-upload.ts

@@ -102,7 +102,7 @@ export class HaPictureUpload extends LitElement {
         <div>
           <ha-button
             appearance="plain"
-            size="small"
+            size="s"
             variant="danger"
             @click=${this._handleChangeClick}
           >

src/components/ha-selector/ha-selector-choose.ts

@@ -63,7 +63,7 @@ export class HaChooseSelector extends LitElement {
     return html`<div class="multi-header">
         <span>${this.label}${this.required ? "*" : ""}</span>
         <ha-button-toggle-group
-          size="small"
+          size="s"
           .buttons=${this._toggleButtons(
             this.selector.choose.choices,
             this.selector.choose.translation_key,

src/components/ha-selector/ha-selector-media.ts

@@ -190,7 +190,7 @@ export class HaMediaSelector extends LitElement {
               ? html`<div>
                   <ha-button
                     appearance="plain"
-                    size="small"
+                    size="s"
                     variant="danger"
                     @click=${this._clearValue}
                   >

src/components/ha-selector/ha-selector-numeric-threshold.ts

@@ -307,7 +307,7 @@ export class HaNumericThresholdSelector extends LitElement {
               >`
             : nothing}
           <ha-button-toggle-group
-            size="small"
+            size="s"
             .buttons=${choiceToggleButtons}
             .active=${activeChoice}
             .disabled=${this.disabled}

src/components/ha-slider.ts

@@ -5,7 +5,7 @@ import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-slider")
 export class HaSlider extends Slider {
-  @property({ reflect: true }) size: "small" | "medium" = "small";
+  @property({ reflect: true }) size: "s" | "m" = "s";
 
   @property({ type: Boolean, attribute: "with-tooltip" }) withTooltip = true;
 
@@ -110,12 +110,12 @@ export class HaSlider extends Slider {
           );
         }
 
-        :host([size="medium"]) {
+        :host([size="m"]) {
           --thumb-width: 20px;
           --thumb-height: 20px;
         }
 
-        :host([size="small"]) {
+        :host([size="s"]) {
           --thumb-width: 16px;
           --thumb-height: 16px;
         }

src/components/ha-trace-picker.ts

@@ -43,7 +43,7 @@ class HaTracePicker extends LitElement {
         slot="field"
         appearance="filled"
         variant="neutral"
-        size="small"
+        size="s"
         @click=${this._openPicker}
       >
         ${this._renderTracePickerValue(this.value!)}

src/components/ha-vacuum-state.ts

@@ -58,7 +58,7 @@ export class HaVacuumState extends LitElement {
     return html`
       <ha-button
         appearance="plain"
-        size="small"
+        size="s"
         @click=${this._callService}
         .disabled=${!interceptable}
       >

src/components/input/ha-input-copy.ts

@@ -99,7 +99,7 @@ export class HaInputCopy extends LitElement {
               : nothing}
           </ha-input>
         </div>
-        <ha-button @click=${this._copy} appearance="plain" size="small">
+        <ha-button @click=${this._copy} appearance="plain" size="s">
           <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
           ${this.label || this._i18n.localize("ui.common.copy")}
         </ha-button>

src/components/input/ha-input-multi.ts

@@ -130,7 +130,7 @@ class HaInputMulti extends LitElement {
       </ha-sortable>
       <div class="layout horizontal">
         <ha-button
-          size="small"
+          size="s"
           appearance="filled"
           @click=${this._addItem}
           .disabled=${this.disabled ||

src/components/media-player/ha-media-manage-button.ts

@@ -38,7 +38,7 @@ class MediaManageButton extends LitElement {
       return nothing;
     }
     return html`
-      <ha-button appearance="filled" size="small" @click=${this._manage}>
+      <ha-button appearance="filled" size="s" @click=${this._manage}>
         <ha-svg-icon .path=${mdiFolderEdit} slot="start"></ha-svg-icon>
         ${this.hass.localize(
           "ui.components.media-browser.file_management.manage"

src/dialogs/config-flow/previews/entity-preview-row.ts

@@ -114,7 +114,7 @@ class EntityPreviewRow extends LitElement {
 
     if (domain === "button") {
       return html`
-        <ha-button appearance="plain" size="small" .disabled=${disabled}>
+        <ha-button appearance="plain" size="s" .disabled=${disabled}>
           ${this.hass.localize("ui.card.button.press")}
         </ha-button>
       `;
@@ -237,7 +237,7 @@ class EntityPreviewRow extends LitElement {
           .disabled=${disabled}
           class="text-content"
           appearance="plain"
-          size="small"
+          size="s"
         >
           ${stateObj.state === "locked"
             ? this.hass!.localize("ui.card.lock.unlock")

src/dialogs/more-info/components/vacuum/ha-more-info-view-vacuum-clean-areas.ts

@@ -214,7 +214,7 @@ export class HaMoreInfoViewVacuumCleanAreas extends LitElement {
               ? html`
                   <ha-button
                     appearance="plain"
-                    size="small"
+                    size="s"
                     @click=${this._openSegmentMapping}
                   >
                     <ha-svg-icon

src/dialogs/more-info/controls/more-info-automation.ts

@@ -31,7 +31,7 @@ class MoreInfoAutomation extends LitElement {
       <div class="actions">
         <ha-button
           appearance="plain"
-          size="small"
+          size="s"
           @click=${this._runActions}
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >

src/dialogs/more-info/controls/more-info-counter.ts

@@ -22,7 +22,7 @@ class MoreInfoCounter extends LitElement {
       <div class="actions">
         <ha-button
           appearance="plain"
-          size="small"
+          size="s"
           .action=${"increment"}
           @click=${this._handleActionClick}
           .disabled=${disabled ||
@@ -32,7 +32,7 @@ class MoreInfoCounter extends LitElement {
         </ha-button>
         <ha-button
           appearance="plain"
-          size="small"
+          size="s"
           .action=${"decrement"}
           @click=${this._handleActionClick}
           .disabled=${disabled ||
@@ -42,7 +42,7 @@ class MoreInfoCounter extends LitElement {
         </ha-button>
         <ha-button
           appearance="plain"
-          size="small"
+          size="s"
           .action=${"reset"}
           @click=${this._handleActionClick}
           .disabled=${disabled}

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -431,7 +431,7 @@ class MoreInfoMediaPlayer extends LitElement {
                   ? html`<ha-button
                       variant="brand"
                       appearance="filled"
-                      size="medium"
+                      size="m"
                       action=${action}
                       @click=${this._handleClick}
                       class="center-control"

src/dialogs/more-info/controls/more-info-person.ts

@@ -39,7 +39,7 @@ class MoreInfoPerson extends LitElement {
             <div class="actions">
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 @click=${this._handleAction}
               >
                 ${this.hass.localize(

src/dialogs/more-info/controls/more-info-siren.ts

@@ -52,7 +52,7 @@ class MoreInfoSiren extends LitElement {
         ${allowAdvanced
           ? html`<ha-button
               appearance="plain"
-              size="small"
+              size="s"
               @click=${this._showAdvancedControlsDialog}
             >
               ${this.hass.localize("ui.components.siren.advanced_controls")}

src/dialogs/more-info/controls/more-info-timer.ts

@@ -21,7 +21,7 @@ class MoreInfoTimer extends LitElement {
           ? html`
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 .action=${"start"}
                 @click=${this._handleActionClick}
               >
@@ -33,7 +33,7 @@ class MoreInfoTimer extends LitElement {
           ? html`
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 .action=${"pause"}
                 @click=${this._handleActionClick}
               >
@@ -45,7 +45,7 @@ class MoreInfoTimer extends LitElement {
           ? html`
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 .action=${"cancel"}
                 @click=${this._handleActionClick}
               >
@@ -53,7 +53,7 @@ class MoreInfoTimer extends LitElement {
               </ha-button>
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 .action=${"finish"}
                 @click=${this._handleActionClick}
               >

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts

@@ -95,10 +95,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
                   "ui.panel.config.voice_assistants.satellite_wizard.local.failed_secondary"
                 )}
               </p>
-              <ha-button
-                appearance="plain"
-                size="small"
-                @click=${this._prevStep}
+              <ha-button appearance="plain" size="s" @click=${this._prevStep}
                 >${this.hass.localize("ui.common.back")}</ha-button
               >
               <ha-button
@@ -108,7 +105,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
                 )}
                 target="_blank"
                 rel="noreferrer noopener"
-                size="small"
+                size="s"
                 appearance="plain"
               >
                 <ha-svg-icon .path=${mdiOpenInNew} slot="start"></ha-svg-icon>
@@ -131,10 +128,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
                     "ui.panel.config.voice_assistants.satellite_wizard.local.not_supported_secondary"
                   )}
                 </p>
-                <ha-button
-                  appearance="plain"
-                  size="small"
-                  @click=${this._prevStep}
+                <ha-button appearance="plain" size="s" @click=${this._prevStep}
                   >${this.hass.localize("ui.common.back")}</ha-button
                 >
                 <ha-button
@@ -145,7 +139,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
                   target="_blank"
                   rel="noreferrer noopener"
                   appearance="plain"
-                  size="small"
+                  size="s"
                 >
                   <ha-svg-icon .path=${mdiOpenInNew} slot="start"></ha-svg-icon>
                   ${this.hass.localize(

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts

@@ -131,7 +131,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
                 ></ha-select>
                 <ha-button
                   appearance="plain"
-                  size="small"
+                  size="s"
                   @click=${this._testWakeWord}
                 >
                   <ha-svg-icon
@@ -166,7 +166,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
                 </ha-select>
                 <ha-button
                   appearance="plain"
-                  size="small"
+                  size="s"
                   @click=${this._openPipeline}
                 >
                   <ha-svg-icon slot="start" .path=${mdiCog}></ha-svg-icon>
@@ -186,11 +186,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
                   @value-changed=${this._voicePicked}
                   @closed=${stopPropagation}
                 ></ha-tts-voice-picker>
-                <ha-button
-                  appearance="plain"
-                  size="small"
-                  @click=${this._testTts}
-                >
+                <ha-button appearance="plain" size="s" @click=${this._testTts}>
                   <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.voice_assistants.satellite_wizard.success.try_tts"

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts

@@ -150,7 +150,7 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
         ? html`<div class="footer centered">
             <ha-button
               appearance="plain"
-              size="small"
+              size="s"
               @click=${this._changeWakeWord}
               >${this.hass.localize(
                 "ui.panel.config.voice_assistants.satellite_wizard.wake_word.change_wake_word"

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -117,7 +117,7 @@ export class HaVoiceCommandDialog extends LitElement {
                 slot="trigger"
                 appearance="plain"
                 variant="neutral"
-                size="small"
+                size="s"
                 .loading=${!this._pipelines}
               >
                 ${this._pipeline?.name}

src/layouts/ha-init-page.ts

@@ -23,7 +23,7 @@ class HaInitPage extends LitElement {
           <p class="retry-text">
             Retrying in ${this._retryInSeconds} seconds...
           </p>
-          <ha-button size="small" appearance="plain" @click=${this._retry}
+          <ha-button size="s" appearance="plain" @click=${this._retry}
             >Retry now</ha-button
           >
           ${location.host.includes("ui.nabu.casa")

src/layouts/hass-error-screen.ts

@@ -41,7 +41,7 @@ class HassErrorScreen extends LitElement {
       <div class="content">
         <ha-alert alert-type="error">${this.error}</ha-alert>
         <slot>
-          <ha-button appearance="plain" size="small" @click=${this._handleBack}>
+          <ha-button appearance="plain" size="s" @click=${this._handleBack}>
             ${this.hass?.localize("ui.common.back")}
           </ha-button>
         </slot>

src/managers/notification-manager.ts

@@ -97,7 +97,7 @@ class NotificationManager extends LitElement {
           ? html`
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 slot="action"
                 @click=${this._buttonClicked}
               >

src/onboarding/restore-backup/onboarding-restore-backup-restore.ts

@@ -132,7 +132,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
               href="https://www.home-assistant.io/installation/#advanced-installation-methods"
               target="_blank"
               rel="noreferrer noopener"
-              size="small"
+              size="s"
             >
               ${this.localize(
                 "ui.panel.page-onboarding.restore.ha-cloud.learn_more"

src/panels/calendar/ha-full-calendar.ts

@@ -147,7 +147,7 @@ export class HAFullCalendar extends LitElement {
                     <div class="navigation">
                       <ha-button
                         appearance="filled"
-                        size="small"
+                        size="s"
                         class="today"
                         @click=${this._handleToday}
                         >${this.hass.localize(
@@ -171,7 +171,7 @@ export class HAFullCalendar extends LitElement {
                     <ha-button-toggle-group
                       .buttons=${viewToggleButtons}
                       .active=${this._activeView}
-                      size="small"
+                      size="s"
                       no-wrap
                       @value-changed=${this._handleView}
                     ></ha-button-toggle-group>
@@ -197,7 +197,7 @@ export class HAFullCalendar extends LitElement {
                     <div class="controls buttons">
                       <ha-button
                         appearance="plain"
-                        size="small"
+                        size="s"
                         class="today"
                         @click=${this._handleToday}
                         >${this.hass.localize(
@@ -207,7 +207,7 @@ export class HAFullCalendar extends LitElement {
                       <ha-button-toggle-group
                         .buttons=${viewToggleButtons}
                         .active=${this._activeView}
-                        size="small"
+                        size="s"
                         no-wrap
                         @value-changed=${this._handleView}
                       ></ha-button-toggle-group>
@@ -219,7 +219,7 @@ export class HAFullCalendar extends LitElement {
 
       <div id="calendar"></div>
       ${this.addFab && this._hasMutableCalendars
-        ? html`<ha-button size="large" slot="fab" @click=${this._createEvent}>
+        ? html`<ha-button size="l" slot="fab" @click=${this._createEvent}>
             <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
             ${this.hass.localize("ui.components.calendar.event.add")}
           </ha-button>`

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -175,7 +175,7 @@ export class HaConfigApplicationCredentials extends LitElement {
             ? html`
                 <ha-button
                   appearance="plain"
-                  size="small"
+                  size="s"
                   @click=${this._deleteSelected}
                   variant="danger"
                   >${this.hass.localize(
@@ -199,11 +199,7 @@ export class HaConfigApplicationCredentials extends LitElement {
                 </ha-help-tooltip>
               `}
         </div>
-        <ha-button
-          slot="fab"
-          size="large"
-          @click=${this._addApplicationCredential}
-        >
+        <ha-button slot="fab" size="l" @click=${this._addApplicationCredential}>
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass.localize(
             "ui.panel.config.application_credentials.picker.add_application_credential"

src/panels/config/apps/ha-config-apps-installed.ts

@@ -156,7 +156,7 @@ export class HaConfigAppsInstalled extends LitElement {
               )}
         </div>
 
-        <ha-button size="large" href="/config/apps/available">
+        <ha-button size="l" href="/config/apps/available">
           <ha-svg-icon slot="start" .path=${mdiStorePlus}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.apps.installed.add_app")}
         </ha-button>
@@ -295,7 +295,7 @@ export class HaConfigAppsInstalled extends LitElement {
         cursor: pointer;
       }
 
-      ha-button[size="large"] {
+      ha-button[size="l"] {
         position: fixed;
         right: calc(var(--ha-space-4) + var(--safe-area-inset-right));
         bottom: calc(var(--ha-space-4) + var(--safe-area-inset-bottom));

src/panels/config/apps/ha-config-apps-registries.ts

@@ -116,7 +116,7 @@ export class HaConfigAppsRegistries extends LitElement {
           id="registry"
           has-fab
         ></ha-data-table>
-        <ha-button size="large" @click=${this._showAddRegistryDialog}>
+        <ha-button size="l" @click=${this._showAddRegistryDialog}>
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.apps.registries.add")}
         </ha-button>
@@ -184,7 +184,7 @@ export class HaConfigAppsRegistries extends LitElement {
     ha-icon-button.delete {
       color: var(--error-color);
     }
-    ha-button[size="large"] {
+    ha-button[size="l"] {
       position: fixed;
       right: calc(var(--ha-space-4) + var(--safe-area-inset-right));
       bottom: calc(var(--ha-space-4) + var(--safe-area-inset-bottom));

src/panels/config/apps/ha-config-apps-repositories.ts

@@ -195,7 +195,7 @@ export class HaConfigAppsRepositories extends LitElement {
           id="slug"
           has-fab
         ></ha-data-table>
-        <ha-button size="large" @click=${this._showAddRepositoryDialog}>
+        <ha-button size="l" @click=${this._showAddRepositoryDialog}>
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.apps.repositories.add")}
         </ha-button>
@@ -292,7 +292,7 @@ export class HaConfigAppsRepositories extends LitElement {
     ha-icon-button.delete {
       color: var(--error-color);
     }
-    ha-button[size="large"] {
+    ha-button[size="l"] {
       position: fixed;
       right: calc(var(--ha-space-4) + var(--safe-area-inset-right));
       bottom: calc(var(--ha-space-4) + var(--safe-area-inset-bottom));

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -318,7 +318,7 @@ export class HaConfigAreasDashboard extends LitElement {
             : nothing}
         </div>
         <ha-dropdown slot="fab" @wa-select=${this._handleCreateAction}>
-          <ha-button slot="trigger" id="fab" size="large">
+          <ha-button slot="trigger" id="fab" size="l">
             <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
             ${this.hass.localize("ui.common.add")}
           </ha-button>

src/panels/config/automation/action/ha-automation-action.ts

@@ -120,7 +120,7 @@ export default class HaAutomationAction extends AutomationSortableListMixin<Acti
               .disabled=${this.disabled}
               @click=${this._addActionDialog}
               .appearance=${this.root ? "accent" : "filled"}
-              .size=${this.root ? "medium" : "small"}
+              .size=${this.root ? "m" : "s"}
             >
               <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
               ${this.hass.localize(

src/panels/config/automation/add-automation-element-dialog.ts

@@ -728,7 +728,7 @@ class DialogAddAutomationElement
               active-variant="brand"
               .buttons=${tabButtons}
               .active=${this._tab}
-              size="small"
+              size="s"
               full-width
               @value-changed=${this._switchTab}
             ></ha-button-toggle-group>`

src/panels/config/automation/blueprint-automation-editor.ts

@@ -35,7 +35,7 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
               )}
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 slot="action"
                 @click=${this._enable}
               >
@@ -57,7 +57,7 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
 
       <ha-button
         slot="fab"
-        size="large"
+        size="l"
         class=${this.dirty ? "dirty" : ""}
         .disabled=${this.saving}
         @click=${this._saveAutomation}

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -294,7 +294,7 @@ export default class HaAutomationCondition extends AutomationSortableListMixin<C
               .disabled=${this.disabled}
               @click=${this._addConditionDialog}
               .appearance=${this.root ? "accent" : "filled"}
-              .size=${this.root ? "medium" : "small"}
+              .size=${this.root ? "m" : "s"}
             >
               <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
               ${this.hass.localize(

src/panels/config/automation/ha-automation-editor.ts

@@ -237,7 +237,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
           ? html`
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 @click=${this._showTrace}
                 slot="toolbar-icon"
               >
@@ -490,7 +490,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
                                     )}
                                     <ha-button
                                       appearance="filled"
-                                      size="small"
+                                      size="s"
                                       variant="warning"
                                       slot="action"
                                       @click=${this._duplicate}
@@ -508,7 +508,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
                                       "ui.panel.config.automation.editor.disabled"
                                     )}
                                     <ha-button
-                                      size="small"
+                                      size="s"
                                       slot="action"
                                       @click=${this._toggle}
                                     >
@@ -533,7 +533,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
                           )}
                           <ha-button
                             appearance="filled"
-                            size="small"
+                            size="s"
                             slot="action"
                             @click=${this._toggle}
                           >
@@ -553,7 +553,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
                   ></ha-yaml-editor>
                   <ha-button
                     slot="fab"
-                    size="large"
+                    size="l"
                     class=${this.dirty ? "dirty" : ""}
                     .disabled=${this.saving}
                     @click=${this._handleSaveAutomation}

src/panels/config/automation/ha-automation-note.ts

@@ -23,11 +23,7 @@ export class HaAutomationNote extends LitElement {
               "ui.panel.config.automation.editor.note.label"
             )}
           </span>
-          <ha-button
-            @click=${this._handleClick}
-            size="small"
-            appearance="plain"
-          >
+          <ha-button @click=${this._handleClick} size="s" appearance="plain">
             ${this._i18n.localize("ui.common.edit")}
           </ha-button>
         </div>

src/panels/config/automation/ha-automation-picker.ts

@@ -695,14 +695,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
                 target="_blank"
                 appearance="plain"
                 rel="noreferrer"
-                size="small"
+                size="s"
               >
                 ${this.hass.localize("ui.panel.config.common.learn_more")}
                 <ha-svg-icon slot="end" .path=${mdiOpenInNew}> </ha-svg-icon>
               </ha-button>
             </div>`
           : nothing}
-        <ha-button slot="fab" size="large" @click=${this._createNew}>
+        <ha-button slot="fab" size="l" @click=${this._createNew}>
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass.localize(
             "ui.panel.config.automation.picker.add_automation"

src/panels/config/automation/ha-automation-trace.ts

@@ -110,7 +110,7 @@ export class HaAutomationTrace extends LitElement {
           ? html`
               <ha-button
                 appearance="plain"
-                size="small"
+                size="s"
                 class="trace-link"
                 @click=${this._navigateToAutomation}
                 slot="toolbar-icon"

src/panels/config/automation/ha-manual-editor-mixin.ts

@@ -114,7 +114,7 @@ export const ManualEditorMixin = <TConfig>(
             <div class="fab-positioner">
               <ha-button
                 slot="fab"
-                size="large"
+                size="l"
                 class=${this.dirty ? "dirty" : ""}
                 .disabled=${this.saving}
                 @click=${this.saveConfig}

src/panels/config/automation/option/ha-automation-option.ts

@@ -92,7 +92,7 @@ export default class HaAutomationOption extends AutomationSortableListMixin<Opti
           <div class="buttons">
             <ha-button
               appearance="filled"
-              size="small"
+              size="s"
               .disabled=${this.disabled}
               @click=${this._addOption}
             >
@@ -104,7 +104,7 @@ export default class HaAutomationOption extends AutomationSortableListMixin<Opti
             ${!this.showDefaultActions
               ? html`<ha-button
                   appearance="plain"
-                  size="small"
+                  size="s"
                   .disabled=${this.disabled}
                   @click=${this._showDefaultActions}
                 >

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -179,7 +179,7 @@ export default class HaAutomationTrigger extends AutomationSortableListMixin<Tri
               .disabled=${this.disabled}
               @click=${this._addTriggerDialog}
               .appearance=${this.root ? "accent" : "filled"}
-              .size=${this.root ? "medium" : "small"}
+              .size=${this.root ? "m" : "s"}
             >
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.add"

src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts

@@ -40,7 +40,7 @@ class HaBackupConfigEncryptionKey extends LitElement {
               appearance="plain"
               slot="end"
               @click=${this._download}
-              size="small"
+              size="s"
             >
               <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
               ${this.hass.localize(
@@ -63,7 +63,7 @@ class HaBackupConfigEncryptionKey extends LitElement {
               appearance="plain"
               slot="end"
               @click=${this._show}
-              size="small"
+              size="s"
             >
               ${this.hass.localize(
                 "ui.panel.config.backup.encryption_key.show_encryption_key_action"
@@ -84,7 +84,7 @@ class HaBackupConfigEncryptionKey extends LitElement {
             <ha-button
               appearance="plain"
               variant="danger"
-              size="small"
+              size="s"
               slot="end"
               @click=${this._change}
             >
@@ -156,7 +156,7 @@ class HaBackupConfigEncryptionKey extends LitElement {
     ha-list-item-base::part(supporting-text) {
       white-space: wrap;
     }
-    ha-button[size="small"] ha-svg-icon {
+    ha-button[size="s"] ha-svg-icon {
       --mdc-icon-size: 16px;
     }
   `;

src/panels/config/backup/dialogs/dialog-backup-onboarding.ts

@@ -379,7 +379,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
               )}
             </span>
             <ha-button
-              size="small"
+              size="s"
               appearance="plain"
               slot="end"
               @click=${this._downloadKey}

src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts

@@ -146,7 +146,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
               )}
             </span>
             <ha-button
-              size="small"
+              size="s"
               appearance="plain"
               slot="end"
               @click=${this._download}

src/panels/config/backup/ha-config-backup-backups.ts

@@ -533,7 +533,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
           ? html`
               <ha-button
                 slot="fab"
-                size="large"
+                size="l"
                 ?disabled=${backupInProgress}
                 @click=${this._newBackup}
               >

src/panels/config/backup/ha-config-backup-location.ts

@@ -161,7 +161,7 @@ class HaConfigBackupDetails extends LitElement {
                                 slot="end"
                                 rel="noreferrer noopener"
                                 appearance="plain"
-                                size="small"
+                                size="s"
                               >
                                 ${this.hass.localize(
                                   "ui.panel.config.backup.location.encryption.location_encrypted_cloud_learn_more"

src/panels/config/backup/ha-config-backup-overview.ts

@@ -323,7 +323,7 @@ class HaConfigBackupOverview extends LitElement {
 
         <ha-button
           slot="fab"
-          size="large"
+          size="l"
           .loading=${backupInProgress}
           @click=${this._newBackup}
         >

src/panels/config/backup/ha-config-backup-settings.ts

@@ -289,7 +289,7 @@ class HaConfigBackupSettings extends LitElement {
               : nothing}
             <div class="card-actions">
               <ha-button
-                size="small"
+                size="s"
                 href=${documentationUrl(this.hass, "/integrations/#backup")}
                 target="_blank"
                 rel="noreferrer"
@@ -302,7 +302,7 @@ class HaConfigBackupSettings extends LitElement {
               </ha-button>
               ${supervisor
                 ? html`<ha-button
-                    size="small"
+                    size="s"
                     appearance="plain"
                     href="/config/storage"
                   >
@@ -478,7 +478,7 @@ class HaConfigBackupSettings extends LitElement {
       justify-content: space-between;
     }
 
-    ha-button[size="small"] ha-svg-icon {
+    ha-button[size="s"] ha-svg-icon {
       --mdc-icon-size: 16px;
     }
   `;

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -174,7 +174,7 @@ class DialogImportBlueprint extends LitElement {
                   )}
                 </p>
                 <ha-button
-                  size="small"
+                  size="s"
                   appearance="plain"
                   href=${documentationUrl(this.hass, "/get-blueprints")}
                   target="_blank"

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -349,7 +349,7 @@ class HaBlueprintOverview extends LitElement {
             href=${documentationUrl(this.hass, "/get-blueprints")}
             target="_blank"
             rel="noreferrer noopener"
-            size="small"
+            size="s"
           >
             ${this.hass.localize(
               "ui.panel.config.blueprint.overview.discover_more"
@@ -375,7 +375,7 @@ class HaBlueprintOverview extends LitElement {
           .path=${mdiHelpCircleOutline}
           @click=${this._showHelp}
         ></ha-icon-button>
-        <ha-button slot="fab" size="large" @click=${this._addBlueprintClicked}>
+        <ha-button slot="fab" size="l" @click=${this._addBlueprintClicked}>
           <ha-svg-icon slot="start" .path=${mdiDownload}></ha-svg-icon>
           ${this.hass.localize(
             "ui.panel.config.blueprint.overview.add_blueprint"

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -187,7 +187,7 @@ export class CloudRemotePref extends LitElement {
               <ha-button
                 slot="end"
                 appearance="plain"
-                size="small"
+                size="s"
                 @click=${this._openCertInfo}
               >
                 ${this.hass.localize(

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -95,7 +95,7 @@ export class CloudWebhooks extends LitElement {
                               <ha-button
                                 slot="end"
                                 appearance="plain"
-                                size="small"
+                                size="s"
                                 @click=${this._handleManageButton}
                               >
                                 ${this.hass!.localize(

src/panels/config/core/ha-config-analytics.ts

@@ -123,7 +123,7 @@ class ConfigAnalytics extends SubscribeMixin(LitElement) {
             </div>
             <div class="card-actions">
               <ha-button
-                size="small"
+                size="s"
                 appearance="plain"
                 @click=${this._downloadDeviceInfo}
               >

src/panels/config/core/ha-config-section-updates.ts

@@ -217,7 +217,7 @@ class HaConfigSectionUpdates extends LitElement {
                       ? html`
                           <ha-button
                             appearance="plain"
-                            size="small"
+                            size="s"
                             .group=${group}
                             .disabled=${group.entities.every((entity) =>
                               updateIsInstalling(entity)
@@ -232,6 +232,7 @@ class HaConfigSectionUpdates extends LitElement {
                       : nothing}
                   </div>
                   <ha-config-updates
+                    .hass=${this.hass}
                     .narrow=${this.narrow}
                     .updateEntities=${group.entities}
                     showAll
@@ -255,6 +256,7 @@ class HaConfigSectionUpdates extends LitElement {
                       </div>
                     </div>
                     <ha-config-updates
+                      .hass=${this.hass}
                       .narrow=${this.narrow}
                       .updateEntities=${skippedUpdates}
                       showAll
@@ -278,6 +280,7 @@ class HaConfigSectionUpdates extends LitElement {
                       </div>
                     </div>
                     <ha-config-updates
+                      .hass=${this.hass}
                       .narrow=${this.narrow}
                       .updateEntities=${notInstallableUpdates}
                       showAll

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -326,6 +326,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
                           </a>
                         </div>
                         <ha-config-updates
+                          .hass=${this.hass}
                           .narrow=${this.narrow}
                           .updateEntities=${canInstallUpdates}
                         ></ha-config-updates>

src/panels/config/dashboard/ha-config-updates.ts

@@ -1,9 +1,9 @@
-import { consume, type ContextType } from "@lit/context";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import { consumeLocalize } from "../../../common/decorators/consume-context-entry";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../../common/entity/context/get_device_context";
@@ -14,51 +14,62 @@ import "../../../components/ha-spinner";
 import "../../../components/item/ha-list-item-button";
 import "../../../components/list/ha-list-base";
 import "../../../components/progress/ha-progress-ring";
-import {
-  areasContext,
-  devicesContext,
-  fullEntitiesContext,
-  statesContext,
-} from "../../../data/context";
-import { entityRegistryByEntityId } from "../../../data/entity/entity_registry";
+import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
+import { subscribeDeviceRegistry } from "../../../data/device/device_registry";
+import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
+import { subscribeEntityRegistry } from "../../../data/entity/entity_registry";
 import type { UpdateEntity } from "../../../data/update";
-import type { LocalizeFunc } from "../../../common/translations/localize";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../types";
 
 @customElement("ha-config-updates")
-class HaConfigUpdates extends LitElement {
+class HaConfigUpdates extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Boolean }) public narrow = false;
 
   @property({ attribute: false }) public updateEntities?: UpdateEntity[];
 
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @consume({ context: statesContext, subscribe: true })
-  private _states!: ContextType<typeof statesContext>;
+  @state() private _entities?: EntityRegistryEntry[];
 
-  @consume({ context: devicesContext, subscribe: true })
-  private _devices!: ContextType<typeof devicesContext>;
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeDeviceRegistry(this.hass.connection, (entries) => {
+        this._devices = entries;
+      }),
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        this._entities = entities.filter((entity) => entity.device_id !== null);
+      }),
+    ];
+  }
 
-  @consume({ context: areasContext, subscribe: true })
-  private _areas!: ContextType<typeof areasContext>;
+  private getDeviceEntry = memoizeOne(
+    (deviceId: string): DeviceRegistryEntry | undefined =>
+      this._devices?.find((device) => device.id === deviceId)
+  );
 
-  @state()
-  @consume({ context: fullEntitiesContext, subscribe: true })
-  private _entities: ContextType<typeof fullEntitiesContext> = [];
+  private getEntityEntry = memoizeOne(
+    (entityId: string): EntityRegistryEntry | undefined =>
+      this._entities?.find((entity) => entity.entity_id === entityId)
+  );
 
   private _renderUpdateProgress(entity: UpdateEntity) {
     if (entity.attributes.update_percentage != null) {
       return html`<ha-progress-ring
         size="small"
         .value=${entity.attributes.update_percentage}
-        .label=${this._localize("ui.panel.config.updates.update_in_progress")}
+        .label=${this.hass.localize(
+          "ui.panel.config.updates.update_in_progress"
+        )}
       ></ha-progress-ring>`;
     }
 
     if (entity.attributes.in_progress) {
       return html`<ha-spinner
         size="small"
-        .ariaLabel=${this._localize(
+        .ariaLabel=${this.hass.localize(
           "ui.panel.config.updates.update_in_progress"
         )}
       ></ha-spinner>`;
@@ -73,23 +84,22 @@ class HaConfigUpdates extends LitElement {
     }
 
     const updates = this.updateEntities;
-    const entities = entityRegistryByEntityId(this._entities);
 
     return html`
       <ha-list-base
-        aria-label=${this._localize("ui.panel.config.updates.caption")}
+        aria-label=${this.hass.localize("ui.panel.config.updates.caption")}
       >
         ${updates.map((entity) => {
-          const entityEntry = entities[entity.entity_id];
+          const entityEntry = this.getEntityEntry(entity.entity_id);
           const deviceEntry =
             entityEntry && entityEntry.device_id
-              ? this._devices[entityEntry.device_id]
+              ? this.getDeviceEntry(entityEntry.device_id)
               : undefined;
 
           const areaName =
             deviceEntry && deviceEntry.entry_type !== "service"
-              ? getDeviceArea(deviceEntry, this._areas)?.name ||
-                this._localize("ui.panel.config.updates.no_area")
+              ? getDeviceArea(deviceEntry, this.hass.areas)?.name ||
+                this.hass.localize("ui.panel.config.updates.no_area")
               : undefined;
 
           return html`
@@ -102,6 +112,7 @@ class HaConfigUpdates extends LitElement {
                 <state-badge
                   .title=${entity.attributes.title ||
                   entity.attributes.friendly_name}
+                  .hass=${this.hass}
                   .stateObj=${entity}
                   class=${ifDefined(
                     this.narrow && entity.attributes.in_progress
@@ -119,8 +130,8 @@ class HaConfigUpdates extends LitElement {
                 >${deviceEntry
                   ? computeDeviceNameDisplay(
                       deviceEntry,
-                      this._localize,
-                      this._states
+                      this.hass.localize,
+                      this.hass.states
                     )
                   : entity.attributes.friendly_name}</span
               >
@@ -128,7 +139,7 @@ class HaConfigUpdates extends LitElement {
                 ${areaName ? html`${areaName} ⸱ ` : nothing}
                 ${entity.attributes.title} ${entity.attributes.latest_version}
                 ${entity.attributes.skipped_version
-                  ? `(${this._localize("ui.panel.config.updates.skipped")})`
+                  ? `(${this.hass.localize("ui.panel.config.updates.skipped")})`
                   : nothing}
               </span>
               ${!this.narrow

src/panels/config/developer-tools/action/developer-tools-action.ts

@@ -167,7 +167,7 @@ class HaPanelDevAction extends MatchMinHeightMixin(LitElement) {
                 )}
               </div>
               <ha-button-toggle-group
-                size="small"
+                size="s"
                 class="yaml-mode-toggle"
                 .buttons=${modeButtons}
                 .active=${this._yamlMode ? "yaml" : "ui"}

src/panels/config/developer-tools/statistics/developer-tools-statistics.ts

@@ -274,7 +274,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
                 @click=${this._fixIssue}
                 .data=${statistic.issues}
                 appearance="plain"
-                size="small"
+                size="s"
               >
                 ${localize(
                   statistic.issues.some((issue) =>

src/panels/config/devices/ha-config-device-page.ts

@@ -519,7 +519,7 @@ export class HaConfigDevicePage extends LitElement {
               <div class="card-actions" slot="actions">
                 <ha-button
                   variant="warning"
-                  size="small"
+                  size="s"
                   @click=${this._enableDevice}
                 >
                   ${this.hass.localize("ui.common.enable")}

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -811,7 +811,7 @@ export class HaConfigDeviceDashboard extends LitElement {
           .hass=${this.hass}
           slot="toolbar-icon"
         ></ha-integration-overflow-menu>
-        <ha-button slot="fab" size="large" @click=${this._addDevice}>
+        <ha-button slot="fab" size="l" @click=${this._addDevice}>
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.devices.add_device")}
         </ha-button>
@@ -846,6 +846,7 @@ export class HaConfigDeviceDashboard extends LitElement {
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-floor-areas>
         <ha-filter-integrations
+          .hass=${this.hass}
           .value=${this._filters["ha-filter-integrations"]?.value}
           @data-table-filter-changed=${this._filterChanged}
           slot="filter-pane"

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -140,11 +140,7 @@ export class EnergyBatterySettings extends LitElement {
               `
             : ""}
           <div class="row">
-            <ha-button
-              @click=${this._addSource}
-              appearance="filled"
-              size="small"
-            >
+            <ha-button @click=${this._addSource} appearance="filled" size="s">
               <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
               ${this.hass.localize(
                 "ui.panel.config.energy.battery.add_battery_system"

src/panels/config/energy/components/ha-energy-device-settings-water.ts

@@ -137,11 +137,7 @@ export class EnergyDeviceSettingsWater extends LitElement {
               `
             : ""}
           <div class="row">
-            <ha-button
-              @click=${this._addDevice}
-              appearance="filled"
-              size="small"
-            >
+            <ha-button @click=${this._addDevice} appearance="filled" size="s">
               <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
               >${this.hass.localize(
                 "ui.panel.config.energy.device_consumption_water.add_device"

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -135,11 +135,7 @@ export class EnergyDeviceSettings extends LitElement {
               `
             : ""}
           <div class="row">
-            <ha-button
-              @click=${this._addDevice}
-              appearance="filled"
-              size="small"
-            >
+            <ha-button @click=${this._addDevice} appearance="filled" size="s">
               <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
               >${this.hass.localize(
                 "ui.panel.config.energy.device_consumption.add_device"

src/panels/config/energy/components/ha-energy-gas-settings.ts

@@ -124,11 +124,7 @@ export class EnergyGasSettings extends LitElement {
               `
             : ""}
           <div class="row">
-            <ha-button
-              @click=${this._addSource}
-              appearance="filled"
-              size="small"
-            >
+            <ha-button @click=${this._addSource} appearance="filled" size="s">
               <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
               >${this.hass.localize(
                 "ui.panel.config.energy.gas.add_gas_source"

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -164,11 +164,7 @@ export class EnergyGridSettings extends LitElement {
               `
             : nothing}
           <div class="row">
-            <ha-button
-              @click=${this._addSource}
-              appearance="filled"
-              size="small"
-            >
+            <ha-button @click=${this._addSource} appearance="filled" size="s">
               <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
               ${this.hass.localize(
                 "ui.panel.config.energy.grid.add_connection"
@@ -219,7 +215,7 @@ export class EnergyGridSettings extends LitElement {
                   <ha-button
                     @click=${this._addCO2Sensor}
                     appearance="filled"
-                    size="small"
+                    size="s"
                   >
                     <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
                     ${this.hass.localize(

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -138,7 +138,7 @@ export class EnergySolarSettings extends LitElement {
                   <ha-button
                     @click=${this._addSource}
                     appearance="filled"
-                    size="small"
+                    size="s"
                   >
                     <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
                     ${this.hass.localize(

src/panels/config/energy/components/ha-energy-water-settings.ts

@@ -123,11 +123,7 @@ export class EnergyWaterSettings extends LitElement {
               `
             : ""}
           <div class="row">
-            <ha-button
-              @click=${this._addSource}
-              appearance="filled"
-              size="small"
-            >
+            <ha-button @click=${this._addSource} appearance="filled" size="s">
               <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
               >${this.hass.localize(
                 "ui.panel.config.energy.water.add_water_source"

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -227,7 +227,7 @@ export class DialogEnergySolarSettings
               )}
               <ha-button
                 appearance="filled"
-                size="small"
+                size="s"
                 @click=${this._addForecast}
               >
                 <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>

src/panels/config/entities/entity-registry-settings.ts

@@ -92,7 +92,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                 ? html`${this.hass!.localize(
                       "ui.dialogs.entity_registry.editor.device_disabled"
                     )}<ha-button
-                      size="small"
+                      size="s"
                       variant="warning"
                       @click=${this._openDeviceSettings}
                       slot="action"
@@ -108,7 +108,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                       this.entry.disabled_by!
                     )
                       ? html`<ha-button
-                          size="small"
+                          size="s"
                           variant="warning"
                           slot="action"
                           @click=${this._enableEntry}

src/panels/config/entities/ha-config-entities.ts

@@ -1014,6 +1014,7 @@ export class HaConfigEntities extends LitElement {
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-domains>
         <ha-filter-integrations
+          .hass=${this.hass}
           .value=${this._filters["ha-filter-integrations"]}
           @data-table-filter-changed=${this._filterChanged}
           slot="filter-pane"
@@ -1053,7 +1054,7 @@ export class HaConfigEntities extends LitElement {
           @expanded-changed=${this._filterExpanded}
         ></ha-filter-voice-assistants>
         ${includeAddDeviceFab
-          ? html`<ha-button size="large" @click=${this._addDevice} slot="fab">
+          ? html`<ha-button size="l" @click=${this._addDevice} slot="fab">
               <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
               ${this.hass.localize("ui.panel.config.devices.add_device")}
             </ha-button>`

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -150,7 +150,7 @@ class HaInputSelectForm extends LitElement {
             .disabled=${this.disabled}
           ></ha-input>
           <ha-button
-            size="small"
+            size="s"
             appearance="filled"
             @click=${this._addOption}
             .disabled=${this.disabled}

src/panels/config/helpers/ha-config-helpers.ts

@@ -802,7 +802,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           .hass=${this.hass}
           slot="toolbar-icon"
         ></ha-integration-overflow-menu>
-        <ha-button slot="fab" size="large" @click=${this._createHelper}>
+        <ha-button slot="fab" size="l" @click=${this._createHelper}>
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.helpers.picker.create_helper")}
         </ha-button>

src/panels/config/integrations/ha-config-integration-page.ts

@@ -670,7 +670,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                     "ui.panel.config.integrations.config_entry.debug_logging_enabled"
                   )}
                   <ha-button
-                    size="small"
+                    size="s"
                     variant="warning"
                     slot="action"
                     @click=${this._handleDisableDebugLogging}
@@ -696,7 +696,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                           <ha-button
                             slot="end"
                             variant="success"
-                            size="small"
+                            size="s"
                             .flow=${flow}
                             @click=${this._continueFlow}
                           >

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -557,7 +557,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
                         )}
                         <ha-button
                           appearance="plain"
-                          size="small"
+                          size="s"
                           @click=${this._toggleShowDisabled}
                         >
                           ${this.hass.localize(
@@ -677,7 +677,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
                     <ha-button
                       @click=${this._createFlow}
                       appearance="filled"
-                      size="small"
+                      size="s"
                     >
                       <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
                       ${this.hass.localize(
@@ -709,7 +709,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
                         <ha-button
                           @click=${this._createFlow}
                           appearance="filled"
-                          size="small"
+                          size="s"
                         >
                           <ha-svg-icon
                             slot="start"
@@ -723,7 +723,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
                     `
                   : ""}
         </div>
-        <ha-button slot="fab" size="large" @click=${this._createFlow}>
+        <ha-button slot="fab" size="l" @click=${this._createFlow}>
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.integrations.add_integration")}
         </ha-button>

src/panels/config/integrations/integration-panels/matter/matter-config-dashboard.ts

@@ -91,7 +91,7 @@ export class MatterConfigDashboard extends LitElement {
           ${this._renderNavigationCard()}
         </div>
 
-        <ha-button slot="fab" href="/config/matter/add" size="large">
+        <ha-button slot="fab" href="/config/matter/add" size="l">
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.matter.panel.add_device")}
         </ha-button>

src/panels/config/integrations/integration-panels/matter/matter-options-page.ts

@@ -69,7 +69,7 @@ class MatterOptionsPage extends LitElement {
                     <ha-button
                       appearance="plain"
                       slot="end"
-                      size="small"
+                      size="s"
                       @click=${this._startMobileCommissioning}
                     >
                       ${this.hass.localize(
@@ -92,7 +92,7 @@ class MatterOptionsPage extends LitElement {
                 <ha-button
                   appearance="plain"
                   slot="end"
-                  size="small"
+                  size="s"
                   @click=${this._commission}
                 >
                   ${this.hass.localize(
@@ -114,7 +114,7 @@ class MatterOptionsPage extends LitElement {
                 <ha-button
                   appearance="plain"
                   slot="end"
-                  size="small"
+                  size="s"
                   @click=${this._acceptSharedDevice}
                 >
                   ${this.hass.localize(
@@ -136,7 +136,7 @@ class MatterOptionsPage extends LitElement {
                 <ha-button
                   appearance="plain"
                   slot="end"
-                  size="small"
+                  size="s"
                   @click=${this._setWifi}
                 >
                   ${this.hass.localize(
@@ -158,7 +158,7 @@ class MatterOptionsPage extends LitElement {
                 <ha-button
                   appearance="plain"
                   slot="end"
-                  size="small"
+                  size="s"
                   @click=${this._setThread}
                 >
                   ${this.hass.localize(

src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts

@@ -101,7 +101,7 @@ class MqttSubscribeCard extends LitElement {
             </ha-select>
             <ha-button
               appearance="plain"
-              size="small"
+              size="s"
               .disabled=${this._topic === ""}
               @click=${this._handleSubmit}
             >

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -125,7 +125,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
                   <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
                   <ha-button
                     appearance="plain"
-                    size="small"
+                    size="s"
                     href=${documentationUrl(this.hass, `/integrations/thread`)}
                     target="_blank"
                   >
@@ -157,7 +157,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
                   </div>
                   <div class="card-actions">
                     <ha-button
-                      size="small"
+                      size="s"
                       @click=${this._importExternalThreadCredentials}
                     >
                       ${this.hass.localize(
@@ -322,7 +322,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
                   )}
                   <ha-button
                     appearance="plain"
-                    size="small"
+                    size="s"
                     .otbr=${otbrForNetwork}
                     @click=${this._resetBorderRouterEvent}
                     >${this.hass.localize(
@@ -334,7 +334,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
       ${network.dataset && !network.dataset.preferred
         ? html`<div class="card-actions">
             <ha-button
-              size="small"
+              size="s"
               .datasetId=${network.dataset.dataset_id}
               @click=${this._setPreferred}
               >${this.hass.localize(
@@ -353,7 +353,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
               )}
             </p>
             <ha-button
-              size="small"
+              size="s"
               .networkDataset=${network.dataset}
               @click=${this._sendCredentials}
               >${this.hass.localize(

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -80,7 +80,7 @@ class ZHAAddDevicesPage extends LitElement {
       >
         <ha-button
           appearance="plain"
-          size="small"
+          size="s"
           slot="toolbar-icon"
           @click=${this._toggleLogs}
           >${this._showLogs ? "Hide logs" : "Show logs"}</ha-button

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -105,7 +105,7 @@ class ZHAConfigDashboard extends LitElement {
         </div>
 
         <a href="/config/zha/add" slot="fab">
-          <ha-button size="large">
+          <ha-button size="l">
             <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
             ${this.hass.localize("ui.panel.config.zha.add_device")}
           </ha-button>
@@ -319,7 +319,7 @@ class ZHAConfigDashboard extends LitElement {
               <ha-button
                 appearance="plain"
                 slot="end"
-                size="small"
+                size="s"
                 @click=${this._createAndDownloadBackup}
               >
                 <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
@@ -342,7 +342,7 @@ class ZHAConfigDashboard extends LitElement {
               <ha-button
                 appearance="plain"
                 slot="end"
-                size="small"
+                size="s"
                 @click=${this._openOptionFlow}
               >
                 ${this.hass.localize(
@@ -472,7 +472,7 @@ class ZHAConfigDashboard extends LitElement {
           --md-item-overflow: visible;
         }
 
-        ha-button[size="small"] ha-svg-icon {
+        ha-button[size="s"] ha-svg-icon {
           --mdc-icon-size: 16px;
         }
 

src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts

@@ -119,7 +119,7 @@ export class ZHAGroupsDashboard extends LitElement {
         clickable
         has-fab
       >
-        <ha-button href="/config/zha/group-add" slot="fab" size="large">
+        <ha-button href="/config/zha/group-add" slot="fab" size="l">
           <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.hass!.localize("ui.panel.config.zha.groups.add_group")}
         </ha-button>