@sbb-esta/lyne-elements 2.11.0 → 3.0.0-next.0

package/option/option/option-base-element.js

@@ -1,43 +1,43 @@
-var P = (a) => {
-  throw TypeError(a);
+var P = (s) => {
+  throw TypeError(s);
 };
-var V = (a, s, n) => s.has(a) || P("Cannot " + n);
-var d = (a, s, n) => (V(a, s, "read from private field"), n ? n.call(a) : s.get(a)), g = (a, s, n) => s.has(a) ? P("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, n), b = (a, s, n, h) => (V(a, s, "write to private field"), h ? h.call(a, n) : s.set(a, n), n);
-import { __esDecorate as o, __runInitializers as r } from "tslib";
+var V = (s, a, n) => a.has(s) || P("Cannot " + n);
+var g = (s, a, n) => (V(s, a, "read from private field"), n ? n.call(s) : a.get(s)), b = (s, a, n) => a.has(s) ? P("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, n), h = (s, a, n, o) => (V(s, a, "write to private field"), o ? o.call(s, n) : a.set(s, n), n);
+import { __esDecorate as d, __runInitializers as r } from "tslib";
 import { MutationController as K } from "@lit-labs/observers/mutation-controller.js";
-import { LitElement as Q, html as c, nothing as G } from "lit";
-import { property as X, state as u } from "lit/decorators.js";
+import { LitElement as Q, html as v, nothing as G } from "lit";
+import { property as X, state as A } from "lit/decorators.js";
 import { slotState as W } from "../../core/decorators.js";
 import { isSafari as Y, setOrRemoveAttribute as Z, isAndroid as tt } from "../../core/dom.js";
-import { SbbDisabledMixin as et, SbbHydrationMixin as it } from "../../core/mixins.js";
+import { SbbDisabledMixin as et, SbbElementInternalsMixin as it, SbbHydrationMixin as st } from "../../core/mixins.js";
 import { SbbIconNameMixin as at } from "../../icon.js";
 import "../../screen-reader-only.js";
-let st = 0;
-const x = Y, lt = {
+let lt = 0;
+const x = Y, rt = {
   attributeFilter: ["data-group-disabled", "data-negative"],
   attributes: !0,
   childList: !0,
   subtree: !0,
   characterData: !0
 };
-let mt = (() => {
-  var _, p, m, f, v, A, l;
-  let a = [W()], s, n = [], h, L = et(at(it(Q))), S = [], C, H, y, k = [], I = [], $, z = [], E = [], F, D = [], N = [], O, T = [], w = [], M, U = [], j = [], B, R = [], q = [];
+let ft = (() => {
+  var c, u, _, p, m, f, l;
+  let s = [W()], a, n = [], o, L = et(at(it(st(Q)))), S = [], y, H, k, I = [], C = [], E, $ = [], z = [], F, D = [], N = [], M, O = [], T = [], w, U = [], j = [], B, R = [], q = [];
   return l = class extends L {
     constructor() {
       var t;
       super();
-      g(this, _, (r(this, S), r(this, k, !1)));
-      g(this, p, (r(this, I), r(this, z, !1)));
-      g(this, m, (r(this, E), r(this, D, void 0)));
-      g(this, f, (r(this, N), r(this, T, !1)));
-      g(this, v, (r(this, w), r(this, U, null)));
-      g(this, A, (r(this, j), r(this, R, !1)));
-      r(this, q), (t = this.addEventListener) == null || t.call(this, "click", (e) => this.selectByClick(e), {
+      b(this, c);
+      b(this, u);
+      b(this, _);
+      b(this, p);
+      b(this, m);
+      b(this, f);
+      this._value = (r(this, S), null), h(this, c, r(this, I, !1)), h(this, u, (r(this, C), r(this, $, !1))), h(this, _, (r(this, z), r(this, D, void 0))), h(this, p, (r(this, N), r(this, O, !1))), h(this, m, (r(this, T), r(this, U, null))), h(this, f, (r(this, j), r(this, R, !1))), r(this, q), (t = this.addEventListener) == null || t.call(this, "click", (e) => this.selectByClick(e), {
         passive: !0
       }), this.addController(new K(this, {
-        config: lt,
-        callback: (e) => this.onOptionAttributesChange(e)
+        config: rt,
+        callback: (e) => this.onExternalMutation(e)
       })), x && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = x) : this._inertAriaGroups = x);
     }
     /**
@@ -47,10 +47,10 @@ let mt = (() => {
      * Due to this, it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
      */
     set value(t) {
-      this.setAttribute("value", `${t}`);
+      typeof t == "string" ? (this.setAttribute("value", `${t}`), this._value = null) : this._value = t;
     }
     get value() {
-      return this.getAttribute("value") ?? "";
+      return this._value ?? this.getAttribute("value") ?? "";
     }
     /** Whether the option is selected. */
     set selected(t) {
@@ -61,43 +61,43 @@ let mt = (() => {
     }
     /** Whether to apply the negative styling */
     get negative() {
-      return d(this, _);
+      return g(this, c);
     }
     set negative(t) {
-      b(this, _, t);
+      h(this, c, t);
     }
     /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
     get disabledFromGroup() {
-      return d(this, p);
+      return g(this, u);
     }
     set disabledFromGroup(t) {
-      b(this, p, t);
+      h(this, u, t);
     }
     get label() {
-      return d(this, m);
+      return g(this, _);
     }
     set label(t) {
-      b(this, m, t);
+      h(this, _, t);
     }
     /** Disable the highlight of the label. */
     get disableLabelHighlight() {
-      return d(this, f);
+      return g(this, p);
     }
     set disableLabelHighlight(t) {
-      b(this, f, t);
+      h(this, p, t);
     }
     /** The portion of the highlighted label. */
     get _highlightString() {
-      return d(this, v);
+      return g(this, m);
     }
     set _highlightString(t) {
-      b(this, v, t);
+      h(this, m, t);
     }
     get _inertAriaGroups() {
-      return d(this, A);
+      return g(this, f);
     }
     set _inertAriaGroups(t) {
-      b(this, A, t);
+      h(this, f, t);
     }
     attributeChangedCallback(t, e, i) {
       (t !== "value" || e !== i) && super.attributeChangedCallback(t, e, i);
@@ -110,14 +110,11 @@ let mt = (() => {
     highlight(t) {
       this._highlightString = t;
     }
-    /**
-     * @internal
-     */
-    setSelectedViaUserInteraction(t) {
-      this.selected = t, this.selectionChange.emit(), this.selected && this.optionSelected.emit();
+    selectViaUserInteraction(t) {
+      this.selected = t, this.selected && this.optionSelected.emit();
     }
     connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `${this.optionId}-${st++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
+      super.connectedCallback(), this.id || (this.id = `${this.optionId}-${lt++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
     }
     willUpdate(t) {
       super.willUpdate(t), t.has("disabled") && (Z(this, "tabindex", tt && !this.disabled && 0), this.updateAriaDisabled());
@@ -144,10 +141,6 @@ let mt = (() => {
     _updateAriaSelected() {
       this.setAttribute("aria-selected", `${this.selected}`);
     }
-    /** @deprecated use onExternalMutation() as replacement. Will be removed with next major change. */
-    onOptionAttributesChange(t) {
-      this.onExternalMutation(t);
-    }
     /** Observe changes on data attributes + slotted content and set the appropriate values. */
     onExternalMutation(t) {
       let e = !1;
@@ -165,18 +158,18 @@ let mt = (() => {
     }
     getHighlightedLabel() {
       if (!this._highlightString || !this._highlightString.trim())
-        return c`${this.label}`;
+        return v`${this.label}`;
       const t = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
       if (t === -1)
-        return c`${this.label}`;
+        return v`${this.label}`;
       const e = this.label.substring(0, t), i = this.label.substring(t, t + this._highlightString.length), J = this.label.substring(t + this._highlightString.length);
-      return c`
+      return v`
       <span class="sbb-option__label--highlight">${e}</span><span>${i}</span
       ><span class="sbb-option__label--highlight">${J}</span>
     `;
     }
     renderIcon() {
-      return c` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
+      return v` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
     }
     renderLabel() {
       return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : G;
@@ -185,14 +178,14 @@ let mt = (() => {
       return G;
     }
     render() {
-      return c`
+      return v`
       <div class="sbb-option__container">
         <div class="sbb-option">
           ${this.renderIcon()}
           <span class="sbb-option__label">
             <slot @slotchange=${this.handleHighlightState}></slot>
             ${this.renderLabel()}
-            ${this._inertAriaGroups && this.getAttribute("data-group-label") ? c`<sbb-screen-reader-only>
+            ${this._inertAriaGroups && this.getAttribute("data-group-label") ? v`<sbb-screen-reader-only>
                   (${this.getAttribute("data-group-label")})</sbb-screen-reader-only
                 >` : G}
           </span>
@@ -201,27 +194,27 @@ let mt = (() => {
       </div>
     `;
     }
-  }, _ = new WeakMap(), p = new WeakMap(), m = new WeakMap(), f = new WeakMap(), v = new WeakMap(), A = new WeakMap(), h = l, (() => {
+  }, c = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), p = new WeakMap(), m = new WeakMap(), f = new WeakMap(), o = l, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(L[Symbol.metadata] ?? null) : void 0;
-    C = [X()], H = [X({ type: Boolean })], y = [u()], $ = [u()], F = [u()], O = [u()], M = [u()], B = [u()], o(l, null, C, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+    y = [X()], H = [X({ type: Boolean })], k = [A()], E = [A()], F = [A()], M = [A()], w = [A()], B = [A()], d(l, null, y, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
       e.value = i;
-    } }, metadata: t }, null, S), o(l, null, H, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (e) => "selected" in e, set: (e, i) => {
+    } }, metadata: t }, null, S), d(l, null, H, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (e) => "selected" in e, set: (e, i) => {
       e.selected = i;
-    } }, metadata: t }, null, S), o(l, null, y, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (e) => "negative" in e, get: (e) => e.negative, set: (e, i) => {
+    } }, metadata: t }, null, S), d(l, null, k, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (e) => "negative" in e, get: (e) => e.negative, set: (e, i) => {
       e.negative = i;
-    } }, metadata: t }, k, I), o(l, null, $, { kind: "accessor", name: "disabledFromGroup", static: !1, private: !1, access: { has: (e) => "disabledFromGroup" in e, get: (e) => e.disabledFromGroup, set: (e, i) => {
+    } }, metadata: t }, I, C), d(l, null, E, { kind: "accessor", name: "disabledFromGroup", static: !1, private: !1, access: { has: (e) => "disabledFromGroup" in e, get: (e) => e.disabledFromGroup, set: (e, i) => {
       e.disabledFromGroup = i;
-    } }, metadata: t }, z, E), o(l, null, F, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (e) => "label" in e, get: (e) => e.label, set: (e, i) => {
+    } }, metadata: t }, $, z), d(l, null, F, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (e) => "label" in e, get: (e) => e.label, set: (e, i) => {
       e.label = i;
-    } }, metadata: t }, D, N), o(l, null, O, { kind: "accessor", name: "disableLabelHighlight", static: !1, private: !1, access: { has: (e) => "disableLabelHighlight" in e, get: (e) => e.disableLabelHighlight, set: (e, i) => {
+    } }, metadata: t }, D, N), d(l, null, M, { kind: "accessor", name: "disableLabelHighlight", static: !1, private: !1, access: { has: (e) => "disableLabelHighlight" in e, get: (e) => e.disableLabelHighlight, set: (e, i) => {
       e.disableLabelHighlight = i;
-    } }, metadata: t }, T, w), o(l, null, M, { kind: "accessor", name: "_highlightString", static: !1, private: !1, access: { has: (e) => "_highlightString" in e, get: (e) => e._highlightString, set: (e, i) => {
+    } }, metadata: t }, O, T), d(l, null, w, { kind: "accessor", name: "_highlightString", static: !1, private: !1, access: { has: (e) => "_highlightString" in e, get: (e) => e._highlightString, set: (e, i) => {
       e._highlightString = i;
-    } }, metadata: t }, U, j), o(l, null, B, { kind: "accessor", name: "_inertAriaGroups", static: !1, private: !1, access: { has: (e) => "_inertAriaGroups" in e, get: (e) => e._inertAriaGroups, set: (e, i) => {
+    } }, metadata: t }, U, j), d(l, null, B, { kind: "accessor", name: "_inertAriaGroups", static: !1, private: !1, access: { has: (e) => "_inertAriaGroups" in e, get: (e) => e._inertAriaGroups, set: (e, i) => {
       e._inertAriaGroups = i;
-    } }, metadata: t }, R, q), o(null, s = { value: h }, a, { kind: "class", name: h.name, metadata: t }, null, n), h = s.value, t && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), r(h, n);
-  })(), h;
+    } }, metadata: t }, R, q), d(null, a = { value: o }, s, { kind: "class", name: o.name, metadata: t }, null, n), o = a.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), r(o, n);
+  })(), o;
 })();
 export {
-  mt as SbbOptionBaseElement
+  ft as SbbOptionBaseElement
 };

package/option/option/option.component.d.ts

@@ -11,8 +11,10 @@ export type SbbOptionVariant = 'autocomplete' | 'select' | null;
  * @event {CustomEvent<void>} optionSelected - 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) | null
  */
-export declare class SbbOptionElement extends SbbOptionBaseElement {
+export declare class SbbOptionElement<T = string> extends SbbOptionBaseElement<T> {
+    static readonly role = "option";
     static styles: CSSResultGroup;
     static readonly events: {
         readonly selectionChange: "optionSelectionChange";
@@ -29,7 +31,7 @@ export declare class SbbOptionElement extends SbbOptionBaseElement {
     private get _isMultiple();
     protected setAttributeFromParent(): void;
     protected selectByClick(event: MouseEvent): void;
-    connectedCallback(): void;
+    protected selectViaUserInteraction(selected: boolean): void;
     protected init(): void;
     private _setVariantByContext;
     protected handleHighlightState(): void;
@@ -43,6 +45,7 @@ declare global {
     }
     interface GlobalEventHandlersEventMap {
         optionSelectionChange: CustomEvent<void>;
+        optionSelected: CustomEvent<void>;
     }
 }
 //# sourceMappingURL=option.component.d.ts.map

package/option/option/option.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAIpC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;GASG;AACH,qBAKM,gBAAiB,SAAQ,oBAAoB;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,sDAAsD;IACtD,SAAS,CAAC,eAAe,EAAE,YAAY,CAGrC;IAEF,iDAAiD;IACjD,SAAS,CAAC,cAAc,EAAE,YAAY,CAGpC;IAEF,OAAO,KAAK,QAAQ,QAInB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,QAEtB;IACD,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAgBxC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAchC,iBAAiB,IAAI,IAAI;cAItB,IAAI,IAAI,IAAI;IAS/B,OAAO,CAAC,oBAAoB;cAST,oBAAoB,IAAI,IAAI;cAS5B,UAAU,IAAI,cAAc;cAoB5B,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;cAM9C,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;CAKjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC1C;CACF"}
+{"version":3,"file":"option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;;GAUG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAChE,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,sDAAsD;IACtD,SAAS,CAAC,eAAe,EAAE,YAAY,CAGrC;IAEF,iDAAiD;IACjD,SAAS,CAAC,cAAc,EAAE,YAAY,CAGpC;IAEF,OAAO,KAAK,QAAQ,QAInB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,QAEtB;IACD,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAgBxC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;cAc7B,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;cAKjD,IAAI,IAAI,IAAI;IAS/B,OAAO,CAAC,oBAAoB;cAST,oBAAoB,IAAI,IAAI;cAS5B,UAAU,IAAI,cAAc;cAoB5B,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;cAM9C,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;CAKjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QACzC,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACnC;CACF"}

package/option/option/option.component.js

@@ -1,16 +1,13 @@
 import { __esDecorate as h, __runInitializers as u } from "tslib";
-import { css as g, nothing as b, html as r } from "lit";
+import { css as g, nothing as r, html as b } from "lit";
 import { customElement as v } from "lit/decorators.js";
-import { hostAttributes as m } from "../../core/decorators.js";
 import { EventEmitter as d } from "../../core/eventing.js";
-import { SbbOptionBaseElement as f } from "./option-base-element.js";
+import { SbbOptionBaseElement as m } from "./option-base-element.js";
 import "../../visual-checkbox.js";
-const _ = g`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-color-milk);--sbb-option-background-color-active: var(--sbb-color-cloud);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-background-color: var(--sbb-color-milk);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke);--sbb-option-background-color-hover: var(--sbb-color-charcoal);--sbb-option-background-color-active: var(--sbb-color-iron);--sbb-option-disabled-border-color: var(--sbb-color-smoke);--sbb-option-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([data-active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}@media (any-hover: hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}: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__container{background-color:var(--sbb-option-background-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);display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);padding-block:var(--sbb-option-padding-block);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-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(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.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)}.sbb-option__label{white-space:initial}`;
-let A = (() => {
+const f = g`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-color-milk);--sbb-option-background-color-active: var(--sbb-color-cloud);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-background-color: var(--sbb-color-milk);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);--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);--sbb-option-background-color-hover: var(--sbb-color-charcoal);--sbb-option-background-color-active: var(--sbb-color-iron);--sbb-option-disabled-border-color: var(--sbb-color-smoke);--sbb-option-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}: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__container{background-color:var(--sbb-option-background-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;min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-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(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.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)}.sbb-option__label{white-space:initial}`;
+let z = (() => {
   var o;
-  let p = [v("sbb-option"), m({
-    role: "option"
-  })], l, n = [], i, c = f;
+  let p = [v("sbb-option")], n, l = [], i, c = m;
   var a = (o = class extends c {
     constructor() {
       super(...arguments), this.optionId = "sbb-option", this.selectionChange = new d(this, a.events.selectionChange), this.optionSelected = new d(this, a.events.optionSelected);
@@ -41,10 +38,10 @@ let A = (() => {
         t.stopPropagation();
         return;
       }
-      this._isMultiple ? (t.stopPropagation(), this.setSelectedViaUserInteraction(!this.selected)) : this.setSelectedViaUserInteraction(!0);
+      this._isMultiple ? (t.stopPropagation(), this.selectViaUserInteraction(!this.selected)) : this.selectViaUserInteraction(!0);
     }
-    connectedCallback() {
-      super.connectedCallback();
+    selectViaUserInteraction(t) {
+      super.selectViaUserInteraction(t), this.selectionChange.emit();
     }
     init() {
       super.init(), this._setVariantByContext(), this.handleHighlightState();
@@ -61,35 +58,35 @@ let A = (() => {
       super.handleHighlightState();
     }
     renderIcon() {
-      return r`
+      return b`
       <!-- Icon -->
-      ${this._isMultiple ? b : r` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+      ${this._isMultiple ? r : b` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
 
       <!-- Checkbox -->
-      ${this._isMultiple ? r`
+      ${this._isMultiple ? b`
             <sbb-visual-checkbox
               ?checked=${this.selected}
               ?disabled=${this.disabled || this.disabledFromGroup}
               ?negative=${this.negative}
             ></sbb-visual-checkbox>
-          ` : b}
+          ` : r}
     `;
     }
     renderLabel() {
-      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : b;
+      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : r;
     }
     renderTick() {
-      return this._variant === "select" && !this._isMultiple && this.selected ? r`<sbb-icon name="tick-small"></sbb-icon>` : b;
+      return this._variant === "select" && !this._isMultiple && this.selected ? b`<sbb-icon name="tick-small"></sbb-icon>` : r;
     }
   }, i = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    h(null, l = { value: i }, p, { kind: "class", name: i.name, metadata: t }, null, n), a = i = l.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = _, o.events = {
+    h(null, n = { value: i }, p, { kind: "class", name: i.name, metadata: t }, null, l), a = i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "option", o.styles = f, o.events = {
     selectionChange: "optionSelectionChange",
     optionSelected: "optionSelected"
-  }, u(i, n), o);
+  }, u(i, l), o);
   return a = i;
 })();
 export {
-  A as SbbOptionElement
+  z as SbbOptionElement
 };

package/overlay/overlay-base-element.d.ts

@@ -1,7 +1,7 @@
 import { PropertyValues } from 'lit';
 import { SbbFocusTrapController } from '../core/a11y.js';
 import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
-import { SbbInertController, SbbLanguageController, SbbEscapableOverlayController } from '../core/controllers.js';
+import { SbbEscapableOverlayController, SbbInertController, SbbLanguageController } from '../core/controllers.js';
 import { SbbScrollHandler } from '../core/dom.js';
 import { EventEmitter } from '../core/eventing.js';
 import { SbbOverlayCloseEventDetails } from '../core/interfaces.js';
@@ -15,8 +15,6 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     protected didClose: EventEmitter<SbbOverlayCloseEventDetails>;
     protected lastFocusedElement?: HTMLElement;
     protected overlayCloseElement?: HTMLElement;
-    /** @deprecated */
-    protected overlayController: AbortController;
     protected openOverlayController: AbortController;
     protected focusTrapController: SbbFocusTrapController;
     protected scrollHandler: SbbScrollHandler;
@@ -40,11 +38,6 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     protected closeOnSbbOverlayCloseClick(event: Event): void;
     protected removeAriaLiveRefContent(): void;
     protected setAriaLiveRefContent(label?: string): void;
-    /**
-     * Focuses the element marked with sbb-focus-initial or the first focusable element.
-     * @deprecated. Will be removed with next major version.
-     */
-    protected setOverlayFocus(): void;
 }
 export {};
 //# sourceMappingURL=overlay-base-element.d.ts.map

package/overlay/overlay-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAA6B,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,6BAA6B,EAC9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAIe,qBAAsB,SAAQ,0BAAyC;IACpF,kHAAkH;IAClH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAIpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,kBAAkB;IAClB,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,mBAAmB,yBAAoC;IACjE,SAAS,CAAC,aAAa,mBAA0B;IACjD,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC;IAC3B,SAAS,CAAC,iBAAiB,UAAS;IACpC,SAAS,CAAC,WAAW,EAAG,0BAA0B,CAAC;IACnD,SAAS,CAAC,QAAQ,wBAAmC;IACrD,SAAS,CAAC,eAAe,qBAAgC;IACzD,SAAS,CAAC,6BAA6B,gCAA2C;IAElF,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IACrE,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,uBAAuB,IAAI,OAAO;IAErD,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAyBrC,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAQ5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAiBzC,SAAS,CAAC,kCAAkC,IAAI,IAAI;IAKpD,SAAS,CAAC,2BAA2B,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAoBzD,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C,SAAS,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;IAUrD;;;OAGG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;CAGlC"}
+{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAA6B,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EACL,6BAA6B,EAC7B,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F,kHAAkH;IAClH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAIpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,mBAAmB,yBAAoC;IACjE,SAAS,CAAC,aAAa,mBAA0B;IACjD,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC;IAC3B,SAAS,CAAC,iBAAiB,UAAS;IACpC,SAAS,CAAC,WAAW,EAAG,0BAA0B,CAAC;IACnD,SAAS,CAAC,QAAQ,wBAAmC;IACrD,SAAS,CAAC,eAAe,qBAAgC;IACzD,SAAS,CAAC,6BAA6B,gCAA2C;IAElF,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IACrE,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,uBAAuB,IAAI,OAAO;IAErD,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAyBrC,iBAAiB,IAAI,IAAI;cAKtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAO5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAiBzC,SAAS,CAAC,kCAAkC,IAAI,IAAI;IAKpD,SAAS,CAAC,2BAA2B,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAoBzD,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C,SAAS,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;CAStD"}

package/overlay/overlay-base-element.js

@@ -1,43 +1,41 @@
-var y = (t) => {
-  throw TypeError(t);
+var m = (e) => {
+  throw TypeError(e);
 };
-var C = (t, l, r) => l.has(t) || y("Cannot " + r);
-var g = (t, l, r) => (C(t, l, "read from private field"), r ? r.call(t) : l.get(t)), L = (t, l, r) => l.has(t) ? y("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(t) : l.set(t, r), m = (t, l, r, a) => (C(t, l, "write to private field"), a ? a.call(t, r) : l.set(t, r), r);
-import { __runInitializers as u, __esDecorate as w } from "tslib";
+var u = (e, i, l) => i.has(e) || m("Cannot " + l);
+var d = (e, i, l) => (u(e, i, "read from private field"), l ? l.call(e) : i.get(e)), f = (e, i, l) => i.has(e) ? m("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, l), h = (e, i, l, o) => (u(e, i, "write to private field"), o ? o.call(e, l) : i.set(e, l), l);
+import { __runInitializers as p, __esDecorate as v } from "tslib";
 import "lit";
-import { property as S } from "lit/decorators.js";
-import { SbbFocusTrapController as _ } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as O } from "../core/base-elements.js";
-import { SbbLanguageController as E, SbbInertController as R, SbbEscapableOverlayController as A } from "../core/controllers.js";
-import { hostAttributes as T, forceType as k } from "../core/decorators.js";
-import { SbbScrollHandler as x } from "../core/dom.js";
-import { EventEmitter as I } from "../core/eventing.js";
-import { i18nDialog as D } from "../core/i18n.js";
-import { SbbNegativeMixin as F } from "../core/mixins.js";
+import { property as y } from "lit/decorators.js";
+import { SbbFocusTrapController as C } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as g } from "../core/base-elements.js";
+import { SbbLanguageController as L, SbbInertController as w, SbbEscapableOverlayController as S } from "../core/controllers.js";
+import { forceType as O } from "../core/decorators.js";
+import { SbbScrollHandler as R } from "../core/dom.js";
+import { EventEmitter as E } from "../core/eventing.js";
+import { i18nDialog as A } from "../core/i18n.js";
+import { SbbNegativeMixin as _ } from "../core/mixins.js";
 const b = [];
-let J = (() => {
-  var o, s;
-  let t = [T({
-    popover: "manual"
-  })], l, r = [], a, v = F(O), d, f = [], p = [];
-  var h = (s = class extends v {
+let P = (() => {
+  var a, s;
+  let e = _(g), i, l = [], o = [];
+  return s = class extends e {
     constructor() {
       super(...arguments);
-      L(this, o);
-      m(this, o, u(this, f, "")), this.didClose = (u(this, p), new I(this, h.events.didClose, { cancelable: !0 })), this.focusTrapController = new _(this), this.scrollHandler = new x(), this.ariaLiveRefToggle = !1, this.language = new E(this), this.inertController = new R(this), this.sbbEscapableOverlayController = new A(this);
+      f(this, a);
+      h(this, a, p(this, l, "")), this.didClose = (p(this, o), new E(this, s.events.didClose, { cancelable: !0 })), this.focusTrapController = new C(this), this.scrollHandler = new R(), this.ariaLiveRefToggle = !1, this.language = new L(this), this.inertController = new w(this), this.sbbEscapableOverlayController = new S(this);
     }
     /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
     get accessibilityLabel() {
-      return g(this, o);
+      return d(this, a);
     }
-    set accessibilityLabel(e) {
-      m(this, o, e);
+    set accessibilityLabel(t) {
+      h(this, a, t);
     }
     /** Closes the component. */
-    close(e, i) {
+    close(t, r) {
       if (this.state !== "opened")
         return;
-      this.returnValue = e, this.overlayCloseElement = i;
+      this.returnValue = t, this.overlayCloseElement = r;
       const n = {
         returnValue: this.returnValue,
         closeTarget: this.overlayCloseElement
@@ -45,15 +43,14 @@ let J = (() => {
       this.willClose.emit(n) && (this.state = "closing", this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing());
     }
     connectedCallback() {
-      var e;
-      super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController();
+      this.popover = "manual", super.connectedCallback();
     }
-    firstUpdated(e) {
-      this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(e);
+    firstUpdated(t) {
+      this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(t);
     }
     disconnectedCallback() {
-      var e, i;
-      super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (i = this.openOverlayController) == null || i.abort(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
+      var t;
+      super.disconnectedCallback(), (t = this.openOverlayController) == null || t.abort(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
     }
     attachOpenOverlayEvents() {
       this.openOverlayController = new AbortController(), window.addEventListener("keydown", () => {
@@ -68,35 +65,27 @@ let J = (() => {
       b.splice(b.indexOf(this), 1);
     }
     // Close the component on click of any element that has the `closeAttribute` attribute.
-    closeOnSbbOverlayCloseClick(e) {
-      const i = e.composedPath().filter((c) => c instanceof window.HTMLElement).find((c) => c.hasAttribute(this.closeAttribute) && !c.hasAttribute("disabled"));
-      if (!i)
+    closeOnSbbOverlayCloseClick(t) {
+      const r = t.composedPath().filter((c) => c instanceof window.HTMLElement).find((c) => c.hasAttribute(this.closeAttribute) && !c.hasAttribute("disabled"));
+      if (!r)
         return;
-      const n = i.getAttribute("type") === "submit" ? i.form ?? null : null;
-      b[b.length - 1].close(n, i);
+      const n = r.getAttribute("type") === "submit" ? r.form ?? null : null;
+      b[b.length - 1].close(n, r);
     }
     removeAriaLiveRefContent() {
       this.ariaLiveRef.textContent = "";
     }
-    setAriaLiveRefContent(e) {
-      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${D[this.language.current]}${e ? `, ${e}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
+    setAriaLiveRefContent(t) {
+      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${A[this.language.current]}${t ? `, ${t}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
     }
-    /**
-     * Focuses the element marked with sbb-focus-initial or the first focusable element.
-     * @deprecated. Will be removed with next major version.
-     */
-    setOverlayFocus() {
-      this.focusTrapController.focusInitialElement();
-    }
-  }, o = new WeakMap(), a = s, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    d = [k(), S({ attribute: "accessibility-label" })], w(s, null, d, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, n) => {
-      i.accessibilityLabel = n;
-    } }, metadata: e }, f, p), w(null, l = { value: a }, t, { kind: "class", name: a.name, metadata: e }, null, r), h = a = l.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), u(a, r);
-  })(), s);
-  return h = a;
+  }, a = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    i = [O(), y({ attribute: "accessibility-label" })], v(s, null, i, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (r) => "accessibilityLabel" in r, get: (r) => r.accessibilityLabel, set: (r, n) => {
+      r.accessibilityLabel = n;
+    } }, metadata: t }, l, o), t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s;
 })();
 export {
-  J as SbbOverlayBaseElement,
+  P as SbbOverlayBaseElement,
   b as overlayRefs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "2.11.0",
+  "version": "3.0.0-next.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",

package/paginator/common/paginator-common.d.ts

@@ -2,9 +2,8 @@ import { LitElement, TemplateResult } from 'lit';
 import { SbbLanguageController } from '../../core/controllers.js';
 import { SbbPaginatorPageEventDetails } from '../../core/interfaces.js';
 import { AbstractConstructor } from '../../core/mixins.js';
-export declare abstract class SbbPaginatorCommonElementMixinType {
-    accessor negative: boolean;
-    accessor disabled: boolean;
+declare const SbbPaginatorCommonElementMixinType_base: AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
+export declare abstract class SbbPaginatorCommonElementMixinType extends SbbPaginatorCommonElementMixinType_base {
     accessor length: number;
     accessor pageSize: number;
     accessor pageIndex: number;
@@ -19,10 +18,6 @@ export declare abstract class SbbPaginatorCommonElementMixinType {
     hasNextPage(): boolean;
     numberOfPages(): number;
     protected language: SbbLanguageController;
-    /**
-     * @deprecated Will be removed with next major change.
-     */
-    protected pageIndexChanged(value: number): void;
     protected emitPageEvent(previousPageIndex: number): void;
     protected renderPrevNextButtons(): TemplateResult;
     protected abstract renderPaginator(): TemplateResult;
@@ -33,4 +28,5 @@ declare global {
         page: CustomEvent<SbbPaginatorPageEventDetails>;
     }
 }
+export {};
 //# sourceMappingURL=paginator-common.d.ts.map

package/paginator/common/paginator-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,mBAAmB,EAAsC,MAAM,sBAAsB,CAAC;AAEpG,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAkC;IAC9D,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IACzB,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C;;OAEG;IACH,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAuM5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
+{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAIlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EACL,KAAK,mBAAmB,EAIzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAmC,SAAQ,uCAExE;IACC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IACzB,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI;IACxD,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CA4L5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}