@sbb-esta/lyne-elements 2.11.2 → 3.0.0-next.1

package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js

@@ -1,30 +1,31 @@
-import { __esDecorate as p, __runInitializers as v } from "tslib";
-import { customElement as f } from "lit/decorators.js";
-import { SbbAutocompleteBaseElement as g } from "../../autocomplete.js";
-import { getNextElementIndex as u } from "../../core/a11y.js";
-import { hostAttributes as A } from "../../core/decorators.js";
+import { __esDecorate as v, __runInitializers as f } from "tslib";
+import { customElement as g } from "lit/decorators.js";
+import { SbbAutocompleteBaseElement as A } from "../../autocomplete.js";
+import { getNextElementIndex as m } from "../../core/a11y.js";
 import { isSafari as I } from "../../core/dom.js";
 import { setAriaComboBoxAttributes as _ } from "../../core/overlay.js";
-import { SbbAutocompleteGridOptionElement as m } from "../autocomplete-grid-option.js";
+import { SbbAutocompleteGridOptionElement as b } from "../autocomplete-grid-option.js";
 let x = 0;
-const b = I;
-let q = (() => {
+const h = I;
+let k = (() => {
   var a;
-  let h = [f("sbb-autocomplete-grid"), A({
-    role: b ? "grid" : null
-  })], l, n = [], s, c = g;
-  return a = class extends c {
+  let p = [g("sbb-autocomplete-grid")], n, c = [], r, d = A;
+  return a = class extends d {
     get options() {
-      return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-option") ?? []);
+      var t;
+      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-option")) ?? []);
     }
     get _row() {
-      return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-row")).filter((t) => !t.hasAttribute("data-disabled")) ?? [];
+      var t;
+      return Array.from((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-row")).filter((e) => !e.hasAttribute("data-disabled")) ?? [];
     }
     constructor() {
-      super(), this.overlayId = `sbb-autocomplete-grid-${++x}`, this.panelRole = "grid", this._activeItemIndex = -1, this._activeColumnIndex = 0, this.addEventListener?.("autocompleteOptionSelectionChange", (t) => this.onOptionSelected(t));
+      var t;
+      super(), this.overlayId = `sbb-autocomplete-grid-${++x}`, this.panelRole = "grid", this._activeItemIndex = -1, this._activeColumnIndex = 0, (t = this.addEventListener) == null || t.call(this, "autocompleteOptionSelected", (e) => this.onOptionSelected(e));
     }
     syncNegative() {
-      this.querySelectorAll?.("sbb-divider, sbb-autocomplete-grid-button").forEach((t) => t.negative = this.negative), this.querySelectorAll?.("sbb-autocomplete-grid-row, sbb-autocomplete-grid-option, sbb-autocomplete-grid-optgroup").forEach((t) => t.toggleAttribute("data-negative", this.negative));
+      var t, e;
+      (t = this.querySelectorAll) == null || t.call(this, "sbb-divider, sbb-autocomplete-grid-button").forEach((i) => i.negative = this.negative), (e = this.querySelectorAll) == null || e.call(this, "sbb-autocomplete-grid-row, sbb-autocomplete-grid-option, sbb-autocomplete-grid-optgroup").forEach((i) => i.toggleAttribute("data-negative", this.negative));
     }
     openedPanelKeyboardInteraction(t) {
       if (this.state === "opened")
@@ -53,49 +54,53 @@ let q = (() => {
      * would always return a `SbbAutocompleteGridButtonElement`.
      */
     selectByKeyboard(t) {
-      t.preventDefault(), this._activeColumnIndex !== 0 ? this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")[this._activeColumnIndex].click() : this.options[this._activeItemIndex]?.setSelectedViaUserInteraction(!0);
+      var e;
+      t.preventDefault(), this._activeColumnIndex !== 0 ? this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")[this._activeColumnIndex].click() : (e = this.options[this._activeItemIndex]) == null || e.selectViaUserInteraction(!0);
     }
     setNextActiveOption(t) {
-      const i = this.options.filter((e) => !e.disabled && !e.hasAttribute("data-group-disabled")), r = u(t, this._activeItemIndex, i.length);
-      if (isNaN(r))
+      var l;
+      const e = this.options.filter((s) => !s.disabled && !s.hasAttribute("data-group-disabled")), i = m(t, this._activeItemIndex, e.length);
+      if (isNaN(i))
         return;
-      const o = i[r];
-      if (o.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex !== 0)
-        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((e) => e.toggleAttribute("data-focus-visible", !1));
+      const o = e[i];
+      if (o.setActive(!0), (l = this.triggerElement) == null || l.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex !== 0)
+        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((s) => s.toggleAttribute("data-focus-visible", !1));
       else {
-        const e = i[this._activeItemIndex];
-        e && e.setActive(!1);
+        const s = e[this._activeItemIndex];
+        s && s.setActive(!1);
       }
-      this._activeItemIndex = r, this._activeColumnIndex = 0;
+      this._activeItemIndex = i, this._activeColumnIndex = 0;
     }
     _setNextHorizontalActiveElement(t) {
+      var s;
       if (this._activeItemIndex < 0)
         return;
-      const i = Array.from(this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")).filter((d) => !d.disabled && !d.hasAttribute("data-group-disabled")), r = u(t, this._activeColumnIndex, i.length);
-      if (isNaN(r))
+      const e = Array.from(this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-option, sbb-autocomplete-grid-button")).filter((u) => !u.disabled && !u.hasAttribute("data-group-disabled")), i = m(t, this._activeColumnIndex, e.length);
+      if (isNaN(i))
         return;
-      const o = i[r];
-      o instanceof m ? o.setActive(!0) : o.toggleAttribute("data-focus-visible", !0);
-      const e = i[this._activeColumnIndex];
-      e instanceof m ? e.setActive(!1) : e.toggleAttribute("data-focus-visible", !1), this.triggerElement?.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex = r;
+      const o = e[i];
+      o instanceof b ? o.setActive(!0) : o.toggleAttribute("data-focus-visible", !0);
+      const l = e[this._activeColumnIndex];
+      l instanceof b ? l.setActive(!1) : l.toggleAttribute("data-focus-visible", !1), (s = this.triggerElement) == null || s.setAttribute("aria-activedescendant", o.id), o.scrollIntoView({ block: "nearest" }), this._activeColumnIndex = i;
     }
     resetActiveElement() {
+      var t;
       if (this._activeColumnIndex !== 0)
-        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((t) => t.toggleAttribute("data-focus-visible", !1));
+        this._row[this._activeItemIndex].querySelectorAll("sbb-autocomplete-grid-button").forEach((e) => e.toggleAttribute("data-focus-visible", !1));
       else {
-        const t = this.options.filter((i) => !i.disabled && !i.hasAttribute("data-group-disabled"))[this._activeItemIndex];
-        t && t.setActive(!1);
+        const e = this.options.filter((i) => !i.disabled && !i.hasAttribute("data-group-disabled"))[this._activeItemIndex];
+        e && e.setActive(!1);
       }
-      this._activeItemIndex = -1, this._activeColumnIndex = 0, this.triggerElement?.removeAttribute("aria-activedescendant");
+      this._activeItemIndex = -1, this._activeColumnIndex = 0, (t = this.triggerElement) == null || t.removeAttribute("aria-activedescendant");
     }
     setTriggerAttributes(t) {
-      _(t, b ? this.id : this.overlayId, !1, "grid");
+      _(t, h ? this.id : this.overlayId, !1, "grid");
     }
-  }, s = a, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    p(null, l = { value: s }, h, { kind: "class", name: s.name, metadata: t }, null, n), s = l.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), v(s, n);
-  })(), s;
+  }, r = a, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+    v(null, n = { value: r }, p, { kind: "class", name: r.name, metadata: t }, null, c), r = n.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.role = h ? "grid" : null, f(r, c), r;
 })();
 export {
-  q as SbbAutocompleteGridElement
+  k as SbbAutocompleteGridElement
 };

package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.d.ts

@@ -8,6 +8,7 @@ declare const SbbAutocompleteGridButtonElement_base: import('../../core/mixins.j
  * @slot icon - Slot used to display the icon, if one is set
  */
 export declare class SbbAutocompleteGridButtonElement extends SbbAutocompleteGridButtonElement_base {
+    static readonly role = "button";
     static styles: CSSResultGroup;
     /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
     get option(): SbbAutocompleteGridOptionElement | null;

package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-grid-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKnE,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;;AAWvF;;;;GAIG;AACH,qBAQM,gCAAiC,SAAQ,qCAE9C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,+EAA+E;IAC/E,IAAW,MAAM,IAAI,gCAAgC,GAAG,IAAI,CAK3D;IAED,yFAAyF;IACzF,OAAO,CAAC,kBAAkB,CAAS;;cAwBhB,oBAAoB,IAAI,OAAO;cAI/B,cAAc,IAAI,cAAc;IAInC,iBAAiB,IAAI,IAAI;IAUzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOzE,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,kBAAkB,CAIxB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
+{"version":3,"file":"autocomplete-grid-button.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAY,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKnE,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,gCAAgC,CAAC;;AAWvF;;;;GAIG;AACH,qBAOM,gCAAiC,SAAQ,qCAE9C;IACC,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,+EAA+E;IAC/E,IAAW,MAAM,IAAI,gCAAgC,GAAG,IAAI,CAK3D;IAED,yFAAyF;IACzF,OAAO,CAAC,kBAAkB,CAAS;;cAwBhB,oBAAoB,IAAI,OAAO;cAI/B,cAAc,IAAI,cAAc;IAInC,iBAAiB,IAAI,IAAI;IAUzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOzE,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,kBAAkB,CAIxB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}

package/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.component.js

@@ -7,22 +7,22 @@ import { hostAttributes as p, slotState as h } from "../../core/decorators.js";
 import { isEventPrevented as f } from "../../core/eventing.js";
 import { SbbDisabledMixin as g, SbbNegativeMixin as k } from "../../core/mixins.js";
 import { SbbIconNameMixin as y } from "../../icon.js";
-const x = u`*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:block;--sbb-button-display: flex}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-autocomplete-grid-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-autocomplete-grid-button:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-autocomplete-grid-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-active-background)}`;
+const x = u`*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:block;--sbb-button-display: flex}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-autocomplete-grid-button{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-autocomplete-grid-button:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}::slotted(sbb-icon),sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-autocomplete-grid-button:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-autocomplete-grid-button:before{background-color:var(--sbb-button-color-active-background)}`;
 let _ = 0;
 const S = {
   attributeFilter: ["data-group-disabled"]
 };
 let T = (() => {
-  var a;
+  var o;
   let i = [v("sbb-autocomplete-grid-button"), p({
-    role: "button",
     tabindex: null,
     "data-button": ""
-  }), h()], b, e = [], o, r = g(k(y(m)));
-  return a = class extends r {
+  }), h()], b, e = [], a, r = g(k(y(m)));
+  return o = class extends r {
     /** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
     get option() {
-      return this.closest("sbb-autocomplete-grid-row")?.querySelector("sbb-autocomplete-grid-option") || null;
+      var t;
+      return ((t = this.closest("sbb-autocomplete-grid-row")) == null ? void 0 : t.querySelector("sbb-autocomplete-grid-option")) || null;
     }
     constructor() {
       super(), this._disabledFromGroup = !1, this._handleButtonClick = async (t) => {
@@ -42,7 +42,7 @@ let T = (() => {
       return super.renderIconSlot();
     }
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-button-${++_}`;
+      super.connectedCallback(), this.id || (this.id = `sbb-autocomplete-grid-button-${++_}`);
       const t = this.closest("sbb-autocomplete-grid-optgroup");
       t && (this._disabledFromGroup = t.disabled, this._updateAriaDisabled());
     }
@@ -52,10 +52,10 @@ let T = (() => {
     _updateAriaDisabled() {
       this.disabled || this._disabledFromGroup ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
     }
-  }, o = a, (() => {
+  }, a = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    n(null, b = { value: o }, i, { kind: "class", name: o.name, metadata: t }, null, e), o = b.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.styles = x, l(o, e), o;
+    n(null, b = { value: a }, i, { kind: "class", name: a.name, metadata: t }, null, e), a = b.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "button", o.styles = x, l(a, e), a;
 })();
 export {
   T as SbbAutocompleteGridButtonElement

package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.d.ts

@@ -1,10 +1,12 @@
 import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+declare const SbbAutocompleteGridCellElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
 /**
  * A wrapper component for autocomplete-grid action button.
  *
  * @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-button` element.
  */
-export declare class SbbAutocompleteGridCellElement extends LitElement {
+export declare class SbbAutocompleteGridCellElement extends SbbAutocompleteGridCellElement_base {
+    static readonly role = "gridcell";
     static styles: CSSResultGroup;
     protected render(): TemplateResult;
 }
@@ -13,4 +15,5 @@ declare global {
         'sbb-autocomplete-grid-cell': SbbAutocompleteGridCellElement;
     }
 }
+export {};
 //# sourceMappingURL=autocomplete-grid-cell.component.d.ts.map

package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-grid-cell.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOjF;;;;GAIG;AACH,qBAKM,8BAA+B,SAAQ,UAAU;IACrD,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,4BAA4B,EAAE,8BAA8B,CAAC;KAC9D;CACF"}
+{"version":3,"file":"autocomplete-grid-cell.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AAOjF;;;;GAIG;AACH,qBAEM,8BAA+B,SAAQ,mCAAoC;IAC/E,gBAAgC,IAAI,cAAc;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,4BAA4B,EAAE,8BAA8B,CAAC;KAC9D;CACF"}

package/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.component.js

@@ -1,14 +1,12 @@
 import { __esDecorate as i, __runInitializers as c } from "tslib";
-import { css as m, LitElement as n, html as b } from "lit";
+import { css as n, LitElement as m, html as b } from "lit";
 import { customElement as u } from "lit/decorators.js";
-import { hostAttributes as d } from "../../core/decorators.js";
-const p = m`*,:before,:after{box-sizing:border-box}:host{display:block}.sbb-autocomplete-grid-cell{display:flex;column-gap:var(--sbb-spacing-fixed-6x)}`;
-let x = (() => {
-  var t;
-  let o = [u("sbb-autocomplete-grid-cell"), d({
-    role: "gridcell"
-  })], a, s = [], e, r = n;
-  return t = class extends r {
+import { SbbElementInternalsMixin as d } from "../../core/mixins.js";
+const p = n`*,:before,:after{box-sizing:border-box}:host{display:block}.sbb-autocomplete-grid-cell{display:flex;column-gap:var(--sbb-spacing-fixed-6x)}`;
+let g = (() => {
+  var e;
+  let o = [u("sbb-autocomplete-grid-cell")], a, s = [], t, r = d(m);
+  return e = class extends r {
     render() {
       return b`
       <span class="sbb-autocomplete-grid-cell">
@@ -16,11 +14,11 @@ let x = (() => {
       </span>
     `;
     }
-  }, e = t, (() => {
+  }, t = e, (() => {
     const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    i(null, a = { value: e }, o, { kind: "class", name: e.name, metadata: l }, null, s), e = a.value, l && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
-  })(), t.styles = p, c(e, s), e;
+    i(null, a = { value: t }, o, { kind: "class", name: t.name, metadata: l }, null, s), t = a.value, l && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), e.role = "gridcell", e.styles = p, c(t, s), t;
 })();
 export {
-  x as SbbAutocompleteGridCellElement
+  g as SbbAutocompleteGridCellElement
 };

package/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.component.js

@@ -1,30 +1,33 @@
-import { __esDecorate as u, __runInitializers as n } from "tslib";
-import { customElement as b } from "lit/decorators.js";
-import { SbbOptgroupBaseElement as m } from "../../option/optgroup.js";
-let g = (() => {
-  var e;
-  let s = [b("sbb-autocomplete-grid-optgroup")], r, a = [], t, l = m;
-  return e = class extends l {
+import { __esDecorate as n, __runInitializers as b } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbOptgroupBaseElement as c } from "../../option/optgroup.js";
+let f = (() => {
+  var o;
+  let i = [m("sbb-autocomplete-grid-optgroup")], r, a = [], e, l = c;
+  return o = class extends l {
     get options() {
-      return Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-option") ?? []);
+      var t;
+      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-autocomplete-grid-option")) ?? []);
     }
     getAutocompleteParent() {
-      return this.closest?.("sbb-autocomplete-grid") || null;
+      var t;
+      return ((t = this.closest) == null ? void 0 : t.call(this, "sbb-autocomplete-grid")) || null;
     }
     setAttributeFromParent() {
       this.negative = !!this.closest(":is(sbb-autocomplete-grid, sbb-form-field)[negative]"), this.toggleAttribute("data-negative", this.negative);
     }
     proxyDisabledToOptions() {
+      var s;
       super.proxyDisabledToOptions();
-      const o = Array.from(this.querySelectorAll?.("sbb-autocomplete-grid-button") ?? []);
-      for (const i of o)
-        i.toggleAttribute("data-group-disabled", this.disabled);
+      const t = Array.from(((s = this.querySelectorAll) == null ? void 0 : s.call(this, "sbb-autocomplete-grid-button")) ?? []);
+      for (const u of t)
+        u.toggleAttribute("data-group-disabled", this.disabled);
     }
-  }, t = e, (() => {
-    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    u(null, r = { value: t }, s, { kind: "class", name: t.name, metadata: o }, null, a), t = r.value, o && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o }), n(t, a);
-  })(), t;
+  }, e = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    n(null, r = { value: e }, i, { kind: "class", name: e.name, metadata: t }, null, a), e = r.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), b(e, a);
+  })(), e;
 })();
 export {
-  g as SbbAutocompleteGridOptgroupElement
+  f as SbbAutocompleteGridOptgroupElement
 };

package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.d.ts

@@ -7,20 +7,18 @@ export declare const autocompleteGridOptionId: string;
  *
  * @slot - Use the unnamed slot to add content to the option label.
  * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
- * @event {CustomEvent<void>} autocompleteOptionSelectionChange - Emits when the option selection status changes.
  * @event {CustomEvent<void>} autocompleteOptionSelected - Emits when an option was selected by user.
  * @cssprop [--sbb-option-icon-container-display=none] - Can be used to reserve space even
  * when preserve-icon-space on autocomplete is not set or iconName is not set.
+ * @overrideType value - T = string
  */
-export declare class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
+export declare class SbbAutocompleteGridOptionElement<T = string> extends SbbOptionBaseElement<T> {
+    static readonly role = "gridcell";
     static styles: CSSResultGroup;
     static readonly events: {
-        readonly selectionChange: "autocompleteOptionSelectionChange";
         readonly optionSelected: "autocompleteOptionSelected";
     };
     protected optionId: string;
-    /** Emits when the option selection status changes. */
-    protected selectionChange: EventEmitter;
     /** Emits when an option was selected by user. */
     protected optionSelected: EventEmitter;
     protected onExternalMutation(mutationsList: MutationRecord[]): void;
@@ -33,7 +31,7 @@ declare global {
         'sbb-autocomplete-grid-option': SbbAutocompleteGridOptionElement;
     }
     interface GlobalEventHandlersEventMap {
-        autocompleteOptionSelectionChange: CustomEvent<void>;
+        autocompleteOptionSelected: CustomEvent<void>;
     }
 }
 //# sourceMappingURL=autocomplete-grid-option.component.d.ts.map

package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-grid-option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAIvD,eAAO,MAAM,wBAAwB,EAAE,MAAuC,CAAC;AAE/E;;;;;;;;;GASG;AACH,qBAKM,gCAAiC,SAAQ,oBAAoB;IACjE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,SAAS,CAAC,QAAQ,SAA4B;IAE9C,sDAAsD;IACtD,SAAS,CAAC,eAAe,EAAE,YAAY,CAGrC;IAEF,iDAAiD;IACjD,SAAS,CAAC,cAAc,EAAE,YAAY,CAGpC;cAEiB,kBAAkB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAQ5D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWzE,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAexC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;CAQjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;IAED,UAAU,2BAA2B;QACnC,iCAAiC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACtD;CACF"}
+{"version":3,"file":"autocomplete-grid-option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAIvD,eAAO,MAAM,wBAAwB,EAAE,MAAuC,CAAC;AAE/E;;;;;;;;;GASG;AACH,qBAEM,gCAAgC,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAChF,gBAAgC,IAAI,cAAc;IAClD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,SAAS,CAAC,QAAQ,SAA4B;IAE9C,iDAAiD;IACjD,SAAS,CAAC,cAAc,EAAE,YAAY,CAGpC;cAEiB,kBAAkB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAQ5D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWzE,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAexC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;CAQjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;IAED,UAAU,2BAA2B;QACnC,0BAA0B,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC/C;CACF"}

package/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.component.js

@@ -1,46 +1,45 @@
-import { __esDecorate as r, __runInitializers as d } from "tslib";
-import { customElement as c } from "lit/decorators.js";
-import { hostAttributes as p } from "../../core/decorators.js";
-import { EventEmitter as b } from "../../core/eventing.js";
-import { SbbOptionBaseElement as u } from "../../option.js";
-import { css as m } from "lit";
-const h = m`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));display:block}:host([data-active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;padding-block:var(--sbb-option-padding-block);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}:host([data-active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial;border-radius:var(--sbb-option-border-radius)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}`, g = "sbb-autocomplete-grid-option";
+import { __esDecorate as d, __runInitializers as c } from "tslib";
+import { customElement as p } from "lit/decorators.js";
+import { EventEmitter as u } from "../../core/eventing.js";
+import { SbbOptionBaseElement as m } from "../../option.js";
+import { css as h } from "lit";
+const g = h`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);justify-content:start;min-height:var(--sbb-option-min-height);padding-inline:var(--sbb-option-padding-inline);color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}`, v = "sbb-autocomplete-grid-option";
 let w = (() => {
   var o;
-  let n = [c("sbb-autocomplete-grid-option"), p({
-    role: "gridcell"
-  })], s, a = [], e, l = u;
-  var i = (o = class extends l {
+  let r = [p("sbb-autocomplete-grid-option")], l, n = [], e, b = m;
+  var a = (o = class extends b {
     constructor() {
-      super(...arguments), this.optionId = g, this.selectionChange = new b(this, i.events.selectionChange), this.optionSelected = new b(this, i.events.optionSelected);
+      super(...arguments), this.optionId = v, this.optionSelected = new u(this, a.events.optionSelected);
     }
     onExternalMutation(t) {
-      super.onExternalMutation(t), this.closest?.("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup);
+      var i, s;
+      super.onExternalMutation(t), (s = (i = this.closest) == null ? void 0 : i.call(this, "sbb-autocomplete-grid-row")) == null || s.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup);
     }
     willUpdate(t) {
-      super.willUpdate(t), t.has("disabled") && (this.closest?.("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
+      var i, s;
+      super.willUpdate(t), t.has("disabled") && ((s = (i = this.closest) == null ? void 0 : i.call(this, "sbb-autocomplete-grid-row")) == null || s.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.updateAriaDisabled());
     }
     setAttributeFromParent() {
+      var i;
       const t = this.closest("sbb-autocomplete-grid-optgroup");
-      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.closest("sbb-autocomplete-grid-row")?.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.negative = !!this.closest(":is(sbb-autocomplete-grid[negative],sbb-form-field[negative])"), this.toggleAttribute("data-negative", this.negative);
+      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), (i = this.closest("sbb-autocomplete-grid-row")) == null || i.toggleAttribute("data-disabled", this.disabled || this.disabledFromGroup), this.negative = !!this.closest(":is(sbb-autocomplete-grid[negative],sbb-form-field[negative])"), this.toggleAttribute("data-negative", this.negative);
     }
     selectByClick(t) {
       if (this.disabled || this.disabledFromGroup) {
         t.stopPropagation();
         return;
       }
-      this.setSelectedViaUserInteraction(!0);
+      this.selectViaUserInteraction(!0);
     }
   }, e = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    r(null, s = { value: e }, n, { kind: "class", name: e.name, metadata: t }, null, a), i = e = s.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = h, o.events = {
-    selectionChange: "autocompleteOptionSelectionChange",
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    d(null, l = { value: e }, r, { kind: "class", name: e.name, metadata: t }, null, n), a = e = l.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "gridcell", o.styles = g, o.events = {
     optionSelected: "autocompleteOptionSelected"
-  }, d(e, a), o);
-  return i = e;
+  }, c(e, n), o);
+  return a = e;
 })();
 export {
   w as SbbAutocompleteGridOptionElement,
-  g as autocompleteGridOptionId
+  v as autocompleteGridOptionId
 };

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.d.ts

@@ -1,10 +1,12 @@
 import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+declare const SbbAutocompleteGridRowElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
 /**
  * The component is used as a wrapper for options and action buttons.
  *
  * @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-cell` with one or more `sbb-autocomplete-grid-button`.
  */
-export declare class SbbAutocompleteGridRowElement extends LitElement {
+export declare class SbbAutocompleteGridRowElement extends SbbAutocompleteGridRowElement_base {
+    static readonly role = "row";
     static styles: CSSResultGroup;
     connectedCallback(): void;
     protected render(): TemplateResult;
@@ -14,4 +16,5 @@ declare global {
         'sbb-autocomplete-grid-row': SbbAutocompleteGridRowElement;
     }
 }
+export {};
 //# sourceMappingURL=autocomplete-grid-row.component.d.ts.map

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-grid-row.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AASjF;;;;GAIG;AACH,qBAKM,6BAA8B,SAAQ,UAAU;IACpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtC,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}
+{"version":3,"file":"autocomplete-grid-row.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;;AASjF;;;;GAIG;AACH,qBAEM,6BAA8B,SAAQ,kCAAoC;IAC9E,gBAAgC,IAAI,SAAS;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtC,iBAAiB,IAAI,IAAI;cAKtB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,2BAA2B,EAAE,6BAA6B,CAAC;KAC5D;CACF"}

package/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.component.js

@@ -1,16 +1,14 @@
-import { __esDecorate as s, __runInitializers as c } from "tslib";
+import { __esDecorate as c, __runInitializers as s } from "tslib";
 import { css as i, LitElement as d, html as n } from "lit";
 import { customElement as u } from "lit/decorators.js";
-import { hostAttributes as m } from "../../core/decorators.js";
-const p = i`*,:before,:after{box-sizing:border-box}:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-milk);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-cloud);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height);--sbb-autocomplete-grid-row-cursor: pointer;--sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-autocomplete-grid-row-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-iron);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([data-disabled])){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host([data-disabled]){--sbb-autocomplete-grid-row-cursor: default}@media (forced-colors: active){:host([data-disabled]){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x))}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host([data-disabled]) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host([data-disabled]) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media (forced-colors: active){:host([data-disabled]) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
+import { SbbElementInternalsMixin as m } from "../../core/mixins.js";
+const p = i`*,:before,:after{box-sizing:border-box}:host{--sbb-autocomplete-grid-row-color: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color: inherit;--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-milk);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-cloud);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);--sbb-autocomplete-grid-row-justify-content: space-between;--sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height);--sbb-autocomplete-grid-row-cursor: pointer;--sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-autocomplete-grid-row-color: var(--sbb-color-milk);--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-background-color-hover: var(--sbb-color-charcoal);--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-iron);--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-smoke);--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([data-disabled])){--sbb-autocomplete-grid-row-background-color: var( --sbb-autocomplete-grid-row-background-color-hover )}}:host([data-disabled]){--sbb-autocomplete-grid-row-cursor: default}@media (forced-colors: active){:host([data-disabled]){--sbb-autocomplete-grid-row-color: GrayText}}::slotted(sbb-autocomplete-grid-option){flex:1 1 auto;margin-right:calc(-1 * var(--sbb-spacing-fixed-2x))}.sbb-autocomplete-grid-row{display:flex;align-items:center;padding-inline-end:var(--sbb-autocomplete-grid-row-padding-inline-end);justify-content:var(--sbb-autocomplete-grid-row-justify-content);gap:var(--sbb-spacing-fixed-6x);color:var(--sbb-autocomplete-grid-row-color);background-color:var(--sbb-autocomplete-grid-row-background-color);cursor:var(--sbb-autocomplete-grid-row-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-autocomplete-grid-row-color)}:host([data-disabled]) .sbb-autocomplete-grid-row{position:relative;z-index:0}:host([data-disabled]) .sbb-autocomplete-grid-row:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-autocomplete-grid-row-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-autocomplete-grid-row-disabled-background-color);z-index:-1}@media (forced-colors: active){:host([data-disabled]) .sbb-autocomplete-grid-row:before{border-color:GrayText}}`;
 let g = 0, k = (() => {
-  var r;
-  let l = [u("sbb-autocomplete-grid-row"), m({
-    role: "row"
-  })], t, a = [], o, b = d;
-  return r = class extends b {
+  var o;
+  let l = [u("sbb-autocomplete-grid-row")], t, a = [], r, b = m(d);
+  return o = class extends b {
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-autocomplete-grid-row-${++g}`;
+      super.connectedCallback(), this.id || (this.id = `sbb-autocomplete-grid-row-${++g}`);
     }
     render() {
       return n`
@@ -19,10 +17,10 @@ let g = 0, k = (() => {
       </span>
     `;
     }
-  }, o = r, (() => {
+  }, r = o, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    s(null, t = { value: o }, l, { kind: "class", name: o.name, metadata: e }, null, a), o = t.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), r.styles = p, c(o, a), o;
+    c(null, t = { value: r }, l, { kind: "class", name: r.name, metadata: e }, null, a), r = t.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.role = "row", o.styles = p, s(r, a), r;
 })();
 export {
   k as SbbAutocompleteGridRowElement

package/autocomplete.js

@@ -1,7 +1,6 @@
-import { SbbAutocompleteElement as o } from "./autocomplete/autocomplete.component.js";
-import { SbbAutocompleteBaseElement as p, inputAutocompleteEvent as l } from "./autocomplete/autocomplete-base-element.js";
+import { SbbAutocompleteElement as t } from "./autocomplete/autocomplete.component.js";
+import { SbbAutocompleteBaseElement as b } from "./autocomplete/autocomplete-base-element.js";
 export {
-  p as SbbAutocompleteBaseElement,
-  o as SbbAutocompleteElement,
-  l as inputAutocompleteEvent
+  b as SbbAutocompleteBaseElement,
+  t as SbbAutocompleteElement
 };

package/breadcrumb/breadcrumb/breadcrumb.component.js

@@ -6,7 +6,7 @@ import { slotState as m } from "../../core/decorators.js";
 import { SbbHydrationMixin as u } from "../../core/mixins.js";
 import { SbbIconNameMixin as f } from "../../icon.js";
 import { css as v } from "lit";
-const p = v`*,:before,:after{box-sizing:border-box}:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite)}@media (any-hover: hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal)}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite)}.sbb-breadcrumb{--sbb-link-text-decoration: none;--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration, underline);text-decoration-color:var(--sbb-link-text-decoration-color);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media (forced-colors: active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:pointer;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media (forced-colors: active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not([data-slot-names~=unnamed])) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
+const p = v`*,:before,:after{box-sizing:border-box}:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite)}@media (any-hover: hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal)}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite)}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-color:var(--sbb-link-text-decoration-color);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media (forced-colors: active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:pointer;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media (forced-colors: active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not([data-slot-names~=unnamed])) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
 let z = (() => {
   var t;
   let s = [n("sbb-breadcrumb"), m()], o, b = [], e, a = f(u(d));

package/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts

@@ -8,6 +8,7 @@ declare const SbbBreadcrumbGroupElement_base: import('../../core/mixins.js').Abs
  * @slot - Use the unnamed slot to add `sbb-breadcrumb` elements.
  */
 export declare class SbbBreadcrumbGroupElement extends SbbBreadcrumbGroupElement_base {
+    static readonly role = "navigation";
     static styles: CSSResultGroup;
     protected readonly listChildLocalNames: string[];
     private set _state(value);

package/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAYb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,eAAe,CAAC;;AAIvB;;;;GAIG;AACH,qBAKM,yBAA0B,SAAQ,8BAG3B;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAsB;IAIrE,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAS;;IAO9B,OAAO,CAAC,cAAc;cAiBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAa3F,2EAA2E;IAC3E,OAAO,CAAC,gBAAgB;IAaxB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,UAAU;IAYlB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAK1B,kGAAkG;IAClG,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,eAAe;cAgBJ,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}
+{"version":3,"file":"breadcrumb-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAWb,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI7D,OAAO,eAAe,CAAC;;AAIvB;;;;GAIG;AACH,qBAEM,yBAA0B,SAAQ,8BAGD;IACrC,gBAAuB,IAAI,gBAAgB;IAC3C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAsB;IAIrE,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,aAAa,CAAS;;IAO9B,OAAO,CAAC,cAAc;cAiBH,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAa3F,2EAA2E;IAC3E,OAAO,CAAC,gBAAgB;IAaxB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,UAAU;IAYlB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAK1B,kGAAkG;IAClG,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,eAAe;cAgBJ,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}