@sbb-esta/lyne-elements 3.7.0 → 3.9.0

package/card/card-badge/card-badge.component.js

@@ -1,28 +1,28 @@
-var m = (e) => {
+var u = (e) => {
   throw TypeError(e);
 };
-var u = (e, a, r) => a.has(e) || m("Cannot " + r);
-var h = (e, a, r) => (u(e, a, "read from private field"), r ? r.call(e) : a.get(e)), f = (e, a, r) => a.has(e) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, r), i = (e, a, r, t) => (u(e, a, "write to private field"), t ? t.call(e, r) : a.set(e, r), r);
-import { __runInitializers as l, __esDecorate as v } from "tslib";
-import { css as _, LitElement as k, html as y } from "lit";
-import { customElement as w, property as E } from "lit/decorators.js";
+var m = (e, a, r) => a.has(e) || u("Cannot " + r);
+var f = (e, a, r) => (m(e, a, "read from private field"), r ? r.call(e) : a.get(e)), h = (e, a, r) => a.has(e) ? u("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, r), c = (e, a, r, t) => (m(e, a, "write to private field"), t ? t.call(e, r) : a.set(e, r), r);
+import { __runInitializers as d, __esDecorate as v } from "tslib";
+import { css as k, LitElement as _, html as y } from "lit";
+import { customElement as E, property as w } from "lit/decorators.js";
 import { SbbElementInternalsMixin as z } from "../../core/mixins.js";
-const S = _`*,:before,:after{box-sizing:border-box}:host{--sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);display:block}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-charcoal);--sbb-card-badge-background-color: var(--sbb-color-white);--sbb-card-badge-border-color: var(--sbb-color-aluminium)}:host([color=charcoal]){--sbb-card-badge-color: var(--sbb-color-white);--sbb-card-badge-background-color: var(--sbb-color-charcoal);--sbb-card-badge-border-color: transparent}.sbb-card-badge-wrapper{display:flex;position:relative;height:fit-content;justify-content:end}@media (forced-colors: active){.sbb-card-badge-wrapper:after{content:"";display:block;position:absolute;inset:0;border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-card-badge{position:relative;display:flex;inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x)}.sbb-card-badge-content{--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);font-weight:700;position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{content:"";display:block;position:absolute;inset:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-border-radius-4x);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:skew(16deg)}:host(:dir(rtl)) .sbb-card-badge-background{transform:skew(-16deg)}.sbb-card-badge-background:before{content:"";display:block;position:absolute;inset:0;border-block-end:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-border-radius-4x)}@media (forced-colors: active){.sbb-card-badge-background:before{border:none}}`;
+const S = k`*,:before,:after{box-sizing:border-box}:host{--sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);--sbb-card-badge-color: var(--sbb-color-2-inverted);--sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);--sbb-card-badge-border-color: transparent;display:block}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-3);--sbb-card-badge-background-color: var(--sbb-background-color-1);--sbb-card-badge-border-color: var(--sbb-color-aluminium);--sbb-card-badge-border-color: light-dark( var(--sbb-color-aluminium), var(--sbb-color-anthracite) )}.sbb-card-badge-wrapper{display:flex;position:relative;height:fit-content;justify-content:end}@media (forced-colors: active){.sbb-card-badge-wrapper:after{content:"";display:block;position:absolute;inset:0;border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-card-badge{position:relative;display:flex;inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x)}.sbb-card-badge-content{--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);font-weight:700;position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{content:"";display:block;position:absolute;inset:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-border-radius-4x);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:skew(16deg)}:host(:dir(rtl)) .sbb-card-badge-background{transform:skew(-16deg)}.sbb-card-badge-background:before{content:"";display:block;position:absolute;inset:0;border-block-end:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-border-radius-4x)}@media (forced-colors: active){.sbb-card-badge-background:before{border:none}}`;
 let T = (() => {
   var o, s;
-  let e = [w("sbb-card-badge")], a, r = [], t, n = z(k), d, g = [], p = [];
+  let e = [E("sbb-card-badge")], a, r = [], t, n = z(_), l, g = [], p = [];
   return s = class extends n {
     constructor() {
       super(...arguments);
-      f(this, o);
-      i(this, o, l(this, g, "charcoal")), this._parentElement = l(this, p);
+      h(this, o);
+      c(this, o, d(this, g, "charcoal")), this._parentElement = d(this, p);
     }
     /** Color of the card badge. */
     get color() {
-      return h(this, o);
+      return f(this, o);
     }
     set color(b) {
-      i(this, o, b);
+      c(this, o, b);
     }
     connectedCallback() {
       super.connectedCallback(), this.slot ||= "badge", this._parentElement = this.parentElement, this._parentElement && this._parentElement.toggleAttribute("data-has-card-badge", !0);
@@ -44,10 +44,10 @@ let T = (() => {
     }
   }, o = new WeakMap(), t = s, (() => {
     const b = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    d = [E({ reflect: !0 })], v(s, null, d, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (c) => "color" in c, get: (c) => c.color, set: (c, x) => {
-      c.color = x;
+    l = [w({ reflect: !0 })], v(s, null, l, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, x) => {
+      i.color = x;
     } }, metadata: b }, g, p), v(null, a = { value: t }, e, { kind: "class", name: t.name, metadata: b }, null, r), t = a.value, b && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: b });
-  })(), s.role = "text", s.styles = S, l(t, r), t;
+  })(), s.role = "text", s.styles = S, d(t, r), t;
 })();
 export {
   T as SbbCardBadgeElement

package/carousel/carousel/carousel.component.d.ts

@@ -15,6 +15,7 @@ export declare class SbbCarouselElement extends SbbCarouselElement_base {
     private _paginator;
     private _abortController;
     private _language;
+    private _requestedPageIndexByPaginator;
     constructor();
     connectedCallback(): void;
     firstUpdated(_changedProperties: PropertyValues): void;

package/carousel/carousel/carousel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/carousel/carousel/carousel.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAmBvC,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,kBAAmB,SAAQ,uBAAoC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;OAEG;IACH,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,OAAO,CAAC,UAAU,CAA2C;IAC7D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,SAAS,CAAmC;;IAepC,iBAAiB,IAAI,IAAI;IAOzB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQtD,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,mBAAmB;cAQR,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
+{"version":3,"file":"carousel.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/carousel/carousel/carousel.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAmBvC,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,kBAAmB,SAAQ,uBAAoC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;OAEG;IACH,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,OAAO,CAAC,UAAU,CAA2C;IAC7D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,8BAA8B,CAAM;;IAwB5B,iBAAiB,IAAI,IAAI;IAOzB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQtD,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,mBAAmB;cAiBR,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/carousel/carousel/carousel.component.js

@@ -1,36 +1,36 @@
-var m = (a) => {
+var v = (a) => {
   throw TypeError(a);
 };
-var p = (a, s, t) => s.has(a) || m("Cannot " + t);
-var f = (a, s, t) => (p(a, s, "read from private field"), t ? t.call(a) : s.get(a)), w = (a, s, t) => s.has(a) ? m("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, t), d = (a, s, t, o) => (p(a, s, "write to private field"), o ? o.call(a, t) : s.set(a, t), t);
-import { __esDecorate as _, __runInitializers as c } from "tslib";
-import { css as y, LitElement as x, html as S } from "lit";
-import { customElement as C, property as k } from "lit/decorators.js";
-import { SbbLanguageController as A } from "../../core/controllers/language-controller.js";
-import { forceType as E } from "../../core/decorators.js";
-import { i18nNextSlide as I, i18nPreviousSlide as L, i18nSlide as P, i18nCarouselArrowsNavigationHint as z } from "../../core/i18n/i18n.js";
-import { SbbElementInternalsMixin as N } from "../../core/mixins.js";
+var m = (a, s, r) => s.has(a) || v("Cannot " + r);
+var p = (a, s, r) => (m(a, s, "read from private field"), r ? r.call(a) : s.get(a)), _ = (a, s, r) => s.has(a) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), b = (a, s, r, o) => (m(a, s, "write to private field"), o ? o.call(a, r) : s.set(a, r), r);
+import { __esDecorate as w, __runInitializers as c } from "tslib";
+import { css as y, LitElement as x, html as P } from "lit";
+import { customElement as S, property as C } from "lit/decorators.js";
+import { SbbLanguageController as I } from "../../core/controllers/language-controller.js";
+import { forceType as k } from "../../core/decorators.js";
+import { i18nNextSlide as L, i18nPreviousSlide as q, i18nSlide as A, i18nCarouselArrowsNavigationHint as E } from "../../core/i18n/i18n.js";
+import { SbbElementInternalsMixin as B } from "../../core/mixins.js";
 import "../../screen-reader-only.js";
-const q = y`*,:before,:after{box-sizing:border-box}:host{--sbb-carousel-border-radius: var(--sbb-border-radius-4x);display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-color-white)}::slotted(sbb-compact-paginator){padding:var(--sbb-spacing-responsive-xs)}`;
-let V = (() => {
-  var i, l;
-  let a = [C("sbb-carousel")], s, t = [], o, h = N(x), u, g = [], v = [];
+const z = y`*,:before,:after{box-sizing:border-box}:host{--sbb-carousel-border-radius: var(--sbb-border-radius-4x);--sbb-carousel-background-color: var(--sbb-background-color-1);display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-color-hard-2),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-color-hard-1);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-spacing-responsive-xs)}`;
+let W = (() => {
+  var n, l;
+  let a = [S("sbb-carousel")], s, r = [], o, h = B(x), u, g = [], f = [];
   return l = class extends h {
     constructor() {
       super();
-      w(this, i);
-      d(this, i, c(this, g, !1)), this._paginator = (c(this, v), null), this._abortController = null, this._language = new A(this), this.addEventListener?.("show", (e) => {
-        this._paginator && e.detail.index !== this._paginator.pageIndex && (this._paginator.pageIndex = e.detail.index);
+      _(this, n);
+      b(this, n, c(this, g, !1)), this._paginator = (c(this, f), null), this._abortController = null, this._language = new I(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
+        this._requestedPageIndexByPaginator !== -1 && this._requestedPageIndexByPaginator !== e.detail.index || (this._paginator && e.detail.index !== this._paginator.pageIndex && (this._paginator.pageIndex = e.detail.index), this._requestedPageIndexByPaginator = -1);
       });
     }
     /**
      * Used to display a box-shadow around the component.
      */
     get shadow() {
-      return f(this, i);
+      return p(this, n);
     }
     set shadow(e) {
-      d(this, i, e);
+      b(this, n, e);
     }
     connectedCallback() {
       super.connectedCallback(), this.internals.role = "region", this.internals.ariaLabel = "carousel";
@@ -44,35 +44,39 @@ let V = (() => {
       super.disconnectedCallback(), this._abortController?.abort();
     }
     _handleSlotchange() {
-      const e = Array.from(this.children).find((b) => b.localName === "sbb-compact-paginator"), r = Array.from(this.children).find((b) => b.localName === "sbb-carousel-list");
-      if (!e || !r)
+      const e = Array.from(this.children).find((i) => i.localName === "sbb-compact-paginator"), t = Array.from(this.children).find((i) => i.localName === "sbb-carousel-list");
+      if (!e || !t)
         return;
-      const n = r.querySelectorAll("sbb-carousel-item");
-      n && n.length > 0 && (e.length = n.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= I[this._language.current], e.accessibilityPreviousPageLabel ||= L[this._language.current], e.accessibilityPageLabel ||= P[this._language.current], e !== this._paginator && (this._abortController = new AbortController(), e.addEventListener("page", (b) => this._scrollAtPageChange(b), {
+      const d = t.querySelectorAll("sbb-carousel-item");
+      d && d.length > 0 && (e.length = d.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= L[this._language.current], e.accessibilityPreviousPageLabel ||= q[this._language.current], e.accessibilityPageLabel ||= A[this._language.current], e !== this._paginator && (this._abortController = new AbortController(), e.addEventListener("page", (i) => this._scrollAtPageChange(i), {
         signal: this._abortController.signal
       }), this._paginator = e);
     }
     _scrollAtPageChange(e) {
-      const r = this.querySelector("sbb-carousel-list");
-      r && r.querySelectorAll("sbb-carousel-item")[e.detail.pageIndex]?.scrollIntoView();
+      this._requestedPageIndexByPaginator = e.detail.pageIndex;
+      const t = this.querySelector("sbb-carousel-list");
+      if (t) {
+        const i = t.querySelectorAll("sbb-carousel-item")[e.detail.pageIndex].offsetLeft;
+        (t.clientWidth <= 100 || Math.abs(t.scrollLeft - i) > 50) && t.scrollTo({ left: i });
+      }
     }
     render() {
-      return S`
+      return P`
       <div class="sbb-carousel">
         <sbb-screen-reader-only id="sbb-carousel-arrows-navigation-hint"
-          >${z[this._language.current]}</sbb-screen-reader-only
+          >${E[this._language.current]}</sbb-screen-reader-only
         >
         <slot @slotchange=${this._handleSlotchange}></slot>
       </div>
     `;
     }
-  }, i = new WeakMap(), o = l, (() => {
+  }, n = new WeakMap(), o = l, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    u = [E(), k({ reflect: !0, type: Boolean })], _(l, null, u, { kind: "accessor", name: "shadow", static: !1, private: !1, access: { has: (r) => "shadow" in r, get: (r) => r.shadow, set: (r, n) => {
-      r.shadow = n;
-    } }, metadata: e }, g, v), _(null, s = { value: o }, a, { kind: "class", name: o.name, metadata: e }, null, t), o = s.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = q, c(o, t), o;
+    u = [k(), C({ reflect: !0, type: Boolean })], w(l, null, u, { kind: "accessor", name: "shadow", static: !1, private: !1, access: { has: (t) => "shadow" in t, get: (t) => t.shadow, set: (t, d) => {
+      t.shadow = d;
+    } }, metadata: e }, g, f), w(null, s = { value: o }, a, { kind: "class", name: o.name, metadata: e }, null, r), o = s.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.styles = z, c(o, r), o;
 })();
 export {
-  V as SbbCarouselElement
+  W as SbbCarouselElement
 };

package/carousel/carousel-list/carousel-list.component.d.ts

@@ -9,12 +9,12 @@ declare const SbbCarouselListElement_base: import('../../core/mixins.js').Abstra
 export declare class SbbCarouselListElement extends SbbCarouselListElement_base {
     static styles: CSSResultGroup;
     private _currentIndex;
-    /** Gets the slotted items. */
-    private get _carouselItems();
     private _language;
     private _beforeShowObserver;
     private _showObserver;
     constructor();
+    /** Gets the slotted items. */
+    private _carouselItems;
     private _handleSlotchange;
     private _onKeyDown;
     connectedCallback(): void;

package/carousel/carousel-list/carousel-list.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-list.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/carousel/carousel-list/carousel-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAcvC;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAAoC;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,aAAa,CAAK;IAE1B,8BAA8B;IAC9B,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,CAAC,SAAS,CAAmC;IAEpD,OAAO,CAAC,mBAAmB,CAexB;IAEH,OAAO,CAAC,aAAa,CAsBlB;;IAQH,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,UAAU;IAsBF,iBAAiB,IAAI,IAAI;IAOzB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cASnD,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"carousel-list.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/carousel/carousel-list/carousel-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAcvC;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAAoC;IACvE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,SAAS,CAAmC;IAEpD,OAAO,CAAC,mBAAmB,CAexB;IAEH,OAAO,CAAC,aAAa,CAuBlB;;IAQH,8BAA8B;IAC9B,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,UAAU;IAsBF,iBAAiB,IAAI,IAAI;IAOzB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cASnD,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/carousel/carousel-list/carousel-list.component.js

@@ -1,51 +1,54 @@
 import { __esDecorate as h, __runInitializers as d } from "tslib";
-import { IntersectionController as b } from "@lit-labs/observers/intersection-controller.js";
-import { css as f, LitElement as m, html as g } from "lit";
-import { customElement as _ } from "lit/decorators.js";
+import { IntersectionController as u } from "@lit-labs/observers/intersection-controller.js";
+import { css as f, LitElement as m, html as _ } from "lit";
+import { customElement as g } from "lit/decorators.js";
 import { isArrowKeyPressed as p } from "../../core/a11y.js";
-import { SbbLanguageController as w } from "../../core/controllers.js";
-import { i18nCarouselItemAriaLabel as v } from "../../core/i18n.js";
-import { SbbElementInternalsMixin as x } from "../../core/mixins.js";
-const y = f`*,:before,:after{box-sizing:border-box}:host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(: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);content:"";position:absolute;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width);border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}`;
+import { SbbLanguageController as v } from "../../core/controllers.js";
+import { i18nCarouselItemAriaLabel as w } from "../../core/i18n.js";
+import { SbbElementInternalsMixin as y } from "../../core/mixins.js";
+const x = f`*,:before,:after{box-sizing:border-box}:host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(: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);content:"";position:absolute;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width);border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}`;
 let O = (() => {
-  var o;
-  let u = [_("sbb-carousel-list")], n, l = [], i, c = x(m);
-  return o = class extends c {
-    /** Gets the slotted items. */
-    get _carouselItems() {
-      return Array.from(this.querySelectorAll?.("sbb-carousel-item") ?? []);
-    }
+  var i;
+  let b = [g("sbb-carousel-list")], n, l = [], o, c = y(m);
+  return i = class extends c {
     constructor() {
-      super(), this._currentIndex = 0, this._language = new w(this), this._beforeShowObserver = new b(this, {
+      super(), this._currentIndex = 0, this._language = new v(this), this._beforeShowObserver = new u(this, {
         callback: (e) => {
           e.filter((t) => t.isIntersecting && t.target !== this).forEach((t) => {
             const s = t.target;
             s.dispatchEvent(new CustomEvent("beforeshow", {
-              detail: { index: this._carouselItems.findIndex((a) => a === s) },
+              detail: { index: this._carouselItems().findIndex((a) => a === s) },
               bubbles: !0,
               composed: !0
             }));
           });
         },
         config: { threshold: 0.01, root: this, rootMargin: "100% 0% 100% 0%" }
-      }), this._showObserver = new b(this, {
+      }), this._showObserver = new u(this, {
         callback: (e) => {
-          const r = e.filter((t) => t.target !== this);
-          r.filter((t) => !t.isIntersecting).forEach((t) => t.target.ariaHidden = "true"), r.filter((t) => t.isIntersecting).forEach((t) => {
-            const s = t.target;
-            s.ariaHidden = "false", this._currentIndex = this._carouselItems.findIndex((a) => a === s), s.dispatchEvent(new CustomEvent("show", {
+          for (const r of e) {
+            if (r.target === this)
+              continue;
+            const t = r.target;
+            r.isIntersecting ? (t.ariaHidden = null, this._currentIndex = this._carouselItems().findIndex((s) => s === t), t.dispatchEvent(new CustomEvent("show", {
               detail: { index: this._currentIndex },
               bubbles: !0,
               composed: !0
-            }));
-          });
+            }))) : t.ariaHidden = "true";
+          }
         },
         config: { threshold: 0.99, root: this, rootMargin: "100% 0% 100% 0%" }
       }), this.addEventListener?.("keydown", (e) => this._onKeyDown(e));
     }
+    /** Gets the slotted items. */
+    _carouselItems() {
+      return Array.from(this.querySelectorAll?.("sbb-carousel-item") ?? []);
+    }
     _handleSlotchange() {
       const e = Array.from(this.children), r = e.length;
-      e.forEach((s, a) => s.ariaLabel ||= v(a + 1, r)[this._language.current]);
+      e.forEach((s, a) => {
+        s.ariaLabel ||= w(a + 1, r)[this._language.current], s.ariaHidden = a === this._currentIndex ? null : "true";
+      });
       const t = e.find((s) => s.localName === "sbb-carousel-item");
       t && (this.style.setProperty("--sbb-carousel-list-height", `${t.clientHeight}px`), this.style.setProperty("--sbb-carousel-list-width", `${t.clientWidth}px`));
     }
@@ -55,7 +58,7 @@ let O = (() => {
       e.preventDefault();
       let r = this._currentIndex;
       const t = e.key === "ArrowUp" || e.key === "ArrowLeft", s = e.key === "ArrowDown" || e.key === "ArrowRight";
-      t ? r = Math.max(0, this._currentIndex - 1) : s && (r = Math.min(this._carouselItems.length - 1, this._currentIndex + 1)), r !== this._currentIndex && (this._currentIndex = r, this._carouselItems[this._currentIndex].scrollIntoView());
+      t ? r = Math.max(0, this._currentIndex - 1) : s && (r = Math.min(this._carouselItems().length - 1, this._currentIndex + 1)), r !== this._currentIndex && (this._currentIndex = r, this.scrollTo({ left: this._carouselItems()[this._currentIndex].offsetLeft }));
     }
     connectedCallback() {
       super.connectedCallback(), this.internals.ariaLive = "polite", this.internals.ariaAtomic = "true";
@@ -66,12 +69,12 @@ let O = (() => {
       });
     }
     render() {
-      return g`<slot @slotchange=${this._handleSlotchange}></slot>`;
+      return _`<slot @slotchange=${this._handleSlotchange}></slot>`;
     }
-  }, i = o, (() => {
+  }, o = i, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    h(null, n = { value: i }, u, { kind: "class", name: i.name, metadata: e }, null, l), i = n.value, e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.styles = y, d(i, l), i;
+    h(null, n = { value: o }, b, { kind: "class", name: o.name, metadata: e }, null, l), o = n.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), i.styles = x, d(o, l), o;
 })();
 export {
   O as SbbCarouselListElement

package/checkbox/common.js

@@ -1,5 +1,5 @@
 import { SbbCheckboxCommonElementMixin as m } from "./common/checkbox-common.js";
-import { c as b } from "../checkbox-common-CDzcyq8p.js";
+import { c as b } from "../checkbox-common-gjHkSAmN.js";
 export {
   m as SbbCheckboxCommonElementMixin,
   b as checkboxCommonStyle

package/checkbox-common-gjHkSAmN.js

@@ -0,0 +1,5 @@
+import { css as e } from "lit";
+const t = e`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-color-3);--sbb-checkbox-label-icon-color: var(--sbb-checkbox-label-color);--sbb-checkbox-cursor: pointer}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite);--sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--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);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--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)}:host([size=xs]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}`;
+export {
+  t as c
+};

package/checkbox.js

@@ -2,7 +2,7 @@ import { SbbCheckboxElement as b } from "./checkbox/checkbox/checkbox.component.
 import { SbbCheckboxGroupElement as r } from "./checkbox/checkbox-group/checkbox-group.component.js";
 import { SbbCheckboxPanelElement as t } from "./checkbox/checkbox-panel/checkbox-panel.component.js";
 import { SbbCheckboxCommonElementMixin as c } from "./checkbox/common/checkbox-common.js";
-import { c as p } from "./checkbox-common-CDzcyq8p.js";
+import { c as p } from "./checkbox-common-gjHkSAmN.js";
 export {
   c as SbbCheckboxCommonElementMixin,
   b as SbbCheckboxElement,

package/chip/chip/chip.component.js

@@ -1,38 +1,38 @@
-var p = (e) => {
+var v = (e) => {
   throw TypeError(e);
 };
-var v = (e, r, b) => r.has(e) || p("Cannot " + b);
-var m = (e, r, b) => (v(e, r, "read from private field"), b ? b.call(e) : r.get(e)), f = (e, r, b) => r.has(e) ? p("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), l = (e, r, b, o) => (v(e, r, "write to private field"), o ? o.call(e, b) : r.set(e, b), b);
-import { __runInitializers as c, __esDecorate as g } from "tslib";
-import { css as x, LitElement as y, html as w } from "lit";
-import { customElement as k, property as S } from "lit/decorators.js";
+var p = (e, r, b) => r.has(e) || v("Cannot " + b);
+var g = (e, r, b) => (p(e, r, "read from private field"), b ? b.call(e) : r.get(e)), m = (e, r, b) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), l = (e, r, b, i) => (p(e, r, "write to private field"), i ? i.call(e, b) : r.set(e, b), b);
+import { __runInitializers as c, __esDecorate as f } from "tslib";
+import { css as x, LitElement as y, html as k } from "lit";
+import { customElement as w, property as S } from "lit/decorators.js";
 import { SbbLanguageController as z } from "../../core/controllers.js";
 import { i18nChipDelete as D } from "../../core/i18n.js";
 import { SbbNegativeMixin as E, SbbDisabledMixin as C, SbbReadonlyMixin as q, SbbElementInternalsMixin as B } from "../../core/mixins.js";
 import "../../button/mini-button.js";
 import "../../screen-reader-only.js";
-const I = x`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-background-color: var(--sbb-color-milk);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-color-cloud);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color-active: var(--sbb-color-charcoal);--sbb-chip-color-hover: var(--sbb-color-charcoal);--sbb-chip-background-color-active: var(--sbb-color-white);--sbb-chip-background-color-hover: var(--sbb-color-white);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-color-iron);--sbb-chip-background-color: var(--sbb-color-charcoal);--sbb-chip-color: var(--sbb-color-cloud);--sbb-chip-color-active: var(--sbb-color-white);--sbb-chip-color-hover: var(--sbb-color-white);--sbb-chip-background-color-active: var(--sbb-color-midnight);--sbb-chip-background-color-hover: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-button-color-text: var(--sbb-chip-color);--sbb-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media (any-hover: hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-button-color-text: var(--sbb-chip-color-hover)}}`;
+const I = x`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-background-color: var(--sbb-background-color-3);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-border-color-4-inverted);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-color-active: var(--sbb-color-2);--sbb-chip-color-hover: var(--sbb-color-2);--sbb-chip-background-color-active: var(--sbb-background-color-1);--sbb-chip-background-color-hover: var(--sbb-background-color-1);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-active: var(--sbb-color-2-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-button-color-text: var(--sbb-chip-color);--sbb-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media (any-hover: hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-button-color-text: var(--sbb-chip-color-hover)}}`;
 let F = (() => {
   var s, t;
-  let e = [k("sbb-chip")], r, b = [], o, n = E(C(q(B(y)))), d, h = [], u = [];
+  let e = [w("sbb-chip")], r, b = [], i, n = E(C(q(B(y)))), d, u = [], h = [];
   return t = class extends n {
     constructor() {
       super(...arguments);
-      f(this, s);
-      l(this, s, c(this, h, null)), this._language = (c(this, u), new z(this));
+      m(this, s);
+      l(this, s, c(this, u, null)), this._language = (c(this, h), new z(this));
     }
     /** The value of chip. Will be used as label if nothing is slotted. */
     get value() {
-      return m(this, s);
+      return g(this, s);
     }
-    set value(i) {
-      l(this, s, i);
+    set value(o) {
+      l(this, s, o);
     }
-    willUpdate(i) {
-      super.willUpdate(i), i.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
+    willUpdate(o) {
+      super.willUpdate(o), o.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
     }
-    firstUpdated(i) {
-      super.firstUpdated(i), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
+    firstUpdated(o) {
+      super.firstUpdated(o), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
     }
     _deleteButton() {
       return this.shadowRoot.querySelector("sbb-mini-button");
@@ -41,7 +41,7 @@ let F = (() => {
       this.dispatchEvent(new Event("requestdelete", { bubbles: !0, composed: !0 }));
     }
     render() {
-      return w`
+      return k`
       <div class="sbb-chip">
         <div class="sbb-chip__label-wrapper">
           <span class="sbb-chip__label">
@@ -59,14 +59,14 @@ let F = (() => {
       </div>
     `;
     }
-  }, s = new WeakMap(), o = t, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    d = [S()], g(t, null, d, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, _) => {
+  }, s = new WeakMap(), i = t, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    d = [S()], f(t, null, d, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, _) => {
       a.value = _;
-    } }, metadata: i }, h, u), g(null, r = { value: o }, e, { kind: "class", name: o.name, metadata: i }, null, b), o = r.value, i && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+    } }, metadata: o }, u, h), f(null, r = { value: i }, e, { kind: "class", name: i.name, metadata: o }, null, b), i = r.value, o && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
   })(), t.role = "option", t.styles = I, t.events = {
     requestdelete: "requestdelete"
-  }, c(o, b), o;
+  }, c(i, b), i;
 })();
 export {
   F as SbbChipElement

package/chip-label/chip-label.component.js

@@ -2,34 +2,34 @@ var y = (e) => {
   throw TypeError(e);
 };
 var k = (e, s, t) => s.has(e) || y("Cannot " + t);
-var p = (e, s, t) => (k(e, s, "read from private field"), t ? t.call(e) : s.get(e)), h = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, l) => (k(e, s, "write to private field"), l ? l.call(e, t) : s.set(e, t), t);
-import { __esDecorate as f, __runInitializers as c } from "tslib";
+var d = (e, s, t) => (k(e, s, "read from private field"), t ? t.call(e) : s.get(e)), p = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), h = (e, s, t, a) => (k(e, s, "write to private field"), a ? a.call(e, t) : s.set(e, t), t);
+import { __esDecorate as g, __runInitializers as c } from "tslib";
 import { css as S, LitElement as E, html as I } from "lit";
 import { customElement as j, property as w } from "lit/decorators.js";
-const D = S`*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([color=milk]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-background-color: var(--sbb-color-milk)}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-white);--sbb-chip-label-background-color: var(--sbb-color-charcoal)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-background-color: var(--sbb-color-white)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-white);--sbb-chip-label-background-color: var(--sbb-color-granite)}:host([size=xxs]){--sbb-chip-label-padding-block: 0em;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-font-size-text-xxs)}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-font-size-text-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-font-size-text-s)}.sbb-chip-label{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);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);overflow:hidden}@media (forced-colors: active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
+const D = S`*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-3);--sbb-chip-label-padding-block: 0em;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-font-size-text-xxs)}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-color-granite);--sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-font-size-text-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-font-size-text-s)}.sbb-chip-label{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);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);overflow:hidden}@media (forced-colors: active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
 let q = (() => {
-  var r, b, a;
-  let e = [j("sbb-chip-label")], s, t = [], l, x = E, g, v = [], u = [], m, _ = [], z = [];
-  return a = class extends x {
+  var o, b, i;
+  let e = [j("sbb-chip-label")], s, t = [], a, v = E, f, u = [], x = [], m, _ = [], z = [];
+  return i = class extends v {
     constructor() {
       super(...arguments);
-      h(this, r, c(this, v, "xxs"));
-      h(this, b, (c(this, u), c(this, _, "milk")));
+      p(this, o, c(this, u, "xxs"));
+      p(this, b, (c(this, x), c(this, _, "milk")));
       c(this, z);
     }
     /** Size of the chip. */
     get size() {
-      return p(this, r);
+      return d(this, o);
     }
-    set size(o) {
-      d(this, r, o);
+    set size(r) {
+      h(this, o, r);
     }
     /** Color of the chip. */
     get color() {
-      return p(this, b);
+      return d(this, b);
     }
-    set color(o) {
-      d(this, b, o);
+    set color(r) {
+      h(this, b, r);
     }
     render() {
       return I`
@@ -40,14 +40,14 @@ let q = (() => {
       </span>
     `;
     }
-  }, r = new WeakMap(), b = new WeakMap(), l = a, (() => {
-    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    g = [w({ reflect: !0 })], m = [w({ reflect: !0 })], f(a, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, n) => {
-      i.size = n;
-    } }, metadata: o }, v, u), f(a, null, m, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, n) => {
-      i.color = n;
-    } }, metadata: o }, _, z), f(null, s = { value: l }, e, { kind: "class", name: l.name, metadata: o }, null, t), l = s.value, o && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), a.styles = D, c(l, t), l;
+  }, o = new WeakMap(), b = new WeakMap(), a = i, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    f = [w({ reflect: !0 })], m = [w({ reflect: !0 })], g(i, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (l) => "size" in l, get: (l) => l.size, set: (l, n) => {
+      l.size = n;
+    } }, metadata: r }, u, x), g(i, null, m, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (l) => "color" in l, get: (l) => l.color, set: (l, n) => {
+      l.color = n;
+    } }, metadata: r }, _, z), g(null, s = { value: a }, e, { kind: "class", name: a.name, metadata: r }, null, t), a = s.value, r && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), i.styles = D, c(a, t), a;
 })();
 export {
   q as SbbChipLabelElement