@sbb-esta/lyne-elements 3.6.0 → 3.8.0

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

@@ -0,0 +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;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

@@ -0,0 +1,81 @@
+import { __esDecorate as h, __runInitializers as d } from "tslib";
+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 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 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 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) },
+              bubbles: !0,
+              composed: !0
+            }));
+          });
+        },
+        config: { threshold: 0.01, root: this, rootMargin: "100% 0% 100% 0%" }
+      }), this._showObserver = new u(this, {
+        callback: (e) => {
+          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 ||= 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`));
+    }
+    _onKeyDown(e) {
+      if (!p(e))
+        return;
+      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.scrollTo({ left: this._carouselItems()[this._currentIndex].offsetLeft }));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.internals.ariaLive = "polite", this.internals.ariaAtomic = "true";
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.querySelectorAll("sbb-carousel-item").forEach((r) => {
+        this._beforeShowObserver.observe(r), this._showObserver.observe(r);
+      });
+    }
+    render() {
+      return _`<slot @slotchange=${this._handleSlotchange}></slot>`;
+    }
+  }, o = i, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    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/carousel/carousel-list.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './carousel-list/carousel-list.component.js';
+//# sourceMappingURL=carousel-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-list.d.ts","sourceRoot":"","sources":["../../../src/elements/carousel/carousel-list.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4CAA4C,CAAC"}

package/carousel/carousel-list.js

@@ -0,0 +1,4 @@
+import { SbbCarouselListElement as r } from "./carousel-list/carousel-list.component.js";
+export {
+  r as SbbCarouselListElement
+};

package/carousel/carousel.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './carousel/carousel.component.js';
+//# sourceMappingURL=carousel.d.ts.map

package/carousel/carousel.d.ts.map

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

package/carousel/carousel.js

@@ -0,0 +1,4 @@
+import { SbbCarouselElement as r } from "./carousel/carousel.component.js";
+export {
+  r as SbbCarouselElement
+};

package/carousel.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @entrypoint
+ */
+export * from './carousel/carousel.js';
+export * from './carousel/carousel-item.js';
+export * from './carousel/carousel-list.js';
+//# sourceMappingURL=carousel.d.ts.map

package/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/elements/carousel.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC"}

package/carousel.js

@@ -0,0 +1,8 @@
+import { SbbCarouselElement as r } from "./carousel/carousel/carousel.component.js";
+import { SbbCarouselItemElement as m } from "./carousel/carousel-item/carousel-item.component.js";
+import { SbbCarouselListElement as l } from "./carousel/carousel-list/carousel-list.component.js";
+export {
+  r as SbbCarouselElement,
+  m as SbbCarouselItemElement,
+  l 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

package/clock/clock.component.js

@@ -1,28 +1,28 @@
 var M = (s) => {
   throw TypeError(s);
 };
-var p = (s, n, e) => n.has(s) || M("Cannot " + e);
-var g = (s, n, e) => (p(s, n, "read from private field"), e ? e.call(s) : n.get(s)), H = (s, n, e) => n.has(s) ? M("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, e), h = (s, n, e, i) => (p(s, n, "write to private field"), i ? i.call(s, e) : n.set(s, e), e);
-import { __runInitializers as m, __esDecorate as y } from "tslib";
-import { css as E, LitElement as A, isServer as z, html as O } from "lit";
+var g = (s, n, e) => n.has(s) || M("Cannot " + e);
+var p = (s, n, e) => (g(s, n, "read from private field"), e ? e.call(s) : n.get(s)), H = (s, n, e) => n.has(s) ? M("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, e), h = (s, n, e, a) => (g(s, n, "write to private field"), a ? a.call(s, e) : n.set(s, e), e);
+import { __runInitializers as _, __esDecorate as f } from "tslib";
+import { css as E, LitElement as A, isServer as y, html as O } from "lit";
 import { customElement as T, property as I } from "lit/decorators.js";
-import { ref as _ } from "lit/directives/ref.js";
-const N = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="#FFF" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
+import { ref as m } from "lit/directives/ref.js";
+const N = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="var(--sbb-clock-background-color)" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
 `, P = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path id="mod_clock_svg_hours" d="M55.7 64.5h-6.4l.6-44h5.2z"/></svg>
-`, F = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
-`, x = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
-`, U = E`*,:before,:after{box-sizing:border-box}:host{--sbb-clock-hours-animation-start-angle: 0deg;--sbb-clock-seconds-animation-start-angle: 0deg;--sbb-clock-hours-animation-duration: 0s;--sbb-clock-seconds-animation-duration: 0s;--sbb-clock-animation-play-state: paused;--sbb-clock-seconds-hand-color: var(--sbb-color-red);display:block}.sbb-clock{position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;inset:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state)}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}:host(:not([data-initialized])) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle))}97.5%,to{transform:rotate(360deg)}}`, $ = 12, D = 60, f = 60, V = 50, S = 360, w = 30, G = 6, R = 360 / 58.5, B = 60, L = 3600, K = L / 2, C = {
+`, x = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
+`, F = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
+`, U = E`*,:before,:after{box-sizing:border-box}:host{--sbb-clock-hours-animation-start-angle: 0deg;--sbb-clock-seconds-animation-start-angle: 0deg;--sbb-clock-hours-animation-duration: 0s;--sbb-clock-seconds-animation-duration: 0s;--sbb-clock-animation-play-state: paused;--sbb-clock-seconds-hand-color: var(--sbb-color-brand);--sbb-clock-face-color: var(--sbb-color-1);--sbb-clock-background-color: var(--sbb-background-color-1);display:block}.sbb-clock{position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;inset:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state)}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}:host(:not([data-initialized])) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle))}97.5%,to{transform:rotate(360deg)}}`, $ = 12, D = 60, z = 60, V = 50, S = 360, w = 30, G = 6, R = 360 / 58.5, B = 60, L = 3600, K = L / 2, C = {
   once: !0,
   passive: !0
 };
 let X = (() => {
   var c, o;
-  let s = [T("sbb-clock")], n, e = [], i, u = A, b, k = [], v = [];
+  let s = [T("sbb-clock")], n, e = [], a, u = A, b, k = [], v = [];
   return o = class extends u {
     constructor() {
       super(...arguments);
       H(this, c);
-      h(this, c, m(this, k, null)), this._state = (m(this, v), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
+      h(this, c, _(this, k, null)), this._state = (_(this, v), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
         this.now || (document.visibilityState === "hidden" ? await this._stopClock() : await this._startClock());
       };
     }
@@ -31,7 +31,7 @@ let X = (() => {
      * @param value HH:MM:ss
      */
     get now() {
-      return g(this, c);
+      return p(this, c);
     }
     set now(t) {
       h(this, c, t);
@@ -40,10 +40,10 @@ let X = (() => {
       super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), K * 1e3);
     }
     willUpdate(t) {
-      super.willUpdate(t), !z && t.has("now") && this._startOrConfigureClock();
+      super.willUpdate(t), !y && t.has("now") && this._startOrConfigureClock();
     }
     firstUpdated(t) {
-      super.firstUpdated(t), z || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
+      super.firstUpdated(t), y || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
     }
     disconnectedCallback() {
       super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);
@@ -70,14 +70,14 @@ let X = (() => {
     /** Set the starting position for the three hands on the clock face. */
     _setHandsStartingPosition() {
       this._assignCurrentTime();
-      const t = f - this._seconds, a = D - this._minutes, l = $ - this._hours;
+      const t = z - this._seconds, i = D - this._minutes, l = $ - this._hours;
       let r = 0, d = 0;
-      t > 0 && (r += t, d = 1), a > 0 && (r += (a - d) * B, d = 1), l > 0 && (r += (l - d) * L), this.style?.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * w + this._minutes / 2)}deg`), this.style?.setProperty("--sbb-clock-hours-animation-duration", `${r}s`), this.style?.setProperty("--sbb-clock-seconds-animation-start-angle", `${Math.ceil(this._seconds * R)}deg`), this.style?.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), this._clockHandSeconds?.classList.add("sbb-clock__hand-seconds--initial-minute"), this._clockHandHours?.classList.add("sbb-clock__hand-hours--initial-hour"), this.toggleAttribute("data-initialized", !0);
+      t > 0 && (r += t, d = 1), i > 0 && (r += (i - d) * B, d = 1), l > 0 && (r += (l - d) * L), this.style?.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * w + this._minutes / 2)}deg`), this.style?.setProperty("--sbb-clock-hours-animation-duration", `${r}s`), this.style?.setProperty("--sbb-clock-seconds-animation-start-angle", `${Math.ceil(this._seconds * R)}deg`), this.style?.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), this._clockHandSeconds?.classList.add("sbb-clock__hand-seconds--initial-minute"), this._clockHandHours?.classList.add("sbb-clock__hand-hours--initial-hour"), this.toggleAttribute("data-initialized", !0);
     }
     /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
     _assignCurrentTime() {
-      const t = this.now ? null : /* @__PURE__ */ new Date(), [a, l, r] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((d) => +d);
-      this._hours = a % 12, this._minutes = l, this._seconds = r;
+      const t = this.now ? null : /* @__PURE__ */ new Date(), [i, l, r] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((d) => +d);
+      this._hours = i % 12, this._minutes = l, this._seconds = r;
     }
     /** Set the starting position for the minutes hand. */
     _setMinutesHand() {
@@ -91,7 +91,7 @@ let X = (() => {
     }
     /** Move the minutes hand to the next value. */
     _moveMinutesHand() {
-      this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(() => this._addMinutesAndSetHands(), f * 1e3);
+      this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(() => this._addMinutesAndSetHands(), z * 1e3);
     }
     _addMinutesAndSetHands() {
       this._minutes++, this._setMinutesHand();
@@ -120,33 +120,33 @@ let X = (() => {
         <span
           class="sbb-clock__hand-hours"
           .innerHTML=${P}
-          ${_((t) => {
+          ${m((t) => {
         this._clockHandHours = t;
       })}
         ></span>
         <span
           class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
-          .innerHTML=${F}
-          ${_((t) => {
+          .innerHTML=${x}
+          ${m((t) => {
         this._clockHandMinutes = t;
       })}
         ></span>
         <span
           class="sbb-clock__hand-seconds"
-          .innerHTML=${x}
-          ${_((t) => {
+          .innerHTML=${F}
+          ${m((t) => {
         this._clockHandSeconds = t;
       })}
         ></span>
       </div>
     `;
     }
-  }, c = new WeakMap(), i = o, (() => {
+  }, c = new WeakMap(), a = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    b = [I()], y(o, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (a) => "now" in a, get: (a) => a.now, set: (a, l) => {
-      a.now = l;
-    } }, metadata: t }, k, v), y(null, n = { value: i }, s, { kind: "class", name: i.name, metadata: t }, null, e), i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = U, m(i, e), i;
+    b = [I()], f(o, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (i) => "now" in i, get: (i) => i.now, set: (i, l) => {
+      i.now = l;
+    } }, metadata: t }, k, v), f(null, n = { value: a }, s, { kind: "class", name: a.name, metadata: t }, null, e), a = n.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = U, _(a, e), a;
 })();
 export {
   X as SbbClockElement

package/container/container/container.component.js

@@ -2,43 +2,43 @@ var I = (e) => {
   throw TypeError(e);
 };
 var D = (e, t, r) => t.has(e) || I("Cannot " + r);
-var p = (e, t, r) => (D(e, t, "read from private field"), r ? r.call(e) : t.get(e)), u = (e, t, r) => t.has(e) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), h = (e, t, r, s) => (D(e, t, "write to private field"), s ? s.call(e, r) : t.set(e, r), r);
-import { __esDecorate as g, __runInitializers as i } from "tslib";
+var u = (e, t, r) => (D(e, t, "read from private field"), r ? r.call(e) : t.get(e)), p = (e, t, r) => t.has(e) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), g = (e, t, r, n) => (D(e, t, "write to private field"), n ? n.call(e, r) : t.set(e, r), r);
+import { __esDecorate as h, __runInitializers as i } from "tslib";
 import { css as U, LitElement as j, html as B } from "lit";
 import { customElement as O, property as m } from "lit/decorators.js";
 import { slotState as q, forceType as T } from "../../core/decorators.js";
-const A = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-container-background-border-radius: 0;--sbb-container-color: inherit;display:block}:host([color=white]){--sbb-container-background-color: var(--sbb-color-white)}:host([color=milk]){--sbb-container-background-color: var(--sbb-color-milk)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-white)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-color-midnight)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-color-charcoal)}:host([data-slot-names~=image]){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host([data-slot-names~=image][background-expanded]){position:relative}@media (min-width: 90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}:host([data-slot-names~=image]:not([background-expanded])) .sbb-container{position:relative}:host([data-slot-names~=image]) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
+const A = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-container-background-border-radius: 0;--sbb-container-color: inherit;display:block}:host(:is(:not([color]),[color=white])){--sbb-container-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-container-background-color: var(--sbb-background-color-3)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-1-negative)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-background-color-1-negative)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-background-color-2-negative)}:host([data-slot-names~=image]){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host([data-slot-names~=image][background-expanded]){position:relative}@media (min-width: 90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}:host([data-slot-names~=image]:not([background-expanded])) .sbb-container{position:relative}:host([data-slot-names~=image]) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
 let K = (() => {
-  var c, d, l, n;
-  let e = [O("sbb-container"), q()], t, r = [], s, x = j, k, _ = [], v = [], f, y = [], w = [], E, z = [], S = [];
-  return n = class extends x {
+  var c, d, l, s;
+  let e = [O("sbb-container"), q()], t, r = [], n, x = j, k, v = [], _ = [], f, y = [], E = [], w, z = [], S = [];
+  return s = class extends x {
     constructor() {
       super(...arguments);
-      u(this, c, i(this, _, !1));
-      u(this, d, (i(this, v), i(this, y, !1)));
-      u(this, l, (i(this, w), i(this, z, "white")));
+      p(this, c, i(this, v, !1));
+      p(this, d, (i(this, _), i(this, y, !1)));
+      p(this, l, (i(this, E), i(this, z, "white")));
       i(this, S);
     }
     /** Whether the container is expanded. */
     get expanded() {
-      return p(this, c);
+      return u(this, c);
     }
     set expanded(o) {
-      h(this, c, o);
+      g(this, c, o);
     }
     /** Whether the background color is shown on full container width on large screens. */
     get backgroundExpanded() {
-      return p(this, d);
+      return u(this, d);
     }
     set backgroundExpanded(o) {
-      h(this, d, o);
+      g(this, d, o);
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
-      return p(this, l);
+      return u(this, l);
     }
     set color(o) {
-      h(this, l, o);
+      g(this, l, o);
     }
     willUpdate(o) {
       super.willUpdate(o), o.has("expanded") && this.querySelector?.("sbb-sticky-bar")?.toggleAttribute("data-expanded", this.expanded);
@@ -54,16 +54,16 @@ let K = (() => {
       <slot name="sticky-bar"></slot>
     `;
     }
-  }, c = new WeakMap(), d = new WeakMap(), l = new WeakMap(), s = n, (() => {
+  }, c = new WeakMap(), d = new WeakMap(), l = new WeakMap(), n = s, (() => {
     const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    k = [T(), m({ type: Boolean, reflect: !0 })], f = [T(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], E = [m({ reflect: !0 })], g(n, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (a) => "expanded" in a, get: (a) => a.expanded, set: (a, b) => {
+    k = [T(), m({ type: Boolean, reflect: !0 })], f = [T(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [m({ reflect: !0 })], h(s, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (a) => "expanded" in a, get: (a) => a.expanded, set: (a, b) => {
       a.expanded = b;
-    } }, metadata: o }, _, v), g(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (a) => "backgroundExpanded" in a, get: (a) => a.backgroundExpanded, set: (a, b) => {
+    } }, metadata: o }, v, _), h(s, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (a) => "backgroundExpanded" in a, get: (a) => a.backgroundExpanded, set: (a, b) => {
       a.backgroundExpanded = b;
-    } }, metadata: o }, y, w), g(n, null, E, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
+    } }, metadata: o }, y, E), h(s, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
       a.color = b;
-    } }, metadata: o }, z, S), g(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: o }, null, r), s = t.value, o && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), n.styles = A, i(s, r), s;
+    } }, metadata: o }, z, S), h(null, t = { value: n }, e, { kind: "class", name: n.name, metadata: o }, null, r), n = t.value, o && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), s.styles = A, i(n, r), n;
 })();
 export {
   K as SbbContainerElement