@sbb-esta/lyne-elements 3.7.0 → 3.9.0

package/tooltip/tooltip.component.js

@@ -0,0 +1,220 @@
+var E = (s) => {
+  throw TypeError(s);
+};
+var O = (s, i, a) => i.has(s) || E("Cannot " + a);
+var w = (s, i, a) => (O(s, i, "read from private field"), a ? a.call(s) : i.get(s)), P = (s, i, a) => i.has(s) ? E("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, a), u = (s, i, a, r) => (O(s, i, "write to private field"), r ? r.call(s, a) : i.set(s, a), a);
+import { __esDecorate as b, __runInitializers as h } from "tslib";
+import { css as k, isServer as A, html as S } from "lit";
+import { customElement as z, property as c } from "lit/decorators.js";
+import { ref as N } from "lit/directives/ref.js";
+import { SbbOpenCloseBaseElement as I } from "../core/base-elements.js";
+import { readConfig as g } from "../core/config.js";
+import { SbbEscapableOverlayController as M } from "../core/controllers.js";
+import { idReference as H } from "../core/decorators.js";
+import { queueDomContentLoaded as F, addToListAttribute as U, removeFromListAttribute as Z, isZeroAnimationDuration as $, isAndroid as q, isIOS as R } from "../core/dom.js";
+import { SbbDisabledMixin as B } from "../core/mixins.js";
+import { sbbOverlayOutsidePointerEventListener as L, getElementPosition as W } from "../core/overlay.js";
+const j = k`*,:before,:after{box-sizing:border-box}:host{--sbb-tooltip-position: absolute;--sbb-tooltip-position-x: 0;--sbb-tooltip-position-y: 0;--sbb-tooltip-pointer-events: all;--sbb-tooltip-max-width: min( 25rem, calc(100% - var(--sbb-spacing-fixed-2x)) );--sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-border-radius: var(--sbb-border-radius-8x);--sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);--sbb-tooltip-color: var(--sbb-color-2-inverted);--sbb-tooltip-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-tooltip-animation-easing: ease-out;--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);display:none;position:fixed;inset:0;z-index:var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index))}:host([data-state]:not([data-state=closed])){display:block;--sbb-tooltip-animation-name: open}:host([data-state][data-state=closing]){--sbb-tooltip-animation-name: close;--sbb-tooltip-pointer-events: none}:host([data-position=below]){--sbb-tooltip-hover-patch-inset: calc(-1 * var(--sbb-spacing-fixed-4x)) 0}:host([data-position=above]){--sbb-tooltip-hover-patch-inset: 0 calc(-1 * var(--sbb-spacing-fixed-4x))}.sbb-tooltip{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-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:var(--sbb-tooltip-position);pointer-events:var(--sbb-tooltip-pointer-events);top:var(--sbb-tooltip-position-y);bottom:unset;left:var(--sbb-tooltip-position-x);right:unset;border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);max-width:var(--sbb-tooltip-max-width);width:max-content;color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);outline:none;animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing)}.sbb-tooltip:before{content:"";display:block;position:absolute;inset:0;z-index:-1;background-color:transparent;inset-block:var(--sbb-tooltip-hover-patch-inset)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}`, G = 500, V = 8, Y = 16, J = q || R, m = /* @__PURE__ */ new WeakMap();
+let K = 0, pt = (() => {
+  var n, l;
+  let s = [z("sbb-tooltip")], i, a = [], r, v = B(I), p = [], _, y = [], f = [], T, C, x;
+  return l = class extends v {
+    constructor() {
+      super();
+      P(this, n);
+      u(this, n, (h(this, p), h(this, y, null))), this._openDelay = (h(this, f), null), this._closeDelay = null, this._triggerElement = null, this._escapableOverlayController = new M(this), this.addEventListener("mouseleave", (t) => {
+        (this.state === "opened" || this.state === "opening") && (!t.relatedTarget || !this._triggerElement?.contains(t.relatedTarget)) && this._delayedClose();
+      }, { passive: !0 }), this.addEventListener("overlayOutsidePointer", () => this.close(), { passive: !0 });
+    }
+    /**
+     * The element that will trigger the popover overlay.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    get trigger() {
+      return w(this, n);
+    }
+    set trigger(t) {
+      u(this, n, t);
+    }
+    /**
+     * Open the tooltip after a given delay in milliseconds.
+     * Global configuration is used as default, if not set.
+     *
+     * @default null
+     */
+    set openDelay(t) {
+      this._openDelay = t;
+    }
+    get openDelay() {
+      return this._openDelay ?? g().tooltip?.openDelay ?? 0;
+    }
+    /**
+     * Close the tooltip after a given delay in milliseconds.
+     * Global configuration is used as default, if not set.
+     *
+     * @default null
+     */
+    set closeDelay(t) {
+      this._closeDelay = t;
+    }
+    get closeDelay() {
+      return this._closeDelay ?? g().tooltip?.closeDelay ?? 0;
+    }
+    /**
+     * Automatically close the tooltip after it has been open by long press.
+     * Global configuration is used as default, if not set.
+     *
+     * @default 1500
+     */
+    set longPressCloseDelay(t) {
+      this._longPressCloseDelay = +t;
+    }
+    get longPressCloseDelay() {
+      return this._longPressCloseDelay ?? g().tooltip?.longPressCloseDelay ?? 1500;
+    }
+    static _initializeTooltipOutlet() {
+      this._tooltipOutlet = document.createElement("div"), this._tooltipOutlet.classList.add("sbb-overlay-outlet"), document.body.appendChild(this._tooltipOutlet);
+      const t = /* @__PURE__ */ new Map([
+        ["sbb-tooltip-open-delay", "open-delay"],
+        ["sbb-tooltip-close-delay", "close-delay"]
+      ]);
+      new MutationObserver((e) => {
+        for (const o of e)
+          if (o.type === "attributes")
+            this._handleTooltipTrigger(o.target);
+          else if (o.type === "childList")
+            for (const d of [...o.addedNodes, ...o.removedNodes].filter((D) => D.nodeType === D.ELEMENT_NODE))
+              this._handleTooltipTrigger(d), this._findAndHandleTooltipTriggers(d);
+      }).observe(document.documentElement, {
+        attributeFilter: ["sbb-tooltip", ...t.keys()],
+        childList: !0,
+        subtree: !0
+      }), this._findAndHandleTooltipTriggers(document.body);
+    }
+    static _findAndHandleTooltipTriggers(t) {
+      t.querySelectorAll("[sbb-tooltip]").forEach((e) => this._handleTooltipTrigger(e));
+    }
+    static _handleTooltipTrigger(t) {
+      const e = t.getAttribute("sbb-tooltip");
+      let o = m.get(t);
+      e && t.isConnected ? (o || (o = document.createElement("sbb-tooltip"), m.set(t, o), this._tooltipOutlet.appendChild(o), o.trigger = t), o.textContent = e, o.openDelay = t.hasAttribute("sbb-tooltip-open-delay") ? +t.getAttribute("sbb-tooltip-open-delay") : null, o.closeDelay = t.hasAttribute("sbb-tooltip-close-delay") ? +t.getAttribute("sbb-tooltip-close-delay") : null) : o && (m.delete(t), o._destroy());
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.popover = "manual", this.id ||= `sbb-tooltip-${++K}`, this.state = "closed", L.connect(this), this.hasUpdated && this.trigger && this._attach(this.trigger);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), L.disconnect(this), this._detach();
+    }
+    requestUpdate(t, e, o) {
+      super.requestUpdate(t, e, o), !A && (!t || t === "trigger") && this.hasUpdated && this._attach(this.trigger);
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this._attach(this.trigger);
+    }
+    open() {
+      this._resetOpenCloseTimeout(), !(this.state !== "closed" && this.state !== "closing" || this.disabled || !this.overlay || !this.dispatchBeforeOpenEvent()) && (this.showPopover?.(), this.state = "opening", this._setTooltipPosition(), this._isZeroAnimationDuration() && this._handleOpening());
+    }
+    close() {
+      this._resetOpenCloseTimeout(), !(this.state !== "opened" && this.state !== "opening") && (this.dispatchBeforeCloseEvent(), this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
+    }
+    _delayedOpen() {
+      this._resetOpenCloseTimeout(), this._openTimeout = setTimeout(() => this.open(), this.openDelay);
+    }
+    _handleOpening() {
+      this.state = "opened", this._attachWindowEvents(), this._escapableOverlayController.connect(), this.dispatchOpenEvent();
+    }
+    _delayedClose() {
+      this._resetOpenCloseTimeout(), this._closeTimeout = setTimeout(() => this.close(), this.closeDelay);
+    }
+    _handleClosing() {
+      this.state = "closed", this.hidePopover?.(), this._escapableOverlayController.disconnect(), this.dispatchCloseEvent(), this._openStateController?.abort();
+    }
+    _onTooltipAnimationEnd(t) {
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
+    }
+    _attach(t) {
+      this._triggerElement && this._detach(), this._triggerElement = t, this._triggerElement && (U(this._triggerElement, "aria-describedby", this.id), this._addTriggerEventHandlers());
+    }
+    _detach() {
+      this._triggerAbortController?.abort(), this._openStateController?.abort(), this._resetOpenCloseTimeout(), clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._triggerElement && (Z(this._triggerElement, "aria-describedby", this.id), this._triggerElement = null);
+    }
+    _destroy() {
+      this._detach(), this.remove();
+    }
+    _setTooltipPosition() {
+      if (!this.overlay || !this._triggerElement)
+        return;
+      const t = W(this.overlay, this._triggerElement, this, {
+        verticalOffset: V,
+        horizontalOffset: Y,
+        centered: !0,
+        responsiveHeight: !0
+      });
+      this.setAttribute("data-position", t.alignment.vertical), this.style.setProperty("--sbb-tooltip-position-x", `${t.left}px`), this.style.setProperty("--sbb-tooltip-position-y", `${t.top}px`);
+    }
+    _addTriggerEventHandlers() {
+      const t = this._triggerElement;
+      if (!t)
+        return;
+      this._triggerAbortController?.abort(), this._triggerAbortController = new AbortController();
+      const e = {
+        signal: this._triggerAbortController.signal,
+        passive: !0
+      };
+      J || (t.addEventListener("mouseenter", () => this._delayedOpen(), e), t.addEventListener("mouseleave", (o) => {
+        const d = o.relatedTarget;
+        (!d || d !== this) && this._delayedClose();
+      }, e), t.addEventListener("blur", () => this.close(), e), t.addEventListener("focus", () => this._delayedOpen(), e)), t.addEventListener("touchstart", () => {
+        clearTimeout(this._longPressOpenTimeout), clearTimeout(this._longPressCloseTimeout), this._longPressOpenTimeout = setTimeout(() => this.open(), G);
+      }, e), t.addEventListener("touchend", () => {
+        clearTimeout(this._longPressOpenTimeout), this._longPressCloseTimeout = setTimeout(() => this.close(), this.longPressCloseDelay);
+      }, e), t.addEventListener("touchcancel", () => {
+        clearTimeout(this._longPressOpenTimeout);
+      }, e);
+    }
+    _attachWindowEvents() {
+      this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setTooltipPosition(), {
+        passive: !0,
+        signal: this._openStateController.signal,
+        // Without capture, other scroll contexts would not bubble to this event listener.
+        // Capture allows us to react to all scroll contexts in this DOM.
+        capture: !0
+      }), window.addEventListener("resize", () => this._setTooltipPosition(), {
+        passive: !0,
+        signal: this._openStateController.signal
+      });
+    }
+    _isZeroAnimationDuration() {
+      return $(this, "--sbb-tooltip-animation-duration");
+    }
+    _resetOpenCloseTimeout() {
+      clearTimeout(this._openTimeout), clearTimeout(this._closeTimeout);
+    }
+    render() {
+      return S`
+      <div
+        @animationend=${this._onTooltipAnimationEnd}
+        class="sbb-tooltip"
+        ${N((t) => this.overlay = t)}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+  }, n = new WeakMap(), r = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    _ = [H(), c()], T = [c({ attribute: "open-delay", type: Number })], C = [c({ attribute: "close-delay", type: Number })], x = [c({ attribute: "long-press-close-delay", type: Number })], b(l, null, _, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
+      e.trigger = o;
+    } }, metadata: t }, y, f), b(l, null, T, { kind: "setter", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, set: (e, o) => {
+      e.openDelay = o;
+    } }, metadata: t }, null, p), b(l, null, C, { kind: "setter", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, set: (e, o) => {
+      e.closeDelay = o;
+    } }, metadata: t }, null, p), b(l, null, x, { kind: "setter", name: "longPressCloseDelay", static: !1, private: !1, access: { has: (e) => "longPressCloseDelay" in e, set: (e, o) => {
+      e.longPressCloseDelay = o;
+    } }, metadata: t }, null, p), b(null, i = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, a), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.role = "tooltip", l.styles = j, A || F(() => r._initializeTooltipOutlet()), h(r, a), r;
+})();
+export {
+  pt as SbbTooltipElement
+};

package/tooltip.d.ts

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

package/tooltip.d.ts.map

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

package/tooltip.js

@@ -0,0 +1,4 @@
+import { SbbTooltipElement as t } from "./tooltip/tooltip.component.js";
+export {
+  t as SbbTooltipElement
+};

package/train/train-blocked-passage/train-blocked-passage.component.js

@@ -1,7 +1,7 @@
 import { __esDecorate as i, __runInitializers as n } from "tslib";
 import { css as l, LitElement as c, html as d } from "lit";
 import { customElement as p } from "lit/decorators.js";
-const g = l`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);--sbb-train-blocked-passage-background-color: var(--sbb-color-red125);--sbb-train-blocked-passage-bar-color: var(--sbb-color-white);--sbb-train-blocked-passage-icon-dimension: 1rem;--sbb-train-blocked-passage-icon-bar-width: .625rem;--sbb-train-blocked-passage-icon-bar-height: .25rem;--sbb-train-blocked-passage-icon-bar-border-radius: .0625rem}@media (forced-colors: active){:host{--sbb-train-blocked-passage-background-color: CanvasText;--sbb-train-blocked-passage-bar-color: Canvas}}.sbb-train-blocked-passage:before{content:"";display:var(--sbb-train-formation-wagon-label-display, block);height:calc(var(--sbb-font-size-text-xxs) * var(--sbb-typo-line-height-body-text))}.sbb-train-blocked-passage__wrapper{width:var(--sbb-train-blocked-passage-icon-dimension);display:flex;justify-content:center;flex-direction:column;height:var(--sbb-train-blocked-passage-height)}.sbb-train-blocked-passage__icon{width:100%;height:var(--sbb-train-blocked-passage-icon-dimension);border-radius:50%;background-color:var(--sbb-train-blocked-passage-background-color);position:relative;flex-direction:column;display:flex;align-items:center}.sbb-train-blocked-passage__icon:before{content:"";width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color);margin:auto 0}`;
+const g = l`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);--sbb-train-blocked-passage-background-color: var(--sbb-color-error);--sbb-train-blocked-passage-bar-color: var(--sbb-color-white);--sbb-train-blocked-passage-icon-dimension: 1rem;--sbb-train-blocked-passage-icon-bar-width: .625rem;--sbb-train-blocked-passage-icon-bar-height: .25rem;--sbb-train-blocked-passage-icon-bar-border-radius: .0625rem}@media (forced-colors: active){:host{--sbb-train-blocked-passage-background-color: CanvasText;--sbb-train-blocked-passage-bar-color: Canvas}}.sbb-train-blocked-passage:before{content:"";display:var(--sbb-train-formation-wagon-label-display, block);height:calc(var(--sbb-font-size-text-xxs) * var(--sbb-typo-line-height-body-text))}.sbb-train-blocked-passage__wrapper{width:var(--sbb-train-blocked-passage-icon-dimension);display:flex;justify-content:center;flex-direction:column;height:var(--sbb-train-blocked-passage-height)}.sbb-train-blocked-passage__icon{width:100%;height:var(--sbb-train-blocked-passage-icon-dimension);border-radius:50%;background-color:var(--sbb-train-blocked-passage-background-color);position:relative;flex-direction:column;display:flex;align-items:center}.sbb-train-blocked-passage__icon:before{content:"";width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color);margin:auto 0}`;
 let u = (() => {
   var e;
   let o = [p("sbb-train-blocked-passage")], r, t = [], a, b = c;

package/train/train-formation/train-formation.component.js

@@ -2,34 +2,34 @@ var z = (t) => {
   throw TypeError(t);
 };
 var S = (t, o, s) => o.has(t) || z("Cannot " + s);
-var h = (t, o, s) => (S(t, o, "read from private field"), s ? s.call(t) : o.get(t)), p = (t, o, s) => o.has(t) ? z("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, s), f = (t, o, s, i) => (S(t, o, "write to private field"), i ? i.call(t, s) : o.set(t, s), s);
-import { __esDecorate as u, __runInitializers as m } from "tslib";
-import { css as L, LitElement as $, nothing as E, html as v } from "lit";
+var p = (t, o, s) => (S(t, o, "read from private field"), s ? s.call(t) : o.get(t)), h = (t, o, s) => o.has(t) ? z("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, s), f = (t, o, s, i) => (S(t, o, "write to private field"), i ? i.call(t, s) : o.set(t, s), s);
+import { __esDecorate as v, __runInitializers as m } from "tslib";
+import { css as L, LitElement as $, nothing as E, html as u } from "lit";
 import { customElement as A, property as P, state as I } from "lit/decorators.js";
 import { styleMap as N } from "lit/directives/style-map.js";
 import { SbbLanguageController as T } from "../../core/controllers.js";
 import { i18nSectorShort as D, i18nSector as j, i18nTrains as M } from "../../core/i18n.js";
 import { SbbNamedSlotListMixin as O } from "../../core/mixins.js";
-const U = L`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-formation-sector-line-color: var(--sbb-color-cement);--sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);--sbb-train-formation-blocked-passage-width: 1rem;--sbb-train-formation-text-color: var(--sbb-color-charcoal);--sbb-train-formation-vertical-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}.sbb-train-formation{--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-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-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-train-formation::-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-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;row-gap:calc(var(--sbb-train-formation-show-sectors-gap, 0) * var(--sbb-train-formation-vertical-gap));padding-block-end:var(--sbb-train-formation-vertical-gap);color:var(--sbb-train-formation-text-color)}.sbb-train-formation:focus-visible{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-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-padding-inline)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);flex:0 0 var(--_sector-width);text-align:center;overflow-x:clip}.sbb-train-formation__sector-sticky-wrapper{position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";position:absolute;inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:calc(.5 * var(--_sector-width))}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
+const U = L`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-formation-sector-line-color: var(--sbb-color-cement);--sbb-train-formation-sector-line-color: light-dark( var(--sbb-color-cement), var(--sbb-color-smoke) );--sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);--sbb-train-formation-blocked-passage-width: 1rem;--sbb-train-formation-text-color: var(--sbb-color-3);--sbb-train-formation-vertical-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}.sbb-train-formation{--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-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-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-train-formation::-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-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;row-gap:calc(var(--sbb-train-formation-show-sectors-gap, 0) * var(--sbb-train-formation-vertical-gap));padding-block-end:var(--sbb-train-formation-vertical-gap);color:var(--sbb-train-formation-text-color)}.sbb-train-formation:focus-visible{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-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-padding-inline)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);flex:0 0 var(--_sector-width);text-align:center;overflow-x:clip}.sbb-train-formation__sector-sticky-wrapper{position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";position:absolute;inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:calc(.5 * var(--_sector-width))}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
 let V = (() => {
   var b, l, e;
-  let t = [A("sbb-train-formation")], o, s = [], i, _ = O($), w, g = [], k = [], x, y = [], C = [];
+  let t = [A("sbb-train-formation")], o, s = [], i, _ = O($), g, w = [], k = [], x, y = [], C = [];
   return e = class extends _ {
     constructor() {
       super();
-      p(this, b);
-      p(this, l);
-      this.listChildLocalNames = ["sbb-train"], f(this, b, m(this, g, "side")), f(this, l, (m(this, k), m(this, y, []))), this._language = (m(this, C), new T(this)), this.addEventListener?.("trainslotchange", (r) => this._readSectors(r)), this.addEventListener?.("sectorchange", (r) => this._readSectors(r));
+      h(this, b);
+      h(this, l);
+      this.listChildLocalNames = ["sbb-train"], f(this, b, m(this, w, "side")), f(this, l, (m(this, k), m(this, y, []))), this._language = (m(this, C), new T(this)), this.addEventListener?.("trainslotchange", (r) => this._readSectors(r)), this.addEventListener?.("sectorchange", (r) => this._readSectors(r));
     }
     /** Whether the view of the wagons is from side or top perspective. */
     get view() {
-      return h(this, b);
+      return p(this, b);
     }
     set view(r) {
       f(this, b, r);
     }
     get _sectors() {
-      return h(this, l);
+      return p(this, l);
     }
     set _sectors(r) {
       f(this, l, r);
@@ -52,10 +52,10 @@ let V = (() => {
       super.willUpdate(r), r.has("listChildren") && this._readSectors();
     }
     render() {
-      return v`
+      return u`
       <div class="sbb-train-formation">
-        ${this._sectors.length && this._sectors[0].label !== void 0 ? v`<div class="sbb-train-formation__sectors" aria-hidden="true">
-              ${this._sectors.map((r) => v`<span
+        ${this._sectors.length && this._sectors[0].label !== void 0 ? u`<div class="sbb-train-formation__sectors" aria-hidden="true">
+              ${this._sectors.map((r) => u`<span
                     class="sbb-train-formation__sector"
                     style=${N({
         "--sbb-train-formation-wagon-count": r.wagonCount,
@@ -79,11 +79,11 @@ let V = (() => {
     }
   }, b = new WeakMap(), l = new WeakMap(), i = e, (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    w = [P({ reflect: !0 })], x = [I()], u(e, null, w, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (a) => "view" in a, get: (a) => a.view, set: (a, n) => {
+    g = [P({ reflect: !0 })], x = [I()], v(e, null, g, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (a) => "view" in a, get: (a) => a.view, set: (a, n) => {
       a.view = n;
-    } }, metadata: r }, g, k), u(e, null, x, { kind: "accessor", name: "_sectors", static: !1, private: !1, access: { has: (a) => "_sectors" in a, get: (a) => a._sectors, set: (a, n) => {
+    } }, metadata: r }, w, k), v(e, null, x, { kind: "accessor", name: "_sectors", static: !1, private: !1, access: { has: (a) => "_sectors" in a, get: (a) => a._sectors, set: (a, n) => {
       a._sectors = n;
-    } }, metadata: r }, y, C), u(null, o = { value: i }, t, { kind: "class", name: i.name, metadata: r }, null, s), i = o.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+    } }, metadata: r }, y, C), v(null, o = { value: i }, t, { kind: "class", name: i.name, metadata: r }, null, s), i = o.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
   })(), e.styles = U, m(i, s), i;
 })();
 export {

package/train/train-wagon/train-wagon.component.js

@@ -14,7 +14,7 @@ import { i18nClosedCompartmentLabel as ct, i18nLocomotiveLabel as lt, i18nCouche
 import { SbbNamedSlotListMixin as mt } from "../../core/mixins.js";
 import "../../icon.js";
 import "../../timetable-occupancy-icon.js";
-const _t = et`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-main-icon-height: 1.25rem;--sbb-train-wagon-main-icon-margin-block-start: .625rem;--sbb-train-wagon-attribute-icon-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-attribute-icon-height: .875rem;--sbb-train-wagon-attribute-icon-color: var(--sbb-color-granite);--sbb-train-wagon-occupancy-height: .75rem}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color: CanvasText}}:host(:is([type=closed],[type=locomotive])){--sbb-train-wagon-shape-color: var(--sbb-color-metal)}@media (forced-colors: active){:host(:is([type=closed],[type=locomotive])){--sbb-train-wagon-shape-color: CanvasText}}@media (forced-colors: active){:host([type=closed]){--sbb-train-wagon-shape-color: GrayText}}:host(:is([type=sleeping],[type=couchette])){--sbb-train-wagon-main-icon-margin-block-start: .390625rem}:host(:is([type=wagon],[type=restaurant],[type=sleeping],[type=couchette])){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-shape)}:host([type=closed]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-closed-shape)}:host([type=locomotive]){--sbb-train-wagon-shape: var(--sbb-train-wagon-locomotive-shape)}:host([type=wagon-end-left]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-end-left-shape)}:host([type=wagon-end-right]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-end-right-shape)}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-formation-vertical-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr}.sbb-train-wagon__compartment:before{content:"";grid-column:occupancy/class;grid-row:occupancy;pointer-events:none;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);background-color:var(--sbb-train-wagon-shape-color);-webkit-mask-image:var(--sbb-train-wagon-shape);mask-image:var(--sbb-train-wagon-shape)}.sbb-train-wagon__main-icon{--sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);grid-column:occupancy/class;grid-row:occupancy;margin-block-start:var(--sbb-train-wagon-main-icon-margin-block-start);justify-self:center}.sbb-train-wagon__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center;justify-content:center}.sbb-train-wagon__occupancy{--sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);grid-area:occupancy}.sbb-train-wagon__class{--sbb-title-font-size: var(--sbb-title-font-size-level-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);grid-area:class}.sbb-train-wagon__attribute-icon-list{list-style:none;margin:0;padding:0;font-size:inherit;--sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sbb-train-wagon-attribute-icon-gap);color:var(--sbb-train-wagon-attribute-icon-color)}.sbb-train-wagon__attribute-icon-list>:is(li,span){display:inline-flex}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, at = {
+const _t = et`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-shape-color: var(--sbb-color-3);--sbb-train-wagon-main-icon-height: 1.25rem;--sbb-train-wagon-main-icon-margin-block-start: .625rem;--sbb-train-wagon-attribute-icon-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-attribute-icon-height: .875rem;--sbb-train-wagon-attribute-icon-color: var(--sbb-color-1);--sbb-train-wagon-occupancy-height: .75rem}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color: CanvasText}}@media (forced-colors: active){:host([type=closed]){--sbb-train-wagon-shape-color: GrayText}}:host(:is([type=sleeping],[type=couchette])){--sbb-train-wagon-main-icon-margin-block-start: .390625rem}:host(:is([type=wagon],[type=restaurant],[type=sleeping],[type=couchette])){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-shape)}:host([type=closed]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-closed-shape)}:host([type=locomotive]){--sbb-train-wagon-shape: var(--sbb-train-wagon-locomotive-shape)}:host([type=wagon-end-left]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-end-left-shape)}:host([type=wagon-end-right]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-end-right-shape)}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-formation-vertical-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr}.sbb-train-wagon__compartment:before{content:"";grid-column:occupancy/class;grid-row:occupancy;pointer-events:none;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);background-color:var(--sbb-train-wagon-shape-color);-webkit-mask-image:var(--sbb-train-wagon-shape);mask-image:var(--sbb-train-wagon-shape)}.sbb-train-wagon__main-icon{--sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);grid-column:occupancy/class;grid-row:occupancy;margin-block-start:var(--sbb-train-wagon-main-icon-margin-block-start);justify-self:center}.sbb-train-wagon__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center;justify-content:center}.sbb-train-wagon__occupancy{--sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);grid-area:occupancy}.sbb-train-wagon__class{--sbb-title-font-size: var(--sbb-title-font-size-level-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);grid-area:class}.sbb-train-wagon__attribute-icon-list{list-style:none;margin:0;padding:0;font-size:inherit;--sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sbb-train-wagon-attribute-icon-gap);color:var(--sbb-train-wagon-attribute-icon-color)}.sbb-train-wagon__attribute-icon-list>:is(li,span){display:inline-flex}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, at = {
   couchette: "sa-cc",
   sleeping: "sa-wl",
   restaurant: "sa-wr"

package/transparent-button-Bg9fU_iZ.js

@@ -0,0 +1,9 @@
+import { css as o } from "lit";
+const t = o`*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-button-icon-size: var(--sbb-size-icon-ui-small);--sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);--sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);--sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);--sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);--sbb-button-color-disabled-background: var(--sbb-background-color-3);--sbb-button-color-disabled-border: var(--sbb-border-color-5);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-color-disabled-text: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: var(--sbb-border-width-2x);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-min-height: var(--sbb-size-element-m);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x);--sbb-button-gap: var(--sbb-spacing-fixed-2x);--sbb-button-box-shadow: transparent 0 0;--sbb-button-box-shadow-definition: var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--sbb-button-loading-border-width: var(--sbb-border-width-3x);--sbb-button-loading-delay: .3s;--_width: unset;--_min-height-modifier: 0rem;--_border-color: var(--sbb-button-color-default-border);--_background-color: var(--sbb-button-color-default-background);--_color: var(--sbb-button-color-default-text);--_button-inset: 0;--_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid var(--_border-color)}@media (min-width: 52.5rem){:host{--sbb-button-padding-inline: var(--sbb-spacing-fixed-10x)}}@media (forced-colors: active){:host{--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-default-background: Canvas !important;--sbb-button-color-hover-background: Canvas !important;--sbb-button-color-active-background: Canvas !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-text: GrayText !important;--sbb-button-color-loading-border: Highlight !important;--sbb-button-color-default-text: CanvasText !important;--sbb-button-color-hover-text: CanvasText !important;--sbb-button-color-active-text: CanvasText !important;--sbb-button-border-overlap-fix: 0rem}}@media (forced-colors: active){:host([data-button]){--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-hover-text: ButtonText !important;--sbb-button-color-active-text: ButtonText !important}}@media (forced-colors: active){:host([data-link]){--sbb-button-color-default-text: LinkText !important;--sbb-button-color-hover-text: LinkText !important;--sbb-button-color-active-text: LinkText !important}}:host([negative]){--sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text: var(--sbb-color-aluminium)}:host([size=m]){--sbb-button-min-height: var(--sbb-size-element-s);--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}@media (min-width: 52.5rem){:host([size=m]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-8x)}}:host([size=s]){--sbb-button-min-height: var(--sbb-size-element-xs);--sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-button-gap: var(--sbb-spacing-fixed-1x)}@media (min-width: 52.5rem){:host([size=s]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])){--sbb-button-padding-inline: 0;--_width: calc(var(--sbb-button-min-height) + var(--_min-height-modifier))}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active],[loading]):hover){--sbb-button-translate-y-content-hover: -.0625rem;--sbb-button-shadow-1-offset-y: calc( .5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y) );--sbb-button-shadow-1-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur: calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor: pointer;--_border-color: var(--sbb-button-color-hover-border);--_color: var(--sbb-button-color-hover-text);--_background-color: var(--sbb-button-color-hover-background);--_button-inset: calc(var(--sbb-button-border-width) * -1)}}@media (forced-colors: active){:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active],[loading]):hover){--sbb-button-color-hover-border: Highlight !important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor: default;--_color: var(--sbb-button-color-disabled-text);--_background-color: var(--sbb-button-color-disabled-background);--_border-color: var(--sbb-button-color-disabled-border);--_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,[data-active],[loading])){--_color: var(--sbb-button-color-active-text);--_background-color: var(--sbb-button-color-active-background);--_border-color: var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_min-height-modifier: calc(-2 * var(--sbb-button-loading-border-width));--sbb-button-focus-outline-offset-override: calc( var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width) );--_border: none;--_transform-style: preserve-3d}.sbb-action-base{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700;display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;text-align:left;white-space:nowrap;text-decoration:none;min-height:calc(var(--sbb-button-min-height) + var(--_min-height-modifier));outline:none;width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);-webkit-user-select:none;user-select:none;background-color:var(--_background-color);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color,background-color;transform-style:var(--_transform-style, flat);padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);position:relative}.sbb-action-base:before{content:"";position:absolute;inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{margin:var(--sbb-button-loading-border-width);padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));transition-property:none}:host([data-focus-visible]) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-button-focus-outline-offset-override, var(--sbb-focus-outline-offset))}.sbb-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:where([data-slot-names~=icon],[icon-name]):not([data-slot-names~=unnamed])) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover, 0)}.sbb-button-loading-border{position:absolute;inset:calc(-1 * var(--sbb-button-loading-border-width));clip-path:border-box;border-radius:var(--sbb-button-border-radius);background:var(--_background-color);transform:translateZ(-1px);z-index:-1;container-type:inline-size;contain:paint;animation:background-fade-in var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x)) var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) linear;animation-fill-mode:forwards}.sbb-button-loading-border:before{content:"";display:block;width:64cqmin;max-height:var(--sbb-button-min-height);aspect-ratio:2/1;position:absolute;background:radial-gradient(100% 100% at right,var(--sbb-button-color-active-text),transparent 50%);offset-path:border-box;offset-anchor:100% 50%;opacity:0;animation:snake-fade-in var(--sbb-disable-animation-duration, calc(var(--sbb-animation-duration-12x) * 2)) var(--sbb-disable-animation-duration, calc(var(--sbb-button-loading-delay) + var(--sbb-animation-duration-5x))) var(--sbb-animation-easing),snake-position var(--sbb-disable-animation-duration, calc(max(tan(atan2(var(--sbb-button-width), 1px)) / 136, .5)*3s) ) infinite linear;animation-fill-mode:forwards;transform-style:preserve-3d}@keyframes snake-position{to{offset-distance:100%}}@keyframes snake-fade-in{to{opacity:1}}@keyframes background-fade-in{to{background:var(--sbb-button-color-loading-border)}}`, r = o`:host{--sbb-button-color-active-background: var(--sbb-color-primary150);--sbb-button-color-active-border: var(--sbb-color-primary150);--sbb-button-color-active-text: var(--sbb-color-4-negative);--sbb-button-color-default-background: var(--sbb-color-primary);--sbb-button-color-default-border: var(--sbb-color-primary);--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-color-primary125);--sbb-button-color-hover-border: var(--sbb-color-primary125);--sbb-button-color-hover-text: var(--sbb-color-3-negative);--sbb-button-color-loading-border: color-mix( in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text) );--sbb-button-color-loading-border: light-dark( color-mix( in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text) ), color-mix( in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text) ) );--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-primary) 20%, transparent), color-mix(in srgb, var(--sbb-color-primary) 40%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent), color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent) )}:host([negative]){--sbb-button-color-active-background: var(--sbb-color-primary150);--sbb-button-color-active-border: var(--sbb-color-primary150);--sbb-button-color-active-text: var(--sbb-color-4-negative);--sbb-button-color-default-background: var(--sbb-color-primary);--sbb-button-color-default-border: var(--sbb-color-primary);--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-color-primary125);--sbb-button-color-hover-border: var(--sbb-color-primary125);--sbb-button-color-hover-text: var(--sbb-color-3-negative);--sbb-button-color-loading-border: color-mix( in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text) );--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 60%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-primary) 60%, transparent), color-mix(in srgb, var(--sbb-color-primary) 40%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent), color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent) )}:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active],[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, a = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-3);--sbb-button-color-active-border: var(--sbb-border-color-4-inverted);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-active-text: light-dark( var(--sbb-color-anthracite), var(--sbb-color-graphite) );--sbb-button-color-default-background: var(--sbb-background-color-1);--sbb-button-color-default-border: var(--sbb-border-color-4-inverted);--sbb-button-color-default-text: var(--sbb-color-3);--sbb-button-color-hover-background: var(--sbb-background-color-1);--sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text: var(--sbb-color-4);--sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-cement) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-border-overlap-fix: 0rem}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-2-negative);--sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text: var(--sbb-color-graphite);--sbb-button-color-default-background: var(--sbb-background-color-1-negative);--sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text: var(--sbb-color-3-negative);--sbb-button-color-hover-background: var(--sbb-background-color-1-negative);--sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text: var(--sbb-color-4-negative);--sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, n = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);--sbb-button-color-active-border: var(--sbb-border-color-1);--sbb-button-color-active-text: var(--sbb-color-cloud);--sbb-button-color-active-text: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));--sbb-button-color-default-background: var(--sbb-background-color-3-inverted);--sbb-button-color-default-border: var(--sbb-border-color-3);--sbb-button-color-default-text: var(--sbb-color-1-inverted);--sbb-button-color-hover-background: var(--sbb-background-color-3-inverted);--sbb-button-color-hover-border: var(--sbb-border-color-3);--sbb-button-color-hover-text: var(--sbb-color-3-inverted);--sbb-button-color-loading-border: var(--sbb-color-iron);--sbb-button-color-loading-border: light-dark(var(--sbb-color-iron), var(--sbb-color-silver));--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);--sbb-button-shadow-1-color: light-dark( color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) );--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);--sbb-button-shadow-2-color: light-dark( color-mix(in srgb, var(--sbb-color-cement) 20%, transparent), color-mix(in srgb, var(--sbb-color-black) 30%, transparent) )}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-1-negative-inverted);--sbb-button-color-active-border: var(--sbb-border-color-1-negative);--sbb-button-color-active-text: var(--sbb-color-anthracite);--sbb-button-color-default-background: var(--sbb-background-color-3-negative-inverted);--sbb-button-color-default-border: var(--sbb-border-color-3-negative);--sbb-button-color-default-text: var(--sbb-color-1-negative-inverted);--sbb-button-color-hover-background: var(--sbb-background-color-3-negative-inverted);--sbb-button-color-hover-border: var(--sbb-border-color-3-negative);--sbb-button-color-hover-text: var(--sbb-color-4-negative-inverted);--sbb-button-color-loading-border: var(--sbb-color-silver);--sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,[data-active],[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, e = o`:host{--sbb-button-color-active-background: var(--sbb-background-color-4);--sbb-button-color-active-border: var(--sbb-border-color-4-inverted);--sbb-button-color-active-text: var(--sbb-color-1);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-1);--sbb-button-color-hover-background: var(--sbb-background-color-3);--sbb-button-color-hover-border: var(--sbb-border-color-3-inverted);--sbb-button-color-hover-text: var(--sbb-color-1);--sbb-button-color-loading-border: var(--sbb-color-silver);--sbb-button-color-loading-border: light-dark(var(--sbb-color-silver), var(--sbb-color-granite))}:host([negative]){--sbb-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text: var(--sbb-color-1-negative);--sbb-button-color-default-background: transparent;--sbb-button-color-default-border: transparent;--sbb-button-color-default-text: var(--sbb-color-1-negative);--sbb-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-button-color-hover-border: var(--sbb-border-color-3-negative-inverted);--sbb-button-color-hover-text: var(--sbb-color-1-negative);--sbb-button-color-loading-border: var(--sbb-color-granite)}`;
+export {
+  n as a,
+  t as b,
+  r as p,
+  a as s,
+  e as t
+};

package/typography.css

@@ -63,4 +63,5 @@ sup {
   font-size: var(--sbb-text-font-size);
   padding: 0;
   color: var(--sbb-color-granite);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
 }

package/visual-checkbox/visual-checkbox.component.js

@@ -3,23 +3,23 @@ var C = (e) => {
 };
 var I = (e, o, i) => o.has(e) || C("Cannot " + i);
 var h = (e, o, i) => (I(e, o, "read from private field"), i ? i.call(e) : o.get(e)), u = (e, o, i) => o.has(e) ? C("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, i), v = (e, o, i, t) => (I(e, o, "write to private field"), t ? t.call(e, i) : o.set(e, i), i);
-import { __esDecorate as k, __runInitializers as r } from "tslib";
+import { __esDecorate as k, __runInitializers as a } from "tslib";
 import { css as j, LitElement as D, nothing as E, html as L } from "lit";
 import { customElement as M, property as m } from "lit/decorators.js";
 import { forceType as T } from "../core/decorators.js";
 import { isLean as $ } from "../core/dom.js";
 import { SbbDisabledMixin as G, SbbNegativeMixin as H } from "../core/mixins.js";
-const O = j`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-visual-checkbox-background-color: var(--sbb-color-white);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: solid;--sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);--sbb-visual-checkbox-selection-color: var(--sbb-color-red);--sbb-visual-checkbox-cursor: pointer}@media (forced-colors: active){:host{--sbb-visual-checkbox-selection-color: Canvas;--sbb-visual-checkbox-border-width: 0}}:host([size=xs]){--sbb-visual-checkbox-dimension: 1.25rem}:host([negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-midnight);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-red)}@media (forced-colors: active){:host([negative]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled]){--sbb-visual-checkbox-background-color: var(--sbb-color-milk);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: dashed;--sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled][negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-white)}@media (forced-colors: active){:host([disabled][negative]){--sbb-visual-checkbox-selection-color: Canvas}}@media (forced-colors: active){:host([indeterminate]){--sbb-visual-checkbox-selection-color: ButtonBorder}}@media (forced-colors: active){:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color: GrayText}}.sbb-visual-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);border:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor)}@media (forced-colors: active){.sbb-visual-checkbox{outline:var(--sbb-border-width-2x) solid ButtonBorder;outline-offset:calc(-1 * var(--sbb-border-width-2x))}:host([checked]:not([indeterminate])) .sbb-visual-checkbox{background-color:HighLight;outline:none}:host([disabled]) .sbb-visual-checkbox{outline-color:GrayText}:host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox{background-color:GrayText}}.sbb-visual-checkbox__icon{display:inline-flex;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension)}.sbb-visual-checkbox__icon svg{margin:auto}.sbb-visual-checkbox__icon path{stroke:var(--sbb-visual-checkbox-selection-color)}`;
+const O = j`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-visual-checkbox-background-color: var(--sbb-background-color-1);--sbb-visual-checkbox-border-color: var(--sbb-border-color-5);--sbb-visual-checkbox-border-style: solid;--sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);--sbb-visual-checkbox-cursor: pointer}@media (forced-colors: active){:host{--sbb-visual-checkbox-selection-color: Canvas;--sbb-visual-checkbox-border-width: 0}}:host([size=xs]){--sbb-visual-checkbox-dimension: 1.25rem}:host([negative]){--sbb-visual-checkbox-background-color: var(--sbb-background-color-1-negative);--sbb-visual-checkbox-border-color: var(--sbb-border-color-5);--sbb-visual-checkbox-selection-color: var(--sbb-color-primary85)}@media (forced-colors: active){:host([negative]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled]){--sbb-visual-checkbox-background-color: var(--sbb-background-color-3);--sbb-visual-checkbox-border-color: var(--sbb-border-color-5);--sbb-visual-checkbox-border-style: dashed;--sbb-visual-checkbox-selection-color: var(--sbb-color-2);--sbb-visual-checkbox-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled][negative]){--sbb-visual-checkbox-background-color: var(--sbb-background-color-3-negative);--sbb-visual-checkbox-border-color: var(--sbb-border-color-5);--sbb-visual-checkbox-selection-color: var(--sbb-color-2-negative)}@media (forced-colors: active){:host([disabled][negative]){--sbb-visual-checkbox-selection-color: Canvas}}@media (forced-colors: active){:host([indeterminate]){--sbb-visual-checkbox-selection-color: ButtonBorder}}@media (forced-colors: active){:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color: GrayText}}.sbb-visual-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);border:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor)}@media (forced-colors: active){.sbb-visual-checkbox{outline:var(--sbb-border-width-2x) solid ButtonBorder;outline-offset:calc(-1 * var(--sbb-border-width-2x))}:host([checked]:not([indeterminate])) .sbb-visual-checkbox{background-color:HighLight;outline:none}:host([disabled]) .sbb-visual-checkbox{outline-color:GrayText}:host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox{background-color:GrayText}}.sbb-visual-checkbox__icon{display:inline-flex;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension)}.sbb-visual-checkbox__icon svg{margin:auto}.sbb-visual-checkbox__icon path{stroke:var(--sbb-visual-checkbox-selection-color)}`;
 let Q = (() => {
-  var b, l, n, a;
-  let e = [M("sbb-visual-checkbox")], o, i = [], t, x = G(H(D)), _, f = [], g = [], p, z = [], y = [], w, S = [], B = [];
-  return a = class extends x {
+  var b, l, n, r;
+  let e = [M("sbb-visual-checkbox")], o, i = [], t, x = G(H(D)), g, _ = [], f = [], p, y = [], z = [], w, S = [], B = [];
+  return r = class extends x {
     constructor() {
       super(...arguments);
-      u(this, b, r(this, f, !1));
-      u(this, l, (r(this, g), r(this, z, !1)));
-      u(this, n, (r(this, y), r(this, S, $() ? "xs" : "m")));
-      r(this, B);
+      u(this, b, a(this, _, !1));
+      u(this, l, (a(this, f), a(this, y, !1)));
+      u(this, n, (a(this, z), a(this, S, $() ? "xs" : "m")));
+      a(this, B);
     }
     /** Checked state. */
     get checked() {
@@ -67,16 +67,16 @@ let Q = (() => {
       </span>
     `;
     }
-  }, b = new WeakMap(), l = new WeakMap(), n = new WeakMap(), t = a, (() => {
+  }, b = new WeakMap(), l = new WeakMap(), n = new WeakMap(), t = r, (() => {
     const c = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    _ = [T(), m({ reflect: !0, type: Boolean })], p = [T(), m({ reflect: !0, type: Boolean })], w = [m({ reflect: !0 })], k(a, null, _, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (s) => "checked" in s, get: (s) => s.checked, set: (s, d) => {
+    g = [T(), m({ reflect: !0, type: Boolean })], p = [T(), m({ reflect: !0, type: Boolean })], w = [m({ reflect: !0 })], k(r, null, g, { kind: "accessor", name: "checked", static: !1, private: !1, access: { has: (s) => "checked" in s, get: (s) => s.checked, set: (s, d) => {
       s.checked = d;
-    } }, metadata: c }, f, g), k(a, null, p, { kind: "accessor", name: "indeterminate", static: !1, private: !1, access: { has: (s) => "indeterminate" in s, get: (s) => s.indeterminate, set: (s, d) => {
+    } }, metadata: c }, _, f), k(r, null, p, { kind: "accessor", name: "indeterminate", static: !1, private: !1, access: { has: (s) => "indeterminate" in s, get: (s) => s.indeterminate, set: (s, d) => {
       s.indeterminate = d;
-    } }, metadata: c }, z, y), k(a, null, w, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, d) => {
+    } }, metadata: c }, y, z), k(r, null, w, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, d) => {
       s.size = d;
     } }, metadata: c }, S, B), k(null, o = { value: t }, e, { kind: "class", name: t.name, metadata: c }, null, i), t = o.value, c && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
-  })(), a.styles = O, r(t, i), t;
+  })(), r.styles = O, a(t, i), t;
 })();
 export {
   Q as SbbVisualCheckboxElement

package/checkbox-common-CDzcyq8p.js

@@ -1,5 +0,0 @@
-import { css as e } from "lit";
-const b = e`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=xs]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}`;
-export {
-  b as c
-};

package/file-selector-common-OHK9hu3a.js

@@ -1,5 +0,0 @@
-import { css as e } from "lit";
-const i = e`*,:before,:after{box-sizing:border-box}:host{--sbb-file-selector-color: var(--sbb-color-black);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-background-color: var(--sbb-color-white);--sbb-file-selector-border-color: var(--sbb-color-cloud);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media (forced-colors: active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-color-milk);--sbb-file-selector-border-color: var(--sbb-color-storm)}@media (forced-colors: active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{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-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal)}:host(:not([data-slot-names~=error])) .sbb-file-selector__error{display:none}`;
-export {
-  i as f
-};

package/icon-sidebar-button-common-CM-ueEhH.js

@@ -1,7 +0,0 @@
-import { css as o } from "lit";
-const i = o`*,:before,:after{box-sizing:border-box}:host{position:absolute;inset:0}`, b = o`*,:before,:after{box-sizing:border-box}:host{position:relative;display:block;height:100%;overflow:auto;outline-color:var(--sbb-focus-outline-color)}`, r = o`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important;--sbb-icon-sidebar-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-icon-sidebar-button-transition-easing-function: var(--sbb-animation-easing);--sbb-icon-sidebar-button-dimension: var(--sbb-size-element-m);--sbb-icon-sidebar-button-border-radius: var(--sbb-border-radius-4x);--sbb-icon-sidebar-button-color: var(--sbb-color-granite);--sbb-icon-sidebar-button-current-color: var(--sbb-color-charcoal);--sbb-icon-sidebar-button-current-border-width: var(--sbb-border-width-3x);--sbb-icon-sidebar-button-current-border-inset-block: var(--sbb-spacing-fixed-2x);--sbb-icon-sidebar-button__current-border-inset-inline-start: 0;--sbb-icon-sidebar-button__color: var(--sbb-icon-sidebar-button-color)}@media (forced-colors: active){:host{--sbb-icon-sidebar-button-current-color: Highlight !important}}@media (forced-colors: active){:host([data-button]){--sbb-icon-sidebar-button-color: ButtonText !important}}@media (forced-colors: active){:host([data-link]){--sbb-icon-sidebar-button-color: LinkText !important}}@media (any-hover: hover){:host(:not(:active,[data-active]):hover){--sbb-icon-sidebar-button__hover-shift: .0625rem;--sbb-icon-sidebar-button__cursor: pointer}}.sbb-action-base{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--sbb-icon-sidebar-button-dimension);padding-block:0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift, 0rem));color:var(--sbb-icon-sidebar-button__color);border-radius:var(--sbb-icon-sidebar-button-border-radius);cursor:var(--sbb-icon-sidebar-button__cursor);-webkit-user-select:none;user-select:none;transition-duration:var(--sbb-icon-sidebar-button-transition-duration);transition-timing-function:var(--sbb-icon-sidebar-button-transition-easing-function);transition-property:color,padding}:host(.sbb-active) .sbb-action-base{color:var(--sbb-icon-sidebar-button-current-color)}:host(.sbb-active) .sbb-action-base:before{content:"";display:block;position:absolute;inset-block:var(--sbb-icon-sidebar-button-current-border-inset-block);inset-inline:var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;border-inline-start:var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor}:host(:focus-visible) .sbb-action-base,.sbb-action-base:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:calc(-1 * var(--sbb-focus-outline-width) - .3125rem)}`;
-export {
-  b as a,
-  r as i,
-  i as s
-};

package/radio-button-common-CUppr5FI.js

@@ -1,5 +0,0 @@
-import { css as o } from "lit";
-const t = o`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 )}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([data-checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host(:disabled){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-radio-button-background-color);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host(:disabled){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}:host(:disabled[data-checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal)}:host([size=xs]){--sbb-radio-button-dimension: 1.25rem}.sbb-screen-reader-only{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-radio-button{display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=xs]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
-export {
-  t as r
-};

package/teaser-product-common-C8oSkIxy.js

@@ -1,5 +0,0 @@
-import { css as r } from "lit";
-const e = r`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-teaser-product-background-color: var(--sbb-color-cloud);--sbb-teaser-product-background-gradient-direction: to right;--sbb-teaser-product-background: var(--sbb-teaser-product-background-color);--sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-product-content-color: var(--sbb-color-iron);--sbb-teaser-product-footer-color: var(--sbb-color-anthracite);--sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l);--sbb-teaser-product-min-height: 37.5rem;--sbb-teaser-product-background-gradient-start: 25%;--sbb-teaser-product-background-gradient-end: 75%}@media (min-width: 64rem){:host{--sbb-teaser-product-background: linear-gradient( var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end) )}}:host([negative]){--sbb-teaser-product-background-color: var(--sbb-color-midnight);--sbb-teaser-product-content-color: var(--sbb-color-cloud);--sbb-teaser-product-footer-color: var(--sbb-color-cloud);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-title-text-color-normal-override: var(--sbb-color-milk)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction: to left}.sbb-teaser-product__image-container{overflow:hidden;border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0}@media (min-width: 64rem){.sbb-teaser-product__image-container{position:absolute;inset:0;border-radius:var(--sbb-teaser-product-border-radius)}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){--sbb-title-margin-block-start: 0}::slotted(:is(sbb-action-group,[data-action]).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){display:flex;width:100%;height:100%}@media (forced-colors: active){.sbb-teaser-product__root:after{content:"";position:absolute;display:block;inset:0;pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius)}}.sbb-action-base{display:block;position:relative;text-decoration:none}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding:var(--sbb-spacing-responsive-s)}@media (min-width: 64rem){.sbb-teaser-product__container{display:grid;grid:"content ." 1fr "footnote ." auto/1fr 1fr;column-gap:var(--sbb-spacing-responsive-xxl);background:var(--sbb-teaser-product-background);border-radius:var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block) 0;padding-inline:var(--sbb-spacing-responsive-xl);position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:". content" ". footnote"}}.sbb-teaser-product__content{grid-area:content;align-self:center;margin:0;color:var(--sbb-teaser-product-content-color)}@media (min-width: 64rem){.sbb-teaser-product__content{align-content:center;min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-padding-block))}}.sbb-teaser-product__footnote{grid-area:footnote;padding-block-start:var(--sbb-spacing-responsive-s);color:var(--sbb-teaser-product-footer-color);--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:not([data-slot-names~=footnote])) .sbb-teaser-product__footnote{padding-block-start:0}@media (min-width: 64rem){.sbb-teaser-product__footnote{min-height:var(--sbb-teaser-product-container-padding-block);padding-block:var(--sbb-spacing-responsive-xs)}}`;
-export {
-  e as t
-};