@sbb-esta/lyne-elements 4.0.0-next.1 → 4.0.0-next.2

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

@@ -7,34 +7,34 @@ 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 m, nothing as G } from "lit";
 import { property as P, state as v } from "lit/decorators.js";
-import { isSafari as K, setOrRemoveAttribute as O, isAndroid as Q } from "../../core/dom.js";
-import { SbbDisabledMixin as W, SbbElementInternalsMixin as Y, SbbHydrationMixin as Z } from "../../core/mixins.js";
-import { SbbIconNameMixin as B } from "../../icon.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 tt = 0;
-const S = K, et = {
+let et = 0;
+const S = K, it = {
   attributeFilter: ["data-group-disabled", "data-negative"],
   attributes: !0,
   childList: !0,
   subtree: !0,
   characterData: !0
 };
-let ct = (() => {
-  var c, u, b, _, p, f, l;
-  let s = W(B(Y(Z(J)))), a = [], r, A, x, L = [], y = [], H, k = [], C = [], I, $ = [], z = [], F, N = [], w = [], D, E = [], M = [], T, U = [], j = [];
+let ut = (() => {
+  var c, u, b, p, _, f, l;
+  let s = Y(tt(Z(B(J)))), a = [], r, A, x, L = [], y = [], H, k = [], C = [], I, $ = [], z = [], F, N = [], w = [], D, E = [], M = [], T, U = [], j = [];
   return l = class extends s {
     constructor() {
       super();
       g(this, c);
       g(this, u);
       g(this, b);
-      g(this, _);
       g(this, p);
+      g(this, _);
       g(this, f);
-      this._value = (n(this, a), null), h(this, c, n(this, L, !1)), h(this, u, (n(this, y), n(this, k, !1))), h(this, b, (n(this, C), n(this, $, void 0))), h(this, _, (n(this, z), n(this, N, !1))), h(this, p, (n(this, w), n(this, E, null))), h(this, f, (n(this, M), 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, L, !1)), h(this, u, (n(this, y), n(this, k, !1))), h(this, b, (n(this, C), n(this, $, void 0))), h(this, p, (n(this, z), n(this, N, !1))), h(this, _, (n(this, w), n(this, E, null))), h(this, f, (n(this, M), n(this, U, !1))), n(this, j), this.addEventListener?.("click", (t) => this.selectByClick(t), {
         passive: !0
       }), this.addController(new X(this, {
-        config: et,
+        config: it,
         callback: (t) => this.onExternalMutation(t)
       })), S && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = S) : this._inertAriaGroups = S);
     }
@@ -79,17 +79,17 @@ let ct = (() => {
     }
     /** Disable the highlight of the label. */
     get disableLabelHighlight() {
-      return d(this, _);
+      return d(this, p);
     }
     set disableLabelHighlight(t) {
-      h(this, _, t);
+      h(this, p, t);
     }
     /** The portion of the highlighted label. */
     get _highlightString() {
-      return d(this, p);
+      return d(this, _);
     }
     set _highlightString(t) {
-      h(this, p, t);
+      h(this, _, t);
     }
     get _inertAriaGroups() {
       return d(this, f);
@@ -112,7 +112,7 @@ let ct = (() => {
       this.selected = t, this.selected && this.dispatchEvent(new Event("optionselected", { bubbles: !0, composed: !0 }));
     }
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `${this.optionId}-${tt++}`, this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
+      super.connectedCallback(), this.id ||= `${this.optionId}-${et++}`, this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
     }
     willUpdate(t) {
       super.willUpdate(t), t.has("disabled") && (O(this, "tabindex", Q && !this.disabled && 0), this.updateAriaDisabled());
@@ -167,7 +167,7 @@ let ct = (() => {
     `;
     }
     renderIcon() {
-      return m` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
+      return m`<span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
     }
     renderLabel() {
       return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : G;
@@ -182,7 +182,17 @@ let ct = (() => {
           ${this.renderIcon()}
           <span class="sbb-option__label">
             <slot @slotchange=${this.handleHighlightState}></slot>
-            ${this.renderLabel()}
+            <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" : G}
+            >
+              ${this.renderLabel()}
+            </span>
             ${this._inertAriaGroups && this.getAttribute("data-group-label") ? m`<sbb-screen-reader-only>
                   (${this.getAttribute("data-group-label")})</sbb-screen-reader-only
                 >` : G}
@@ -192,7 +202,7 @@ let ct = (() => {
       </div>
     `;
     }
-  }, c = new WeakMap(), u = new WeakMap(), b = new WeakMap(), _ = new WeakMap(), p = new WeakMap(), f = new WeakMap(), (() => {
+  }, c = new WeakMap(), u = new WeakMap(), b = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), f = new WeakMap(), (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
     r = [P()], A = [P({ type: Boolean })], x = [v()], H = [v()], I = [v()], F = [v()], D = [v()], T = [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;
@@ -216,5 +226,5 @@ let ct = (() => {
   }, l;
 })();
 export {
-  ct as SbbOptionBaseElement
+  ut as SbbOptionBaseElement
 };

package/option/option/option.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAKpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;GAQG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAChE,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAgC,MAAM;;;MAG3B;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,OAAO,KAAK,QAAQ,QAInB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,QAEtB;IACD,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAgBxC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;cAc7B,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;cAMjD,IAAI,IAAI,IAAI;IAS/B,OAAO,CAAC,oBAAoB;cAST,oBAAoB,IAAI,IAAI;cAS5B,UAAU,IAAI,cAAc;cAoB5B,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;cAM9C,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;CAKjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,KAAK,CAAC;KAC9B;CACF"}
+{"version":3,"file":"option.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAKpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEhE;;;;;;;;GAQG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAChE,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAgC,MAAM;;;MAG3B;IAEX,SAAS,CAAC,QAAQ,SAAgB;IAElC,OAAO,KAAK,QAAQ,QAInB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,WAAW,QAEtB;IACD,OAAO,KAAK,WAAW,GAEtB;IAED,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAgBxC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;cAc7B,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;cAMjD,IAAI,IAAI,IAAI;IAS/B,OAAO,CAAC,oBAAoB;cAST,oBAAoB,IAAI,IAAI;cAS5B,UAAU,IAAI,cAAc;cAoB5B,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;cAO9C,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;CAKjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,KAAK,CAAC;KAC9B;CACF"}

package/option/option/option.component.js

@@ -4,11 +4,11 @@ import { customElement as p } from "lit/decorators.js";
 import { boxSizingStyles as u } from "../../core/styles.js";
 import { SbbOptionBaseElement as h } from "./option-base-element.js";
 import "../../visual-checkbox.js";
-const g = d`: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([data-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([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: var(--sbb-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([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}: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);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([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(: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)}`;
+const v = d`: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([data-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([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: var(--sbb-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([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}: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-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([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(: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 y = (() => {
   var o;
-  let n = [p("sbb-option")], a, b = [], i, r = h;
-  return o = class extends r {
+  let n = [p("sbb-option")], a, r = [], i, b = h;
+  return o = class extends b {
     constructor() {
       super(...arguments), this.optionId = "sbb-option";
     }
@@ -70,18 +70,18 @@ let y = (() => {
     `;
     }
     renderLabel() {
-      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : e;
+      return this._variant !== "autocomplete" ? e : super.renderLabel();
     }
     renderTick() {
       return this._variant === "select" && !this._isMultiple && this.selected ? s`<sbb-icon name="tick-small"></sbb-icon>` : e;
     }
   }, i = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    l(null, a = { value: i }, n, { kind: "class", name: i.name, metadata: t }, null, b), i = a.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.role = "option", o.styles = [u, g], o.events = {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    l(null, a = { value: i }, n, { kind: "class", name: i.name, metadata: t }, null, r), i = a.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "option", o.styles = [u, v], o.events = {
     optionselectionchange: "optionselectionchange",
     optionselected: "optionselected"
-  }, c(i, b), i;
+  }, c(i, r), i;
 })();
 export {
   y as SbbOptionElement

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

@@ -1,13 +1,13 @@
 import { __esDecorate as b, __runInitializers as l } from "tslib";
 import { css as r, LitElement as p, html as c } from "lit";
-import { customElement as d } from "lit/decorators.js";
-import { SbbNegativeMixin as m } from "../../core/mixins.js";
+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-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);color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color)}`;
+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)}`;
 let _ = (() => {
-  var o;
-  let a = [d("sbb-option-hint")], n, s = [], t, e = m(p);
-  return o = class extends e {
+  var i;
+  let a = [m("sbb-option-hint")], n, s = [], t, e = d(p);
+  return i = class extends e {
     render() {
       return c`
       <div class="sbb-option-hint__wrapper">
@@ -18,10 +18,10 @@ let _ = (() => {
       </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;
+  }, t = i, (() => {
+    const o = 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: o }, null, s), t = n.value, o && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), i.styles = [v, h], l(t, s), t;
 })();
 export {
   _ as SbbOptionHintElement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "4.0.0-next.1",
+  "version": "4.0.0-next.2",
   "description": "Lyne Design System",
   "keywords": [
     "design system",

package/paginator/compact-paginator/compact-paginator.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-declare const SbbCompactPaginatorElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbPaginatorCommonElementMixinType> & typeof LitElement;
+declare const SbbCompactPaginatorElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.js').SbbPaginatorCommonElementMixinType> & typeof LitElement;
 /**
  * It displays a paginator component in compact mode.
  */

package/paginator/compact-paginator/compact-paginator.component.js

@@ -7,7 +7,7 @@ import { boxSizingStyles as u } from "../../core/styles.js";
 import { SbbPaginatorCommonElementMixin as v } from "../common.js";
 import "../../divider.js";
 import "../../screen-reader-only.js";
-const f = l`:host{display:block;--sbb-compact-paginator-height: var(--sbb-size-element-m);--sbb-compact-paginator-color: var(--sbb-color-metal);--sbb-compact-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-paginator-compact-justify-content: start}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-compact-paginator{display:flex;gap:var(--sbb-spacing-fixed-5x);justify-content:var(--sbb-paginator-compact-justify-content);min-height:var(--sbb-compact-paginator-height)}.sbb-paginator__pages{--sbb-text-font-size: var(--sbb-font-size-text-m);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;justify-content:center;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`;
+const f = l`:host{display:block;--sbb-compact-paginator-height: var(--sbb-size-element-m);--sbb-compact-paginator-color: var(--sbb-color-metal);--sbb-compact-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-paginator-compact-justify-content: start}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-compact-paginator{display:flex;gap:var(--sbb-spacing-fixed-5x);justify-content:var(--sbb-paginator-compact-justify-content);min-height:var(--sbb-compact-paginator-height)}.sbb-paginator__pages{--sbb-text-font-size: var(--sbb-text-font-size-m);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;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`;
 let N = (() => {
   var t;
   let n = [m("sbb-compact-paginator")], i, r = [], e, o = v(p);

package/paginator/paginator/paginator.component.d.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-declare const SbbPaginatorElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbPaginatorCommonElementMixinType> & typeof LitElement;
+declare const SbbPaginatorElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.js').SbbPaginatorCommonElementMixinType> & typeof LitElement;
 /**
  * It displays a paginator component.
  */

package/paginator/paginator/paginator.component.js

@@ -16,7 +16,7 @@ import "../../form-field.js";
 import "../../select.js";
 import "../../option.js";
 import "../../screen-reader-only.js";
-const R = F`:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: var(--sbb-cursor-pointer);--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-5);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--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;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__page-size-options sbb-select{--sbb-text-font-size: var(--sbb-font-size-text-m);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);color:var(--sbb-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--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);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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);position:relative;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-3);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-border-color-2)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-3-negative);--sbb-paginator-page-border-color: var(--sbb-border-color-2-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-5);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-border-color-5);--sbb-paginator-page-background-color: var(--sbb-background-color-3);--sbb-paginator-page-cursor: var(--sbb-cursor-default)}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-5);--sbb-paginator-page-background-color: var(--sbb-background-color-3-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media(any-hover:hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-background-color-3);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-background-color-3-negative)}}@media(any-hover:hover)and (forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-3);--sbb-paginator-page-background-color: var(--sbb-background-color-4);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-3-negative);--sbb-paginator-page-background-color: var(--sbb-background-color-4-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, m = 3;
+const R = F`:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-cursor: var(--sbb-cursor-pointer);--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-5);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--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);display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__page-size-options sbb-select{--sbb-text-font-size: var(--sbb-text-font-size-m);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-form-field-text-color);font-size:var(--sbb-form-field-input-text-size);padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--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;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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;cursor:var(--sbb-paginator-page-cursor);outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-3);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-border-color-2)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-3-negative);--sbb-paginator-page-border-color: var(--sbb-border-color-2-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-5);--sbb-paginator-page-border-style: dashed;--sbb-paginator-page-border-color: var(--sbb-border-color-5);--sbb-paginator-page-background-color: var(--sbb-background-color-3);--sbb-paginator-page-cursor: var(--sbb-cursor-default)}.sbb-paginator__page--number-item:disabled:not([data-selected]){--sbb-paginator-page-border-width: var(--sbb-border-width-1x)}:host([negative]) .sbb-paginator__page--number-item:disabled{--sbb-paginator-page-color: var(--sbb-color-5);--sbb-paginator-page-background-color: var(--sbb-background-color-3-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item:disabled{--sbb-paginator-page-border-color: GrayText;--sbb-paginator-page-color: GrayText;--sbb-paginator-page-background-color: Canvas}}@media(any-hover:hover){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-background-color-3);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: var(--sbb-background-color-3-negative)}}@media(any-hover:hover)and (forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-3);--sbb-paginator-page-background-color: var(--sbb-background-color-4);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-color: var(--sbb-color-3-negative);--sbb-paginator-page-background-color: var(--sbb-background-color-4-negative)}@media(forced-colors:active){.sbb-paginator__page--number-item:not(:disabled):active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, m = 3;
 let se = (() => {
   var l, c, d, s;
   let t = [D("sbb-paginator")], i, r = [], o, f = H(T), y, x = [], P = [], z, w = [], k = [], I, S = [], $ = [];

package/radio-button/common.js

@@ -1,5 +1,5 @@
 import { SbbRadioButtonCommonElementMixin as m } from "./common/radio-button-common.js";
-import { r } from "../radio-button-common-BT3VkZLM.js";
+import { r } from "../radio-button-common-chJrmIBn.js";
 export {
   m as SbbRadioButtonCommonElementMixin,
   r as radioButtonCommonStyle

package/radio-button/radio-button/radio-button.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbRadioButtonSize } from '../common.js';
-declare const SbbRadioButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & typeof LitElement;
+declare const SbbRadioButtonElement_base: import('../../core/mixins.ts').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & typeof LitElement;
 /**
  * It displays a radio button enhanced with the SBB Design.
  *

package/radio-button-common-chJrmIBn.js

@@ -0,0 +1,5 @@
+import { css as o } from "lit";
+const t = o`:host{--sbb-radio-button-label-color: var(--sbb-color-3);--sbb-radio-button-background-color: var(--sbb-background-color-1);--sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-border-color-5);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: var(--sbb-cursor-pointer);--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2 )}@media(forced-colors:active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-primary);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media(forced-colors:active){:host([data-checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host(:disabled){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));--sbb-radio-button-background-color: var(--sbb-background-color-3);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);--sbb-radio-button-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:disabled){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}:host(:disabled[data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-background-color-2-inverted)}:host([size=xs]){--sbb-radio-button-dimension: 1.25rem}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-radio-button{display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;--sbb-text-font-size: var(--sbb-text-font-size-m);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)}:host([size=s]) .sbb-radio-button{--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)}:host([size=xs]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-text-font-size-xs);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)}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media(forced-colors:active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
+export {
+  t as r
+};

package/radio-button.js

@@ -2,7 +2,7 @@ import { SbbRadioButtonElement as e } from "./radio-button/radio-button/radio-bu
 import { SbbRadioButtonGroupElement as n } from "./radio-button/radio-button-group/radio-button-group.component.js";
 import { SbbRadioButtonPanelElement as b } from "./radio-button/radio-button-panel/radio-button-panel.component.js";
 import { SbbRadioButtonCommonElementMixin as i } from "./radio-button/common/radio-button-common.js";
-import { r as p } from "./radio-button-common-BT3VkZLM.js";
+import { r as p } from "./radio-button-common-chJrmIBn.js";
 export {
   i as SbbRadioButtonCommonElementMixin,
   e as SbbRadioButtonElement,