@sbb-esta/lyne-elements-dev 5.13.1-dev.1794307456 → 5.13.1-dev.1794308738

package/button/_button.global.scss

@@ -40,8 +40,11 @@ $loading: '[loading], .sbb-loading';
   // This doesn't interfere with the content, but visually closes the small gap.
   // The secondary button itself can override it to 0 because it doesn't need the workaround.
   // We used px unit as it is not relative to anything.
-  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
-    var(--_border-color);
+  --_border: var(
+    --sbb-button-border-override,
+    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+      var(--_border-color)
+  );
   --_animation-loading-delay: var(
     --sbb-disable-animation-duration,
     var(--sbb-button-loading-delay)
@@ -52,6 +55,8 @@ $loading: '[loading], .sbb-loading';
     var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
   --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
     var(--_animation-loading-delay) alternate infinite linear;
+  --_animation-loading-fade: sbb-button-loading-fade
+    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
 
   @media (forced-colors: active) {
     --sbb-button-color-default-border: CanvasText !important;
@@ -213,6 +218,16 @@ $loading: '[loading], .sbb-loading';
 }
 
 @mixin variables--loading-animation-keyframes {
+  @keyframes sbb-button-loading-fade {
+    from {
+      --sbb-button-loading-opacity: 0;
+    }
+
+    to {
+      --sbb-button-loading-opacity: 1;
+    }
+  }
+
   @keyframes sbb-button-rotate {
     from {
       --sbb-button-loading-angle: -90deg;
@@ -246,9 +261,25 @@ $loading: '[loading], .sbb-loading';
             calc(100% - var(--sbb-button-min-height) / 2)
           )
           50%,
-        var(--sbb-button-color-loading-border) 0deg,
-        var(--sbb-button-color-loading-border) 300deg,
-        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          0deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          300deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
+              calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          360deg
       ),
     var(--_background-color);
 }
@@ -257,7 +288,6 @@ $loading: '[loading], .sbb-loading';
   --_loading-outline-offset: calc(
     var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
   );
-  --_border: none;
   --_border-action: var(--sbb-button-loading-border-width) dotted transparent;
   --_padding-block: calc(
     var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
@@ -265,8 +295,14 @@ $loading: '[loading], .sbb-loading';
   --_padding-inline: calc(
     var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
   );
-  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+  --_animation:
+    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
   --_forced-colors-adjust: none;
+
+  @media (forced-colors: active) {
+    // With forced colors the normal border should be suppressed.
+    --sbb-button-border-override: none;
+  }
 }
 
 @mixin variables--primary {
@@ -355,6 +391,14 @@ $loading: '[loading], .sbb-loading';
   --sbb-button-border-overlap-fix: 0rem;
 }
 
+@mixin variables--secondary-loading {
+  // As the secondary button has a border itself,
+  // we need to override it.
+  // Transparent color is needed because it's the transition starting color when
+  // transitioning from loading to non loading.
+  --sbb-button-border-override: none transparent;
+}
+
 @mixin variables--secondary-negative {
   --sbb-button-color-active-background: var(--sbb-background-color-2-negative);
   --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);
@@ -650,6 +694,10 @@ $loading: '[loading], .sbb-loading';
     &:not(#{$disabled}, #{$active}, #{$loading}) {
       @include variables--secondary-box-shadow;
     }
+
+    &:not(#{$disabled}):is(#{$loading}) {
+      @include variables--secondary-loading;
+    }
   }
 
   :is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
@@ -681,7 +729,13 @@ $loading: '[loading], .sbb-loading';
 
   @property --sbb-button-loading-angle {
     syntax: '<angle>';
-    initial-value: 0deg;
+    initial-value: -90deg;
+    inherits: false;
+  }
+
+  @property --sbb-button-loading-opacity {
+    syntax: '<number>';
+    initial-value: 1;
     inherits: false;
   }
 

package/button.pure.js

@@ -1,9 +1,9 @@
 import{SbbActionBaseElement as e,SbbButtonBaseElement as t,SbbDisabledInteractiveMixin as n,SbbDisabledMixin as r,SbbDisabledTabIndexActionMixin as i,SbbElement as a,SbbLinkBaseElement as o,SbbNamedSlotListMixin as s,SbbNegativeMixin as c,forceType as l}from"./core.js";import{__esDecorate as u,__runInitializers as d}from"tslib";import{html as f,unsafeCSS as p}from"lit";import{property as m}from"lit/decorators.js";import{html as h}from"lit/static-html.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`: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: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:light-dark(var(--sbb-color-iron),var(--sbb-color-silver));--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: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)}
-`,v=`:host{--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;--_border-color:var(--sbb-button-color-default-border);--_background-color:var(--sbb-button-color-default-background);--_background:var(--_background-color);--_color:var(--sbb-button-color-default-text);--_button-inset:0;--_hover-offset:.0625rem;--_padding-block:var(--sbb-button-padding-block-min);--_padding-inline:var(--sbb-button-padding-inline);--_border:calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix,1px)) solid var(--_border-color);--_animation-loading-delay:var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay));--_animation-loading-duration:var(--sbb-disable-animation-duration,3s);--_animation-loading-rotate-function:linear(0, .25 12.5% 37.5%, .75 62.5% 87.5%, 1);--_animation-loading-rotate:sbb-button-rotate var(--_animation-loading-duration) var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);--_animation-loading-move:sbb-button-move calc(var(--_animation-loading-duration) / 2) var(--_animation-loading-delay) alternate infinite linear;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-button-color-loading-snake-color:Canvas;--sbb-button-border-overlap-fix:0rem;--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:CanvasText!important;--sbb-button-color-default-text:CanvasText!important;--sbb-button-color-hover-text:CanvasText!important;--sbb-button-color-active-text:CanvasText!important}: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}: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:var(--sbb-button-min-height);--_animation-loading-rotate-function:linear}@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])){--_loading-outline-offset:calc(var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width));--_border:none;--_border-action:var(--sbb-button-loading-border-width) dotted transparent;--_padding-block:calc(var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width));--_padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));--_animation:var(--_animation-loading-rotate), var(--_animation-loading-move);--_forced-colors-adjust:none}.sbb-action-base{gap:var(--sbb-button-gap);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);font-weight:700;line-height:var(--sbb-typo-line-height-text);text-align:left;white-space:nowrap;min-height:var(--sbb-button-min-height);width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);user-select:none;background:var(--_background);border:var(--_border-action);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);forced-color-adjust:var(--_forced-colors-adjust,auto);animation:var(--_animation);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);outline:none;justify-content:center;align-items:center;text-decoration:none;transition-property:color,background-color,padding-top,padding-bottom;display:flex;position:relative}.sbb-action-base:before{content:"";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;position:absolute}: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(--_loading-outline-offset,var(--sbb-focus-outline-offset))}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{--_background:border-box padding-box linear-gradient(var(--_background-color)), border-box conic-gradient(from var(--sbb-button-loading-angle) at clamp(calc(var(--sbb-button-min-height) / 2), var(--sbb-button-loading-offset), calc(100% - var(--sbb-button-min-height) / 2)) 50%, var(--sbb-button-color-loading-border) 0deg, var(--sbb-button-color-loading-border) 300deg, var(--sbb-button-color-loading-snake-color,var(--sbb-button-color-active-text)) 360deg), var(--_background-color)}.sbb-button__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}: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)}@keyframes sbb-button-rotate{0%{--sbb-button-loading-angle:-90deg}to{--sbb-button-loading-angle:270deg}}@keyframes sbb-button-move{0%{--sbb-button-loading-offset:0%}to{--sbb-button-loading-offset:100%}}
+`,v=`:host{--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;--_border-color:var(--sbb-button-color-default-border);--_background-color:var(--sbb-button-color-default-background);--_background:var(--_background-color);--_color:var(--sbb-button-color-default-text);--_button-inset:0;--_hover-offset:.0625rem;--_padding-block:var(--sbb-button-padding-block-min);--_padding-inline:var(--sbb-button-padding-inline);--_border:var(--sbb-button-border-override,calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix,1px)) solid var(--_border-color));--_animation-loading-delay:var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay));--_animation-loading-duration:var(--sbb-disable-animation-duration,3s);--_animation-loading-rotate-function:linear(0, .25 12.5% 37.5%, .75 62.5% 87.5%, 1);--_animation-loading-rotate:sbb-button-rotate var(--_animation-loading-duration) var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);--_animation-loading-move:sbb-button-move calc(var(--_animation-loading-duration) / 2) var(--_animation-loading-delay) alternate infinite linear;--_animation-loading-fade:sbb-button-loading-fade var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay)) ease-in forwards;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-button-color-loading-snake-color:Canvas;--sbb-button-border-overlap-fix:0rem;--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:CanvasText!important;--sbb-button-color-default-text:CanvasText!important;--sbb-button-color-hover-text:CanvasText!important;--sbb-button-color-active-text:CanvasText!important}: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}: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:var(--sbb-button-min-height);--_animation-loading-rotate-function:linear}@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])){--_loading-outline-offset:calc(var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width));--_border-action:var(--sbb-button-loading-border-width) dotted transparent;--_padding-block:calc(var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width));--_padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));--_animation:var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);--_forced-colors-adjust:none}@media (forced-colors:active){:host([loading]:not([disabled],:disabled,[disabled-interactive])){--sbb-button-border-override:none}}.sbb-action-base{gap:var(--sbb-button-gap);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);font-weight:700;line-height:var(--sbb-typo-line-height-text);text-align:left;white-space:nowrap;min-height:var(--sbb-button-min-height);width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);user-select:none;background:var(--_background);border:var(--_border-action);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);forced-color-adjust:var(--_forced-colors-adjust,auto);animation:var(--_animation);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);outline:none;justify-content:center;align-items:center;text-decoration:none;transition-property:color,background-color,padding-top,padding-bottom;display:flex;position:relative}.sbb-action-base:before{content:"";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;position:absolute}: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(--_loading-outline-offset,var(--sbb-focus-outline-offset))}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{--_background:border-box padding-box linear-gradient(var(--_background-color)), border-box conic-gradient(from var(--sbb-button-loading-angle) at clamp(calc(var(--sbb-button-min-height) / 2), var(--sbb-button-loading-offset), calc(100% - var(--sbb-button-min-height) / 2)) 50%, color-mix(in srgb, var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%), transparent) 0deg, color-mix(in srgb, var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%), transparent) 300deg, color-mix(in srgb, var(--sbb-button-color-loading-snake-color,var(--sbb-button-color-active-text)) calc(var(--sbb-button-loading-opacity) * 100%), transparent) 360deg), var(--_background-color)}.sbb-button__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}: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)}@keyframes sbb-button-loading-fade{0%{--sbb-button-loading-opacity:0}to{--sbb-button-loading-opacity:1}}@keyframes sbb-button-rotate{0%{--sbb-button-loading-angle:-90deg}to{--sbb-button-loading-angle:270deg}}@keyframes sbb-button-move{0%{--sbb-button-loading-offset:0%}to{--sbb-button-loading-offset:100%}}
 `,y=`:host{-webkit-tap-highlight-color:transparent;--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);height:fit-content;display:inline-block;outline:none!important}@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{color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);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);outline:none;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";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);border:var(--sbb-mini-button-border);transition-property:inset,background-color;position:absolute;inset:0}.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{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));justify-content:center;align-items:center;display:flex}
 `,b=`: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);padding-inline:var(--sbb-mini-button-padding-inline);justify-content:center;align-items:center}.sbb-mini-button__label{white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-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);overflow:hidden}
 `,x=`: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: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: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: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: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: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)}
-`,S=`: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: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: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: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)}
+`,S=`: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: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: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: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)}:host(:not([disabled],:disabled,[disabled-interactive])[loading]){--sbb-button-border-override:none transparent}
 `,C=`: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: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)}
 `;const w=p(x),T=p(S),E=p(_),D=p(C),O=p(y),k=p(b),A=e=>(()=>{let t=c(g(e)),n,r=[],i=[],a,o=[],s=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[m({reflect:!0})],a=[l(),m({reflect:!0,type:Boolean})],u(this,null,n,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},r,i),u(this,null,a,{kind:`accessor`,name:`loading`,static:!1,private:!1,access:{has:e=>`loading`in e,get:e=>e.loading,set:(e,t)=>{e.loading=t}},metadata:e},o,s),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.styles=[p(v)]}#e=d(this,r,null);get size(){return this.#e}set size(e){this.#e=e}#t=(d(this,i),d(this,o,!1));get loading(){return this.#t}set loading(e){this.#t=e}constructor(...e){super(...e),d(this,s),this.internals.states.add(`sbb-button`)}willUpdate(e){super.willUpdate(e),e.has(`loading`)&&(this.loading?(this.internals.ariaBusy=`true`,this.internals.ariaDisabled=`true`):(this.internals.ariaBusy=null,this.maybeDisabledInteractive||(this.internals.ariaDisabled=null)))}renderTemplate(){return h`
         ${super.renderIconSlot()}

package/datepicker.pure.js

@@ -2,7 +2,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
 `,j=`:host{-webkit-tap-highlight-color:transparent;--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);height:fit-content;display:inline-block;outline:none!important}@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{color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);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);outline:none;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";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);border:var(--sbb-mini-button-border);transition-property:inset,background-color;position:absolute;inset:0}.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{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));justify-content:center;align-items:center;display:flex}
 `,M=`: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);padding-inline:var(--sbb-mini-button-padding-inline);justify-content:center;align-items:center}.sbb-mini-button__label{white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-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);overflow:hidden}
 `;a(`: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: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: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: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: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: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(`: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: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: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: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)}
+`),a(`: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: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: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: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)}:host(:not([disabled],:disabled,[disabled-interactive])[loading]){--sbb-button-border-override:none transparent}
 `),a(A),a(`: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: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)}
 `);const N=a(j);a(M);var P=`.sbb-action-base{-webkit-tap-highlight-color:transparent;margin:auto}
 `;let F=(()=>{let r=f(c),i,s=[],u=[];return class extends r{constructor(){super(...arguments),this.#e=t(this,s,null),this._inputDisabled=(t(this,u),!0),this.dateAdapter=w().datetime?.dateAdapter??m,this.language=new l(this)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;i=[C(),o()],e(this,null,i,{kind:`accessor`,name:`input`,static:!1,private:!1,access:{has:e=>`input`in e,get:e=>e.input,set:(e,t)=>{e.input=t}},metadata:t},s,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[E]}static{this.sbbDateInputAssociated=!0}static{this.styles=[N,a(P)]}#e;get input(){return this.#e}set input(e){this.#e=e}get disabled(){return!!this._inputDisabled}connectedCallback(){super.connectedCallback(),this.toggleAttribute(`disabled`,this.disabled);let e=this.closest?.(`sbb-form-field`);e&&(customElements.upgrade?.(e),this.negative=e.negative,D.resolveAssociation(this),this.slot||=this._findSlotPosition())}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`input`&&this.input!==t?(this._inputAbortController?.abort(),this._inputDisabled=!0,this.input&&(this._inputAbortController=new AbortController,this.slot=this._findSlotPosition(),customElements.upgrade?.(this.input),this._sync(),this.input.addEventListener(`ɵchange`,()=>this._sync())),this.hasUpdated&&this.toggleAttribute(`disabled`,this.disabled)):!e&&this.hasUpdated&&this.input&&this._sync()}_findSlotPosition(){return!this.input||this.compareDocumentPosition(this.input)&Node.DOCUMENT_POSITION_FOLLOWING?`prefix`:`suffix`}_sync(){this.syncDateInputState(),this.toggleAttribute(`disabled`,this.disabled),this.disabled?this.removeAttribute(`tabindex`):this.setAttribute(`tabindex`,`0`)}syncDateInputState(){this._inputDisabled=this.input.disabled||this.input.readOnly}renderTemplate(){return n`<sbb-icon name=${this.iconName}></sbb-icon>`}}})();var I=class extends F{get disabled(){return this._disabled||super.disabled}constructor(){super(),this._disabled=!0,this.addEventListener?.(`click`,()=>this._handleClick())}_handleClick(){if(!this.input||this.disabled)return;let e=this.input.valueAsDate??this.dateAdapter.today(),t=this.getFollowingDate(e);this.dateAdapter.isValid(t)&&this.dateAdapter.compareDate(t,e)!==0&&(this.input.valueAsDate=t,this.input.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.input.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})),this.input.dispatchEvent(new Event(`blur`,{composed:!0})))}syncDateInputState(){if(super.syncDateInputState(),!this.dateAdapter.isValid(this.input.valueAsDate)){this._disabled=!0,this.internals.ariaLabel=this.i18nOffBoundaryDay[this.language.current];return}let e=this.getFollowingDate(this.input.valueAsDate);this._disabled=!this.dateAdapter.isValid(e)||this.dateAdapter.compareDate(e,this.input.valueAsDate)===0;let t=this.dateAdapter.compareDate(this.dateAdapter.today(),this.input.valueAsDate)===0?S[this.language.current].toLowerCase():this.dateAdapter.getAccessibilityFormatDate(this.input.valueAsDate);this.internals.ariaLabel=this.i18nSelectOffBoundaryDay(t)[this.language.current]}},L=class extends I{constructor(){super(...arguments),this.iconName=`chevron-small-right-small`,this.i18nOffBoundaryDay=_,this.i18nSelectOffBoundaryDay=y}static{this.elementName=`sbb-datepicker-next-day`}getFollowingDate(e){let t=this.dateAdapter.addCalendarDays(e,1);return this._isAfterMaxDate(t)?null:t}_isAfterMaxDate(e){return!!this.input.max&&this.dateAdapter.compareDate(e,this.input.max)>0}},R=class extends I{constructor(){super(...arguments),this.iconName=`chevron-small-left-small`,this.i18nOffBoundaryDay=v,this.i18nSelectOffBoundaryDay=b}static{this.elementName=`sbb-datepicker-previous-day`}getFollowingDate(e){let t=this.dateAdapter.addCalendarDays(e,-1);return this._isBeforeMinDate(t)?null:t}_isBeforeMinDate(e){return!!this.input.min&&this.dateAdapter.compareDate(e,this.input.min)<0}};let z=(()=>{let n=F,r,i=[],a=[];return class extends n{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;r=[C(),o()],e(this,null,r,{kind:`accessor`,name:`datepicker`,static:!1,private:!1,access:{has:e=>`datepicker`in e,get:e=>e.datepicker,set:(e,t)=>{e.datepicker=t}},metadata:t},i,a),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-datepicker-toggle`}#e;get datepicker(){return this.#e}set datepicker(e){this.#e=e}constructor(){super(),this.iconName=`calendar-small`,this.#e=t(this,i,null),t(this,a),this.addEventListener?.(`click`,()=>{this.datepicker?.isOpen||this.datepicker?.open()})}connectedCallback(){super.connectedCallback(),this.internals.ariaLabel=x[this.language.current];let e=this.closest?.(`sbb-form-field`);e&&!this.hasAttribute(`datepicker`)&&(this.datepicker??=e.querySelector(`sbb-datepicker`))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`datepicker`&&this.datepicker&&this.datepicker.trigger!==this?this.datepicker.trigger=this:!e&&this.hasUpdated&&(this.internals.ariaLabel=x[this.language.current])}}})();var B=`.sbb-popover__content{padding-inline:clamp(0px, (100vw - 20rem) * var(--sbb-popover-padding) / 1.75rem, var(--sbb-popover-padding))}

package/development/button.pure.js

@@ -9,7 +9,7 @@ import { SbbIconNameMixin } from "./icon.pure.js";
 var accent_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);\n  --sbb-button-color-active-border: var(--sbb-border-color-1);\n  --sbb-button-color-active-text: var(--sbb-color-cloud);\n  --sbb-button-color-active-text: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));\n  --sbb-button-color-default-background: var(--sbb-background-color-3-inverted);\n  --sbb-button-color-default-border: var(--sbb-border-color-3);\n  --sbb-button-color-default-text: var(--sbb-color-1-inverted);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3-inverted);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3);\n  --sbb-button-color-hover-text: var(--sbb-color-3-inverted);\n  --sbb-button-color-loading-border: var(--sbb-color-iron);\n  --sbb-button-color-loading-border: light-dark(var(--sbb-color-iron), var(--sbb-color-silver));\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-1-negative-inverted);\n  --sbb-button-color-active-border: var(--sbb-border-color-1-negative);\n  --sbb-button-color-active-text: var(--sbb-color-anthracite);\n  --sbb-button-color-default-background: var(--sbb-background-color-3-negative-inverted);\n  --sbb-button-color-default-border: var(--sbb-border-color-3-negative);\n  --sbb-button-color-default-text: var(--sbb-color-1-negative-inverted);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative-inverted);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3-negative);\n  --sbb-button-color-hover-text: var(--sbb-color-4-negative-inverted);\n  --sbb-button-color-loading-border: var(--sbb-color-silver);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading])) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n";
 
 // src/elements/button/common/button-common.scss?inline
-var button_common_default = ":host {\n  display: inline-block;\n  outline: none !important;\n  --sbb-button-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  --sbb-button-box-shadow-definition:\n    var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)\n      var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)\n      var(--sbb-button-shadow-2-color),\n    var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)\n      var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)\n      var(--sbb-button-shadow-1-color);\n  --_width: unset;\n  --_border-color: var(--sbb-button-color-default-border);\n  --_background-color: var(--sbb-button-color-default-background);\n  --_background: var(--_background-color);\n  --_color: var(--sbb-button-color-default-text);\n  --_button-inset: 0;\n  --_hover-offset: 0.0625rem;\n  --_padding-block: var(--sbb-button-padding-block-min);\n  --_padding-inline: var(--sbb-button-padding-inline);\n  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n    var(--_border-color);\n  --_animation-loading-delay: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-button-loading-delay)\n  );\n  --_animation-loading-duration: var(--sbb-disable-animation-duration, 3s);\n  --_animation-loading-rotate-function: linear(0, 0.25 12.5% 37.5%, 0.75 62.5% 87.5%, 1);\n  --_animation-loading-rotate: sbb-button-rotate var(--_animation-loading-duration)\n    var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);\n  --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)\n    var(--_animation-loading-delay) alternate infinite linear;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-button-color-default-border: CanvasText !important;\n    --sbb-button-color-active-border: Highlight !important;\n    --sbb-button-color-default-background: Canvas !important;\n    --sbb-button-color-hover-background: Canvas !important;\n    --sbb-button-color-active-background: Canvas !important;\n    --sbb-button-color-disabled-background: Canvas !important;\n    --sbb-button-color-disabled-text: GrayText !important;\n    --sbb-button-color-loading-border: CanvasText !important;\n    --sbb-button-color-loading-snake-color: Canvas;\n    --sbb-button-color-default-text: CanvasText !important;\n    --sbb-button-color-hover-text: CanvasText !important;\n    --sbb-button-color-active-text: CanvasText !important;\n    --sbb-button-border-overlap-fix: 0rem;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(button),[state--button])) {\n    --sbb-button-color-default-text: ButtonText !important;\n    --sbb-button-color-hover-text: ButtonText !important;\n    --sbb-button-color-active-text: ButtonText !important;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(link),[state--link])) {\n    --sbb-button-color-default-text: LinkText !important;\n    --sbb-button-color-hover-text: LinkText !important;\n    --sbb-button-color-active-text: LinkText !important;\n  }\n}\n\n:host([negative]) {\n  --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);\n  --sbb-button-color-disabled-text: var(--sbb-color-aluminium);\n}\n\n:host([size=l]) {\n  --sbb-button-min-height: var(--sbb-button-min-height-size-l);\n  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);\n}\n\n:host([size=m]) {\n  --sbb-button-min-height: var(--sbb-button-min-height-size-m);\n  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);\n}\n\n:host([size=s]) {\n  --sbb-button-min-height: var(--sbb-button-min-height-size-s);\n  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);\n  --sbb-button-gap: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n  --sbb-button-padding-inline: 0;\n  --_width: var(--sbb-button-min-height);\n  --_animation-loading-rotate-function: linear;\n}\n\n@media (any-hover: hover) {\n  :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n    --sbb-button-translate-y-content-hover: -0.0625rem;\n    --sbb-button-shadow-1-offset-y: calc(\n      0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)\n    );\n    --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));\n    --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));\n    --sbb-button-cursor: var(--sbb-cursor-pointer);\n    --_border-color: var(--sbb-button-color-hover-border);\n    --_color: var(--sbb-button-color-hover-text);\n    --_background-color: var(--sbb-button-color-hover-background);\n    --_button-inset: calc(var(--sbb-button-border-width) * -1);\n  }\n}\n@media (forced-colors: active) {\n  :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n    --sbb-button-color-hover-border: Highlight !important;\n  }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n  --sbb-button-cursor: var(--sbb-cursor-default);\n  --_color: var(--sbb-button-color-disabled-text);\n  --_background-color: var(--sbb-button-color-disabled-background);\n  --_border-color: var(--sbb-button-color-disabled-border);\n  --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)\n    var(--_border-color);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive]):is(:active, :is(:state(active),[state--active]), [loading])) {\n  --_color: var(--sbb-button-color-active-text);\n  --_background-color: var(--sbb-button-color-active-background);\n  --_border-color: var(--sbb-button-color-active-border);\n}\n\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n  --_loading-outline-offset: calc(\n    var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n  );\n  --_border: none;\n  --_border-action: var(--sbb-button-loading-border-width) dotted transparent;\n  --_padding-block: calc(\n    var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)\n  );\n  --_padding-inline: calc(\n    var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)\n  );\n  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);\n  --_forced-colors-adjust: none;\n}\n\n.sbb-action-base {\n  display: flex;\n  gap: var(--sbb-button-gap);\n  align-items: center;\n  justify-content: center;\n  font-size: var(--sbb-text-font-size-xs);\n  font-weight: bold;\n  letter-spacing: var(--sbb-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n  text-align: left;\n  white-space: nowrap;\n  text-decoration: none;\n  min-height: var(--sbb-button-min-height);\n  outline: none;\n  width: var(--_width);\n  border-radius: var(--sbb-button-border-radius);\n  color: var(--_color);\n  cursor: var(--sbb-button-cursor);\n  user-select: none;\n  background: var(--_background);\n  border: var(--_border-action);\n  transition-duration: var(--sbb-button-transition-duration);\n  transition-timing-function: var(--sbb-button-transition-easing-function);\n  forced-color-adjust: var(--_forced-colors-adjust, auto);\n  transition-property: color, background-color, padding-top, padding-bottom;\n  animation: var(--_animation);\n  padding-block: var(--_padding-block);\n  padding-inline: var(--_padding-inline);\n  position: relative;\n}\n.sbb-action-base::before {\n  content: \"\";\n  position: absolute;\n  inset: var(--_button-inset);\n  border: var(--_border);\n  border-radius: var(--sbb-button-border-radius);\n  pointer-events: none;\n  box-shadow: var(--sbb-button-box-shadow);\n  transition-duration: var(--sbb-button-transition-duration);\n  transition-timing-function: var(--sbb-button-transition-easing-function);\n  transition-property: inset, border, box-shadow;\n}\n: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 {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--_loading-outline-offset, var(--sbb-focus-outline-offset));\n}\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) .sbb-action-base {\n  --_background:\n    border-box padding-box linear-gradient(var(--_background-color)),\n    border-box\n      conic-gradient(\n        from var(--sbb-button-loading-angle) at\n          clamp(\n            calc(var(--sbb-button-min-height) / 2),\n            var(--sbb-button-loading-offset),\n            calc(100% - var(--sbb-button-min-height) / 2)\n          )\n          50%,\n        var(--sbb-button-color-loading-border) 0deg,\n        var(--sbb-button-color-loading-border) 300deg,\n        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg\n      ),\n    var(--_background-color);\n}\n\n.sbb-button__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n: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 {\n  display: none;\n}\n\n.sbb-button__label,\n::slotted([slot=icon]),\nsbb-icon {\n  transition: translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);\n  translate: 0 var(--sbb-button-translate-y-content-hover, 0);\n}\n\n@keyframes sbb-button-rotate {\n  from {\n    --sbb-button-loading-angle: -90deg;\n  }\n  to {\n    --sbb-button-loading-angle: 270deg;\n  }\n}\n@keyframes sbb-button-move {\n  from {\n    --sbb-button-loading-offset: 0%;\n  }\n  to {\n    --sbb-button-loading-offset: 100%;\n  }\n}\n";
+var button_common_default = ":host {\n  display: inline-block;\n  outline: none !important;\n  --sbb-button-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  --sbb-button-box-shadow-definition:\n    var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)\n      var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)\n      var(--sbb-button-shadow-2-color),\n    var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)\n      var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)\n      var(--sbb-button-shadow-1-color);\n  --_width: unset;\n  --_border-color: var(--sbb-button-color-default-border);\n  --_background-color: var(--sbb-button-color-default-background);\n  --_background: var(--_background-color);\n  --_color: var(--sbb-button-color-default-text);\n  --_button-inset: 0;\n  --_hover-offset: 0.0625rem;\n  --_padding-block: var(--sbb-button-padding-block-min);\n  --_padding-inline: var(--sbb-button-padding-inline);\n  --_border: var(\n    --sbb-button-border-override,\n    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n      var(--_border-color)\n  );\n  --_animation-loading-delay: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-button-loading-delay)\n  );\n  --_animation-loading-duration: var(--sbb-disable-animation-duration, 3s);\n  --_animation-loading-rotate-function: linear(0, 0.25 12.5% 37.5%, 0.75 62.5% 87.5%, 1);\n  --_animation-loading-rotate: sbb-button-rotate var(--_animation-loading-duration)\n    var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);\n  --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)\n    var(--_animation-loading-delay) alternate infinite linear;\n  --_animation-loading-fade: sbb-button-loading-fade\n    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-button-color-default-border: CanvasText !important;\n    --sbb-button-color-active-border: Highlight !important;\n    --sbb-button-color-default-background: Canvas !important;\n    --sbb-button-color-hover-background: Canvas !important;\n    --sbb-button-color-active-background: Canvas !important;\n    --sbb-button-color-disabled-background: Canvas !important;\n    --sbb-button-color-disabled-text: GrayText !important;\n    --sbb-button-color-loading-border: CanvasText !important;\n    --sbb-button-color-loading-snake-color: Canvas;\n    --sbb-button-color-default-text: CanvasText !important;\n    --sbb-button-color-hover-text: CanvasText !important;\n    --sbb-button-color-active-text: CanvasText !important;\n    --sbb-button-border-overlap-fix: 0rem;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(button),[state--button])) {\n    --sbb-button-color-default-text: ButtonText !important;\n    --sbb-button-color-hover-text: ButtonText !important;\n    --sbb-button-color-active-text: ButtonText !important;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(link),[state--link])) {\n    --sbb-button-color-default-text: LinkText !important;\n    --sbb-button-color-hover-text: LinkText !important;\n    --sbb-button-color-active-text: LinkText !important;\n  }\n}\n\n:host([negative]) {\n  --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);\n  --sbb-button-color-disabled-text: var(--sbb-color-aluminium);\n}\n\n:host([size=l]) {\n  --sbb-button-min-height: var(--sbb-button-min-height-size-l);\n  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);\n}\n\n:host([size=m]) {\n  --sbb-button-min-height: var(--sbb-button-min-height-size-m);\n  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);\n}\n\n:host([size=s]) {\n  --sbb-button-min-height: var(--sbb-button-min-height-size-s);\n  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);\n  --sbb-button-gap: var(--sbb-spacing-fixed-1x);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n  --sbb-button-padding-inline: 0;\n  --_width: var(--sbb-button-min-height);\n  --_animation-loading-rotate-function: linear;\n}\n\n@media (any-hover: hover) {\n  :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n    --sbb-button-translate-y-content-hover: -0.0625rem;\n    --sbb-button-shadow-1-offset-y: calc(\n      0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)\n    );\n    --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));\n    --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));\n    --sbb-button-cursor: var(--sbb-cursor-pointer);\n    --_border-color: var(--sbb-button-color-hover-border);\n    --_color: var(--sbb-button-color-hover-text);\n    --_background-color: var(--sbb-button-color-hover-background);\n    --_button-inset: calc(var(--sbb-button-border-width) * -1);\n  }\n}\n@media (forced-colors: active) {\n  :host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading]):is(:hover, :is(:state(force-hover),[state--force-hover]))) {\n    --sbb-button-color-hover-border: Highlight !important;\n  }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n  --sbb-button-cursor: var(--sbb-cursor-default);\n  --_color: var(--sbb-button-color-disabled-text);\n  --_background-color: var(--sbb-button-color-disabled-background);\n  --_border-color: var(--sbb-button-color-disabled-border);\n  --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)\n    var(--_border-color);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive]):is(:active, :is(:state(active),[state--active]), [loading])) {\n  --_color: var(--sbb-button-color-active-text);\n  --_background-color: var(--sbb-button-color-active-background);\n  --_border-color: var(--sbb-button-color-active-border);\n}\n\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n  --_loading-outline-offset: calc(\n    var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n  );\n  --_border-action: var(--sbb-button-loading-border-width) dotted transparent;\n  --_padding-block: calc(\n    var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)\n  );\n  --_padding-inline: calc(\n    var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)\n  );\n  --_animation:\n    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);\n  --_forced-colors-adjust: none;\n}\n@media (forced-colors: active) {\n  :host([loading]:not([disabled], :disabled, [disabled-interactive])) {\n    --sbb-button-border-override: none;\n  }\n}\n\n.sbb-action-base {\n  display: flex;\n  gap: var(--sbb-button-gap);\n  align-items: center;\n  justify-content: center;\n  font-size: var(--sbb-text-font-size-xs);\n  font-weight: bold;\n  letter-spacing: var(--sbb-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n  text-align: left;\n  white-space: nowrap;\n  text-decoration: none;\n  min-height: var(--sbb-button-min-height);\n  outline: none;\n  width: var(--_width);\n  border-radius: var(--sbb-button-border-radius);\n  color: var(--_color);\n  cursor: var(--sbb-button-cursor);\n  user-select: none;\n  background: var(--_background);\n  border: var(--_border-action);\n  transition-duration: var(--sbb-button-transition-duration);\n  transition-timing-function: var(--sbb-button-transition-easing-function);\n  forced-color-adjust: var(--_forced-colors-adjust, auto);\n  transition-property: color, background-color, padding-top, padding-bottom;\n  animation: var(--_animation);\n  padding-block: var(--_padding-block);\n  padding-inline: var(--_padding-inline);\n  position: relative;\n}\n.sbb-action-base::before {\n  content: \"\";\n  position: absolute;\n  inset: var(--_button-inset);\n  border: var(--_border);\n  border-radius: var(--sbb-button-border-radius);\n  pointer-events: none;\n  box-shadow: var(--sbb-button-box-shadow);\n  transition-duration: var(--sbb-button-transition-duration);\n  transition-timing-function: var(--sbb-button-transition-easing-function);\n  transition-property: inset, border, box-shadow;\n}\n: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 {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--_loading-outline-offset, var(--sbb-focus-outline-offset));\n}\n:host([loading]:not([disabled], :disabled, [disabled-interactive])) .sbb-action-base {\n  --_background:\n    border-box padding-box linear-gradient(var(--_background-color)),\n    border-box\n      conic-gradient(\n        from var(--sbb-button-loading-angle) at\n          clamp(\n            calc(var(--sbb-button-min-height) / 2),\n            var(--sbb-button-loading-offset),\n            calc(100% - var(--sbb-button-min-height) / 2)\n          )\n          50%,\n        color-mix(\n            in srgb,\n            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),\n            transparent\n          )\n          0deg,\n        color-mix(\n            in srgb,\n            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),\n            transparent\n          )\n          300deg,\n        color-mix(\n            in srgb,\n            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))\n              calc(var(--sbb-button-loading-opacity) * 100%),\n            transparent\n          )\n          360deg\n      ),\n    var(--_background-color);\n}\n\n.sbb-button__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n: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 {\n  display: none;\n}\n\n.sbb-button__label,\n::slotted([slot=icon]),\nsbb-icon {\n  transition: translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);\n  translate: 0 var(--sbb-button-translate-y-content-hover, 0);\n}\n\n@keyframes sbb-button-loading-fade {\n  from {\n    --sbb-button-loading-opacity: 0;\n  }\n  to {\n    --sbb-button-loading-opacity: 1;\n  }\n}\n@keyframes sbb-button-rotate {\n  from {\n    --sbb-button-loading-angle: -90deg;\n  }\n  to {\n    --sbb-button-loading-angle: 270deg;\n  }\n}\n@keyframes sbb-button-move {\n  from {\n    --sbb-button-loading-offset: 0%;\n  }\n  to {\n    --sbb-button-loading-offset: 100%;\n  }\n}\n";
 
 // src/elements/button/common/mini-button-common.scss?inline
 var mini_button_common_default = ":host {\n  display: inline-block;\n  -webkit-tap-highlight-color: transparent;\n  height: fit-content;\n  outline: none !important;\n  --sbb-mini-button-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  --sbb-mini-button-color-background: var(--sbb-mini-button-color-default-background);\n  --sbb-mini-button-color: var(--sbb-mini-button-color-text);\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-mini-button-color-text: ButtonText !important;\n    --sbb-mini-button-color-hover-background: Highlight !important;\n    --sbb-mini-button-color-active-background: Highlight !important;\n    --sbb-mini-button-color-disabled-background: Canvas !important;\n    --sbb-mini-button-color-disabled-border: GrayText !important;\n    --sbb-mini-button-color-disabled-text: GrayText !important;\n  }\n}\n\n:host([negative]) {\n  --sbb-mini-button-color-text: var(--sbb-color-3-negative);\n  --sbb-mini-button-color-default-background: transparent;\n  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3-negative);\n  --sbb-mini-button-color-active-background: var(--sbb-background-color-4-negative);\n  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3-negative);\n  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);\n  --sbb-mini-button-color-disabled-text: var(--sbb-color-5);\n}\n\n@media (any-hover: hover) {\n  :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]))) {\n    --sbb-mini-button-translate-y-content-hover: -0.0625rem;\n    --sbb-mini-button-color-background: var(--sbb-mini-button-color-hover-background);\n  }\n}\n\n:host(:is(:active, :is(:state(active),[state--active])):not([disabled], :disabled, [disabled-interactive], :is(:state(disabled),[state--disabled]))) {\n  --sbb-mini-button-color-background: var(--sbb-mini-button-color-active-background);\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive], :is(:state(disabled),[state--disabled]))) {\n  --sbb-mini-button-color-background: var(--sbb-mini-button-color-disabled-background);\n  --sbb-mini-button-border: var(--sbb-border-width-1x) dashed\n    var(--sbb-mini-button-color-disabled-border);\n  --sbb-mini-button-color: var(--sbb-mini-button-color-disabled-text);\n  --sbb-mini-button-pointer-events: none;\n  --sbb-mini-button-cursor: var(--sbb-cursor-default);\n}\n\n:host(:is(:state(focus-visible),[state--focus-visible])) {\n  --sbb-focus-outline-style: initial;\n}\n\n.sbb-action-base {\n  display: flex;\n  position: relative;\n  color: var(--sbb-mini-button-color);\n  border-radius: var(--sbb-mini-button-border-radius);\n  user-select: none;\n  pointer-events: var(--sbb-mini-button-pointer-events, auto);\n  cursor: var(--sbb-mini-button-cursor, var(--sbb-cursor-pointer));\n  transition: color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);\n  text-decoration: none;\n  outline: none;\n}\n.sbb-action-base::before {\n  position: absolute;\n  content: \"\";\n  inset: 0;\n  border-radius: var(--sbb-mini-button-border-radius);\n  background-color: var(--sbb-mini-button-color-background);\n  transition-duration: var(--sbb-mini-button-transition-duration);\n  transition-timing-function: var(--sbb-mini-button-transition-easing-function);\n  transition-property: inset, background-color;\n  border: var(--sbb-mini-button-border);\n}\n.sbb-action-base:focus-visible::before, :host(:is(:is(:state(focus-visible),[state--focus-visible]), :focus-visible)) .sbb-action-base::before {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n::slotted(sbb-icon),\nsbb-icon {\n  display: flex;\n  transition: translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);\n  translate: 0 var(--sbb-mini-button-translate-y-content-hover, 0);\n  min-width: var(--_sbb-mini-button-image-size, var(--sbb-size-icon-ui-small));\n  min-height: var(--_sbb-mini-button-image-size, var(--sbb-size-icon-ui-small));\n  align-items: center;\n  justify-content: center;\n}\n";
@@ -21,7 +21,7 @@ var mini_button_label_common_default = ":host {\n  --sbb-mini-button-gap: 0.125r
 var primary_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-color-primary150);\n  --sbb-button-color-active-border: var(--sbb-color-primary150);\n  --sbb-button-color-active-text: var(--sbb-color-4-negative);\n  --sbb-button-color-default-background: var(--sbb-color-primary);\n  --sbb-button-color-default-border: var(--sbb-color-primary);\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-color-primary125);\n  --sbb-button-color-hover-border: var(--sbb-color-primary125);\n  --sbb-button-color-hover-text: var(--sbb-color-3-negative);\n  --sbb-button-color-loading-border: color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 50%,\n      var(--sbb-button-color-default-text)\n    );\n  --sbb-button-color-loading-border: light-dark(\n    color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 50%,\n      var(--sbb-button-color-default-text)\n    ),\n    color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 70%,\n      var(--sbb-button-color-default-text)\n    )\n  );\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary) 40%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent)\n  );\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-color-primary150);\n  --sbb-button-color-active-border: var(--sbb-color-primary150);\n  --sbb-button-color-active-text: var(--sbb-color-4-negative);\n  --sbb-button-color-default-background: var(--sbb-color-primary);\n  --sbb-button-color-default-border: var(--sbb-color-primary);\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-color-primary125);\n  --sbb-button-color-hover-border: var(--sbb-color-primary125);\n  --sbb-button-color-hover-text: var(--sbb-color-3-negative);\n  --sbb-button-color-loading-border: color-mix(\n    in srgb,\n    var(--sbb-button-color-active-background) 70%,\n    var(--sbb-button-color-default-text)\n  );\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 60%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary) 60%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary) 40%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent)\n  );\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading])) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n";
 
 // src/elements/button/common/secondary-button.scss?inline
-var secondary_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-3);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-anthracite);\n  --sbb-button-color-active-text: light-dark(\n    var(--sbb-color-anthracite),\n    var(--sbb-color-graphite)\n  );\n  --sbb-button-color-default-background: var(--sbb-background-color-1);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-border-overlap-fix: 0rem;\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-2-negative);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-graphite);\n  --sbb-button-color-default-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3-negative);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4-negative);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n";
+var secondary_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-3);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-anthracite);\n  --sbb-button-color-active-text: light-dark(\n    var(--sbb-color-anthracite),\n    var(--sbb-color-graphite)\n  );\n  --sbb-button-color-default-background: var(--sbb-background-color-1);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-border-overlap-fix: 0rem;\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-2-negative);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-graphite);\n  --sbb-button-color-default-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3-negative);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4-negative);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive])[loading]) {\n  --sbb-button-border-override: none transparent;\n}\n";
 
 // src/elements/button/common/transparent-button.scss?inline
 var transparent_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-4);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-1);\n  --sbb-button-color-default-background: transparent;\n  --sbb-button-color-default-border: transparent;\n  --sbb-button-color-default-text: var(--sbb-color-1);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-1);\n  --sbb-button-color-loading-border: var(--sbb-color-silver);\n  --sbb-button-color-loading-border: light-dark(var(--sbb-color-silver), var(--sbb-color-granite));\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-1-negative);\n  --sbb-button-color-default-background: transparent;\n  --sbb-button-color-default-border: transparent;\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3-negative-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-1-negative);\n  --sbb-button-color-loading-border: var(--sbb-color-granite);\n}\n";

package/development/datepicker.pure.js

@@ -21,7 +21,7 @@ var mini_button_label_common_default = ":host {\n  --sbb-mini-button-gap: 0.125r
 var primary_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-color-primary150);\n  --sbb-button-color-active-border: var(--sbb-color-primary150);\n  --sbb-button-color-active-text: var(--sbb-color-4-negative);\n  --sbb-button-color-default-background: var(--sbb-color-primary);\n  --sbb-button-color-default-border: var(--sbb-color-primary);\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-color-primary125);\n  --sbb-button-color-hover-border: var(--sbb-color-primary125);\n  --sbb-button-color-hover-text: var(--sbb-color-3-negative);\n  --sbb-button-color-loading-border: color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 50%,\n      var(--sbb-button-color-default-text)\n    );\n  --sbb-button-color-loading-border: light-dark(\n    color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 50%,\n      var(--sbb-button-color-default-text)\n    ),\n    color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 70%,\n      var(--sbb-button-color-default-text)\n    )\n  );\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary) 40%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent)\n  );\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-color-primary150);\n  --sbb-button-color-active-border: var(--sbb-color-primary150);\n  --sbb-button-color-active-text: var(--sbb-color-4-negative);\n  --sbb-button-color-default-background: var(--sbb-color-primary);\n  --sbb-button-color-default-border: var(--sbb-color-primary);\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-color-primary125);\n  --sbb-button-color-hover-border: var(--sbb-color-primary125);\n  --sbb-button-color-hover-text: var(--sbb-color-3-negative);\n  --sbb-button-color-loading-border: color-mix(\n    in srgb,\n    var(--sbb-button-color-active-background) 70%,\n    var(--sbb-button-color-default-text)\n  );\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 60%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary) 60%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary) 40%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent)\n  );\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading])) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n";
 
 // src/elements/button/common/secondary-button.scss?inline
-var secondary_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-3);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-anthracite);\n  --sbb-button-color-active-text: light-dark(\n    var(--sbb-color-anthracite),\n    var(--sbb-color-graphite)\n  );\n  --sbb-button-color-default-background: var(--sbb-background-color-1);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-border-overlap-fix: 0rem;\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-2-negative);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-graphite);\n  --sbb-button-color-default-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3-negative);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4-negative);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n";
+var secondary_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-3);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-anthracite);\n  --sbb-button-color-active-text: light-dark(\n    var(--sbb-color-anthracite),\n    var(--sbb-color-graphite)\n  );\n  --sbb-button-color-default-background: var(--sbb-background-color-1);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-border-overlap-fix: 0rem;\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-2-negative);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-graphite);\n  --sbb-button-color-default-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3-negative);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4-negative);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive])[loading]) {\n  --sbb-button-border-override: none transparent;\n}\n";
 
 // src/elements/button/common/transparent-button.scss?inline
 var transparent_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-4);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-1);\n  --sbb-button-color-default-background: transparent;\n  --sbb-button-color-default-border: transparent;\n  --sbb-button-color-default-text: var(--sbb-color-1);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-1);\n  --sbb-button-color-loading-border: var(--sbb-color-silver);\n  --sbb-button-color-loading-border: light-dark(var(--sbb-color-silver), var(--sbb-color-granite));\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-1-negative);\n  --sbb-button-color-default-background: transparent;\n  --sbb-button-color-default-border: transparent;\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3-negative-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-1-negative);\n  --sbb-button-color-loading-border: var(--sbb-color-granite);\n}\n";

package/lean-off-brand-theme.css

@@ -2577,8 +2577,11 @@ sbb-breadcrumb-group:not(:defined) {
   --_hover-offset: 0.0625rem;
   --_padding-block: var(--sbb-button-padding-block-min);
   --_padding-inline: var(--sbb-button-padding-inline);
-  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
-    var(--_border-color);
+  --_border: var(
+    --sbb-button-border-override,
+    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+      var(--_border-color)
+  );
   --_animation-loading-delay: var(
     --sbb-disable-animation-duration,
     var(--sbb-button-loading-delay)
@@ -2589,6 +2592,8 @@ sbb-breadcrumb-group:not(:defined) {
     var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
   --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
     var(--_animation-loading-delay) alternate infinite linear;
+  --_animation-loading-fade: sbb-button-loading-fade
+    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
 }
 @media (forced-colors: active) {
   :is(.sbb-button,
@@ -2900,15 +2905,30 @@ sbb-breadcrumb-group:not(:defined) {
             calc(100% - var(--sbb-button-min-height) / 2)
           )
           50%,
-        var(--sbb-button-color-loading-border) 0deg,
-        var(--sbb-button-color-loading-border) 300deg,
-        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          0deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          300deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
+              calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          360deg
       ),
     var(--_background-color);
   --_loading-outline-offset: calc(
     var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
   );
-  --_border: none;
   --_border-action: var(--sbb-button-loading-border-width) dotted transparent;
   --_padding-block: calc(
     var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
@@ -2916,9 +2936,30 @@ sbb-breadcrumb-group:not(:defined) {
   --_padding-inline: calc(
     var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
   );
-  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+  --_animation:
+    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
   --_forced-colors-adjust: none;
 }
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+    --sbb-button-border-override: none;
+  }
+}
 :is(.sbb-button,
 .sbb-button-s,
 .sbb-button-m,
@@ -3097,6 +3138,12 @@ sbb-breadcrumb-group:not(:defined) {
 .sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+  --sbb-button-border-override: none transparent;
+}
 
 :is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
   --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
@@ -3172,6 +3219,14 @@ sbb-breadcrumb-group:not(:defined) {
   --sbb-button-color-loading-border: var(--sbb-color-granite);
 }
 
+@keyframes sbb-button-loading-fade {
+  from {
+    --sbb-button-loading-opacity: 0;
+  }
+  to {
+    --sbb-button-loading-opacity: 1;
+  }
+}
 @keyframes sbb-button-rotate {
   from {
     --sbb-button-loading-angle: -90deg;
@@ -3190,7 +3245,12 @@ sbb-breadcrumb-group:not(:defined) {
 }
 @property --sbb-button-loading-angle {
   syntax: "<angle>";
-  initial-value: 0deg;
+  initial-value: -90deg;
+  inherits: false;
+}
+@property --sbb-button-loading-opacity {
+  syntax: "<number>";
+  initial-value: 1;
   inherits: false;
 }
 @property --sbb-button-loading-offset {

package/lean-safety-theme.css

@@ -2597,8 +2597,11 @@ sbb-breadcrumb-group:not(:defined) {
   --_hover-offset: 0.0625rem;
   --_padding-block: var(--sbb-button-padding-block-min);
   --_padding-inline: var(--sbb-button-padding-inline);
-  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
-    var(--_border-color);
+  --_border: var(
+    --sbb-button-border-override,
+    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+      var(--_border-color)
+  );
   --_animation-loading-delay: var(
     --sbb-disable-animation-duration,
     var(--sbb-button-loading-delay)
@@ -2609,6 +2612,8 @@ sbb-breadcrumb-group:not(:defined) {
     var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
   --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
     var(--_animation-loading-delay) alternate infinite linear;
+  --_animation-loading-fade: sbb-button-loading-fade
+    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
 }
 @media (forced-colors: active) {
   :is(.sbb-button,
@@ -2920,15 +2925,30 @@ sbb-breadcrumb-group:not(:defined) {
             calc(100% - var(--sbb-button-min-height) / 2)
           )
           50%,
-        var(--sbb-button-color-loading-border) 0deg,
-        var(--sbb-button-color-loading-border) 300deg,
-        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          0deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          300deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
+              calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          360deg
       ),
     var(--_background-color);
   --_loading-outline-offset: calc(
     var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
   );
-  --_border: none;
   --_border-action: var(--sbb-button-loading-border-width) dotted transparent;
   --_padding-block: calc(
     var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
@@ -2936,9 +2956,30 @@ sbb-breadcrumb-group:not(:defined) {
   --_padding-inline: calc(
     var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
   );
-  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+  --_animation:
+    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
   --_forced-colors-adjust: none;
 }
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+    --sbb-button-border-override: none;
+  }
+}
 :is(.sbb-button,
 .sbb-button-s,
 .sbb-button-m,
@@ -3117,6 +3158,12 @@ sbb-breadcrumb-group:not(:defined) {
 .sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+  --sbb-button-border-override: none transparent;
+}
 
 :is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
   --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
@@ -3192,6 +3239,14 @@ sbb-breadcrumb-group:not(:defined) {
   --sbb-button-color-loading-border: var(--sbb-color-granite);
 }
 
+@keyframes sbb-button-loading-fade {
+  from {
+    --sbb-button-loading-opacity: 0;
+  }
+  to {
+    --sbb-button-loading-opacity: 1;
+  }
+}
 @keyframes sbb-button-rotate {
   from {
     --sbb-button-loading-angle: -90deg;
@@ -3210,7 +3265,12 @@ sbb-breadcrumb-group:not(:defined) {
 }
 @property --sbb-button-loading-angle {
   syntax: "<angle>";
-  initial-value: 0deg;
+  initial-value: -90deg;
+  inherits: false;
+}
+@property --sbb-button-loading-opacity {
+  syntax: "<number>";
+  initial-value: 1;
   inherits: false;
 }
 @property --sbb-button-loading-offset {

package/lean-theme.css

@@ -2597,8 +2597,11 @@ sbb-breadcrumb-group:not(:defined) {
   --_hover-offset: 0.0625rem;
   --_padding-block: var(--sbb-button-padding-block-min);
   --_padding-inline: var(--sbb-button-padding-inline);
-  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
-    var(--_border-color);
+  --_border: var(
+    --sbb-button-border-override,
+    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+      var(--_border-color)
+  );
   --_animation-loading-delay: var(
     --sbb-disable-animation-duration,
     var(--sbb-button-loading-delay)
@@ -2609,6 +2612,8 @@ sbb-breadcrumb-group:not(:defined) {
     var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
   --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
     var(--_animation-loading-delay) alternate infinite linear;
+  --_animation-loading-fade: sbb-button-loading-fade
+    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
 }
 @media (forced-colors: active) {
   :is(.sbb-button,
@@ -2920,15 +2925,30 @@ sbb-breadcrumb-group:not(:defined) {
             calc(100% - var(--sbb-button-min-height) / 2)
           )
           50%,
-        var(--sbb-button-color-loading-border) 0deg,
-        var(--sbb-button-color-loading-border) 300deg,
-        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          0deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          300deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
+              calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          360deg
       ),
     var(--_background-color);
   --_loading-outline-offset: calc(
     var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
   );
-  --_border: none;
   --_border-action: var(--sbb-button-loading-border-width) dotted transparent;
   --_padding-block: calc(
     var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
@@ -2936,9 +2956,30 @@ sbb-breadcrumb-group:not(:defined) {
   --_padding-inline: calc(
     var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
   );
-  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+  --_animation:
+    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
   --_forced-colors-adjust: none;
 }
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+    --sbb-button-border-override: none;
+  }
+}
 :is(.sbb-button,
 .sbb-button-s,
 .sbb-button-m,
@@ -3117,6 +3158,12 @@ sbb-breadcrumb-group:not(:defined) {
 .sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+  --sbb-button-border-override: none transparent;
+}
 
 :is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
   --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
@@ -3192,6 +3239,14 @@ sbb-breadcrumb-group:not(:defined) {
   --sbb-button-color-loading-border: var(--sbb-color-granite);
 }
 
+@keyframes sbb-button-loading-fade {
+  from {
+    --sbb-button-loading-opacity: 0;
+  }
+  to {
+    --sbb-button-loading-opacity: 1;
+  }
+}
 @keyframes sbb-button-rotate {
   from {
     --sbb-button-loading-angle: -90deg;
@@ -3210,7 +3265,12 @@ sbb-breadcrumb-group:not(:defined) {
 }
 @property --sbb-button-loading-angle {
   syntax: "<angle>";
-  initial-value: 0deg;
+  initial-value: -90deg;
+  inherits: false;
+}
+@property --sbb-button-loading-opacity {
+  syntax: "<number>";
+  initial-value: 1;
   inherits: false;
 }
 @property --sbb-button-loading-offset {

package/off-brand-theme.css

@@ -2577,8 +2577,11 @@ sbb-breadcrumb-group:not(:defined) {
   --_hover-offset: 0.0625rem;
   --_padding-block: var(--sbb-button-padding-block-min);
   --_padding-inline: var(--sbb-button-padding-inline);
-  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
-    var(--_border-color);
+  --_border: var(
+    --sbb-button-border-override,
+    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+      var(--_border-color)
+  );
   --_animation-loading-delay: var(
     --sbb-disable-animation-duration,
     var(--sbb-button-loading-delay)
@@ -2589,6 +2592,8 @@ sbb-breadcrumb-group:not(:defined) {
     var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
   --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
     var(--_animation-loading-delay) alternate infinite linear;
+  --_animation-loading-fade: sbb-button-loading-fade
+    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
 }
 @media (forced-colors: active) {
   :is(.sbb-button,
@@ -2900,15 +2905,30 @@ sbb-breadcrumb-group:not(:defined) {
             calc(100% - var(--sbb-button-min-height) / 2)
           )
           50%,
-        var(--sbb-button-color-loading-border) 0deg,
-        var(--sbb-button-color-loading-border) 300deg,
-        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          0deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          300deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
+              calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          360deg
       ),
     var(--_background-color);
   --_loading-outline-offset: calc(
     var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
   );
-  --_border: none;
   --_border-action: var(--sbb-button-loading-border-width) dotted transparent;
   --_padding-block: calc(
     var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
@@ -2916,9 +2936,30 @@ sbb-breadcrumb-group:not(:defined) {
   --_padding-inline: calc(
     var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
   );
-  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+  --_animation:
+    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
   --_forced-colors-adjust: none;
 }
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+    --sbb-button-border-override: none;
+  }
+}
 :is(.sbb-button,
 .sbb-button-s,
 .sbb-button-m,
@@ -3097,6 +3138,12 @@ sbb-breadcrumb-group:not(:defined) {
 .sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+  --sbb-button-border-override: none transparent;
+}
 
 :is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
   --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
@@ -3172,6 +3219,14 @@ sbb-breadcrumb-group:not(:defined) {
   --sbb-button-color-loading-border: var(--sbb-color-granite);
 }
 
+@keyframes sbb-button-loading-fade {
+  from {
+    --sbb-button-loading-opacity: 0;
+  }
+  to {
+    --sbb-button-loading-opacity: 1;
+  }
+}
 @keyframes sbb-button-rotate {
   from {
     --sbb-button-loading-angle: -90deg;
@@ -3190,7 +3245,12 @@ sbb-breadcrumb-group:not(:defined) {
 }
 @property --sbb-button-loading-angle {
   syntax: "<angle>";
-  initial-value: 0deg;
+  initial-value: -90deg;
+  inherits: false;
+}
+@property --sbb-button-loading-opacity {
+  syntax: "<number>";
+  initial-value: 1;
   inherits: false;
 }
 @property --sbb-button-loading-offset {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.13.1-dev.1794307456",
+  "version": "5.13.1-dev.1794308738",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/2335ce21069bd1cfde67ac62fa9e2a02a149625b"
+    "https://github.com/sbb-design-systems/lyne-components/commit/a960515b6164e71bdb1a3fb4ad25f69038fe7925"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -2597,8 +2597,11 @@ sbb-breadcrumb-group:not(:defined) {
   --_hover-offset: 0.0625rem;
   --_padding-block: var(--sbb-button-padding-block-min);
   --_padding-inline: var(--sbb-button-padding-inline);
-  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
-    var(--_border-color);
+  --_border: var(
+    --sbb-button-border-override,
+    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+      var(--_border-color)
+  );
   --_animation-loading-delay: var(
     --sbb-disable-animation-duration,
     var(--sbb-button-loading-delay)
@@ -2609,6 +2612,8 @@ sbb-breadcrumb-group:not(:defined) {
     var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
   --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
     var(--_animation-loading-delay) alternate infinite linear;
+  --_animation-loading-fade: sbb-button-loading-fade
+    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
 }
 @media (forced-colors: active) {
   :is(.sbb-button,
@@ -2920,15 +2925,30 @@ sbb-breadcrumb-group:not(:defined) {
             calc(100% - var(--sbb-button-min-height) / 2)
           )
           50%,
-        var(--sbb-button-color-loading-border) 0deg,
-        var(--sbb-button-color-loading-border) 300deg,
-        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          0deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          300deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
+              calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          360deg
       ),
     var(--_background-color);
   --_loading-outline-offset: calc(
     var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
   );
-  --_border: none;
   --_border-action: var(--sbb-button-loading-border-width) dotted transparent;
   --_padding-block: calc(
     var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
@@ -2936,9 +2956,30 @@ sbb-breadcrumb-group:not(:defined) {
   --_padding-inline: calc(
     var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
   );
-  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+  --_animation:
+    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
   --_forced-colors-adjust: none;
 }
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+    --sbb-button-border-override: none;
+  }
+}
 :is(.sbb-button,
 .sbb-button-s,
 .sbb-button-m,
@@ -3117,6 +3158,12 @@ sbb-breadcrumb-group:not(:defined) {
 .sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+  --sbb-button-border-override: none transparent;
+}
 
 :is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
   --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
@@ -3192,6 +3239,14 @@ sbb-breadcrumb-group:not(:defined) {
   --sbb-button-color-loading-border: var(--sbb-color-granite);
 }
 
+@keyframes sbb-button-loading-fade {
+  from {
+    --sbb-button-loading-opacity: 0;
+  }
+  to {
+    --sbb-button-loading-opacity: 1;
+  }
+}
 @keyframes sbb-button-rotate {
   from {
     --sbb-button-loading-angle: -90deg;
@@ -3210,7 +3265,12 @@ sbb-breadcrumb-group:not(:defined) {
 }
 @property --sbb-button-loading-angle {
   syntax: "<angle>";
-  initial-value: 0deg;
+  initial-value: -90deg;
+  inherits: false;
+}
+@property --sbb-button-loading-opacity {
+  syntax: "<number>";
+  initial-value: 1;
   inherits: false;
 }
 @property --sbb-button-loading-offset {

package/standard-theme.css

@@ -2597,8 +2597,11 @@ sbb-breadcrumb-group:not(:defined) {
   --_hover-offset: 0.0625rem;
   --_padding-block: var(--sbb-button-padding-block-min);
   --_padding-inline: var(--sbb-button-padding-inline);
-  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
-    var(--_border-color);
+  --_border: var(
+    --sbb-button-border-override,
+    calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+      var(--_border-color)
+  );
   --_animation-loading-delay: var(
     --sbb-disable-animation-duration,
     var(--sbb-button-loading-delay)
@@ -2609,6 +2612,8 @@ sbb-breadcrumb-group:not(:defined) {
     var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
   --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
     var(--_animation-loading-delay) alternate infinite linear;
+  --_animation-loading-fade: sbb-button-loading-fade
+    var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
 }
 @media (forced-colors: active) {
   :is(.sbb-button,
@@ -2920,15 +2925,30 @@ sbb-breadcrumb-group:not(:defined) {
             calc(100% - var(--sbb-button-min-height) / 2)
           )
           50%,
-        var(--sbb-button-color-loading-border) 0deg,
-        var(--sbb-button-color-loading-border) 300deg,
-        var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text)) 360deg
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          0deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          300deg,
+        color-mix(
+            in srgb,
+            var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
+              calc(var(--sbb-button-loading-opacity) * 100%),
+            transparent
+          )
+          360deg
       ),
     var(--_background-color);
   --_loading-outline-offset: calc(
     var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
   );
-  --_border: none;
   --_border-action: var(--sbb-button-loading-border-width) dotted transparent;
   --_padding-block: calc(
     var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
@@ -2936,9 +2956,30 @@ sbb-breadcrumb-group:not(:defined) {
   --_padding-inline: calc(
     var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
   );
-  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+  --_animation:
+    var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
   --_forced-colors-adjust: none;
 }
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+    --sbb-button-border-override: none;
+  }
+}
 :is(.sbb-button,
 .sbb-button-s,
 .sbb-button-m,
@@ -3117,6 +3158,12 @@ sbb-breadcrumb-group:not(:defined) {
 .sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
   --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
 }
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+  --sbb-button-border-override: none transparent;
+}
 
 :is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
   --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
@@ -3192,6 +3239,14 @@ sbb-breadcrumb-group:not(:defined) {
   --sbb-button-color-loading-border: var(--sbb-color-granite);
 }
 
+@keyframes sbb-button-loading-fade {
+  from {
+    --sbb-button-loading-opacity: 0;
+  }
+  to {
+    --sbb-button-loading-opacity: 1;
+  }
+}
 @keyframes sbb-button-rotate {
   from {
     --sbb-button-loading-angle: -90deg;
@@ -3210,7 +3265,12 @@ sbb-breadcrumb-group:not(:defined) {
 }
 @property --sbb-button-loading-angle {
   syntax: "<angle>";
-  initial-value: 0deg;
+  initial-value: -90deg;
+  inherits: false;
+}
+@property --sbb-button-loading-opacity {
+  syntax: "<number>";
+  initial-value: 1;
   inherits: false;
 }
 @property --sbb-button-loading-offset {