Remove ha-combo-box and vaadin dependencies (#28632)

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(
+      bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).length
-        new RegExp(
+        ? new rspack.NormalModuleReplacementPlugin(
-          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
+            new RegExp(
-        ),
+              bundle
-        path.resolve(paths.root_dir, "src/util/empty.js")
+                .emptyPackages({ isHassioBuild, isLandingPageBuild })
-      ),
+                .join("|")
+            ),
+            path.resolve(paths.root_dir, "src/util/empty.js")
+          )
+        : false,
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({

package.json

@@ -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",

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-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-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-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/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/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/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);

yarn.lock

@@ -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"
@@ -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"
@@ -9267,8 +9066,6 @@ __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"
     "@vue/web-component-wrapper": "npm:1.3.0"
@@ -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"