@sbb-esta/lyne-elements 4.5.0 → 4.5.1

package/autocomplete/autocomplete-base-element.js

@@ -169,7 +169,7 @@ let Bt = (() => {
     }
     /** Closes the autocomplete. */
     close() {
-      this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.pendingAutoSelectedOption && (this.pendingAutoSelectedOption.selected = !0, this._setValueAndDispatchEvents(this.pendingAutoSelectedOption)), this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
+      this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.pendingAutoSelectedOption && (this.pendingAutoSelectedOption.selected = !0, this._setValueAndDispatchEvents(this.pendingAutoSelectedOption, !0)), this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
     }
     _isZeroAnimationDuration() {
       return gt(this, "--sbb-options-panel-animation-duration");
@@ -205,10 +205,10 @@ let Bt = (() => {
     setPendingSelection(t) {
       this.pendingAutoSelectedOption = t, this._setInputValue(t);
     }
-    _setValueAndDispatchEvents(t) {
-      this.options.filter((e) => e.id !== t.id && e.selected).forEach((e) => e.selected = !1), this.pendingAutoSelectedOption = null, this.triggerElement && (this._setInputValue(t), this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._lastUserInput = null, this.triggerElement.dispatchEvent(new CustomEvent("inputAutocomplete", {
+    _setValueAndDispatchEvents(t, e = !1) {
+      this.options.filter((i) => i.id !== t.id && i.selected).forEach((i) => i.selected = !1), this.pendingAutoSelectedOption = null, this.triggerElement && (this._setInputValue(t), this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._lastUserInput = null, this.triggerElement.dispatchEvent(new CustomEvent("inputAutocomplete", {
         detail: { option: t }
-      })), this.triggerElement.focus());
+      })), e || this.triggerElement.focus());
     }
     /** Set the option value within the input element */
     _setInputValue(t) {
@@ -298,7 +298,7 @@ let Bt = (() => {
         // interaction with other components (necessary for the 'sbb-chip-group' use case).
         capture: !0
       }), this.triggerElement?.addEventListener("blur", (t) => {
-        this.contains(t.relatedTarget) || (this.autoSelectActiveOptionOnBlur && this.activeOption && this.triggerElement?.value && (this.activeOption.selected = !0, this._setValueAndDispatchEvents(this.activeOption)), this.close());
+        this.contains(t.relatedTarget) || (this.autoSelectActiveOptionOnBlur && this.activeOption && this._lastUserInput && this.triggerElement?.value && (this.activeOption.selected = !0, this._setValueAndDispatchEvents(this.activeOption, !0)), this.close());
       }, {
         signal: this._openPanelEventsController.signal
       });

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

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

package/container/container/container.component.js

@@ -3,20 +3,20 @@ var I = (t) => {
 };
 var B = (t, a, s) => a.has(t) || I("Cannot " + s);
 var p = (t, a, s) => (B(t, a, "read from private field"), s ? s.call(t) : a.get(t)), g = (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), u = (t, a, s, r) => (B(t, a, "write to private field"), r ? r.call(t, s) : a.set(t, s), s);
-import { __esDecorate as h, __runInitializers as i } from "tslib";
+import { __esDecorate as m, __runInitializers as i } from "tslib";
 import { css as D, LitElement as T, html as U } from "lit";
-import { customElement as j, property as m } from "lit/decorators.js";
+import { customElement as j, property as h } from "lit/decorators.js";
 import { forceType as C } from "../../core/decorators.js";
 import { SbbElementInternalsMixin as O, ɵstateController as q } from "../../core/mixins.js";
 import { boxSizingStyles as F } from "../../core/styles.js";
-const L = D`@charset "UTF-8";:host{--sbb-container-background-border-radius: 0;--sbb-container-color: inherit;display:block}:host(:is(:not([color]),[color=white])){--sbb-container-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-container-background-color: var(--sbb-background-color-3)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-1-negative)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-background-color-1-negative)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-background-color-2-negative)}:host(:is(:state(slotted-image),[state--slotted-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(:is(:state(slotted-image),[state--slotted-image])[background-expanded]){position:relative}@media(min-width:90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-container{max-width:var(--sbb-spacing-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-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}:host(:is(:state(slotted-image),[state--slotted-image]):not([background-expanded])) .sbb-container{position:relative}:host(:is(:state(slotted-image),[state--slotted-image])) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
+const L = D`@charset "UTF-8";:host{display:block}:host(:is(:not([color]),[color=white])){--sbb-container-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-container-background-color: var(--sbb-background-color-3)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-1-negative)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-background-color-1-negative)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-background-color-2-negative)}:host(:is(:state(slotted-image),[state--slotted-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(:is(:state(slotted-image),[state--slotted-image])[background-expanded]){position:relative}@media(min-width:90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-container{max-width:var(--sbb-spacing-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-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}:host(:is(:state(slotted-image),[state--slotted-image]):not([background-expanded])) .sbb-container{position:relative}:host(:is(:state(slotted-image),[state--slotted-image])) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
 let Q = (() => {
   var c, d, l, n;
-  let t = [j("sbb-container")], a, s = [], r, x = O(T), k, v = [], _ = [], f, y = [], E = [], w, S = [], z = [];
+  let t = [j("sbb-container")], a, s = [], r, x = O(T), v, k = [], _ = [], f, y = [], E = [], w, S = [], z = [];
   return n = class extends x {
     constructor() {
       super(...arguments);
-      g(this, c, i(this, v, !1));
+      g(this, c, i(this, k, !1));
       g(this, d, (i(this, _), i(this, y, !1)));
       g(this, l, (i(this, E), i(this, S, "white")));
       i(this, z);
@@ -61,13 +61,13 @@ let Q = (() => {
     }
   }, c = new WeakMap(), d = new WeakMap(), l = new WeakMap(), r = n, (() => {
     const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    k = [C(), m({ type: Boolean, reflect: !0 })], f = [C(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [m({ reflect: !0 })], h(n, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, b) => {
+    v = [C(), h({ type: Boolean, reflect: !0 })], f = [C(), h({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [h({ reflect: !0 })], m(n, null, v, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, b) => {
       e.expanded = b;
-    } }, metadata: o }, v, _), h(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, b) => {
+    } }, metadata: o }, k, _), m(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, b) => {
       e.backgroundExpanded = b;
-    } }, metadata: o }, y, E), h(n, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, b) => {
+    } }, 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, b) => {
       e.color = b;
-    } }, metadata: o }, S, z), h(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 }, S, z), 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 = [F, L], i(r, s), r;
 })();
 export {

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

@@ -2,7 +2,7 @@ var x = (s) => {
   throw TypeError(s);
 };
 var w = (s, i, e) => i.has(s) || x("Cannot " + e);
-var k = (s, i, e) => (w(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, r) => (w(s, i, "write to private field"), r ? r.call(s, e) : i.set(s, e), e);
+var k = (s, i, e) => (w(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, n) => (w(s, i, "write to private field"), n ? n.call(s, e) : i.set(s, e), e);
 import { __esDecorate as y, __runInitializers as d } from "tslib";
 import { IntersectionController as E } from "@lit-labs/observers/intersection-controller.js";
 import { css as C, LitElement as I, html as R } from "lit";
@@ -10,16 +10,16 @@ import { customElement as A, property as z } from "lit/decorators.js";
 import { isLean as B, isZeroAnimationDuration as D } from "../../core/dom.js";
 import { SbbUpdateSchedulerMixin as U, SbbElementInternalsMixin as T } from "../../core/mixins.js";
 import { boxSizingStyles as H } from "../../core/styles.js";
-const L = C`: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(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_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(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--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:"";inset: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(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-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;inset: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(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 100%,-100% 100%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, 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%)}}`;
+const L = C`:host{--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-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_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(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--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, unset);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:0s;animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset: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(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-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, none)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset: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(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 100%,-100% 100%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, 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, transparent);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 F = (() => {
-  var o, c, n;
-  let s = [A("sbb-sticky-bar")], i, e = [], r, h = U(T(I)), g, v = [], m = [], p, _ = [], f = [];
-  return n = class extends h {
+  var o, c, r;
+  let s = [A("sbb-sticky-bar")], i, e = [], n, h = U(T(I)), g, p = [], v = [], m, _ = [], f = [];
+  return r = class extends h {
     constructor() {
       super();
       u(this, o);
       u(this, c);
-      l(this, o, d(this, v, null)), l(this, c, (d(this, m), d(this, _, B() ? "s" : "m"))), this._stateInternal = d(this, f), this._observer = new E(this, {
+      l(this, o, d(this, p, null)), l(this, c, (d(this, v), d(this, _, B() ? "s" : "m"))), this._stateInternal = d(this, f), this._observer = new E(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -102,19 +102,19 @@ let F = (() => {
       <div class="sbb-sticky-bar__intersector"></div>
     `;
     }
-  }, o = new WeakMap(), c = new WeakMap(), r = n, (() => {
+  }, o = new WeakMap(), c = new WeakMap(), n = r, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    g = [z({ reflect: !0 })], p = [z({ reflect: !0 })], y(n, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
+    g = [z({ reflect: !0 })], m = [z({ reflect: !0 })], y(r, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
       a.color = b;
-    } }, metadata: t }, v, m), y(n, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
+    } }, metadata: t }, p, v), y(r, null, m, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
       a.size = b;
-    } }, metadata: t }, _, f), y(null, i = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, e), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = [H, L], n.events = {
+    } }, metadata: t }, _, f), y(null, i = { value: n }, s, { kind: "class", name: n.name, metadata: t }, null, e), n = i.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = [H, L], r.events = {
     beforestick: "beforestick",
     stick: "stick",
     beforeunstick: "beforeunstick",
     unstick: "unstick"
-  }, d(r, e), r;
+  }, d(n, e), n;
 })();
 export {
   F as SbbStickyBarElement

package/core/datetime/temporal-date-adapter.js

@@ -1,9 +1,17 @@
 import { SbbLanguageController as a } from "../controllers.js";
 import { DateAdapter as o } from "./date-adapter.js";
 const i = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
-if (typeof Temporal != "object")
-  throw new Error("Temporal is not available in the current environment. Please make sure to include the temporal polyfill.");
-class l extends o {
+class d extends o {
+  /**
+   * @param cutoffYearOffset The threshold on whether a two-digit year
+   * should be treated as belonging to 2000 or 1900. e.g. with 15 (default)
+   * the current year plus 15 will be treated as belonging to 2000, and the rest to 1900.
+   * So e.g. with the current year 2025, 40 will be treated as 2040, while 41 will be treated as 1941.
+   */
+  constructor(e) {
+    if (super(e), typeof Temporal != "object")
+      throw new Error("Temporal is not available in the current environment. Please make sure to include the temporal polyfill.");
+  }
   /** Gets the year of the input date. */
   getYear(e) {
     return e.year;
@@ -132,8 +140,6 @@ class l extends o {
     return Array.from({ length: e }).map((t, n) => r(n));
   }
 }
-const u = new l();
 export {
-  l as TemporalDateAdapter,
-  u as temporalDateAdapter
+  d as TemporalDateAdapter
 };

package/core/datetime.js

@@ -1,17 +1,16 @@
-import { DAYS_PER_ROW as a, DateAdapter as A, FORMAT_DATE as r, ISO8601_FORMAT_DATE as _, MONTHS_PER_PAGE as R, MONTHS_PER_ROW as E, YEARS_PER_PAGE as p, YEARS_PER_ROW as o } from "./datetime/date-adapter.js";
-import { NativeDateAdapter as O, defaultDateAdapter as P } from "./datetime/native-date-adapter.js";
-import { TemporalDateAdapter as d, temporalDateAdapter as S } from "./datetime/temporal-date-adapter.js";
+import { DAYS_PER_ROW as A, DateAdapter as _, FORMAT_DATE as R, ISO8601_FORMAT_DATE as a, MONTHS_PER_PAGE as r, MONTHS_PER_ROW as E, YEARS_PER_PAGE as p, YEARS_PER_ROW as O } from "./datetime/date-adapter.js";
+import { NativeDateAdapter as D, defaultDateAdapter as P } from "./datetime/native-date-adapter.js";
+import { TemporalDateAdapter as S } from "./datetime/temporal-date-adapter.js";
 export {
-  a as DAYS_PER_ROW,
-  A as DateAdapter,
-  r as FORMAT_DATE,
-  _ as ISO8601_FORMAT_DATE,
-  R as MONTHS_PER_PAGE,
+  A as DAYS_PER_ROW,
+  _ as DateAdapter,
+  R as FORMAT_DATE,
+  a as ISO8601_FORMAT_DATE,
+  r as MONTHS_PER_PAGE,
   E as MONTHS_PER_ROW,
-  O as NativeDateAdapter,
-  d as TemporalDateAdapter,
+  D as NativeDateAdapter,
+  S as TemporalDateAdapter,
   p as YEARS_PER_PAGE,
-  o as YEARS_PER_ROW,
-  P as defaultDateAdapter,
-  S as temporalDateAdapter
+  O as YEARS_PER_ROW,
+  P as defaultDateAdapter
 };

package/core/styles/core.scss

@@ -32,6 +32,9 @@ $theme: 'standard' !default;
 @use '../../card/card/card.global' as card with (
   $theme: $theme
 );
+@use '../../chip-label/chip-label.global' as chip-label with (
+  $theme: $theme
+);
 @use '../../chip/chip/chip.global' as chip with (
   $theme: $theme
 );
@@ -59,6 +62,12 @@ $theme: 'standard' !default;
 @use '../../clock/clock.global' as clock with (
   $theme: $theme
 );
+@use '../../container/container/container.global' as container with (
+  $theme: $theme
+);
+@use '../../container/sticky-bar/sticky-bar.global' as sticky-bar with (
+  $theme: $theme
+);
 @use '../../divider/divider.global' as divider with (
   $theme: $theme
 );
@@ -114,12 +123,15 @@ $theme: 'standard' !default;
   @include card.base;
   @include card-badge.base;
   @include carousel.base;
+  @include chip-label.base;
   @include chip.base;
   @include chip-group.base;
   @include panel-common.base;
   @include checkbox.base;
   @include checkbox-group.base;
   @include checkbox-common.base;
+  @include container.base;
+  @include sticky-bar.base;
   @include clock.base;
   @include divider.base;
   @include expansion-panel.base;
@@ -241,6 +253,7 @@ $theme: 'standard' !default;
 @include font-face.font-declarations;
 
 // Components global styles
+@include container.rules;
 @include tab-nav-bar.rules;
 
 // TODO: discuss where to add these classes
@@ -460,18 +473,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-container components when the global CSS refactoring happens
-sbb-container {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-object-fit: cover;
-
-    border-radius: var(--sbb-container-background-border-radius);
-    height: 100%;
-    position: absolute;
-  }
-}
-
 // TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
 sbb-flip-card-summary {
   > [slot='image']:is(sbb-image, img),

package/core/styles/mixins/chip.scss

@@ -25,37 +25,37 @@
 @mixin chip-label-variables--size-xxs {
   --sbb-chip-label-padding-block: 0em;
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
 }
 
 @mixin chip-label-variables--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-text-font-size-xs);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xs);
 }
 
 @mixin chip-label-variables--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-text-font-size-s);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-s);
 }
 
 @mixin chip-label-rules {
-  @include typo.text;
-
   // We need an even value to make it work smoothly in Safari
   line-height: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: calc(
-    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size) +
+    var(--sbb-typo-line-height-text) * var(--sbb-chip-label-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);
+  font-size: var(--sbb-chip-label-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
 
   // Overflow hidden needed because line-height can be taller than height which can cause weird layout shifting
   overflow: hidden;

package/core.css

@@ -1341,6 +1341,12 @@
   --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
   --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
   --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-background-color: var(--sbb-background-color-3);
   --sbb-chip-background-color-active: var(--sbb-background-color-1);
   --sbb-chip-background-color-hover: var(--sbb-background-color-1);
@@ -1396,6 +1402,13 @@
   --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
   --sbb-checkbox-label-color: var(--sbb-color-color-3);
   --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-container-background-border-radius: 0;
+  --sbb-container-color: inherit;
+  --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
+  --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
+  --sbb-sticky-bar-position: sticky;
+  --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
   --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
   --sbb-clock-face-color: var(--sbb-color-1);
   --sbb-clock-background-color: var(--sbb-background-color-1);
@@ -1658,6 +1671,14 @@
   font-display: swap;
   font-weight: 300;
 }
+sbb-container > [slot=image]:is(sbb-image, img),
+sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-object-fit: cover;
+  border-radius: var(--sbb-container-background-border-radius);
+  height: 100%;
+  position: absolute;
+}
+
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -1941,14 +1962,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-container > [slot=image]:is(sbb-image, img),
-sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-object-fit: cover;
-  border-radius: var(--sbb-container-background-border-radius);
-  height: 100%;
-  position: absolute;
-}
-
 sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
 sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: auto;

package/custom-elements.json

@@ -2822,6 +2822,10 @@
                   "type": {
                     "text": "SbbOptionBaseElement<T>"
                   }
+                },
+                {
+                  "name": "preventFocus",
+                  "default": "false"
                 }
               ]
             },
@@ -4118,6 +4122,10 @@
                   "type": {
                     "text": "SbbOptionBaseElement<T>"
                   }
+                },
+                {
+                  "name": "preventFocus",
+                  "default": "false"
                 }
               ],
               "inheritedFrom": {
@@ -51278,11 +51286,6 @@
             "name": "DateAdapter",
             "module": "core/datetime/date-adapter.js"
           }
-        },
-        {
-          "kind": "variable",
-          "name": "temporalDateAdapter",
-          "default": "new TemporalDateAdapter()"
         }
       ],
       "exports": [
@@ -51293,14 +51296,6 @@
             "name": "TemporalDateAdapter",
             "module": "core/datetime/temporal-date-adapter.js"
           }
-        },
-        {
-          "kind": "js",
-          "name": "temporalDateAdapter",
-          "declaration": {
-            "name": "temporalDateAdapter",
-            "module": "core/datetime/temporal-date-adapter.js"
-          }
         }
       ]
     },
@@ -104859,6 +104854,16 @@
               "name": "_onLabelSlotChange",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_ensureActiveTab",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_initSelection",

package/development/autocomplete/autocomplete-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}