Merge branch 'dev' into sec_pypi_publishing

* Update formatjs monorepo

* Add compiler paths

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

.github/copilot-instructions.md

@@ -154,7 +154,7 @@ try {
 
 - **Use CSS custom properties**: Leverage the theme system
 - **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-0` (0px) through `--ha-space-20` (80px) in 4px increments
+  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
   - Defined in `src/resources/theme/core.globals.ts`
   - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop

.github/workflows/release.yaml

@@ -19,8 +19,11 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+    environment: pypi
     permissions:
       contents: write # Required to upload release assets
+      id-token: write # For "Trusted Publisher" to PyPi
+    if: github.repository_owner == 'home-assistant'
     steps:
       - name: Checkout the repository
         uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
@@ -46,14 +49,18 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+
       - name: Build and release package
         run: |
-          python3 -m pip install twine build
-          export TWINE_USERNAME="__token__"
-          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
+          python3 -m pip install build
           export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/release
 
+      - name: Publish to PyPI
+        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        with:
+          skip-existing: true
+
       - name: Upload release assets
         uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
         with:

.yarnrc.yml

@@ -1,5 +1,7 @@
 compressionLevel: mixed
 
+npmMinimalAgeGate: "3d"
+
 defaultSemverRangePrefix: ""
 
 enableGlobalCache: false

build-scripts/bundle.cjs

@@ -20,8 +20,6 @@ module.exports.ignorePackages = () => [];
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
   [
-    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     (isHassioBuild || isLandingPageBuild) &&
       require.resolve(

build-scripts/rspack.cjs

@@ -168,12 +168,16 @@ const createRspackConfig = ({
           );
         },
       }),
-      new rspack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
-        ),
-        path.resolve(paths.root_dir, "src/util/empty.js")
-      ),
+      bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).length
+        ? new rspack.NormalModuleReplacementPlugin(
+            new RegExp(
+              bundle
+                .emptyPackages({ isHassioBuild, isLandingPageBuild })
+                .join("|")
+            ),
+            path.resolve(paths.root_dir, "src/util/empty.js")
+          )
+        : false,
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({
@@ -217,6 +221,42 @@ const createRspackConfig = ({
           "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
         "@lit-labs/observers/resize-controller":
           "@lit-labs/observers/resize-controller.js",
+        "@formatjs/intl-durationformat/should-polyfill$":
+          "@formatjs/intl-durationformat/should-polyfill.js",
+        "@formatjs/intl-durationformat/polyfill-force$":
+          "@formatjs/intl-durationformat/polyfill-force.js",
+        "@formatjs/intl-datetimeformat/should-polyfill":
+          "@formatjs/intl-datetimeformat/should-polyfill.js",
+        "@formatjs/intl-datetimeformat/polyfill-force":
+          "@formatjs/intl-datetimeformat/polyfill-force.js",
+        "@formatjs/intl-displaynames/should-polyfill":
+          "@formatjs/intl-displaynames/should-polyfill.js",
+        "@formatjs/intl-displaynames/polyfill-force":
+          "@formatjs/intl-displaynames/polyfill-force.js",
+        "@formatjs/intl-getcanonicallocales/should-polyfill":
+          "@formatjs/intl-getcanonicallocales/should-polyfill.js",
+        "@formatjs/intl-getcanonicallocales/polyfill-force":
+          "@formatjs/intl-getcanonicallocales/polyfill-force.js",
+        "@formatjs/intl-listformat/should-polyfill":
+          "@formatjs/intl-listformat/should-polyfill.js",
+        "@formatjs/intl-listformat/polyfill-force":
+          "@formatjs/intl-listformat/polyfill-force.js",
+        "@formatjs/intl-locale/should-polyfill":
+          "@formatjs/intl-locale/should-polyfill.js",
+        "@formatjs/intl-locale/polyfill-force":
+          "@formatjs/intl-locale/polyfill-force.js",
+        "@formatjs/intl-numberformat/should-polyfill":
+          "@formatjs/intl-numberformat/should-polyfill.js",
+        "@formatjs/intl-numberformat/polyfill-force":
+          "@formatjs/intl-numberformat/polyfill-force.js",
+        "@formatjs/intl-pluralrules/should-polyfill":
+          "@formatjs/intl-pluralrules/should-polyfill.js",
+        "@formatjs/intl-pluralrules/polyfill-force":
+          "@formatjs/intl-pluralrules/polyfill-force.js",
+        "@formatjs/intl-relativetimeformat/should-polyfill":
+          "@formatjs/intl-relativetimeformat/should-polyfill.js",
+        "@formatjs/intl-relativetimeformat/polyfill-force":
+          "@formatjs/intl-relativetimeformat/polyfill-force.js",
       },
     },
     output: {

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

@@ -40,6 +40,9 @@ const ENTITIES = [
   getEntity("switch", "coffee", "off", {
     friendly_name: "Coffee",
   }),
+  getEntity("number", "number", 5, {
+    friendly_name: "Number",
+  }),
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [
@@ -377,6 +380,33 @@ const SCHEMAS: {
         name: "Constant",
         selector: { constant: { value: true, label: "Yes!" } },
       },
+      choose: {
+        name: "Choose",
+        selector: {
+          choose: {
+            choices: {
+              number: {
+                selector: {
+                  number: {
+                    min: 0,
+                    max: 100,
+                    step: 0.1,
+                  },
+                },
+              },
+              entity: {
+                selector: {
+                  entity: {
+                    filter: {
+                      domain: "number",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
     },
   },
   {

package.json

@@ -37,15 +37,15 @@
     "@codemirror/view": "6.39.4",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.2",
-    "@formatjs/intl-displaynames": "6.8.13",
-    "@formatjs/intl-durationformat": "0.7.6",
-    "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.13",
-    "@formatjs/intl-locale": "4.2.13",
-    "@formatjs/intl-numberformat": "8.15.6",
-    "@formatjs/intl-pluralrules": "5.4.6",
-    "@formatjs/intl-relativetimeformat": "11.4.13",
+    "@formatjs/intl-datetimeformat": "7.0.1",
+    "@formatjs/intl-displaynames": "7.0.1",
+    "@formatjs/intl-durationformat": "0.8.1",
+    "@formatjs/intl-getcanonicallocales": "3.0.1",
+    "@formatjs/intl-listformat": "8.0.1",
+    "@formatjs/intl-locale": "5.0.1",
+    "@formatjs/intl-numberformat": "9.0.2",
+    "@formatjs/intl-pluralrules": "6.0.1",
+    "@formatjs/intl-relativetimeformat": "12.0.2",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
     "@fullcalendar/interaction": "6.1.19",
@@ -89,8 +89,6 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.6",
-    "@vaadin/vaadin-themable-mixin": "24.9.6",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -114,7 +112,7 @@
     "hls.js": "1.6.15",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.18",
+    "intl-messageformat": "11.0.1",
     "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -178,7 +176,7 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.15",
+    "@vitest/coverage-v8": "4.0.16",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -219,7 +217,7 @@
     "typescript": "5.9.3",
     "typescript-eslint": "8.50.0",
     "vite-tsconfig-paths": "6.0.1",
-    "vitest": "4.0.15",
+    "vitest": "4.0.16",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"

script/release

@@ -1,5 +1,4 @@
 #!/bin/sh
-# Pushes a new version to PyPi.
 
 # Stop on errors
 set -e
@@ -12,5 +11,4 @@ yarn install
 script/build_frontend
 
 rm -rf dist home_assistant_frontend.egg-info
-python3 -m build
-python3 -m twine upload dist/*.whl --skip-existing
+python3 -m build -q

src/components/device/ha-device-picker.ts

@@ -1,4 +1,4 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -162,7 +162,7 @@ export class HaDevicePicker extends LitElement {
     }
   );
 
-  private _rowRenderer: ComboBoxLitRenderer<DevicePickerItem> = (item) => html`
+  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
     <ha-combo-box-item type="button">
       ${item.domain
         ? html`

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

@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiShape } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -172,9 +172,9 @@ export class HaEntityPicker extends LitElement {
     return this.showEntityId || this.hass.userData?.showEntityIdPicker;
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
+  private _rowRenderer: RenderItemFunction<EntityComboBoxItem> = (
     item,
-    { index }
+    index
   ) => {
     const showEntityId = this._showEntityId;
 

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

@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiChartLine, mdiHelpCircle, mdiShape } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
@@ -424,9 +424,9 @@ export class HaStatisticPicker extends LitElement {
     };
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<StatisticComboBoxItem> = (
+  private _rowRenderer: RenderItemFunction<StatisticComboBoxItem> = (
     item,
-    { index }
+    index
   ) => {
     const showEntityId = this.hass.userData?.showEntityIdPicker;
     return html`

src/components/ha-automation-row.ts

@@ -175,7 +175,7 @@ export class HaAutomationRow extends LitElement {
     ::slotted([slot="header"]) {
       flex: 1;
       overflow-wrap: anywhere;
-      margin: var(--ha-space-0) var(--ha-space-3);
+      margin: 0 var(--ha-space-3);
     }
     .icons {
       display: flex;

src/components/ha-bottom-sheet.ts

@@ -241,7 +241,7 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
         }
         slot[name="footer"] {
           display: block;
-          padding: var(--ha-space-0);
+          padding: 0;
         }
         ::slotted([slot="footer"]) {
           display: flex;

src/components/ha-card.ts

@@ -46,14 +46,14 @@ export class HaCard extends LitElement {
       line-height: var(--ha-line-height-expanded);
       padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4);
       display: block;
-      margin-block-start: var(--ha-space-0);
-      margin-block-end: var(--ha-space-0);
+      margin-block-start: 0;
+      margin-block-end: 0;
       font-weight: var(--ha-font-weight-normal);
     }
 
     :host ::slotted(.card-content:not(:first-child)),
     slot:not(:first-child)::slotted(.card-content) {
-      padding-top: var(--ha-space-0);
+      padding-top: 0;
       margin-top: calc(var(--ha-space-2) * -1);
     }
 

src/components/ha-combo-box.ts

@@ -1,433 +0,0 @@
-import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import { comboBoxRenderer } from "@vaadin/combo-box/lit";
-import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
-import type {
-  ComboBoxDataProvider,
-  ComboBoxLight,
-  ComboBoxLightFilterChangedEvent,
-  ComboBoxLightOpenedChangedEvent,
-  ComboBoxLightValueChangedEvent,
-} from "@vaadin/combo-box/vaadin-combo-box-light";
-import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { fireEvent } from "../common/dom/fire_event";
-import type { HomeAssistant } from "../types";
-import "./ha-combo-box-item";
-import "./ha-combo-box-textfield";
-import "./ha-icon-button";
-import "./ha-input-helper-text";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
-
-registerStyles(
-  "vaadin-combo-box-item",
-  css`
-    :host {
-      padding: 0 !important;
-    }
-    :host([focused]:not([disabled])) {
-      background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
-    }
-    :host([selected]:not([disabled])) {
-      background-color: transparent;
-      color: var(--mdc-theme-primary);
-      --mdc-ripple-color: var(--mdc-theme-primary);
-      --mdc-theme-text-primary-on-background: var(--mdc-theme-primary);
-    }
-    :host([selected]:not([disabled])):before {
-      background-color: var(--mdc-theme-primary);
-      opacity: 0.12;
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    :host([selected][focused]:not([disabled])):before {
-      opacity: 0.24;
-    }
-    :host(:hover:not([disabled])) {
-      background-color: transparent;
-    }
-    [part="content"] {
-      width: 100%;
-    }
-    [part="checkmark"] {
-      display: none;
-    }
-  `
-);
-
-@customElement("ha-combo-box")
-export class HaComboBox extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property() public value?: string;
-
-  @property() public placeholder?: string;
-
-  @property({ attribute: false }) public validationMessage?: string;
-
-  @property() public helper?: string;
-
-  @property({ attribute: "error-message" }) public errorMessage?: string;
-
-  @property({ type: Boolean }) public invalid = false;
-
-  @property({ type: Boolean }) public icon = false;
-
-  @property({ attribute: false }) public items?: any[];
-
-  @property({ attribute: false }) public filteredItems?: any[];
-
-  @property({ attribute: false })
-  public dataProvider?: ComboBoxDataProvider<any>;
-
-  @property({ attribute: "allow-custom-value", type: Boolean })
-  public allowCustomValue = false;
-
-  @property({ attribute: "item-value-path" }) public itemValuePath = "value";
-
-  @property({ attribute: "item-label-path" }) public itemLabelPath = "label";
-
-  @property({ attribute: "item-id-path" }) public itemIdPath?: string;
-
-  @property({ attribute: false }) public renderer?: ComboBoxLitRenderer<any>;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property({ type: Boolean, reflect: true }) public opened = false;
-
-  @property({ type: Boolean, attribute: "hide-clear-icon" })
-  public hideClearIcon = false;
-
-  @property({ type: Boolean, attribute: "clear-initial-value" })
-  public clearInitialValue = false;
-
-  @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
-
-  @query("ha-combo-box-textfield", true) private _inputElement!: HaTextField;
-
-  @state({ type: Boolean }) private _forceBlankValue = false;
-
-  private _overlayMutationObserver?: MutationObserver;
-
-  private _bodyMutationObserver?: MutationObserver;
-
-  public async open() {
-    await this.updateComplete;
-    this._comboBox?.open();
-  }
-
-  public async focus() {
-    await this.updateComplete;
-    await this._inputElement?.updateComplete;
-    this._inputElement?.focus();
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._overlayMutationObserver) {
-      this._overlayMutationObserver.disconnect();
-      this._overlayMutationObserver = undefined;
-    }
-    if (this._bodyMutationObserver) {
-      this._bodyMutationObserver.disconnect();
-      this._bodyMutationObserver = undefined;
-    }
-  }
-
-  public get selectedItem() {
-    return this._comboBox.selectedItem;
-  }
-
-  public setInputValue(value: string) {
-    this._comboBox.value = value;
-  }
-
-  public setTextFieldValue(value: string) {
-    this._inputElement.value = value;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <!-- @ts-ignore Tag definition is not included in theme folder -->
-      <vaadin-combo-box-light
-        .itemValuePath=${this.itemValuePath}
-        .itemIdPath=${this.itemIdPath}
-        .itemLabelPath=${this.itemLabelPath}
-        .items=${this.items}
-        .value=${this.value || ""}
-        .filteredItems=${this.filteredItems}
-        .dataProvider=${this.dataProvider}
-        .allowCustomValue=${this.allowCustomValue}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        ${comboBoxRenderer(this.renderer || this._defaultRowRenderer)}
-        @opened-changed=${this._openedChanged}
-        @filter-changed=${this._filterChanged}
-        @value-changed=${this._valueChanged}
-        attr-for-value="value"
-      >
-        <ha-combo-box-textfield
-          label=${ifDefined(this.label)}
-          placeholder=${ifDefined(this.placeholder)}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          validationMessage=${ifDefined(this.validationMessage)}
-          .errorMessage=${this.errorMessage}
-          class="input"
-          autocapitalize="none"
-          autocomplete="off"
-          .autocorrect=${false}
-          input-spellcheck="false"
-          .suffix=${html`<div
-            style="width: 28px;"
-            role="none presentation"
-          ></div>`}
-          .icon=${this.icon}
-          .invalid=${this.invalid}
-          .forceBlankValue=${this._forceBlankValue}
-        >
-          <slot name="icon" slot="leadingIcon"></slot>
-        </ha-combo-box-textfield>
-        ${this.value && !this.hideClearIcon
-          ? html`<ha-svg-icon
-              role="button"
-              tabindex="-1"
-              aria-label=${ifDefined(this.hass?.localize("ui.common.clear"))}
-              class=${`clear-button ${this.label ? "" : "no-label"}`}
-              .path=${mdiClose}
-              ?disabled=${this.disabled}
-              @click=${this._clearValue}
-            ></ha-svg-icon>`
-          : ""}
-        <ha-svg-icon
-          role="button"
-          tabindex="-1"
-          aria-label=${ifDefined(this.label)}
-          aria-expanded=${this.opened ? "true" : "false"}
-          class=${`toggle-button ${this.label ? "" : "no-label"}`}
-          .path=${this.opened ? mdiMenuUp : mdiMenuDown}
-          ?disabled=${this.disabled}
-          @click=${this._toggleOpen}
-        ></ha-svg-icon>
-      </vaadin-combo-box-light>
-      ${this._renderHelper()}
-    `;
-  }
-
-  private _renderHelper() {
-    return this.helper
-      ? html`<ha-input-helper-text .disabled=${this.disabled}
-          >${this.helper}</ha-input-helper-text
-        >`
-      : "";
-  }
-
-  private _defaultRowRenderer: ComboBoxLitRenderer<
-    string | Record<string, any>
-  > = (item) => html`
-    <ha-combo-box-item type="button">
-      ${this.itemLabelPath ? item[this.itemLabelPath] : item}
-    </ha-combo-box-item>
-  `;
-
-  private _clearValue(ev: Event) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", { value: undefined });
-  }
-
-  private _toggleOpen(ev: Event) {
-    if (this.opened) {
-      this._comboBox?.close();
-      ev.stopPropagation();
-    } else {
-      this._comboBox?.inputElement.focus();
-    }
-  }
-
-  private _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
-    ev.stopPropagation();
-    const opened = ev.detail.value;
-    // delay this so we can handle click event for toggle button before setting _opened
-    setTimeout(() => {
-      this.opened = opened;
-      fireEvent(this, "opened-changed", { value: ev.detail.value });
-    }, 0);
-
-    if (this.clearInitialValue) {
-      this.setTextFieldValue("");
-      if (opened) {
-        // Wait 100ms to be sure vaddin-combo-box-light already tried to set the value
-        setTimeout(() => {
-          this._forceBlankValue = false;
-        }, 100);
-      } else {
-        this._forceBlankValue = true;
-      }
-    }
-
-    if (opened) {
-      const overlay = document.querySelector<HTMLElement>(
-        "vaadin-combo-box-overlay"
-      );
-
-      if (overlay) {
-        this._removeInert(overlay);
-      }
-      this._observeBody();
-    } else {
-      this._bodyMutationObserver?.disconnect();
-      this._bodyMutationObserver = undefined;
-    }
-  }
-
-  private _observeBody() {
-    if ("MutationObserver" in window && !this._bodyMutationObserver) {
-      this._bodyMutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          mutation.addedNodes.forEach((node) => {
-            if (node.nodeName === "VAADIN-COMBO-BOX-OVERLAY") {
-              this._removeInert(node as HTMLElement);
-            }
-          });
-          mutation.removedNodes.forEach((node) => {
-            if (node.nodeName === "VAADIN-COMBO-BOX-OVERLAY") {
-              this._overlayMutationObserver?.disconnect();
-              this._overlayMutationObserver = undefined;
-            }
-          });
-        });
-      });
-
-      this._bodyMutationObserver.observe(document.body, {
-        childList: true,
-      });
-    }
-  }
-
-  private _removeInert(overlay: HTMLElement) {
-    if (overlay.inert) {
-      overlay.inert = false;
-      this._overlayMutationObserver?.disconnect();
-      this._overlayMutationObserver = undefined;
-      return;
-    }
-    if ("MutationObserver" in window && !this._overlayMutationObserver) {
-      this._overlayMutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.attributeName === "inert") {
-            const target = mutation.target as HTMLElement;
-            if (target.inert) {
-              this._overlayMutationObserver?.disconnect();
-              this._overlayMutationObserver = undefined;
-              target.inert = false;
-            }
-          }
-        });
-      });
-
-      this._overlayMutationObserver.observe(overlay, {
-        attributes: true,
-      });
-    }
-  }
-
-  private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
-    ev.stopPropagation();
-    fireEvent(this, "filter-changed", { value: ev.detail.value });
-  }
-
-  private _valueChanged(ev: ComboBoxLightValueChangedEvent) {
-    ev.stopPropagation();
-    if (!this.allowCustomValue) {
-      // @ts-ignore
-      this._comboBox._closeOnBlurIsPrevented = true;
-    }
-    if (!this.opened) {
-      return;
-    }
-    const newValue = ev.detail.value;
-    if (newValue !== this.value) {
-      fireEvent(this, "value-changed", { value: newValue || undefined });
-    }
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-    }
-    vaadin-combo-box-light {
-      position: relative;
-    }
-    ha-combo-box-textfield {
-      width: 100%;
-    }
-    ha-combo-box-textfield > ha-icon-button {
-      --mdc-icon-button-size: 24px;
-      padding: 2px;
-      color: var(--secondary-text-color);
-    }
-    ha-svg-icon {
-      color: var(--input-dropdown-icon-color);
-      position: absolute;
-      cursor: pointer;
-    }
-    .toggle-button {
-      right: 12px;
-      top: -10px;
-      inset-inline-start: initial;
-      inset-inline-end: 12px;
-      direction: var(--direction);
-    }
-    :host([opened]) .toggle-button {
-      color: var(--primary-color);
-    }
-    .toggle-button[disabled],
-    .clear-button[disabled] {
-      color: var(--disabled-text-color);
-      pointer-events: none;
-    }
-    .toggle-button.no-label {
-      top: -3px;
-    }
-    .clear-button {
-      --mdc-icon-size: 20px;
-      top: -7px;
-      right: 36px;
-      inset-inline-start: initial;
-      inset-inline-end: 36px;
-      direction: var(--direction);
-    }
-    .clear-button.no-label {
-      top: 0;
-    }
-    ha-input-helper-text {
-      margin-top: 4px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-combo-box": HaComboBox;
-  }
-}
-
-declare global {
-  interface HASSDomEvents {
-    "filter-changed": { value: string };
-    "opened-changed": { value: boolean };
-  }
-}

src/components/ha-dialog.ts

@@ -101,14 +101,13 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__container {
         align-items: var(--vertical-align-dialog, center);
-        padding: var(--dialog-container-padding, var(--ha-space-0));
+        padding: var(--dialog-container-padding, 0);
       }
       .mdc-dialog__title {
-        padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-0)
-          var(--ha-space-4);
+        padding: var(--ha-space-4) var(--ha-space-4) 0 var(--ha-space-4);
       }
       .mdc-dialog__title:has(span) {
-        padding: var(--ha-space-3) var(--ha-space-3) var(--ha-space-0);
+        padding: var(--ha-space-3) var(--ha-space-3) 0;
       }
       .mdc-dialog__title::before {
         content: unset;
@@ -136,7 +135,7 @@ export class HaDialog extends DialogBase {
           --ha-dialog-surface-background,
           var(--mdc-theme-surface, #fff)
         );
-        padding: var(--dialog-surface-padding, var(--ha-space-0));
+        padding: var(--dialog-surface-padding, 0);
       }
       :host([flexContent]) .mdc-dialog .mdc-dialog__content {
         display: flex;
@@ -168,7 +167,7 @@ export class HaDialog extends DialogBase {
       }
       .dialog-actions {
         inset-inline-start: initial !important;
-        inset-inline-end: var(--ha-space-0) !important;
+        inset-inline-end: 0 !important;
         direction: var(--direction);
       }
     `,

src/components/ha-floor-picker.ts

@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiTextureBox } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
@@ -303,7 +303,7 @@ export class HaFloorPicker extends LitElement {
     }
   );
 
-  private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (item) => html`
+  private _rowRenderer: RenderItemFunction<FloorComboBoxItem> = (item) => html`
     <ha-combo-box-item type="button" compact>
       ${item.icon_path
         ? html`

src/components/ha-generic-picker.ts

@@ -393,7 +393,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
         }
 
         wa-popover {
-          --wa-space-l: var(--ha-space-0);
+          --wa-space-l: 0;
         }
 
         wa-popover::part(body) {
@@ -418,7 +418,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
           --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
           --ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
           --ha-bottom-sheet-max-width: 600px;
-          --ha-bottom-sheet-padding: var(--ha-space-0);
+          --ha-bottom-sheet-padding: 0;
           --ha-bottom-sheet-surface-background: var(--card-background-color);
           --ha-bottom-sheet-border-radius: var(--ha-border-radius-2xl);
         }

src/components/ha-md-dialog.ts

@@ -175,10 +175,10 @@ export class HaMdDialog extends Dialog {
         }
 
         .container {
-          margin-top: var(--safe-area-inset-top, var(--ha-space-0));
-          margin-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
-          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
-          margin-right: var(--safe-area-inset-right, var(--ha-space-0));
+          margin-top: var(--safe-area-inset-top, 0);
+          margin-bottom: var(--safe-area-inset-bottom, 0);
+          margin-left: var(--safe-area-inset-left, 0);
+          margin-right: var(--safe-area-inset-right, 0);
         }
       }
 

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

@@ -0,0 +1,202 @@
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import { isTemplate } from "../../common/string/has-template";
+import type { ChooseSelector, Selector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-button-toggle-group";
+import "./ha-selector";
+
+@customElement("ha-selector-choose")
+export class HaChooseSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: ChooseSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ attribute: false })
+  public localizeValue?: (key: string) => string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @state() public _activeChoice?: string;
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      changedProperties.has("selector") &&
+      (!this._activeChoice ||
+        !(this._activeChoice in this.selector.choose.choices))
+    ) {
+      this._setActiveChoice();
+    }
+  }
+
+  protected render() {
+    if (!this._activeChoice) {
+      return nothing;
+    }
+
+    const selector = this._selector(this._activeChoice);
+    const value = this._value(this._activeChoice);
+
+    return html`<div class="multi-header">
+        <span>${this.label}${this.required ? "*" : ""}</span>
+        <ha-button-toggle-group
+          size="small"
+          .buttons=${this._toggleButtons(
+            this.selector.choose.choices,
+            this.selector.choose.translation_key
+          )}
+          .active=${this._activeChoice}
+          @value-changed=${this._choiceChanged}
+        ></ha-button-toggle-group>
+      </div>
+      <ha-selector
+        .hass=${this.hass}
+        .selector=${selector}
+        .value=${value}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        @value-changed=${this._handleValueChanged}
+        .helper=${this.helper}
+      ></ha-selector>`;
+  }
+
+  private _toggleButtons = memoizeOne(
+    (choices: ChooseSelector["choose"]["choices"], translationKey?: string) =>
+      Object.keys(choices).map((choice) => ({
+        label:
+          this.localizeValue && translationKey
+            ? this.localizeValue(`${translationKey}.choices.${choice}`)
+            : choice,
+        value: choice,
+      }))
+  );
+
+  private _choiceChanged(ev) {
+    ev.stopPropagation();
+    const value =
+      typeof this.value === "object"
+        ? this.value
+        : {
+            [this._activeChoice!]: this.value,
+          };
+    this._activeChoice = ev.detail?.value || ev.target.value;
+    fireEvent(this, "value-changed", {
+      value: {
+        ...value,
+        active_choice: this._activeChoice,
+      },
+    });
+  }
+
+  private _handleValueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = typeof this.value === "object" ? this.value : {};
+    fireEvent(this, "value-changed", {
+      value: {
+        ...value,
+        [this._activeChoice!]: ev.detail.value,
+        active_choice: this._activeChoice,
+      },
+    });
+  }
+
+  private _selector(choice?: string): Selector {
+    const choices = this.selector.choose.choices;
+
+    choice = choice || this.value?.active_choice;
+
+    if (choice && choice in choices) {
+      return choices[choice].selector;
+    }
+
+    return choices[Object.keys(choices)[0]].selector;
+  }
+
+  private _value(choice?: string): any {
+    if (!this.value) {
+      return undefined;
+    }
+    return typeof this.value === "object"
+      ? this.value[choice || this.value.active_choice]
+      : this.value;
+  }
+
+  private _setActiveChoice() {
+    if (this.value) {
+      if (typeof this.value === "object") {
+        if (this.value.active_choice in this.selector.choose.choices) {
+          this._activeChoice = this.value.active_choice;
+          return;
+        }
+      } else {
+        const typeofValue = typeof this.value;
+        const selectorTypes = Object.values(this.selector.choose.choices).map(
+          (choice) => Object.keys(choice.selector)[0]
+        );
+        if (typeofValue === "number" && selectorTypes.includes("number")) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("number")
+          ];
+          return;
+        }
+        if (
+          typeofValue === "string" &&
+          isTemplate(this.value) &&
+          selectorTypes.includes("template")
+        ) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("template")
+          ];
+          return;
+        }
+        if (
+          typeofValue === "string" &&
+          this.value.includes(".") &&
+          selectorTypes.includes("entity")
+        ) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("entity")
+          ];
+          return;
+        }
+        if (typeofValue === "string" && selectorTypes.includes("text")) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("text")
+          ];
+          return;
+        }
+      }
+    }
+    this._activeChoice = Object.keys(this.selector.choose.choices)[0];
+  }
+
+  static styles = css`
+    .multi-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--ha-space-2);
+    }
+    ha-button-toggle-group {
+      display: block;
+      justify-self: end;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-choose": HaChooseSelector;
+  }
+}

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

@@ -18,6 +18,7 @@ const LOAD_ELEMENTS = {
   attribute: () => import("./ha-selector-attribute"),
   assist_pipeline: () => import("./ha-selector-assist-pipeline"),
   boolean: () => import("./ha-selector-boolean"),
+  choose: () => import("./ha-selector-choose"),
   color_rgb: () => import("./ha-selector-color-rgb"),
   condition: () => import("./ha-selector-condition"),
   config_entry: () => import("./ha-selector-config-entry"),

src/components/ha-service-control.ts

@@ -726,6 +726,7 @@ export class HaServiceControl extends LitElement {
               : undefined}
             .placeholder=${dataField.default}
             .localizeValue=${this._localizeValueCallback}
+            .required=${dataField.required}
           ></ha-selector>
         </ha-settings-row>`
       : "";

src/components/ha-service-picker.ts

@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiRoomService } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing, type TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -56,9 +56,9 @@ class HaServicePicker extends LitElement {
     getServiceIcons(this.hass);
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<ServiceComboBoxItem> = (
+  private _rowRenderer: RenderItemFunction<ServiceComboBoxItem> = (
     item,
-    { index }
+    index
   ) => html`
     <ha-combo-box-item type="button" .borderTop=${index !== 0}>
       <ha-service-icon

src/components/ha-sidebar.ts

@@ -681,7 +681,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     tooltip.style.display = "block";
     tooltip.style.position = "fixed";
     tooltip.style.top = `${top}px`;
-    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, var(--ha-space-0)))`;
+    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
   }
 
   private _hideTooltip() {
@@ -720,14 +720,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           background-color: var(--sidebar-background-color);
           width: 100%;
           box-sizing: border-box;
-          padding-bottom: calc(
-            14px + var(--safe-area-inset-bottom, var(--ha-space-0))
-          );
+          padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
         }
         .menu {
-          height: calc(
-            var(--header-height) + var(--safe-area-inset-top, var(--ha-space-0))
-          );
+          height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
           box-sizing: border-box;
           display: flex;
           padding: 0 var(--ha-space-1);
@@ -746,16 +742,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           font-size: var(--ha-font-size-xl);
           align-items: center;
           padding-left: calc(
-            var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
+            var(--ha-space-1) + var(--safe-area-inset-left, 0px)
           );
           padding-inline-start: calc(
-            var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
+            var(--ha-space-1) + var(--safe-area-inset-left, 0px)
           );
           padding-inline-end: initial;
-          padding-top: var(--safe-area-inset-top, var(--ha-space-0));
+          padding-top: var(--safe-area-inset-top, 0px);
         }
         :host([expanded]) .menu {
-          width: calc(256px + var(--safe-area-inset-left, var(--ha-space-0)));
+          width: calc(256px + var(--safe-area-inset-left, 0px));
         }
         :host([narrow][expanded]) .menu {
           width: 100%;
@@ -771,8 +767,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           display: none;
         }
         :host([narrow]) .title {
-          margin: var(--ha-space-0);
-          padding: var(--ha-space-0) var(--ha-space-4);
+          margin: 0;
+          padding: 0 var(--ha-space-4);
         }
         :host([expanded]) .title {
           display: initial;
@@ -784,16 +780,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-fade-in,
         ha-md-list {
           height: calc(
-            100% - var(--header-height) - var(
-                --safe-area-inset-top,
-                var(--ha-space-0)
-              ) -
+            100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
               132px
           );
         }
 
         ha-fade-in {
-          padding: var(--ha-space-1) var(--ha-space-0);
+          padding: var(--ha-space-1) 0;
           box-sizing: border-box;
           display: flex;
           justify-content: center;
@@ -803,7 +796,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-md-list {
           overflow-x: hidden;
           background: none;
-          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
+          margin-left: var(--safe-area-inset-left, 0px);
         }
 
         ha-md-list-item {
@@ -825,7 +818,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           width: 248px;
         }
         :host([narrow][expanded]) ha-md-list-item {
-          width: calc(240px - var(--safe-area-inset-left, var(--ha-space-0)));
+          width: calc(240px - var(--safe-area-inset-left, 0px));
         }
 
         ha-md-list-item.selected {
@@ -898,7 +891,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           border-radius: var(--ha-border-radius-md);
           font-size: 0.65em;
           line-height: var(--ha-line-height-expanded);
-          padding: var(--ha-space-0) var(--ha-space-1);
+          padding: 0 var(--ha-space-1);
         }
 
         ha-md-list-item.user {

src/components/ha-target-picker.ts

@@ -988,7 +988,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 style=${styleMap({
                   width: "var(--ha-space-12)",
                   position: "absolute",
-                  top: "var(--ha-space-0)",
+                  top: "0",
                   left: rtl ? undefined : "var(--ha-space-1)",
                   right: rtl ? "var(--ha-space-1)" : undefined,
                   transform: rtl ? "scaleX(-1)" : "",
@@ -1092,7 +1092,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         z-index: 2;
       }
       .mdc-chip-set {
-        padding: var(--ha-space-1) var(--ha-space-0);
+        padding: var(--ha-space-1) 0;
         gap: var(--ha-space-2);
       }
 

src/components/ha-wa-dialog.ts

@@ -266,15 +266,15 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
           /* Used to offset the dialog from the safe areas when space is limited */
           transform: translate(
             calc(
-              var(--safe-area-offset-left, var(--ha-space-0)) - var(
+              var(--safe-area-offset-left, 0px) - var(
                   --safe-area-offset-right,
-                  var(--ha-space-0)
+                  0px
                 )
             ),
             calc(
-              var(--safe-area-offset-top, var(--ha-space-0)) - var(
+              var(--safe-area-offset-top, 0px) - var(
                   --safe-area-offset-bottom,
-                  var(--ha-space-0)
+                  0px
                 )
             )
           );
@@ -285,7 +285,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
           :host([type="standard"]) {
-            --ha-dialog-border-radius: var(--ha-space-0);
+            --ha-dialog-border-radius: 0;
 
             wa-dialog {
               /* Make the container fill the whole screen width and not the safe width */
@@ -372,7 +372,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
         }
 
         wa-dialog::part(footer) {
-          padding: var(--ha-space-0);
+          padding: 0;
         }
 
         ::slotted([slot="footer"]) {

src/components/target-picker/ha-target-picker-item-group.ts

@@ -89,7 +89,7 @@ export class HaTargetPickerItemGroup extends LitElement {
   static styles = css`
     :host {
       display: block;
-      --expansion-panel-content-padding: var(--ha-space-0);
+      --expansion-panel-content-padding: 0;
     }
     ha-expansion-panel::part(summary) {
       background-color: var(--ha-color-fill-neutral-quiet-resting);
@@ -101,7 +101,7 @@ export class HaTargetPickerItemGroup extends LitElement {
       min-height: unset;
     }
     ha-md-list {
-      padding: var(--ha-space-0);
+      padding: 0;
     }
   `;
 }

src/components/target-picker/ha-target-picker-item-row.ts

@@ -605,8 +605,8 @@ export class HaTargetPickerItemRow extends LitElement {
     buttonLinkStyle,
     css`
       :host {
-        --md-list-item-top-space: var(--ha-space-0);
-        --md-list-item-bottom-space: var(--ha-space-0);
+        --md-list-item-top-space: 0;
+        --md-list-item-bottom-space: 0;
         --md-list-item-leading-space: var(--ha-space-2);
         --md-list-item-trailing-space: var(--ha-space-2);
         --md-list-item-two-line-container-height: 56px;

src/components/target-picker/ha-target-picker-value-chip.ts

@@ -278,8 +278,8 @@ export class HaTargetPickerValueChip extends LitElement {
       direction: var(--direction);
     }
     .expand-btn {
-      margin-right: var(--ha-space-0);
-      margin-inline-end: var(--ha-space-0);
+      margin-right: 0;
+      margin-inline-end: 0;
       margin-inline-start: initial;
     }
     .mdc-chip.area:not(.add),

src/components/user/ha-user-picker.ts

@@ -1,4 +1,4 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -73,7 +73,7 @@ class HaUserPicker extends LitElement {
     `;
   };
 
-  private _rowRenderer: ComboBoxLitRenderer<UserComboBoxItem> = (item) => {
+  private _rowRenderer: RenderItemFunction<UserComboBoxItem> = (item) => {
     const user = item.user;
     if (!user) {
       return html`<ha-combo-box-item type="button" compact>

src/data/selector.ts

@@ -27,6 +27,7 @@ export type Selector =
   | AttributeSelector
   | BooleanSelector
   | ButtonToggleSelector
+  | ChooseSelector
   | ColorRGBSelector
   | ColorTempSelector
   | ConditionSelector
@@ -116,6 +117,13 @@ export interface ButtonToggleSelector {
   } | null;
 }
 
+export interface ChooseSelector {
+  choose: {
+    choices: Record<string, { selector: Selector }>;
+    translation_key?: string;
+  };
+}
+
 export interface ColorRGBSelector {
   color_rgb: {} | null;
 }

src/dialogs/more-info/components/ha-more-info-control-select-container.ts

@@ -37,8 +37,8 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
       overflow: auto;
       -ms-overflow-style: none; /* IE and Edge */
       scrollbar-width: none; /* Firefox */
-      margin: -2px -24px;
-      padding: 2px 24px;
+      margin: -2px calc(var(--ha-space-6) * -1);
+      padding: 2px var(--ha-space-6);
     }
     .controls-scroll::-webkit-scrollbar {
       display: none;

src/dialogs/more-info/components/ha-more-info-state-header.ts

@@ -84,8 +84,8 @@ export class HaMoreInfoStateHeader extends LitElement {
       font-weight: var(--ha-font-weight-medium);
       line-height: var(--ha-line-height-normal);
       letter-spacing: 0.1px;
-      padding: 4px 0;
-      margin-bottom: 20px;
+      padding: var(--ha-space-1) 0;
+      margin-bottom: var(--ha-space-5);
       cursor: pointer;
       user-select: none;
       -webkit-user-select: none;

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -268,14 +268,14 @@ class DialogLightColorFavorite extends LitElement {
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 24px;
+          padding: var(--ha-space-6);
           flex: 1;
         }
         .modes {
           display: flex;
           flex-direction: row;
           justify-content: flex-end;
-          padding: 0 24px;
+          padding: 0 var(--ha-space-6);
         }
         .wheel {
           width: 30px;

src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts

@@ -254,14 +254,14 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: -8px;
+      margin: calc(var(--ha-space-2) * -1);
       flex-wrap: wrap;
       max-width: 250px;
       user-select: none;
     }
 
     .container > * {
-      margin: 8px;
+      margin: var(--ha-space-2);
     }
 
     .color {

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -515,7 +515,7 @@ class LightRgbColorPicker extends LitElement {
         hr {
           border-color: var(--divider-color);
           border-bottom: none;
-          margin: 16px 0;
+          margin: var(--ha-space-4) 0;
         }
       `,
     ];

src/dialogs/more-info/components/more-info-control-style.ts

@@ -15,22 +15,22 @@ export const moreInfoControlStyle = css`
   }
 
   .controls:not(:last-child) {
-    margin-bottom: 24px;
+    margin-bottom: var(--ha-space-6);
   }
 
   .controls > *:not(:last-child) {
-    margin-bottom: 24px;
+    margin-bottom: var(--ha-space-6);
   }
 
   .buttons {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 12px;
+    margin-bottom: var(--ha-space-3);
   }
 
   .buttons > * {
-    margin: 8px;
+    margin: var(--ha-space-2);
   }
 
   ha-attributes {
@@ -38,6 +38,6 @@ export const moreInfoControlStyle = css`
     width: 100%;
   }
   ha-more-info-control-select-container + ha-attributes:not([empty]) {
-    margin-top: 16px;
+    margin-top: var(--ha-space-4);
   }
 `;

src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts

@@ -209,7 +209,7 @@ class MoreInfoSirenAdvancedControls extends LitElement {
           flex-direction: row;
           justify-content: center;
           gap: var(--ha-space-4);
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
         ha-control-button {
           --control-button-border-radius: var(--ha-border-radius-xl);

src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts

@@ -48,7 +48,7 @@ class MoreInfoViewVoiceAssistants extends LitElement {
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 24px;
+          padding: var(--ha-space-6);
           flex: 1;
         }
       `,

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

@@ -52,7 +52,7 @@ class MoreInfoAutomation extends LitElement {
       justify-content: space-between;
     }
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
@@ -60,7 +60,7 @@ class MoreInfoAutomation extends LitElement {
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
   `;
 }

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

@@ -106,7 +106,7 @@ class MoreInfoCamera extends LitElement {
       flex-wrap: wrap;
       justify-content: flex-end;
       box-sizing: border-box;
-      padding: 16px;
+      padding: var(--ha-space-4);
       z-index: 1;
       gap: var(--ha-space-2);
     }

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

@@ -511,7 +511,7 @@ class MoreInfoClimate extends LitElement {
           align-items: center;
           justify-content: center;
           text-align: center;
-          margin-bottom: 40px;
+          margin-bottom: var(--ha-space-10);
         }
 
         .current div {
@@ -534,7 +534,7 @@ class MoreInfoClimate extends LitElement {
           font-size: var(--ha-font-size-m);
           line-height: var(--ha-line-height-condensed);
           letter-spacing: 0.4px;
-          margin-bottom: 4px;
+          margin-bottom: var(--ha-space-1);
         }
 
         .current .value {
@@ -545,7 +545,7 @@ class MoreInfoClimate extends LitElement {
         }
         ha-select {
           width: 100%;
-          margin-top: 8px;
+          margin-top: var(--ha-space-2);
         }
 
         .container-humidity .single-row {
@@ -561,7 +561,7 @@ class MoreInfoClimate extends LitElement {
         }
 
         .single-row {
-          padding: 8px 0;
+          padding: var(--ha-space-2) 0;
         }
       `,
     ];

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

@@ -87,7 +87,7 @@ export class MoreInfoConfigurator extends LitElement {
       flex-direction: column;
     }
     p {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
     }
 
     a {

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

@@ -62,7 +62,7 @@ class MoreInfoCounter extends LitElement {
 
   static styles = css`
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;

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

@@ -194,7 +194,7 @@ class MoreInfoCover extends LitElement {
           align-items: center;
         }
         .main-control > * {
-          margin: 0 8px;
+          margin: 0 var(--ha-space-2);
         }
       `,
     ];

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

@@ -72,8 +72,8 @@ class MoreInfoDatetime extends LitElement {
       justify-content: flex-end;
     }
     ha-date-input + ha-time-input {
-      margin-left: 4px;
-      margin-inline-start: 4px;
+      margin-left: var(--ha-space-1);
+      margin-inline-start: var(--ha-space-1);
       margin-inline-end: initial;
     }
   `;

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

@@ -100,7 +100,7 @@ class MoreInfoGroup extends LitElement {
       css`
         state-card-content {
           display: block;
-          margin-top: 8px;
+          margin-top: var(--ha-space-2);
         }
       `,
     ];

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

@@ -217,7 +217,7 @@ class MoreInfoHumidifier extends LitElement {
           align-items: center;
           justify-content: center;
           text-align: center;
-          margin-bottom: 40px;
+          margin-bottom: var(--ha-space-10);
         }
         .current div {
           display: flex;
@@ -237,7 +237,7 @@ class MoreInfoHumidifier extends LitElement {
           font-size: var(--ha-font-size-m);
           line-height: var(--ha-line-height-condensed);
           letter-spacing: 0.4px;
-          margin-bottom: 4px;
+          margin-bottom: var(--ha-space-1);
         }
         .current .value {
           font-size: var(--ha-font-size-xl);

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

@@ -84,8 +84,8 @@ class MoreInfoInputDatetime extends LitElement {
       justify-content: flex-end;
     }
     ha-date-input + ha-time-input {
-      margin-left: 4px;
-      margin-inline-start: 4px;
+      margin-left: var(--ha-space-1);
+      margin-inline-start: var(--ha-space-1);
       margin-inline-end: initial;
     }
   `;

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

@@ -192,7 +192,7 @@ class MoreInfoLock extends LitElement {
           margin: 0 auto;
         }
         ha-control-button-group + ha-attributes:not([empty]) {
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
         @keyframes pulse {
           0% {

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

@@ -528,11 +528,11 @@ class MoreInfoMediaPlayer extends LitElement {
       display: flex;
       align-items: center;
       gap: var(--ha-space-3);
-      margin-left: 8px;
+      margin-left: var(--ha-space-2);
     }
 
     .volume ha-svg-icon {
-      padding: 4px;
+      padding: var(--ha-space-1);
       height: 16px;
       width: 16px;
     }
@@ -545,17 +545,17 @@ class MoreInfoMediaPlayer extends LitElement {
     .badge {
       position: absolute;
       top: -10px;
-      left: 16px;
+      left: var(--ha-space-4);
       display: flex;
       justify-content: center;
       align-items: center;
       height: 16px;
-      min-width: 8px;
+      min-width: var(--ha-space-2);
       border-radius: var(--ha-border-radius-md);
       font-weight: var(--ha-font-weight-normal);
       font-size: var(--ha-font-size-xs);
       background-color: var(--primary-color);
-      padding: 0 4px;
+      padding: 0 var(--ha-space-1);
       color: var(--text-primary-color);
     }
 
@@ -572,13 +572,13 @@ class MoreInfoMediaPlayer extends LitElement {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      margin: 8px 0 8px 8px;
+      margin: var(--ha-space-2) 0 var(--ha-space-2) var(--ha-space-2);
     }
 
     .media-title {
       font-size: var(--ha-font-size-xl);
       font-weight: var(--ha-font-weight-bold);
-      margin-bottom: 4px;
+      margin-bottom: var(--ha-space-1);
     }
 
     .media-artist {

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

@@ -72,12 +72,12 @@ class MoreInfoPerson extends LitElement {
       justify-content: space-between;
     }
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       text-align: right;
     }
     ha-map {
-      margin-top: 16px;
-      margin-bottom: 16px;
+      margin-top: var(--ha-space-4);
+      margin-bottom: var(--ha-space-4);
     }
   `;
 }

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

@@ -227,24 +227,24 @@ class MoreInfoScript extends LitElement {
       visibility: hidden;
       color: var(--secondary-text-color);
       text-align: center;
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
       height: 21px;
     }
     .queue.has-queue {
       visibility: visible;
     }
     .fields {
-      padding: 16px;
+      padding: var(--ha-space-4);
       border: 1px solid var(--divider-color);
       border-radius: var(--ha-border-radius-md);
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
     }
     .fields .title {
       font-weight: var(--ha-font-weight-bold);
     }
     ha-control-button ha-svg-icon {
       z-index: -1;
-      margin-right: 4px;
+      margin-right: var(--ha-space-1);
     }
     ha-service-control {
       --service-control-padding: 0;
@@ -252,7 +252,7 @@ class MoreInfoScript extends LitElement {
     }
     ha-markdown {
       text-align: center;
-      padding: 0 16px;
+      padding: 0 var(--ha-space-4);
     }
   `;
 }

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

@@ -83,7 +83,7 @@ class MoreInfoSun extends LitElement {
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
   `;
 }

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

@@ -80,7 +80,7 @@ class MoreInfoTimer extends LitElement {
 
   static styles = css`
     .actions {
-      margin: 8px 0;
+      margin: var(--ha-space-2) 0;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;

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

@@ -448,14 +448,14 @@ class MoreInfoUpdate extends LitElement {
     hr {
       border-color: var(--divider-color);
       border-bottom: none;
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
     ha-expansion-panel {
-      margin: 16px 0;
+      margin: var(--ha-space-4) 0;
     }
 
     .summary {
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
     }
 
     .row {
@@ -473,8 +473,10 @@ class MoreInfoUpdate extends LitElement {
       );
       position: sticky;
       bottom: 0;
-      margin: 0 -24px 0 -24px;
-      margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
+      margin: 0 calc(var(--ha-space-6) * -1) 0 calc(var(--ha-space-6) * -1);
+      margin-bottom: calc(
+        -1 * max(var(--safe-area-inset-bottom), var(--ha-space-6))
+      );
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
@@ -486,8 +488,8 @@ class MoreInfoUpdate extends LitElement {
     ha-md-list {
       width: 100%;
       box-sizing: border-box;
-      margin-bottom: -16px;
-      margin-top: -4px;
+      margin-bottom: calc(var(--ha-space-4) * -1);
+      margin-top: calc(var(--ha-space-1) * -1);
       --md-sys-color-surface: var(
         --ha-dialog-surface-background,
         var(--mdc-theme-surface, #fff)
@@ -495,8 +497,8 @@ class MoreInfoUpdate extends LitElement {
     }
 
     ha-md-list-item {
-      --md-list-item-leading-space: 24px;
-      --md-list-item-trailing-space: 24px;
+      --md-list-item-leading-space: var(--ha-space-6);
+      --md-list-item-trailing-space: var(--ha-space-6);
     }
 
     .actions {
@@ -506,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
       flex-wrap: wrap;
       justify-content: flex-end;
       box-sizing: border-box;
-      padding: 16px;
+      padding: var(--ha-space-4);
       z-index: 1;
       gap: var(--ha-space-2);
     }
@@ -520,12 +522,12 @@ class MoreInfoUpdate extends LitElement {
       align-items: center;
     }
     mwc-linear-progress {
-      margin-bottom: -8px;
-      margin-top: 4px;
+      margin-bottom: calc(var(--ha-space-2) * -1);
+      margin-top: var(--ha-space-1);
     }
     ha-markdown {
       direction: ltr;
-      padding-bottom: 16px;
+      padding-bottom: var(--ha-space-4);
       box-sizing: border-box;
     }
     ha-markdown.hidden {
@@ -534,7 +536,7 @@ class MoreInfoUpdate extends LitElement {
     .loader {
       height: 80px;
       box-sizing: border-box;
-      padding-bottom: 16px;
+      padding-bottom: var(--ha-space-4);
     }
   `;
 }

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

@@ -173,7 +173,7 @@ class MoreInfoValve extends LitElement {
           align-items: center;
         }
         .main-control > * {
-          margin: 0 8px;
+          margin: 0 var(--ha-space-2);
         }
       `,
     ];

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

@@ -214,7 +214,7 @@ class MoreInfoWaterHeater extends LitElement {
           align-items: center;
           justify-content: center;
           text-align: center;
-          margin-bottom: 40px;
+          margin-bottom: var(--ha-space-10);
         }
 
         .current div {
@@ -237,7 +237,7 @@ class MoreInfoWaterHeater extends LitElement {
           font-size: var(--ha-font-size-m);
           line-height: var(--ha-line-height-condensed);
           letter-spacing: 0.4px;
-          margin-bottom: 4px;
+          margin-bottom: var(--ha-space-1);
         }
 
         .current .value {

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

@@ -440,13 +440,13 @@ class MoreInfoWeather extends LitElement {
       css`
         ha-svg-icon {
           color: var(--state-icon-color);
-          margin-left: 8px;
-          margin-inline-start: 8px;
+          margin-left: var(--ha-space-2);
+          margin-inline-start: var(--ha-space-2);
           margin-inline-end: initial;
         }
 
         .section {
-          margin: 16px 0 8px 0;
+          margin: var(--ha-space-4) 0 var(--ha-space-2) 0;
           font-size: 1.2em;
         }
 
@@ -470,14 +470,14 @@ class MoreInfoWeather extends LitElement {
 
         .main {
           flex: 1;
-          margin-left: 24px;
-          margin-inline-start: 24px;
+          margin-left: var(--ha-space-6);
+          margin-inline-start: var(--ha-space-6);
           margin-inline-end: initial;
         }
 
         .attribution {
           text-align: center;
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
         }
 
         .time-ago,
@@ -500,15 +500,15 @@ class MoreInfoWeather extends LitElement {
           flex-wrap: nowrap;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 16px;
+          margin-bottom: var(--ha-space-4);
         }
 
         .icon-image {
           display: flex;
           align-items: center;
           min-width: 64px;
-          margin-right: 16px;
-          margin-inline-end: 16px;
+          margin-right: var(--ha-space-4);
+          margin-inline-end: var(--ha-space-4);
           margin-inline-start: initial;
         }
 
@@ -534,7 +534,7 @@ class MoreInfoWeather extends LitElement {
 
         .temp-attribute .temp {
           position: relative;
-          margin-right: 24px;
+          margin-right: var(--ha-space-6);
           direction: ltr;
         }
 
@@ -557,8 +557,8 @@ class MoreInfoWeather extends LitElement {
 
         .name-state {
           overflow: hidden;
-          padding-right: 12px;
-          padding-inline-end: 12px;
+          padding-right: var(--ha-space-3);
+          padding-inline-end: var(--ha-space-3);
           padding-inline-start: initial;
           width: 100%;
         }
@@ -572,7 +572,7 @@ class MoreInfoWeather extends LitElement {
         .forecast {
           display: flex;
           justify-content: space-around;
-          padding: 16px;
+          padding: var(--ha-space-4);
           padding-bottom: 0px;
           overflow-x: auto;
           scrollbar-color: var(--scrollbar-thumb-color) transparent;
@@ -634,8 +634,8 @@ class MoreInfoWeather extends LitElement {
         }
 
         .forecast-image-icon {
-          padding-top: 4px;
-          padding-bottom: 4px;
+          padding-top: var(--ha-space-1);
+          padding-bottom: var(--ha-space-1);
           display: flex;
           justify-content: center;
         }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -802,8 +802,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
-          margin: var(--ha-space-0) var(--ha-space-0)
-            calc(var(--ha-space-2) * -1) var(--ha-space-0);
+          margin: 0 0 calc(var(--ha-space-2) * -1) 0;
         }
 
         .title p {

src/dialogs/more-info/ha-more-info-history-and-logbook.ts

@@ -58,7 +58,7 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
       display: block;
     }
     ha-more-info-history + ha-more-info-logbook {
-      margin-top: 16px;
+      margin-top: var(--ha-space-4);
     }
   `;
 }

src/dialogs/more-info/ha-more-info-history.ts

@@ -264,7 +264,7 @@ export class MoreInfoHistory extends LitElement {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 8px;
+        margin-bottom: var(--ha-space-2);
       }
       .header > a,
       a:visited {

src/dialogs/more-info/ha-more-info-info.ts

@@ -130,8 +130,8 @@ export class MoreInfoInfo extends LitElement {
       display: flex;
       flex-direction: column;
       flex: 1;
-      padding: 24px;
-      padding-bottom: max(var(--safe-area-inset-bottom), 24px);
+      padding: var(--ha-space-6);
+      padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-6));
     }
 
     [data-domain="camera"] .content {
@@ -153,7 +153,7 @@ export class MoreInfoInfo extends LitElement {
     ha-more-info-history,
     ha-more-info-logbook:not(:last-child) {
       display: block;
-      margin-bottom: 16px;
+      margin-bottom: var(--ha-space-4);
     }
 
     ha-alert {

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -82,7 +82,7 @@ export class MoreInfoLogbook extends LitElement {
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
-          margin-bottom: 8px;
+          margin-bottom: var(--ha-space-2);
         }
         .header > a,
         a:visited {

src/dialogs/more-info/ha-more-info-settings.ts

@@ -83,7 +83,8 @@ export class HaMoreInfoSettings extends LitElement {
     return [
       css`
         .content {
-          padding: 8px 24px 24px 24px;
+          padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
+            var(--ha-space-6);
         }
       `,
     ];

src/dialogs/more-info/more-info-content.ts

@@ -119,7 +119,7 @@ class MoreInfoContent extends LitElement {
     hui-section {
       width: 100%;
       display: block;
-      margin-top: 16px;
+      margin-top: var(--ha-space-4);
     }
   `;
 }

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1120,7 +1120,7 @@ export class QuickBar extends LitElement {
         }
 
         .nothing-found {
-          padding: var(--ha-space-4) var(--ha-space-0);
+          padding: var(--ha-space-4) 0;
           text-align: center;
         }
 

src/mixins/scrollable-fade-mixin.ts

@@ -123,8 +123,8 @@ export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
           .fade-top,
           .fade-bottom {
             position: absolute;
-            left: var(--ha-space-0);
-            right: var(--ha-space-0);
+            left: 0;
+            right: 0;
             height: var(--ha-space-4);
             pointer-events: none;
             transition: opacity 180ms ease-in-out;
@@ -137,10 +137,10 @@ export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
             opacity: 0;
           }
           .fade-top {
-            top: var(--ha-space-0);
+            top: 0;
           }
           .fade-bottom {
-            bottom: var(--ha-space-0);
+            bottom: 0;
             transform: rotate(180deg);
           }
 

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

@@ -2016,12 +2016,12 @@ class DialogAddAutomationElement
           --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
           --ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
           --ha-bottom-sheet-max-width: 888px;
-          --ha-bottom-sheet-padding: var(--ha-space-0);
+          --ha-bottom-sheet-padding: 0;
           --ha-bottom-sheet-surface-background: var(--card-background-color);
         }
 
         ha-wa-dialog {
-          --dialog-content-padding: var(--ha-space-0);
+          --dialog-content-padding: 0;
           --ha-dialog-min-height: min(
             800px,
             calc(
@@ -2045,7 +2045,7 @@ class DialogAddAutomationElement
 
         search-input {
           display: block;
-          margin: var(--ha-space-0) var(--ha-space-4);
+          margin: 0 var(--ha-space-4);
         }
 
         ha-button-toggle-group {
@@ -2079,7 +2079,7 @@ class DialogAddAutomationElement
         .groups {
           overflow: auto;
           flex: 4;
-          margin-inline-end: var(--ha-space-0);
+          margin-inline-end: 0;
         }
 
         ha-automation-add-from-target.hidden {

src/panels/config/automation/add-automation-element/ha-automation-add-items.ts

@@ -213,8 +213,8 @@ export class HaAutomationAddItems extends LitElement {
       background-color: var(--ha-color-surface-default);
       align-items: center;
       color: var(--ha-color-text-secondary);
-      padding: var(--ha-space-0);
-      margin: var(--ha-space-0) var(--ha-space-4)
+      padding: 0;
+      margin: 0 var(--ha-space-4)
         max(var(--safe-area-inset-bottom), var(--ha-space-3));
       line-height: var(--ha-line-height-expanded);
       justify-content: center;
@@ -233,7 +233,7 @@ export class HaAutomationAddItems extends LitElement {
       --md-list-item-supporting-text-font: var(--ha-font-family-body);
       --ha-md-list-item-gap: var(--ha-space-3);
       gap: var(--ha-space-2);
-      padding: var(--ha-space-0) var(--ha-space-4);
+      padding: 0 var(--ha-space-4);
     }
     .items ha-md-list ha-md-list-item {
       border-radius: var(--ha-border-radius-lg);

src/panels/config/automation/add-automation-element/ha-automation-add-search.ts

@@ -327,7 +327,7 @@ export class HaAutomationAddSearch extends LitElement {
                 style=${styleMap({
                   width: "var(--ha-space-12)",
                   position: "absolute",
-                  top: "var(--ha-space-0)",
+                  top: "0",
                   left: rtl ? undefined : "var(--ha-space-1)",
                   right: rtl ? "var(--ha-space-1)" : undefined,
                   transform: rtl ? "scaleX(-1)" : "",

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

@@ -256,6 +256,7 @@ export class HaPlatformCondition extends LitElement {
               : undefined}
             .placeholder=${dataField.default}
             .localizeValue=${this._localizeValueCallback}
+            .required=${dataField.required}
           ></ha-selector>
         </ha-settings-row>`
       : nothing;

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

@@ -292,6 +292,7 @@ export class HaPlatformTrigger extends LitElement {
               : undefined}
             .placeholder=${dataField.default}
             .localizeValue=${this._localizeValueCallback}
+            .required=${dataField.required}
           ></ha-selector>
         </ha-settings-row>`
       : nothing;

src/panels/config/integrations/dialog-add-integration.ts

@@ -462,7 +462,7 @@ class AddIntegrationDialog extends LitElement {
               style=${styleMap({
                 width: `${this._width}px`,
                 height: this._narrow
-                  ? "calc(100vh - 184px - var(--safe-area-inset-top, var(--ha-space-0)) - var(--safe-area-inset-bottom, var(--ha-space-0)))"
+                  ? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
                   : "500px",
               })}
               @click=${this._integrationPicked}

src/panels/config/labs/dialog-labs-preview-feature-enable.ts

@@ -199,7 +199,7 @@ export class DialogLabsPreviewFeatureEnable
 
   static readonly styles = css`
     ha-wa-dialog {
-      --dialog-content-padding: var(--ha-space-0);
+      --dialog-content-padding: 0;
     }
 
     p {

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -31,7 +31,11 @@ import { formatTime } from "../../../../../common/datetime/format_time";
 import type { ECOption } from "../../../../../resources/echarts/echarts";
 import { filterXSS } from "../../../../../common/util/xss";
 
-export function getSuggestedMax(dayDifference: number, end: Date): number {
+export function getSuggestedMax(
+  dayDifference: number,
+  end: Date,
+  detailedDailyData = false
+): number {
   let suggestedMax = new Date(end);
 
   // Sometimes around DST we get a time of 0:59 instead of 23:59 as expected.
@@ -40,7 +44,9 @@ export function getSuggestedMax(dayDifference: number, end: Date): number {
     suggestedMax = subHours(suggestedMax, 1);
   }
 
-  suggestedMax.setMinutes(0, 0, 0);
+  if (!detailedDailyData) {
+    suggestedMax.setMinutes(0, 0, 0);
+  }
   if (dayDifference > 35) {
     suggestedMax.setDate(1);
   }
@@ -77,7 +83,8 @@ export function getCommonOptions(
   unit?: string,
   compareStart?: Date,
   compareEnd?: Date,
-  formatTotal?: (total: number) => string
+  formatTotal?: (total: number) => string,
+  detailedDailyData = false
 ): ECOption {
   const dayDifference = differenceInDays(end, start);
 
@@ -89,7 +96,7 @@ export function getCommonOptions(
     xAxis: {
       type: "time",
       min: start,
-      max: getSuggestedMax(dayDifference, end),
+      max: getSuggestedMax(dayDifference, end, detailedDailyData),
     },
     yAxis: {
       type: "value",

src/panels/lovelace/cards/energy/hui-power-sources-graph-card.ts

@@ -1,4 +1,4 @@
-import { endOfToday, isToday, startOfToday } from "date-fns";
+import { endOfToday, isSameDay, isToday, startOfToday } from "date-fns";
 import type { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -132,7 +132,9 @@ export class HuiPowerSourcesGraphCard
         config,
         "kW",
         compareStart,
-        compareEnd
+        compareEnd,
+        undefined,
+        true
       ),
       legend: {
         show: this._config?.show_legend !== false,
@@ -210,14 +212,17 @@ export class HuiPowerSourcesGraphCard
         const { positive, negative } = this._processData(
           statIds[key].stats.map((id: string) => {
             const stats = energyData.stats[id] ?? [];
-            const currentStateWatts = getPowerFromState(this.hass.states[id]);
-            if (currentStateWatts !== undefined) {
-              // getPowerFromState returns power in W; convert to kW for this graph
-              stats.push({
-                start: now,
-                end: now,
-                mean: currentStateWatts / 1000,
-              });
+            if (isSameDay(now, this._start) && isSameDay(now, this._end)) {
+              // Append current state if we are showing today
+              const currentStateWatts = getPowerFromState(this.hass.states[id]);
+              if (currentStateWatts !== undefined) {
+                // getPowerFromState returns power in W; convert to kW for this graph
+                stats.push({
+                  start: now,
+                  end: now,
+                  mean: currentStateWatts / 1000,
+                });
+              }
             }
             return stats;
           })

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

@@ -732,9 +732,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
       padding: 0 var(--ha-space-3) var(--ha-space-3) var(--ha-space-3);
     }
     .container.horizontal hui-card-features {
-      width: calc(
-        50% - var(--column-gap, var(--ha-space-0)) / 2 - var(--ha-space-3)
-      );
+      width: calc(50% - var(--column-gap, 0px) / 2 - var(--ha-space-3));
       flex: none;
       --feature-height: var(--ha-space-9);
       padding: 0 var(--ha-space-3);

src/resources/styles.ts

@@ -142,11 +142,10 @@ export const haStyleDialog = css`
     --mdc-dialog-max-width: 600px;
     --mdc-dialog-max-width: min(600px, 95vw);
     --justify-action-buttons: space-between;
-    --dialog-container-padding: var(--safe-area-inset-top, var(--ha-space-0))
-      var(--safe-area-inset-right, var(--ha-space-0))
-      var(--safe-area-inset-bottom, var(--ha-space-0))
-      var(--safe-area-inset-left, var(--ha-space-0));
-    --dialog-surface-padding: var(--ha-space-0);
+    --dialog-container-padding: var(--safe-area-inset-top, 0)
+      var(--safe-area-inset-right, 0) var(--safe-area-inset-bottom, 0)
+      var(--safe-area-inset-left, 0);
+    --dialog-surface-padding: 0px;
   }
 
   ha-dialog .form {
@@ -166,11 +165,10 @@ export const haStyleDialog = css`
       --mdc-dialog-min-height: 100svh;
       --mdc-dialog-max-height: 100vh;
       --mdc-dialog-max-height: 100svh;
-      --dialog-container-padding: var(--ha-space-0);
-      --dialog-surface-padding: var(--safe-area-inset-top, var(--ha-space-0))
-        var(--safe-area-inset-right, var(--ha-space-0))
-        var(--safe-area-inset-bottom, var(--ha-space-0))
-        var(--safe-area-inset-left, var(--ha-space-0));
+      --dialog-container-padding: 0px;
+      --dialog-surface-padding: var(--safe-area-inset-top, 0)
+        var(--safe-area-inset-right, 0) var(--safe-area-inset-bottom, 0)
+        var(--safe-area-inset-left, 0);
       --vertical-align-dialog: flex-end;
       --ha-dialog-border-radius: var(--ha-border-radius-square);
     }
@@ -188,13 +186,13 @@ export const haStyleDialogFixedTop = css`
     --mdc-dialog-max-height: calc(
       100vh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var(
           --safe-area-inset-y,
-          var(--ha-space-0)
+          0px
         )
     );
     --mdc-dialog-max-height: calc(
       100svh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var(
           --safe-area-inset-y,
-          var(--ha-space-0)
+          0px
         )
     );
   }
@@ -202,7 +200,7 @@ export const haStyleDialogFixedTop = css`
   @media all and (max-width: 450px), all and (max-height: 500px) {
     ha-dialog {
       /* When in fullscreen, dialog should be attached to top */
-      --dialog-surface-margin-top: var(--ha-space-0);
+      --dialog-surface-margin-top: 0px;
       --mdc-dialog-min-height: 100vh;
       --mdc-dialog-min-height: 100svh;
       --mdc-dialog-max-height: 100vh;

src/resources/theme/color/color.globals.ts

@@ -339,12 +339,6 @@ export const colorStyles = css`
     --ha-assist-chip-filled-container-color: rgba(var(--rgb-primary-text-color), 0.15);
     --ha-assist-chip-active-container-color: rgba(var(--rgb-primary-color), 0.15);
     --chip-background-color: rgba(var(--rgb-primary-text-color), 0.15);
-
-    /* Vaadin */
-    --material-body-text-color: var(--primary-text-color);
-    --material-background-color: var(--card-background-color);
-    --material-secondary-background-color: var(--secondary-background-color);
-    --material-secondary-text-color: var(--secondary-text-color);
   }
 `;
 

src/resources/theme/core.globals.ts

@@ -21,7 +21,6 @@ export const coreStyles = css`
     --ha-border-radius-square: 0;
 
     /* Spacing */
-    --ha-space-0: 0px;
     --ha-space-1: 4px;
     --ha-space-2: 8px;
     --ha-space-3: 12px;

src/resources/theme/typography.globals.ts

@@ -36,12 +36,6 @@ export const typographyStyles = css`
     --ha-font-smoothing: antialiased;
     --ha-moz-osx-font-smoothing: grayscale;
 
-    /* Vaadin typography */
-    --material-h6-font-size: var(--ha-font-size-m);
-    --material-small-font-size: var(--ha-font-size-xs);
-    --material-caption-font-size: var(--ha-font-size-2xs);
-    --material-button-font-size: var(--ha-font-size-xs);
-
     /* Add font to lists since default does not handle non-latin characters */
     --md-list-item-label-text-font: var(--ha-font-family-body);
     --md-list-item-supporting-text-font: var(--ha-font-family-body);

tsconfig.json

@@ -76,6 +76,60 @@
       ],
       "@lit-labs/observers/resize-controller": [
         "./node_modules/@lit-labs/observers/resize-controller.js"
+      ],
+      "@formatjs/intl-durationformat/should-polyfill": [
+        "./node_modules/@formatjs/intl-durationformat/should-polyfill.js"
+      ],
+      "@formatjs/intl-durationformat/polyfill-force": [
+        "./node_modules/@formatjs/intl-durationformat/polyfill-force.js"
+      ],
+      "@formatjs/intl-datetimeformat/should-polyfill": [
+        "./node_modules/@formatjs/intl-datetimeformat/should-polyfill.js"
+      ],
+      "@formatjs/intl-datetimeformat/polyfill-force": [
+        "./node_modules/@formatjs/intl-datetimeformat/polyfill-force.js"
+      ],
+      "@formatjs/intl-displaynames/should-polyfill": [
+        "./node_modules/@formatjs/intl-displaynames/should-polyfill.js"
+      ],
+      "@formatjs/intl-displaynames/polyfill-force": [
+        "./node_modules/@formatjs/intl-displaynames/polyfill-force.js"
+      ],
+      "@formatjs/intl-getcanonicallocales/should-polyfill": [
+        "./node_modules/@formatjs/intl-getcanonicallocales/should-polyfill.js"
+      ],
+      "@formatjs/intl-getcanonicallocales/polyfill-force": [
+        "./node_modules/@formatjs/intl-getcanonicallocales/polyfill-force.js"
+      ],
+      "@formatjs/intl-listformat/should-polyfill": [
+        "./node_modules/@formatjs/intl-listformat/should-polyfill.js"
+      ],
+      "@formatjs/intl-listformat/polyfill-force": [
+        "./node_modules/@formatjs/intl-listformat/polyfill-force.js"
+      ],
+      "@formatjs/intl-locale/should-polyfill": [
+        "./node_modules/@formatjs/intl-locale/should-polyfill.js"
+      ],
+      "@formatjs/intl-locale/polyfill-force": [
+        "./node_modules/@formatjs/intl-locale/polyfill-force.js"
+      ],
+      "@formatjs/intl-numberformat/should-polyfill": [
+        "./node_modules/@formatjs/intl-numberformat/should-polyfill.js"
+      ],
+      "@formatjs/intl-numberformat/polyfill-force": [
+        "./node_modules/@formatjs/intl-numberformat/polyfill-force.js"
+      ],
+      "@formatjs/intl-pluralrules/should-polyfill": [
+        "./node_modules/@formatjs/intl-pluralrules/should-polyfill.js"
+      ],
+      "@formatjs/intl-pluralrules/polyfill-force": [
+        "./node_modules/@formatjs/intl-pluralrules/polyfill-force.js"
+      ],
+      "@formatjs/intl-relativetimeformat/should-polyfill": [
+        "./node_modules/@formatjs/intl-relativetimeformat/should-polyfill.js"
+      ],
+      "@formatjs/intl-relativetimeformat/polyfill-force": [
+        "./node_modules/@formatjs/intl-relativetimeformat/polyfill-force.js"
       ]
     }
   }

yarn.lock

@@ -1696,165 +1696,165 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/ecma402-abstract@npm:2.3.6":
-  version: 2.3.6
-  resolution: "@formatjs/ecma402-abstract@npm:2.3.6"
+"@formatjs/ecma402-abstract@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@formatjs/ecma402-abstract@npm:3.0.1"
   dependencies:
-    "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/fast-memoize": "npm:3.0.1"
+    "@formatjs/intl-localematcher": "npm:0.7.1"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/30b1b5cd6b62ba46245f934429936592df5500bc1b089dc92dd49c826757b873dd92c305dcfe370701e4df6b057bf007782113abb9b65db550d73be4961718bc
+  checksum: 10/b31bdccf418ee4864306126f2745be2a2d252cac32d866a2440257d58b53cbaece5efd5ec757d3149120feb8088c73325de41709c0178626c24f68a18a0b844f
   languageName: node
   linkType: hard
 
-"@formatjs/fast-memoize@npm:2.2.7":
-  version: 2.2.7
-  resolution: "@formatjs/fast-memoize@npm:2.2.7"
+"@formatjs/fast-memoize@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@formatjs/fast-memoize@npm:3.0.1"
   dependencies:
     tslib: "npm:^2.8.0"
-  checksum: 10/e7e6efc677d63a13d99a854305db471b69f64cbfebdcb6dbe507dab9aa7eaae482ca5de86f343c856ca0a2c8f251672bd1f37c572ce14af602c0287378097d43
+  checksum: 10/9c152fbb3725a0ba759f75658107504b33cd7d232380cdce5afeea320be3c71762de0af9b1dc3b8f03c652c6db9b7453ad57ab1e82762dd9a1713990988f84b8
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:2.11.4":
-  version: 2.11.4
-  resolution: "@formatjs/icu-messageformat-parser@npm:2.11.4"
+"@formatjs/icu-messageformat-parser@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@formatjs/icu-messageformat-parser@npm:3.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/icu-skeleton-parser": "npm:1.8.16"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/icu-skeleton-parser": "npm:2.0.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/2acb100c06c2ade666d72787fb9f9795b1ace41e8e73bfadc2b1a7b8562e81f655e484f0f33d8c39473aa17bf0ad96fb2228871806a9b3dc4f5f876754a0de3a
+  checksum: 10/271752c78e70267712e64f54d9e2c5ebbdb598ac5d05e23001c80c716f7b7b1f3725150a482bb5cbb6d6b43351ab8de8a33b23813a5598734e2fc24bd1ace80c
   languageName: node
   linkType: hard
 
-"@formatjs/icu-skeleton-parser@npm:1.8.16":
-  version: 1.8.16
-  resolution: "@formatjs/icu-skeleton-parser@npm:1.8.16"
+"@formatjs/icu-skeleton-parser@npm:2.0.1":
+  version: 2.0.1
+  resolution: "@formatjs/icu-skeleton-parser@npm:2.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/428001e5bed81889b276a2356a1393157af91dc59220b765a1a132f6407ac5832b7ac6ae9737674ac38e44035295c0c1c310b2630f383f2b5779ea90bf2849e6
+  checksum: 10/0ae8f63e0ae2065cb704afacef41e74d04e778f76821e1720cead6d6d47851b209ec798174d99df50c762854c2e7b36d4315e9337e3fdf1b5c1fc667406b1efb
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:6.18.2":
-  version: 6.18.2
-  resolution: "@formatjs/intl-datetimeformat@npm:6.18.2"
+"@formatjs/intl-datetimeformat@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@formatjs/intl-datetimeformat@npm:7.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/intl-localematcher": "npm:0.7.1"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/e6f80d0eb2049564502370839697a18858268a0dff8d199b1908137c4a229b1303131c12b8b8a8e8e259a1feba26dbc25b003b150adabea10d1c43f68086efbe
+  checksum: 10/35af1ba5de1a95af0601066dfb609d11cc26949a4f4281e1f92053ec45d87a3629936f51bd8a82cb178e6d08381d1301566ca750dc17ad33f364c683272c912c
   languageName: node
   linkType: hard
 
-"@formatjs/intl-displaynames@npm:6.8.13":
-  version: 6.8.13
-  resolution: "@formatjs/intl-displaynames@npm:6.8.13"
+"@formatjs/intl-displaynames@npm:7.0.1":
+  version: 7.0.1
+  resolution: "@formatjs/intl-displaynames@npm:7.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/intl-localematcher": "npm:0.7.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/adefd25fa42266c7bc33dd3cd50f3681bdce51d18b32a03c98f8ad7587dfd8b9291345e185a4b16f31f4eee10fc799fd1b6361bdfd3a2c9fe127744e1e0f3b07
+  checksum: 10/84f1b937f62ee981935e3727041e3ca200a9640d443f0c2f292ee96bb0a87fa390e9d0ed22bc2bda71b24de5b9e2463980b1ae4c8bf47e2d6595895e3d40b1ff
   languageName: node
   linkType: hard
 
-"@formatjs/intl-durationformat@npm:0.7.6":
-  version: 0.7.6
-  resolution: "@formatjs/intl-durationformat@npm:0.7.6"
+"@formatjs/intl-durationformat@npm:0.8.1":
+  version: 0.8.1
+  resolution: "@formatjs/intl-durationformat@npm:0.8.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/intl-localematcher": "npm:0.7.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/442236ba85bcd9cb7296c43a708271fa09f110b1ca9d5899066d00812fc2965eaeaec6b5240be421b80daba62860352131088449ba0fcd2061f671cec6240f0b
+  checksum: 10/9c0e62ab2a197611de0fde03c64e3b3647e8893492eab268b59585694609294b06ebf8bdae7bd1d163522ec3691a961899ddade1289fa1a361a3cad97a65f708
   languageName: node
   linkType: hard
 
-"@formatjs/intl-enumerator@npm:1.8.12":
-  version: 1.8.12
-  resolution: "@formatjs/intl-enumerator@npm:1.8.12"
+"@formatjs/intl-enumerator@npm:2.0.1":
+  version: 2.0.1
+  resolution: "@formatjs/intl-enumerator@npm:2.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/8dfd7ca5383b4dca530e1df5118a72f71347f4e0daa6131b82dbf7e860a8b96bec0fed43bfa6f6e650e55fa50fcd3e9e3a5253515131b578539d8eaa84630927
+  checksum: 10/dd14fcced5fa0934bb5d8d503a3553d0cf2655ed9a7c5d054837ddac241925727313f2027c0c09ca8d01dffb15764298a7c8711c5dd04e685f5d422574a98641
   languageName: node
   linkType: hard
 
-"@formatjs/intl-getcanonicallocales@npm:2.5.6":
-  version: 2.5.6
-  resolution: "@formatjs/intl-getcanonicallocales@npm:2.5.6"
+"@formatjs/intl-getcanonicallocales@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@formatjs/intl-getcanonicallocales@npm:3.0.1"
   dependencies:
     tslib: "npm:^2.8.0"
-  checksum: 10/1d3d13fa1758a9bb7854f3afd844ecb70a4333a7cfbb6822b99e3b8ab6269e525a0ca23a8a47c3944e5376bc19e9e423b5cc3043db1c6de64909986c5cec6fc0
+  checksum: 10/1f2c54d0a11ae19e6672f08d53b24110308a4225599855e69654315c160764954de645c0ab29139c62fc2b1aa53bc3d7bbd245c05a2e2d57466339a9c9a83468
   languageName: node
   linkType: hard
 
-"@formatjs/intl-listformat@npm:7.7.13":
-  version: 7.7.13
-  resolution: "@formatjs/intl-listformat@npm:7.7.13"
+"@formatjs/intl-listformat@npm:8.0.1":
+  version: 8.0.1
+  resolution: "@formatjs/intl-listformat@npm:8.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/intl-localematcher": "npm:0.7.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/476d7cffb64eb996a888b1865aa237f04088de60fa7c65b6d073bca8a3c0f4304040ef12f16eafaf6587895976b773607296951afa7f119447d8f9b2c40daa55
+  checksum: 10/bd5cff238aebd6313d8e0ef43a831d3f2e7d6a482502ed3b998238a7ab11a54563bf4d61b2a25d8c17d13a28e83c0d7a360e2280a36717b901acdcde025c0164
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:4.2.13":
-  version: 4.2.13
-  resolution: "@formatjs/intl-locale@npm:4.2.13"
+"@formatjs/intl-locale@npm:5.0.1":
+  version: 5.0.1
+  resolution: "@formatjs/intl-locale@npm:5.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/intl-enumerator": "npm:1.8.12"
-    "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/intl-enumerator": "npm:2.0.1"
+    "@formatjs/intl-getcanonicallocales": "npm:3.0.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/865615561b4bad8b8d7d93539cae7eb3ed2d46b6156486ef3ccb1b8f9f46f075c7cf2f6e5325aba1cf07150e19280858dff7dfd86d530fbf45fd31ea4fabf8d4
+  checksum: 10/86efbeebc9d41a0811b6a77c09f2e37aafccf0f9f704ebc9110a89653867af0fce729c1031c3a92d9c0f592e814bf17d2c285c98f260a1508f58a2cad31b0d5f
   languageName: node
   linkType: hard
 
-"@formatjs/intl-localematcher@npm:0.6.2":
-  version: 0.6.2
-  resolution: "@formatjs/intl-localematcher@npm:0.6.2"
+"@formatjs/intl-localematcher@npm:0.7.1":
+  version: 0.7.1
+  resolution: "@formatjs/intl-localematcher@npm:0.7.1"
   dependencies:
     tslib: "npm:^2.8.0"
-  checksum: 10/eb12a7f5367bbecdfafc20d7f005559ce840f420e970f425c5213d35e94e86dfe75bde03464971a26494bf8427d4961269db22ecad2834f2a19d888b5d9cc064
+  checksum: 10/42f9f49ba71c227466340a7639809b7ad271e2a6b39dba007e5a68e75a96ab140e3a1b71142ce90de54d8f443d3ecc02aaf2c7c78527ea08f73fe4b9ba9f5749
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:8.15.6":
-  version: 8.15.6
-  resolution: "@formatjs/intl-numberformat@npm:8.15.6"
+"@formatjs/intl-numberformat@npm:9.0.2":
+  version: 9.0.2
+  resolution: "@formatjs/intl-numberformat@npm:9.0.2"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/intl-localematcher": "npm:0.7.1"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/674c5fefa0b14fcd7c58d0c0e592b4887dc2563fa5a11d80a0a82328ac12b2bb82b9a5367fa0a4d80060d61d15a1821bca7085e20cad09aa93b87edb3cff68ea
+  checksum: 10/b10ce5f9ab25e4d2d87b7454654728d855c7788f0ec872fffbd61bd506fb2a2904aa253b2719500dc36f61e1d6297c5d3ecc22751f6af16b06c52a2176e0e044
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:5.4.6":
-  version: 5.4.6
-  resolution: "@formatjs/intl-pluralrules@npm:5.4.6"
+"@formatjs/intl-pluralrules@npm:6.0.1":
+  version: 6.0.1
+  resolution: "@formatjs/intl-pluralrules@npm:6.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/intl-localematcher": "npm:0.7.1"
     decimal.js: "npm:^10.4.3"
     tslib: "npm:^2.8.0"
-  checksum: 10/88aa244e69ccfdf459899f5fa3c64df345f451ef91ce1188eab35b7e37daa225d22120f64be633f2cd8b826ea705d19831915118f555f2d17611ee842a9a86dc
+  checksum: 10/0dac5a06eaabf43533e50e72fe3e1d89f287313190894c6b4478b9b58fd131ad77b0e083b885a77bbe4d8d5891f6f7873d895e90e8298906add682ba4383bc6c
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:11.4.13":
-  version: 11.4.13
-  resolution: "@formatjs/intl-relativetimeformat@npm:11.4.13"
+"@formatjs/intl-relativetimeformat@npm:12.0.2":
+  version: 12.0.2
+  resolution: "@formatjs/intl-relativetimeformat@npm:12.0.2"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/intl-localematcher": "npm:0.6.2"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/intl-localematcher": "npm:0.7.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/c2058d5f29a13aa216d317d309a6ffd7d203f0fe11696b7bd524e17ac3cc22ae50ad56a26dbf18125e4c115a3e75f01e6cf2134a83df6c7916ae6d3fb21a1e9b
+  checksum: 10/9f27f97a2a1264e47c81c3f1c70d45d07f1f9ce6b2a1f0ef9f1009473349ad9fa7b60dc4eda56f4d2f4eb4e7563131acf785b87b137bd20b16a4e64d9405ff53
   languageName: node
   linkType: hard
 
@@ -3595,13 +3595,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@open-wc/dedupe-mixin@npm:^1.3.0":
-  version: 1.4.0
-  resolution: "@open-wc/dedupe-mixin@npm:1.4.0"
-  checksum: 10/808ceddeb8e294ffb905d90e7ad9fc0dae5f38f4fd856615658f27806eb2e7356c643629f36f9ebd9cc170f9d5249f9c6220a8569436f513bd50e5d6f04185cb
-  languageName: node
-  linkType: hard
-
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -3609,15 +3602,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/polymer@npm:^3.0.0":
-  version: 3.5.2
-  resolution: "@polymer/polymer@npm:3.5.2"
-  dependencies:
-    "@webcomponents/shadycss": "npm:^1.9.1"
-  checksum: 10/fdacd436c64e8e122090480f99fb94396c3f351b99f6919e579197a2880a357bc3e8e7a2922e32a3ed0c0a363f0b096242faee93a23800768ed27784d49664ad
-  languageName: node
-  linkType: hard
-
 "@reallyland/esm@npm:^0.0.1":
   version: 0.0.1
   resolution: "@reallyland/esm@npm:0.0.1"
@@ -5080,184 +5064,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/a11y-base@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/a11y-base@npm:24.9.6"
-  dependencies:
-    "@open-wc/dedupe-mixin": "npm:^1.3.0"
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.6"
-    lit: "npm:^3.0.0"
-  checksum: 10/dc863b46fc68c73c418e686d364858fd8bb3291ccf0b41ae52d13933357a7a1de0eb9f345e05a4abc9c9e363a73dc79326b29d7123d0a88ff075e221ef759d90
-  languageName: node
-  linkType: hard
-
-"@vaadin/combo-box@npm:24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/combo-box@npm:24.9.6"
-  dependencies:
-    "@open-wc/dedupe-mixin": "npm:^1.3.0"
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.6"
-    "@vaadin/component-base": "npm:~24.9.6"
-    "@vaadin/field-base": "npm:~24.9.6"
-    "@vaadin/input-container": "npm:~24.9.6"
-    "@vaadin/item": "npm:~24.9.6"
-    "@vaadin/lit-renderer": "npm:~24.9.6"
-    "@vaadin/overlay": "npm:~24.9.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.6"
-    lit: "npm:^3.0.0"
-  checksum: 10/40fa537341754a5b257b94cc3d615ea0f1b2593e402fe3876315d088efa7d0954bfbb8a055d35cf1e25067eb147a4613360dd21704b5bab3cc53cbffb23d7534
-  languageName: node
-  linkType: hard
-
-"@vaadin/component-base@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/component-base@npm:24.9.6"
-  dependencies:
-    "@open-wc/dedupe-mixin": "npm:^1.3.0"
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/vaadin-development-mode-detector": "npm:^2.0.0"
-    "@vaadin/vaadin-usage-statistics": "npm:^2.1.0"
-    lit: "npm:^3.0.0"
-  checksum: 10/87d3a4992cde43d13654eb4941d606c7f7550b6655669ad08803c15528ad9fbf760c61902ae291a9e7522ecf82df3810a44fee4e7741fed571a4907143c7b7c7
-  languageName: node
-  linkType: hard
-
-"@vaadin/field-base@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/field-base@npm:24.9.6"
-  dependencies:
-    "@open-wc/dedupe-mixin": "npm:^1.3.0"
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.6"
-    "@vaadin/component-base": "npm:~24.9.6"
-    lit: "npm:^3.0.0"
-  checksum: 10/8aada69cca51e48f1f589f9549e45cae7244b2fe9b099fe458d52e52261ebfdfb9929d21665dbaf54a221dc16e7ad308a515a7f29be18fd9e0c1af062fe60b7d
-  languageName: node
-  linkType: hard
-
-"@vaadin/icon@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/icon@npm:24.9.6"
-  dependencies:
-    "@open-wc/dedupe-mixin": "npm:^1.3.0"
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.6"
-    lit: "npm:^3.0.0"
-  checksum: 10/e94c3c27eb0c8bfdacc3935e9dd7f5230656759d21b1a17bd74c47ea803bbe105feea9e43d4ed65d2c4f4408355c981ee1c2bdb99c70b3fe71636f459c0c1802
-  languageName: node
-  linkType: hard
-
-"@vaadin/input-container@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/input-container@npm:24.9.6"
-  dependencies:
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.6"
-    lit: "npm:^3.0.0"
-  checksum: 10/ef32e139af061404f29ed1951635670b41ef4942cd95e992783682f0d9f9af0a3c40c40207845c647560b482297f7136bf3bd05534c22f3275cc79ad7c2aec24
-  languageName: node
-  linkType: hard
-
-"@vaadin/item@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/item@npm:24.9.6"
-  dependencies:
-    "@open-wc/dedupe-mixin": "npm:^1.3.0"
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.6"
-    "@vaadin/component-base": "npm:~24.9.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.6"
-    lit: "npm:^3.0.0"
-  checksum: 10/9721cfe377d0ecc7b5895ac58c71c934108fc5009cbbff9eb56404353071a459e6db0b413f5f11ad56f6aab89ed103bfcf8dad55b1e04697848331ce85a42ab6
-  languageName: node
-  linkType: hard
-
-"@vaadin/lit-renderer@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/lit-renderer@npm:24.9.6"
-  dependencies:
-    lit: "npm:^3.0.0"
-  checksum: 10/df0a0dfd9622c31425bba0c8f7d8eb869f71543983627732a46ef7a3619c7101fb7b04bc045a991179dbccfdea20243cbdf8048ad3d2722a364b879cd3f3c23d
-  languageName: node
-  linkType: hard
-
-"@vaadin/overlay@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/overlay@npm:24.9.6"
-  dependencies:
-    "@open-wc/dedupe-mixin": "npm:^1.3.0"
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.9.6"
-    "@vaadin/component-base": "npm:~24.9.6"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-material-styles": "npm:~24.9.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.6"
-    lit: "npm:^3.0.0"
-  checksum: 10/11c3a04e9ddb89b034a5896a54644285cbbc4431fc2219701bd582f01543979b25f0462d78bcaf7cac38ab0218c2b4325cc60042a7aa78b873493fe9e7d570a1
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-development-mode-detector@npm:^2.0.0":
-  version: 2.0.7
-  resolution: "@vaadin/vaadin-development-mode-detector@npm:2.0.7"
-  checksum: 10/9b341148d1af8371e0da20dbbec6e5da36fb666001db5dde08e7555065e260a7a68ff62d5a20ba95e8019fa392c7b74aa20031488a836c4aa369aa35c677f3a1
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-lumo-styles@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.9.6"
-  dependencies:
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.6"
-    "@vaadin/icon": "npm:~24.9.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.6"
-  checksum: 10/f2d89f7109ce62354ba1b69f878699ae4b20154abf9ab8d6ade8a496ac2ea6d878109b1a67a453109b4fe7950808b2e105bbb637672ffebd35d89080fb7f922b
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-material-styles@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/vaadin-material-styles@npm:24.9.6"
-  dependencies:
-    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.9.6"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.9.6"
-  checksum: 10/21a07888adb0545280e4e43dbd4450d4bcb1e4378380ccb744c3d8e48e3ff0e49ee9b9423ffeaf5cd10a470a54d3a1eb6d8af34913b03e8a5bcc52c350cc1564
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-themable-mixin@npm:24.9.6, @vaadin/vaadin-themable-mixin@npm:~24.9.6":
-  version: 24.9.6
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.9.6"
-  dependencies:
-    "@open-wc/dedupe-mixin": "npm:^1.3.0"
-    lit: "npm:^3.0.0"
-    style-observer: "npm:^0.0.8"
-  checksum: 10/e08dcc82495caa6a6f031085ef1018cb0835c4ee73dc8bd9d67ba2cdb5e33576fd184afddafbec8412c355058a386da868a925cf97fff949b0444ae37dee3afa
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-usage-statistics@npm:^2.1.0":
-  version: 2.1.3
-  resolution: "@vaadin/vaadin-usage-statistics@npm:2.1.3"
-  dependencies:
-    "@vaadin/vaadin-development-mode-detector": "npm:^2.0.0"
-  checksum: 10/2210c76ac649b04b5c3f30c4a04ca01e18de7d69996a41b2499588588b7e56909749dc47f43871b28b046f907e7e01f939f2a14933c6198663afab352948b21f
-  languageName: node
-  linkType: hard
-
 "@vibrant/color@npm:4.0.0, @vibrant/color@npm:^4.0.0":
   version: 4.0.0
   resolution: "@vibrant/color@npm:4.0.0"
@@ -5366,12 +5172,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/coverage-v8@npm:4.0.15":
-  version: 4.0.15
-  resolution: "@vitest/coverage-v8@npm:4.0.15"
+"@vitest/coverage-v8@npm:4.0.16":
+  version: 4.0.16
+  resolution: "@vitest/coverage-v8@npm:4.0.16"
   dependencies:
     "@bcoe/v8-coverage": "npm:^1.0.2"
-    "@vitest/utils": "npm:4.0.15"
+    "@vitest/utils": "npm:4.0.16"
     ast-v8-to-istanbul: "npm:^0.3.8"
     istanbul-lib-coverage: "npm:^3.2.2"
     istanbul-lib-report: "npm:^3.0.1"
@@ -5382,34 +5188,34 @@ __metadata:
     std-env: "npm:^3.10.0"
     tinyrainbow: "npm:^3.0.3"
   peerDependencies:
-    "@vitest/browser": 4.0.15
-    vitest: 4.0.15
+    "@vitest/browser": 4.0.16
+    vitest: 4.0.16
   peerDependenciesMeta:
     "@vitest/browser":
       optional: true
-  checksum: 10/cdf5d26ba7f6f3895f72662549298e216f810a6cfce8a337d81d8b738df62f0766e0bb5c74f44b09d1282d4a83e14ac63e65c95cef461ac066f4b348c228f9a6
+  checksum: 10/cfb0095db60baa7ec8f76d4a9d09a92f1d9f2bfe83adfbbfca32a9b1a6dd76447db33bbba2fd8882f551ca206ef86f74f6ed436643a036537ecea6398a6825f1
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:4.0.15":
-  version: 4.0.15
-  resolution: "@vitest/expect@npm:4.0.15"
+"@vitest/expect@npm:4.0.16":
+  version: 4.0.16
+  resolution: "@vitest/expect@npm:4.0.16"
   dependencies:
     "@standard-schema/spec": "npm:^1.0.0"
     "@types/chai": "npm:^5.2.2"
-    "@vitest/spy": "npm:4.0.15"
-    "@vitest/utils": "npm:4.0.15"
+    "@vitest/spy": "npm:4.0.16"
+    "@vitest/utils": "npm:4.0.16"
     chai: "npm:^6.2.1"
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/cfb1822012a7ba66d46224c94d2951a780668729199a81eed918103d74110333bd1296e8f598cf2345bac0998f01a71803146da97c8bb69d2775abf3918f02c9
+  checksum: 10/1da98c86d394a4955bef381ac2c63a52d2eec0086f55e18858083da928cfdf51e7a30bfd88b1814e861906dae44d089aeab0fcc67b2597a4a8073c70cd14bdf7
   languageName: node
   linkType: hard
 
-"@vitest/mocker@npm:4.0.15":
-  version: 4.0.15
-  resolution: "@vitest/mocker@npm:4.0.15"
+"@vitest/mocker@npm:4.0.16":
+  version: 4.0.16
+  resolution: "@vitest/mocker@npm:4.0.16"
   dependencies:
-    "@vitest/spy": "npm:4.0.15"
+    "@vitest/spy": "npm:4.0.16"
     estree-walker: "npm:^3.0.3"
     magic-string: "npm:^0.30.21"
   peerDependencies:
@@ -5420,54 +5226,54 @@ __metadata:
       optional: true
     vite:
       optional: true
-  checksum: 10/9f2aed963bd1bbe13f8acb5d05a95e3cf09d50e57708fb9e88cb4f18b0c0c9c854290bdffd8900914b64796ebdec4c068634487ec2fe55e7984941fff404601a
+  checksum: 10/3a34c6571ef278b80d33feabb8389d6cf7cfd248fe592b8b2a373650ab460b95805fde65e6bd76aebc75729fc0c94b4d8b9bba25fa55e21c2745ae03c10316bf
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:4.0.15":
-  version: 4.0.15
-  resolution: "@vitest/pretty-format@npm:4.0.15"
+"@vitest/pretty-format@npm:4.0.16":
+  version: 4.0.16
+  resolution: "@vitest/pretty-format@npm:4.0.16"
   dependencies:
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/c8ef240027ac340ae420a9b3eb77683a6399edd066832e27793eae19c189e567c5a225c1f26848aa2a2b7545dcc0c9019d6ff0a643cbf0eae004a05117fc2b05
+  checksum: 10/914d5d35fb3b0aa67f8e6065ac3d1f1798b7774e1ad9d1e873e7c6efdc7925c98e0f8188bb13c4f3feb4d80b756c337f7a55cd4f78c50fe786330d0aaede7cfd
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:4.0.15":
-  version: 4.0.15
-  resolution: "@vitest/runner@npm:4.0.15"
+"@vitest/runner@npm:4.0.16":
+  version: 4.0.16
+  resolution: "@vitest/runner@npm:4.0.16"
   dependencies:
-    "@vitest/utils": "npm:4.0.15"
+    "@vitest/utils": "npm:4.0.16"
     pathe: "npm:^2.0.3"
-  checksum: 10/682c070d00d0505bc4568e807a746238fe726290bcaea2695a009016ce2c396f8a3c090e5ed12795c1b65bcab4188d2fd8c513ce8324abf978272f319e445d19
+  checksum: 10/2aed39bb46ba747bd4fd5acf081e9e500192fec19c1887399f6a1701bbfdab05f3d3b45c00e4af5b90a0832853c959a0f64e676b05c67f5457b7c6984f844aa2
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:4.0.15":
-  version: 4.0.15
-  resolution: "@vitest/snapshot@npm:4.0.15"
+"@vitest/snapshot@npm:4.0.16":
+  version: 4.0.16
+  resolution: "@vitest/snapshot@npm:4.0.16"
   dependencies:
-    "@vitest/pretty-format": "npm:4.0.15"
+    "@vitest/pretty-format": "npm:4.0.16"
     magic-string: "npm:^0.30.21"
     pathe: "npm:^2.0.3"
-  checksum: 10/f881257fc1c520541131296f9762d627ad61eb167a3d7129942a5c2dce46e870af1a8446fbf94d2fcdc5a31ab787ffff113f2b8dbd75b15d0494fe43db649682
+  checksum: 10/30f2977c96645c018b9d1f658e758f4f886ac63966dca909e9f736d6c9d6d0a6dabdeaedf9abcc13e1000458e4069283632c0140033972847dc1f4b4ac38e076
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:4.0.15":
-  version: 4.0.15
-  resolution: "@vitest/spy@npm:4.0.15"
-  checksum: 10/700b06beb4fd33c1430bc5061e7c3055df9ad1e64500a0a02edba6a52e37ba3bf800eadfda1f617e1eeca53d7ab6941a69ba2812980347fcc3c3b736c5ae5a56
+"@vitest/spy@npm:4.0.16":
+  version: 4.0.16
+  resolution: "@vitest/spy@npm:4.0.16"
+  checksum: 10/76cbabfdd77adf16904d5c128de67abca650bbc2ed36acc68fca548dc51844c7fc1ac516e384d07341b25ae39318c7c2feb499ffa7283a1a838f762cb0cda6ab
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:4.0.15":
-  version: 4.0.15
-  resolution: "@vitest/utils@npm:4.0.15"
+"@vitest/utils@npm:4.0.16":
+  version: 4.0.16
+  resolution: "@vitest/utils@npm:4.0.16"
   dependencies:
-    "@vitest/pretty-format": "npm:4.0.15"
+    "@vitest/pretty-format": "npm:4.0.16"
     tinyrainbow: "npm:^3.0.3"
-  checksum: 10/54d3fd272e05ad43913d842a25dce705eb71db8591511f28fa4a6d0c28fd5eb109c580072e9f8dbc0f431425c890b74494c9d0b14f78d0be18ab87071f06d020
+  checksum: 10/07fb3c96867656ff080df7ae6056a8dc23931d0f8bc16e15994c576c580dc6e2dcf71af0964fee197ea7eea4f4ad72c256f56cd3b81599f9e0ba63a228968d50
   languageName: node
   linkType: hard
 
@@ -5507,13 +5313,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webcomponents/shadycss@npm:^1.9.1":
-  version: 1.11.2
-  resolution: "@webcomponents/shadycss@npm:1.11.2"
-  checksum: 10/fa8e1ff9315e45545f7af7b2237386315cfc2895e53a2e489bc74cd33573a8d474fe7c68c7c35604c371d791cbf6a5ea19105ff2654906abd8a299e87c821942
-  languageName: node
-  linkType: hard
-
 "@webcomponents/webcomponentsjs@npm:2.8.0":
   version: 2.8.0
   resolution: "@webcomponents/webcomponentsjs@npm:2.8.0"
@@ -9190,15 +8989,15 @@ __metadata:
     "@codemirror/view": "npm:6.39.4"
     "@date-fns/tz": "npm:1.4.1"
     "@egjs/hammerjs": "npm:2.0.17"
-    "@formatjs/intl-datetimeformat": "npm:6.18.2"
-    "@formatjs/intl-displaynames": "npm:6.8.13"
-    "@formatjs/intl-durationformat": "npm:0.7.6"
-    "@formatjs/intl-getcanonicallocales": "npm:2.5.6"
-    "@formatjs/intl-listformat": "npm:7.7.13"
-    "@formatjs/intl-locale": "npm:4.2.13"
-    "@formatjs/intl-numberformat": "npm:8.15.6"
-    "@formatjs/intl-pluralrules": "npm:5.4.6"
-    "@formatjs/intl-relativetimeformat": "npm:11.4.13"
+    "@formatjs/intl-datetimeformat": "npm:7.0.1"
+    "@formatjs/intl-displaynames": "npm:7.0.1"
+    "@formatjs/intl-durationformat": "npm:0.8.1"
+    "@formatjs/intl-getcanonicallocales": "npm:3.0.1"
+    "@formatjs/intl-listformat": "npm:8.0.1"
+    "@formatjs/intl-locale": "npm:5.0.1"
+    "@formatjs/intl-numberformat": "npm:9.0.2"
+    "@formatjs/intl-pluralrules": "npm:6.0.1"
+    "@formatjs/intl-relativetimeformat": "npm:12.0.2"
     "@fullcalendar/core": "npm:6.1.19"
     "@fullcalendar/daygrid": "npm:6.1.19"
     "@fullcalendar/interaction": "npm:6.1.19"
@@ -9267,10 +9066,8 @@ __metadata:
     "@types/tar": "npm:6.1.13"
     "@types/ua-parser-js": "npm:0.7.39"
     "@types/webspeechapi": "npm:0.0.29"
-    "@vaadin/combo-box": "npm:24.9.6"
-    "@vaadin/vaadin-themable-mixin": "npm:24.9.6"
     "@vibrant/color": "npm:4.0.0"
-    "@vitest/coverage-v8": "npm:4.0.15"
+    "@vitest/coverage-v8": "npm:4.0.16"
     "@vue/web-component-wrapper": "npm:1.3.0"
     "@webcomponents/scoped-custom-element-registry": "npm:0.0.10"
     "@webcomponents/webcomponentsjs": "npm:2.8.0"
@@ -9315,7 +9112,7 @@ __metadata:
     html-minifier-terser: "npm:7.2.0"
     husky: "npm:9.1.7"
     idb-keyval: "npm:6.2.2"
-    intl-messageformat: "npm:10.7.18"
+    intl-messageformat: "npm:11.0.1"
     js-yaml: "npm:4.1.1"
     jsdom: "npm:27.3.0"
     jszip: "npm:3.10.1"
@@ -9355,7 +9152,7 @@ __metadata:
     typescript-eslint: "npm:8.50.0"
     ua-parser-js: "npm:2.0.7"
     vite-tsconfig-paths: "npm:6.0.1"
-    vitest: "npm:4.0.15"
+    vitest: "npm:4.0.16"
     vue: "npm:2.7.16"
     vue2-daterange-picker: "npm:0.6.8"
     webpack-stats-plugin: "npm:1.1.3"
@@ -9735,15 +9532,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:10.7.18":
-  version: 10.7.18
-  resolution: "intl-messageformat@npm:10.7.18"
+"intl-messageformat@npm:11.0.1":
+  version: 11.0.1
+  resolution: "intl-messageformat@npm:11.0.1"
   dependencies:
-    "@formatjs/ecma402-abstract": "npm:2.3.6"
-    "@formatjs/fast-memoize": "npm:2.2.7"
-    "@formatjs/icu-messageformat-parser": "npm:2.11.4"
+    "@formatjs/ecma402-abstract": "npm:3.0.1"
+    "@formatjs/fast-memoize": "npm:3.0.1"
+    "@formatjs/icu-messageformat-parser": "npm:3.0.1"
     tslib: "npm:^2.8.0"
-  checksum: 10/96650d673912763d21bbfa14b50749b992d45f1901092a020e3155961e3c70f4644dd1731c3ecb1207a1eb94d84bedf4c34b1ac8127c29ad6b015b6a2a4045cb
+  checksum: 10/f109e773caf71040da26846b540c694cde600f6ddb31148d6a3ddb49302ac4045b7229f1c7a639bb3f48647c8a5115cebb4ed1ebd4b580e6de638235ea0c8125
   languageName: node
   linkType: hard
 
@@ -13751,13 +13548,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-observer@npm:^0.0.8":
-  version: 0.0.8
-  resolution: "style-observer@npm:0.0.8"
-  checksum: 10/9c72ee12c61d48f64622a625ebff9bc4df009877e7ed9b26cec08e8159f6270f428aeea120f0e7c5567c8bbaa701846528fb5339dbdb930e84f2a66d382aeeb6
-  languageName: node
-  linkType: hard
-
 "superstruct@npm:2.0.2":
   version: 2.0.2
   resolution: "superstruct@npm:2.0.2"
@@ -14769,17 +14559,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:4.0.15":
-  version: 4.0.15
-  resolution: "vitest@npm:4.0.15"
+"vitest@npm:4.0.16":
+  version: 4.0.16
+  resolution: "vitest@npm:4.0.16"
   dependencies:
-    "@vitest/expect": "npm:4.0.15"
-    "@vitest/mocker": "npm:4.0.15"
-    "@vitest/pretty-format": "npm:4.0.15"
-    "@vitest/runner": "npm:4.0.15"
-    "@vitest/snapshot": "npm:4.0.15"
-    "@vitest/spy": "npm:4.0.15"
-    "@vitest/utils": "npm:4.0.15"
+    "@vitest/expect": "npm:4.0.16"
+    "@vitest/mocker": "npm:4.0.16"
+    "@vitest/pretty-format": "npm:4.0.16"
+    "@vitest/runner": "npm:4.0.16"
+    "@vitest/snapshot": "npm:4.0.16"
+    "@vitest/spy": "npm:4.0.16"
+    "@vitest/utils": "npm:4.0.16"
     es-module-lexer: "npm:^1.7.0"
     expect-type: "npm:^1.2.2"
     magic-string: "npm:^0.30.21"
@@ -14797,10 +14587,10 @@ __metadata:
     "@edge-runtime/vm": "*"
     "@opentelemetry/api": ^1.9.0
     "@types/node": ^20.0.0 || ^22.0.0 || >=24.0.0
-    "@vitest/browser-playwright": 4.0.15
-    "@vitest/browser-preview": 4.0.15
-    "@vitest/browser-webdriverio": 4.0.15
-    "@vitest/ui": 4.0.15
+    "@vitest/browser-playwright": 4.0.16
+    "@vitest/browser-preview": 4.0.16
+    "@vitest/browser-webdriverio": 4.0.16
+    "@vitest/ui": 4.0.16
     happy-dom: "*"
     jsdom: "*"
   peerDependenciesMeta:
@@ -14824,7 +14614,7 @@ __metadata:
       optional: true
   bin:
     vitest: vitest.mjs
-  checksum: 10/b6df3d07b3f858ce1efc072d90753bc76d278a29245317b70e7bab0ded8bfaf81fc1e41aa30687365fef6d0e4110727867716440bc745e8948ae217a67f9d77b
+  checksum: 10/22b3806988ab186be4a6a133903a70c62835198e8e749f6ed751957d23bc1e3f0466e310a1a79d0b70a354b2e308e574486191eb39711257b3fe61e4fe00d1c8
   languageName: node
   linkType: hard