@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/option/optgroup.js

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

package/option/option/option-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option-base-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI3D,OAAO,6BAA6B,CAAC;;AAoBrC,8BAEe,oBAAqB,SAAQ,yBAE3C;IACC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAEpC;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;IAEjD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;IAEhD,4CAA4C;IACnC,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAS;IAE7C,yFAAyF;IAChF,SAAS,CAAC,QAAQ,CAAC,iBAAiB,UAAS;IAE7C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,MAAM,CAAC;IAE3C,0CAA0C;IACjC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAS;IAEnE,4CAA4C;IACnC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAuB;IAExD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAS;;IAsBnC,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7C,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IAEjD,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD;;;OAGG;IACI,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAItC,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAQpC,OAAO,CAAC,mBAAmB;IAI3B,mGAAmG;IACnG,SAAS,CAAC,wBAAwB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAIzE,2FAA2F;IAC3F,SAAS,CAAC,kBAAkB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAiBnE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAuBtC,SAAS,CAAC,mBAAmB,IAAI,cAAc;IAwB/C,SAAS,CAAC,UAAU,IAAI,cAAc;IAItC,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;IAIxD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;cAIpC,MAAM,IAAI,cAAc;CAmB5C"}
+{"version":3,"file":"option-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option-base-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI3D,OAAO,6BAA6B,CAAC;;AAoBrC,8BAEe,oBAAqB,SAAQ,yBAE3C;IACC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAEpC;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;IAEjD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;IAEhD,4CAA4C;IACnC,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAS;IAE7C,yFAAyF;IAChF,SAAS,CAAC,QAAQ,CAAC,iBAAiB,UAAS;IAE7C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,MAAM,CAAC;IAE3C,0CAA0C;IACjC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAS;IAEnE,4CAA4C;IACnC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAuB;IAExD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAS;;IAwBnC,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7C,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IAEjD,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD;;;OAGG;IACI,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAItC,SAAS,CAAC,IAAI,IAAI,IAAI;IAItB,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAQpC,OAAO,CAAC,mBAAmB;IAI3B,mGAAmG;IACnG,SAAS,CAAC,wBAAwB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAIzE,2FAA2F;IAC3F,SAAS,CAAC,kBAAkB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAiBnE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAuBtC,SAAS,CAAC,mBAAmB,IAAI,cAAc;IAwB/C,SAAS,CAAC,UAAU,IAAI,cAAc;IAItC,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;IAIxD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;cAIpC,MAAM,IAAI,cAAc;CAmB5C"}

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

@@ -0,0 +1,232 @@
+var P = (a) => {
+  throw TypeError(a);
+};
+var V = (a, s, n) => s.has(a) || P("Cannot " + n);
+var d = (a, s, n) => (V(a, s, "read from private field"), n ? n.call(a) : s.get(a)), g = (a, s, n) => s.has(a) ? P("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, n), b = (a, s, n, h) => (V(a, s, "write to private field"), h ? h.call(a, n) : s.set(a, n), n);
+import { __esDecorate as o, __runInitializers as r } from "tslib";
+import { MutationController as K } from "@lit-labs/observers/mutation-controller.js";
+import { LitElement as Q, html as c, nothing as G } from "lit";
+import { property as X, state as u } from "lit/decorators.js";
+import { slotState as W } from "../../core/decorators.js";
+import { isSafari as Y, setOrRemoveAttribute as Z, isAndroid as tt } from "../../core/dom.js";
+import { SbbDisabledMixin as et, SbbHydrationMixin as it } from "../../core/mixins.js";
+import { SbbIconNameMixin as at } from "../../icon.js";
+import "../../screen-reader-only.js";
+let st = 0;
+const x = Y, lt = {
+  attributeFilter: ["data-group-disabled", "data-negative"],
+  attributes: !0,
+  childList: !0,
+  subtree: !0,
+  characterData: !0
+};
+let mt = (() => {
+  var _, p, m, f, v, A, l;
+  let a = [W()], s, n = [], h, L = et(at(it(Q))), S = [], y, C, H, k = [], I = [], $, z = [], E = [], F, D = [], N = [], O, T = [], w = [], M, U = [], j = [], B, R = [], q = [];
+  return l = class extends L {
+    constructor() {
+      var t;
+      super();
+      g(this, _, (r(this, S), r(this, k, !1)));
+      g(this, p, (r(this, I), r(this, z, !1)));
+      g(this, m, (r(this, E), r(this, D, void 0)));
+      g(this, f, (r(this, N), r(this, T, !1)));
+      g(this, v, (r(this, w), r(this, U, null)));
+      g(this, A, (r(this, j), r(this, R, !1)));
+      r(this, q), (t = this.addEventListener) == null || t.call(this, "click", (e) => this.selectByClick(e), {
+        passive: !0
+      }), this.addController(new K(this, {
+        config: lt,
+        callback: (e) => this.onOptionAttributesChange(e)
+      })), x && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = x) : this._inertAriaGroups = x);
+    }
+    /**
+     * 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) {
+      this.setAttribute("value", `${t}`);
+    }
+    get value() {
+      return this.getAttribute("value") ?? "";
+    }
+    /** Whether the option is selected. */
+    set selected(t) {
+      this.toggleAttribute("selected", t), this._updateAriaSelected();
+    }
+    get selected() {
+      return this.hasAttribute("selected");
+    }
+    /** Whether to apply the negative styling */
+    get negative() {
+      return d(this, _);
+    }
+    set negative(t) {
+      b(this, _, t);
+    }
+    /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
+    get disabledFromGroup() {
+      return d(this, p);
+    }
+    set disabledFromGroup(t) {
+      b(this, p, t);
+    }
+    get label() {
+      return d(this, m);
+    }
+    set label(t) {
+      b(this, m, t);
+    }
+    /** Disable the highlight of the label. */
+    get disableLabelHighlight() {
+      return d(this, f);
+    }
+    set disableLabelHighlight(t) {
+      b(this, f, t);
+    }
+    /** The portion of the highlighted label. */
+    get _highlightString() {
+      return d(this, v);
+    }
+    set _highlightString(t) {
+      b(this, v, t);
+    }
+    get _inertAriaGroups() {
+      return d(this, A);
+    }
+    set _inertAriaGroups(t) {
+      b(this, A, 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;
+    }
+    /**
+     * @internal
+     */
+    setSelectedViaUserInteraction(t) {
+      this.selected = t, this.selectionChange.emit(), this.selected && this.optionSelected.emit();
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.id || (this.id = `${this.optionId}-${st++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("disabled") && (Z(this, "tabindex", tt && !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();
+    }
+    updateAriaDisabled() {
+      this.disabled || this.disabledFromGroup ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
+    }
+    _updateAriaSelected() {
+      this.setAttribute("aria-selected", `${this.selected}`);
+    }
+    /** @deprecated use onExternalMutation() as replacement. Will be removed with next major change. */
+    onOptionAttributesChange(t) {
+      this.onExternalMutation(t);
+    }
+    /** Observe changes on data attributes + slotted content and set the appropriate values. */
+    onExternalMutation(t) {
+      for (const e of t)
+        if (e.attributeName === "data-group-disabled")
+          this.disabledFromGroup = this.hasAttribute("data-group-disabled"), this.updateAriaDisabled();
+        else if (e.attributeName === "data-negative")
+          this.negative = this.hasAttribute("data-negative");
+        else {
+          this.dispatchEvent(new Event("optionLabelChanged", { bubbles: !0 }));
+          return;
+        }
+    }
+    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 c`${this.label}`;
+      const t = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
+      if (t === -1)
+        return c`${this.label}`;
+      const e = this.label.substring(0, t), i = this.label.substring(t, t + this._highlightString.length), J = this.label.substring(t + this._highlightString.length);
+      return c`
+      <span class="sbb-option__label--highlight">${e}</span><span>${i}</span
+      ><span class="sbb-option__label--highlight">${J}</span>
+    `;
+    }
+    renderIcon() {
+      return c` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
+    }
+    renderLabel() {
+      return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : G;
+    }
+    renderTick() {
+      return G;
+    }
+    render() {
+      return c`
+      <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") ? c` <sbb-screen-reader-only>
+                  (${this.getAttribute("data-group-label")})</sbb-screen-reader-only
+                >` : G}
+          </span>
+          ${this.renderTick()}
+        </div>
+      </div>
+    `;
+    }
+  }, _ = new WeakMap(), p = new WeakMap(), m = new WeakMap(), f = new WeakMap(), v = new WeakMap(), A = new WeakMap(), h = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(L[Symbol.metadata] ?? null) : void 0;
+    y = [X()], C = [X({ type: Boolean })], H = [u()], $ = [u()], F = [u()], O = [u()], M = [u()], B = [u()], o(l, null, y, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+      e.value = i;
+    } }, metadata: t }, null, S), o(l, null, C, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (e) => "selected" in e, set: (e, i) => {
+      e.selected = i;
+    } }, metadata: t }, null, S), o(l, null, H, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (e) => "negative" in e, get: (e) => e.negative, set: (e, i) => {
+      e.negative = i;
+    } }, metadata: t }, k, I), o(l, null, $, { kind: "accessor", name: "disabledFromGroup", static: !1, private: !1, access: { has: (e) => "disabledFromGroup" in e, get: (e) => e.disabledFromGroup, set: (e, i) => {
+      e.disabledFromGroup = i;
+    } }, metadata: t }, z, E), o(l, null, F, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (e) => "label" in e, get: (e) => e.label, set: (e, i) => {
+      e.label = i;
+    } }, metadata: t }, D, N), o(l, null, O, { 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 }, T, w), o(l, null, M, { kind: "accessor", name: "_highlightString", static: !1, private: !1, access: { has: (e) => "_highlightString" in e, get: (e) => e._highlightString, set: (e, i) => {
+      e._highlightString = i;
+    } }, metadata: t }, U, j), o(l, null, B, { kind: "accessor", name: "_inertAriaGroups", static: !1, private: !1, access: { has: (e) => "_inertAriaGroups" in e, get: (e) => e._inertAriaGroups, set: (e, i) => {
+      e._inertAriaGroups = i;
+    } }, metadata: t }, R, q), o(null, s = { value: h }, a, { kind: "class", name: h.name, metadata: t }, null, n), h = s.value, t && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), r(h, n);
+  })(), h;
+})();
+export {
+  mt as SbbOptionBaseElement
+};

package/option/option/option.js

@@ -0,0 +1,95 @@
+import { __esDecorate as h, __runInitializers as u } from "tslib";
+import { css as g, nothing as b, html as r } from "lit";
+import { customElement as v } from "lit/decorators.js";
+import { hostAttributes as m } from "../../core/decorators.js";
+import { EventEmitter as d } from "../../core/eventing.js";
+import { SbbOptionBaseElement as f } from "./option-base-element.js";
+import "../../visual-checkbox.js";
+const _ = g`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-color-milk);--sbb-option-background-color-active: var(--sbb-color-cloud);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-background-color: var(--sbb-color-milk);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke);--sbb-option-background-color-hover: var(--sbb-color-charcoal);--sbb-option-background-color-active: var(--sbb-color-iron);--sbb-option-disabled-border-color: var(--sbb-color-smoke);--sbb-option-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([data-active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}@media (any-hover: hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__container{background-color:var(--sbb-option-background-color)}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);padding-block:var(--sbb-option-padding-block);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}:host([data-active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial;border-radius:var(--sbb-option-border-radius)}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{white-space:initial}`;
+let A = (() => {
+  var o;
+  let p = [v("sbb-option"), m({
+    role: "option"
+  })], l, n = [], i, c = f;
+  var a = (o = class extends c {
+    constructor() {
+      super(...arguments), this.optionId = "sbb-option", this.selectionChange = new d(this, a.events.selectionChange), this.optionSelected = new d(this, a.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 e, s;
+      const t = (e = this.closest) == null ? void 0 : e.call(this, "sbb-optgroup");
+      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.negative = !!((s = this.closest) != null && s.call(
+        this,
+        // :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, e, s;
+      (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (e = this.closest) != null && e.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((s = this.closest) != null && s.call(this, "sbb-select[multiple]"));
+    }
+    handleHighlightState() {
+      if (this._variant !== "autocomplete") {
+        this.updateDisableHighlight(!0);
+        return;
+      }
+      super.handleHighlightState();
+    }
+    renderIcon() {
+      return r`
+      <!-- Icon -->
+      ${this._isMultiple ? b : r` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+
+      <!-- Checkbox -->
+      ${this._isMultiple ? r`
+            <sbb-visual-checkbox
+              ?checked=${this.selected}
+              ?disabled=${this.disabled || this.disabledFromGroup}
+              ?negative=${this.negative}
+            ></sbb-visual-checkbox>
+          ` : b}
+    `;
+    }
+    renderLabel() {
+      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : b;
+    }
+    renderTick() {
+      return this._variant === "select" && !this._isMultiple && this.selected ? r`<sbb-icon name="tick-small"></sbb-icon>` : b;
+    }
+  }, i = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    h(null, l = { value: i }, p, { kind: "class", name: i.name, metadata: t }, null, n), a = i = l.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = _, o.events = {
+    selectionChange: "optionSelectionChange",
+    optionSelected: "optionSelected"
+  }, u(i, n), o);
+  return a = i;
+})();
+export {
+  A as SbbOptionElement
+};

package/option/option.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './option/option.js';
 export * from './option/option-base-element.js';
 //# sourceMappingURL=option.d.ts.map

package/option/option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../src/elements/option/option.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../src/elements/option/option.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC"}