@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

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

@@ -0,0 +1,82 @@
+var m = (t) => {
+  throw TypeError(t);
+};
+var f = (t, i, s) => i.has(t) || m("Cannot " + s);
+var c = (t, i, s) => (f(t, i, "read from private field"), s ? s.call(t) : i.get(t)), h = (t, i, s) => i.has(t) ? m("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), u = (t, i, s, l) => (f(t, i, "write to private field"), l ? l.call(t, s) : i.set(t, s), s);
+import { __esDecorate as x, __runInitializers as p } from "tslib";
+import { css as A, LitElement as k, nothing as G, html as y } from "lit";
+import { property as z, state as S } from "lit/decorators.js";
+import { forceType as w } from "../../core/decorators.js";
+import { isSafari as L } from "../../core/dom.js";
+import { SbbDisabledMixin as I, SbbElementInternalsMixin as $, SbbHydrationMixin as C } from "../../core/mixins.js";
+import { boxSizingStyles as D } from "../../core/styles.js";
+import "../../divider.js";
+const E = A`:host{--sbb-optgroup-divider-display: block;--sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-optgroup-label-color: var(--sbb-color-metal);--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));display:block}:host(:first-child){--sbb-optgroup-divider-display: none}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color: var(--sbb-color-5)}.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-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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-end:var(--sbb-optgroup-label-padding-end)}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display);padding-block:var(--sbb-options-panel-divider-margin-block)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}`, d = L;
+let K = (() => {
+  var o, n, r;
+  let t = I($(C(k))), i, s = [], l = [], g, v = [], _ = [];
+  return r = class extends t {
+    constructor() {
+      super();
+      h(this, o, p(this, s, ""));
+      h(this, n, (p(this, l), p(this, v, !1)));
+      p(this, _), d && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = d) : this._inertAriaGroups = d);
+    }
+    /** Option group label. */
+    get label() {
+      return c(this, o);
+    }
+    set label(e) {
+      u(this, o, e);
+    }
+    get _inertAriaGroups() {
+      return c(this, n);
+    }
+    set _inertAriaGroups(e) {
+      u(this, n, e);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._updateAriaLabel();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), e.has("disabled") && (this._inertAriaGroups || (this.internals.ariaDisabled = this.disabled ? "true" : null)), e.has("label") && this._updateAriaLabel();
+    }
+    _handleSlotchange() {
+      this._updateAriaLabel(), this._highlightOptions(), this.dispatchEvent(new Event("ɵoptgroupslotchange"));
+    }
+    _updateAriaLabel() {
+      this.internals.ariaLabel = this._inertAriaGroups ? null : this.label;
+    }
+    _highlightOptions() {
+      const e = this.getAutocompleteParent();
+      if (!e)
+        return;
+      const a = e.triggerElement?.value;
+      a && this.options.forEach((b) => b.highlight(a));
+    }
+    render() {
+      return y`
+      <div class="sbb-optgroup__divider">
+        <sbb-divider ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}></sbb-divider>
+      </div>
+      ${this.label ? y`
+            <div class="sbb-optgroup__label" aria-hidden="true">
+              <div class="sbb-optgroup__icon-space"></div>
+              <span>${this.label}</span>
+            </div>
+          ` : G}
+      <slot @slotchange=${this._handleSlotchange}></slot>
+    `;
+    }
+  }, o = new WeakMap(), n = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    i = [w(), z()], g = [S()], x(r, null, i, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (a) => "label" in a, get: (a) => a.label, set: (a, b) => {
+      a.label = b;
+    } }, metadata: e }, s, l), x(r, null, g, { kind: "accessor", name: "_inertAriaGroups", static: !1, private: !1, access: { has: (a) => "_inertAriaGroups" in a, get: (a) => a._inertAriaGroups, set: (a, b) => {
+      a._inertAriaGroups = b;
+    } }, metadata: e }, v, _), e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.role = d ? null : "group", r.styles = [D, E], r;
+})();
+export {
+  K as SbbOptgroupBaseElement
+};

package/option/optgroup/optgroup.component.js

@@ -0,0 +1,38 @@
+import { __esDecorate as n, __runInitializers as c } from "tslib";
+import { customElement as u } from "lit/decorators.js";
+import { SbbPropertyWatcherController as r } from "../../core/controllers.js";
+import { SbbOptgroupBaseElement as m } from "./optgroup-base-element.js";
+let g = (() => {
+  var a;
+  let i = [u("sbb-optgroup")], l, s = [], e, o = m;
+  return a = class extends o {
+    get options() {
+      return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
+    }
+    constructor() {
+      super(), this.addController(new r(this, () => this.closest("sbb-autocomplete"), {
+        negative: (t) => this._handleNegativeChange(t)
+      })), this.addController(new r(this, () => this.closest("sbb-select"), {
+        multiple: (t) => this.toggleState("multiple", t.multiple),
+        negative: (t) => this._handleNegativeChange(t)
+      }));
+    }
+    _handleNegativeChange(t) {
+      this.toggleState("negative", t.negative), this.requestUpdate();
+    }
+    getAutocompleteParent() {
+      return this.closest?.("sbb-autocomplete") || null;
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      const t = this.closest?.("sbb-autocomplete") ? "autocomplete" : this.closest?.("sbb-select") ? "select" : null;
+      this.internals.states.delete("variant-autocomplete"), this.internals.states.delete("variant-select"), t && this.internals.states.add(`variant-${t}`);
+    }
+  }, e = a, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n(null, l = { value: e }, i, { kind: "class", name: e.name, metadata: t }, null, s), e = l.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), c(e, s);
+  })(), e;
+})();
+export {
+  g as SbbOptGroupElement
+};

package/option/optgroup.js

@@ -0,0 +1,6 @@
+import { SbbOptGroupElement as p } from "./optgroup/optgroup.component.js";
+import { SbbOptgroupBaseElement as t } from "./optgroup/optgroup-base-element.js";
+export {
+  p as SbbOptGroupElement,
+  t as SbbOptgroupBaseElement
+};

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

@@ -0,0 +1,217 @@
+var q = (s) => {
+  throw TypeError(s);
+};
+var R = (s, a, r) => a.has(s) || q("Cannot " + r);
+var d = (s, a, r) => (R(s, a, "read from private field"), r ? r.call(s) : a.get(s)), g = (s, a, r) => a.has(s) ? q("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, r), h = (s, a, r, L) => (R(s, a, "write to private field"), L ? L.call(s, r) : a.set(s, r), r);
+import { __esDecorate as o, __runInitializers as n } from "tslib";
+import { MutationController as X } from "@lit-labs/observers/mutation-controller.js";
+import { LitElement as J, html as f, nothing as S } from "lit";
+import { property as P, state as v } from "lit/decorators.js";
+import { isSafari as K, setOrRemoveAttribute as O, isAndroid as Q, isBlink as W } from "../../core/dom.js";
+import { SbbDisabledMixin as Y, SbbElementInternalsMixin as Z, SbbHydrationMixin as B } from "../../core/mixins.js";
+import { SbbIconNameMixin as tt } from "../../icon.js";
+import "../../screen-reader-only.js";
+let et = 0;
+const G = K, it = {
+  childList: !0,
+  subtree: !0,
+  characterData: !0
+};
+let ut = (() => {
+  var c, u, b, p, _, m, l;
+  let s = Y(tt(Z(B(J)))), a = [], r, L, A, x = [], H = [], k, y = [], I = [], $, C = [], z = [], F, D = [], N = [], w, E = [], T = [], M, U = [], j = [];
+  return l = class extends s {
+    constructor() {
+      super();
+      g(this, c);
+      g(this, u);
+      g(this, b);
+      g(this, p);
+      g(this, _);
+      g(this, m);
+      this._value = (n(this, a), null), h(this, c, n(this, x, !1)), h(this, u, (n(this, H), n(this, y, ""))), h(this, b, (n(this, I), n(this, C, void 0))), h(this, p, (n(this, z), n(this, D, !1))), h(this, _, (n(this, N), n(this, E, null))), h(this, m, (n(this, T), n(this, U, !1))), n(this, j), this.addEventListener?.("click", (t) => this.selectByClick(t), {
+        passive: !0
+      }), this.addController(new X(this, {
+        config: it,
+        callback: () => {
+          this.handleHighlightState(), this.dispatchEvent(new Event("optionLabelChanged", { bubbles: !0 }));
+        }
+      })), G && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = G) : this._inertAriaGroups = G);
+    }
+    /**
+     * 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(t) {
+      typeof t == "string" ? (this.setAttribute("value", `${t}`), this._value = null) : this._value = t;
+    }
+    get value() {
+      return this._value ?? this.getAttribute("value");
+    }
+    /** Whether the option is selected. */
+    set selected(t) {
+      this.toggleAttribute("selected", t), this._updateAriaSelected();
+    }
+    get selected() {
+      return this.hasAttribute("selected");
+    }
+    /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
+    get disabledFromGroup() {
+      return d(this, c);
+    }
+    set disabledFromGroup(t) {
+      h(this, c, t);
+    }
+    get groupLabel() {
+      return d(this, u);
+    }
+    set groupLabel(t) {
+      h(this, u, t);
+    }
+    get label() {
+      return d(this, b);
+    }
+    set label(t) {
+      h(this, b, t);
+    }
+    /** Disable the highlight of the label. */
+    get disableLabelHighlight() {
+      return d(this, p);
+    }
+    set disableLabelHighlight(t) {
+      h(this, p, t);
+    }
+    /** The portion of the highlighted label. */
+    get _highlightString() {
+      return d(this, _);
+    }
+    set _highlightString(t) {
+      h(this, _, t);
+    }
+    get _inertAriaGroups() {
+      return d(this, m);
+    }
+    set _inertAriaGroups(t) {
+      h(this, m, t);
+    }
+    attributeChangedCallback(t, e, i) {
+      (t !== "value" || e !== i) && super.attributeChangedCallback(t, e, i);
+    }
+    /**
+     * Highlight the label of the option
+     * @param value the highlighted portion of the label
+     * @internal
+     */
+    highlight(t) {
+      this._highlightString = t;
+    }
+    selectViaUserInteraction(t) {
+      this.selected = t, this.selected && this.dispatchEvent(new Event("optionselected", { bubbles: !0, composed: !0 }));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.id ||= `${this.optionId}-${et++}`;
+    }
+    requestUpdate(t, e, i) {
+      super.requestUpdate(t, e, i), (t === "disabled" || t === "disabledFromGroup") && (this.toggleState("disabled", this.disabled || this.disabledFromGroup), O(this, "tabindex", Q && !this.disabled && !this.disabledFromGroup ? 0 : null), this.updateAriaDisabled());
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this._updateAriaSelected();
+    }
+    updateDisableHighlight(t) {
+      this.disableLabelHighlight = t, this.toggleState("disable-highlight", t);
+    }
+    /**
+     * Whether the option is currently active.
+     * @internal
+     */
+    setActive(t) {
+      this.toggleState("active", t);
+    }
+    updateAriaDisabled() {
+      this.internals.ariaDisabled = this.disabled || this.disabledFromGroup ? "true" : null, this.dispatchEvent(new Event("ɵdisabledchange", { bubbles: !0 }));
+    }
+    _updateAriaSelected() {
+      this.internals.ariaSelected = `${this.selected}`;
+    }
+    handleHighlightState() {
+      const t = Array.from(this.childNodes ?? []).filter((i) => i.nodeType !== Node.COMMENT_NODE && (!(i instanceof Element) || i.slot !== "icon")), e = t.filter((i) => i.nodeType === Node.TEXT_NODE);
+      if (e.length === 0 || t.filter((i) => !(i instanceof Element) || i.localName !== "template").length !== e.length) {
+        this.updateDisableHighlight(!0);
+        return;
+      }
+      this.label = e.map((i) => i.wholeText).filter((i) => i.trim()).join("");
+    }
+    getHighlightedLabel() {
+      if (!this._highlightString || !this._highlightString.trim())
+        return f`${this.label}`;
+      const t = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
+      if (t === -1)
+        return f`${this.label}`;
+      const e = this.label.substring(0, t), i = this.label.substring(t, t + this._highlightString.length), V = this.label.substring(t + this._highlightString.length);
+      return f`
+      <span class="sbb-option__label--highlight">${e}</span><span>${i}</span
+      ><span class="sbb-option__label--highlight">${V}</span>
+    `;
+    }
+    renderIcon() {
+      return f`<span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
+    }
+    renderLabel() {
+      return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : S;
+    }
+    renderTick() {
+      return S;
+    }
+    render() {
+      return f`
+      <div class="sbb-option__container">
+        <div class="sbb-option">
+          ${this.renderIcon()}
+          <span class="sbb-option__label">
+            <slot @slotchange=${this.handleHighlightState}></slot>
+            <span
+              aria-hidden=${/**
+      * Screen readers with Chromium read the option twice.
+      * We therefore have to hide the option for the screen readers.
+      * TODO: Recheck periodically if this is still necessary.
+      * https://issues.chromium.org/issues/460165741
+      */
+      W ? "true" : S}
+            >
+              ${this.renderLabel()}
+            </span>
+            ${this._inertAriaGroups && this.groupLabel ? f`<sbb-screen-reader-only> (${this.groupLabel})</sbb-screen-reader-only>` : S}
+          </span>
+          ${this.renderTick()}
+        </div>
+      </div>
+    `;
+    }
+  }, c = new WeakMap(), u = new WeakMap(), b = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    r = [P()], L = [P({ type: Boolean })], A = [v()], k = [v()], $ = [v()], F = [v()], w = [v()], M = [v()], o(l, null, r, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+      e.value = i;
+    } }, metadata: t }, null, a), o(l, null, L, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (e) => "selected" in e, set: (e, i) => {
+      e.selected = i;
+    } }, metadata: t }, null, a), o(l, null, A, { 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 }, x, H), o(l, null, k, { kind: "accessor", name: "groupLabel", static: !1, private: !1, access: { has: (e) => "groupLabel" in e, get: (e) => e.groupLabel, set: (e, i) => {
+      e.groupLabel = i;
+    } }, metadata: t }, y, I), o(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 }, C, z), o(l, null, F, { 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 }, D, N), o(l, null, w, { kind: "accessor", name: "_highlightString", static: !1, private: !1, access: { has: (e) => "_highlightString" in e, get: (e) => e._highlightString, set: (e, i) => {
+      e._highlightString = i;
+    } }, metadata: t }, E, T), o(l, null, M, { 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 }, U, j), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.events = {
+    optionselected: "optionselected"
+  }, l;
+})();
+export {
+  ut as SbbOptionBaseElement
+};

package/option/option/option.component.js

@@ -0,0 +1,95 @@
+import { __esDecorate as c, __runInitializers as d } from "tslib";
+import { css as p, nothing as s, html as i } from "lit";
+import { customElement as h } from "lit/decorators.js";
+import { SbbPropertyWatcherController as a } from "../../core/controllers.js";
+import { boxSizingStyles as u } from "../../core/styles.js";
+import { SbbOptionBaseElement as v } from "./option-base-element.js";
+import "../../visual-checkbox.js";
+const g = p`:host{--sbb-option-color: var(--sbb-color-3);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-background-color-3);--sbb-option-background-color-active: var(--sbb-background-color-4);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-option-disabled-background-color: var(--sbb-background-color-3);--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: var(--sbb-cursor-pointer);--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host(:is(:state(negative),[state--negative])){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5);--sbb-option-background-color-hover: var(--sbb-background-color-3-negative);--sbb-option-background-color-active: var(--sbb-background-color-4-negative);--sbb-option-disabled-border-color: var(--sbb-border-color-5);--sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-option-color: GrayText}}:host(:is(:state(variant-select),[state--variant-select])){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])){--sbb-option-justify-content: start}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is(:is(:state(disabled),[state--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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option{position:relative;z-index:0}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--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(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--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(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}`;
+let I = (() => {
+  var o;
+  let l = [h("sbb-option")], r, n = [], e, b = v;
+  return o = class extends b {
+    set _variant(t) {
+      this._variantInternal && this.internals.states.delete(`variant-${this._variantInternal}`), this._variantInternal = t, this._variantInternal && this.internals.states.add(`variant-${this._variantInternal}`);
+    }
+    get _variant() {
+      return this._variantInternal ?? null;
+    }
+    constructor() {
+      super(), this.optionId = "sbb-option", this.addController(new a(this, () => this.closest("sbb-optgroup"), {
+        disabled: (t) => this.disabledFromGroup = t.disabled,
+        label: (t) => this.groupLabel = t.label
+      })), this.addController(new a(this, () => this.closest("sbb-autocomplete"), {
+        negative: (t) => this._handleNegativeChange(t)
+      })), this.addController(new a(this, () => this.closest("sbb-select"), {
+        multiple: (t) => {
+          this.toggleState("multiple", t.multiple), this.requestUpdate();
+        },
+        negative: (t) => this._handleNegativeChange(t)
+      }));
+    }
+    _isMultiple() {
+      return !this.hydrationRequired && this.internals.states.has("multiple");
+    }
+    _handleNegativeChange(t) {
+      this.toggleState("negative", t.negative), this.requestUpdate();
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.hydrationRequired ? this.hydrationComplete.then(() => this._init()) : this._init();
+    }
+    _init() {
+      this._setVariantByContext(), this.handleHighlightState();
+    }
+    selectByClick(t) {
+      if (this.disabled || this.disabledFromGroup) {
+        t.stopPropagation();
+        return;
+      }
+      this._isMultiple() ? (t.stopPropagation(), this.selectViaUserInteraction(!this.selected)) : this.selectViaUserInteraction(!0);
+    }
+    selectViaUserInteraction(t) {
+      super.selectViaUserInteraction(t), this.dispatchEvent(new Event("optionselectionchange", { bubbles: !0, composed: !0 }));
+    }
+    _setVariantByContext() {
+      this.closest?.("sbb-autocomplete") ? this._variant = "autocomplete" : this.closest?.("sbb-select") && (this._variant = "select");
+    }
+    handleHighlightState() {
+      if (this._variant !== "autocomplete") {
+        this.updateDisableHighlight(!0);
+        return;
+      }
+      super.handleHighlightState();
+    }
+    renderIcon() {
+      return i`
+      <!-- Icon -->
+      ${this._isMultiple() ? s : i` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+
+      <!-- Checkbox -->
+      ${this._isMultiple() ? i`
+            <sbb-visual-checkbox
+              ?checked=${this.selected}
+              ?disabled=${this.disabled || this.disabledFromGroup}
+              ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
+            ></sbb-visual-checkbox>
+          ` : s}
+    `;
+    }
+    renderLabel() {
+      return this._variant !== "autocomplete" ? s : super.renderLabel();
+    }
+    renderTick() {
+      return this._variant === "select" && !this._isMultiple() && this.selected ? i`<sbb-icon name="tick-small"></sbb-icon>` : s;
+    }
+  }, e = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    c(null, r = { value: e }, l, { kind: "class", name: e.name, metadata: t }, null, n), e = r.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "option", o.styles = [u, g], o.events = {
+    optionselectionchange: "optionselectionchange",
+    optionselected: "optionselected"
+  }, d(e, n), e;
+})();
+export {
+  I as SbbOptionElement
+};

package/option/option-hint/option-hint.component.js

@@ -0,0 +1,28 @@
+import { __esDecorate as b, __runInitializers as l } from "tslib";
+import { css as r, LitElement as p, html as c } from "lit";
+import { customElement as m } from "lit/decorators.js";
+import { SbbNegativeMixin as d } from "../../core/mixins.js";
+import { boxSizingStyles as v } from "../../core/styles.js";
+const h = r`:host{display:block;--sbb-option-hint-color: var(--sbb-color-metal);--sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);--sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([negative]){--sbb-option-hint-color: var(--sbb-color-5)}.sbb-option-hint__wrapper{display:flex;column-gap:var(--sbb-option-hint-column-gap);padding-inline:var(--sbb-option-hint-padding-inline);padding-block-end:var(--sbb-option-hint-padding-block-end)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}`;
+let _ = (() => {
+  var o;
+  let a = [m("sbb-option-hint")], n, s = [], t, e = d(p);
+  return o = class extends e {
+    render() {
+      return c`
+      <div class="sbb-option-hint__wrapper">
+        <div class="sbb-optgroup__icon-space"></div>
+        <span class="sbb-option-hint">
+          <slot></slot>
+        </span>
+      </div>
+    `;
+    }
+  }, t = o, (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    b(null, n = { value: t }, a, { kind: "class", name: t.name, metadata: i }, null, s), t = n.value, i && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), o.styles = [v, h], l(t, s), t;
+})();
+export {
+  _ as SbbOptionHintElement
+};

package/option/option-hint.js

@@ -0,0 +1,4 @@
+import { SbbOptionHintElement as n } from "./option-hint/option-hint.component.js";
+export {
+  n as SbbOptionHintElement
+};

package/option/option.js

@@ -0,0 +1,6 @@
+import { SbbOptionElement as t } from "./option/option.component.js";
+import { SbbOptionBaseElement as m } from "./option/option-base-element.js";
+export {
+  m as SbbOptionBaseElement,
+  t as SbbOptionElement
+};

package/option.js

@@ -0,0 +1,12 @@
+import { SbbOptGroupElement as o } from "./option/optgroup/optgroup.component.js";
+import { SbbOptgroupBaseElement as r } from "./option/optgroup/optgroup-base-element.js";
+import { SbbOptionElement as m } from "./option/option/option.component.js";
+import { SbbOptionBaseElement as f } from "./option/option/option-base-element.js";
+import { SbbOptionHintElement as x } from "./option/option-hint/option-hint.component.js";
+export {
+  o as SbbOptGroupElement,
+  r as SbbOptgroupBaseElement,
+  f as SbbOptionBaseElement,
+  m as SbbOptionElement,
+  x as SbbOptionHintElement
+};

package/overlay/overlay-base-element.js

@@ -0,0 +1,152 @@
+var E = (i) => {
+  throw TypeError(i);
+};
+var O = (i, s, r) => s.has(i) || E("Cannot " + r);
+var f = (i, s, r) => (O(i, s, "read from private field"), r ? r.call(i) : s.get(i)), m = (i, s, r) => s.has(i) ? E("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, r), c = (i, s, r, n) => (O(i, s, "write to private field"), n ? n.call(i, r) : s.set(i, r), r);
+import { __runInitializers as p, __esDecorate as v } from "tslib";
+import { isServer as w } 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 { SbbLanguageController as T, SbbInertController as x, SbbEscapableOverlayController as I } from "../core/controllers.js";
+import { idReference as z, forceType as A } from "../core/decorators.js";
+import { SbbScrollHandler as U } from "../core/dom.js";
+import { i18nDialog as D } from "../core/i18n.js";
+import { SbbNegativeMixin as H } from "../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as N, setAriaOverlayTriggerAttributes as P } from "../core/overlay.js";
+const k = /* @__PURE__ */ new WeakMap();
+class Y extends CustomEvent {
+  constructor(s, { cancelable: r, closeAttribute: n, closeTarget: l, result: b }) {
+    super(s, { cancelable: r, detail: { returnValue: b, closeTarget: l } }), this.result = b ?? (l ? k.get(l) ?? (l.getAttribute(n)?.trim() || null) : null), this.closeTarget = l ?? null;
+  }
+}
+function ee(i, s) {
+  k.set(i, s);
+}
+const d = [];
+let te = (() => {
+  var h, g, u, o;
+  let i = H(F), s, r = [], n = [], l, b = [], C = [], y, R = [], L = [];
+  return o = class extends i {
+    constructor() {
+      super(...arguments);
+      m(this, h);
+      m(this, g);
+      m(this, u);
+      c(this, h, p(this, r, null)), c(this, g, (p(this, n), p(this, b, ""))), c(this, u, (p(this, C), p(this, R, !1))), this.lastFocusedElement = p(this, L), this.focusTrapController = new S(this), this.scrollHandler = new U(), this.language = new T(this), this.inertController = new x(this), this.escapableOverlayController = new I(this), this._ariaLiveRefToggle = !1, this._triggerElement = null;
+    }
+    /**
+     * The element that will trigger the menu overlay.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    get trigger() {
+      return f(this, h);
+    }
+    set trigger(e) {
+      c(this, h, e);
+    }
+    /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
+    get accessibilityLabel() {
+      return f(this, g);
+    }
+    set accessibilityLabel(e) {
+      c(this, g, e);
+    }
+    /**
+     * Whether to skip restoring focus to the previously-focused element when the overlay is closed.
+     * Note that automatic focus restoration is an accessibility feature, and it is recommended that
+     * you provide your own equivalent, if you decide to turn it off.
+     */
+    get skipFocusRestoration() {
+      return f(this, u);
+    }
+    set skipFocusRestoration(e) {
+      c(this, u, e);
+    }
+    /** Opens the component. */
+    open() {
+      this.state === "opening" || this.state === "opened" || this._hasClosedParent() || !this.dispatchBeforeOpenEvent() || (this.lastFocusedElement = document.activeElement, this.showPopover?.(), this.state = "opening", this._triggerElement?.setAttribute("aria-expanded", "true"), d.push(this), this.scrollHandler.disableScroll(), this.escapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.isZeroAnimationDuration() && this.handleOpening());
+    }
+    close(e, t) {
+      this._close(e, t);
+    }
+    _close(e, t) {
+      this.state === "closing" || this.state === "closed" || (this.returnValue = e, this.overlayCloseElement = t, this.dispatchBeforeCloseEvent() && (this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing()));
+    }
+    /**
+     * Check if there is a parent dialog or overlay in the DOM that is closed.
+     * In this case, the overlay should not be opened because it would break the state.
+     * Not nested but stacked overlays are supported so this logic does not apply in this case.
+     */
+    _hasClosedParent() {
+      const e = this.parentElement?.closest("sbb-dialog, sbb-overlay");
+      return (e?.state === "closed" || e?.state === "closing") ?? !1;
+    }
+    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(), N(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (P(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+        signal: this._triggerAbortController.signal
+      })));
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this._ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), this._configureTrigger(), this.isOpen && setTimeout(() => {
+        this.focusTrapController.focusInitialElement();
+      }, 0);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.openOverlayController?.abort(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll(), this._triggerElement = null, this._triggerAbortController?.abort();
+    }
+    requestUpdate(e, t, a) {
+      super.requestUpdate(e, t, a), !w && (!e || e === "trigger") && this.hasUpdated && this._configureTrigger();
+    }
+    attachOpenOverlayEvents() {
+      this.openOverlayController = new AbortController(), window.addEventListener("keydown", () => {
+        this.removeAriaLiveRefContent();
+      }, {
+        signal: this.openOverlayController.signal
+      }), window.addEventListener("click", () => this.removeAriaLiveRefContent(), {
+        signal: this.openOverlayController.signal
+      });
+    }
+    removeInstanceFromGlobalCollection() {
+      const e = d.indexOf(this);
+      e > -1 && d.splice(e, 1);
+    }
+    // Close the component on click of any element that has the `closeAttribute` attribute.
+    closeOnSbbOverlayCloseClick(e) {
+      const t = e.composedPath().filter((a) => a instanceof window.HTMLElement).find((a) => (a.hasAttribute(this.closeAttribute) || a.localName === this.closeTag) && !a.hasAttribute("disabled"));
+      !t || t.closest(this.localName) !== this && !this.shadowRoot?.contains(t) || d.length && d[d.length - 1]._close(null, t);
+    }
+    removeAriaLiveRefContent() {
+      this._ariaLiveRef && (this._ariaLiveRef.textContent = "");
+    }
+    setAriaLiveRefContent(e) {
+      this._ariaLiveRef && (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.
+    // To avoid entering a corrupt state, exit when state is not expected.
+    onOverlayAnimationEnd(e) {
+      e.animationName === "open" && this.state === "opening" ? this.handleOpening() : e.animationName === "close" && this.state === "closing" && this.handleClosing();
+    }
+  }, h = new WeakMap(), g = new WeakMap(), u = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    s = [z(), _()], l = [A(), _({ attribute: "accessibility-label" })], y = [A(), _({ type: Boolean })], v(o, null, s, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, a) => {
+      t.trigger = a;
+    } }, metadata: e }, r, n), v(o, null, l, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, a) => {
+      t.accessibilityLabel = a;
+    } }, metadata: e }, b, C), v(o, null, y, { kind: "accessor", name: "skipFocusRestoration", static: !1, private: !1, access: { has: (t) => "skipFocusRestoration" in t, get: (t) => t.skipFocusRestoration, set: (t, a) => {
+      t.skipFocusRestoration = a;
+    } }, metadata: e }, R, L), e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o;
+})();
+export {
+  te as SbbOverlayBaseElement,
+  Y as SbbOverlayCloseEvent,
+  ee as assignOverlayResult,
+  d as overlayRefs
+};