@sbb-esta/lyne-elements 4.0.0-next → 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",
+  "version": "4.0.0-next.2",
   "description": "Lyne Design System",
   "keywords": [
     "design system",

package/paginator/common/paginator-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAItF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AASlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EACL,KAAK,mBAAmB,EAIzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAmC,SAAQ,uCAExE;IACC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAgB,sBAAsB,EAAE,MAAM,CAAC;IAC/C,SAAgB,8BAA8B,EAAE,MAAM,CAAC;IACvD,SAAgB,0BAA0B,EAAE,MAAM,CAAC;IAC5C,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IACpD,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAC5E,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CA6Q5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}
+{"version":3,"file":"paginator-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/common/paginator-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAuB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAItF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AASlE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EACL,KAAK,mBAAmB,EAIzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,CAAC;;AAE1B,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAAmC,SAAQ,uCAExE;IACC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,QAAQ,EAAE,MAAM,CAAC;IACjC,SAAgB,SAAS,EAAE,MAAM,CAAC;IAClC,SAAgB,aAAa,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/C,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAgB,sBAAsB,EAAE,MAAM,CAAC;IAC/C,SAAgB,8BAA8B,EAAE,MAAM,CAAC;IACvD,SAAgB,0BAA0B,EAAE,MAAM,CAAC;IAC5C,QAAQ,IAAI,IAAI;IAChB,YAAY,IAAI,IAAI;IACpB,SAAS,IAAI,IAAI;IACjB,QAAQ,IAAI,IAAI;IAChB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC/B,eAAe,IAAI,OAAO;IAC1B,WAAW,IAAI,OAAO;IACtB,aAAa,IAAI,MAAM;IAC9B,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAE1C,SAAS,CAAC,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IACpD,SAAS,CAAC,aAAa,CAAC,iBAAiB,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAC5E,SAAS,CAAC,qBAAqB,IAAI,cAAc;IACjD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACrD;AAGD,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACtF,YAAY,CAAC,KACZ,mBAAmB,CAAC,kCAAkC,CAAC,GAAG,CAoP5D,CAAC;AAEF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,CAAC;KACjD;CACF"}

package/paginator/common/paginator-common.js

@@ -2,34 +2,34 @@ var K = (a) => {
   throw TypeError(a);
 };
 var Q = (a, n, g) => n.has(a) || K("Cannot " + g);
-var c = (a, n, g) => (Q(a, n, "read from private field"), g ? g.call(a) : n.get(a)), h = (a, n, g) => n.has(a) ? K("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, g), s = (a, n, g, z) => (Q(a, n, "write to private field"), z ? z.call(a, g) : n.set(a, g), g);
+var c = (a, n, g) => (Q(a, n, "read from private field"), g ? g.call(a) : n.get(a)), h = (a, n, g) => n.has(a) ? K("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, g), s = (a, n, g, I) => (Q(a, n, "write to private field"), I ? I.call(a, g) : n.set(a, g), g);
 import { __runInitializers as l, __esDecorate as o } from "tslib";
 import { html as V } from "lit";
 import { property as b } from "lit/decorators.js";
 import { sbbInputModalityDetector as W } from "../../core/a11y/input-modality-detector.js";
 import { SbbLanguageController as X } from "../../core/controllers.js";
-import { forceType as I } from "../../core/decorators.js";
+import { forceType as z } from "../../core/decorators.js";
 import { isLean as Y } from "../../core/dom.js";
 import { i18nPage as Z, i18nPaginatorSelected as C, i18nPreviousPage as ee, i18nNextPage as te } from "../../core/i18n.js";
 import { SbbNegativeMixin as ie, SbbDisabledMixin as ae, SbbElementInternalsMixin as se } from "../../core/mixins.js";
 import "../../button/mini-button.js";
 import "../../button/mini-button-group.js";
 import "../../divider.js";
-const _e = (a) => (() => {
-  var p, d, u, P, x, m, _, y, r;
-  let g = ie(ae(se(a))), z, v = [], f = [], L, S = [], N = [], k, M = [], $ = [], w, E = [], R = [], O, A = [], B = [], D, U = [], j = [], q, T = [], F = [], G, H = [], J = [];
+const me = (a) => (() => {
+  var p, u, d, P, x, _, m, y, r;
+  let g = ie(ae(se(a))), I, f = [], v = [], L, S = [], N = [], k, M = [], $ = [], w, R = [], O = [], B, D = [], U = [], j, q = [], E = [], T, A = [], F = [], G, H = [], J = [];
   return r = class extends g {
     constructor() {
       super(...arguments);
       h(this, p);
-      h(this, d);
       h(this, u);
+      h(this, d);
       h(this, P);
       h(this, x);
-      h(this, m);
       h(this, _);
+      h(this, m);
       h(this, y);
-      s(this, p, l(this, v, 0)), s(this, d, (l(this, f), l(this, S, 10))), s(this, u, (l(this, N), l(this, M, 0))), s(this, P, (l(this, $), l(this, E, "start"))), s(this, x, (l(this, R), l(this, A, Y() ? "s" : "m"))), s(this, m, (l(this, B), l(this, U, ""))), s(this, _, (l(this, j), l(this, T, ""))), s(this, y, (l(this, F), l(this, H, ""))), this.language = (l(this, J), new X(this));
+      s(this, p, l(this, f, 0)), s(this, u, (l(this, v), l(this, S, 10))), s(this, d, (l(this, N), l(this, M, 0))), s(this, P, (l(this, $), l(this, R, "start"))), s(this, x, (l(this, O), l(this, D, Y() ? "s" : "m"))), s(this, _, (l(this, U), l(this, q, ""))), s(this, m, (l(this, E), l(this, A, ""))), s(this, y, (l(this, F), l(this, H, ""))), this.language = (l(this, J), new X(this));
     }
     /** Total number of items. */
     get length() {
@@ -40,17 +40,17 @@ const _e = (a) => (() => {
     }
     /** Number of items per page. */
     get pageSize() {
-      return c(this, d);
+      return c(this, u);
     }
     set pageSize(t) {
-      s(this, d, t);
+      s(this, u, t);
     }
     /** Current page index. */
     get pageIndex() {
-      return c(this, u);
+      return c(this, d);
     }
     set pageIndex(t) {
-      s(this, u, t);
+      s(this, d, t);
     }
     /** Position of the prev/next buttons. */
     get pagerPosition() {
@@ -74,20 +74,20 @@ const _e = (a) => (() => {
      * Can be set for cases like a carousel, where `slide` or `image` fits better.
      */
     get accessibilityPageLabel() {
-      return c(this, m);
+      return c(this, _);
     }
     set accessibilityPageLabel(t) {
-      s(this, m, t);
+      s(this, _, t);
     }
     /**
      * Accessibility label for the previous page. Defaults to `previous page`.
      * Can be set for cases like a carousel, where `slide` or `image` fits better.
      */
     get accessibilityPreviousPageLabel() {
-      return c(this, _);
+      return c(this, m);
     }
     set accessibilityPreviousPageLabel(t) {
-      s(this, _, t);
+      s(this, m, t);
     }
     /**
      * Accessibility label for the next page. Defaults to `next page`.
@@ -104,9 +104,9 @@ const _e = (a) => (() => {
       let e = null;
       if (t.has("length") && this.length !== t.get("length") && (this.length = isNaN(this.length) || this.length < 0 ? 0 : this.length, this.pageIndex = this._coercePageIndexInRange(this.pageIndex)), t.has("pageSize") && this.pageSize !== t.get("pageSize")) {
         const i = t.get("pageSize");
-        this.pageSize = isNaN(this.pageSize) || this.pageSize < 0 ? 0 : this.pageSize, i && (this.pageIndex = Math.floor(this.pageIndex * i / this.pageSize) || 0), e = this.pageIndex;
+        this.pageSize = isNaN(this.pageSize) || this.pageSize < 0 ? 0 : this.pageSize, i && !t.has("pageIndex") && (this.pageIndex = Math.floor(this.pageIndex * i / this.pageSize) || 0), e = this.pageIndex;
       }
-      t.has("pageIndex") && this.pageIndex !== t.get("pageIndex") && (this.pageIndex = this._coercePageIndexInRange(this.pageIndex), e = t.get("pageIndex")), e !== null && this._emitPrivatePageEvent(e);
+      t.has("pageIndex") && this.pageIndex !== t.get("pageIndex") && (this.pageIndex = this._coercePageIndexInRange(this.pageIndex), e = t.get("pageIndex")), e !== null && this._emitPageEvent(e);
     }
     updated(t) {
       super.updated(t), this.shadowRoot.querySelector("sbb-screen-reader-only#status").textContent = this._currentPageLabel();
@@ -118,10 +118,6 @@ const _e = (a) => (() => {
     _currentPageLabel() {
       return `${this.accessibilityPageLabel ? this.accessibilityPageLabel : Z[this.language.current]} ${this.pageIndex + 1} ${C[this.language.current]}.`;
     }
-    changeAndEmitPage(t) {
-      const e = this.pageIndex;
-      this.pageIndex = t, this.emitPageEvent(e);
-    }
     /** Advances to the next page if it exists. */
     nextPage() {
       this.pageIndex = this.pageIndex + 1;
@@ -158,20 +154,8 @@ const _e = (a) => (() => {
     numberOfPages() {
       return this.pageSize ? Math.ceil(this.length / this.pageSize) : 0;
     }
-    emitPageEvent(t, e) {
-      this.dispatchEvent(new CustomEvent("page", {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          previousPageIndex: t,
-          pageIndex: e ?? this.pageIndex,
-          length: this.length,
-          pageSize: this.pageSize
-        }
-      }));
-    }
-    _emitPrivatePageEvent(t) {
-      this.hasUpdated && this.dispatchEvent(new CustomEvent("ɵpage", {
+    _emitPageEvent(t) {
+      this.hasUpdated && this.dispatchEvent(new CustomEvent("page", {
         bubbles: !0,
         composed: !0,
         detail: {
@@ -191,7 +175,7 @@ const _e = (a) => (() => {
             icon-name="chevron-small-left-small"
             ?disabled=${this.disabled || !this.hasPreviousPage()}
             @click=${() => {
-        this.changeAndEmitPage(this.pageIndex - 1), !this.hasPreviousPage() && W.mostRecentModality === "keyboard" && this.shadowRoot?.getElementById("sbb-paginator-next-page").focus();
+        this.previousPage(), !this.hasPreviousPage() && W.mostRecentModality === "keyboard" && this.shadowRoot?.getElementById("sbb-paginator-next-page").focus();
       }}
           ></sbb-mini-button>
           <sbb-divider orientation="vertical"></sbb-divider>
@@ -201,7 +185,7 @@ const _e = (a) => (() => {
             icon-name="chevron-small-right-small"
             ?disabled=${this.disabled || !this.hasNextPage()}
             @click=${() => {
-        this.changeAndEmitPage(this.pageIndex + 1), !this.hasNextPage() && W.mostRecentModality === "keyboard" && this.shadowRoot?.getElementById("sbb-paginator-prev-page").focus();
+        this.nextPage(), !this.hasNextPage() && W.mostRecentModality === "keyboard" && this.shadowRoot?.getElementById("sbb-paginator-prev-page").focus();
       }}
           ></sbb-mini-button>
         </sbb-mini-button-group>
@@ -213,27 +197,27 @@ const _e = (a) => (() => {
         <sbb-screen-reader-only id="status" role="status"></sbb-screen-reader-only>
       `;
     }
-  }, p = new WeakMap(), d = new WeakMap(), u = new WeakMap(), P = new WeakMap(), x = new WeakMap(), m = new WeakMap(), _ = new WeakMap(), y = new WeakMap(), (() => {
+  }, p = new WeakMap(), u = new WeakMap(), d = new WeakMap(), P = new WeakMap(), x = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), y = new WeakMap(), (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    z = [I(), b({ type: Number })], L = [I(), b({ attribute: "page-size", type: Number })], k = [I(), b({ attribute: "page-index", type: Number })], w = [b({ attribute: "pager-position", reflect: !0 })], O = [b({ reflect: !0 })], D = [I(), b({ attribute: "accessibility-page-label" })], q = [I(), b({ attribute: "accessibility-previous-page-label" })], G = [I(), b({ attribute: "accessibility-next-page-label" })], o(r, null, z, { kind: "accessor", name: "length", static: !1, private: !1, access: { has: (e) => "length" in e, get: (e) => e.length, set: (e, i) => {
+    I = [z(), b({ type: Number })], L = [z(), b({ attribute: "page-size", type: Number })], k = [z(), b({ attribute: "page-index", type: Number })], w = [b({ attribute: "pager-position", reflect: !0 })], B = [b({ reflect: !0 })], j = [z(), b({ attribute: "accessibility-page-label" })], T = [z(), b({ attribute: "accessibility-previous-page-label" })], G = [z(), b({ attribute: "accessibility-next-page-label" })], o(r, null, I, { kind: "accessor", name: "length", static: !1, private: !1, access: { has: (e) => "length" in e, get: (e) => e.length, set: (e, i) => {
       e.length = i;
-    } }, metadata: t }, v, f), o(r, null, L, { kind: "accessor", name: "pageSize", static: !1, private: !1, access: { has: (e) => "pageSize" in e, get: (e) => e.pageSize, set: (e, i) => {
+    } }, metadata: t }, f, v), o(r, null, L, { kind: "accessor", name: "pageSize", static: !1, private: !1, access: { has: (e) => "pageSize" in e, get: (e) => e.pageSize, set: (e, i) => {
       e.pageSize = i;
     } }, metadata: t }, S, N), o(r, null, k, { kind: "accessor", name: "pageIndex", static: !1, private: !1, access: { has: (e) => "pageIndex" in e, get: (e) => e.pageIndex, set: (e, i) => {
       e.pageIndex = i;
     } }, metadata: t }, M, $), o(r, null, w, { kind: "accessor", name: "pagerPosition", static: !1, private: !1, access: { has: (e) => "pagerPosition" in e, get: (e) => e.pagerPosition, set: (e, i) => {
       e.pagerPosition = i;
-    } }, metadata: t }, E, R), o(r, null, O, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
+    } }, metadata: t }, R, O), o(r, null, B, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
       e.size = i;
-    } }, metadata: t }, A, B), o(r, null, D, { kind: "accessor", name: "accessibilityPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityPageLabel" in e, get: (e) => e.accessibilityPageLabel, set: (e, i) => {
+    } }, metadata: t }, D, U), o(r, null, j, { kind: "accessor", name: "accessibilityPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityPageLabel" in e, get: (e) => e.accessibilityPageLabel, set: (e, i) => {
       e.accessibilityPageLabel = i;
-    } }, metadata: t }, U, j), o(r, null, q, { kind: "accessor", name: "accessibilityPreviousPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityPreviousPageLabel" in e, get: (e) => e.accessibilityPreviousPageLabel, set: (e, i) => {
+    } }, metadata: t }, q, E), o(r, null, T, { kind: "accessor", name: "accessibilityPreviousPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityPreviousPageLabel" in e, get: (e) => e.accessibilityPreviousPageLabel, set: (e, i) => {
       e.accessibilityPreviousPageLabel = i;
-    } }, metadata: t }, T, F), o(r, null, G, { kind: "accessor", name: "accessibilityNextPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityNextPageLabel" in e, get: (e) => e.accessibilityNextPageLabel, set: (e, i) => {
+    } }, metadata: t }, A, F), o(r, null, G, { kind: "accessor", name: "accessibilityNextPageLabel", static: !1, private: !1, access: { has: (e) => "accessibilityNextPageLabel" in e, get: (e) => e.accessibilityNextPageLabel, set: (e, i) => {
       e.accessibilityNextPageLabel = i;
     } }, metadata: t }, H, J), t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), r.role = "group", r;
 })();
 export {
-  _e as SbbPaginatorCommonElementMixin
+  me as SbbPaginatorCommonElementMixin
 };

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compact-paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/compact-paginator/compact-paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;;AAErC;;GAEG;AACH,qBAEM,0BAA2B,SAAQ,+BAA0C;IACjF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAG1C;IAEX,OAAO,CAAC,kBAAkB;cAiBP,eAAe,IAAI,cAAc;CASrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
+{"version":3,"file":"compact-paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/compact-paginator/compact-paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAUvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;;AAErC;;GAEG;AACH,qBAEM,0BAA2B,SAAQ,+BAA0C;IACjF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,OAAO,CAAC,kBAAkB;cAiBP,eAAe,IAAI,cAAc;CASrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

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);
@@ -39,8 +39,7 @@ let N = (() => {
     const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
     b(null, i = { value: e }, n, { kind: "class", name: e.name, metadata: s }, null, r), e = i.value, s && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
   })(), t.styles = [u, f], t.events = {
-    page: "page",
-    ɵpage: "ɵpage"
+    page: "page"
   }, c(e, r), e;
 })();
 export {

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.
  */
@@ -32,12 +32,6 @@ export declare class SbbPaginatorElement extends SbbPaginatorElement_base {
     /** Creates an array of consecutive numbers given the length and the starting value. */
     private _range;
     private _handleKeyUp;
-    /**
-     * A `pageSize` change would trigger a `pageIndex` change via `willUpdate`;
-     * this triggers a `ɵpage` event, but it's late for the `page` event,
-     * so the checks on the `pageIndex` changes are done here, and possibly the event is emitted.
-     */
-    private _setPageSizeFromSizeOptionsSelect;
     private _renderItemPerPageTemplate;
     private _renderPageNumbers;
     protected renderPaginator(): TemplateResult;

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

@@ -1 +1 @@
-{"version":3,"file":"paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;GAEG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAG1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB;;;OAGG;IACH,SAEgB,8BAA8B,EAAE,MAAM,CAAM;IAE5D,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAezE,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAWpB;;;;OAIG;IACH,OAAO,CAAC,iCAAiC;IAUzC,OAAO,CAAC,0BAA0B;IAoClC,OAAO,CAAC,kBAAkB;cAmCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
+{"version":3,"file":"paginator.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/paginator/paginator/paginator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6BAA6B,CAAC;;AAIrC;;GAEG;AACH,qBAEM,mBAAoB,SAAQ,wBAA0C;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1C;IAEX,wCAAwC;IACxC,SACgB,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/C;;;OAGG;IACH,SAAmF,aAAa,EAC5F,OAAO,GACP,KAAK,CAAW;IAEpB;;;OAGG;IACH,SAEgB,8BAA8B,EAAE,MAAM,CAAM;IAE5D,OAAO,CAAC,aAAa,CAAuB;cAEzB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAezE,2CAA2C;IAC3C,OAAO,CAAC,gBAAgB;IAIxB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IA2B7B,uFAAuF;IACvF,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,0BAA0B;IAkClC,OAAO,CAAC,kBAAkB;cAmCP,eAAe,IAAI,cAAc;CAiBrD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}