@sbb-esta/lyne-elements 3.0.0-next.3 → 3.0.0

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

@@ -2,7 +2,7 @@ var P = (s) => {
   throw TypeError(s);
 };
 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);
+var g = (s, a, n) => (V(s, a, "read from private field"), n ? n.call(s) : a.get(s)), c = (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 v, nothing as G } from "lit";
@@ -21,18 +21,18 @@ const x = Y, rt = {
   characterData: !0
 };
 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 = [];
+  var b, u, _, p, m, f, l;
+  let s = [W()], a, n = [], o, L = et(at(it(st(Q)))), S = [], y, H, k, E = [], I = [], C, $ = [], z = [], F, D = [], N = [], w, M = [], O = [], T, U = [], j = [], B, R = [], q = [];
   return l = class extends L {
     constructor() {
       super();
-      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), this.addEventListener?.("click", (t) => this.selectByClick(t), {
+      c(this, b);
+      c(this, u);
+      c(this, _);
+      c(this, p);
+      c(this, m);
+      c(this, f);
+      this._value = (r(this, S), null), h(this, b, r(this, E, !1)), h(this, u, (r(this, I), r(this, $, !1))), h(this, _, (r(this, z), r(this, D, void 0))), h(this, p, (r(this, N), r(this, M, !1))), h(this, m, (r(this, O), r(this, U, null))), h(this, f, (r(this, j), r(this, R, !1))), r(this, q), this.addEventListener?.("click", (t) => this.selectByClick(t), {
         passive: !0
       }), this.addController(new K(this, {
         config: rt,
@@ -60,10 +60,10 @@ let ft = (() => {
     }
     /** Whether to apply the negative styling */
     get negative() {
-      return g(this, c);
+      return g(this, b);
     }
     set negative(t) {
-      h(this, c, t);
+      h(this, b, t);
     }
     /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
     get disabledFromGroup() {
@@ -110,7 +110,7 @@ let ft = (() => {
       this._highlightString = t;
     }
     selectViaUserInteraction(t) {
-      this.selected = t, this.selected && this.optionSelected.emit();
+      this.selected = t, this.selected && this.dispatchEvent(new Event("optionselected", { bubbles: !0, composed: !0 }));
     }
     connectedCallback() {
       super.connectedCallback(), this.id ||= `${this.optionId}-${lt++}`, this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
@@ -193,26 +193,28 @@ let ft = (() => {
       </div>
     `;
     }
-  }, c = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), p = new WeakMap(), m = new WeakMap(), f = new WeakMap(), o = l, (() => {
+  }, b = 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;
-    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) => {
+    y = [X()], H = [X({ type: Boolean })], k = [A()], C = [A()], F = [A()], w = [A()], T = [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), 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), 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 }, 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) => {
+    } }, metadata: t }, E, I), d(l, null, C, { 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), 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), 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) => {
+    } }, metadata: t }, D, N), d(l, null, w, { 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 }, 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) => {
+    } }, metadata: t }, M, O), d(l, null, T, { 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), 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), 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;
+    } }, 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 });
+  })(), l.events = {
+    optionselected: "optionselected"
+  }, r(o, n), o;
 })();
 export {
   ft as SbbOptionBaseElement

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

@@ -1,5 +1,4 @@
 import { CSSResultGroup, TemplateResult, nothing } from 'lit';
-import { EventEmitter } from '../../core/eventing.js';
 import { SbbOptionBaseElement } from './option-base-element.js';
 export type SbbOptionVariant = 'autocomplete' | 'select' | null;
 /**
@@ -7,8 +6,6 @@ export type SbbOptionVariant = 'autocomplete' | 'select' | null;
  *
  * @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>} optionSelectionChange - Emits when the option selection status changes.
- * @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
@@ -17,14 +14,10 @@ export declare class SbbOptionElement<T = string> extends SbbOptionBaseElement<T
     static readonly role = "option";
     static styles: CSSResultGroup;
     static readonly events: {
-        readonly selectionChange: "optionSelectionChange";
-        readonly optionSelected: "optionSelected";
+        readonly optionselectionchange: "optionselectionchange";
+        readonly optionselected: "optionselected";
     };
     protected optionId: string;
-    /** Emits when the option selection status changes. */
-    protected selectionChange: EventEmitter;
-    /** Emits when an option was selected by user. */
-    protected optionSelected: EventEmitter;
     private set _variant(value);
     private get _variant();
     private set _isMultiple(value);
@@ -44,8 +37,7 @@ declare global {
         'sbb-option': SbbOptionElement;
     }
     interface GlobalEventHandlersEventMap {
-        optionSelectionChange: CustomEvent<void>;
-        optionSelected: CustomEvent<void>;
+        optionselectionchange: 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;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"}
+{"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,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;GAQG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAChE,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAgC,MAAM;;;MAG3B;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,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;cAMjD,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"}

package/option/option/option.component.js

@@ -1,16 +1,15 @@
-import { __esDecorate as d, __runInitializers as p } from "tslib";
-import { css as h, nothing as s, html as a } from "lit";
-import { customElement as u } from "lit/decorators.js";
-import { EventEmitter as l } from "../../core/eventing.js";
-import { SbbOptionBaseElement as g } from "./option-base-element.js";
+import { __esDecorate as l, __runInitializers as c } from "tslib";
+import { css as d, nothing as e, html as s } from "lit";
+import { customElement as p } from "lit/decorators.js";
+import { SbbOptionBaseElement as u } from "./option-base-element.js";
 import "../../visual-checkbox.js";
-const v = h`*,: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;inset:.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 S = (() => {
+const h = d`*,: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;inset:.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 x = (() => {
   var o;
-  let c = [u("sbb-option")], r, b = [], i, n = g;
-  var e = (o = class extends n {
+  let n = [p("sbb-option")], a, b = [], i, r = u;
+  return o = class extends r {
     constructor() {
-      super(...arguments), this.optionId = "sbb-option", this.selectionChange = new l(this, e.events.selectionChange), this.optionSelected = new l(this, e.events.optionSelected);
+      super(...arguments), this.optionId = "sbb-option";
     }
     set _variant(t) {
       t && this.setAttribute("data-variant", t);
@@ -39,7 +38,7 @@ let S = (() => {
       this._isMultiple ? (t.stopPropagation(), this.selectViaUserInteraction(!this.selected)) : this.selectViaUserInteraction(!0);
     }
     selectViaUserInteraction(t) {
-      super.selectViaUserInteraction(t), this.selectionChange.emit();
+      super.selectViaUserInteraction(t), this.dispatchEvent(new Event("optionselectionchange", { bubbles: !0, composed: !0 }));
     }
     init() {
       super.init(), this._setVariantByContext(), this.handleHighlightState();
@@ -55,35 +54,34 @@ let S = (() => {
       super.handleHighlightState();
     }
     renderIcon() {
-      return a`
+      return s`
       <!-- Icon -->
-      ${this._isMultiple ? s : a` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+      ${this._isMultiple ? e : s` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
 
       <!-- Checkbox -->
-      ${this._isMultiple ? a`
+      ${this._isMultiple ? s`
             <sbb-visual-checkbox
               ?checked=${this.selected}
               ?disabled=${this.disabled || this.disabledFromGroup}
               ?negative=${this.negative}
             ></sbb-visual-checkbox>
-          ` : s}
+          ` : e}
     `;
     }
     renderLabel() {
-      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : s;
+      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : e;
     }
     renderTick() {
-      return this._variant === "select" && !this._isMultiple && this.selected ? a`<sbb-icon name="tick-small"></sbb-icon>` : s;
+      return this._variant === "select" && !this._isMultiple && this.selected ? s`<sbb-icon name="tick-small"></sbb-icon>` : e;
     }
   }, i = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    d(null, r = { value: i }, c, { kind: "class", name: i.name, metadata: t }, null, b), e = i = r.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.role = "option", o.styles = v, o.events = {
-    selectionChange: "optionSelectionChange",
-    optionSelected: "optionSelected"
-  }, p(i, b), o);
-  return e = i;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    l(null, a = { value: i }, n, { kind: "class", name: i.name, metadata: t }, null, b), i = a.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "option", o.styles = h, o.events = {
+    optionselectionchange: "optionselectionchange",
+    optionselected: "optionselected"
+  }, c(i, b), i;
 })();
 export {
-  S as SbbOptionElement
+  x as SbbOptionElement
 };

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

@@ -3,7 +3,6 @@ import { SbbFocusTrapController } from '../core/a11y.js';
 import { SbbOpenCloseBaseElement } from '../core/base-elements.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';
 export declare const overlayRefs: SbbOverlayBaseElement[];
 declare const SbbOverlayBaseElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
@@ -22,8 +21,6 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
      * you provide your own equivalent, if you decide to turn it off.
      */
     accessor skipFocusRestoration: boolean;
-    /** Emits whenever the component is closed. */
-    protected didClose: EventEmitter<SbbOverlayCloseEventDetails>;
     protected lastFocusedElement?: HTMLElement;
     protected overlayCloseElement?: HTMLElement;
     protected openOverlayController: AbortController;
@@ -56,6 +53,8 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     protected removeAriaLiveRefContent(): void;
     protected setAriaLiveRefContent(label?: string): void;
     protected onOverlayAnimationEnd(event: AnimationEvent): void;
+    protected dispatchBeforeCloseEvent(detail?: SbbOverlayCloseEventDetails): boolean;
+    protected dispatchCloseEvent(detail?: SbbOverlayCloseEventDetails): boolean;
 }
 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,EAAY,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,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;AASzE,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD,kHAAkH;IAClH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD;;;;OAIG;IACH,SAEgB,oBAAoB,EAAE,OAAO,CAAS;IAEtD,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,QAAQ,wBAAmC;IACrD,SAAS,CAAC,eAAe,qBAAgC;IACzD,SAAS,CAAC,0BAA0B,gCAA2C;IAE/E,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAElD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,uBAAuB,IAAI,OAAO;IAErD,2BAA2B;IACpB,IAAI,IAAI,IAAI;IA2BnB,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IA0BrC,iBAAiB,IAAI,IAAI;IASzC,OAAO,CAAC,iBAAiB;cAoBN,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ9D,oBAAoB,IAAI,IAAI;IAS5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;IAQP,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;IAarD,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;CAO7D"}
+{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,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;AAElD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AASzE,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD,kHAAkH;IAClH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD;;;;OAIG;IACH,SAEgB,oBAAoB,EAAE,OAAO,CAAS;IAGtD,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,QAAQ,wBAAmC;IACrD,SAAS,CAAC,eAAe,qBAAgC;IACzD,SAAS,CAAC,0BAA0B,gCAA2C;IAE/E,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAElD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,uBAAuB,IAAI,OAAO;IAErD,2BAA2B;IACpB,IAAI,IAAI,IAAI;IA2BnB,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IA0BrC,iBAAiB,IAAI,IAAI;IASzC,OAAO,CAAC,iBAAiB;cAoBN,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ9D,oBAAoB,IAAI,IAAI;IAS5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;IAQP,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;IAarD,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;cAQzC,wBAAwB,CAAC,MAAM,CAAC,EAAE,2BAA2B,GAAG,OAAO;cAOvE,kBAAkB,CAAC,MAAM,CAAC,EAAE,2BAA2B,GAAG,OAAO;CAIrF"}

package/overlay/overlay-base-element.js

@@ -1,31 +1,30 @@
-var E = (i) => {
+var A = (i) => {
   throw TypeError(i);
 };
-var k = (i, r, s) => r.has(i) || E("Cannot " + s);
-var d = (i, r, s) => (k(i, r, "read from private field"), s ? s.call(i) : r.get(i)), p = (i, r, s) => r.has(i) ? E("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, s), l = (i, r, s, u) => (k(i, r, "write to private field"), u ? u.call(i, s) : r.set(i, s), s);
-import { __runInitializers as h, __esDecorate as f } from "tslib";
+var k = (i, r, s) => r.has(i) || A("Cannot " + s);
+var b = (i, r, s) => (k(i, r, "read from private field"), s ? s.call(i) : r.get(i)), m = (i, r, s) => r.has(i) ? A("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, s), l = (i, r, s, u) => (k(i, r, "write to private field"), u ? u.call(i, s) : r.set(i, s), s);
+import { __runInitializers as g, __esDecorate as f } from "tslib";
 import { isServer as O } from "lit";
-import { property as _ } from "lit/decorators.js";
-import { SbbFocusTrapController as S } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as F } from "../core/base-elements.js";
+import { property as v } from "lit/decorators.js";
+import { SbbFocusTrapController as F } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as S } from "../core/base-elements.js";
 import { SbbLanguageController as T, SbbInertController as x, SbbEscapableOverlayController as z } from "../core/controllers.js";
 import { idReference as I, forceType as w } from "../core/decorators.js";
 import { SbbScrollHandler as U } from "../core/dom.js";
-import { EventEmitter as D } from "../core/eventing.js";
-import { i18nDialog as H } from "../core/i18n.js";
-import { SbbNegativeMixin as $ } from "../core/mixins.js";
-import { removeAriaOverlayTriggerAttributes as q, setAriaOverlayTriggerAttributes as N } from "../core/overlay.js";
-const m = [];
-let te = (() => {
-  var n, c, g, a;
-  let i = $(F), r, s = [], u = [], v, C = [], y = [], L, R = [], A = [];
+import { i18nDialog as D } from "../core/i18n.js";
+import { SbbNegativeMixin as H } from "../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as $, setAriaOverlayTriggerAttributes as q } from "../core/overlay.js";
+const d = [];
+let Y = (() => {
+  var n, c, h, a;
+  let i = H(S), r, s = [], u = [], _, C = [], y = [], E, L = [], R = [];
   return a = class extends i {
     constructor() {
       super(...arguments);
-      p(this, n);
-      p(this, c);
-      p(this, g);
-      l(this, n, h(this, s, null)), l(this, c, (h(this, u), h(this, C, ""))), l(this, g, (h(this, y), h(this, R, !1))), this.didClose = (h(this, A), new D(this, a.events.didClose, { cancelable: !0 })), this.focusTrapController = new S(this), this.scrollHandler = new U(), this.language = new T(this), this.inertController = new x(this), this.escapableOverlayController = new z(this), this._ariaLiveRefToggle = !1, this._triggerElement = null;
+      m(this, n);
+      m(this, c);
+      m(this, h);
+      l(this, n, g(this, s, null)), l(this, c, (g(this, u), g(this, C, ""))), l(this, h, (g(this, y), g(this, L, !1))), this.lastFocusedElement = g(this, R), this.focusTrapController = new F(this), this.scrollHandler = new U(), this.language = new T(this), this.inertController = new x(this), this.escapableOverlayController = new z(this), this._ariaLiveRefToggle = !1, this._triggerElement = null;
     }
     /**
      * The element that will trigger the menu overlay.
@@ -33,14 +32,14 @@ let te = (() => {
      * For attribute usage, provide an id reference.
      */
     get trigger() {
-      return d(this, n);
+      return b(this, n);
     }
     set trigger(e) {
       l(this, n, e);
     }
     /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
     get accessibilityLabel() {
-      return d(this, c);
+      return b(this, c);
     }
     set accessibilityLabel(e) {
       l(this, c, e);
@@ -51,14 +50,14 @@ let te = (() => {
      * you provide your own equivalent, if you decide to turn it off.
      */
     get skipFocusRestoration() {
-      return d(this, g);
+      return b(this, h);
     }
     set skipFocusRestoration(e) {
-      l(this, g, e);
+      l(this, h, e);
     }
     /** Opens the component. */
     open() {
-      this.state === "closed" && (this.lastFocusedElement = document.activeElement, this.willOpen.emit() && (this.showPopover?.(), this.state = "opening", this._triggerElement?.setAttribute("aria-expanded", "true"), m.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this.handleOpening()));
+      this.state === "closed" && (this.lastFocusedElement = document.activeElement, this.dispatchBeforeOpenEvent() && (this.showPopover?.(), this.state = "opening", this._triggerElement?.setAttribute("aria-expanded", "true"), d.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this.handleOpening()));
     }
     /** Closes the component. */
     close(e, t) {
@@ -69,14 +68,14 @@ let te = (() => {
         returnValue: this.returnValue,
         closeTarget: this.overlayCloseElement
       };
-      this.willClose.emit(o) && (this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing());
+      this.dispatchBeforeCloseEvent(o) && (this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing());
     }
     connectedCallback() {
       this.popover = "manual", super.connectedCallback(), this.hasUpdated && this._configureTrigger();
     }
     // Check if the trigger is valid and attach click event listeners.
     _configureTrigger() {
-      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), q(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (N(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), $(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (q(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
         signal: this._triggerAbortController.signal
       })));
     }
@@ -99,21 +98,21 @@ let te = (() => {
       });
     }
     removeInstanceFromGlobalCollection() {
-      m.splice(m.indexOf(this), 1);
+      d.splice(d.indexOf(this), 1);
     }
     // Close the component on click of any element that has the `closeAttribute` attribute.
     closeOnSbbOverlayCloseClick(e) {
-      const t = e.composedPath().filter((b) => b instanceof window.HTMLElement).find((b) => b.hasAttribute(this.closeAttribute) && !b.hasAttribute("disabled"));
+      const t = e.composedPath().filter((p) => p instanceof window.HTMLElement).find((p) => p.hasAttribute(this.closeAttribute) && !p.hasAttribute("disabled"));
       if (!t)
         return;
       const o = t.getAttribute("type") === "submit" ? t.form ?? null : null;
-      m[m.length - 1].close(o, t);
+      d[d.length - 1].close(o, t);
     }
     removeAriaLiveRefContent() {
       this._ariaLiveRef.textContent = "";
     }
     setAriaLiveRefContent(e) {
-      this._ariaLiveRefToggle = !this._ariaLiveRefToggle, this._ariaLiveRef.textContent = `${H[this.language.current]}${e ? `, ${e}` : ""}${this._ariaLiveRefToggle ? " " : ""}`;
+      this._ariaLiveRefToggle = !this._ariaLiveRefToggle, this._ariaLiveRef.textContent = `${D[this.language.current]}${e ? `, ${e}` : ""}${this._ariaLiveRefToggle ? " " : ""}`;
     }
     // Wait for dialog transition to complete.
     // In rare cases, it can be that the animationEnd event is triggered twice.
@@ -121,18 +120,24 @@ let te = (() => {
     onOverlayAnimationEnd(e) {
       e.animationName === "open" && this.state === "opening" ? this.handleOpening() : e.animationName === "close" && this.state === "closing" && this.handleClosing();
     }
-  }, n = new WeakMap(), c = new WeakMap(), g = new WeakMap(), (() => {
+    dispatchBeforeCloseEvent(e) {
+      return this.dispatchEvent(new CustomEvent("beforeclose", { detail: e, cancelable: !0 }));
+    }
+    dispatchCloseEvent(e) {
+      return this.dispatchEvent(new CustomEvent("close", { detail: e }));
+    }
+  }, n = new WeakMap(), c = new WeakMap(), h = new WeakMap(), (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    r = [I(), _()], v = [w(), _({ attribute: "accessibility-label" })], L = [w(), _({ type: Boolean })], f(a, null, r, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, o) => {
+    r = [I(), v()], _ = [w(), v({ attribute: "accessibility-label" })], E = [w(), v({ type: Boolean })], f(a, null, r, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, o) => {
       t.trigger = o;
-    } }, metadata: e }, s, u), f(a, null, v, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, o) => {
+    } }, metadata: e }, s, u), f(a, null, _, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, o) => {
       t.accessibilityLabel = o;
-    } }, metadata: e }, C, y), f(a, null, L, { kind: "accessor", name: "skipFocusRestoration", static: !1, private: !1, access: { has: (t) => "skipFocusRestoration" in t, get: (t) => t.skipFocusRestoration, set: (t, o) => {
+    } }, metadata: e }, C, y), f(a, null, E, { kind: "accessor", name: "skipFocusRestoration", static: !1, private: !1, access: { has: (t) => "skipFocusRestoration" in t, get: (t) => t.skipFocusRestoration, set: (t, o) => {
       t.skipFocusRestoration = o;
-    } }, metadata: e }, R, A), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, L, R), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), a;
 })();
 export {
-  te as SbbOverlayBaseElement,
-  m as overlayRefs
+  Y as SbbOverlayBaseElement,
+  d as overlayRefs
 };

package/overlay/overlay.component.d.ts

@@ -4,10 +4,6 @@ import { SbbOverlayBaseElement } from './overlay-base-element.js';
  * It displays an interactive overlay element.
  *
  * @slot - Use the unnamed slot to provide a content for the overlay.
- * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled.
- * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-overlay` is opened.
- * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled.
- * @event {CustomEvent<SbbOverlayCloseEventDetails>} didClose - Emits whenever the `sbb-overlay` is closed.
  * @cssprop [--sbb-overlay-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
@@ -15,10 +11,10 @@ import { SbbOverlayBaseElement } from './overlay-base-element.js';
 export declare class SbbOverlayElement extends SbbOverlayBaseElement {
     static styles: CSSResultGroup;
     static readonly events: {
-        readonly willOpen: "willOpen";
-        readonly didOpen: "didOpen";
-        readonly willClose: "willClose";
-        readonly didClose: "didClose";
+        readonly beforeopen: "beforeopen";
+        readonly open: "open";
+        readonly beforeclose: "beforeclose";
+        readonly close: "close";
     };
     /**
      * Whether to allow the overlay content to stretch to full width.

package/overlay/overlay.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.component.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAIlC;;;;;;;;;;;GAWG;AACH,qBAEM,iBAAkB,SAAQ,qBAAqB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;MAK3B;IAEX;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IACvD,OAAO,CAAC,sBAAsB,CAA4B;IAE1C,iBAAiB,IAAI,IAAI;IAMzC,SAAS,CAAC,uBAAuB,IAAI,OAAO;IAI5C,SAAS,CAAC,aAAa,IAAI,IAAI;cAYZ,aAAa,IAAI,IAAI;cAuBrB,MAAM,IAAI,cAAc;CA4C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"overlay.component.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAIlC;;;;;;;GAOG;AACH,qBAEM,iBAAkB,SAAQ,qBAAqB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;MAK3B;IAEX;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IACvD,OAAO,CAAC,sBAAsB,CAA4B;IAE1C,iBAAiB,IAAI,IAAI;IAMzC,SAAS,CAAC,uBAAuB,IAAI,OAAO;IAI5C,SAAS,CAAC,aAAa,IAAI,IAAI;cAYZ,aAAa,IAAI,IAAI;cAuBrB,MAAM,IAAI,cAAc;CA4C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/overlay/overlay.component.js

@@ -6,7 +6,7 @@ var v = (e, a, t) => (w(e, a, "read from private field"), t ? t.call(e) : a.get(
 import { __runInitializers as d, __esDecorate as p } from "tslib";
 import { customElement as z, property as C } from "lit/decorators.js";
 import { ref as $ } from "lit/directives/ref.js";
-import { unsafeStatic as O, html as E } from "lit/static-html.js";
+import { unsafeStatic as E, html as O } from "lit/static-html.js";
 import { forceType as L } from "../core/decorators.js";
 import { isZeroAnimationDuration as S } from "../core/dom.js";
 import { forwardEvent as T } from "../core/eventing.js";
@@ -52,17 +52,17 @@ let B = 0, ee = (() => {
       return S(this, "--sbb-overlay-animation-duration");
     }
     handleOpening() {
-      this.state = "opened", this.inertController.activate(), this.escapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.focusTrapController.focusInitialElement(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusTrapController.enabled = !0, this.didOpen.emit();
+      this.state = "opened", this.inertController.activate(), this.escapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.focusTrapController.focusInitialElement(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusTrapController.enabled = !0, this.dispatchOpenEvent();
     }
     handleClosing() {
-      this._overlayContentElement?.scrollTo(0, 0), this.state = "closed", this.hidePopover?.(), this.inertController.deactivate(), this.skipFocusRestoration || this.lastFocusedElement?.focus(), this.openOverlayController?.abort(), this.focusTrapController.enabled = !1, this.removeInstanceFromGlobalCollection(), D.length || this.scrollHandler.enableScroll(), this.escapableOverlayController.disconnect(), this.didClose.emit({
+      this._overlayContentElement?.scrollTo(0, 0), this.state = "closed", this.hidePopover?.(), this.inertController.deactivate(), this.skipFocusRestoration || this.lastFocusedElement?.focus(), this.openOverlayController?.abort(), this.focusTrapController.enabled = !1, this.removeInstanceFromGlobalCollection(), D.length || this.scrollHandler.enableScroll(), this.escapableOverlayController.disconnect(), this.dispatchCloseEvent({
         returnValue: this.returnValue,
         closeTarget: this.overlayCloseElement
       });
     }
     render() {
-      const r = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", o = E`
-      <${O(r)}
+      const r = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", o = O`
+      <${E(r)}
         class="sbb-overlay__close"
         aria-label=${this.accessibilityCloseLabel || A[this.language.current]}
         ?negative=${this.negative}
@@ -70,9 +70,9 @@ let B = 0, ee = (() => {
         type="button"
         icon-name="cross-small"
         sbb-overlay-close
-      ></${O(r)}>
+      ></${E(r)}>
     `;
-      return E`
+      return O`
       <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
         <div class="sbb-overlay">
           <div
@@ -107,10 +107,10 @@ let B = 0, ee = (() => {
       o.accessibilityCloseLabel = i;
     } }, metadata: r }, g, x), p(null, a = { value: s }, e, { kind: "class", name: s.name, metadata: r }, null, t), s = a.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
   })(), l.styles = j, l.events = {
-    willOpen: "willOpen",
-    didOpen: "didOpen",
-    willClose: "willClose",
-    didClose: "didClose"
+    beforeopen: "beforeopen",
+    open: "open",
+    beforeclose: "beforeclose",
+    close: "close"
   }, d(s, t), s;
 })();
 export {

package/package.json

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

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;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"}
+{"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;AAGlE,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,CAgM5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}