@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773396165

package/development/mini-button-label-common-BaMSfSTe.js

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