@sbb-esta/lyne-elements 1.13.0 → 1.14.1

package/option/option.js

@@ -1,280 +1,323 @@
-import { LitElement as f, html as r, nothing as d, css as m } from "lit";
-import { property as u, state as c, customElement as _ } from "lit/decorators.js";
-import { slotState as y, hostAttributes as x } from "../core/decorators.js";
-import { EventEmitter as g } from "../core/eventing.js";
-import { MutationController as A } from "@lit-labs/observers/mutation-controller.js";
-import { SbbConnectedAbortController as k } from "../core/controllers.js";
-import { setOrRemoveAttribute as v, isAndroid as S, isSafari as C } from "../core/dom.js";
-import { SbbDisabledMixin as $, SbbHydrationMixin as w } from "../core/mixins.js";
-import { SbbIconNameMixin as H } from "../icon.js";
+var Q = (a) => {
+  throw TypeError(a);
+};
+var W = (a, o, n) => o.has(a) || Q("Cannot " + n);
+var m = (a, o, n) => (W(a, o, "read from private field"), n ? n.call(a) : o.get(a)), v = (a, o, n) => o.has(a) ? Q("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, n), h = (a, o, n, r) => (W(a, o, "write to private field"), r ? r.call(a, n) : o.set(a, n), n);
+import { __esDecorate as d, __runInitializers as l } from "tslib";
+import { LitElement as tt, html as g, nothing as f, css as et } from "lit";
+import { property as I, state as z, customElement as it } from "lit/decorators.js";
+import { slotState as st, forceType as at, hostAttributes as ot } from "../core/decorators.js";
+import { EventEmitter as Y } from "../core/eventing.js";
+import { MutationController as rt } from "@lit-labs/observers/mutation-controller.js";
+import { SbbConnectedAbortController as lt } from "../core/controllers.js";
+import { setOrRemoveAttribute as nt, isAndroid as bt, isSafari as ht } from "../core/dom.js";
+import { SbbDisabledMixin as ct, SbbHydrationMixin as dt } from "../core/mixins.js";
+import { SbbIconNameMixin as gt } from "../icon.js";
 import "../screen-reader-only.js";
 import "../visual-checkbox.js";
-var O = Object.defineProperty, G = Object.getOwnPropertyDescriptor, l = (t, i, e, a) => {
-  for (var o = a > 1 ? void 0 : a ? G(i, e) : i, n = t.length - 1, b; n >= 0; n--)
-    (b = t[n]) && (o = (a ? b(i, e, o) : b(o)) || o);
-  return a && o && O(i, e, o), o;
-};
-let L = 0;
-const p = C, D = {
+let pt = 0;
+const L = ht, ut = {
   attributeFilter: ["data-group-disabled", "data-negative"]
 };
-let s = class extends $(
-  H(w(f))
-) {
-  constructor() {
-    super(), this.negative = !1, this.disabledFromGroup = !1, this.disableLabelHighlight = !1, this._highlightString = null, this._inertAriaGroups = !1, this._abort = new k(this), new A(this, {
-      config: D,
-      callback: (t) => this.onOptionAttributesChange(t)
-    }), p && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = p) : this._inertAriaGroups = p);
-  }
-  set value(t) {
-    this.setAttribute("value", `${t}`);
-  }
-  get value() {
-    return this.getAttribute("value") ?? "";
-  }
-  set selected(t) {
-    this.toggleAttribute("selected", t), this._updateAriaSelected();
-  }
-  get selected() {
-    return this.hasAttribute("selected");
-  }
-  attributeChangedCallback(t, i, e) {
-    (t !== "value" || i !== e) && super.attributeChangedCallback(t, i, e);
-  }
-  /**
-   * Highlight the label of the option
-   * @param value the highlighted portion of the label
-   * @internal
-   */
-  highlight(t) {
-    this._highlightString = t;
-  }
-  /**
-   * @internal
-   */
-  setSelectedViaUserInteraction(t) {
-    this.selected = t, this.selectionChange.emit(), this.selected && this.optionSelected.emit();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `${this.optionId}-${L++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
-  }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("disabled") && (v(this, "tabindex", S && !this.disabled && 0), this.updateAriaDisabled());
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), this._updateAriaSelected();
-  }
-  updateDisableHighlight(t) {
-    this.disableLabelHighlight = t, this.toggleAttribute("data-disable-highlight", t);
-  }
-  /**
-   * Whether the option is currently active.
-   * @internal
-   */
-  setActive(t) {
-    this.toggleAttribute("data-active", t);
-  }
-  init() {
-    this.setAttributeFromParent();
-    const t = this._abort.signal;
-    this.addEventListener("click", (i) => this.selectByClick(i), {
-      signal: t,
-      passive: !0
-    });
-  }
-  updateAriaDisabled() {
-    v(
-      this,
-      "aria-disabled",
-      this.disabled || this.disabledFromGroup ? "true" : null
-    );
-  }
-  _updateAriaSelected() {
-    this.setAttribute("aria-selected", `${this.selected}`);
-  }
-  /** Observe changes on data attributes and set the appropriate values. */
-  onOptionAttributesChange(t) {
-    for (const i of t)
-      i.attributeName === "data-group-disabled" ? (this.disabledFromGroup = this.hasAttribute("data-group-disabled"), this.updateAriaDisabled()) : i.attributeName === "data-negative" && (this.negative = this.hasAttribute("data-negative"));
-  }
-  handleHighlightState() {
-    const t = Array.from(this.childNodes ?? []).filter(
-      (e) => e.nodeType !== Node.COMMENT_NODE && (!(e instanceof Element) || e.slot !== "icon")
-    ), i = t.filter((e) => e.nodeType === Node.TEXT_NODE);
-    if (i.length === 0 || t.filter((e) => !(e instanceof Element) || e.localName !== "template").length !== i.length) {
-      this.updateDisableHighlight(!0);
-      return;
-    }
-    this.label = i.map((e) => e.wholeText).filter((e) => e.trim()).join();
-  }
-  getHighlightedLabel() {
-    if (!this._highlightString || !this._highlightString.trim())
-      return r`${this.label}`;
-    const t = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
-    if (t === -1)
-      return r`${this.label}`;
-    const i = this.label.substring(0, t), e = this.label.substring(
-      t,
-      t + this._highlightString.length
-    ), a = this.label.substring(t + this._highlightString.length);
-    return r`
-      <span class="sbb-option__label--highlight">${i}</span><span>${e}</span
-      ><span class="sbb-option__label--highlight">${a}</span>
+let _t = (() => {
+  var k, x, y, S, A, G, C, b;
+  let a = [st()], o, n = [], r, H = ct(gt(dt(tt))), p = [], c, $, s = [], u = [], _, w, F = [], E = [], D, O = [], M = [], T, N = [], j = [], B, U = [], P = [], V, R = [], q = [], X, J = [], K = [];
+  return b = class extends H {
+    constructor() {
+      super();
+      v(this, k);
+      v(this, x);
+      v(this, y);
+      v(this, S);
+      v(this, A);
+      v(this, G);
+      v(this, C);
+      h(this, k, (l(this, p), l(this, s, !1))), h(this, x, (l(this, u), l(this, F, !1))), h(this, y, (l(this, E), l(this, O, !1))), h(this, S, (l(this, M), l(this, N, void 0))), h(this, A, (l(this, j), l(this, U, !1))), h(this, G, (l(this, P), l(this, R, null))), h(this, C, (l(this, q), l(this, J, !1))), this._abort = (l(this, K), new lt(this)), new rt(this, {
+        config: ut,
+        callback: (e) => this.onOptionAttributesChange(e)
+      }), L && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = L) : this._inertAriaGroups = L);
+    }
+    /**
+     * Value of the option.
+     *
+     * @description Developer note: In this case updating the attribute must be synchronous.
+     * Due to this, it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+     */
+    set value(e) {
+      this.setAttribute("value", `${e}`);
+    }
+    get value() {
+      return this.getAttribute("value") ?? "";
+    }
+    /**
+     * Whether the option is currently active.
+     * TODO: remove with next major version.
+     * @deprecated
+     * @internal
+     */
+    get active() {
+      return m(this, k);
+    }
+    set active(e) {
+      h(this, k, e);
+    }
+    /** Whether the option is selected. */
+    set selected(e) {
+      this.toggleAttribute("selected", e), this._updateAriaSelected();
+    }
+    get selected() {
+      return this.hasAttribute("selected");
+    }
+    /** Whether to apply the negative styling */
+    get negative() {
+      return m(this, x);
+    }
+    set negative(e) {
+      h(this, x, e);
+    }
+    /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
+    get disabledFromGroup() {
+      return m(this, y);
+    }
+    set disabledFromGroup(e) {
+      h(this, y, e);
+    }
+    get label() {
+      return m(this, S);
+    }
+    set label(e) {
+      h(this, S, e);
+    }
+    /** Disable the highlight of the label. */
+    get disableLabelHighlight() {
+      return m(this, A);
+    }
+    set disableLabelHighlight(e) {
+      h(this, A, e);
+    }
+    /** The portion of the highlighted label. */
+    get _highlightString() {
+      return m(this, G);
+    }
+    set _highlightString(e) {
+      h(this, G, e);
+    }
+    get _inertAriaGroups() {
+      return m(this, C);
+    }
+    set _inertAriaGroups(e) {
+      h(this, C, e);
+    }
+    attributeChangedCallback(e, t, i) {
+      (e !== "value" || t !== i) && super.attributeChangedCallback(e, t, i);
+    }
+    /**
+     * Highlight the label of the option
+     * @param value the highlighted portion of the label
+     * @internal
+     */
+    highlight(e) {
+      this._highlightString = e;
+    }
+    /**
+     * @internal
+     */
+    setSelectedViaUserInteraction(e) {
+      this.selected = e, this.selectionChange.emit(), this.selected && this.optionSelected.emit();
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.id || (this.id = `${this.optionId}-${pt++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("disabled") && (nt(this, "tabindex", bt && !this.disabled && 0), this.updateAriaDisabled());
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this._updateAriaSelected();
+    }
+    updateDisableHighlight(e) {
+      this.disableLabelHighlight = e, this.toggleAttribute("data-disable-highlight", e);
+    }
+    /**
+     * Whether the option is currently active.
+     * @internal
+     */
+    setActive(e) {
+      this.toggleAttribute("data-active", e);
+    }
+    init() {
+      this.setAttributeFromParent();
+      const e = this._abort.signal;
+      this.addEventListener("click", (t) => this.selectByClick(t), {
+        signal: e,
+        passive: !0
+      });
+    }
+    updateAriaDisabled() {
+      this.disabled || this.disabledFromGroup ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
+    }
+    _updateAriaSelected() {
+      this.setAttribute("aria-selected", `${this.selected}`);
+    }
+    /** Observe changes on data attributes and set the appropriate values. */
+    onOptionAttributesChange(e) {
+      for (const t of e)
+        t.attributeName === "data-group-disabled" ? (this.disabledFromGroup = this.hasAttribute("data-group-disabled"), this.updateAriaDisabled()) : t.attributeName === "data-negative" && (this.negative = this.hasAttribute("data-negative"));
+    }
+    handleHighlightState() {
+      const e = Array.from(this.childNodes ?? []).filter((i) => i.nodeType !== Node.COMMENT_NODE && (!(i instanceof Element) || i.slot !== "icon")), t = e.filter((i) => i.nodeType === Node.TEXT_NODE);
+      if (t.length === 0 || e.filter((i) => !(i instanceof Element) || i.localName !== "template").length !== t.length) {
+        this.updateDisableHighlight(!0);
+        return;
+      }
+      this.label = t.map((i) => i.wholeText).filter((i) => i.trim()).join();
+    }
+    getHighlightedLabel() {
+      if (!this._highlightString || !this._highlightString.trim())
+        return g`${this.label}`;
+      const e = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
+      if (e === -1)
+        return g`${this.label}`;
+      const t = this.label.substring(0, e), i = this.label.substring(e, e + this._highlightString.length), Z = this.label.substring(e + this._highlightString.length);
+      return g`
+      <span class="sbb-option__label--highlight">${t}</span><span>${i}</span
+      ><span class="sbb-option__label--highlight">${Z}</span>
     `;
-  }
-  renderIcon() {
-    return r` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
-  }
-  renderLabel() {
-    return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : d;
-  }
-  renderTick() {
-    return d;
-  }
-  render() {
-    return r`
+    }
+    renderIcon() {
+      return g` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
+    }
+    renderLabel() {
+      return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : f;
+    }
+    renderTick() {
+      return f;
+    }
+    render() {
+      return g`
       <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") ? r` <sbb-screen-reader-only>
+            ${this._inertAriaGroups && this.getAttribute("data-group-label") ? g` <sbb-screen-reader-only>
                   (${this.getAttribute("data-group-label")})</sbb-screen-reader-only
-                >` : d}
+                >` : f}
           </span>
           ${this.renderTick()}
         </div>
       </div>
     `;
-  }
-};
-l([
-  u()
-], s.prototype, "value", 1);
-l([
-  u({ reflect: !0, type: Boolean })
-], s.prototype, "active", 2);
-l([
-  u({ type: Boolean })
-], s.prototype, "selected", 1);
-l([
-  c()
-], s.prototype, "negative", 2);
-l([
-  c()
-], s.prototype, "disabledFromGroup", 2);
-l([
-  c()
-], s.prototype, "label", 2);
-l([
-  c()
-], s.prototype, "disableLabelHighlight", 2);
-l([
-  c()
-], s.prototype, "_highlightString", 2);
-l([
-  c()
-], s.prototype, "_inertAriaGroups", 2);
-s = l([
-  y()
-], s);
-const I = m`*,: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) solid var(--sbb-focus-outline-width);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}`;
-var M = Object.defineProperty, E = Object.getOwnPropertyDescriptor, N = (t, i, e, a) => {
-  for (var o = a > 1 ? void 0 : a ? E(i, e) : i, n = t.length - 1, b; n >= 0; n--)
-    (b = t[n]) && (o = (a ? b(i, e, o) : b(o)) || o);
-  return a && o && M(i, e, o), o;
-};
-let h = class extends s {
-  constructor() {
-    super(...arguments), this.optionId = "sbb-option", this.selectionChange = new g(
-      this,
-      h.events.selectionChange
-    ), this.optionSelected = new g(
-      this,
-      h.events.optionSelected
-    );
-  }
-  set _variant(t) {
-    t && this.setAttribute("data-variant", t);
-  }
-  get _variant() {
-    return this.getAttribute("data-variant");
-  }
-  set _isMultiple(t) {
-    this.toggleAttribute("data-multiple", t);
-  }
-  get _isMultiple() {
-    return !this.hydrationRequired && this.hasAttribute("data-multiple");
-  }
-  setAttributeFromParent() {
-    var i, e;
-    const t = (i = this.closest) == null ? void 0 : i.call(this, "sbb-optgroup");
-    t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.negative = !!((e = this.closest) != null && e.call(
-      this,
-      // :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);
-  }
-  selectByClick(t) {
-    if (this.disabled || this.disabledFromGroup) {
-      t.stopPropagation();
-      return;
-    }
-    this._isMultiple ? (t.stopPropagation(), this.setSelectedViaUserInteraction(!this.selected)) : this.setSelectedViaUserInteraction(!0);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  init() {
-    super.init(), this._setVariantByContext(), this.handleHighlightState();
-  }
-  _setVariantByContext() {
-    var t, i, e;
-    (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (i = this.closest) != null && i.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((e = this.closest) != null && e.call(this, "sbb-select[multiple]"));
-  }
-  handleHighlightState() {
-    if (this._variant !== "autocomplete") {
-      this.updateDisableHighlight(!0);
-      return;
-    }
-    super.handleHighlightState();
-  }
-  renderIcon() {
-    return r`
+    }
+  }, k = new WeakMap(), x = new WeakMap(), y = new WeakMap(), S = new WeakMap(), A = new WeakMap(), G = new WeakMap(), C = new WeakMap(), r = b, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(H[Symbol.metadata] ?? null) : void 0;
+    c = [I()], $ = [at(), I({ reflect: !0, type: Boolean })], _ = [I({ type: Boolean })], w = [z()], D = [z()], T = [z()], B = [z()], V = [z()], X = [z()], d(b, null, c, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
+      t.value = i;
+    } }, metadata: e }, null, p), d(b, null, $, { kind: "accessor", name: "active", static: !1, private: !1, access: { has: (t) => "active" in t, get: (t) => t.active, set: (t, i) => {
+      t.active = i;
+    } }, metadata: e }, s, u), d(b, null, _, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, i) => {
+      t.selected = i;
+    } }, metadata: e }, null, p), d(b, null, w, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (t) => "negative" in t, get: (t) => t.negative, set: (t, i) => {
+      t.negative = i;
+    } }, metadata: e }, F, E), d(b, null, D, { kind: "accessor", name: "disabledFromGroup", static: !1, private: !1, access: { has: (t) => "disabledFromGroup" in t, get: (t) => t.disabledFromGroup, set: (t, i) => {
+      t.disabledFromGroup = i;
+    } }, metadata: e }, O, M), d(b, null, T, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (t) => "label" in t, get: (t) => t.label, set: (t, i) => {
+      t.label = i;
+    } }, metadata: e }, N, j), d(b, null, B, { kind: "accessor", name: "disableLabelHighlight", static: !1, private: !1, access: { has: (t) => "disableLabelHighlight" in t, get: (t) => t.disableLabelHighlight, set: (t, i) => {
+      t.disableLabelHighlight = i;
+    } }, metadata: e }, U, P), d(b, null, V, { kind: "accessor", name: "_highlightString", static: !1, private: !1, access: { has: (t) => "_highlightString" in t, get: (t) => t._highlightString, set: (t, i) => {
+      t._highlightString = i;
+    } }, metadata: e }, R, q), d(b, null, X, { kind: "accessor", name: "_inertAriaGroups", static: !1, private: !1, access: { has: (t) => "_inertAriaGroups" in t, get: (t) => t._inertAriaGroups, set: (t, i) => {
+      t._inertAriaGroups = i;
+    } }, metadata: e }, J, K), d(null, o = { value: r }, a, { kind: "class", name: r.name, metadata: e }, null, n), r = o.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), l(r, n);
+  })(), r;
+})();
+const mt = et`*,: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) solid var(--sbb-focus-outline-width);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 wt = (() => {
+  var c;
+  let a = [it("sbb-option"), ot({
+    role: "option"
+  })], o, n = [], r, H = _t;
+  var p = (c = class extends H {
+    constructor() {
+      super(...arguments), this.optionId = "sbb-option", this.selectionChange = new Y(this, p.events.selectionChange), this.optionSelected = new Y(this, p.events.optionSelected);
+    }
+    set _variant(s) {
+      s && this.setAttribute("data-variant", s);
+    }
+    get _variant() {
+      return this.getAttribute("data-variant");
+    }
+    set _isMultiple(s) {
+      this.toggleAttribute("data-multiple", s);
+    }
+    get _isMultiple() {
+      return !this.hydrationRequired && this.hasAttribute("data-multiple");
+    }
+    setAttributeFromParent() {
+      var u, _;
+      const s = (u = this.closest) == null ? void 0 : u.call(this, "sbb-optgroup");
+      s && (this.disabledFromGroup = s.disabled, this.updateAriaDisabled()), this.negative = !!((_ = this.closest) != null && _.call(
+        this,
+        // :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);
+    }
+    selectByClick(s) {
+      if (this.disabled || this.disabledFromGroup) {
+        s.stopPropagation();
+        return;
+      }
+      this._isMultiple ? (s.stopPropagation(), this.setSelectedViaUserInteraction(!this.selected)) : this.setSelectedViaUserInteraction(!0);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+    }
+    init() {
+      super.init(), this._setVariantByContext(), this.handleHighlightState();
+    }
+    _setVariantByContext() {
+      var s, u, _;
+      (s = this.closest) != null && s.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (u = this.closest) != null && u.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((_ = this.closest) != null && _.call(this, "sbb-select[multiple]"));
+    }
+    handleHighlightState() {
+      if (this._variant !== "autocomplete") {
+        this.updateDisableHighlight(!0);
+        return;
+      }
+      super.handleHighlightState();
+    }
+    renderIcon() {
+      return g`
       <!-- Icon -->
-      ${this._isMultiple ? d : r` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+      ${this._isMultiple ? f : g` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
 
       <!-- Checkbox -->
-      ${this._isMultiple ? r`
+      ${this._isMultiple ? g`
             <sbb-visual-checkbox
               ?checked=${this.selected}
               ?disabled=${this.disabled || this.disabledFromGroup}
               ?negative=${this.negative}
             ></sbb-visual-checkbox>
-          ` : d}
+          ` : f}
     `;
-  }
-  renderLabel() {
-    return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : d;
-  }
-  renderTick() {
-    return this._variant === "select" && !this._isMultiple && this.selected ? r`<sbb-icon name="tick-small"></sbb-icon>` : d;
-  }
-};
-h.styles = I;
-h.events = {
-  selectionChange: "optionSelectionChange",
-  optionSelected: "optionSelected"
-};
-h = N([
-  _("sbb-option"),
-  x({
-    role: "option"
-  })
-], h);
+    }
+    renderLabel() {
+      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : f;
+    }
+    renderTick() {
+      return this._variant === "select" && !this._isMultiple && this.selected ? g`<sbb-icon name="tick-small"></sbb-icon>` : f;
+    }
+  }, r = c, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(H[Symbol.metadata] ?? null) : void 0;
+    d(null, o = { value: r }, a, { kind: "class", name: r.name, metadata: s }, null, n), p = r = o.value, s && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), c.styles = mt, c.events = {
+    selectionChange: "optionSelectionChange",
+    optionSelected: "optionSelected"
+  }, l(r, n), c);
+  return p = r;
+})();
 export {
-  s as SbbOptionBaseElement,
-  h as SbbOptionElement
+  _t as SbbOptionBaseElement,
+  wt as SbbOptionElement
 };

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

@@ -10,7 +10,7 @@ export declare const overlayRefs: SbbOverlayBaseElement[];
 declare const SbbOverlayBaseElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
 export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElement_base {
     /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
-    accessibilityLabel: string | undefined;
+    accessor accessibilityLabel: string;
     /** Emits whenever the component is closed. */
     protected didClose: EventEmitter<SbbOverlayCloseEventDetails>;
     protected lastFocusedElement?: HTMLElement;

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,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,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;IAC3D,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAGpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,YAAY,kBAAyB;IAC/C,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;IAEzD,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,eAAe,IAAI,IAAI;IAE1C,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAmBrC,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAS5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAkBzC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWpD,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"}
+{"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,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,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,CAGpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,YAAY,kBAAyB;IAC/C,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;IAEzD,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,eAAe,IAAI,IAAI;IAE1C,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAmBrC,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAS5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAkBzC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWpD,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"}