@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773159918

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

@@ -4,17 +4,18 @@ var m = (i) => {
 var f = (i, t, s) => t.has(i) || m("Cannot " + s);
 var c = (i, t, s) => (f(i, t, "read from private field"), s ? s.call(i) : t.get(i)), u = (i, t, s) => t.has(i) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), h = (i, t, s, l) => (f(i, t, "write to private field"), l ? l.call(i, s) : t.set(i, s), s);
 import { __esDecorate as y, __runInitializers as p } from "tslib";
-import { css as x, LitElement as G, nothing as k, html as A } from "lit";
-import { property as S, state as z } from "lit/decorators.js";
+import { css as x, nothing as G, html as A } from "lit";
+import { property as k, state as z } from "lit/decorators.js";
+import { SbbElement as S } from "../../core/base-elements.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 { SbbDisabledMixin as $ } from "../../core/mixins.js";
+import { boxSizingStyles as C } from "../../core/styles.js";
 import "../../divider.js";
-const E = x`:host{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{display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);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, block);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 = (() => {
+const D = x`:host{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{display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);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, block);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 J = (() => {
   var o, n, r;
-  let i = I($(C(G))), t, s = [], l = [], g, _ = [], v = [];
+  let i = $(S), t, s = [], l = [], g, _ = [], v = [];
   return r = class extends i {
     constructor() {
       super();
@@ -64,19 +65,19 @@ let K = (() => {
               <div class="sbb-optgroup__icon-space"></div>
               <span>${this.label}</span>
             </div>
-          ` : k}
+          ` : G}
       <slot @slotchange=${this._handleSlotchange}></slot>
     `;
     }
   }, o = new WeakMap(), n = new WeakMap(), (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    t = [w(), S()], g = [z()], y(r, null, t, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (a) => "label" in a, get: (a) => a.label, set: (a, b) => {
+    t = [w(), k()], g = [z()], y(r, null, t, { 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), y(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;
+  })(), r.role = d ? null : "group", r.styles = [C, D], r;
 })();
 export {
-  K as SbbOptgroupBaseElement
+  J as SbbOptgroupBaseElement
 };

package/option/optgroup/optgroup.component.js

@@ -1,38 +1,31 @@
-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;
-})();
+import { SbbPropertyWatcherController as s } from "../../core/controllers.js";
+import { SbbOptgroupBaseElement as l } from "./optgroup-base-element.js";
+const e = class e extends l {
+  get options() {
+    return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
+  }
+  constructor() {
+    super(), this.addController(new s(this, () => this.closest("sbb-autocomplete"), {
+      negative: (t) => this._handleNegativeChange(t)
+    })), this.addController(new s(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.elementName = "sbb-optgroup";
+let a = e;
 export {
-  g as SbbOptGroupElement
+  a as SbbOptGroupElement
 };

package/option/optgroup.js

@@ -1,6 +1,9 @@
-import { SbbOptGroupElement as p } from "./optgroup/optgroup.component.js";
-import { SbbOptgroupBaseElement as t } from "./optgroup/optgroup-base-element.js";
+import { SbbOptGroupElement as e } from "./optgroup/optgroup.component.js";
+import { SbbOptgroupBaseElement as n } from "./optgroup/optgroup-base-element.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/option/optgroup.js' has been deprecated.
+Use either '@sbb-esta/elements/option.js' or '@sbb-esta/elements/option.pure.js' instead.`);
 export {
-  p as SbbOptGroupElement,
-  t as SbbOptgroupBaseElement
+  e as SbbOptGroupElement,
+  n as SbbOptgroupBaseElement
 };

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

@@ -5,21 +5,22 @@ 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 { html as f, nothing as G } from "lit";
 import { property as P, state as v } from "lit/decorators.js";
+import { SbbElement as J } from "../../core/base-elements.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 { SbbDisabledMixin as Y } from "../../core/mixins.js";
+import { SbbIconNameMixin as Z } from "../../icon.js";
 import "../../screen-reader-only.js";
-let et = 0;
-const G = K, it = {
+let B = 0;
+const S = K, tt = {
   childList: !0,
   subtree: !0,
   characterData: !0
 };
-let ut = (() => {
+let ct = (() => {
   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 = [];
+  let s = Y(Z(J)), a = [], r, L, A, H = [], k = [], x, y = [], $ = [], I, C = [], z = [], F, D = [], N = [], w, T = [], E = [], M, U = [], j = [];
   return l = class extends s {
     constructor() {
       super();
@@ -29,14 +30,14 @@ let ut = (() => {
       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), {
+      this._value = (n(this, a), null), h(this, c, n(this, H, !1)), h(this, u, (n(this, k), n(this, y, ""))), h(this, b, (n(this, $), n(this, C, void 0))), h(this, p, (n(this, z), n(this, D, !1))), h(this, _, (n(this, N), n(this, T, null))), h(this, m, (n(this, E), n(this, U, !1))), n(this, j), this.addEventListener?.("click", (t) => this.selectByClick(t), {
         passive: !0
       }), this.addController(new X(this, {
-        config: it,
+        config: tt,
         callback: () => {
           this.handleHighlightState(), this.dispatchEvent(new Event("optionLabelChanged", { bubbles: !0 }));
         }
-      })), G && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = G) : this._inertAriaGroups = G);
+      })), S && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = S) : this._inertAriaGroups = S);
     }
     /**
      * Value of the option.
@@ -111,7 +112,7 @@ let ut = (() => {
       this.selected = t, this.selected && this.dispatchEvent(new Event("optionselected", { bubbles: !0, composed: !0 }));
     }
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `${this.optionId}-${et++}`;
+      super.connectedCallback(), this.id ||= `${this.optionId}-${B++}`;
     }
     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());
@@ -159,10 +160,10 @@ let ut = (() => {
       return f`<span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
     }
     renderLabel() {
-      return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : S;
+      return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : G;
     }
     renderTick() {
-      return S;
+      return G;
     }
     render() {
       return f`
@@ -177,11 +178,11 @@ let ut = (() => {
       * TODO: Recheck periodically if this is still necessary.
       * https://issues.chromium.org/issues/460165741
       */
-      W ? "true" : S}
+      W ? "true" : G}
           >
             ${this.renderLabel()}
           </span>
-          ${this._inertAriaGroups && this.groupLabel ? f`<sbb-screen-reader-only> (${this.groupLabel})</sbb-screen-reader-only>` : S}
+          ${this._inertAriaGroups && this.groupLabel ? f`<sbb-screen-reader-only> (${this.groupLabel})</sbb-screen-reader-only>` : G}
         </span>
         ${this.renderTick()}
       </div>
@@ -189,21 +190,21 @@ let ut = (() => {
     }
   }, 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) => {
+    r = [P()], L = [P({ type: Boolean })], A = [v()], x = [v()], I = [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) => {
+    } }, metadata: t }, H, k), o(l, null, x, { 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) => {
+    } }, metadata: t }, y, $), o(l, null, I, { 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) => {
+    } }, metadata: t }, T, E), 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 = {
@@ -211,5 +212,5 @@ let ut = (() => {
   }, l;
 })();
 export {
-  ut as SbbOptionBaseElement
+  ct as SbbOptionBaseElement
 };

package/option/option/option.component.js

@@ -1,95 +1,87 @@
-import { __esDecorate as c, __runInitializers as d } from "tslib";
-import { css as h, nothing as s, html as o } from "lit";
-import { customElement as p } 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 { css as n, nothing as i, html as s } from "lit";
+import { SbbPropertyWatcherController as o } from "../../core/controllers.js";
+import { boxSizingStyles as r } from "../../core/styles.js";
+import { SbbOptionBaseElement as l } from "./option-base-element.js";
 import "../../visual-checkbox.js";
-const g = h`:host{display:block;background-color:var(--sbb-option-background-color);font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}: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{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 e;
-  let b = [p("sbb-option")], n, l = [], i, r = v;
-  return e = class extends r {
-    set _variant(t) {
-      this._variantInternal && this.internals.states.delete(`variant-${this._variantInternal}`), this._variantInternal = t, this._variantInternal && this.internals.states.add(`variant-${this._variantInternal}`);
+const b = n`:host{display:block;background-color:var(--sbb-option-background-color);font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}: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{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)}`, e = class e extends l {
+  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 o(this, () => this.closest("sbb-optgroup"), {
+      disabled: (t) => this.disabledFromGroup = t.disabled,
+      label: (t) => this.groupLabel = t.label
+    })), this.addController(new o(this, () => this.closest("sbb-autocomplete"), {
+      negative: (t) => this._handleNegativeChange(t)
+    })), this.addController(new o(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;
     }
-    get _variant() {
-      return this._variantInternal ?? null;
+    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;
     }
-    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 o`
+    super.handleHighlightState();
+  }
+  renderIcon() {
+    return s`
       <!-- Icon -->
-      ${this._isMultiple() ? s : o` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+      ${this._isMultiple() ? i : s` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
 
       <!-- Checkbox -->
-      ${this._isMultiple() ? o`
+      ${this._isMultiple() ? s`
             <sbb-visual-checkbox
               ?checked=${this.selected}
               ?disabled=${this.disabled || this.disabledFromGroup}
               ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
             ></sbb-visual-checkbox>
-          ` : s}
+          ` : i}
     `;
-    }
-    renderLabel() {
-      return this._variant !== "autocomplete" ? s : super.renderLabel();
-    }
-    renderTick() {
-      return this._variant === "select" && !this._isMultiple() && this.selected ? o`<sbb-icon name="tick-small"></sbb-icon>` : s;
-    }
-  }, i = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    c(null, n = { value: i }, b, { kind: "class", name: i.name, metadata: t }, null, l), i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.role = "option", e.styles = [u, g], e.events = {
-    optionselectionchange: "optionselectionchange",
-    optionselected: "optionselected"
-  }, d(i, l), i;
-})();
+  }
+  renderLabel() {
+    return this._variant !== "autocomplete" ? i : super.renderLabel();
+  }
+  renderTick() {
+    return this._variant === "select" && !this._isMultiple() && this.selected ? s`<sbb-icon name="tick-small"></sbb-icon>` : i;
+  }
+};
+e.elementName = "sbb-option", e.role = "option", e.styles = [r, b], e.events = {
+  optionselectionchange: "optionselectionchange",
+  optionselected: "optionselected"
+};
+let a = e;
 export {
-  I as SbbOptionElement
+  a as SbbOptionElement
 };

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

@@ -1,26 +1,19 @@
-import { __esDecorate as l, __runInitializers as r } from "tslib";
-import { css as b, LitElement as c, html as p } from "lit";
-import { customElement as m } from "lit/decorators.js";
-import { SbbNegativeMixin as d } from "../../core/mixins.js";
-import { boxSizingStyles as u } from "../../core/styles.js";
-const v = b`:host{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);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([negative]){--sbb-option-hint-color: var(--sbb-color-5)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}`;
-let x = (() => {
-  var o;
-  let a = [m("sbb-option-hint")], e, n = [], t, s = d(c);
-  return o = class extends s {
-    render() {
-      return p`
+import { css as t, html as s } from "lit";
+import { SbbElement as n } from "../../core/base-elements.js";
+import { SbbNegativeMixin as a } from "../../core/mixins.js";
+import { boxSizingStyles as r } from "../../core/styles.js";
+const b = t`:host{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);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([negative]){--sbb-option-hint-color: var(--sbb-color-5)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}`, o = class o extends a(n) {
+  render() {
+    return s`
       <div class="sbb-optgroup__icon-space"></div>
       <span class="sbb-option-hint">
         <slot></slot>
       </span>
     `;
-    }
-  }, t = o, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    l(null, e = { value: t }, a, { kind: "class", name: t.name, metadata: i }, null, n), t = e.value, i && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), o.styles = [u, v], r(t, n), t;
-})();
+  }
+};
+o.elementName = "sbb-option-hint", o.styles = [r, b];
+let i = o;
 export {
-  x as SbbOptionHintElement
+  i as SbbOptionHintElement
 };

package/option/option-hint.js

@@ -1,4 +1,7 @@
-import { SbbOptionHintElement as n } from "./option-hint/option-hint.component.js";
+import { SbbOptionHintElement as e } from "./option-hint/option-hint.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/option/option-hint.js' has been deprecated.
+Use either '@sbb-esta/elements/option.js' or '@sbb-esta/elements/option.pure.js' instead.`);
 export {
-  n as SbbOptionHintElement
+  e as SbbOptionHintElement
 };

package/option/option.js

@@ -1,6 +1,9 @@
-import { SbbOptionElement as t } from "./option/option.component.js";
-import { SbbOptionBaseElement as m } from "./option/option-base-element.js";
+import { SbbOptionElement as e } from "./option/option.component.js";
+import { SbbOptionBaseElement as s } from "./option/option-base-element.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/option/option.js' has been deprecated.
+Use either '@sbb-esta/elements/option.js' or '@sbb-esta/elements/option.pure.js' instead.`);
 export {
-  m as SbbOptionBaseElement,
-  t as SbbOptionElement
+  s as SbbOptionBaseElement,
+  e as SbbOptionElement
 };

package/option.js

@@ -1,12 +1,15 @@
-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";
+import { SbbOptgroupBaseElement as i } from "./option/optgroup/optgroup-base-element.js";
+import { SbbOptGroupElement as e } from "./option/optgroup/optgroup.component.js";
+import { SbbOptionHintElement as t } from "./option/option-hint/option-hint.component.js";
+import { SbbOptionBaseElement as l } from "./option/option/option-base-element.js";
+import { SbbOptionElement as o } from "./option/option/option.component.js";
+e.define();
+o.define();
+t.define();
 export {
-  o as SbbOptGroupElement,
-  r as SbbOptgroupBaseElement,
-  f as SbbOptionBaseElement,
-  m as SbbOptionElement,
-  x as SbbOptionHintElement
+  e as SbbOptGroupElement,
+  i as SbbOptgroupBaseElement,
+  l as SbbOptionBaseElement,
+  o as SbbOptionElement,
+  t as SbbOptionHintElement
 };

package/option.pure.js

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