@sbb-esta/lyne-elements 2.11.0 → 2.11.2

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

@@ -1,27 +1,27 @@
-var S = (a) => {
-  throw TypeError(a);
+var S = (i) => {
+  throw TypeError(i);
 };
-var T = (a, s, r) => s.has(a) || S("Cannot " + r);
-var c = (a, s, r) => (T(a, s, "read from private field"), r ? r.call(a) : s.get(a)), g = (a, s, r) => s.has(a) ? S("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), u = (a, s, r, o) => (T(a, s, "write to private field"), o ? o.call(a, r) : s.set(a, r), r);
-import { __esDecorate as h, __runInitializers as b } from "tslib";
-import { MutationController as D } from "@lit-labs/observers/mutation-controller.js";
-import { css as E, LitElement as I, html as L } from "lit";
-import { property as U, state as w } from "lit/decorators.js";
-import { hostAttributes as q, forceType as M } from "../../core/decorators.js";
-import { isSafari as $, setOrRemoveAttribute as j } from "../../core/dom.js";
-import { SbbDisabledMixin as F, SbbHydrationMixin as N } from "../../core/mixins.js";
+var T = (i, a, s) => a.has(i) || S("Cannot " + s);
+var c = (i, a, s) => (T(i, a, "read from private field"), s ? s.call(i) : a.get(i)), g = (i, a, s) => a.has(i) ? S("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, s), u = (i, a, s, r) => (T(i, a, "write to private field"), r ? r.call(i, s) : a.set(i, s), s);
+import { __esDecorate as h, __runInitializers as n } from "tslib";
+import { MutationController as C } from "@lit-labs/observers/mutation-controller.js";
+import { css as D, LitElement as E, html as I } from "lit";
+import { property as L, state as w } from "lit/decorators.js";
+import { hostAttributes as U, forceType as q } from "../../core/decorators.js";
+import { isSafari as M, setOrRemoveAttribute as $ } from "../../core/dom.js";
+import { SbbDisabledMixin as j, SbbHydrationMixin as F } from "../../core/mixins.js";
 import "../../divider.js";
-const R = E`*,:before,:after{box-sizing:border-box}:host{--sbb-optgroup-divider-display: block;--sbb-optgroup-divider-spacing: 0;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);--sbb-optgroup-label-color: var(--sbb-color-metal);display:block}:host(:first-child){--sbb-optgroup-divider-display: none;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-2x)}:host([data-variant=select]){--sbb-optgroup-divider-spacing: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-optgroup-label-padding-start: 0;--sbb-optgroup-label-font-size: inherit}:host([data-variant=select]:first-child){--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x)}:host([data-negative]){--sbb-optgroup-label-color: var(--sbb-color-smoke)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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;column-gap:var(--sbb-spacing-responsive-xxxs);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block:var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x)}:host([data-variant=select][data-multiple]) .sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);padding-inline-start:calc(var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-fixed-8x))}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display);padding-block:var(--sbb-optgroup-divider-spacing)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}`, v = $;
-let Z = (() => {
-  var n, p, d, l;
-  let a = [q({ role: v ? null : "group" })], s, r = [], o, f = F(N(I)), _, x = [], m = [], y, A = [], z = [], G, k = [], O = [];
-  return l = class extends f {
+const N = D`*,:before,:after{box-sizing:border-box}:host{--sbb-optgroup-divider-display: block;--sbb-optgroup-divider-spacing: 0;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);--sbb-optgroup-label-color: var(--sbb-color-metal);display:block}:host(:first-child){--sbb-optgroup-divider-display: none;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-2x)}:host([data-variant=select]){--sbb-optgroup-divider-spacing: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-optgroup-label-padding-start: 0;--sbb-optgroup-label-font-size: inherit}:host([data-variant=select]:first-child){--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x)}:host([data-negative]){--sbb-optgroup-label-color: var(--sbb-color-smoke)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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;column-gap:var(--sbb-spacing-responsive-xxxs);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block:var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x)}:host([data-variant=select][data-multiple]) .sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);padding-inline-start:calc(var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-fixed-8x))}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display);padding-block:var(--sbb-optgroup-divider-spacing)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}`, v = M;
+let Y = (() => {
+  var b, p, d, o;
+  let i = [U({ role: v ? null : "group" })], a, s = [], r, f = j(F(E)), _, x = [], m = [], y, A = [], z = [], G, k = [], O = [];
+  return o = class extends f {
     constructor() {
       super();
-      g(this, n, b(this, x, ""));
-      g(this, p, (b(this, m), b(this, A, !1)));
-      g(this, d, (b(this, z), b(this, k, !1)));
-      b(this, O), this.addController(new D(this, {
+      g(this, b, n(this, x, ""));
+      g(this, p, (n(this, m), n(this, A, !1)));
+      g(this, d, (n(this, z), n(this, k, !1)));
+      n(this, O), this.addController(new C(this, {
         config: {
           attributes: !0,
           attributeFilter: ["data-negative"]
@@ -31,10 +31,10 @@ let Z = (() => {
     }
     /** Option group label. */
     get label() {
-      return c(this, n);
+      return c(this, b);
     }
     set label(t) {
-      u(this, n, t);
+      u(this, b, t);
     }
     get negative() {
       return c(this, p);
@@ -58,17 +58,16 @@ let Z = (() => {
       this.proxyDisabledToOptions(), this._proxyGroupLabelToOptions(), this._highlightOptions();
     }
     _proxyGroupLabelToOptions() {
-      var t, e;
       if (this._inertAriaGroups)
         if (this.label) {
           this.removeAttribute("aria-label");
-          for (const i of this.options)
-            i.setAttribute("data-group-label", this.label), (t = i.requestUpdate) == null || t.call(i);
+          for (const t of this.options)
+            t.setAttribute("data-group-label", this.label), t.requestUpdate?.();
         } else
-          for (const i of this.options)
-            i.removeAttribute("data-group-label"), (e = i.requestUpdate) == null || e.call(i);
+          for (const t of this.options)
+            t.removeAttribute("data-group-label"), t.requestUpdate?.();
       else {
-        j(this, "aria-label", this.label);
+        $(this, "aria-label", this.label);
         return;
       }
     }
@@ -77,18 +76,17 @@ let Z = (() => {
         t.toggleAttribute("data-group-disabled", this.disabled);
     }
     _highlightOptions() {
-      var i;
       const t = this.getAutocompleteParent();
       if (!t)
         return;
-      const e = (i = t.triggerElement) == null ? void 0 : i.value;
-      e && this.options.forEach((C) => C.highlight(e));
+      const e = t.triggerElement?.value;
+      e && this.options.forEach((l) => l.highlight(e));
     }
     _onNegativeChange() {
       this.negative = this.hasAttribute("data-negative");
     }
     render() {
-      return L`
+      return I`
       <div class="sbb-optgroup__divider">
         <sbb-divider ?negative=${this.negative}></sbb-divider>
       </div>
@@ -99,17 +97,17 @@ let Z = (() => {
       <slot @slotchange=${this._handleSlotchange}></slot>
     `;
     }
-  }, n = new WeakMap(), p = new WeakMap(), d = new WeakMap(), o = l, (() => {
+  }, b = new WeakMap(), p = new WeakMap(), d = new WeakMap(), r = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    _ = [M(), U()], y = [w()], G = [w()], h(l, null, _, { 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 }, x, m), h(l, null, y, { 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 }, A, z), h(l, null, G, { 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 }, k, O), h(null, s = { value: o }, a, { kind: "class", name: o.name, metadata: t }, null, r), o = s.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = R, b(o, r), o;
+    _ = [q(), L()], y = [w()], G = [w()], h(o, null, _, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (e) => "label" in e, get: (e) => e.label, set: (e, l) => {
+      e.label = l;
+    } }, metadata: t }, x, m), h(o, null, y, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (e) => "negative" in e, get: (e) => e.negative, set: (e, l) => {
+      e.negative = l;
+    } }, metadata: t }, A, z), h(o, null, G, { kind: "accessor", name: "_inertAriaGroups", static: !1, private: !1, access: { has: (e) => "_inertAriaGroups" in e, get: (e) => e._inertAriaGroups, set: (e, l) => {
+      e._inertAriaGroups = l;
+    } }, metadata: t }, k, O), h(null, a = { value: r }, i, { kind: "class", name: r.name, metadata: t }, null, s), r = a.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = N, n(r, s), r;
 })();
 export {
-  Z as SbbOptgroupBaseElement
+  Y as SbbOptgroupBaseElement
 };

package/option/optgroup/optgroup.component.js

@@ -1,34 +1,30 @@
-import { __esDecorate as n, __runInitializers as c } from "tslib";
-import { customElement as b } from "lit/decorators.js";
-import { SbbOptgroupBaseElement as u } from "./optgroup-base-element.js";
-let h = (() => {
-  var s;
-  let r = [b("sbb-optgroup")], a, l = [], e, i = u;
-  return s = class extends i {
+import { __esDecorate as r, __runInitializers as n } from "tslib";
+import { customElement as c } from "lit/decorators.js";
+import { SbbOptgroupBaseElement as b } from "./optgroup-base-element.js";
+let d = (() => {
+  var e;
+  let o = [c("sbb-optgroup")], a, l = [], t, i = b;
+  return e = class extends i {
     get options() {
-      var t;
-      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-option")) ?? []);
+      return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
     }
     getAutocompleteParent() {
-      var t;
-      return ((t = this.closest) == null ? void 0 : t.call(this, "sbb-autocomplete")) || null;
+      return this.closest?.("sbb-autocomplete") || null;
     }
     setAttributeFromParent() {
-      var t;
-      this.negative = !!((t = this.closest) != null && t.call(this, ":is(sbb-autocomplete, sbb-select, sbb-form-field)[negative]")), this.toggleAttribute("data-negative", this.negative);
+      this.negative = !!this.closest?.(":is(sbb-autocomplete, sbb-select, sbb-form-field)[negative]"), this.toggleAttribute("data-negative", this.negative);
     }
     connectedCallback() {
       super.connectedCallback(), this.toggleAttribute("data-multiple", !!this.closest("sbb-select[multiple]")), this._setVariantByContext();
     }
     _setVariantByContext() {
-      var t, o;
-      (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this.setAttribute("data-variant", "autocomplete") : (o = this.closest) != null && o.call(this, "sbb-select") && this.setAttribute("data-variant", "select");
+      this.closest?.("sbb-autocomplete") ? this.setAttribute("data-variant", "autocomplete") : this.closest?.("sbb-select") && this.setAttribute("data-variant", "select");
     }
-  }, e = s, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    n(null, a = { value: e }, r, { kind: "class", name: e.name, metadata: t }, null, l), e = a.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), c(e, l);
-  })(), e;
+  }, t = e, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    r(null, a = { value: t }, o, { kind: "class", name: t.name, metadata: s }, null, l), t = a.value, s && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), n(t, l);
+  })(), t;
 })();
 export {
-  h as SbbOptGroupElement
+  d as SbbOptGroupElement
 };

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

@@ -25,7 +25,6 @@ let mt = (() => {
   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 = [];
   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)));
@@ -33,11 +32,11 @@ let mt = (() => {
       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), {
+      r(this, q), this.addEventListener?.("click", (t) => this.selectByClick(t), {
         passive: !0
       }), this.addController(new K(this, {
         config: lt,
-        callback: (e) => this.onOptionAttributesChange(e)
+        callback: (t) => this.onOptionAttributesChange(t)
       })), x && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = x) : this._inertAriaGroups = x);
     }
     /**
@@ -117,7 +116,7 @@ let mt = (() => {
       this.selected = t, this.selectionChange.emit(), 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.optionId}-${st++}`, 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());

package/option/option/option.component.js

@@ -1,19 +1,19 @@
-import { __esDecorate as h, __runInitializers as u } from "tslib";
-import { css as g, nothing as b, html as r } 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 { __esDecorate as d, __runInitializers as p } from "tslib";
+import { css as u, nothing as s, html as a } from "lit";
+import { customElement as h } from "lit/decorators.js";
+import { hostAttributes as g } from "../../core/decorators.js";
+import { EventEmitter as n } from "../../core/eventing.js";
+import { SbbOptionBaseElement as v } 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 m = u`*,: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;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 z = (() => {
   var o;
-  let p = [v("sbb-option"), m({
+  let c = [h("sbb-option"), g({
     role: "option"
-  })], l, n = [], i, c = f;
-  var a = (o = class extends c {
+  })], b, r = [], i, l = v;
+  var e = (o = class extends l {
     constructor() {
-      super(...arguments), this.optionId = "sbb-option", this.selectionChange = new d(this, a.events.selectionChange), this.optionSelected = new d(this, a.events.optionSelected);
+      super(...arguments), this.optionId = "sbb-option", this.selectionChange = new n(this, e.events.selectionChange), this.optionSelected = new n(this, e.events.optionSelected);
     }
     set _variant(t) {
       t && this.setAttribute("data-variant", t);
@@ -28,13 +28,11 @@ let A = (() => {
       return !this.hydrationRequired && this.hasAttribute("data-multiple");
     }
     setAttributeFromParent() {
-      var e, s;
-      const t = (e = this.closest) == null ? void 0 : e.call(this, "sbb-optgroup");
-      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.negative = !!((s = this.closest) != null && s.call(
-        this,
+      const t = this.closest?.("sbb-optgroup");
+      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.negative = !!this.closest?.(
         // :is() selector not possible due to test environment
         "sbb-autocomplete[negative],sbb-form-field[negative]"
-      )), this.toggleAttribute("data-negative", this.negative), this.toggleAttribute("data-multiple", this._isMultiple);
+      ), this.toggleAttribute("data-negative", this.negative), this.toggleAttribute("data-multiple", this._isMultiple);
     }
     selectByClick(t) {
       if (this.disabled || this.disabledFromGroup) {
@@ -50,8 +48,7 @@ let A = (() => {
       super.init(), this._setVariantByContext(), this.handleHighlightState();
     }
     _setVariantByContext() {
-      var t, e, s;
-      (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (e = this.closest) != null && e.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((s = this.closest) != null && s.call(this, "sbb-select[multiple]"));
+      this.closest?.("sbb-autocomplete") ? this._variant = "autocomplete" : this.closest?.("sbb-select") && (this._variant = "select"), this._isMultiple = !!this.closest?.("sbb-select[multiple]");
     }
     handleHighlightState() {
       if (this._variant !== "autocomplete") {
@@ -61,35 +58,35 @@ let A = (() => {
       super.handleHighlightState();
     }
     renderIcon() {
-      return r`
+      return a`
       <!-- Icon -->
-      ${this._isMultiple ? b : r` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+      ${this._isMultiple ? s : a` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
 
       <!-- Checkbox -->
-      ${this._isMultiple ? r`
+      ${this._isMultiple ? a`
             <sbb-visual-checkbox
               ?checked=${this.selected}
               ?disabled=${this.disabled || this.disabledFromGroup}
               ?negative=${this.negative}
             ></sbb-visual-checkbox>
-          ` : b}
+          ` : s}
     `;
     }
     renderLabel() {
-      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : b;
+      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : s;
     }
     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 ? a`<sbb-icon name="tick-small"></sbb-icon>` : s;
     }
   }, 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 = {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    d(null, b = { value: i }, c, { kind: "class", name: i.name, metadata: t }, null, r), e = i = b.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = m, o.events = {
     selectionChange: "optionSelectionChange",
     optionSelected: "optionSelected"
-  }, u(i, n), o);
-  return a = i;
+  }, p(i, r), o);
+  return e = i;
 })();
 export {
-  A as SbbOptionElement
+  z as SbbOptionElement
 };

package/overlay/overlay-base-element.js

@@ -1,8 +1,8 @@
-var y = (t) => {
-  throw TypeError(t);
+var y = (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);
+var C = (e, t, i) => t.has(e) || y("Cannot " + i);
+var g = (e, t, i) => (C(e, t, "read from private field"), i ? i.call(e) : t.get(e)), L = (e, t, i) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), m = (e, t, i, a) => (C(e, t, "write to private field"), a ? a.call(e, i) : t.set(e, i), i);
 import { __runInitializers as u, __esDecorate as w } from "tslib";
 import "lit";
 import { property as S } from "lit/decorators.js";
@@ -17,9 +17,9 @@ import { SbbNegativeMixin as F } from "../core/mixins.js";
 const b = [];
 let J = (() => {
   var o, s;
-  let t = [T({
+  let e = [T({
     popover: "manual"
-  })], l, r = [], a, v = F(O), d, f = [], p = [];
+  })], t, i = [], a, v = F(O), d, f = [], p = [];
   var h = (s = class extends v {
     constructor() {
       super(...arguments);
@@ -30,14 +30,14 @@ let J = (() => {
     get accessibilityLabel() {
       return g(this, o);
     }
-    set accessibilityLabel(e) {
-      m(this, o, e);
+    set accessibilityLabel(l) {
+      m(this, o, l);
     }
     /** Closes the component. */
-    close(e, i) {
+    close(l, r) {
       if (this.state !== "opened")
         return;
-      this.returnValue = e, this.overlayCloseElement = i;
+      this.returnValue = l, this.overlayCloseElement = r;
       const n = {
         returnValue: this.returnValue,
         closeTarget: this.overlayCloseElement
@@ -45,15 +45,13 @@ 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();
+      super.connectedCallback(), this.overlayController?.abort(), this.overlayController = new AbortController();
     }
-    firstUpdated(e) {
-      this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(e);
+    firstUpdated(l) {
+      this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(l);
     }
     disconnectedCallback() {
-      var e, i;
-      super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (i = this.openOverlayController) == null || i.abort(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
+      super.disconnectedCallback(), this.overlayController?.abort(), this.openOverlayController?.abort(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
     }
     attachOpenOverlayEvents() {
       this.openOverlayController = new AbortController(), window.addEventListener("keydown", () => {
@@ -68,18 +66,18 @@ 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(l) {
+      const r = l.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(l) {
+      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${D[this.language.current]}${l ? `, ${l}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
     }
     /**
      * Focuses the element marked with sbb-focus-initial or the first focusable element.
@@ -89,10 +87,10 @@ let J = (() => {
       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);
+    const l = 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: (r) => "accessibilityLabel" in r, get: (r) => r.accessibilityLabel, set: (r, n) => {
+      r.accessibilityLabel = n;
+    } }, metadata: l }, f, p), w(null, t = { value: a }, e, { kind: "class", name: a.name, metadata: l }, null, i), h = a = t.value, l && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l }), u(a, i);
   })(), s);
   return h = a;
 })();