@sbb-esta/lyne-elements 4.4.0 → 4.5.0

package/standard-theme.css

@@ -1367,6 +1367,57 @@ summary {
     var(--sbb-color-silver),
     var(--sbb-color-anthracite)
   );
+  --sbb-button-box-shadow: transparent 0 0;
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-border-width: var(--sbb-border-width-2x);
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
+  --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-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-button-loading-border-width: var(--sbb-border-width-3x);
+  --sbb-button-loading-delay: 300ms;
+  --sbb-button-min-height-size-l: var(--sbb-size-element-m);
+  --sbb-button-min-height-size-m: var(--sbb-size-element-s);
+  --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
+  --sbb-button-min-height: var(--sbb-button-min-height-size-l);
+  --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
+  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
+  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
+  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);
+  --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-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-color-text: var(--sbb-color-3);
+  --sbb-mini-button-color-default-background: transparent;
+  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-mini-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-mini-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-group-background: var(--sbb-background-color-1);
+  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
+  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-s);
+  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
+  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-color: transparent;
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
@@ -1659,6 +1710,9 @@ summary {
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+    --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
+    --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
+    --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
     --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0;
     --sbb-chip-group-margin-block-no-label-not-empty: 0.1875rem 0.875rem;
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);

package/tabs/tab/tab.component.js

@@ -6,7 +6,7 @@ import { SbbElementInternalsMixin as d } from "../../core/mixins.js";
 const v = c`@charset "UTF-8";:host{display:none}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host(: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)}:host(:is(:state(active),[state--active])){display:block;opacity:1;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,height;transition-behavior:allow-discrete}@starting-style{:host(:is(:state(active),[state--active])){opacity:0}}`;
 let p = 0, E = (() => {
   var t;
-  let o = [m("sbb-tab")], s, a = [], e, n = d(u);
+  let o = [m("sbb-tab")], i, a = [], e, n = d(u);
   return t = class extends n {
     constructor() {
       super(...arguments), this._tabContentResizeObserver = new b(this, {
@@ -24,7 +24,7 @@ let p = 0, E = (() => {
       return this.closest("sbb-tab-group");
     }
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-tab-${p++}`, this.tabIndex = 0;
+      super.connectedCallback(), this.id ||= `sbb-tab-${p++}`, this.tabIndex = 0, this.classList.add("sbb-scrollbar");
     }
     /** @internal */
     activate() {
@@ -41,8 +41,8 @@ let p = 0, E = (() => {
       return h`<slot></slot>`;
     }
   }, e = t, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    l(null, s = { value: e }, o, { kind: "class", name: e.name, metadata: i }, null, a), e = s.value, i && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    l(null, i = { value: e }, o, { kind: "class", name: e.name, metadata: s }, null, a), e = i.value, s && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
   })(), t.role = "tabpanel", t.styles = v, t.events = {
     active: "active"
   }, r(e, a), e;

package/tabs/tab-group/tab-group.component.js

@@ -1,35 +1,35 @@
-var T = (r) => {
-  throw TypeError(r);
+var k = (i) => {
+  throw TypeError(i);
 };
-var C = (r, i, a) => i.has(r) || T("Cannot " + a);
-var u = (r, i, a) => (C(r, i, "read from private field"), a ? a.call(r) : i.get(r)), g = (r, i, a) => i.has(r) ? T("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(r) : i.set(r, a), b = (r, i, a, l) => (C(r, i, "write to private field"), l ? l.call(r, a) : i.set(r, a), a);
-import { __esDecorate as m, __runInitializers as n } from "tslib";
-import { ResizeController as L } from "@lit-labs/observers/resize-controller.js";
-import { css as D, LitElement as R, html as N } from "lit";
-import { customElement as O, property as p } from "lit/decorators.js";
-import { ref as H } from "lit/directives/ref.js";
-import { isArrowKeyPressed as P, getNextElementIndex as A } from "../../core/a11y.js";
-import { forceType as G } from "../../core/decorators.js";
-import { isLean as K } from "../../core/dom.js";
-import { throttle as j } from "../../core/eventing.js";
+var G = (i, s, a) => s.has(i) || k("Cannot " + a);
+var m = (i, s, a) => (G(i, s, "read from private field"), a ? a.call(i) : s.get(i)), u = (i, s, a) => s.has(i) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), o = (i, s, a, n) => (G(i, s, "write to private field"), n ? n.call(i, a) : s.set(i, a), a);
+import { __esDecorate as f, __runInitializers as b } from "tslib";
+import { ResizeController as D } from "@lit-labs/observers/resize-controller.js";
+import { css as P, LitElement as R, html as g } from "lit";
+import { customElement as N, property as p } from "lit/decorators.js";
+import { ref as O } from "lit/directives/ref.js";
+import { isArrowKeyPressed as A, getNextElementIndex as K } from "../../core/a11y.js";
+import { forceType as $ } from "../../core/decorators.js";
+import { isLean as j } from "../../core/dom.js";
+import { throttle as w } from "../../core/eventing.js";
 import { SbbElementInternalsMixin as M, SbbHydrationMixin as U, ɵstateController as B } from "../../core/mixins.js";
 import { boxSizingStyles as W } from "../../core/styles.js";
 import { tabGroupCommonStyles as q } from "../common.js";
-const F = D`:host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-content-gap)}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) )}:host([fixed-height]) .sbb-tab-group-content{--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)}:host([fixed-height]) .sbb-tab-group-content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([fixed-height]) .sbb-tab-group-content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([fixed-height]) .sbb-tab-group-content::-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}:host([fixed-height]) .sbb-tab-group-content::-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)))}:host([fixed-height]) .sbb-tab-group-content::-webkit-scrollbar-button,:host([fixed-height]) .sbb-tab-group-content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([fixed-height]) .sbb-tab-group-content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([fixed-height]) .sbb-tab-group-content{height:100%;overflow:auto}.sbb-tab-group-content{transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}`;
-let bt = (() => {
-  var c, h, d, s;
-  let r = [O("sbb-tab-group")], i, a = [], l, f = M(U(R)), x, v = [], _ = [], k, w = [], S = [], z, y = [], E = [];
-  return s = class extends f {
+const F = P`:host{--sbb-tab-group-animation-duration: 0s;gap:var(--sbb-tab-group-content-gap)}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) )}.sbb-tab-group-content{height:var(--sbb-tab-content-height);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}:host([fixed-height]) ::slotted(sbb-tab){height:100%;overflow:auto}`;
+let ot = (() => {
+  var h, d, c, l;
+  let i = [N("sbb-tab-group")], s, a = [], n, _ = M(U(R)), x, S = [], v = [], z, y = [], I = [], T, E = [], C = [];
+  return l = class extends _ {
     constructor() {
       super();
-      g(this, c);
-      g(this, h);
-      g(this, d);
-      this._tabGroupResizeObserver = new L(this, {
+      u(this, h);
+      u(this, d);
+      u(this, c);
+      this._tabGroupResizeObserver = new D(this, {
         target: null,
         skipInitial: !0,
         callback: () => this._onTabGroupElementResize()
-      }), b(this, c, n(this, v, K() ? "s" : "l")), b(this, h, (n(this, _), n(this, w, 0))), b(this, d, (n(this, S), n(this, y, !1))), this._onContentSlotChange = (n(this, E), () => {
+      }), o(this, h, b(this, S, j() ? "s" : "l")), o(this, d, (b(this, v), b(this, y, 0))), o(this, c, (b(this, I), b(this, E, !1))), this._onContentSlotChange = (b(this, C), () => {
         this.labels.forEach((t) => t.linkToTab()), this.labels.find((t) => t.active)?.activate();
       }), this._onLabelSlotChange = () => {
         this.labels.forEach((t) => t.linkToTab());
@@ -40,20 +40,20 @@ let bt = (() => {
      * @default 'l' / 's' (lean)
      */
     get size() {
-      return u(this, c);
+      return m(this, h);
     }
     set size(t) {
-      b(this, c, t);
+      o(this, h, t);
     }
     /**
      * Sets the initial tab. If it matches a disabled tab or exceeds the length of
      * the tab group, the first enabled tab will be selected.
      */
     get initialSelectedIndex() {
-      return u(this, h);
+      return m(this, d);
     }
     set initialSelectedIndex(t) {
-      b(this, h, t);
+      o(this, d, t);
     }
     /**
      * If set to true, the `sbb-tab` elements take 100% height of the `sbb-tab-group`.
@@ -61,10 +61,10 @@ let bt = (() => {
      * The content becomes scrollable on overflow.
      */
     get fixedHeight() {
-      return u(this, d);
+      return m(this, c);
     }
     set fixedHeight(t) {
-      b(this, d, t);
+      o(this, c, t);
     }
     /** Gets the slotted `sbb-tab-label`s. */
     get labels() {
@@ -79,21 +79,21 @@ let bt = (() => {
     }
     /**
      * Disables a tab by index.
-     * @param tabIndex The index of the tab you want to disable.
+     * @param index The index of the tab you want to disable.
      */
     disableTab(t) {
       this.labels[t] && (this.labels[t].disabled = !0);
     }
     /**
      * Enables a tab by index.
-     * @param tabIndex The index of the tab you want to enable.
+     * @param index The index of the tab you want to enable.
      */
     enableTab(t) {
       this.labels[t] && (this.labels[t].disabled = !1);
     }
     /**
      * Activates a tab by index.
-     * @param tabIndex The index of the tab you want to activate.
+     * @param index The index of the tab you want to activate.
      */
     activateTab(t) {
       this.labels[t]?.activate();
@@ -118,47 +118,46 @@ let bt = (() => {
     _handleKeyDown(t) {
       const e = this._enabledTabs();
       if (!(!e || // don't trap nested handling
-      t.target !== this && t.target.parentElement !== this) && P(t)) {
-        const o = e.findIndex(($) => $.active), I = A(t, o, e.length);
-        e[I]?.activate(), e[I]?.focus(), t.preventDefault();
+      t.target !== this && t.target.parentElement !== this) && A(t)) {
+        const r = e.findIndex((L) => L.active), H = K(t, r, e.length);
+        e[H]?.activate(), e[H]?.focus(), t.preventDefault();
       }
     }
     /**
      * @internal
      */
     setTabContentHeight(t) {
-      this._tabContentElement.style.height = `${t}px`;
+      this.style.setProperty("--sbb-tab-content-height", `${t}px`);
     }
     render() {
-      return N`
+      return g`
       <div
         class="sbb-tab-group"
         role="tablist"
-        ${H((t) => this._tabGroupElement = t)}
+        ${O((t) => this._tabGroupElement = t)}
       >
         <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
       </div>
-      <div
-        class="sbb-tab-group-content"
-        ${H((t) => this._tabContentElement = t)}
-      >
-        <slot @slotchange=${j(this._onContentSlotChange, 150)}></slot>
-      </div>
+      ${this.fixedHeight ? g`<slot @slotchange=${w(this._onContentSlotChange, 150)}></slot>` : g`
+            <div class="sbb-tab-group-content">
+              <slot @slotchange=${w(this._onContentSlotChange, 150)}></slot>
+            </div>
+          `}
     `;
     }
-  }, c = new WeakMap(), h = new WeakMap(), d = new WeakMap(), l = s, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    x = [p()], k = [G(), p({ attribute: "initial-selected-index", type: Number })], z = [G(), p({ attribute: "fixed-height", type: Boolean, reflect: !0 })], m(s, null, x, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, o) => {
-      e.size = o;
-    } }, metadata: t }, v, _), m(s, null, k, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, o) => {
-      e.initialSelectedIndex = o;
-    } }, metadata: t }, w, S), m(s, null, z, { kind: "accessor", name: "fixedHeight", static: !1, private: !1, access: { has: (e) => "fixedHeight" in e, get: (e) => e.fixedHeight, set: (e, o) => {
-      e.fixedHeight = o;
-    } }, metadata: t }, y, E), m(null, i = { value: l }, r, { 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 });
-  })(), s.styles = [W, q, F], s.events = {
+  }, h = new WeakMap(), d = new WeakMap(), c = new WeakMap(), n = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+    x = [p()], z = [$(), p({ attribute: "initial-selected-index", type: Number })], T = [$(), p({ attribute: "fixed-height", type: Boolean, reflect: !0 })], f(l, null, x, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, r) => {
+      e.size = r;
+    } }, metadata: t }, S, v), f(l, null, z, { kind: "accessor", name: "initialSelectedIndex", static: !1, private: !1, access: { has: (e) => "initialSelectedIndex" in e, get: (e) => e.initialSelectedIndex, set: (e, r) => {
+      e.initialSelectedIndex = r;
+    } }, metadata: t }, y, I), f(l, null, T, { kind: "accessor", name: "fixedHeight", static: !1, private: !1, access: { has: (e) => "fixedHeight" in e, get: (e) => e.fixedHeight, set: (e, r) => {
+      e.fixedHeight = r;
+    } }, metadata: t }, E, C), f(null, s = { value: n }, i, { kind: "class", name: n.name, metadata: t }, null, a), n = s.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = [W, q, F], l.events = {
     tabchange: "tabchange"
-  }, n(l, a), l;
+  }, b(n, a), n;
 })();
 export {
-  bt as SbbTabGroupElement
+  ot as SbbTabGroupElement
 };

package/mini-button-label-common-BOB7JQKi.js

@@ -1,11 +0,0 @@
-import { css as o } from "lit";
-const b = o`:host{display:inline-block;outline:none!important;--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:64rem){: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(:is(:state(button),[state--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(:is(:state(link),[state--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:64rem){: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:64rem){:host([size=s]){--sbb-button-padding-inline: var(--sbb-spacing-fixed-5x)}}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--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,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-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: var(--sbb-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,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border: Highlight !important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor: var(--sbb-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,:is(:state(active),[state--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-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);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(:is(:state(focus-visible),[state--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(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .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,:is(:state(active),[state--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,:is(:state(active),[state--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,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition)}`, s = 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)}`, e = o`:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-mini-button-color-text: var(--sbb-color-3);--sbb-mini-button-color-default-background: transparent;--sbb-mini-button-color-hover-background: var(--sbb-background-color-3);--sbb-mini-button-color-active-background: var(--sbb-background-color-4);--sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);--sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text: var(--sbb-color-granite);--sbb-mini-button-color-disabled-text: light-dark( var(--sbb-color-granite), var(--sbb-color-smoke) );--sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);--sbb-mini-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);--sbb-mini-button-color-background: var(--sbb-mini-button-color-default-background);--sbb-mini-button-color: var(--sbb-mini-button-color-text)}@media(forced-colors:active){:host{--sbb-mini-button-color-text: ButtonText !important;--sbb-mini-button-color-hover-background: Highlight !important;--sbb-mini-button-color-active-background: Highlight !important;--sbb-mini-button-color-disabled-background: Canvas !important;--sbb-mini-button-color-disabled-border: GrayText !important;--sbb-mini-button-color-disabled-text: GrayText !important}}:host([negative]){--sbb-mini-button-color-text: var(--sbb-color-3-negative);--sbb-mini-button-color-default-background: transparent;--sbb-mini-button-color-hover-background: var(--sbb-background-color-3-negative);--sbb-mini-button-color-active-background: var(--sbb-background-color-4-negative);--sbb-mini-button-color-disabled-background: var(--sbb-background-color-3-negative);--sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text: var(--sbb-color-5)}@media(any-hover:hover){:host(:is(:hover,:is(:state(force-hover),[state--force-hover])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]),:active,:is(:state(active),[state--active]))){--sbb-mini-button-translate-y-content-hover: -.0625rem;--sbb-mini-button-color-background: var(--sbb-mini-button-color-hover-background)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background: var(--sbb-mini-button-color-active-background)}:host(:is([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background: var(--sbb-mini-button-color-disabled-background);--sbb-mini-button-border: var(--sbb-border-width-1x) dashed var(--sbb-mini-button-color-disabled-border);--sbb-mini-button-color: var(--sbb-mini-button-color-disabled-text);--sbb-mini-button-pointer-events: none;--sbb-mini-button-cursor: var(--sbb-cursor-default)}:host(:is(:state(focus-visible),[state--focus-visible])){--sbb-focus-outline-style: initial}.sbb-action-base{display:flex;position:relative;color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-mini-button-pointer-events, auto);cursor:var(--sbb-mini-button-cursor, var(--sbb-cursor-pointer));transition:color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);text-decoration:none;outline:none}.sbb-action-base:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-mini-button-border-radius);background-color:var(--sbb-mini-button-color-background);transition-duration:var(--sbb-mini-button-transition-duration);transition-timing-function:var(--sbb-mini-button-transition-easing-function);transition-property:inset,background-color;border:var(--sbb-mini-button-border)}.sbb-action-base:focus-visible:before,:host(:is(:is(:state(focus-visible),[state--focus-visible]),:focus-visible)) .sbb-action-base: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)}::slotted(sbb-icon),sbb-icon{display:flex;transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0rem);min-width:var(--_sbb-mini-button-image-size, var(--sbb-size-icon-ui-small));min-height:var(--_sbb-mini-button-image-size, var(--sbb-size-icon-ui-small));align-items:center;justify-content:center}`, i = o`:host{--sbb-mini-button-gap: .125rem;--sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display: block;--sbb-mini-button-label-height: var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline: 0;--sbb-mini-button-label-display: none;--sbb-mini-button-label-height: unset}.sbb-action-base{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);align-items:center;justify-content:center;padding-inline:var(--sbb-mini-button-padding-inline)}.sbb-mini-button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover, 0)}`;
-export {
-  n as a,
-  b,
-  e as c,
-  i as m,
-  r as p,
-  a as s,
-  s as t
-};