@sbb-esta/lyne-elements 3.7.0 → 3.9.0

package/sidebar/sidebar/sidebar.component.js

@@ -1,30 +1,30 @@
 var B = (s) => {
   throw TypeError(s);
 };
-var $ = (s, i, a) => i.has(s) || B("Cannot " + a);
-var v = (s, i, a) => ($(s, i, "read from private field"), a ? a.call(s) : i.get(s)), m = (s, i, a) => i.has(s) ? B("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, a), b = (s, i, a, l) => ($(s, i, "write to private field"), l ? l.call(s, a) : i.set(s, a), a);
+var $ = (s, r, i) => r.has(s) || B("Cannot " + i);
+var m = (s, r, i) => ($(s, r, "read from private field"), i ? i.call(s) : r.get(s)), v = (s, r, i) => r.has(s) ? B("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, i), b = (s, r, i, l) => ($(s, r, "write to private field"), l ? l.call(s, i) : r.set(s, i), i);
 import { __esDecorate as d, __runInitializers as n } from "tslib";
 import { ResizeController as j } from "@lit-labs/observers/resize-controller.js";
 import { css as P, isServer as N, html as R } from "lit";
-import { customElement as q, property as f, eventOptions as L } from "lit/decorators.js";
+import { customElement as q, property as g, eventOptions as L } from "lit/decorators.js";
 import { SbbFocusTrapController as G } from "../../core/a11y.js";
 import { SbbOpenCloseBaseElement as H } from "../../core/base-elements.js";
 import { SbbEscapableOverlayController as J } from "../../core/controllers.js";
-import { forceType as w, handleDistinctChange as K } from "../../core/decorators.js";
+import { forceType as k, handleDistinctChange as K } from "../../core/decorators.js";
 import { isZeroAnimationDuration as Q } from "../../core/dom.js";
 import { SbbAnimationCompleteMixin as X } from "../../core/mixins.js";
-const Y = P`*,:before,:after{box-sizing:border-box}:host{display:block;width:20rem;--sbb-link-text-decoration-line: none;--sbb-sidebar-background-color: var(--sbb-color-white);--sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);--sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);--sbb-sidebar-scrollbar-placeholder-width: var(--sbb-spacing-fixed-3x);--sbb-sidebar-border-radius: var(--sbb-border-radius-8x);--sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);--sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);--sbb-sidebar__margin: 0;--sbb-sidebar__margin-block-start: var(--sbb-sidebar-margin);--sbb-sidebar__translate-x: -100%;--sbb-sidebar__z-index: 2;--sbb-sidebar__padding-inline-end: var(--sbb-sidebar-padding);--sbb-sidebar__padding-block-start: var(--sbb-sidebar-padding);--sbb-sidebar__border-radius-start: var(--sbb-sidebar-border-radius);--sbb-sidebar__border-radius-end: 0;--sbb-sidebar__close-button-size: var(--sbb-size-element-xs)}@supports (scrollbar-gutter: stable) and (not (-webkit-touch-callout: none)){:host{--sbb-sidebar__padding-inline-end: calc( var(--sbb-sidebar-padding) - var(--sbb-sidebar-scrollbar-placeholder-width) )}}:host([color=milk]){--sbb-sidebar-background-color: var(--sbb-color-milk)}:host(:is([mode=over],[data-mode-over-forced]:not([data-mode-over-forced-closing]))){--sbb-sidebar__margin: var(--sbb-sidebar-margin);--sbb-sidebar__border-radius-end: var(--sbb-sidebar-border-radius);--sbb-sidebar__z-index: 3}:host(:is(:dir(rtl),[position=end])){--sbb-sidebar__translate-x: 100%}:host(:dir(rtl)[position=end]){--sbb-sidebar__translate-x: -100%}.sbb-sidebar{width:inherit;max-width:calc(100% - 2 * var(--sbb-sidebar__margin));background-color:var(--sbb-sidebar-background-color);display:flex;flex-direction:column;position:absolute;overflow:hidden;inset-block:0;z-index:var(--sbb-sidebar__z-index);border-start-start-radius:var(--sbb-sidebar__border-radius-start);border-start-end-radius:var(--sbb-sidebar__border-radius-start);border-end-start-radius:var(--sbb-sidebar__border-radius-end);border-end-end-radius:var(--sbb-sidebar__border-radius-end);margin:var(--sbb-sidebar__margin);margin-block-start:var(--sbb-sidebar__margin-block-start);transition-duration:var(--sbb-sidebar-container-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:width,translate;translate:none}:host([position=end]) .sbb-sidebar{inset-inline-end:0}:host([data-state=closed]) .sbb-sidebar{visibility:hidden}:host(:is([data-state=closing],[data-state=closed])) .sbb-sidebar{translate:var(--sbb-sidebar__translate-x) 0}.sbb-sidebar-title-section{display:flex;width:100%;gap:var(--sbb-sidebar-title-gap);background-color:var(--sbb-sidebar-background-color);padding-inline:var(--sbb-sidebar-padding);transition:box-shadow var(--sbb-animation-easing) var(--sbb-sidebar-container-animation-duration);box-shadow:none}:host([data-scrolled]) .sbb-sidebar-title-section{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-soft-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-soft-1-color)}.sbb-sidebar-content-section{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sidebar-content-section::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sidebar-content-section::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sidebar-content-section::-webkit-scrollbar-button,.sbb-sidebar-content-section::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sidebar-content-section{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sidebar-content-section{padding-block-start:var(--sbb-sidebar__padding-block-start);padding-inline:var(--sbb-sidebar-padding) var(--sbb-sidebar__padding-inline-end);overflow-y:auto;flex-grow:1;outline-color:var(--sbb-focus-outline-color)}@supports (scrollbar-gutter: stable){.sbb-sidebar-content-section{scrollbar-gutter:stable}}::slotted(sbb-sidebar-title){flex-grow:1;margin-block:var(--sbb-sidebar-title-padding-block)}::slotted(sbb-sidebar-close-button){order:1;margin-inline-end:calc(-1 * (var(--sbb-sidebar-padding) - var(--sbb-sidebar-title-padding-block)));margin-block:var(--sbb-sidebar-title-padding-block);inset-inline-end:var(--sbb-sidebar-padding)}`;
+const Y = P`*,:before,:after{box-sizing:border-box}:host{display:block;width:20rem;--sbb-link-text-decoration-line: none;--sbb-sidebar-background-color: var(--sbb-background-color-1);--sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);--sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);--sbb-sidebar-scrollbar-placeholder-width: var(--sbb-spacing-fixed-3x);--sbb-sidebar-border-radius: var(--sbb-border-radius-8x);--sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);--sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);--sbb-sidebar__margin: 0;--sbb-sidebar__margin-block-start: var(--sbb-sidebar-margin);--sbb-sidebar__translate-x: -100%;--sbb-sidebar__z-index: 2;--sbb-sidebar__padding-inline-end: var(--sbb-sidebar-padding);--sbb-sidebar__padding-block-start: var(--sbb-sidebar-padding);--sbb-sidebar__border-radius-start: var(--sbb-sidebar-border-radius);--sbb-sidebar__border-radius-end: 0;--sbb-sidebar__close-button-size: var(--sbb-size-element-xs)}@supports (scrollbar-gutter: stable) and (not (-webkit-touch-callout: none)){:host{--sbb-sidebar__padding-inline-end: calc( var(--sbb-sidebar-padding) - var(--sbb-sidebar-scrollbar-placeholder-width) )}}:host([color=milk]){--sbb-sidebar-background-color: var(--sbb-background-color-3)}:host(:is([mode=over],[data-mode-over-forced]:not([data-mode-over-forced-closing]))){--sbb-sidebar__margin: var(--sbb-sidebar-margin);--sbb-sidebar__border-radius-end: var(--sbb-sidebar-border-radius);--sbb-sidebar__z-index: 3}:host(:is(:dir(rtl),[position=end])){--sbb-sidebar__translate-x: 100%}:host(:dir(rtl)[position=end]){--sbb-sidebar__translate-x: -100%}.sbb-sidebar{width:inherit;max-width:calc(100% - 2 * var(--sbb-sidebar__margin));background-color:var(--sbb-sidebar-background-color);display:flex;flex-direction:column;position:absolute;overflow:hidden;inset-block:0;z-index:var(--sbb-sidebar__z-index);border-start-start-radius:var(--sbb-sidebar__border-radius-start);border-start-end-radius:var(--sbb-sidebar__border-radius-start);border-end-start-radius:var(--sbb-sidebar__border-radius-end);border-end-end-radius:var(--sbb-sidebar__border-radius-end);margin:var(--sbb-sidebar__margin);margin-block-start:var(--sbb-sidebar__margin-block-start);transition-duration:var(--sbb-sidebar-container-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:width,translate;translate:none}:host([position=end]) .sbb-sidebar{inset-inline-end:0}:host([data-state=closed]) .sbb-sidebar{visibility:hidden}:host(:is([data-state=closing],[data-state=closed])) .sbb-sidebar{translate:var(--sbb-sidebar__translate-x) 0}.sbb-sidebar-title-section{display:flex;width:100%;gap:var(--sbb-sidebar-title-gap);background-color:var(--sbb-sidebar-background-color);padding-inline:var(--sbb-sidebar-padding);transition:box-shadow var(--sbb-animation-easing) var(--sbb-sidebar-container-animation-duration);box-shadow:none}:host([data-scrolled]) .sbb-sidebar-title-section{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-soft-2),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-soft-1)}.sbb-sidebar-content-section{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-sidebar-content-section::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-sidebar-content-section::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-sidebar-content-section::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-sidebar-content-section::-webkit-scrollbar-button,.sbb-sidebar-content-section::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-sidebar-content-section{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-sidebar-content-section{padding-block-start:var(--sbb-sidebar__padding-block-start);padding-inline:var(--sbb-sidebar-padding) var(--sbb-sidebar__padding-inline-end);overflow-y:auto;flex-grow:1;outline-color:var(--sbb-focus-outline-color)}@supports (scrollbar-gutter: stable){.sbb-sidebar-content-section{scrollbar-gutter:stable}}::slotted(sbb-sidebar-title){flex-grow:1;margin-block:var(--sbb-sidebar-title-padding-block)}::slotted(sbb-sidebar-close-button){order:1;margin-inline-end:calc(-1 * (var(--sbb-sidebar-padding) - var(--sbb-sidebar-title-padding-block)));margin-block:var(--sbb-sidebar-title-padding-block);inset-inline-end:var(--sbb-sidebar-padding)}`;
 let ue = (() => {
-  var c, h, u, p, _, r;
-  let s = [q("sbb-sidebar")], i, a = [], l, k = X(H), x = [], O, y = [], C = [], S, E = [], z = [], A, F = [], T = [], D, I = [], W = [], V, U = [], M = [], Z;
-  return r = class extends k {
+  var c, h, u, p, _, a;
+  let s = [q("sbb-sidebar")], r, i = [], l, w = X(H), x = [], O, y = [], C = [], S, E = [], z = [], A, F = [], T = [], D, I = [], W = [], V, U = [], M = [], Z;
+  return a = class extends w {
     constructor() {
       super();
-      m(this, c);
-      m(this, h);
-      m(this, u);
-      m(this, p);
-      m(this, _);
+      v(this, c);
+      v(this, h);
+      v(this, u);
+      v(this, p);
+      v(this, _);
       b(this, c, (n(this, x), n(this, y, "white"))), b(this, h, (n(this, C), n(this, E, "side"))), b(this, u, (n(this, z), n(this, F, "start"))), b(this, p, (n(this, T), n(this, I, !1))), b(this, _, (n(this, W), n(this, U, !1))), this._container = (n(this, M), null), this._lastFocusedElement = null, this._focusTrapController = new G(this), this._escapableOverlayController = new J(this), this.addController(new j(this, {
         skipInitial: !0,
         callback: () => this._updateSidebarWidth()
@@ -34,21 +34,21 @@ let ue = (() => {
     }
     /** Background color of the sidebar. Either `white` or `milk`. */
     get color() {
-      return v(this, c);
+      return m(this, c);
     }
     set color(t) {
       b(this, c, t);
     }
     /** Mode of the sidebar; one of 'side' or 'over'. */
     get mode() {
-      return v(this, h);
+      return m(this, h);
     }
     set mode(t) {
       b(this, h, t);
     }
     /** The side that the sidebar is attached to. */
     get position() {
-      return v(this, u);
+      return m(this, u);
     }
     set position(t) {
       b(this, u, t);
@@ -59,7 +59,7 @@ let ue = (() => {
      * the animation will be skipped.
      */
     get opened() {
-      return v(this, p);
+      return m(this, p);
     }
     set opened(t) {
       b(this, p, t);
@@ -70,7 +70,7 @@ let ue = (() => {
      * If explicitly enabled, focus will be moved into the sidebar in `side` mode as well.
      */
     get focusOnOpen() {
-      return v(this, _);
+      return m(this, _);
     }
     set focusOnOpen(t) {
       b(this, _, t);
@@ -144,8 +144,8 @@ let ue = (() => {
       const o = this.offsetWidth;
       if (!o)
         return;
-      const g = `${o}px`;
-      e.style.getPropertyValue(this._buildCssWidthVar()) !== g && e.style.setProperty(this._buildCssWidthVar(), g);
+      const f = `${o}px`;
+      e.style.getPropertyValue(this._buildCssWidthVar()) !== f && e.style.setProperty(this._buildCssWidthVar(), f);
     }
     _buildCssWidthVar(t = this.position) {
       return `--sbb-sidebar-container__${t}-width`;
@@ -167,20 +167,20 @@ let ue = (() => {
       </div>
     </div>`;
     }
-  }, c = new WeakMap(), h = new WeakMap(), u = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), l = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    O = [f({ reflect: !0 })], S = [w((e) => e === "over" ? "over" : "side"), f({ reflect: !0 })], A = [w((e) => e === "end" ? "end" : "start"), K((e, o, g) => e._updateSidebarWidth(g)), f({ reflect: !0 })], D = [w(), f({ type: Boolean, reflect: !0 })], V = [w(), f({ type: Boolean, attribute: "focus-on-open" })], Z = [L({ passive: !0 })], d(r, null, O, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, o) => {
+  }, c = new WeakMap(), h = new WeakMap(), u = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), l = a, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+    O = [g({ reflect: !0 })], S = [k((e) => e === "over" ? "over" : "side"), g({ reflect: !0 })], A = [k((e) => e === "end" ? "end" : "start"), K((e, o, f) => e._updateSidebarWidth(f)), g({ reflect: !0 })], D = [k(), g({ type: Boolean, reflect: !0 })], V = [k(), g({ type: Boolean, attribute: "focus-on-open" })], Z = [L({ passive: !0 })], d(a, null, O, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, o) => {
       e.color = o;
-    } }, metadata: t }, y, C), d(r, null, S, { kind: "accessor", name: "mode", static: !1, private: !1, access: { has: (e) => "mode" in e, get: (e) => e.mode, set: (e, o) => {
+    } }, metadata: t }, y, C), d(a, null, S, { kind: "accessor", name: "mode", static: !1, private: !1, access: { has: (e) => "mode" in e, get: (e) => e.mode, set: (e, o) => {
       e.mode = o;
-    } }, metadata: t }, E, z), d(r, null, A, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (e) => "position" in e, get: (e) => e.position, set: (e, o) => {
+    } }, metadata: t }, E, z), d(a, null, A, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (e) => "position" in e, get: (e) => e.position, set: (e, o) => {
       e.position = o;
-    } }, metadata: t }, F, T), d(r, null, D, { kind: "accessor", name: "opened", static: !1, private: !1, access: { has: (e) => "opened" in e, get: (e) => e.opened, set: (e, o) => {
+    } }, metadata: t }, F, T), d(a, null, D, { kind: "accessor", name: "opened", static: !1, private: !1, access: { has: (e) => "opened" in e, get: (e) => e.opened, set: (e, o) => {
       e.opened = o;
-    } }, metadata: t }, I, W), d(r, null, V, { kind: "accessor", name: "focusOnOpen", static: !1, private: !1, access: { has: (e) => "focusOnOpen" in e, get: (e) => e.focusOnOpen, set: (e, o) => {
+    } }, metadata: t }, I, W), d(a, null, V, { kind: "accessor", name: "focusOnOpen", static: !1, private: !1, access: { has: (e) => "focusOnOpen" in e, get: (e) => e.focusOnOpen, set: (e, o) => {
       e.focusOnOpen = o;
-    } }, metadata: t }, U, M), d(r, null, Z, { kind: "method", name: "_detectScrolledState", static: !1, private: !1, access: { has: (e) => "_detectScrolledState" in e, get: (e) => e._detectScrolledState }, metadata: t }, null, x), d(null, i = { value: l }, s, { kind: "class", name: l.name, metadata: t }, null, a), l = i.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = Y, n(l, a), l;
+    } }, metadata: t }, U, M), d(a, null, Z, { kind: "method", name: "_detectScrolledState", static: !1, private: !1, access: { has: (e) => "_detectScrolledState" in e, get: (e) => e._detectScrolledState }, metadata: t }, null, x), d(null, r = { value: l }, s, { kind: "class", name: l.name, metadata: t }, null, i), l = r.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.styles = Y, n(l, i), l;
 })();
 export {
   ue as SbbSidebarElement

package/sidebar.js

@@ -1,4 +1,4 @@
-import { i as t, s as r, a as n } from "./icon-sidebar-button-common-CM-ueEhH.js";
+import { i as t, s as r, a as n } from "./icon-sidebar-button-common-BeRXvifI.js";
 import { SbbIconSidebarElement as m } from "./sidebar/icon-sidebar/icon-sidebar.component.js";
 import { SbbIconSidebarButtonElement as a } from "./sidebar/icon-sidebar-button/icon-sidebar-button.component.js";
 import { SbbIconSidebarContainerElement as l } from "./sidebar/icon-sidebar-container/icon-sidebar-container.component.js";

package/signet/signet.component.js

@@ -7,7 +7,7 @@ import { __esDecorate as m, __runInitializers as n } from "tslib";
 import { css as R, LitElement as z, html as v } from "lit";
 import { customElement as V, property as k } from "lit/decorators.js";
 import { forceType as S } from "../core/decorators.js";
-const B = R`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-signet-height);--sbb-signet-background-color: var(--sbb-color-red);--sbb-signet-panel-color: var(--sbb-color-red);--sbb-signet-icon-color: var(--sbb-color-white);--sbb-signet-aspect-ratio: 2 / 1;--sbb-signet-svg-container-height: auto}@media (forced-colors: active){:host{--sbb-signet-background-color: ButtonText !important;--sbb-signet-panel-color: ButtonText !important;--sbb-signet-icon-color: Canvas !important}}:host([protective-room=minimal]){--sbb-signet-aspect-ratio: 108 / 64;--sbb-signet-svg-container-height: 68.75% }:host([protective-room=ideal]){--sbb-signet-aspect-ratio: 128 / 84;--sbb-signet-svg-container-height: calc(44 / 84 * 100%)}:host([protective-room=panel]){--sbb-signet-aspect-ratio: 143 / 48;--sbb-signet-background-color: unset}@media (forced-colors: active){:host([protective-room=panel]){--sbb-signet-background-color: unset !important}}.sbb-signet{display:flex;align-items:center;justify-content:center;background-color:var(--sbb-signet-background-color);aspect-ratio:var(--sbb-signet-aspect-ratio);width:100%;height:100%}.sbb-signet .sbb-signet__svg-container{display:flex;height:var(--sbb-signet-svg-container-height)}.sbb-signet svg{width:100%;height:100%}#sbb-signet__panel{fill:var(--sbb-signet-panel-color);stroke:var(--sbb-signet-panel-color)}#sbb-signet__icon{fill:var(--sbb-signet-icon-color)}`;
+const B = R`*,:before,:after{box-sizing:border-box}:host{display:block;height:var(--sbb-signet-height);--sbb-signet-background-color: var(--sbb-color-brand);--sbb-signet-panel-color: var(--sbb-color-brand);--sbb-signet-icon-color: var(--sbb-color-white);--sbb-signet-aspect-ratio: 2 / 1;--sbb-signet-svg-container-height: auto}@media (forced-colors: active){:host{--sbb-signet-background-color: ButtonText !important;--sbb-signet-panel-color: ButtonText !important;--sbb-signet-icon-color: Canvas !important}}:host([protective-room=minimal]){--sbb-signet-aspect-ratio: 108 / 64;--sbb-signet-svg-container-height: 68.75% }:host([protective-room=ideal]){--sbb-signet-aspect-ratio: 128 / 84;--sbb-signet-svg-container-height: calc(44 / 84 * 100%)}:host([protective-room=panel]){--sbb-signet-aspect-ratio: 143 / 48;--sbb-signet-background-color: unset}@media (forced-colors: active){:host([protective-room=panel]){--sbb-signet-background-color: unset !important}}.sbb-signet{display:flex;align-items:center;justify-content:center;background-color:var(--sbb-signet-background-color);aspect-ratio:var(--sbb-signet-aspect-ratio);width:100%;height:100%}.sbb-signet .sbb-signet__svg-container{display:flex;height:var(--sbb-signet-svg-container-height)}.sbb-signet svg{width:100%;height:100%}#sbb-signet__panel{fill:var(--sbb-signet-panel-color);stroke:var(--sbb-signet-panel-color)}#sbb-signet__icon{fill:var(--sbb-signet-icon-color)}`;
 let M = (() => {
   var c, l, o;
   let t = [V("sbb-signet")], e, s = [], a, d = z, u, _ = [], f = [], y, L = [], x = [];

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

@@ -2,7 +2,7 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { WithListChildren } from '../core/mixins.js';
 import { SbbBlockLinkButtonElement, SbbBlockLinkElement } from '../link.js';
 import { SbbTitleLevel } from '../title.js';
-declare const SbbSkiplinkListElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNamedSlotListMixinType<SbbBlockLinkElement | SbbBlockLinkButtonElement>> & typeof LitElement;
+declare const SbbSkiplinkListElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbElementInternalsMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNamedSlotListMixinType<SbbBlockLinkElement | SbbBlockLinkButtonElement>> & typeof LitElement & import('../core/mixins.js').SbbElementInternalsConstructor;
 /**
  * It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused.
  *
@@ -19,7 +19,9 @@ export declare class SbbSkiplinkListElement extends SbbSkiplinkListElement_base
     accessor titleContent: string;
     /** The semantic level of the title, e.g. 2 = h2. */
     accessor titleLevel: SbbTitleLevel;
+    private _darkModeController;
     protected willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void;
+    private _isLightMode;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"skiplink-list.component.d.ts","sourceRoot":"","sources":["../../../src/elements/skiplink-list/skiplink-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhG,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;;;;;GAQG;AACH,qBAEM,sBAAuB,SAAQ,2BAGxB;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAA+C;IAE9F,uDAAuD;IACvD,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,oDAAoD;IACpD,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAW3E,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"skiplink-list.component.d.ts","sourceRoot":"","sources":["../../../src/elements/skiplink-list/skiplink-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOhG,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;;;;;GAQG;AACH,qBAEM,sBAAuB,SAAQ,2BAIpC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAA+C;IAE9F,uDAAuD;IACvD,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,oDAAoD;IACpD,SAAwD,UAAU,EAAE,aAAa,CAAO;IAExF,OAAO,CAAC,mBAAmB,CAIxB;cAEgB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAW9F,OAAO,CAAC,YAAY;cAID,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/skiplink-list/skiplink-list.component.js

@@ -1,68 +1,75 @@
-var g = (t) => {
+var x = (t) => {
   throw TypeError(t);
 };
-var L = (t, e, l) => e.has(t) || g("Cannot " + l);
-var v = (t, e, l) => (L(t, e, "read from private field"), l ? l.call(t) : e.get(t)), p = (t, e, l) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, l), b = (t, e, l, a) => (L(t, e, "write to private field"), a ? a.call(t, l) : e.set(t, l), l);
-import { __esDecorate as h, __runInitializers as d } from "tslib";
+var L = (t, i, l) => i.has(t) || x("Cannot " + l);
+var h = (t, i, l) => (L(t, i, "read from private field"), l ? l.call(t) : i.get(t)), p = (t, i, l) => i.has(t) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, l), b = (t, i, l, a) => (L(t, i, "write to private field"), a ? a.call(t, l) : i.set(t, l), l);
+import { __runInitializers as d, __esDecorate as v } from "tslib";
 import { css as z, LitElement as S } from "lit";
-import { customElement as E, property as y } from "lit/decorators.js";
-import { unsafeStatic as C, html as I } from "lit/static-html.js";
+import { customElement as M, property as y } from "lit/decorators.js";
+import { unsafeStatic as C, html as E } from "lit/static-html.js";
+import { SbbDarkModeController as I } from "../core/controllers.js";
 import { forceType as T, omitEmptyConverter as $ } from "../core/decorators.js";
 import { isLean as D } from "../core/dom.js";
-import { SbbNamedSlotListMixin as N } from "../core/mixins.js";
-const j = z`*,:before,:after{box-sizing:border-box}:host{--sbb-skiplink-list-height: 0;--sbb-skiplink-list-overflow: hidden;--sbb-skiplink-list-background: transparent;--sbb-skiplink-list-border: unset;display:block}.sbb-skiplink-list__wrapper{position:fixed;inset-block-start:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-4x);z-index:calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-skiplink-list-title{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-skiplink-list{list-style:none;margin:0;padding:0;font-size:inherit}.sbb-skiplink-list>:is(li,span){box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:list-item;height:var(--sbb-skiplink-list-height);overflow:var(--sbb-skiplink-list-overflow);border-radius:var(--sbb-border-radius-4x);background-color:var(--sbb-skiplink-list-background);border:var(--sbb-skiplink-list-border);width:fit-content}.sbb-skiplink-list>:is(li,span):focus-within{--sbb-skiplink-list-height: auto;--sbb-skiplink-list-overflow: visible;--sbb-skiplink-list-background: var(--sbb-color-black);--sbb-skiplink-list-border: var(--sbb-border-width-2x) solid var(--sbb-color-white)}::slotted([data-sbb-link]){--sbb-focus-outline-color: transparent;--sbb-link-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xxs)}`;
-let J = (() => {
+import { SbbElementInternalsMixin as N, SbbNamedSlotListMixin as j } from "../core/mixins.js";
+const A = z`*,:before,:after{box-sizing:border-box}:host{--sbb-skiplink-list-height: 0;--sbb-skiplink-list-overflow: hidden;--sbb-skiplink-list-background: transparent;--sbb-skiplink-list-border: unset;display:block}.sbb-skiplink-list__wrapper{position:fixed;inset-block-start:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-4x);z-index:calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-skiplink-list-title{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-skiplink-list{list-style:none;margin:0;padding:0;font-size:inherit}.sbb-skiplink-list>:is(li,span){box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-hard-2),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-hard-1);display:list-item;height:var(--sbb-skiplink-list-height);overflow:var(--sbb-skiplink-list-overflow);border-radius:var(--sbb-border-radius-4x);background-color:var(--sbb-skiplink-list-background);border:var(--sbb-skiplink-list-border);width:fit-content}.sbb-skiplink-list>:is(li,span):focus-within{--sbb-skiplink-list-height: auto;--sbb-skiplink-list-overflow: visible;--sbb-skiplink-list-background: var(--sbb-background-color-1-inverted);--sbb-skiplink-list-border: var(--sbb-border-width-2x) solid var(--sbb-border-color-1-inverted)}::slotted([data-sbb-link]){--sbb-focus-outline-color: transparent;--sbb-link-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xxs)}::slotted(*){color-scheme:only light}:host(:is(:state(dark),[state--dark])) ::slotted(*){--sbb-link-color-normal: var(--sbb-color-midnight)}`;
+let Q = (() => {
   var o, n, r;
-  let t = [E("sbb-skiplink-list")], e, l = [], a, k = N(S), f, u = [], m = [], w, _ = [], x = [];
+  let t = [M("sbb-skiplink-list")], i, l = [], a, k = N(j(S)), m, f = [], u = [], _, w = [], g = [];
   return r = class extends k {
     constructor() {
       super(...arguments);
       p(this, o);
       p(this, n);
-      this.listChildLocalNames = ["sbb-block-link", "sbb-block-link-button"], b(this, o, d(this, u, "")), b(this, n, (d(this, m), d(this, _, "2"))), d(this, x);
+      this.listChildLocalNames = ["sbb-block-link", "sbb-block-link-button"], b(this, o, d(this, f, "")), b(this, n, (d(this, u), d(this, w, "2"))), this._darkModeController = (d(this, g), new I(this, () => {
+        for (const e of this.listChildren)
+          e.negative = this._isLightMode();
+      }));
     }
     /** The title text we want to place before the list. */
     get titleContent() {
-      return v(this, o);
+      return h(this, o);
     }
-    set titleContent(i) {
-      b(this, o, i);
+    set titleContent(e) {
+      b(this, o, e);
     }
     /** The semantic level of the title, e.g. 2 = h2. */
     get titleLevel() {
-      return v(this, n);
+      return h(this, n);
     }
-    set titleLevel(i) {
-      b(this, n, i);
+    set titleLevel(e) {
+      b(this, n, e);
     }
-    willUpdate(i) {
-      if (super.willUpdate(i), i.has("listChildren"))
+    willUpdate(e) {
+      if (super.willUpdate(e), e.has("listChildren"))
         for (const s of this.listChildren)
-          s.size = D() ? "xs" : "m", s.negative = !0;
+          s.size = D() ? "xs" : "m", s.negative = this._isLightMode();
+    }
+    _isLightMode() {
+      return !this._darkModeController.matches();
     }
     render() {
-      const i = `h${this.titleLevel || "2"}`;
-      return I`
+      const e = `h${this.titleLevel || "2"}`;
+      return E`
       <div class="sbb-skiplink-list__wrapper">
-        <${C(i)}
+        <${C(e)}
           class="sbb-skiplink-list-title"
           id="sbb-skiplink-list-title-id"
         >
           <slot name="title">${this.titleContent}</slot>
-        </${C(i)}>
+        </${C(e)}>
         ${this.renderList({ ariaLabelledby: "sbb-skiplink-list-title-id" })}
       </div>
     `;
     }
   }, o = new WeakMap(), n = new WeakMap(), a = r, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    f = [T(), y({ attribute: "title-content", reflect: !0, converter: $ })], w = [y({ attribute: "title-level" })], h(r, null, f, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (s) => "titleContent" in s, get: (s) => s.titleContent, set: (s, c) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
+    m = [T(), y({ attribute: "title-content", reflect: !0, converter: $ })], _ = [y({ attribute: "title-level" })], v(r, null, m, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (s) => "titleContent" in s, get: (s) => s.titleContent, set: (s, c) => {
       s.titleContent = c;
-    } }, metadata: i }, u, m), h(r, null, w, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (s) => "titleLevel" in s, get: (s) => s.titleLevel, set: (s, c) => {
+    } }, metadata: e }, f, u), v(r, null, _, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (s) => "titleLevel" in s, get: (s) => s.titleLevel, set: (s, c) => {
       s.titleLevel = c;
-    } }, metadata: i }, _, x), h(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: i }, null, l), a = e.value, i && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), r.styles = j, d(a, l), a;
+    } }, metadata: e }, w, g), v(null, i = { value: a }, t, { kind: "class", name: a.name, metadata: e }, null, l), a = i.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = A, d(a, l), a;
 })();
 export {
-  J as SbbSkiplinkListElement
+  Q as SbbSkiplinkListElement
 };

package/slider/slider.component.js

@@ -1,8 +1,8 @@
 var V = (t) => {
   throw TypeError(t);
 };
-var $ = (t, i, r) => i.has(t) || V("Cannot " + r);
-var m = (t, i, r) => ($(t, i, "read from private field"), r ? r.call(t) : i.get(t)), _ = (t, i, r) => i.has(t) ? V("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, r), v = (t, i, r, n) => ($(t, i, "write to private field"), n ? n.call(t, r) : i.set(t, r), r);
+var $ = (t, i, a) => i.has(t) || V("Cannot " + a);
+var m = (t, i, a) => ($(t, i, "read from private field"), a ? a.call(t) : i.get(t)), _ = (t, i, a) => i.has(t) ? V("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, a), v = (t, i, a, n) => ($(t, i, "write to private field"), n ? n.call(t, a) : i.set(t, a), a);
 import { __esDecorate as o, __runInitializers as c } from "tslib";
 import { css as C, LitElement as T, nothing as p, html as f } from "lit";
 import { customElement as O, property as h } from "lit/decorators.js";
@@ -10,13 +10,13 @@ import { ref as U } from "lit/directives/ref.js";
 import { hostAttributes as B, forceType as D } from "../core/decorators.js";
 import { SbbDisabledMixin as F, SbbReadonlyMixin as R, SbbFormAssociatedMixin as G, SbbElementInternalsMixin as L } from "../core/mixins.js";
 import "../icon.js";
-const P = C`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;inset:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
+const P = C`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-background-color-1);--sbb-slider-knob-border-color: var(--sbb-color-primary);--sbb-slider-icon-color: var(--sbb-color-1);--sbb-slider-selected-line-color: var(--sbb-color-primary);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-selected-line-disabled-color: light-dark( var(--sbb-color-smoke), var(--sbb-color-cement) );--sbb-slider-line-color: var(--sbb-border-color-5);--sbb-slider-line-disabled-color: var(--sbb-color-graphite);--sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite))}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-icon-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-slider-knob-border-color: var(--sbb-border-color-5);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-5);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;inset:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-color-hard-2),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-color-hard-1);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
 let Z = (() => {
-  var b, d, a;
+  var b, d, r;
   let t = [O("sbb-slider"), B({
     tabindex: "0"
-  })], i, r = [], n, g = F(R(G(L(T)))), u = [], x, w, k, y, I, z = [], N = [], E, M = [], S = [];
-  return a = class extends g {
+  })], i, a = [], n, g = F(R(G(L(T)))), u = [], x, k, w, y, I, z = [], N = [], E, M = [], S = [];
+  return r = class extends g {
     constructor() {
       super();
       _(this, b);
@@ -174,24 +174,24 @@ let Z = (() => {
       </div>
     `;
     }
-  }, b = new WeakMap(), d = new WeakMap(), n = a, (() => {
+  }, b = new WeakMap(), d = new WeakMap(), n = r, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    x = [h()], w = [h({ attribute: "value-as-number", type: Number })], k = [h()], y = [h()], I = [D(), h({ attribute: "start-icon" })], E = [D(), h({ attribute: "end-icon" })], o(a, null, x, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, l) => {
+    x = [h()], k = [h({ attribute: "value-as-number", type: Number })], w = [h()], y = [h()], I = [D(), h({ attribute: "start-icon" })], E = [D(), h({ attribute: "end-icon" })], o(r, null, x, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (s) => "value" in s, set: (s, l) => {
       s.value = l;
-    } }, metadata: e }, null, u), o(a, null, w, { kind: "setter", name: "valueAsNumber", static: !1, private: !1, access: { has: (s) => "valueAsNumber" in s, set: (s, l) => {
+    } }, metadata: e }, null, u), o(r, null, k, { kind: "setter", name: "valueAsNumber", static: !1, private: !1, access: { has: (s) => "valueAsNumber" in s, set: (s, l) => {
       s.valueAsNumber = l;
-    } }, metadata: e }, null, u), o(a, null, k, { kind: "setter", name: "min", static: !1, private: !1, access: { has: (s) => "min" in s, set: (s, l) => {
+    } }, metadata: e }, null, u), o(r, null, w, { kind: "setter", name: "min", static: !1, private: !1, access: { has: (s) => "min" in s, set: (s, l) => {
       s.min = l;
-    } }, metadata: e }, null, u), o(a, null, y, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (s) => "max" in s, set: (s, l) => {
+    } }, metadata: e }, null, u), o(r, null, y, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (s) => "max" in s, set: (s, l) => {
       s.max = l;
-    } }, metadata: e }, null, u), o(a, null, I, { kind: "accessor", name: "startIcon", static: !1, private: !1, access: { has: (s) => "startIcon" in s, get: (s) => s.startIcon, set: (s, l) => {
+    } }, metadata: e }, null, u), o(r, null, I, { kind: "accessor", name: "startIcon", static: !1, private: !1, access: { has: (s) => "startIcon" in s, get: (s) => s.startIcon, set: (s, l) => {
       s.startIcon = l;
-    } }, metadata: e }, z, N), o(a, null, E, { kind: "accessor", name: "endIcon", static: !1, private: !1, access: { has: (s) => "endIcon" in s, get: (s) => s.endIcon, set: (s, l) => {
+    } }, metadata: e }, z, N), o(r, null, E, { kind: "accessor", name: "endIcon", static: !1, private: !1, access: { has: (s) => "endIcon" in s, get: (s) => s.endIcon, set: (s, l) => {
       s.endIcon = l;
-    } }, metadata: e }, M, S), o(null, i = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, r), n = i.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.role = "slider", a.styles = P, a.events = {
+    } }, metadata: e }, M, S), o(null, i = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, a), n = i.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.role = "slider", r.styles = P, r.events = {
     didChange: "didChange"
-  }, c(n, r), n;
+  }, c(n, a), n;
 })();
 export {
   Z as SbbSliderElement