@sbb-esta/lyne-elements 2.10.1 → 3.0.0-next.0

package/chip/chip-group/chip-group.component.js

@@ -1,125 +1,134 @@
-var x = (s) => {
-  throw TypeError(s);
+var T = (a) => {
+  throw TypeError(a);
 };
-var k = (s, r, n) => r.has(s) || x("Cannot " + n);
-var A = (s, r, n) => (k(s, r, "read from private field"), n ? n.call(s) : r.get(s)), S = (s, r, n) => r.has(s) ? x("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, n), b = (s, r, n, o) => (k(s, r, "write to private field"), o ? o.call(s, n) : r.set(s, n), n);
-import { __esDecorate as _, __runInitializers as d } from "tslib";
-import { css as K, LitElement as z, isServer as I, html as O } from "lit";
-import { customElement as T, property as D } from "lit/decorators.js";
-import { inputAutocompleteEvent as V } from "../../autocomplete.js";
-import { isArrowKeyPressed as q, getNextElementIndex as L } from "../../core/a11y.js";
-import { SbbLanguageController as M } from "../../core/controllers.js";
-import { isLean as R } from "../../core/dom.js";
-import { EventEmitter as f } from "../../core/eventing.js";
-import { i18nSelectionRequired as B, i18nChipGroupInputDescription as G } from "../../core/i18n.js";
-import { SbbRequiredMixin as N, SbbDisabledMixin as $, SbbNegativeMixin as j, SbbFormAssociatedMixin as U } from "../../core/mixins.js";
-import { SbbChipElement as H } from "../chip.js";
-const J = K`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-group-input-min-width: 9.375rem;max-width:100%}:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .375rem .3125rem}@media (min-width: 52.5rem){:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .3125rem .1875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width)}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
-let le = (() => {
-  var h, u;
-  let s = [T("sbb-chip-group")], r, n = [], o, v = N($(j(U(z)))), g = [], E, y, C = [], w = [];
-  var p = (u = class extends v {
+var W = (a, r, l) => r.has(a) || T("Cannot " + l);
+var y = (a, r, l) => (W(a, r, "read from private field"), l ? l.call(a) : r.get(a)), g = (a, r, l) => r.has(a) ? T("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, l), b = (a, r, l, h) => (W(a, r, "write to private field"), h ? h.call(a, l) : r.set(a, l), l);
+import { __esDecorate as f, __runInitializers as d } from "tslib";
+import { css as q, LitElement as L, isServer as E, html as M } from "lit";
+import { customElement as V, property as C } from "lit/decorators.js";
+import { isArrowKeyPressed as R, getNextElementIndex as B } from "../../core/a11y.js";
+import { SbbLanguageController as N } from "../../core/controllers.js";
+import { isLean as G } from "../../core/dom.js";
+import { EventEmitter as x } from "../../core/eventing.js";
+import { i18nSelectionRequired as $, i18nChipGroupInputDescription as j } from "../../core/i18n.js";
+import { SbbRequiredMixin as U, SbbDisabledMixin as J, SbbNegativeMixin as H, SbbFormAssociatedMixin as P, SbbElementInternalsMixin as Q } from "../../core/mixins.js";
+import { SbbChipElement as X } from "../chip.js";
+const Y = q`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-group-input-min-width: 9.375rem;max-width:100%}:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .375rem .3125rem}@media (min-width: 52.5rem){:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .3125rem .1875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width)}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
+let ut = (() => {
+  var u, c, o;
+  let a = [V("sbb-chip-group")], r, l = [], h, w = U(J(H(P(Q(L))))), S = [], k, A, I = [], D = [], O, z = [], K = [];
+  var m = (o = class extends w {
     constructor() {
-      var e, t;
+      var t, e;
       super();
-      S(this, h);
-      b(this, h, (d(this, g), d(this, C, ["Enter"]))), this._change = (d(this, w), new f(this, p.events.change)), this._input = new f(this, p.events.input), this._chipInputTokenEnd = new f(this, p.events.chipInputTokenEnd), this._inputAttributeObserver = I ? null : new MutationObserver(() => this._reactToInputChanges()), this._formFieldAttributeObserver = I ? null : new MutationObserver(() => this._inheritSize()), this._language = new M(this), this.internals.role = "listbox", (e = this.addEventListener) == null || e.call(this, H.events.requestDelete, (i) => this._deleteChip(i.target)), (t = this.addEventListener) == null || t.call(this, "keydown", (i) => this._onChipKeyDown(i));
+      g(this, u);
+      g(this, c);
+      b(this, u, (d(this, S), d(this, I, null))), b(this, c, (d(this, D), d(this, z, ["Enter"]))), this._change = (d(this, K), new x(this, m.events.change)), this._input = new x(this, m.events.input), this._chipInputTokenEnd = new x(this, m.events.chipInputTokenEnd), this._inputAttributeObserver = E ? null : new MutationObserver(() => this._reactToInputChanges()), this._formFieldAttributeObserver = E ? null : new MutationObserver(() => this._inheritSize()), this._language = new N(this), (t = this.addEventListener) == null || t.call(this, X.events.requestDelete, (i) => this._deleteChip(i.target)), (e = this.addEventListener) == null || e.call(this, "keydown", (i) => this._onChipKeyDown(i));
     }
     /** Value of the form element. */
-    set value(e) {
-      e = e ?? [], super.value = e;
-      const t = this.value, i = [...t];
-      for (const l of e)
-        i.includes(l) && i.splice(i.indexOf(l), 1);
-      i.forEach((l) => {
-        var c;
-        return (c = this._chipElements().find((m) => m.value === l)) == null ? void 0 : c.remove();
+    set value(t) {
+      t = t ?? [];
+      const e = this.value, i = [...e];
+      for (const n of t)
+        i.includes(n) && i.splice(i.indexOf(n), 1);
+      i.forEach((n) => {
+        var p;
+        return (p = this._chipElements().find((_) => _.value === n)) == null ? void 0 : p.remove();
       });
-      const a = [...e];
-      for (const l of t)
-        a.includes(l) && a.splice(a.indexOf(l), 1);
-      a.forEach((l) => this._createChipElement(l));
+      const s = [...t];
+      for (const n of e)
+        s.includes(n) && s.splice(s.indexOf(n), 1);
+      s.forEach((n) => this._createChipElement(n));
     }
     get value() {
-      return this._chipElements().map((e) => e.value);
+      return this._chipElements().map((t) => t.value);
+    }
+    /** Function that maps a chip's value to its display value. */
+    get displayWith() {
+      return y(this, u);
+    }
+    set displayWith(t) {
+      b(this, u, t);
     }
     /** The array of keys that will trigger a `chipInputTokenEnd` event. Default `['Enter']` */
     get separatorKeys() {
-      return A(this, h);
+      return y(this, c);
     }
-    set separatorKeys(e) {
-      b(this, h, e);
+    set separatorKeys(t) {
+      b(this, c, t);
     }
     connectedCallback() {
       super.connectedCallback(), this._setupComponent();
     }
-    willUpdate(e) {
-      super.willUpdate(e), (e.has("disabled") || e.has("formDisabled") || e.has("negative")) && this._proxyStateToChips();
+    willUpdate(t) {
+      super.willUpdate(t), (t.has("disabled") || t.has("formDisabled") || t.has("negative")) && this._proxyStateToChips();
     }
     /** @internal */
     formResetCallback() {
       this.value = null;
     }
     /** @internal */
-    formStateRestoreCallback(e, t) {
-      if (!e) {
+    formStateRestoreCallback(t, e) {
+      if (!t) {
         this.value = null;
         return;
       }
-      this.value = e.map((i) => i[1]);
+      this._readFormData(t).then((i) => this.value = i);
     }
-    updateFormValue() {
-      const e = new FormData();
-      this.value.forEach((t) => e.append(this.name, t)), this.internals.setFormValue(e), this.validate(), this._updateInputDescription();
+    async _readFormData(t) {
+      return Promise.all(t.getAll(this.name).map(async (e) => e instanceof Blob ? JSON.parse(await e.text()) : e));
     }
-    shouldValidate(e) {
-      return super.shouldValidate(e) || e === "required";
+    shouldValidate(t) {
+      return super.shouldValidate(t) || t === "required" || t === "value";
     }
     validate() {
-      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", B[this._language.current]) : this.removeValidityFlag("valueMissing");
+      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", $[this._language.current]) : this.removeValidityFlag("valueMissing");
     }
     /** Return the list of chip elements **/
     _chipElements() {
-      var e;
-      return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-chip")) ?? []);
+      var t;
+      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-chip")) ?? []);
     }
     /** Return the list of enabled chip elements **/
     _enabledChipElements() {
-      var e;
-      return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-chip:not([disabled])")) ?? []);
+      var t;
+      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-chip:not([disabled])")) ?? []);
     }
     _setupComponent() {
-      var i, a, l, c, m;
-      const e = this.querySelector("input");
-      e && e !== this._inputElement && ((i = this._inputAbortController) == null || i.abort(), (a = this._inputAttributeObserver) == null || a.disconnect(), this._inputElement = e, this._inputAbortController = new AbortController(), this._inputElement.addEventListener("keydown", (F) => this._onInputKeyDown(F), {
+      var i, s, n, p, _;
+      const t = this.querySelector("input");
+      t && t !== this._inputElement && ((i = this._inputAbortController) == null || i.abort(), (s = this._inputAttributeObserver) == null || s.disconnect(), this._inputElement = t, this._inputAbortController = new AbortController(), this._inputElement.addEventListener("keydown", (v) => this._onInputKeyDown(v), {
         signal: this._inputAbortController.signal
-      }), this._inputElement.addEventListener(V, () => this._createChipFromInput("autocomplete"), {
+      }), this._inputElement.addEventListener("inputAutocomplete", (v) => {
+        var F;
+        this._createChipFromInput("autocomplete", (F = v.detail) == null ? void 0 : F.option.value);
+      }, {
         signal: this._inputAbortController.signal
-      }), (l = this._inputAttributeObserver) == null || l.observe(this._inputElement, {
+      }), (n = this._inputAttributeObserver) == null || n.observe(this._inputElement, {
         attributes: !0,
         attributeFilter: ["readonly", "disabled"]
-      })), this._inheritSize(), (c = this._formFieldAttributeObserver) == null || c.disconnect();
-      const t = this.closest("sbb-form-field");
-      t && ((m = this._formFieldAttributeObserver) == null || m.observe(t, {
+      })), this._inheritSize(), (p = this._formFieldAttributeObserver) == null || p.disconnect();
+      const e = this.closest("sbb-form-field");
+      e && ((_ = this._formFieldAttributeObserver) == null || _.observe(e, {
         attributes: !0,
         attributeFilter: ["size"]
-      })), this.toggleAttribute("data-empty", this.value.length === 0), this._reactToInputChanges(), this.updateFormValue();
+      })), this.toggleAttribute("data-empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
     }
     /**
      * Listen for keyboard events on the chip elements
      **/
-    _onChipKeyDown(e) {
-      const t = e.target;
-      if (t.localName === "sbb-chip") {
-        if (q(e)) {
-          const i = this._enabledChipElements(), a = L(e, i.indexOf(t), i.length);
-          i[a].focus();
+    _onChipKeyDown(t) {
+      const e = t.target;
+      if (e.localName === "sbb-chip") {
+        if (R(t)) {
+          const i = this._enabledChipElements(), s = B(t, i.indexOf(e), i.length);
+          i[s].focus();
           return;
         }
-        switch (e.key) {
+        switch (t.key) {
           case "Backspace":
           case "Delete":
-            !t.readonly && !t.disabled && (e.preventDefault(), this._deleteChip(t));
+            !e.readOnly && !e.disabled && (t.preventDefault(), this._deleteChip(e));
             break;
         }
       }
@@ -127,51 +136,52 @@ let le = (() => {
     /**
      * Listen for keyboard events on the input
      **/
-    _onInputKeyDown(e) {
-      switch (e.key) {
+    _onInputKeyDown(t) {
+      switch (t.key) {
         case "Backspace":
         case "ArrowLeft":
           this._inputElement.value || this._focusChip();
           break;
         case "Enter":
-          e.preventDefault();
+          t.preventDefault();
           break;
       }
-      this.separatorKeys.includes(e.key) && (e.preventDefault(), this._createChipFromInput("input"));
+      this.separatorKeys.includes(t.key) && (t.preventDefault(), this._createChipFromInput("input"));
     }
     /**
      * If the input is not empty, create a chip with its value
      */
-    _createChipFromInput(e = "input") {
-      const t = this._inputElement.value.trim();
-      if (!t)
+    _createChipFromInput(t = "input", e) {
+      var n;
+      const i = e ?? this._inputElement.value.trim();
+      if (!i)
         return;
-      const i = {
-        origin: e,
-        value: t,
-        label: void 0,
-        setValue: (a) => i.value = a,
-        setLabel: (a) => i.label = a
+      const s = {
+        origin: t,
+        value: i,
+        label: (e ? (n = this.displayWith) == null ? void 0 : n.call(this, e) : null) ?? void 0,
+        setValue: (p) => s.value = p,
+        setLabel: (p) => s.label = p
       };
-      this._chipInputTokenEnd.emit(i) && (this._createChipElement(i.value, i.label), this._inputElement.value = "", this._emitInputEvents());
+      this._chipInputTokenEnd.emit(s) && (this._createChipElement(s.value, s.label), this._inputElement.value = "", this._emitInputEvents());
     }
-    _deleteChip(e) {
-      const t = this._enabledChipElements();
-      e.remove(), this._emitInputEvents(), this._focusChip(t.indexOf(e));
+    _deleteChip(t) {
+      const e = this._enabledChipElements();
+      t.remove(), this._emitInputEvents(), this._focusChip(e.indexOf(t));
     }
     /**
      * Focus an enabled chip. If none are present, focus the input
      * @param index The index of the enabled chip. If null, focus the last one.
      */
-    _focusChip(e) {
+    _focusChip(t) {
       var i;
-      const t = this._enabledChipElements();
-      if (e !== void 0 && t[e]) {
-        t[e].focus();
+      const e = this._enabledChipElements();
+      if (t !== void 0 && e[t]) {
+        e[t].focus();
         return;
       }
-      if (t.length > 0) {
-        t[t.length - 1].focus();
+      if (e.length > 0) {
+        e[e.length - 1].focus();
         return;
       }
       (i = this._inputElement) == null || i.focus();
@@ -179,48 +189,53 @@ let le = (() => {
     _emitInputEvents() {
       this._input.emit(), this._change.emit();
     }
-    _createChipElement(e, t) {
+    _createChipElement(t, e) {
+      var s;
+      if (E)
+        return;
       const i = document.createElement("sbb-chip");
-      i.setAttribute("value", e), i.innerText = t ?? "", this.insertBefore(i, this._inputElement ?? this.querySelector("input"));
+      i.value = t, i.innerText = e ?? (t ? (s = this.displayWith) == null ? void 0 : s.call(this, t) : null) ?? "", this.insertBefore(i, this._inputElement ?? this.querySelector("input"));
     }
     _reactToInputChanges() {
-      var e;
-      this.disabled = ((e = this._inputElement) == null ? void 0 : e.disabled) ?? !1, this._proxyStateToChips();
+      var t;
+      this.disabled = ((t = this._inputElement) == null ? void 0 : t.disabled) ?? !1, this._proxyStateToChips();
     }
     _proxyStateToChips() {
-      this._chipElements().forEach((e) => {
-        var t;
-        e.disabled = this.disabled || this.formDisabled, e.readonly = ((t = this._inputElement) == null ? void 0 : t.hasAttribute("readonly")) ?? !1, e.negative = this.negative;
+      this._chipElements().forEach((t) => {
+        var e;
+        t.disabled = this.disabled || this.formDisabled, t.readOnly = ((e = this._inputElement) == null ? void 0 : e.hasAttribute("readonly")) ?? !1, t.negative = this.negative;
       });
     }
     _inheritSize() {
-      var e;
-      this.setAttribute("data-size", ((e = this.closest("sbb-form-field")) == null ? void 0 : e.size) ?? (R() ? "s" : "m"));
+      var t;
+      this.setAttribute("data-size", ((t = this.closest("sbb-form-field")) == null ? void 0 : t.size) ?? (G() ? "s" : "m"));
     }
     _updateInputDescription() {
-      this._inputElement && this._inputElement.setAttribute("aria-description", `${G[this._language.current]} ${this.value.length}`);
+      this._inputElement && this._inputElement.setAttribute("aria-description", `${j[this._language.current]} ${this.value.length}`);
     }
     render() {
-      return O`
+      return M`
       <div class="sbb-chip-group">
         <slot @slotchange=${this._setupComponent}></slot>
       </div>
     `;
     }
-  }, h = new WeakMap(), o = u, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    E = [D({ type: Array })], y = [D({ attribute: "separator-keys", type: Array })], _(u, null, E, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
-      t.value = i;
-    } }, metadata: e }, null, g), _(u, null, y, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (t) => "separatorKeys" in t, get: (t) => t.separatorKeys, set: (t, i) => {
-      t.separatorKeys = i;
-    } }, metadata: e }, C, w), _(null, r = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, n), p = o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), u.styles = J, u.events = {
+  }, u = new WeakMap(), c = new WeakMap(), h = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+    k = [C({ type: Array })], A = [C({ attribute: !1 })], O = [C({ attribute: "separator-keys", type: Array })], f(o, null, k, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
+      e.value = i;
+    } }, metadata: t }, null, S), f(o, null, A, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
+      e.displayWith = i;
+    } }, metadata: t }, I, D), f(o, null, O, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, i) => {
+      e.separatorKeys = i;
+    } }, metadata: t }, z, K), f(null, r = { value: h }, a, { kind: "class", name: h.name, metadata: t }, null, l), m = h = r.value, t && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "listbox", o.styles = Y, o.events = {
     input: "input",
     change: "change",
     chipInputTokenEnd: "chipInputTokenEnd"
-  }, d(o, n), u);
-  return p = o;
+  }, d(h, l), o);
+  return m = h;
 })();
 export {
-  le as SbbChipGroupElement
+  ut as SbbChipGroupElement
 };

package/clock/clock.component.d.ts

@@ -33,7 +33,7 @@ export declare class SbbClockElement extends LitElement {
     private _moveMinutesHandFn;
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
     disconnectedCallback(): void;
     private _handlePageVisibilityChange;
     private _startOrConfigureClock;

package/clock/clock.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clock.component.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA8CrD;;GAEG;AACH,qBAEM,eAAgB,SAAQ,UAAU;IACtC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAEvD,0CAA0C;IAC1C,OAAO,CAAC,MAAM,CAAkC;IAEhD,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;IAEvD,OAAO,CAAC,gBAAgB,CAAC,CAAiC;IAE1D,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjD,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQnD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7E,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,2BAA2B,CAUjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAuBzB,sDAAsD;YACxC,UAAU;IAexB;;OAEG;YACW,WAAW;IAQzB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"clock.component.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA8CrD;;GAEG;AACH,qBAEM,eAAgB,SAAQ,UAAU;IACtC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAEvD,0CAA0C;IAC1C,OAAO,CAAC,MAAM,CAAkC;IAEhD,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;IAEvD,OAAO,CAAC,gBAAgB,CAAC,CAAiC;IAE1D,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjD,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9D,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,2BAA2B,CAUjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAuBzB,sDAAsD;YACxC,UAAU;IAexB;;OAEG;YACW,WAAW;IAQzB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/clock/clock.component.js

@@ -42,8 +42,8 @@ let it = (() => {
     willUpdate(t) {
       super.willUpdate(t), !E && t.has("now") && this._startOrConfigureClock();
     }
-    async firstUpdated(t) {
-      super.firstUpdated(t), E || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), await this._startOrConfigureClock());
+    firstUpdated(t) {
+      super.firstUpdated(t), E || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
     }
     disconnectedCallback() {
       super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);

package/container/sticky-bar/sticky-bar.component.d.ts

@@ -25,6 +25,11 @@ export declare class SbbStickyBarElement extends SbbStickyBarElement_base {
     };
     /** Color of the container, like transparent, white etc. */
     accessor color: 'white' | 'milk' | 'midnight' | 'charcoal' | null;
+    /**
+     * Size of the container.
+     * @default 'm' / 's' (lean)
+     */
+    accessor size: 'm' | 's';
     /** The state of the component. */
     private set _state(value);
     private get _state();

package/container/sticky-bar/sticky-bar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAYb;;;;;;;;;;;;;;GAcG;AACH,qBAKM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,UAAU,CAEf;IACH,OAAO,CAAC,SAAS,CAEd;IACH,OAAO,CAAC,YAAY,CAIlB;IACF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;cAMzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,eAAe;cAWJ,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAWb;;;;;;;;;;;;;;GAcG;AACH,qBAEM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,UAAU,CAEf;IACH,OAAO,CAAC,SAAS,CAEd;IACH,OAAO,CAAC,YAAY,CAIlB;IACF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;cAMzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,eAAe;cAWJ,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/container/sticky-bar/sticky-bar.component.js

@@ -1,31 +1,29 @@
-var _ = (a) => {
+var z = (a) => {
   throw TypeError(a);
 };
-var g = (a, i, s) => i.has(a) || _("Cannot " + s);
-var p = (a, i, s) => (g(a, i, "read from private field"), s ? s.call(a) : i.get(a)), f = (a, i, s) => i.has(a) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, e) => (g(a, i, "write to private field"), e ? e.call(a, s) : i.set(a, s), s);
-import { __runInitializers as k, __esDecorate as w } from "tslib";
-import { IntersectionController as S } from "@lit-labs/observers/intersection-controller.js";
-import { css as A, LitElement as C, html as E } from "lit";
-import { customElement as U, property as z } from "lit/decorators.js";
-import { hostAttributes as R } from "../../core/decorators.js";
-import { isZeroAnimationDuration as D } from "../../core/dom.js";
-import { EventEmitter as c } from "../../core/eventing.js";
-import { SbbUpdateSchedulerMixin as I } from "../../core/mixins.js";
-const T = A`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-state=unsticky])){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-elevation-level-11-soft-2-color),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-elevation-level-11-soft-1-color)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
-let P = (() => {
-  var b, r;
-  let a = [U("sbb-sticky-bar"), R({
-    slot: "sticky-bar"
-  })], i, s = [], e, u = I(C), y, h = [], v = [];
-  var n = (r = class extends u {
+var A = (a, i, e) => i.has(a) || z("Cannot " + e);
+var h = (a, i, e) => (A(a, i, "read from private field"), e ? e.call(a) : i.get(a)), y = (a, i, e) => i.has(a) ? z("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, e), d = (a, i, e, r) => (A(a, i, "write to private field"), r ? r.call(a, e) : i.set(a, e), e);
+import { __runInitializers as k, __esDecorate as v } from "tslib";
+import { IntersectionController as U } from "@lit-labs/observers/intersection-controller.js";
+import { css as R, LitElement as I, html as D } from "lit";
+import { customElement as T, property as C } from "lit/decorators.js";
+import { isLean as B, isZeroAnimationDuration as H } from "../../core/dom.js";
+import { EventEmitter as u } from "../../core/eventing.js";
+import { SbbUpdateSchedulerMixin as L } from "../../core/mixins.js";
+const N = R`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-state=unsticky])){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-elevation-level-11-soft-2-color),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-elevation-level-11-soft-1-color)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
+let J = (() => {
+  var b, c, o;
+  let a = [T("sbb-sticky-bar")], i, e = [], r, m = L(I), _, g = [], p = [], f, w = [], x = [];
+  var n = (o = class extends m {
     constructor() {
       super(...arguments);
-      f(this, b);
-      d(this, b, k(this, h, null)), this._willStick = (k(this, v), new c(this, n.events.willStick, {
+      y(this, b);
+      y(this, c);
+      d(this, b, k(this, g, null)), d(this, c, (k(this, p), k(this, w, B() ? "s" : "m"))), this._willStick = (k(this, x), new u(this, n.events.willStick, {
         cancelable: !0
-      })), this._didStick = new c(this, n.events.didStick, {
+      })), this._didStick = new u(this, n.events.didStick, {
         cancelable: !0
-      }), this._willUnstick = new c(this, n.events.willUnstick, { cancelable: !0 }), this._didUnstick = new c(this, n.events.didUnstick, { cancelable: !0 }), this._observer = new S(this, {
+      }), this._willUnstick = new u(this, n.events.willUnstick, { cancelable: !0 }), this._didUnstick = new u(this, n.events.didUnstick, { cancelable: !0 }), this._observer = new U(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -34,11 +32,21 @@ let P = (() => {
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
-      return p(this, b);
+      return h(this, b);
     }
     set color(t) {
       d(this, b, t);
     }
+    /**
+     * Size of the container.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return h(this, c);
+    }
+    set size(t) {
+      d(this, c, t);
+    }
     /** The state of the component. */
     set _state(t) {
       this.setAttribute("data-state", t);
@@ -47,7 +55,7 @@ let P = (() => {
       return this.getAttribute("data-state");
     }
     connectedCallback() {
-      super.connectedCallback(), this._state = "sticky", this.startUpdate();
+      super.connectedCallback(), this.slot || (this.slot = "sticky-bar"), this._state = "sticky", this.startUpdate();
       const t = this.closest("sbb-container");
       t && this.toggleAttribute("data-expanded", t.expanded), this._intersector && this._observer.observe(this._intersector);
     }
@@ -58,13 +66,13 @@ let P = (() => {
       super.firstUpdated(t), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
     }
     _isZeroAnimationDuration() {
-      return D(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
+      return H(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
     }
     _detectStickyState(t) {
-      var m;
+      var S;
       this.toggleAttribute("data-initialized", !0);
-      const o = !t.isIntersecting && t.boundingClientRect.top > 0, l = (m = this._intersector) == null ? void 0 : m.getBoundingClientRect(), x = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
-      this.toggleAttribute("data-slide-vertically", o && this._intersector && Math.abs(l.bottom - x.bottom) > 30), this.toggleAttribute("data-sticking", o), this.completeUpdate();
+      const s = !t.isIntersecting && t.boundingClientRect.top > 0, l = (S = this._intersector) == null ? void 0 : S.getBoundingClientRect(), E = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+      this.toggleAttribute("data-slide-vertically", s && this._intersector && Math.abs(l.bottom - E.bottom) > 30), this.toggleAttribute("data-sticking", s), this.completeUpdate();
     }
     /** Animates from normal content flow position to `position: sticky`. */
     stick() {
@@ -84,7 +92,7 @@ let P = (() => {
       (this._state === "sticking" || this._state === "sticky") && t.animationName === "slide-in" ? this._stickyCallback() : this._state === "unsticking" && t.animationName === "slide-out" && this._unstickyCallback();
     }
     render() {
-      return E`
+      return D`
       <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
         <div class="sbb-sticky-bar">
           <slot></slot>
@@ -93,19 +101,21 @@ let P = (() => {
       <div class="sbb-sticky-bar__intersector"></div>
     `;
     }
-  }, b = new WeakMap(), e = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    y = [z({ reflect: !0 })], w(r, null, y, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (o) => "color" in o, get: (o) => o.color, set: (o, l) => {
-      o.color = l;
-    } }, metadata: t }, h, v), w(null, i = { value: e }, a, { kind: "class", name: e.name, metadata: t }, null, s), n = e = i.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = T, r.events = {
+  }, b = new WeakMap(), c = new WeakMap(), r = o, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    _ = [C({ reflect: !0 })], f = [C({ reflect: !0 })], v(o, null, _, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (s) => "color" in s, get: (s) => s.color, set: (s, l) => {
+      s.color = l;
+    } }, metadata: t }, g, p), v(o, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, l) => {
+      s.size = l;
+    } }, metadata: t }, w, x), v(null, i = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), n = r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = N, o.events = {
     willStick: "willStick",
     didStick: "didStick",
     willUnstick: "willUnstick",
     didUnstick: "didUnstick"
-  }, k(e, s), r);
-  return n = e;
+  }, k(r, e), o);
+  return n = r;
 })();
 export {
-  P as SbbStickyBarElement
+  J as SbbStickyBarElement
 };