@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/button.pure.js

@@ -1,17 +1,537 @@
-import { SbbButtonElement } from "./button/button/button.component.js";
-import { SbbSecondaryButtonElement } from "./button/secondary-button/secondary-button.component.js";
-import { SbbAccentButtonElement } from "./button/accent-button/accent-button.component.js";
-import { SbbTransparentButtonElement } from "./button/transparent-button/transparent-button.component.js";
-import { SbbMiniButtonElement } from "./button/mini-button/mini-button.component.js";
-import { t as SbbMiniButtonLinkElement } from "./mini-button-link.component-BHaNYXk0.js";
-import { t as SbbMiniButtonGroupElement } from "./mini-button-group.component-C2KcpK5c.js";
-import { SbbButtonLinkElement } from "./button/button-link/button-link.component.js";
-import { SbbSecondaryButtonLinkElement } from "./button/secondary-button-link/secondary-button-link.component.js";
-import { SbbAccentButtonLinkElement } from "./button/accent-button-link/accent-button-link.component.js";
-import { SbbTransparentButtonLinkElement } from "./button/transparent-button-link/transparent-button-link.component.js";
-import { SbbButtonStaticElement } from "./button/button-static/button-static.component.js";
-import { SbbSecondaryButtonStaticElement } from "./button/secondary-button-static/secondary-button-static.component.js";
-import { SbbAccentButtonStaticElement } from "./button/accent-button-static/accent-button-static.component.js";
-import { SbbTransparentButtonStaticElement } from "./button/transparent-button-static/transparent-button-static.component.js";
-import { a as buttonTransparentStyle, i as buttonSecondaryStyle, n as buttonAccentStyle, o as miniButtonLabelStyle, r as buttonPrimaryStyle, s as miniButtonStyle, t as SbbButtonCommonElementMixin } from "./button-common-DvuYiiku.js";
-export { SbbAccentButtonElement, SbbAccentButtonLinkElement, SbbAccentButtonStaticElement, SbbButtonCommonElementMixin, SbbButtonElement, SbbButtonLinkElement, SbbButtonStaticElement, SbbMiniButtonElement, SbbMiniButtonGroupElement, SbbMiniButtonLinkElement, SbbSecondaryButtonElement, SbbSecondaryButtonLinkElement, SbbSecondaryButtonStaticElement, SbbTransparentButtonElement, SbbTransparentButtonLinkElement, SbbTransparentButtonStaticElement, buttonAccentStyle, buttonPrimaryStyle, buttonSecondaryStyle, buttonTransparentStyle, miniButtonLabelStyle, miniButtonStyle };
+import { SbbActionBaseElement, SbbButtonBaseElement, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbElement, SbbLinkBaseElement, SbbNamedSlotListMixin, SbbNegativeMixin, forceType } from "./core.js";
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { html as html$1 } from "lit/static-html.js";
+import { SbbIconNameMixin } from "./icon.pure.js";
+
+//#region src/elements/button/common/accent-button.scss?inline
+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";
+
+//#endregion
+//#region 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  --_min-height-modifier: 0rem;\n  --_border-color: var(--sbb-button-color-default-border);\n  --_background-color: var(--sbb-button-color-default-background);\n  --_color: var(--sbb-button-color-default-text);\n  --_button-inset: 0;\n  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid\n    var(--_border-color);\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: Highlight !important;\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: calc(var(--sbb-button-min-height) + var(--_min-height-modifier));\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  --_min-height-modifier: calc(-2 * var(--sbb-button-loading-border-width));\n  --sbb-button-focus-outline-offset-override: calc(\n    var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)\n  );\n  --_border: none;\n  --_transform-style: preserve-3d;\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-typo-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: calc(var(--sbb-button-min-height) + var(--_min-height-modifier));\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-color: var(--_background-color);\n  transition-duration: var(--sbb-button-transition-duration);\n  transition-timing-function: var(--sbb-button-transition-easing-function);\n  transition-property: color, background-color;\n  transform-style: var(--_transform-style, flat);\n  padding-block: var(--sbb-button-padding-block-min);\n  padding-inline: var(--sbb-button-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([loading]:not([disabled], :disabled, [disabled-interactive])) .sbb-action-base {\n  margin: var(--sbb-button-loading-border-width);\n  padding-inline: calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));\n  transition-property: none;\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(--sbb-button-focus-outline-offset-override, var(--sbb-focus-outline-offset));\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.sbb-button-loading-border {\n  position: absolute;\n  inset: calc(-1 * var(--sbb-button-loading-border-width));\n  clip-path: border-box;\n  border-radius: var(--sbb-button-border-radius);\n  background: var(--_background-color);\n  transform: translateZ(-1px);\n  z-index: -1;\n  container-type: inline-size;\n  contain: paint;\n  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;\n  animation-fill-mode: forwards;\n}\n.sbb-button-loading-border::before {\n  content: \"\";\n  display: block;\n  width: 64cqmin;\n  max-height: var(--sbb-button-min-height);\n  aspect-ratio: 2/1;\n  position: absolute;\n  background: radial-gradient(100% 100% at right, var(--sbb-button-color-active-text), transparent 50%);\n  offset-path: border-box;\n  offset-anchor: 100% 50%;\n  opacity: 0;\n  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;\n  animation-fill-mode: forwards;\n  transform-style: preserve-3d;\n}\n\n@keyframes snake-position {\n  to {\n    offset-distance: 100%;\n  }\n}\n@keyframes snake-fade-in {\n  to {\n    opacity: 1;\n  }\n}\n@keyframes background-fade-in {\n  to {\n    background: var(--sbb-button-color-loading-border);\n  }\n}\n";
+
+//#endregion
+//#region 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";
+
+//#endregion
+//#region src/elements/button/common/mini-button-label-common.scss?inline
+var mini_button_label_common_default = ":host {\n  --sbb-mini-button-gap: 0.125rem;\n  --sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);\n  --sbb-mini-button-label-display: block;\n  --sbb-mini-button-label-height: var(--sbb-size-icon-ui-small);\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-mini-button-padding-inline: 0;\n  --sbb-mini-button-label-display: none;\n  --sbb-mini-button-label-height: unset;\n}\n\n.sbb-action-base {\n  height: var(--sbb-mini-button-label-height);\n  gap: var(--sbb-mini-button-gap);\n  align-items: center;\n  justify-content: center;\n  padding-inline: var(--sbb-mini-button-padding-inline);\n}\n\n.sbb-mini-button__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-size: var(--sbb-text-font-size-xxs);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n  display: var(--sbb-mini-button-label-display);\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}\n";
+
+//#endregion
+//#region src/elements/button/common/primary-button.scss?inline
+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";
+
+//#endregion
+//#region 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";
+
+//#endregion
+//#region 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";
+
+//#endregion
+//#region src/elements/button/common/button-common.ts
+const buttonPrimaryStyle = unsafeCSS(primary_button_default);
+const buttonSecondaryStyle = unsafeCSS(secondary_button_default);
+const buttonAccentStyle = unsafeCSS(accent_button_default);
+const buttonTransparentStyle = unsafeCSS(transparent_button_default);
+const miniButtonStyle = unsafeCSS(mini_button_common_default);
+const miniButtonLabelStyle = unsafeCSS(mini_button_label_common_default);
+const SbbButtonCommonElementMixin = (superClass) => {
+	return (() => {
+		let _classSuper = SbbNegativeMixin(SbbIconNameMixin(superClass));
+		let _size_decorators;
+		let _size_initializers = [];
+		let _size_extraInitializers = [];
+		let _loading_decorators;
+		let _loading_initializers = [];
+		let _loading_extraInitializers = [];
+		return class SbbButtonCommonElementClass extends _classSuper {
+			static {
+				const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+				_size_decorators = [property({ reflect: true })];
+				_loading_decorators = [forceType(), property({
+					reflect: true,
+					type: Boolean
+				})];
+				__esDecorate(this, null, _size_decorators, {
+					kind: "accessor",
+					name: "size",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "size" in obj,
+						get: (obj) => obj.size,
+						set: (obj, value) => {
+							obj.size = value;
+						}
+					},
+					metadata: _metadata
+				}, _size_initializers, _size_extraInitializers);
+				__esDecorate(this, null, _loading_decorators, {
+					kind: "accessor",
+					name: "loading",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "loading" in obj,
+						get: (obj) => obj.loading,
+						set: (obj, value) => {
+							obj.loading = value;
+						}
+					},
+					metadata: _metadata
+				}, _loading_initializers, _loading_extraInitializers);
+				if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+					enumerable: true,
+					configurable: true,
+					writable: true,
+					value: _metadata
+				});
+			}
+			static {
+				this.styles = [unsafeCSS(button_common_default)];
+			}
+			#size_accessor_storage = __runInitializers(this, _size_initializers, null);
+			/**
+			* Size variant, either s (lean theme default), m (standard theme default) or l.
+			*/
+			get size() {
+				return this.#size_accessor_storage;
+			}
+			set size(value) {
+				this.#size_accessor_storage = value;
+			}
+			#loading_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _loading_initializers, false));
+			/**
+			* Whether the button indicates a loading state.
+			* The animation kicks in after a delay of 300ms, configurable with --sbb-button-loading-delay CSS variable.
+			*/
+			get loading() {
+				return this.#loading_accessor_storage;
+			}
+			set loading(value) {
+				this.#loading_accessor_storage = value;
+			}
+			constructor(...args) {
+				super(...args);
+				__runInitializers(this, _loading_extraInitializers);
+				this.internals.states.add("sbb-button");
+			}
+			willUpdate(changedProperties) {
+				super.willUpdate(changedProperties);
+				if (changedProperties.has("loading")) if (this.loading) {
+					this.internals.ariaBusy = "true";
+					this.internals.ariaDisabled = "true";
+					const offsetWidth = this.offsetWidth;
+					this.style?.setProperty("--sbb-button-width", `${offsetWidth || 136}px`);
+				} else {
+					this.internals.ariaBusy = null;
+					this.style?.removeProperty("--sbb-button-width");
+					if (!this.maybeDisabledInteractive) this.internals.ariaDisabled = null;
+				}
+			}
+			renderTemplate() {
+				return html$1`
+        ${super.renderIconSlot()}
+        <span class="sbb-button__label">
+          <slot></slot>
+        </span>
+        ${this.loading && !this.maybeDisabled ? html$1`<div class="sbb-button-loading-border"></div>` : nothing}
+      `;
+			}
+		};
+	})();
+};
+
+//#endregion
+//#region src/elements/button/button/button.component.ts
+/**
+* It displays a button enhanced with the SBB Design in the 'primary' variant.
+*
+* @slot - Use the unnamed slot to add content to the button.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbButtonElement = class extends SbbButtonCommonElementMixin(SbbDisabledTabIndexActionMixin(SbbButtonBaseElement)) {
+	static {
+		this.elementName = "sbb-button";
+	}
+	static {
+		this.styles = [buttonPrimaryStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/secondary-button/secondary-button.component.ts
+/**
+* It displays a button enhanced with the SBB Design in the 'secondary' variant.
+*
+* @slot - Use the unnamed slot to add content to the secondary-button.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbSecondaryButtonElement = class extends SbbButtonCommonElementMixin(SbbDisabledTabIndexActionMixin(SbbButtonBaseElement)) {
+	static {
+		this.elementName = "sbb-secondary-button";
+	}
+	static {
+		this.styles = [buttonSecondaryStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/accent-button/accent-button.component.ts
+/**
+* It displays a button enhanced with the SBB Design in the 'accent' variant.
+*
+* @slot - Use the unnamed slot to add content to the accent-button.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbAccentButtonElement = class extends SbbButtonCommonElementMixin(SbbDisabledTabIndexActionMixin(SbbButtonBaseElement)) {
+	static {
+		this.elementName = "sbb-accent-button";
+	}
+	static {
+		this.styles = [buttonAccentStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/transparent-button/transparent-button.component.ts
+/**
+* It displays a button enhanced with the SBB Design in the 'transparent' variant.
+*
+* @slot - Use the unnamed slot to add content to the transparent-button.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbTransparentButtonElement = class extends SbbButtonCommonElementMixin(SbbDisabledTabIndexActionMixin(SbbButtonBaseElement)) {
+	static {
+		this.elementName = "sbb-transparent-button";
+	}
+	static {
+		this.styles = [buttonTransparentStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/mini-button/mini-button.component.ts
+/**
+* It displays an icon-only button enhanced with the SBB Design;
+* it's meant to be used mainly within the sbb-form-field in prefix/suffix slot
+* or the `sbb-mini-button-group`. *
+* @slot - Use the unnamed slot to add a label to the mini-button.
+* @slot icon - Slot used to display the icon, if one is set
+*/
+var SbbMiniButtonElement = class extends SbbDisabledTabIndexActionMixin(SbbNegativeMixin(SbbIconNameMixin(SbbButtonBaseElement))) {
+	static {
+		this.elementName = "sbb-mini-button";
+	}
+	static {
+		this.styles = [miniButtonStyle, miniButtonLabelStyle];
+	}
+	renderTemplate() {
+		return html$1`
+      ${super.renderIconSlot()}
+      <span class="sbb-mini-button__label">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+
+//#endregion
+//#region src/elements/button/mini-button-link/mini-button-link.scss?inline
+var mini_button_link_default = "@media (forced-colors: active) {\n  :host {\n    --sbb-mini-button-color: LinkText !important;\n  }\n}\n";
+
+//#endregion
+//#region src/elements/button/mini-button-link/mini-button-link.component.ts
+/**
+* It displays an icon-only button enhanced with the SBB Design as link variant;
+* it's meant to be used within the `sbb-mini-button-group`.
+*
+* @slot - Use the unnamed slot to add a label to the mini-button.
+* @slot icon - Slot used to display the icon, if one is set
+*/
+var SbbMiniButtonLinkElement = class extends SbbNegativeMixin(SbbIconNameMixin(SbbDisabledInteractiveMixin(SbbDisabledMixin(SbbLinkBaseElement)))) {
+	static {
+		this.elementName = "sbb-mini-button-link";
+	}
+	static {
+		this.styles = [
+			miniButtonStyle,
+			miniButtonLabelStyle,
+			unsafeCSS(mini_button_link_default)
+		];
+	}
+	renderTemplate() {
+		return html`
+      ${super.renderIconSlot()}
+      <span class="sbb-mini-button__label">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+
+//#endregion
+//#region src/elements/button/mini-button-group/mini-button-group.scss?inline
+var mini_button_group_default = ":host {\n  display: block;\n}\n\n:host([negative]) {\n  --sbb-mini-button-group-background: var(--sbb-background-color-1-negative);\n  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-negative-inverted);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host([size=s]) {\n  --sbb-mini-button-group-min-height: var(--sbb-mini-button-group-min-height-s);\n  --sbb-mini-button-group-padding-inline: var(--sbb-mini-button-group-padding-inline-s);\n}\n\n:host([size=m]) {\n  --sbb-mini-button-group-min-height: var(--sbb-mini-button-group-min-height-m);\n  --sbb-mini-button-group-padding-inline: var(--sbb-mini-button-group-padding-inline-m);\n}\n\n:host([size=l]) {\n  --sbb-mini-button-group-min-height: var(--sbb-mini-button-group-min-height-l);\n  --sbb-mini-button-group-padding-inline: var(--sbb-mini-button-group-padding-inline-l);\n}\n\n:host([size=xl]) {\n  --sbb-mini-button-group-min-height: var(--sbb-mini-button-group-min-height-xl);\n  --sbb-mini-button-group-padding-inline: var(--sbb-mini-button-group-padding-inline-xl);\n}\n\n::slotted(:is(sbb-mini-button, sbb-mini-button-link, sbb-divider)) {\n  display: flex;\n}\n\n::slotted(sbb-divider) {\n  --sbb-divider-border-width: var(--sbb-border-width-1x);\n  padding: var(--sbb-mini-button-group-divider-padding);\n  height: var(--sbb-mini-button-group-divider-height);\n}\n\n.sbb-mini-button-group {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--sbb-mini-button-group-gap);\n  width: fit-content;\n  min-height: var(--sbb-mini-button-group-min-height);\n  background-color: var(--sbb-mini-button-group-background);\n  border: var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);\n  border-radius: var(--sbb-mini-button-group-border-radius);\n  padding-inline: calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width));\n}\n";
+
+//#endregion
+//#region src/elements/button/mini-button-group/mini-button-group.component.ts
+/**
+* Display a list of `sbb-mini-button` elements in a horizontal container,
+* possibly separated by a `sbb-divider` component.
+*
+* @slot - Use the unnamed slot to add `sbb-mini-button` and `sbb-divider` elements.
+*/
+let SbbMiniButtonGroupElement = (() => {
+	let _classSuper = SbbNegativeMixin(SbbNamedSlotListMixin(SbbElement));
+	let _accessibilityLabel_decorators;
+	let _accessibilityLabel_initializers = [];
+	let _accessibilityLabel_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	return class SbbMiniButtonGroupElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_accessibilityLabel_decorators = [forceType(), property({ attribute: "accessibility-label" })];
+			_size_decorators = [property({ reflect: true })];
+			__esDecorate(this, null, _accessibilityLabel_decorators, {
+				kind: "accessor",
+				name: "accessibilityLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "accessibilityLabel" in obj,
+					get: (obj) => obj.accessibilityLabel,
+					set: (obj, value) => {
+						obj.accessibilityLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _accessibilityLabel_initializers, _accessibilityLabel_extraInitializers);
+			__esDecorate(this, null, _size_decorators, {
+				kind: "accessor",
+				name: "size",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "size" in obj,
+					get: (obj) => obj.size,
+					set: (obj, value) => {
+						obj.size = value;
+					}
+				},
+				metadata: _metadata
+			}, _size_initializers, _size_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-mini-button-group";
+		}
+		static {
+			this.styles = [unsafeCSS(mini_button_group_default)];
+		}
+		#accessibilityLabel_accessor_storage;
+		/** This will be forwarded as aria-label to the list that contains the buttons. */
+		get accessibilityLabel() {
+			return this.#accessibilityLabel_accessor_storage;
+		}
+		set accessibilityLabel(value) {
+			this.#accessibilityLabel_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* Size variant, either s (lean theme default), m (standard theme default), l or xl.
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("negative")) this._proxyNegative();
+		}
+		_proxyNegative() {
+			this.querySelectorAll?.("sbb-divider, sbb-mini-button, sbb-mini-button-link").forEach((e) => e.negative = this.negative);
+		}
+		render() {
+			return html`
+      ${this.renderList({ ariaLabel: this.accessibilityLabel }, { localNameVisualOnly: ["sbb-divider"] })}
+    `;
+		}
+		constructor() {
+			super(...arguments);
+			this.listChildLocalNames = [
+				"sbb-mini-button",
+				"sbb-mini-button-link",
+				"sbb-divider"
+			];
+			this.#accessibilityLabel_accessor_storage = __runInitializers(this, _accessibilityLabel_initializers, "");
+			this.#size_accessor_storage = (__runInitializers(this, _accessibilityLabel_extraInitializers), __runInitializers(this, _size_initializers, null));
+			__runInitializers(this, _size_extraInitializers);
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/button/button-link/button-link.component.ts
+/**
+* It displays a button enhanced with the SBB Design in the 'primary' variant, which will behave as a link.
+*
+* @slot - Use the unnamed slot to add content to the button-link.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbButtonLinkElement = class extends SbbButtonCommonElementMixin(SbbDisabledInteractiveMixin(SbbDisabledMixin(SbbLinkBaseElement))) {
+	static {
+		this.elementName = "sbb-button-link";
+	}
+	static {
+		this.styles = [buttonPrimaryStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/secondary-button-link/secondary-button-link.component.ts
+/**
+* It displays a button enhanced with the SBB Design in the 'secondary' variant, which will behave as a link.
+*
+* @slot - Use the unnamed slot to add content to the secondary-button-link.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbSecondaryButtonLinkElement = class extends SbbButtonCommonElementMixin(SbbDisabledInteractiveMixin(SbbDisabledMixin(SbbLinkBaseElement))) {
+	static {
+		this.elementName = "sbb-secondary-button-link";
+	}
+	static {
+		this.styles = [buttonSecondaryStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/accent-button-link/accent-button-link.component.ts
+/**
+* It displays a button enhanced with the SBB Design in the 'accent' variant, which will behave as a link.
+*
+* @slot - Use the unnamed slot to add content to the accent-button-link.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbAccentButtonLinkElement = class extends SbbButtonCommonElementMixin(SbbDisabledInteractiveMixin(SbbDisabledMixin(SbbLinkBaseElement))) {
+	static {
+		this.elementName = "sbb-accent-button-link";
+	}
+	static {
+		this.styles = [buttonAccentStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/transparent-button-link/transparent-button-link.component.ts
+/**
+* It displays a button enhanced with the SBB Design in the 'transparent' variant, which will behave as a link.
+*
+* @slot - Use the unnamed slot to add content to the transparent-button-link.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbTransparentButtonLinkElement = class extends SbbButtonCommonElementMixin(SbbDisabledInteractiveMixin(SbbDisabledMixin(SbbLinkBaseElement))) {
+	static {
+		this.elementName = "sbb-transparent-button-link";
+	}
+	static {
+		this.styles = [buttonTransparentStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/button-static/button-static.component.ts
+/**
+* It displays a static button enhanced with the SBB Design in the 'primary' variant.
+*
+* @slot - Use the unnamed slot to add content to the button-static.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbButtonStaticElement = class extends SbbButtonCommonElementMixin(SbbDisabledMixin(SbbActionBaseElement)) {
+	static {
+		this.elementName = "sbb-button-static";
+	}
+	static {
+		this.styles = [buttonPrimaryStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/secondary-button-static/secondary-button-static.component.ts
+/**
+* It displays a static button enhanced with the SBB Design in the 'secondary' variant.
+*
+* @slot - Use the unnamed slot to add content to the secondary-button-static.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbSecondaryButtonStaticElement = class extends SbbButtonCommonElementMixin(SbbDisabledMixin(SbbActionBaseElement)) {
+	static {
+		this.elementName = "sbb-secondary-button-static";
+	}
+	static {
+		this.styles = [buttonSecondaryStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/accent-button-static/accent-button-static.component.ts
+/**
+* It displays a static button enhanced with the SBB Design in the 'accent' variant.
+*
+* @slot - Use the unnamed slot to add content to the accent-button-static.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbAccentButtonStaticElement = class extends SbbButtonCommonElementMixin(SbbDisabledMixin(SbbActionBaseElement)) {
+	static {
+		this.elementName = "sbb-accent-button-static";
+	}
+	static {
+		this.styles = [buttonAccentStyle];
+	}
+};
+
+//#endregion
+//#region src/elements/button/transparent-button-static/transparent-button-static.component.ts
+/**
+* It displays a static button enhanced with the SBB Design in the 'transparent' variant.
+*
+* @slot - Use the unnamed slot to add content to the transparent-button-static.
+* @slot icon - Slot used to display the icon, if one is set.
+* @cssprop [--sbb-button-loading-delay=300ms] - The delay before the loading animation starts, when setting the button into loading state.
+*/
+var SbbTransparentButtonStaticElement = class extends SbbButtonCommonElementMixin(SbbDisabledMixin(SbbActionBaseElement)) {
+	static {
+		this.elementName = "sbb-transparent-button-static";
+	}
+	static {
+		this.styles = [buttonTransparentStyle];
+	}
+};
+
+//#endregion
+export { SbbAccentButtonElement, SbbAccentButtonLinkElement, SbbAccentButtonStaticElement, SbbButtonCommonElementMixin, SbbButtonElement, SbbButtonLinkElement, SbbButtonStaticElement, SbbMiniButtonElement, SbbMiniButtonGroupElement, SbbMiniButtonLinkElement, SbbSecondaryButtonElement, SbbSecondaryButtonLinkElement, SbbSecondaryButtonStaticElement, SbbTransparentButtonElement, SbbTransparentButtonLinkElement, SbbTransparentButtonStaticElement, buttonAccentStyle, buttonPrimaryStyle, buttonSecondaryStyle, buttonTransparentStyle, miniButtonLabelStyle, miniButtonStyle };

package/development/calendar/calendar/calendar.component.d.ts

@@ -1,9 +1,9 @@
-import { CSSResultGroup, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit';
-import { FormRestoreReason, FormRestoreState, SbbElement, SbbElementType } from '../../core.ts';
-export declare class SbbMonthChangeEvent extends Event {
+import { type CSSResultGroup, type PropertyDeclaration, type PropertyValues, type TemplateResult } from 'lit';
+import { type FormRestoreReason, type FormRestoreState, SbbElement, type SbbElementType } from '../../core.ts';
+export declare class SbbMonthChangeEvent<T = Date> extends Event {
     private readonly _range;
-    get range(): readonly Day[];
-    constructor(range: readonly Day[]);
+    get range(): readonly Day<T>[];
+    constructor(range: readonly Day<T>[]);
 }
 export declare class SbbDateSelectedEvent<T> extends Event {
     private readonly _dateSelected;
@@ -28,7 +28,7 @@ export interface Weekday {
     long: string;
     narrow: string;
 }
-declare const SbbCalendarElement_base: import('../../core.ts').AbstractConstructor<import('../../core.ts').SbbFormAssociatedMixinType> & typeof SbbElement;
+declare const SbbCalendarElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbFormAssociatedMixinType> & typeof SbbElement;
 /**
  * It displays a calendar which allows choosing a date.
  *
@@ -120,6 +120,10 @@ export declare class SbbCalendarElement<T = Date> extends SbbCalendarElement_bas
     resetPosition(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Returns the list of days that are visible in the calendar.
+     */
+    visibleDays(): Day<T>[];
     /** @internal */
     formResetCallback(): void;
     /** @internal */
@@ -130,6 +134,7 @@ export declare class SbbCalendarElement<T = Date> extends SbbCalendarElement_bas
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
     protected updated(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
     private _onSlotChange;
     /**
      * The `_value` state should be adapted when the `multiple` property changes:
@@ -305,4 +310,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=calendar.component.d.ts.map

package/development/calendar/calendar-day/calendar-day.component.d.ts

@@ -1,5 +1,5 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
-import { SbbCalendarElement } from '../calendar/calendar.component.ts';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+import type { SbbCalendarElement } from '../calendar/calendar.component.ts';
 import { SbbCalendarCellBaseElement } from '../common/calendar-cell-base-element.ts';
 /**
  * It displays a single day cell in the `sbb-calendar` component.
@@ -33,4 +33,3 @@ declare global {
         'sbb-calendar-day': SbbCalendarDayElement;
     }
 }
-//# sourceMappingURL=calendar-day.component.d.ts.map