@sbb-esta/lyne-elements 5.0.0-next.2 → 5.0.0-next.3

package/{button-common-BMpS65Zf.js → button-common-BQdNXKwl.js}

@@ -1,19 +1,19 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { nothing as n, unsafeCSS as r } from "lit";
 import { property as i } from "lit/decorators.js";
-import { SbbNegativeMixin as a, forceType as o, isLean as s } from "./core.js";
-import { html as c } from "lit/static-html.js";
-import { SbbIconNameMixin as l } from "./icon.pure.js";
+import { SbbNegativeMixin as a, forceType as o } from "./core.js";
+import { html as s } from "lit/static-html.js";
+import { SbbIconNameMixin as c } from "./icon.pure.js";
 //#region src/elements/button/common/accent-button.scss?inline
-var u = ":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)}", d = ":host{display:inline-block;outline:none!important;--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--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);--_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(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=l]){--sbb-button-min-height: var(--sbb-button-min-height-size-l);--sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l)}:host([size=m]){--sbb-button-min-height: var(--sbb-button-min-height-size-m);--sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m)}:host([size=s]){--sbb-button-min-height: var(--sbb-button-min-height-size-s);--sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);--sbb-button-gap: var(--sbb-spacing-fixed-1x)}: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{display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;font-size:var(--sbb-text-font-size-xs);font-weight:700;letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);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)}}", f = ":host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-mini-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--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}", p = ":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);line-height:var(--sbb-typo-line-height-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)}", m = ":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)}", h = ":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)}", g = ":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)}", _ = r(m), v = r(h), y = r(u), b = r(g), x = r(f), S = r(p), C = (u) => (() => {
-	let f = a(l(u)), p, m = [], h = [], g, _ = [], v = [];
-	return class extends f {
+var l = ":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)}", u = ":host{display:inline-block;outline:none!important;--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--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);--_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(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=l]){--sbb-button-min-height: var(--sbb-button-min-height-size-l);--sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l)}:host([size=m]){--sbb-button-min-height: var(--sbb-button-min-height-size-m);--sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m)}:host([size=s]){--sbb-button-min-height: var(--sbb-button-min-height-size-s);--sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);--sbb-button-gap: var(--sbb-spacing-fixed-1x)}: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{display:flex;gap:var(--sbb-button-gap);align-items:center;justify-content:center;font-size:var(--sbb-text-font-size-xs);font-weight:700;letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);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)}}", d = ":host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-mini-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--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, 0);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}", f = ":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);line-height:var(--sbb-typo-line-height-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)}", p = ":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)}", m = ":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)}", h = ":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)}", g = r(p), _ = r(m), v = r(l), y = r(h), b = r(d), x = r(f), S = (l) => (() => {
+	let d = a(c(l)), f, p = [], m = [], h, g = [], _ = [];
+	return class extends d {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-			p = [i({ reflect: !0 })], g = [o(), i({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [i({ reflect: !0 })], h = [o(), i({
 				reflect: !0,
 				type: Boolean
-			})], e(this, null, p, {
+			})], e(this, null, f, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -26,7 +26,7 @@ var u = ":host{--sbb-button-color-active-background: var(--sbb-background-color-
 					}
 				},
 				metadata: t
-			}, m, h), e(this, null, g, {
+			}, p, m), e(this, null, h, {
 				kind: "accessor",
 				name: "loading",
 				static: !1,
@@ -39,7 +39,7 @@ var u = ":host{--sbb-button-color-active-background: var(--sbb-background-color-
 					}
 				},
 				metadata: t
-			}, _, v), t && Object.defineProperty(this, Symbol.metadata, {
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -47,16 +47,16 @@ var u = ":host{--sbb-button-color-active-background: var(--sbb-background-color-
 			});
 		}
 		static {
-			this.styles = [r(d)];
+			this.styles = [r(u)];
 		}
-		#e = t(this, m, s() ? "s" : "m");
+		#e = t(this, p, null);
 		get size() {
 			return this.#e;
 		}
 		set size(e) {
 			this.#e = e;
 		}
-		#t = (t(this, h), t(this, _, !1));
+		#t = (t(this, m), t(this, g, !1));
 		get loading() {
 			return this.#t;
 		}
@@ -64,7 +64,7 @@ var u = ":host{--sbb-button-color-active-background: var(--sbb-background-color-
 			this.#t = e;
 		}
 		constructor(...e) {
-			super(...e), t(this, v), this.internals.states.add("sbb-button");
+			super(...e), t(this, _), this.internals.states.add("sbb-button");
 		}
 		willUpdate(e) {
 			if (super.willUpdate(e), e.has("loading")) if (this.loading) {
@@ -74,15 +74,15 @@ var u = ":host{--sbb-button-color-active-background: var(--sbb-background-color-
 			} else this.internals.ariaBusy = null, this.style?.removeProperty("--sbb-button-width"), this.maybeDisabledInteractive || (this.internals.ariaDisabled = null);
 		}
 		renderTemplate() {
-			return c`
+			return s`
         ${super.renderIconSlot()}
         <span class="sbb-button__label">
           <slot></slot>
         </span>
-        ${this.loading && !this.maybeDisabled ? c`<div class="sbb-button-loading-border"></div>` : n}
+        ${this.loading && !this.maybeDisabled ? s`<div class="sbb-button-loading-border"></div>` : n}
       `;
 		}
 	};
 })();
 //#endregion
-export { b as a, v as i, y as n, S as o, _ as r, x as s, C as t };
+export { y as a, _ as i, v as n, x as o, g as r, b as s, S as t };

package/button.js

@@ -4,7 +4,7 @@ import { SbbAccentButtonElement as n } from "./button/accent-button/accent-butto
 import { SbbTransparentButtonElement as r } from "./button/transparent-button/transparent-button.component.js";
 import { SbbMiniButtonElement as i } from "./button/mini-button/mini-button.component.js";
 import { t as a } from "./mini-button-link.component-B8HmvVCg.js";
-import { t as o } from "./mini-button-group.component-BOJNsLrh.js";
+import { t as o } from "./mini-button-group.component-DQBU0BDm.js";
 import { SbbButtonLinkElement as s } from "./button/button-link/button-link.component.js";
 import { SbbSecondaryButtonLinkElement as c } from "./button/secondary-button-link/secondary-button-link.component.js";
 import { SbbAccentButtonLinkElement as l } from "./button/accent-button-link/accent-button-link.component.js";
@@ -13,7 +13,7 @@ import { SbbButtonStaticElement as d } from "./button/button-static/button-stati
 import { SbbSecondaryButtonStaticElement as f } from "./button/secondary-button-static/secondary-button-static.component.js";
 import { SbbAccentButtonStaticElement as p } from "./button/accent-button-static/accent-button-static.component.js";
 import { SbbTransparentButtonStaticElement as m } from "./button/transparent-button-static/transparent-button-static.component.js";
-import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./button-common-BMpS65Zf.js";
+import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./button-common-BQdNXKwl.js";
 import "./button.pure.js";
 n.define(), l.define(), p.define(), e.define(), s.define(), d.define(), i.define(), o.define(), a.define(), t.define(), c.define(), f.define(), r.define(), u.define(), m.define();
 //#endregion

package/button.pure.js

@@ -4,7 +4,7 @@ import { SbbAccentButtonElement as n } from "./button/accent-button/accent-butto
 import { SbbTransparentButtonElement as r } from "./button/transparent-button/transparent-button.component.js";
 import { SbbMiniButtonElement as i } from "./button/mini-button/mini-button.component.js";
 import { t as a } from "./mini-button-link.component-B8HmvVCg.js";
-import { t as o } from "./mini-button-group.component-BOJNsLrh.js";
+import { t as o } from "./mini-button-group.component-DQBU0BDm.js";
 import { SbbButtonLinkElement as s } from "./button/button-link/button-link.component.js";
 import { SbbSecondaryButtonLinkElement as c } from "./button/secondary-button-link/secondary-button-link.component.js";
 import { SbbAccentButtonLinkElement as l } from "./button/accent-button-link/accent-button-link.component.js";
@@ -13,5 +13,5 @@ import { SbbButtonStaticElement as d } from "./button/button-static/button-stati
 import { SbbSecondaryButtonStaticElement as f } from "./button/secondary-button-static/secondary-button-static.component.js";
 import { SbbAccentButtonStaticElement as p } from "./button/accent-button-static/accent-button-static.component.js";
 import { SbbTransparentButtonStaticElement as m } from "./button/transparent-button-static/transparent-button-static.component.js";
-import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./button-common-BMpS65Zf.js";
+import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./button-common-BQdNXKwl.js";
 export { n as SbbAccentButtonElement, l as SbbAccentButtonLinkElement, p as SbbAccentButtonStaticElement, x as SbbButtonCommonElementMixin, e as SbbButtonElement, s as SbbButtonLinkElement, d as SbbButtonStaticElement, i as SbbMiniButtonElement, o as SbbMiniButtonGroupElement, a as SbbMiniButtonLinkElement, t as SbbSecondaryButtonElement, c as SbbSecondaryButtonLinkElement, f as SbbSecondaryButtonStaticElement, r as SbbTransparentButtonElement, u as SbbTransparentButtonLinkElement, m as SbbTransparentButtonStaticElement, _ as buttonAccentStyle, y as buttonPrimaryStyle, g as buttonSecondaryStyle, h as buttonTransparentStyle, v as miniButtonLabelStyle, b as miniButtonStyle };

package/checkbox/checkbox.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../checkbox.component-ChQmCxal.js";
+import { t as e } from "../checkbox.component-DWmjiv_c.js";
 export { e as SbbCheckboxElement };

package/checkbox-panel/checkbox-panel.component.js

@@ -63,7 +63,7 @@ var d = (() => {
                   ?checked=${this.checked}
                   ?indeterminate=${this.indeterminate}
                   ?disabled=${this.disabled || this.formDisabled}
-                  .size=${this.size}
+                  size=${this.size || r}
                 ></sbb-visual-checkbox>
               </span>
               <span class="sbb-checkbox__label">

package/{checkbox.component-ChQmCxal.js → checkbox.component-DWmjiv_c.js}

@@ -1,17 +1,17 @@
 import { t as e } from "./checkbox-common-BSzAnug3.js";
 import { __esDecorate as t, __runInitializers as n } from "tslib";
-import { html as r, unsafeCSS as i } from "lit";
-import { property as a } from "lit/decorators.js";
-import { SbbElement as o, getOverride as s, isLean as c } from "./core.js";
+import { html as r, nothing as i, unsafeCSS as a } from "lit";
+import { property as o } from "lit/decorators.js";
+import { SbbElement as s, getOverride as c } from "./core.js";
 import { SbbIconNameMixin as l } from "./icon.pure.js";
 import { SbbVisualCheckboxElement as u } from "./visual-checkbox.pure.js";
 //#region src/elements/checkbox/checkbox.scss?inline
 var d = ":host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-checkbox__label{display:none}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}", f = (() => {
-	let f = l(e(o)), p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [];
+	let f = l(e(s)), p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [];
 	return class extends f {
 		static {
 			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-			p = [a()], g = [a({ reflect: !0 }), s((e, t) => e.group?.size ?? t)], y = [a({
+			p = [o()], g = [o({ reflect: !0 }), c((e, t) => e.group?.size ?? t)], y = [o({
 				attribute: "icon-placement",
 				reflect: !0
 			})], t(this, null, p, {
@@ -67,7 +67,7 @@ var d = ":host{outline:none!important;display:inline-block}:host([icon-placement
 			this.elementDependencies = [u];
 		}
 		static {
-			this.styles = [i(d)];
+			this.styles = [a(d)];
 		}
 		#e = n(this, m, null);
 		get value() {
@@ -76,7 +76,7 @@ var d = ":host{outline:none!important;display:inline-block}:host([icon-placement
 		set value(e) {
 			this.#e = e;
 		}
-		#t = (n(this, h), n(this, _, c() ? "xs" : "m"));
+		#t = (n(this, h), n(this, _, null));
 		get size() {
 			return this.#t;
 		}
@@ -100,7 +100,7 @@ var d = ":host{outline:none!important;display:inline-block}:host([icon-placement
                 ?checked=${this.checked}
                 ?indeterminate=${this.indeterminate}
                 ?disabled=${this.disabled || this.formDisabled}
-                .size=${this.size}
+                size=${this.size || i}
               ></sbb-visual-checkbox>
             </span>
             <span class="sbb-checkbox__label">

package/checkbox.js

@@ -1,4 +1,4 @@
-import { t as e } from "./checkbox.component-ChQmCxal.js";
+import { t as e } from "./checkbox.component-DWmjiv_c.js";
 import { t } from "./checkbox-common-BSzAnug3.js";
 import "./checkbox.pure.js";
 //#region src/elements/checkbox.ts

package/checkbox.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./checkbox.component-ChQmCxal.js";
+import { t as e } from "./checkbox.component-DWmjiv_c.js";
 import { t } from "./checkbox-common-BSzAnug3.js";
 export { t as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement };

package/chip/chip-group/chip-group.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chip-group.component-BMpczIZH.js";
+import { n as e, t } from "../../chip-group.component-DJORKUef.js";
 export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/{chip-group.component-BMpczIZH.js → chip-group.component-DJORKUef.js}

@@ -1,10 +1,10 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
-import { SbbDisabledMixin as o, SbbElement as s, SbbFormAssociatedMixin as c, SbbLanguageController as l, SbbNegativeMixin as u, SbbPropertyWatcherController as d, SbbRequiredMixin as f, forceType as p, getNextElementIndex as m, i18nChipGroupInputDescription as h, i18nSelectionRequired as g, isArrowKeyPressed as _, isLean as v } from "./core.js";
-import { SbbChipElement as y } from "./chip/chip/chip.component.js";
+import { SbbDisabledMixin as o, SbbElement as s, SbbFormAssociatedMixin as c, SbbLanguageController as l, SbbNegativeMixin as u, SbbPropertyWatcherController as d, SbbRequiredMixin as f, forceType as p, getNextElementIndex as m, i18nChipGroupInputDescription as h, i18nSelectionRequired as g, isArrowKeyPressed as _ } from "./core.js";
+import { SbbChipElement as v } from "./chip/chip/chip.component.js";
 //#region src/elements/chip/chip-group/chip-group.scss?inline
-var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block);line-height:var(--sbb-typo-line-height-text)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}", x = class extends CustomEvent {
+var y = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block);line-height:var(--sbb-typo-line-height-text)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-with-label-s)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-without-label-s)}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-base-lm)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-without-label-m)}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-with-label-m)}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-without-label-l)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-with-label-l)}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}", b = class extends CustomEvent {
 	get detail() {
 		return this;
 	}
@@ -21,18 +21,18 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 	setLabel(e) {
 		this.label = e;
 	}
-}, S = (() => {
-	let S = f(o(u(c(s)))), C = [], w, T, E = [], D = [], O, k = [], A = [], j, M = [], N = [];
-	return class extends S {
+}, x = (() => {
+	let x = f(o(u(c(s)))), S = [], C, w, T = [], E = [], D, O = [], k = [], A, j = [], M = [];
+	return class extends x {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(S[Symbol.metadata] ?? null) : void 0;
-			w = [a({ type: Array })], T = [a({ attribute: !1 })], O = [a({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+			C = [a({ type: Array })], w = [a({ attribute: !1 })], D = [a({
 				attribute: "separator-keys",
 				type: Array
-			})], j = [p(), a({
+			})], A = [p(), a({
 				attribute: "add-on-blur",
 				type: Boolean
-			})], e(this, null, w, {
+			})], e(this, null, C, {
 				kind: "setter",
 				name: "value",
 				static: !1,
@@ -44,7 +44,7 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 					}
 				},
 				metadata: t
-			}, null, C), e(this, null, T, {
+			}, null, S), e(this, null, w, {
 				kind: "accessor",
 				name: "displayWith",
 				static: !1,
@@ -57,7 +57,7 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 					}
 				},
 				metadata: t
-			}, E, D), e(this, null, O, {
+			}, T, E), e(this, null, D, {
 				kind: "accessor",
 				name: "separatorKeys",
 				static: !1,
@@ -70,7 +70,7 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 					}
 				},
 				metadata: t
-			}, k, A), e(this, null, j, {
+			}, O, k), e(this, null, A, {
 				kind: "accessor",
 				name: "addOnBlur",
 				static: !1,
@@ -83,7 +83,7 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 					}
 				},
 				metadata: t
-			}, M, N), t && Object.defineProperty(this, Symbol.metadata, {
+			}, j, M), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -97,7 +97,7 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 			this.role = "listbox";
 		}
 		static {
-			this.styles = [i(b)];
+			this.styles = [i(y)];
 		}
 		static {
 			this.events = {
@@ -140,7 +140,7 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 			this.#n = e;
 		}
 		constructor() {
-			super(), this.#e = (t(this, C), t(this, E, null)), this.#t = (t(this, D), t(this, k, ["Enter"])), this.#n = (t(this, A), t(this, M, !1)), this._inputAttributeObserver = (t(this, N), r ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new l(this), this.addEventListener?.(y.events.requestdelete, (e) => this._deleteChip(e.target)), this.addEventListener?.("keydown", (e) => this._onChipKeyDown(e)), this.addController(new d(this, () => this.closest("sbb-form-field"), {
+			super(), this.#e = (t(this, S), t(this, T, null)), this.#t = (t(this, E), t(this, O, ["Enter"])), this.#n = (t(this, k), t(this, j, !1)), this._inputAttributeObserver = (t(this, M), r ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new l(this), this._previousSize = null, this.addEventListener?.(v.events.requestdelete, (e) => this._deleteChip(e.target)), this.addEventListener?.("keydown", (e) => this._onChipKeyDown(e)), this.addController(new d(this, () => this.closest("sbb-form-field"), {
 				size: (e) => this._updateSize(e.size),
 				label: (e) => this._updateLabelState(e),
 				hiddenLabel: (e) => this._updateLabelState(e)
@@ -190,7 +190,7 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 			}, { signal: this._inputAbortController.signal }), this._inputAttributeObserver?.observe(this._inputElement, {
 				attributes: !0,
 				attributeFilter: ["readonly", "disabled"]
-			})), (!this._previousSize || !this.closest("sbb-form-field")) && this._updateSize(v() ? "s" : "m"), this.toggleState("empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
+			})), this.closest("sbb-form-field") || this._updateSize(null), this.toggleState("empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
 		}
 		_onChipKeyDown(e) {
 			let t = e.target;
@@ -226,7 +226,7 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 		_createChipFromInput(e = "input", t) {
 			let n = t ?? this._inputElement.value.trim();
 			if (!n) return;
-			let r = new x({
+			let r = new b({
 				origin: e,
 				value: n,
 				label: (t ? this.displayWith?.(t) : null) ?? void 0
@@ -280,4 +280,4 @@ var b = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 	};
 })();
 //#endregion
-export { x as n, S as t };
+export { b as n, x as t };

package/chip.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./chip-group.component-BMpczIZH.js";
+import { n as e, t } from "./chip-group.component-DJORKUef.js";
 import { t as n } from "./chip.component-gcvF3pEX.js";
 import "./chip.pure.js";
 n.define(), t.define();

package/chip.pure.js

@@ -1,3 +1,3 @@
-import { n as e, t } from "./chip-group.component-BMpczIZH.js";
+import { n as e, t } from "./chip-group.component-DJORKUef.js";
 import { t as n } from "./chip.component-gcvF3pEX.js";
 export { n as SbbChipElement, t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/{compact-paginator.component-sRHapku-.js → compact-paginator.component-BAuShgQE.js}

@@ -1,10 +1,9 @@
 import { html as e, unsafeCSS as t } from "lit";
 import { SbbElement as n, i18nPage as r, i18nPaginatorOf as i } from "./core.js";
 import { SbbDividerElement as a } from "./divider.pure.js";
-import { styleMap as o } from "lit/directives/style-map.js";
-import { SbbPaginatorCommonElementMixin as s } from "./paginator/common/paginator-common.js";
+import { SbbPaginatorCommonElementMixin as o } from "./paginator/common/paginator-common.js";
 //#region src/elements/paginator/compact-paginator/compact-paginator.scss?inline
-var c = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content, start);min-height:var(--sbb-compact-paginator-height)}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([size=m]){--sbb-compact-paginator-height: var(--sbb-size-element-m)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex;align-items:center;justify-content:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}", l = class extends s(n) {
+var s = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content, start);min-height:var(--sbb-paginator-height)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex;align-items:center;justify-content:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-paginator-color)}.sbb-compact-paginator__divider{height:1rem;--sbb-divider-color: currentcolor}", c = class extends o(n) {
 	static {
 		this.elementName = "sbb-compact-paginator";
 	}
@@ -12,7 +11,7 @@ var c = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content
 		this.elementDependencies = [a];
 	}
 	static {
-		this.styles = [t(c)];
+		this.styles = [t(s)];
 	}
 	static {
 		this.events = { page: "page" };
@@ -23,7 +22,6 @@ var c = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content
         >${this.pageIndex + 1}<sbb-divider
           orientation="vertical"
           class="sbb-compact-paginator__divider"
-          style=${o({ "--sbb-divider-color": "currentcolor" })}
           ?negative=${this.negative}
         ></sbb-divider
         >${this.numberOfPages()}</span
@@ -40,4 +38,4 @@ var c = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content
 	}
 };
 //#endregion
-export { l as t };
+export { c as t };

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../sticky-bar.component-CmB6U3iY.js";
+import { t as e } from "../../sticky-bar.component-dmlGAZLW.js";
 export { e as SbbStickyBarElement };

package/container.js

@@ -1,5 +1,5 @@
 import { t as e } from "./container.component-sQtiqWxT.js";
-import { t } from "./sticky-bar.component-CmB6U3iY.js";
+import { t } from "./sticky-bar.component-dmlGAZLW.js";
 import "./container.pure.js";
 e.define(), t.define();
 //#endregion

package/container.pure.js

@@ -1,3 +1,3 @@
 import { t as e } from "./container.component-sQtiqWxT.js";
-import { t } from "./sticky-bar.component-CmB6U3iY.js";
+import { t } from "./sticky-bar.component-dmlGAZLW.js";
 export { e as SbbContainerElement, t as SbbStickyBarElement };

package/core/base-elements/selection-group-base-element.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../selection-group-base-element-BCEzcnya.js";
+import { t as e } from "../../selection-group-base-element-COFsU6Ur.js";
 export { e as SbbSelectionGroupBaseElement };

package/core/mixins/panel-mixin.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../panel-mixin-CcbyRemy.js";
+import { t as e } from "../../panel-mixin-XQXElTGt.js";
 export { e as SbbPanelMixin };

package/core/mixins/selection-panel-mixin.js

@@ -9,7 +9,7 @@ var t = (t) => {
 			return this.querySelector?.("sbb-radio-button-panel, sbb-checkbox-panel") ?? null;
 		}
 		constructor(...t) {
-			super(t), this._propertyWatcher = new e(this, () => this.panel, {
+			super(t), this._previousSize = null, this._propertyWatcher = new e(this, () => this.panel, {
 				checked: (e) => {
 					this.toggleState("checked", e.checked), this.onInputStateChange?.();
 				},

package/core/overlay/overlay-option-panel.js

@@ -2,14 +2,15 @@ import { getElementPosition as e } from "./position.js";
 //#region src/elements/core/overlay/overlay-option-panel.ts
 function t(t, n, r, i, a, o = "auto") {
 	if (!t || !n) return;
-	a.style.setProperty("--sbb-options-panel-width", `${n.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${n.offsetHeight}px`);
-	let s = e(r, n, i, {
+	let s = n.getBoundingClientRect();
+	a.style.setProperty("--sbb-options-panel-width", `${n.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${n.offsetHeight}px`), a.style.setProperty("--sbb-options-panel-origin-position-x", `${s.left}px`), a.style.setProperty("--sbb-options-panel-origin-position-y", `${s.top}px`);
+	let c = e(r, n, i, {
 		forceBelow: o === "below",
 		forceAbove: o === "above"
 	});
-	a.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), a.style.setProperty("--sbb-options-panel-max-height-calculated", s.maxHeight);
-	let c = s.alignment.vertical === "above";
-	a.toggleState?.("options-panel-position-above", c), a.toggleState?.("options-panel-position-below", !c), n.setAttribute("data-options-panel-position", s.alignment.vertical);
+	a.style.setProperty("--sbb-options-panel-position-x", `${c.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${c.top}px`), a.style.setProperty("--sbb-options-panel-max-height-calculated", c.maxHeight);
+	let l = c.alignment.vertical === "above";
+	a.toggleState?.("options-panel-position-above", l), a.toggleState?.("options-panel-position-below", !l), n.setAttribute("data-options-panel-position", c.alignment.vertical);
 }
 //#endregion
 export { t as setOverlayPosition };

package/core/styles/_index.scss

@@ -13,7 +13,6 @@
 @forward './mixins/layout';
 @forward './mixins/link';
 @forward './mixins/lists';
-@forward './mixins/overlay';
 @forward './mixins/panel';
 @forward './mixins/pearl-chain-bullet';
 @forward './mixins/popover';

package/core/styles/core.scss

@@ -10,7 +10,6 @@ $theme: 'standard' !default;
 @use './mixins/font-face';
 @use './mixins/helpers';
 @use './mixins/inputs';
-@use './mixins/overlay' as overlay-mixin;
 @use './mixins/popover';
 @use './mixins/scrollbar';
 @use './mixins/typo';
@@ -196,12 +195,18 @@ $theme: 'standard' !default;
 @use '../../option/option-hint/option-hint.global' as option-hint with (
   $theme: $theme
 );
+@use './option-panel-common.global' as option-panel with (
+  $theme: $theme
+);
 @use '../../overlay/overlay.global' as overlay with (
   $theme: $theme
 );
 @use '../../option/optgroup/optgroup.global' as optgroup with (
   $theme: $theme
 );
+@use '../../paginator/common/paginator-common.global' as paginator-common with (
+  $theme: $theme
+);
 @use '../../paginator/paginator/paginator.global' as paginator with (
   $theme: $theme
 );
@@ -389,9 +394,10 @@ $theme: 'standard' !default;
   @include notification.base;
   @include option.base;
   @include option-hint.base;
+  @include option-panel.base;
   @include optgroup.base;
   @include overlay.base;
-  @include overlay-mixin.options-panel-overlay-variables--global($theme);
+  @include paginator-common.base;
   @include paginator.base;
   @include compact-paginator.base;
   @include popover-component.base;

package/core/styles/lean-off-brand-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'lean-off-brand'
+);