@sbb-esta/lyne-elements 1.15.1 → 2.0.0

package/checkbox/checkbox-panel/checkbox-panel.d.ts

@@ -11,19 +11,19 @@ declare const SbbCheckboxPanelElement_base: import('../../core/mixins.js').Abstr
  * @slot subtext - Slot used to render a subtext under the label (only visible within a selection panel).
  * @slot suffix - Slot used to render additional content after the label (only visible within a selection panel).
  * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {Event} change - Event fired on change.
  * @event {InputEvent} input - Event fired on input.
- * @overrideType value - string | null
  */
 export declare class SbbCheckboxPanelElement extends SbbCheckboxPanelElement_base {
     static styles: CSSResultGroup;
     static readonly events: {
-        readonly didChange: "didChange";
         readonly stateChange: "stateChange";
         readonly panelConnected: "panelConnected";
     };
-    /** Size variant. */
+    /**
+     * Size variant, either m or s.
+     * @default 'm' / 's' (lean)
+     */
     accessor size: SbbPanelSize;
     /**
      * @internal

package/checkbox/checkbox-panel/checkbox-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox-panel/checkbox-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAC/C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;;AAEF;;;;;;;;;;;GAWG;AACH,qBAGM,uBAAwB,SAAQ,4BAErC;IACC,OAAuB,MAAM,EAAE,cAAc,CAA2C;IAGxF,gBAAuB,MAAM;;;;MAIlB;IAEX,oBAAoB;IACpB,SAEgB,IAAI,EAAE,YAAY,CAAO;IAEzC;;;;OAIG;IACH,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAI9D;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAkBzD,MAAM,IAAI,cAAc;CA8B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}
+{"version":3,"file":"checkbox-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/checkbox-panel/checkbox-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAElC,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAC/C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;;AAEF;;;;;;;;;GASG;AACH,qBAGM,uBAAwB,SAAQ,4BAErC;IACC,OAAuB,MAAM,EAAE,cAAc,CAA2C;IAGxF,gBAAuB,MAAM;;;MAGlB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,YAAY,CAAwB;IAE1D;;;;OAIG;IACH,SAAS,CAAC,WAAW,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAI9D;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAkBzD,MAAM,IAAI,cAAc;CA8B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,oBAAoB,EAAE,uBAAuB,CAAC;KAC/C;CACF"}

package/checkbox/checkbox-panel.js

@@ -4,24 +4,28 @@ var k = (e) => {
 var x = (e, t, s) => t.has(e) || k("Cannot " + s);
 var f = (e, t, s) => (x(e, t, "read from private field"), s ? s.call(e) : t.get(e)), g = (e, t, s) => t.has(e) ? k("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), b = (e, t, s, i) => (x(e, t, "write to private field"), i ? i.call(e, s) : t.set(e, s), s);
 import { __runInitializers as h, __esDecorate as z } from "tslib";
-import { LitElement as S, html as C, nothing as v } from "lit";
-import { customElement as y, property as E } from "lit/decorators.js";
+import { LitElement as v, html as S, nothing as y } from "lit";
+import { customElement as C, property as E } from "lit/decorators.js";
 import { slotState as w, getOverride as $ } from "../core/decorators.js";
-import { EventEmitter as D } from "../core/eventing.js";
-import { SbbPanelMixin as I, SbbUpdateSchedulerMixin as M, panelCommonStyle as O } from "../core/mixins.js";
-import { SbbCheckboxCommonElementMixin as U, checkboxCommonStyle as j } from "./common.js";
+import { isLean as D } from "../core/dom.js";
+import { EventEmitter as I } from "../core/eventing.js";
+import { SbbPanelMixin as M, SbbUpdateSchedulerMixin as O, panelCommonStyle as U } from "../core/mixins.js";
+import { SbbCheckboxCommonElementMixin as j, checkboxCommonStyle as L } from "./common.js";
 import "../screen-reader-only.js";
 import "../visual-checkbox.js";
-let P = (() => {
+let R = (() => {
   var c, l;
-  let e = [y("sbb-checkbox-panel"), w()], t, s = [], i, d = I(U(M(S))), m, p = [], u = [];
-  var o = (l = class extends d {
+  let e = [C("sbb-checkbox-panel"), w()], t, s = [], i, m = M(j(O(v))), d, p = [], u = [];
+  var o = (l = class extends m {
     constructor() {
       super(...arguments);
       g(this, c);
-      b(this, c, h(this, p, "m")), this.stateChange = (h(this, u), new D(this, o.events.stateChange, { bubbles: !0 }));
+      b(this, c, h(this, p, D() ? "s" : "m")), this.stateChange = (h(this, u), new I(this, o.events.stateChange, { bubbles: !0 }));
     }
-    /** Size variant. */
+    /**
+     * Size variant, either m or s.
+     * @default 'm' / 's' (lean)
+     */
     get size() {
       return f(this, c);
     }
@@ -32,7 +36,7 @@ let P = (() => {
       super.willUpdate(a), a.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== a.get("checked") && this.stateChange.emit({ type: "checked", checked: this.checked })), a.has("disabled") && this.disabled !== a.get("disabled") && this.stateChange.emit({ type: "disabled", disabled: this.disabled });
     }
     render() {
-      return C`
+      return S`
       <span class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
@@ -53,27 +57,26 @@ let P = (() => {
               </span>
             </span>
             <slot name="subtext"></slot>
-            ${this.expansionState ? C`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : v}
+            ${this.expansionState ? S`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : y}
           </span>
         </span>
       </span>
     `;
     }
   }, c = new WeakMap(), i = l, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    m = [E({ reflect: !0 }), $((n, r) => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    d = [E({ reflect: !0 }), $((n, r) => {
       var _;
       return (_ = n.group) != null && _.size ? n.group.size === "xs" ? "s" : n.group.size : r;
-    })], z(l, null, m, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (n) => "size" in n, get: (n) => n.size, set: (n, r) => {
+    })], z(l, null, d, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (n) => "size" in n, get: (n) => n.size, set: (n, r) => {
       n.size = r;
     } }, metadata: a }, p, u), z(null, t = { value: i }, e, { kind: "class", name: i.name, metadata: a }, null, s), o = i = t.value, a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), l.styles = [j, O], l.events = {
-    didChange: "didChange",
+  })(), l.styles = [L, U], l.events = {
     stateChange: "stateChange",
     panelConnected: "panelConnected"
   }, h(i, s), l);
   return o = i;
 })();
 export {
-  P as SbbCheckboxPanelElement
+  R as SbbCheckboxPanelElement
 };

package/checkbox/checkbox.js

@@ -4,39 +4,43 @@ var y = (e) => {
 var S = (e, t, s) => t.has(e) || y("Cannot " + s);
 var m = (e, t, s) => (S(e, t, "read from private field"), s ? s.call(e) : t.get(e)), h = (e, t, s) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), d = (e, t, s, i) => (S(e, t, "write to private field"), i ? i.call(e, s) : t.set(e, s), s);
 import { __esDecorate as u, __runInitializers as b } from "tslib";
-import { css as w, LitElement as C, html as I } from "lit";
-import { customElement as E, property as P } from "lit/decorators.js";
-import { slotState as $, getOverride as j } from "../core/decorators.js";
-import { SbbIconNameMixin as D } from "../icon.js";
-import { SbbCheckboxCommonElementMixin as O, checkboxCommonStyle as M } from "./common.js";
+import { css as w, LitElement as I, html as E } from "lit";
+import { customElement as $, property as P } from "lit/decorators.js";
+import { slotState as j, getOverride as C } from "../core/decorators.js";
+import { isLean as D } from "../core/dom.js";
+import { SbbIconNameMixin as O } from "../icon.js";
+import { SbbCheckboxCommonElementMixin as L, checkboxCommonStyle as M } from "./common.js";
 import "../visual-checkbox.js";
-const L = w`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:is([icon-name],[data-slot-names~=icon]):not([icon-placement=end])) .sbb-checkbox__label--icon{padding-inline-end:var(--sbb-spacing-fixed-2x)}:host(:is([icon-name],[data-slot-names~=icon])[icon-placement=end]) .sbb-checkbox__label--icon{padding-inline-start:var(--sbb-spacing-fixed-2x)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
-let K = (() => {
-  var o, l, c;
-  let e = [E("sbb-checkbox"), $()], t, s = [], i, _ = O(D(C)), p, f = [], x = [], k, g = [], v = [];
+const N = w`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:is([icon-name],[data-slot-names~=icon]):not([icon-placement=end])) .sbb-checkbox__label--icon{padding-inline-end:var(--sbb-spacing-fixed-2x)}:host(:is([icon-name],[data-slot-names~=icon])[icon-placement=end]) .sbb-checkbox__label--icon{padding-inline-start:var(--sbb-spacing-fixed-2x)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
+let R = (() => {
+  var n, l, c;
+  let e = [$("sbb-checkbox"), j()], t, s = [], i, _ = L(O(I)), p, f = [], x = [], k, g = [], v = [];
   return c = class extends _ {
     constructor() {
       super(...arguments);
-      h(this, o, b(this, f, "m"));
+      h(this, n, b(this, f, D() ? "xs" : "m"));
       h(this, l, (b(this, x), b(this, g, "end")));
       b(this, v);
     }
-    /** Size variant. */
+    /**
+     * Size variant, either m, s or xs.
+     * @default 'm' / 'xs' (lean)
+     */
     get size() {
-      return m(this, o);
+      return m(this, n);
     }
-    set size(n) {
-      d(this, o, n);
+    set size(o) {
+      d(this, n, o);
     }
     /** The label position relative to the labelIcon. Defaults to end */
     get iconPlacement() {
       return m(this, l);
     }
-    set iconPlacement(n) {
-      d(this, l, n);
+    set iconPlacement(o) {
+      d(this, l, o);
     }
     render() {
-      return I`
+      return E`
       <span class="sbb-checkbox-wrapper">
         <span class="sbb-checkbox">
           <span class="sbb-checkbox__inner">
@@ -59,20 +63,18 @@ let K = (() => {
       </span>
     `;
     }
-  }, o = new WeakMap(), l = new WeakMap(), i = c, (() => {
-    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    p = [P({ reflect: !0 }), j((a, r) => {
+  }, n = new WeakMap(), l = new WeakMap(), i = c, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+    p = [P({ reflect: !0 }), C((a, r) => {
       var z;
       return ((z = a.group) == null ? void 0 : z.size) ?? r;
     })], k = [P({ attribute: "icon-placement", reflect: !0 })], u(c, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, r) => {
       a.size = r;
-    } }, metadata: n }, f, x), u(c, null, k, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (a) => "iconPlacement" in a, get: (a) => a.iconPlacement, set: (a, r) => {
+    } }, metadata: o }, f, x), u(c, null, k, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (a) => "iconPlacement" in a, get: (a) => a.iconPlacement, set: (a, r) => {
       a.iconPlacement = r;
-    } }, metadata: n }, g, v), u(null, t = { value: i }, e, { kind: "class", name: i.name, metadata: n }, null, s), i = t.value, n && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
-  })(), c.styles = [M, L], c.events = {
-    didChange: "didChange"
-  }, b(i, s), i;
+    } }, metadata: o }, g, v), u(null, t = { value: i }, e, { kind: "class", name: i.name, metadata: o }, null, s), i = t.value, o && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), c.styles = [M, N], b(i, s), i;
 })();
 export {
-  K as SbbCheckboxElement
+  R as SbbCheckboxElement
 };

package/{chip/chip.d.ts → chip-label/chip-label.d.ts}

@@ -2,9 +2,9 @@ import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 /**
  * It displays brief and compact information.
  *
- * @slot - Use the unnamed slot to add content to the `sbb-chip`.
+ * @slot - Use the unnamed slot to add content to the `sbb-chip-label`.
  */
-export declare class SbbChipElement extends LitElement {
+export declare class SbbChipLabelElement extends LitElement {
     static styles: CSSResultGroup;
     /** Size of the chip. */
     accessor size: 'xxs' | 'xs' | 's';
@@ -14,7 +14,7 @@ export declare class SbbChipElement extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sbb-chip': SbbChipElement;
+        'sbb-chip-label': SbbChipLabelElement;
     }
 }
-//# sourceMappingURL=chip.d.ts.map
+//# sourceMappingURL=chip-label.d.ts.map

package/chip-label/chip-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-label.d.ts","sourceRoot":"","sources":["../../../src/elements/chip-label/chip-label.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wBAAwB;IACxB,SACgB,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,GAAG,CAAS;IAEjD,yBAAyB;IACzB,SACgB,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAU;cAEvD,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/chip-label.d.ts

@@ -0,0 +1,2 @@
+export * from './chip-label/chip-label.js';
+//# sourceMappingURL=chip-label.d.ts.map

package/chip-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-label.d.ts","sourceRoot":"","sources":["../../src/elements/chip-label.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/chip-label.js

@@ -0,0 +1,54 @@
+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";
+import { css as S, html as E, LitElement 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}`;
+let q = (() => {
+  var r, b, a;
+  let e = [j("sbb-chip-label")], s, t = [], l, x = I, g, v = [], u = [], m, _ = [], z = [];
+  return a = class extends x {
+    constructor() {
+      super(...arguments);
+      h(this, r, c(this, v, "xxs"));
+      h(this, b, (c(this, u), c(this, _, "milk")));
+      c(this, z);
+    }
+    /** Size of the chip. */
+    get size() {
+      return p(this, r);
+    }
+    set size(o) {
+      d(this, r, o);
+    }
+    /** Color of the chip. */
+    get color() {
+      return p(this, b);
+    }
+    set color(o) {
+      d(this, b, o);
+    }
+    render() {
+      return E`
+      <span class="sbb-chip-label">
+        <span class="sbb-chip__text-wrapper">
+          <slot></slot>
+        </span>
+      </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;
+})();
+export {
+  q as SbbChipLabelElement
+};

package/clock.js

@@ -11,7 +11,7 @@ const $ = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0
 `, D = `<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>
 `, V = `<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>
 `, G = `<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>
-`, B = P`*,: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;top:0;right:0;bottom:0;left: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-zero-time, .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)}}`, R = 12, K = 60, A = 60, j = 50, O = 360, T = 30, Z = 6, q = 360 / 58.5, J = 60, Q = 3600, N = {
+`, B = P`*,: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;top:0;right:0;bottom:0;left: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)}}`, R = 12, K = 60, A = 60, j = 50, O = 360, T = 30, Z = 6, q = 360 / 58.5, J = 60, Q = 3600, N = {
   once: !0,
   passive: !0
 };

package/container/container.js

@@ -1,51 +1,51 @@
 var I = (t) => {
   throw TypeError(t);
 };
-var j = (t, a, s) => a.has(t) || I("Cannot " + s);
-var p = (t, a, s) => (j(t, a, "read from private field"), s ? s.call(t) : a.get(t)), u = (t, a, s) => a.has(t) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), m = (t, a, s, r) => (j(t, a, "write to private field"), r ? r.call(t, s) : a.set(t, s), s);
-import { __esDecorate as g, __runInitializers as d } from "tslib";
-import { css as T, html as U, LitElement as B } from "lit";
+var D = (t, a, s) => a.has(t) || I("Cannot " + s);
+var p = (t, a, s) => (D(t, a, "read from private field"), s ? s.call(t) : a.get(t)), u = (t, a, s) => a.has(t) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), g = (t, a, s, r) => (D(t, a, "write to private field"), r ? r.call(t, s) : a.set(t, s), s);
+import { __esDecorate as m, __runInitializers as d } from "tslib";
+import { css as U, html as j, LitElement as B } from "lit";
 import { customElement as O, property as h } from "lit/decorators.js";
-import { slotState as q, forceType as D } from "../core/decorators.js";
-const A = T`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{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([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}.sbb-container{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]){--sbb-image-border-radius: 0;position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 90rem){:host(:not([expanded],[background-expanded])) ::slotted([slot=image]){--sbb-image-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-border-radius-4x)}}::slotted(img[slot=image]){object-fit:cover;height:100%;width:100%}`;
+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;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([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{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;top:0;right:0;bottom:0;left:0;height:100%;width:100%}`;
 let K = (() => {
-  var l, c, b, n;
-  let t = [O("sbb-container"), q()], a, s = [], r, x = B, _, f = [], k = [], v, y = [], E = [], w, z = [], S = [];
+  var c, l, b, n;
+  let t = [O("sbb-container"), q()], a, s = [], r, x = B, _, k = [], f = [], v, y = [], E = [], w, z = [], S = [];
   return n = class extends x {
     constructor() {
       super(...arguments);
-      u(this, l, d(this, f, !1));
-      u(this, c, (d(this, k), d(this, y, !1)));
+      u(this, c, d(this, k, !1));
+      u(this, l, (d(this, f), d(this, y, !1)));
       u(this, b, (d(this, E), d(this, z, "white")));
       d(this, S);
     }
     /** Whether the container is expanded. */
     get expanded() {
-      return p(this, l);
+      return p(this, c);
     }
     set expanded(o) {
-      m(this, l, o);
+      g(this, c, o);
     }
     /** Whether the background color is shown on full container width on large screens. */
     get backgroundExpanded() {
-      return p(this, c);
+      return p(this, l);
     }
     set backgroundExpanded(o) {
-      m(this, c, o);
+      g(this, l, o);
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
       return p(this, b);
     }
     set color(o) {
-      m(this, b, o);
+      g(this, b, o);
     }
     willUpdate(o) {
       var e, i;
       super.willUpdate(o), o.has("expanded") && ((i = (e = this.querySelector) == null ? void 0 : e.call(this, "sbb-sticky-bar")) == null || i.toggleAttribute("data-expanded", this.expanded));
     }
     render() {
-      return U`
+      return j`
       <div class="sbb-container">
         <slot name="image"></slot>
         <div class="sbb-container__content">
@@ -55,15 +55,15 @@ let K = (() => {
       <slot name="sticky-bar"></slot>
     `;
     }
-  }, l = new WeakMap(), c = new WeakMap(), b = new WeakMap(), r = n, (() => {
+  }, c = new WeakMap(), l = new WeakMap(), b = new WeakMap(), r = n, (() => {
     const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    _ = [D(), h({ type: Boolean, reflect: !0 })], v = [D(), h({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [h({ reflect: !0 })], g(n, null, _, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, i) => {
+    _ = [T(), h({ type: Boolean, reflect: !0 })], v = [T(), h({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [h({ reflect: !0 })], m(n, null, _, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, i) => {
       e.expanded = i;
-    } }, metadata: o }, f, k), g(n, null, v, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, i) => {
+    } }, metadata: o }, k, f), m(n, null, v, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, i) => {
       e.backgroundExpanded = i;
-    } }, metadata: o }, y, E), g(n, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, i) => {
+    } }, metadata: o }, y, E), m(n, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, i) => {
       e.color = i;
-    } }, metadata: o }, z, S), g(null, a = { value: r }, t, { kind: "class", name: r.name, metadata: o }, null, s), r = a.value, o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+    } }, metadata: o }, z, S), m(null, a = { value: r }, t, { kind: "class", name: r.name, metadata: o }, null, s), r = a.value, o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
   })(), n.styles = A, d(r, s), r;
 })();
 export {

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

@@ -37,6 +37,7 @@ export declare class SbbStickyBarElement extends SbbStickyBarElement_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _isZeroAnimationDuration;
     private _detectStickyState;
     /** Animates from normal content flow position to `position: sticky`. */
     stick(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"sticky-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAWb;;;;;;;;;;;;;;GAcG;AACH,qBAKM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAQ;IAEnF,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,UAAU,CAA8E;IAChG,OAAO,CAAC,SAAS,CAA6E;IAC9F,OAAO,CAAC,YAAY,CAGlB;IACF,OAAO,CAAC,WAAW,CAA+E;IAElG,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,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.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.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,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAQ;IAEnF,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"}

package/container/sticky-bar.js

@@ -5,22 +5,27 @@ var p = (a, i, s) => i.has(a) || _("Cannot " + s);
 var g = (a, i, s) => (p(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) => (p(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 C, LitElement as z, html as E } from "lit";
-import { customElement as U, property as A } from "lit/decorators.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 = C`*,: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-zero-time, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-zero-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(: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 M = (() => {
+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(: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, y = I(z), u, h = [], v = [];
-  var n = (r = class extends y {
+  })], i, s = [], e, u = I(C), y, h = [], v = [];
+  var n = (r = class extends u {
     constructor() {
       super(...arguments);
       f(this, b);
-      d(this, b, k(this, h, null)), this._willStick = (k(this, v), new c(this, n.events.willStick)), this._didStick = new c(this, n.events.didStick), this._willUnstick = new c(this, n.events.willUnstick), this._didUnstick = new c(this, n.events.didUnstick), this._observer = new S(this, {
+      d(this, b, k(this, h, null)), this._willStick = (k(this, v), new c(this, n.events.willStick, {
+        cancelable: !0
+      })), this._didStick = new c(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, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -52,6 +57,9 @@ let M = (() => {
     firstUpdated(t) {
       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");
+    }
     _detectStickyState(t) {
       var m;
       this.toggleAttribute("data-initialized", !0);
@@ -60,11 +68,11 @@ let M = (() => {
     }
     /** Animates from normal content flow position to `position: sticky`. */
     stick() {
-      this._state !== "unsticky" || !this._willStick.emit() || (this._state = "sticking", this.hasAttribute("data-sticking") || this._stickyCallback());
+      this._state !== "unsticky" || !this._willStick.emit() || (this._state = "sticking", (!this.hasAttribute("data-sticking") || this._isZeroAnimationDuration()) && this._stickyCallback());
     }
     /** Animates `position: sticky` to normal content flow position. */
     unstick() {
-      this._state !== "sticky" || !this._willUnstick.emit() || (this._state = "unsticking", this.hasAttribute("data-sticking") || this._unstickyCallback());
+      this._state !== "sticky" || !this._willUnstick.emit() || (this._state = "unsticking", (!this.hasAttribute("data-sticking") || this._isZeroAnimationDuration()) && this._unstickyCallback());
     }
     _stickyCallback() {
       this._state = "sticky", this._didStick.emit();
@@ -86,8 +94,8 @@ let M = (() => {
     `;
     }
   }, b = new WeakMap(), e = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    u = [A({ reflect: !0 })], w(r, null, u, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (o) => "color" in o, get: (o) => o.color, set: (o, l) => {
+    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 = {
@@ -99,5 +107,5 @@ let M = (() => {
   return n = e;
 })();
 export {
-  M as SbbStickyBarElement
+  P as SbbStickyBarElement
 };

package/core/base-elements/button-base-element.d.ts

@@ -1,28 +1,20 @@
+import { FormRestoreReason, FormRestoreState } from '../mixins.js';
 import { SbbActionBaseElement } from './action-base-element.js';
 /** Enumeration for type attribute in <button> HTML tag. */
 export type SbbButtonType = 'button' | 'reset' | 'submit';
+declare const SbbButtonBaseElement_base: import('../mixins.js').AbstractConstructor<import('../mixins.js').SbbFormAssociatedMixinType<string>> & typeof SbbActionBaseElement;
 /** Button base class. */
-export declare abstract class SbbButtonBaseElement extends SbbActionBaseElement {
-    /** The type attribute to use for the button. */
-    accessor type: SbbButtonType;
+export declare abstract class SbbButtonBaseElement extends SbbButtonBaseElement_base {
     /**
-     * The name of the button element.
-     *
-     * @description Developer note: In this case updating the attribute must be synchronous.
-     * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+     * The type attribute to use for the button.
+     * @default 'button'
      */
-    set name(name: string);
-    get name(): string;
-    /**
-     * The value of the button element.
-     *
-     * @description Developer note: In this case updating the attribute must be synchronous.
-     * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
-     */
-    set value(value: string);
-    get value(): string;
+    set type(name: SbbButtonType);
+    get type(): SbbButtonType;
     /** The <form> element to associate the button with. */
-    accessor form: string;
+    set form(value: string);
+    get form(): HTMLFormElement | null;
+    private _formId;
     constructor();
     private _handleButtonClick;
     /**
@@ -41,5 +33,22 @@ export declare abstract class SbbButtonBaseElement extends SbbActionBaseElement
     private _dispatchClickEventOnSpaceKeyup;
     private _dispatchClickEvent;
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /**
+     * Intentionally empty, as buttons are not targeted by form reset
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Intentionally empty, as buttons are not targeted by form restore
+     * @internal
+     */
+    formStateRestoreCallback(_state: FormRestoreState | null, _reason: FormRestoreReason): void;
+    /**
+     * Intentionally empty, as button does not write its data in form.
+     * The data is only applied on submit button click as submitter of requestSubmit();
+     * @internal
+     */
+    protected updateFormValue(): void;
 }
+export {};
 //# sourceMappingURL=button-base-element.d.ts.map

package/core/base-elements/button-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/button-base-element.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D,yBAAyB;AACzB,8BAMe,oBAAqB,SAAQ,oBAAoB;IAC9D,gDAAgD;IAChD,SAA4B,IAAI,EAAE,aAAa,CAAY;IAE3D;;;;;OAKG;IACH,IACW,IAAI,CAAC,IAAI,EAAE,MAAM,EAE3B;IACD,IAAW,IAAI,IAAI,MAAM,CAExB;IAED;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,uDAAuD;IACvD,SAEgB,IAAI,EAAE,MAAM,CAAM;;IAwBlC,OAAO,CAAC,kBAAkB,CAmBxB;IAEF;;;;OAIG;IACH,OAAO,CAAC,4BAA4B,CAKlC;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,+BAA+B,CAKrC;IAEF,OAAO,CAAC,mBAAmB,CAezB;IAEc,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;CAKR"}
+{"version":3,"file":"button-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/button-base-element.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;;AAE1D,yBAAyB;AACzB,8BAKe,oBAAqB,SAAQ,yBAA4C;IACtF;;;OAGG;IACH,IACoB,IAAI,CAAC,IAAI,EAAE,aAAa,EAE3C;IACD,IAAoB,IAAI,IAAI,aAAa,CAExC;IAED,uDAAuD;IACvD,IACoB,IAAI,CAAC,KAAK,EAAE,MAAM,EAErC;IACD,IAAoB,IAAI,IAAI,eAAe,GAAG,IAAI,CAMjD;IACD,OAAO,CAAC,OAAO,CAAc;;IA2B7B,OAAO,CAAC,kBAAkB,CAyBxB;IAEF;;;;OAIG;IACH,OAAO,CAAC,4BAA4B,CAKlC;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,+BAA+B,CAKrC;IAEF,OAAO,CAAC,mBAAmB,CAezB;IAEc,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAEzC;;;OAGG;IACa,wBAAwB,CACtC,MAAM,EAAE,gBAAgB,GAAG,IAAI,EAC/B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAEP;;;;OAIG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;CAClC"}