@sbb-esta/lyne-elements-dev 5.7.0-dev.1788770150 → 5.7.0-dev.1788796277

package/development/toggle.pure.js

@@ -6,7 +6,7 @@ import { SbbDisabledMixin, SbbElement, SbbFormAssociatedMixin, forceType, intera
 import { SbbIconNameMixin } from "./icon.pure.js";
 
 //#region src/elements/toggle/toggle-option/toggle-option.scss?inline
-var toggle_option_default = ":host {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--sbb-toggle-option-gap);\n  height: var(--sbb-toggle-height);\n  padding-inline: var(--sbb-toggle-padding-inline);\n  color: var(--sbb-toggle-option-color);\n  cursor: var(--sbb-toggle-option-cursor, var(--sbb-cursor-pointer));\n  overflow: hidden;\n  font-size: var(--sbb-toggle-option-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  font-weight: bold;\n  outline: none !important;\n}\n\n:host([checked]) {\n  --sbb-toggle-option-color: var(--sbb-color-2);\n}\n\n:host([disabled]) {\n  --sbb-toggle-option-cursor: unset;\n  --sbb-toggle-option-color: var(--sbb-color-anthracite);\n  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));\n}\n\n.sbb-toggle-option__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\nsbb-icon,\n::slotted(sbb-icon) {\n  min-width: var(--sbb-toggle-option-icon-min-size);\n  min-height: var(--sbb-toggle-option-icon-min-size);\n}\n";
+var toggle_option_default = ":host {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--sbb-toggle-option-gap);\n  height: var(--sbb-toggle-height);\n  padding-inline: var(--sbb-toggle-padding-inline);\n  color: var(--sbb-toggle-option-color);\n  cursor: var(--sbb-toggle-option-cursor, var(--sbb-cursor-pointer));\n  overflow: hidden;\n  font-size: var(--sbb-toggle-option-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  font-weight: bold;\n  outline: none !important;\n}\n\n:host([checked]) {\n  --sbb-toggle-option-color: var(--sbb-color-2);\n}\n\n:host([disabled]) {\n  --sbb-toggle-option-cursor: unset;\n  --sbb-toggle-option-color: var(--sbb-color-anthracite);\n  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));\n}\n\n.sbb-toggle-option__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\nsbb-icon,\n::slotted(sbb-icon) {\n  min-width: var(--sbb-toggle-option-icon-min-size);\n  min-height: var(--sbb-toggle-option-icon-min-size);\n}\n";
 
 //#endregion
 //#region src/elements/toggle/toggle-option/toggle-option.component.ts
@@ -163,7 +163,7 @@ let SbbToggleOptionElement = (() => {
 
 //#endregion
 //#region src/elements/toggle/toggle/toggle.scss?inline
-var toggle_default = ":host {\n  --_sbb-toggle-min-width: calc(\n    var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small)\n  );\n  --sbb-toggle-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: grid;\n  grid-template-columns: var(--sbb-toggle-grid-template-columns);\n  grid-template-areas: \"start end\";\n  align-items: center;\n  height: var(--sbb-toggle-height);\n  width: var(--sbb-toggle-width, fit-content);\n  min-width: var(--_sbb-toggle-min-width);\n  max-width: 100%;\n  border-radius: var(--sbb-toggle-border-radius);\n  font-size: var(--sbb-toggle-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  line-height: var(--sbb-typo-line-height-text);\n}\n:host::before {\n  content: \"\";\n  display: block;\n  grid-area: start/start/end/end;\n  margin-inline: var(--sbb-toggle-option-left, 0) var(--sbb-toggle-option-right, 0);\n  background-color: var(--sbb-toggle-selected-option-background-color);\n  border-radius: var(--sbb-toggle-border-radius);\n  max-width: 100%;\n  height: 100%;\n  border: var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);\n  transition-duration: var(--sbb-toggle-animation-duration);\n  transition-timing-function: ease;\n  transition-property: margin-inline-start, margin-inline-end;\n}\n:host::after {\n  content: \"\";\n  grid-area: start/start/end/end;\n  order: -1;\n  background: var(--sbb-toggle-background-color);\n  margin-inline: var(--sbb-toggle-background-inset);\n  height: calc(100% - 2 * var(--sbb-toggle-background-inset));\n  border-radius: var(--sbb-toggle-border-radius);\n}\n@media (forced-colors: active) {\n  :host::after {\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n:host([even]) {\n  --sbb-toggle-width: 100%;\n  --sbb-toggle-grid-template-columns: 50% 50%;\n}\n\n:host(:disabled) {\n  --sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);\n  --sbb-toggle-selected-option-border-color: light-dark(\n    var(--sbb-color-graphite),\n    var(--sbb-color-smoke)\n  );\n  --sbb-toggle-selected-option-border-style: dashed;\n}\n@media (forced-colors: active) {\n  :host(:disabled) {\n    --sbb-toggle-selected-option-border-style: solid;\n    --sbb-toggle-selected-option-border-color: GrayText;\n  }\n}\n\n:host([size=s]) {\n  --sbb-toggle-padding-inline: var(--sbb-toggle-padding-inline-s);\n  --sbb-toggle-height: var(--sbb-toggle-height-s);\n}\n\n:host([size=m]) {\n  --sbb-toggle-padding-inline: var(--sbb-toggle-padding-inline-m);\n  --sbb-toggle-height: var(--sbb-toggle-height-m);\n}\n\n:host(:is(:not(:is(:state(initialized),[state--initialized])), :is(:state(disable-animation-on-resizing),[state--disable-animation-on-resizing]))) {\n  --sbb-disable-animation-duration: 0s;\n}\n\n::slotted(sbb-toggle-option:first-of-type) {\n  grid-area: start;\n}\n\n::slotted(sbb-toggle-option:last-of-type) {\n  grid-area: end;\n}\n";
+var toggle_default = ":host {\n  --_sbb-toggle-min-width: calc(\n    var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small)\n  );\n  --sbb-toggle-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: grid;\n  grid-template-columns: var(--sbb-toggle-grid-template-columns);\n  grid-template-areas: \"start end\";\n  align-items: center;\n  height: var(--sbb-toggle-height);\n  width: var(--sbb-toggle-width, fit-content);\n  min-width: var(--_sbb-toggle-min-width);\n  max-width: 100%;\n  border-radius: var(--sbb-toggle-border-radius);\n  font-size: var(--sbb-toggle-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  line-height: var(--sbb-typo-line-height-text);\n}\n:host::before {\n  content: \"\";\n  display: block;\n  grid-area: start/start/end/end;\n  margin-inline: var(--sbb-toggle-option-left, 0) var(--sbb-toggle-option-right, 0);\n  background-color: var(--sbb-toggle-selected-option-background-color);\n  border-radius: var(--sbb-toggle-border-radius);\n  max-width: 100%;\n  height: 100%;\n  border: var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);\n  transition-duration: var(--sbb-toggle-animation-duration);\n  transition-timing-function: ease;\n  transition-property: margin-inline-start, margin-inline-end;\n}\n:host::after {\n  content: \"\";\n  grid-area: start/start/end/end;\n  order: -1;\n  background: var(--sbb-toggle-background-color);\n  margin-inline: var(--sbb-toggle-background-inset);\n  height: calc(100% - 2 * var(--sbb-toggle-background-inset));\n  border-radius: var(--sbb-toggle-border-radius);\n}\n@media (forced-colors: active) {\n  :host::after {\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n:host([even]) {\n  --sbb-toggle-width: 100%;\n  --sbb-toggle-grid-template-columns: 50% 50%;\n}\n\n:host(:disabled) {\n  --sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);\n  --sbb-toggle-selected-option-border-color: light-dark(\n    var(--sbb-color-graphite),\n    var(--sbb-color-smoke)\n  );\n  --sbb-toggle-selected-option-border-style: dashed;\n}\n@media (forced-colors: active) {\n  :host(:disabled) {\n    --sbb-toggle-selected-option-border-style: solid;\n    --sbb-toggle-selected-option-border-color: GrayText;\n  }\n}\n\n:host([size=s]) {\n  --sbb-toggle-padding-inline: var(--sbb-toggle-padding-inline-s);\n  --sbb-toggle-height: var(--sbb-toggle-height-s);\n}\n\n:host([size=m]) {\n  --sbb-toggle-padding-inline: var(--sbb-toggle-padding-inline-m);\n  --sbb-toggle-height: var(--sbb-toggle-height-m);\n}\n\n:host(:is(:not(:is(:state(initialized),[state--initialized])), :is(:state(disable-animation-on-resizing),[state--disable-animation-on-resizing]))) {\n  --sbb-disable-animation-duration: 0s;\n}\n\n::slotted(sbb-toggle-option:first-of-type) {\n  grid-area: start;\n}\n\n::slotted(sbb-toggle-option:last-of-type) {\n  grid-area: end;\n}\n";
 
 //#endregion
 //#region src/elements/toggle/toggle/toggle.component.ts

package/development/tooltip.pure.js

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js";
 import { SbbDisabledMixin, SbbEscapableOverlayController, SbbOpenCloseBaseElement, SbbOverlayPositionController, appendAriaElements, idReference, isAndroid, isIOS, isZeroAnimationDuration, popoverResetStyles, queueDomContentLoaded, readConfig, removeAriaElements, sbbInputModalityDetector, sbbOverlayOutsidePointerEventListener } from "./core.js";
 
 //#region src/elements/tooltip/tooltip.scss?inline
-var tooltip_default = ":host {\n  --sbb-tooltip-max-width: min(\n    25rem,\n    calc(100vw - var(--sbb-spacing-fixed-2x))\n  );\n  --sbb-tooltip-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  position-area: var(--sbb-overlay-position-area);\n  position-try-fallbacks: var(--sbb-overlay-position-try-fallbacks);\n  display: none;\n  position: fixed;\n  pointer-events: var(--sbb-tooltip-pointer-events, all);\n  z-index: var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));\n  animation-name: var(--sbb-tooltip-animation-name);\n  animation-duration: var(--sbb-tooltip-animation-duration);\n  animation-timing-function: var(--sbb-tooltip-animation-easing);\n  font-size: var(--sbb-tooltip-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-tooltip-animation-name: open;\n  display: block;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n  --sbb-tooltip-animation-name: close;\n  --sbb-tooltip-pointer-events: none;\n}\n\n:host(:is([data-position~=block-end], [data-position~=bottom], [data-position^=end])) {\n  padding-block-start: var(--sbb-tooltip-gap);\n}\n\n:host(:is([data-position~=block-start], [data-position~=top], [data-position^=start])) {\n  padding-block-end: var(--sbb-tooltip-gap);\n}\n\n:host(:is([data-position~=inline-start],\n[data-position~=inline-end],\n[data-position~=left],\n[data-position~=right],\n[data-position$=\" start\"],\n[data-position$=\" end\"])) {\n  padding-inline: var(--sbb-tooltip-gap);\n}\n\n.sbb-tooltip {\n  box-shadow: var(--sbb-box-shadow-level-5-soft);\n  border: var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);\n  border-radius: var(--sbb-tooltip-border-radius);\n  padding: var(--sbb-tooltip-padding);\n  color: var(--sbb-tooltip-color);\n  background-color: var(--sbb-tooltip-background-color);\n  min-width: var(--sbb-tooltip-min-width);\n  max-width: var(--sbb-tooltip-max-width);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n    translate: var(--sbb-tooltip-animation-translate);\n  }\n  to {\n    opacity: 1;\n    translate: 0;\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n    translate: 0;\n  }\n  to {\n    opacity: 0;\n    translate: var(--sbb-tooltip-animation-translate);\n  }\n}\n";
+var tooltip_default = ":host {\n  --sbb-tooltip-max-width: min(\n    25rem,\n    calc(100vw - var(--sbb-spacing-fixed-2x))\n  );\n  --sbb-tooltip-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  position-area: var(--sbb-overlay-position-area);\n  position-try-fallbacks: var(--sbb-overlay-position-try-fallbacks);\n  display: none;\n  position: fixed;\n  pointer-events: var(--sbb-tooltip-pointer-events, all);\n  z-index: var(--sbb-tooltip-z-index, var(--sbb-overlay-default-z-index));\n  animation-name: var(--sbb-tooltip-animation-name);\n  animation-duration: var(--sbb-tooltip-animation-duration);\n  animation-timing-function: var(--sbb-tooltip-animation-easing);\n  font-size: var(--sbb-tooltip-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-tooltip-animation-name: open;\n  display: block;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n  --sbb-tooltip-animation-name: close;\n  --sbb-tooltip-pointer-events: none;\n}\n\n:host(:is([data-position~=block-end], [data-position~=bottom], [data-position^=end])) {\n  padding-block-start: var(--sbb-tooltip-gap);\n}\n\n:host(:is([data-position~=block-start], [data-position~=top], [data-position^=start])) {\n  padding-block-end: var(--sbb-tooltip-gap);\n}\n\n:host(:is([data-position~=inline-start],\n[data-position~=inline-end],\n[data-position~=left],\n[data-position~=right],\n[data-position$=\" start\"],\n[data-position$=\" end\"])) {\n  padding-inline: var(--sbb-tooltip-gap);\n}\n\n.sbb-tooltip {\n  box-shadow: var(--sbb-box-shadow-level-5-soft);\n  border: var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);\n  border-radius: var(--sbb-tooltip-border-radius);\n  padding: var(--sbb-tooltip-padding);\n  color: var(--sbb-tooltip-color);\n  background-color: var(--sbb-tooltip-background-color);\n  min-width: var(--sbb-tooltip-min-width);\n  max-width: var(--sbb-tooltip-max-width);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n    translate: var(--sbb-tooltip-animation-translate);\n  }\n  to {\n    opacity: 1;\n    translate: 0;\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n    translate: 0;\n  }\n  to {\n    opacity: 0;\n    translate: var(--sbb-tooltip-animation-translate);\n  }\n}\n";
 
 //#endregion
 //#region src/elements/tooltip/tooltip.component.ts

package/development/train.pure.js

@@ -85,7 +85,7 @@ var SbbTrainBlockedPassageElement = class extends SbbTrainFormationOrientationMi
 
 //#endregion
 //#region src/elements/train/train-formation/train-formation.scss?inline
-var train_formation_default = ":host {\n  --sbb-train-formation-scroll-padding: var(--sbb-train-formation-padding);\n  --_sbb-train-formation-wagon-width: var(--sbb-train-formation-wagon-dimension-long);\n  --_sbb-train-formation-wagon-height: var(--sbb-train-formation-wagon-dimension-short);\n  display: grid;\n  grid-template: \"start sectors end\" auto \"start trains end\" auto/auto 1fr auto;\n  position: relative;\n  overflow: auto visible;\n  gap: var(--_sbb-train-formation-sectors-to-train-gap, 0) 0;\n  padding-block: var(--sbb-train-formation-padding);\n  color: var(--sbb-train-formation-text-color);\n  font-size: var(--sbb-text-font-size-xs);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n}\n:host::before, :host::after {\n  content: \"\";\n  display: block;\n  width: var(--sbb-train-formation-scroll-padding);\n}\n:host::before {\n  grid-area: start;\n}\n:host::after {\n  grid-area: end;\n}\n\n:host(:focus-visible) {\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:host(:is(:state(has-sectors),[state--has-sectors])) {\n  --_sbb-train-formation-sectors-to-train-gap: var(--sbb-train-formation-gap);\n}\n\n:host(:is(:state(has-direction-label),[state--has-direction-label])) {\n  --_sbb-train-formation-reserve-spacing-display: block;\n}\n\n:host([orientation=vertical]) {\n  --_sbb-train-formation-wagon-width: var(--sbb-train-formation-wagon-dimension-short);\n  --_sbb-train-formation-wagon-height: var(--sbb-train-formation-wagon-dimension-long);\n  --_sbb-train-formation-flex-direction: column;\n  --_sbb-train-formation-flex-direction-inverted: row;\n  grid-template: \"start start\" auto \"sectors trains\" 1fr \"end end\" auto;\n  overflow: visible auto;\n  padding-block: unset;\n  padding-inline: var(--sbb-train-formation-padding);\n  gap: 0 var(--_sbb-train-formation-sectors-to-train-gap, 0);\n  width: fit-content;\n}\n:host([orientation=vertical])::before, :host([orientation=vertical])::after {\n  width: auto;\n  height: var(--sbb-train-formation-scroll-padding);\n}\n\n.sbb-train-formation__sectors {\n  display: flex;\n  grid-area: sectors;\n  gap: var(--sbb-train-formation-wagon-gap);\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n}\n\n.sbb-train-formation__sector {\n  --_wagon-sum: var(--sbb-train-formation-wagon-count) *\n    var(--sbb-train-formation-wagon-dimension-long);\n  --_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) *\n    var(--sbb-train-formation-blocked-passage-dimension);\n  --_total-count: calc(\n    var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count)\n  );\n  --_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));\n  --_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));\n  --_sector-line-length: calc(0.5 * var(--_sector-width));\n  flex: 0 0 var(--_sector-width);\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  justify-content: center;\n  overflow: clip visible;\n}\n:host([orientation=vertical]) .sbb-train-formation__sector {\n  overflow: visible clip;\n}\n\n.sbb-train-formation__sector-sticky-wrapper {\n  position: sticky;\n  inset: auto 0;\n  padding: 0 var(--sbb-train-formation-sector-padding);\n  margin: 0 var(--sbb-train-formation-sector-margin);\n  white-space: nowrap;\n}\n:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper {\n  writing-mode: sideways-lr;\n  inset: 0 auto;\n  padding: var(--sbb-train-formation-sector-padding) 0;\n  margin: var(--sbb-train-formation-sector-margin) 0;\n}\n.sbb-train-formation__sector-sticky-wrapper::before, .sbb-train-formation__sector-sticky-wrapper::after {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(50% - var(--sbb-train-formation-sector-line-width) / 2);\n  border-block-end: var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);\n  width: var(--_sector-line-length);\n}\n:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper::before, :host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper::after {\n  width: auto;\n  height: var(--_sector-line-length);\n}\n.sbb-train-formation__sector-sticky-wrapper::before {\n  inset-inline-end: 100%;\n}\n.sbb-train-formation__sector-sticky-wrapper::after {\n  inset-inline-start: 100%;\n}\n\n.sbb-train-formation__trains {\n  grid-area: trains;\n}\n\n.sbb-train-formation__train-list {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-formation-wagon-gap);\n}\n\n.sbb-train-formation__train-list > :is(li, span) {\n  display: inline-flex;\n}\n";
+var train_formation_default = ":host {\n  --sbb-train-formation-scroll-padding: var(--sbb-train-formation-padding);\n  --_sbb-train-formation-wagon-width: var(--sbb-train-formation-wagon-dimension-long);\n  --_sbb-train-formation-wagon-height: var(--sbb-train-formation-wagon-dimension-short);\n  display: grid;\n  grid-template: \"start sectors end\" auto \"start trains end\" auto/auto 1fr auto;\n  position: relative;\n  overflow: auto visible;\n  gap: var(--_sbb-train-formation-sectors-to-train-gap, 0) 0;\n  padding-block: var(--sbb-train-formation-padding);\n  color: var(--sbb-train-formation-text-color);\n  font-size: var(--sbb-text-font-size-xs);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n}\n:host::before, :host::after {\n  content: \"\";\n  display: block;\n  width: var(--sbb-train-formation-scroll-padding);\n}\n:host::before {\n  grid-area: start;\n}\n:host::after {\n  grid-area: end;\n}\n\n:host(:focus-visible) {\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:host(:is(:state(has-sectors),[state--has-sectors])) {\n  --_sbb-train-formation-sectors-to-train-gap: var(--sbb-train-formation-gap);\n}\n\n:host(:is(:state(has-direction-label),[state--has-direction-label])) {\n  --_sbb-train-formation-reserve-spacing-display: block;\n}\n\n:host([orientation=vertical]) {\n  --_sbb-train-formation-wagon-width: var(--sbb-train-formation-wagon-dimension-short);\n  --_sbb-train-formation-wagon-height: var(--sbb-train-formation-wagon-dimension-long);\n  --_sbb-train-formation-flex-direction: column;\n  --_sbb-train-formation-flex-direction-inverted: row;\n  grid-template: \"start start\" auto \"sectors trains\" 1fr \"end end\" auto;\n  overflow: visible auto;\n  padding-block: unset;\n  padding-inline: var(--sbb-train-formation-padding);\n  gap: 0 var(--_sbb-train-formation-sectors-to-train-gap, 0);\n  width: fit-content;\n}\n:host([orientation=vertical])::before, :host([orientation=vertical])::after {\n  width: auto;\n  height: var(--sbb-train-formation-scroll-padding);\n}\n\n.sbb-train-formation__sectors {\n  display: flex;\n  grid-area: sectors;\n  gap: var(--sbb-train-formation-wagon-gap);\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n}\n\n.sbb-train-formation__sector {\n  --_wagon-sum: var(--sbb-train-formation-wagon-count) *\n    var(--sbb-train-formation-wagon-dimension-long);\n  --_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) *\n    var(--sbb-train-formation-blocked-passage-dimension);\n  --_total-count: calc(\n    var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count)\n  );\n  --_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));\n  --_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));\n  --_sector-line-length: calc(0.5 * var(--_sector-width));\n  flex: 0 0 var(--_sector-width);\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  justify-content: center;\n  overflow: clip visible;\n}\n:host([orientation=vertical]) .sbb-train-formation__sector {\n  overflow: visible clip;\n}\n\n.sbb-train-formation__sector-sticky-wrapper {\n  position: sticky;\n  inset: auto 0;\n  padding: 0 var(--sbb-train-formation-sector-padding);\n  margin: 0 var(--sbb-train-formation-sector-margin);\n  white-space: nowrap;\n}\n:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper {\n  writing-mode: sideways-lr;\n  inset: 0 auto;\n  padding: var(--sbb-train-formation-sector-padding) 0;\n  margin: var(--sbb-train-formation-sector-margin) 0;\n}\n.sbb-train-formation__sector-sticky-wrapper::before, .sbb-train-formation__sector-sticky-wrapper::after {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(50% - var(--sbb-train-formation-sector-line-width) / 2);\n  border-block-end: var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);\n  width: var(--_sector-line-length);\n}\n:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper::before, :host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper::after {\n  width: auto;\n  height: var(--_sector-line-length);\n}\n.sbb-train-formation__sector-sticky-wrapper::before {\n  inset-inline-end: 100%;\n}\n.sbb-train-formation__sector-sticky-wrapper::after {\n  inset-inline-start: 100%;\n}\n\n.sbb-train-formation__trains {\n  grid-area: trains;\n}\n\n.sbb-train-formation__train-list {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-formation-wagon-gap);\n}\n\n.sbb-train-formation__train-list > :is(li, span) {\n  display: inline-flex;\n}\n";
 
 //#endregion
 //#region src/elements/train/train-formation/train-formation.component.ts
@@ -269,7 +269,7 @@ let SbbTrainFormationElement = (() => {
 
 //#endregion
 //#region src/elements/train/train-wagon-common.scss?inline
-var train_wagon_common_default = ":host {\n  --sbb-train-wagon-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n  font-size: var(--sbb-train-wagon-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  outline: none !important;\n}\n\n:host([wagon-type=closed]) {\n  --sbb-train-wagon-crossed-shape-display: block;\n}\n@media (forced-colors: active) {\n  :host([wagon-type=closed]) {\n    --sbb-train-wagon-shape-color: GrayText;\n  }\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-left]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x) var(--sbb-spacing-fixed-3x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-right]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=locomotive]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-top),[state--view-top])) {\n  --sbb-train-wagon-border-radius: var(--sbb-border-radius-4x);\n}\n\n:host([label]) {\n  --_sbb-train-wagon-attributes-max-width: var(--sbb-train-wagon-attributes-max-width);\n}\n\n:host(:not([label])) {\n  --_sbb-train-wagon-attributes-justify-content: center;\n}\n\n:host(.sbb-active) {\n  --sbb-train-wagon-border-width: var(--sbb-border-width-3x);\n}\n\n:host(:is(:state(action),[state--action])) {\n  cursor: var(--sbb-cursor-pointer);\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(link),[state--link])) {\n    --sbb-train-wagon-shape-color: LinkText;\n  }\n}\n\n.sbb-train-wagon-link {\n  outline: none;\n  color: inherit;\n  text-decoration: none;\n}\n\n.sbb-train-wagon {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n  align-items: center;\n  width: var(--_sbb-train-formation-wagon-width);\n  gap: var(--sbb-train-wagon-vertical-gap);\n  position: relative;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon {\n  width: auto;\n  height: var(--_sbb-train-formation-wagon-height);\n}\n.sbb-train-wagon::before {\n  content: \"\";\n  position: absolute;\n  width: var(--_sbb-train-formation-wagon-width);\n  height: var(--_sbb-train-formation-wagon-height);\n  border-radius: var(--sbb-train-wagon-border-radius);\n}\n:host(:is(:state(button),[state--button]):focus-visible) .sbb-train-wagon::before, .sbb-train-wagon-link:focus-visible .sbb-train-wagon::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.sbb-train-wagon__compartment {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  justify-content: center;\n  padding-inline: var(--sbb-train-wagon-padding-inline);\n  mask-image: var(--_sbb-train-wagon-clip-shape-compartment);\n  transition: background-color var(--sbb-train-wagon-transition-duration) var(--sbb-animation-easing);\n}\n@media (any-hover: hover) {\n  :host(:is(:state(action),[state--action]):hover) .sbb-train-wagon__compartment {\n    background-color: var(--sbb-train-wagon-background-color-hover);\n  }\n}\n:host(:is(:state(action),[state--action]):is(:active, :is(:state(active),[state--active]))) .sbb-train-wagon__compartment {\n  background-color: var(--sbb-train-wagon-background-color-active);\n}\n.sbb-train-wagon__compartment:has(.sbb-train-wagon__occupancy):has(.sbb-train-wagon__class) {\n  justify-content: space-between;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__compartment {\n  padding-inline: 0;\n  padding-block: var(--sbb-train-wagon-padding-inline);\n}\n\n.sbb-train-wagon__compartment,\n.sbb-train-wagon__main-icon {\n  width: var(--_sbb-train-formation-wagon-width);\n  height: var(--_sbb-train-formation-wagon-height);\n}\n\n.sbb-train-wagon__shape {\n  position: absolute;\n  inset: 0;\n  width: var(--sbb-train-formation-wagon-dimension-long);\n  height: var(--sbb-train-formation-wagon-dimension-short);\n  transform-origin: 0 0;\n  will-change: transform;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__shape {\n  rotate: -90deg;\n  scale: -1 1;\n}\n\n.sbb-train-wagon__shape {\n  mask-image: var(--_sbb-train-wagon-clip-shape);\n  pointer-events: none;\n  fill: none;\n  stroke: var(--sbb-train-wagon-shape-color);\n  stroke-width: calc(var(--sbb-train-wagon-border-width) * 2);\n}\n\n.sbb-train-wagon__main-icon {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sbb-train-wagon__shape-closed {\n  display: var(--sbb-train-wagon-crossed-shape-display, none);\n  stroke-width: var(--sbb-border-width-1x);\n}\n\n.sbb-train-wagon__occupancy,\n.sbb-train-wagon__class {\n  height: var(--_sbb-train-formation-wagon-height);\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__occupancy,\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class {\n  height: auto;\n  width: var(--_sbb-train-formation-wagon-width);\n}\n\n.sbb-train-wagon__occupancy {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);\n  grid-area: occupancy;\n}\n\n.sbb-train-wagon__class {\n  gap: 0.0625rem;\n  order: 1;\n}\n\n.sbb-train-wagon__class-entry {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sbb-train-wagon-class-dimension);\n  height: var(--sbb-train-wagon-class-dimension);\n  border: var(--sbb-train-wagon-class-border);\n  background-color: var(--sbb-train-wagon-class-background-color);\n  border-radius: var(--sbb-train-wagon-class-border-radius);\n  font-weight: var(--sbb-train-wagon-class-font-weight);\n  color: var(--sbb-train-wagon-class-color);\n  position: relative;\n  line-height: 1;\n}\n.sbb-train-wagon__class-entry.first::before {\n  content: \"\";\n  position: absolute;\n  background-color: var(--sbb-train-wagon-class-first-color);\n  border-end-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:not(:is(:state(orientation-vertical),[state--orientation-vertical]))) .sbb-train-wagon__class-entry.first::before {\n  height: var(--sbb-train-wagon-class-first-thickness);\n  width: var(--sbb-train-wagon-class-dimension);\n  inset: calc(-0.5 * (var(--_sbb-train-formation-wagon-height) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width)) 0 auto calc(-1 * var(--sbb-train-wagon-class-border-width));\n  border-end-start-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class-entry.first::before {\n  width: var(--sbb-train-wagon-class-first-thickness);\n  height: var(--sbb-train-wagon-class-dimension);\n  inset: calc(-1 * var(--sbb-train-wagon-class-border-width)) auto 0 calc(-0.5 * (var(--_sbb-train-formation-wagon-width) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width));\n  border-start-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n\n.sbb-train-wagon__information-wrapper {\n  display: flex;\n  align-items: start;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-wagon-information-gap);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__information-wrapper {\n  min-width: var(--sbb-train-wagon-information-min-width);\n}\n.sbb-train-wagon__information-wrapper[hidden] {\n  display: none;\n}\n\n:is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n  margin-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-font-size)));\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) :is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n  margin-block-start: 0;\n}\n\n.sbb-train-wagon__label {\n  line-height: 1;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label {\n  max-width: var(--sbb-train-wagon-information-min-width);\n  width: 100%;\n  text-align: center;\n}\n\n.sbb-train-wagon__label-divider {\n  height: var(--sbb-train-wagon-font-size);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label-divider {\n  height: auto;\n  width: var(--sbb-train-wagon-font-size);\n  margin-inline-start: calc(0.5 * (var(--sbb-train-wagon-information-min-width) - var(--sbb-train-wagon-font-size)));\n}\n\n.sbb-train-wagon__attribute-icon-list {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);\n  display: flex;\n  justify-content: var(--_sbb-train-wagon-attributes-justify-content, start);\n  flex-wrap: wrap;\n  gap: var(--sbb-train-wagon-attribute-icon-gap);\n  color: var(--sbb-train-wagon-attribute-icon-color);\n  padding-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-attribute-icon-height)));\n  max-width: var(--_sbb-train-wagon-attributes-max-width);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__attribute-icon-list {\n  max-width: calc(var(--_sbb-train-wagon-attributes-icon-columns) * var(--sbb-train-wagon-attributes-mean-width));\n  max-height: calc(var(--_sbb-train-wagon-attributes-icon-rows, 3) * var(--sbb-train-wagon-attribute-icon-height) + (var(--_sbb-train-wagon-attributes-icon-rows, 3) - 1) * var(--sbb-train-wagon-attribute-icon-gap));\n  padding-block-start: 0;\n  justify-content: center;\n  width: 100%;\n}\n\n.sbb-train-wagon__attribute-icon-list > :is(li, span) {\n  display: inline-flex;\n}\n";
+var train_wagon_common_default = ":host {\n  --sbb-train-wagon-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n  font-size: var(--sbb-train-wagon-font-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  outline: none !important;\n}\n\n:host([wagon-type=closed]) {\n  --sbb-train-wagon-crossed-shape-display: block;\n}\n@media (forced-colors: active) {\n  :host([wagon-type=closed]) {\n    --sbb-train-wagon-shape-color: GrayText;\n  }\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-left]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x) var(--sbb-spacing-fixed-3x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-right]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=locomotive]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-top),[state--view-top])) {\n  --sbb-train-wagon-border-radius: var(--sbb-border-radius-4x);\n}\n\n:host([label]) {\n  --_sbb-train-wagon-attributes-max-width: var(--sbb-train-wagon-attributes-max-width);\n}\n\n:host(:not([label])) {\n  --_sbb-train-wagon-attributes-justify-content: center;\n}\n\n:host(.sbb-active) {\n  --sbb-train-wagon-border-width: var(--sbb-border-width-3x);\n}\n\n:host(:is(:state(action),[state--action])) {\n  cursor: var(--sbb-cursor-pointer);\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(link),[state--link])) {\n    --sbb-train-wagon-shape-color: LinkText;\n  }\n}\n\n.sbb-train-wagon-link {\n  outline: none;\n  color: inherit;\n  text-decoration: none;\n}\n\n.sbb-train-wagon {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n  align-items: center;\n  width: var(--_sbb-train-formation-wagon-width);\n  gap: var(--sbb-train-wagon-vertical-gap);\n  position: relative;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon {\n  width: auto;\n  height: var(--_sbb-train-formation-wagon-height);\n}\n.sbb-train-wagon::before {\n  content: \"\";\n  position: absolute;\n  width: var(--_sbb-train-formation-wagon-width);\n  height: var(--_sbb-train-formation-wagon-height);\n  border-radius: var(--sbb-train-wagon-border-radius);\n}\n:host(:is(:state(button),[state--button]):focus-visible) .sbb-train-wagon::before, .sbb-train-wagon-link:focus-visible .sbb-train-wagon::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.sbb-train-wagon__compartment {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  justify-content: center;\n  padding-inline: var(--sbb-train-wagon-padding-inline);\n  mask-image: var(--_sbb-train-wagon-clip-shape-compartment);\n  transition: background-color var(--sbb-train-wagon-transition-duration) var(--sbb-animation-easing);\n}\n@media (any-hover: hover) {\n  :host(:is(:state(action),[state--action]):hover) .sbb-train-wagon__compartment {\n    background-color: var(--sbb-train-wagon-background-color-hover);\n  }\n}\n:host(:is(:state(action),[state--action]):is(:active, :is(:state(active),[state--active]))) .sbb-train-wagon__compartment {\n  background-color: var(--sbb-train-wagon-background-color-active);\n}\n.sbb-train-wagon__compartment:has(.sbb-train-wagon__occupancy):has(.sbb-train-wagon__class) {\n  justify-content: space-between;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__compartment {\n  padding-inline: 0;\n  padding-block: var(--sbb-train-wagon-padding-inline);\n}\n\n.sbb-train-wagon__compartment,\n.sbb-train-wagon__main-icon {\n  width: var(--_sbb-train-formation-wagon-width);\n  height: var(--_sbb-train-formation-wagon-height);\n}\n\n.sbb-train-wagon__shape {\n  position: absolute;\n  inset: 0;\n  width: var(--sbb-train-formation-wagon-dimension-long);\n  height: var(--sbb-train-formation-wagon-dimension-short);\n  transform-origin: 0 0;\n  will-change: transform;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__shape {\n  rotate: -90deg;\n  scale: -1 1;\n}\n\n.sbb-train-wagon__shape {\n  mask-image: var(--_sbb-train-wagon-clip-shape);\n  pointer-events: none;\n  fill: none;\n  stroke: var(--sbb-train-wagon-shape-color);\n  stroke-width: calc(var(--sbb-train-wagon-border-width) * 2);\n}\n\n.sbb-train-wagon__main-icon {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sbb-train-wagon__shape-closed {\n  display: var(--sbb-train-wagon-crossed-shape-display, none);\n  stroke-width: var(--sbb-border-width-1x);\n}\n\n.sbb-train-wagon__occupancy,\n.sbb-train-wagon__class {\n  height: var(--_sbb-train-formation-wagon-height);\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__occupancy,\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class {\n  height: auto;\n  width: var(--_sbb-train-formation-wagon-width);\n}\n\n.sbb-train-wagon__occupancy {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);\n  grid-area: occupancy;\n}\n\n.sbb-train-wagon__class {\n  gap: 0.0625rem;\n  order: 1;\n}\n\n.sbb-train-wagon__class-entry {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sbb-train-wagon-class-dimension);\n  height: var(--sbb-train-wagon-class-dimension);\n  border: var(--sbb-train-wagon-class-border);\n  background-color: var(--sbb-train-wagon-class-background-color);\n  border-radius: var(--sbb-train-wagon-class-border-radius);\n  font-weight: var(--sbb-train-wagon-class-font-weight);\n  color: var(--sbb-train-wagon-class-color);\n  position: relative;\n  line-height: 1;\n}\n.sbb-train-wagon__class-entry.first::before {\n  content: \"\";\n  position: absolute;\n  background-color: var(--sbb-train-wagon-class-first-color);\n  border-end-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:not(:is(:state(orientation-vertical),[state--orientation-vertical]))) .sbb-train-wagon__class-entry.first::before {\n  height: var(--sbb-train-wagon-class-first-thickness);\n  width: var(--sbb-train-wagon-class-dimension);\n  inset: calc(-0.5 * (var(--_sbb-train-formation-wagon-height) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width)) 0 auto calc(-1 * var(--sbb-train-wagon-class-border-width));\n  border-end-start-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class-entry.first::before {\n  width: var(--sbb-train-wagon-class-first-thickness);\n  height: var(--sbb-train-wagon-class-dimension);\n  inset: calc(-1 * var(--sbb-train-wagon-class-border-width)) auto 0 calc(-0.5 * (var(--_sbb-train-formation-wagon-width) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width));\n  border-start-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n\n.sbb-train-wagon__information-wrapper {\n  display: flex;\n  align-items: start;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-wagon-information-gap);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__information-wrapper {\n  min-width: var(--sbb-train-wagon-information-min-width);\n}\n.sbb-train-wagon__information-wrapper[hidden] {\n  display: none;\n}\n\n:is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n  margin-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-font-size)));\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) :is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n  margin-block-start: 0;\n}\n\n.sbb-train-wagon__label {\n  line-height: 1;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label {\n  max-width: var(--sbb-train-wagon-information-min-width);\n  width: 100%;\n  text-align: center;\n}\n\n.sbb-train-wagon__label-divider {\n  height: var(--sbb-train-wagon-font-size);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label-divider {\n  height: auto;\n  width: var(--sbb-train-wagon-font-size);\n  margin-inline-start: calc(0.5 * (var(--sbb-train-wagon-information-min-width) - var(--sbb-train-wagon-font-size)));\n}\n\n.sbb-train-wagon__attribute-icon-list {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);\n  display: flex;\n  justify-content: var(--_sbb-train-wagon-attributes-justify-content, start);\n  flex-wrap: wrap;\n  gap: var(--sbb-train-wagon-attribute-icon-gap);\n  color: var(--sbb-train-wagon-attribute-icon-color);\n  padding-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-attribute-icon-height)));\n  max-width: var(--_sbb-train-wagon-attributes-max-width);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__attribute-icon-list {\n  max-width: calc(var(--_sbb-train-wagon-attributes-icon-columns) * var(--sbb-train-wagon-attributes-mean-width));\n  max-height: calc(var(--_sbb-train-wagon-attributes-icon-rows, 3) * var(--sbb-train-wagon-attribute-icon-height) + (var(--_sbb-train-wagon-attributes-icon-rows, 3) - 1) * var(--sbb-train-wagon-attribute-icon-gap));\n  padding-block-start: 0;\n  justify-content: center;\n  width: 100%;\n}\n\n.sbb-train-wagon__attribute-icon-list > :is(li, span) {\n  display: inline-flex;\n}\n";
 
 //#endregion
 //#region src/elements/train/train-wagon-common.ts
@@ -743,7 +743,7 @@ var SbbTrainWagonElement = class extends SbbTrainWagonMixin(SbbElement) {
 
 //#endregion
 //#region src/elements/train/train/train.scss?inline
-var train_default = ":host {\n  --sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x);\n  --_sbb-train-direction-row-dimension: calc(\n    max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-text))\n  );\n  display: flex;\n  font-size: var(--sbb-text-font-size-xs);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n  gap: var(--sbb-train-formation-gap);\n  position: relative;\n}\n:host::before {\n  content: \"\";\n  display: var(--_sbb-train-formation-reserve-spacing-display, none);\n  height: var(--_sbb-train-direction-row-dimension);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical]))::before {\n  height: auto;\n  width: var(--_sbb-train-direction-row-dimension);\n}\n\n.sbb-train__wagons {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-formation-wagon-gap);\n}\n\n.sbb-train__direction-heading {\n  display: flex;\n  position: absolute;\n  width: 100%;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-heading {\n  width: auto;\n  height: 100%;\n}\n\n.sbb-train__direction-sticky-wrapper {\n  position: sticky;\n  inset-inline-start: 0;\n  display: inline-flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  align-items: center;\n  gap: var(--sbb-train-direction-label-spacing);\n  max-width: 100%;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-sticky-wrapper {\n  inset-inline-start: unset;\n  inset-block-start: 0;\n  max-width: unset;\n  max-height: 100%;\n}\n\n:host([direction=right]) .sbb-train__direction-arrow {\n  scale: -1 1;\n  order: 2;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-arrow {\n  rotate: 90deg;\n}\n\n.sbb-train__direction-label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-label {\n  writing-mode: sideways-lr;\n}\n";
+var train_default = ":host {\n  --sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x);\n  --_sbb-train-direction-row-dimension: calc(\n    max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-text))\n  );\n  display: flex;\n  font-size: var(--sbb-text-font-size-xs);\n  letter-spacing: var(--sbb-letter-spacing-text);\n  flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n  gap: var(--sbb-train-formation-gap);\n  position: relative;\n}\n:host::before {\n  content: \"\";\n  display: var(--_sbb-train-formation-reserve-spacing-display, none);\n  height: var(--_sbb-train-direction-row-dimension);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical]))::before {\n  height: auto;\n  width: var(--_sbb-train-direction-row-dimension);\n}\n\n.sbb-train__wagons {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-formation-wagon-gap);\n}\n\n.sbb-train__direction-heading {\n  display: flex;\n  position: absolute;\n  width: 100%;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-heading {\n  width: auto;\n  height: 100%;\n}\n\n.sbb-train__direction-sticky-wrapper {\n  position: sticky;\n  inset-inline-start: 0;\n  display: inline-flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  align-items: center;\n  gap: var(--sbb-train-direction-label-spacing);\n  max-width: 100%;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-sticky-wrapper {\n  inset-inline-start: unset;\n  inset-block-start: 0;\n  max-width: unset;\n  max-height: 100%;\n}\n\n:host([direction=right]) .sbb-train__direction-arrow {\n  scale: -1 1;\n  order: 2;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-arrow {\n  rotate: 90deg;\n}\n\n.sbb-train__direction-label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-label {\n  writing-mode: sideways-lr;\n}\n";
 
 //#endregion
 //#region src/elements/train/train/train.component.ts

package/download.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbSecondaryButtonStaticElement as o}from"./button.pure.js";import{SbbElement as s,SbbLanguageController as c,SbbLinkBaseElement as l,SbbPropertyWatcherController as u,defaultDateAdapter as d,forceType as f,i18nDownload as p,i18nNonAccessible as m,omitEmptyConverter as h,readConfig as g,screenReaderOnlyStyles as _}from"./core.js";import{SbbIconNameMixin as v}from"./icon.pure.js";var y=`:host{--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent;--sbb-card-border-radius:var(--sbb-border-radius-4x);--sbb-card-animation-easing:var(--sbb-animation-easing);--sbb-card-border-style:solid;--sbb-card-padding-inline-default:var(--sbb-spacing-responsive-s);--sbb-card-padding-block-default:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block-default:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default);display:block}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}.sbb-download{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}.sbb-download:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){.sbb-download{--sbb-title-color:var(--sbb-card-color)}}.sbb-download{align-items:center;gap:var(--sbb-download-gap);translate:0 var(--sbb-card-hover-shift,0);transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);text-decoration:none;display:flex}.sbb-download:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (any-hover:hover){:host(:hover) .sbb-download{--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover) .sbb-download{--sbb-card-border-color:Highlight}}.sbb-download__icon{flex:none}.sbb-download__content{flex-direction:column;flex:auto;min-width:0;display:flex}.sbb-download__label{overflow-wrap:break-word;color:var(--sbb-download-label-color);font-weight:700}.sbb-download__custom-content,.sbb-download__info{line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-download-info-color)}.sbb-download__button{flex:none;margin-inline-start:auto}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbSecondaryButtonStaticElement as o}from"./button.pure.js";import{SbbElement as s,SbbLanguageController as c,SbbLinkBaseElement as l,SbbPropertyWatcherController as u,defaultDateAdapter as d,forceType as f,i18nDownload as p,i18nNonAccessible as m,omitEmptyConverter as h,readConfig as g,screenReaderOnlyStyles as _}from"./core.js";import{SbbIconNameMixin as v}from"./icon.pure.js";var y=`:host{--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent;--sbb-card-border-radius:var(--sbb-border-radius-4x);--sbb-card-animation-easing:var(--sbb-animation-easing);--sbb-card-border-style:solid;--sbb-card-padding-inline-default:var(--sbb-spacing-responsive-s);--sbb-card-padding-block-default:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block-default:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default);display:block}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}.sbb-download{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}.sbb-download:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){.sbb-download{--sbb-title-color:var(--sbb-card-color)}}.sbb-download{align-items:center;gap:var(--sbb-download-gap);translate:0 var(--sbb-card-hover-shift,0);transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);text-decoration:none;display:flex}.sbb-download:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (any-hover:hover){:host(:hover) .sbb-download{--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover) .sbb-download{--sbb-card-border-color:Highlight}}.sbb-download__icon{flex:none}.sbb-download__content{flex-direction:column;flex:auto;min-width:0;display:flex}.sbb-download__label{overflow-wrap:break-word;color:var(--sbb-download-label-color);font-weight:700}.sbb-download__custom-content,.sbb-download__info{line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-download-info-color)}.sbb-download__button{flex:none;margin-inline-start:auto}
 `;const b=new Map([[`pdf`,`document-pdf-small`],[`xls`,`document-xls-small`],[`xlsx`,`document-xls-small`],[`ppt`,`document-ppt-small`],[`pptx`,`document-ppt-small`],[`doc`,`document-doc-small`],[`docx`,`document-doc-small`],[`zip`,`document-zip-small`],[`jpg`,`document-image-small`],[`jpeg`,`document-image-small`],[`png`,`document-image-small`],[`gif`,`document-image-small`],[`svg`,`document-image-small`],[`webp`,`document-image-small`]]);let x=(()=>{let s=v(l),u=[],d,m=[],g=[],x,S=[],C=[],w;return class extends s{constructor(){super(...arguments),this.#e=(t(this,u),t(this,m,`white`)),this.#t=(t(this,g),t(this,S,``)),this._languageController=(t(this,C),new c(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;d=[a({reflect:!0})],x=[f(),a({converter:h})],w=[a({type:Boolean,reflect:!1})],e(this,null,d,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},m,g),e(this,null,x,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},S,C),e(this,null,w,{kind:`setter`,name:`download`,static:!1,private:!1,access:{has:e=>`download`in e,set:(e,t)=>{e.download=t}},metadata:t},null,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download`}static{this.elementDependencies=[o]}static{this.styles=[_,i(y)]}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get label(){return this.#t}set label(e){this.#t=e}set download(e){}get download(){return!0}get fileName(){return this.href.split(/[?#]/)[0].split(`/`).filter(Boolean).at(-1)??``}get fileExtension(){let e=this.fileName;return e.includes(`.`)?e.split(`.`).at(-1)?.toLowerCase()??``:``}renderIconName(){if(this.iconName)return this.iconName;if(!this.href)return``;let e=this.fileExtension;return e&&b.get(e)||`document-standard-small`}firstUpdated(e){super.firstUpdated(e),this._updateDescribedByElements()}_updateDescribedByElements(){let e=this.shadowRoot?.querySelector?.(`a`);if(e){let t=this.shadowRoot?.querySelector?.(`.sbb-download__custom-content`);e.ariaDescribedByElements=[...t?[t]:[],...this._downloadInfoElements()]}}_downloadInfoElements(){return this.querySelectorAll?.(`sbb-download-info`)??[]}renderTemplate(){return n`
       ${this.renderIconSlot(`sbb-download__icon`)}
       <span class="sbb-download__content">

package/expansion-panel.pure.js

@@ -1,5 +1,5 @@
 import{html as e,nothing as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbDisabledTabIndexActionMixin as i,SbbElement as a,SbbMediaMatcherController as o,SbbMediaQueryHover as s,SbbPropertyWatcherController as c,forceType as l,isZeroAnimationDuration as u,ɵstateController as d}from"./core.js";import{SbbIconNameMixin as f}from"./icon.pure.js";import{__esDecorate as p,__runInitializers as m}from"tslib";import{property as h}from"lit/decorators.js";var g=`:host{--sbb-expansion-panel-content-padding-inline-start:var(--sbb-expansion-panel-content-padding-inline);padding-block-end:var(--sbb-expansion-panel-content-padding-block-end);padding-inline:var(--sbb-expansion-panel-content-padding-inline-start) var(--sbb-expansion-panel-content-padding-inline);display:block}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-default)}@media (width>=37.5rem){:host(:is(:state(icon-space),[state--icon-space])){--sbb-expansion-panel-content-padding-inline-start:calc(var(--sbb-expansion-panel-content-padding-inline) + var(--sbb-expansion-panel-icon-size) + var(--sbb-expansion-panel-title-gap))}}::slotted(:is(p,sbb-title):first-child){margin-block-start:0}
-`,_=class extends a{static{this.elementName=`sbb-expansion-panel-content`}static{this.role=`region`}static{this.styles=[n(g)]}constructor(){super(),this._previousSize=null,this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`content`}render(){return e`<slot></slot>`}},v=`:host{display:block}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-s);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-s);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-l);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-l);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-default);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-default);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-default)}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor:var(--sbb-cursor-default);--sbb-expansion-panel-header-text-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color:GrayText}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{justify-content:var(--sbb-expansion-panel-header-justify-content);align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);font-size:var(--sbb-expansion-panel-header-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);font-weight:400;line-height:var(--sbb-typo-line-height-text);-webkit-tap-highlight-color:transparent;display:flex}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height:var(--sbb-expansion-panel-icon-size)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);min-height:var(--sbb-size-icon-ui-medium);overflow:hidden}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}
+`,_=class extends a{static{this.elementName=`sbb-expansion-panel-content`}static{this.role=`region`}static{this.styles=[n(g)]}constructor(){super(),this._previousSize=null,this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`content`}render(){return e`<slot></slot>`}},v=`:host{display:block}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-s);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-s);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-l);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-l);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-default);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-default);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-default)}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor:var(--sbb-cursor-default);--sbb-expansion-panel-header-text-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color:GrayText}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x);border-radius:var(--sbb-expansion-panel-border-radius)}.sbb-expansion-panel-header{justify-content:var(--sbb-expansion-panel-header-justify-content);align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);font-size:var(--sbb-expansion-panel-header-font-size);letter-spacing:var(--sbb-letter-spacing-text);font-weight:400;line-height:var(--sbb-typo-line-height-text);-webkit-tap-highlight-color:transparent;display:flex}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height:var(--sbb-expansion-panel-icon-size)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);min-height:var(--sbb-size-icon-ui-medium);overflow:hidden}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}
 `,y=class extends i(f(r)){static{this.elementName=`sbb-expansion-panel-header`}static{this.styles=[n(v)]}static{this.events={toggleexpanded:`toggleexpanded`}}constructor(){super(),this._mediaMatcher=new o(this,{[s]:e=>this._isHover=e}),this._isHover=this._mediaMatcher.matches(s)??!1,this._previousSize=null,this.addEventListener?.(`click`,()=>this._emitExpandedEvent()),this.addEventListener?.(`mouseenter`,()=>this._onMouseMovement(!0)),this.addEventListener?.(`mouseleave`,()=>this._onMouseMovement(!1)),this.addEventListener?.(`slottedchange`,()=>this._setIconState()),this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`header`}_emitExpandedEvent(){this.disabled||this.dispatchEvent(new Event(`toggleexpanded`,{bubbles:!0,composed:!0}))}_onMouseMovement(e){let t=this.closest(`sbb-expansion-panel`);(!e||t&&this._isHover)&&d(t).toggle(`toggle-hover`,e)}_setIconState(){this.toggleState(`icon`,!!(this.iconName||this.matches?.(`:is(:state(icon),[state--icon])`)))}renderTemplate(){return this._setIconState(),e`
       <span class="sbb-expansion-panel-header__title">
         <span class="sbb-expansion-panel-header__icon"> ${this.renderIconSlot()} </span>

package/file-selector.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{ref as a}from"lit/directives/ref.js";import{html as o,unsafeStatic as s}from"lit/static-html.js";import{SbbSecondaryButtonElement as c,SbbSecondaryButtonStaticElement as l}from"./button.pure.js";import{SbbDisabledMixin as u,SbbElement as d,SbbFormAssociatedMixin as f,SbbLanguageController as p,forceType as m,forwardEvent as h,i18nFileSelectorButtonLabel as g,i18nFileSelectorButtonLabelMultiple as _,i18nFileSelectorCurrentlySelected as v,i18nFileSelectorDeleteFile as y,i18nFileSelectorSubtitleLabel as b,i18nFileSelectorSubtitleLabelMultiple as x,sbbInputModalityDetector as S,screenReaderOnlyStyles as C,ɵstateController as w}from"./core.js";import{SbbIconElement as T}from"./icon.pure.js";var E=`:host{--sbb-file-selector-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));width:20rem;display:block}@media (forced-colors:active){:host(:disabled){--sbb-file-selector-color:GrayText;--sbb-file-selector-subtitle-color:GrayText;--sbb-file-selector-border-color:GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color:var(--sbb-background-color-3);--sbb-file-selector-border-color:light-dark(var(--sbb-color-storm),var(--sbb-color-anthracite))}@media (forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color:Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;flex-direction:column;display:flex}.sbb-file-selector__file-list{row-gap:var(--sbb-spacing-fixed-3x);padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x);flex-direction:column;margin-block:0;display:flex}.sbb-file-selector__file{gap:var(--sbb-spacing-fixed-4x);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-s);justify-content:space-between;align-items:center;display:flex}.sbb-file-selector__file-details{justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);flex:1;display:flex;overflow:auto}.sbb-file-selector__file-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-file-selector__file-size{white-space:nowrap;color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{ref as a}from"lit/directives/ref.js";import{html as o,unsafeStatic as s}from"lit/static-html.js";import{SbbSecondaryButtonElement as c,SbbSecondaryButtonStaticElement as l}from"./button.pure.js";import{SbbDisabledMixin as u,SbbElement as d,SbbFormAssociatedMixin as f,SbbLanguageController as p,forceType as m,forwardEvent as h,i18nFileSelectorButtonLabel as g,i18nFileSelectorButtonLabelMultiple as _,i18nFileSelectorCurrentlySelected as v,i18nFileSelectorDeleteFile as y,i18nFileSelectorSubtitleLabel as b,i18nFileSelectorSubtitleLabelMultiple as x,sbbInputModalityDetector as S,screenReaderOnlyStyles as C,ɵstateController as w}from"./core.js";import{SbbIconElement as T}from"./icon.pure.js";var E=`:host{--sbb-file-selector-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));width:20rem;display:block}@media (forced-colors:active){:host(:disabled){--sbb-file-selector-color:GrayText;--sbb-file-selector-subtitle-color:GrayText;--sbb-file-selector-border-color:GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color:var(--sbb-background-color-3);--sbb-file-selector-border-color:light-dark(var(--sbb-color-storm),var(--sbb-color-anthracite))}@media (forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color:Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;flex-direction:column;display:flex}.sbb-file-selector__file-list{row-gap:var(--sbb-spacing-fixed-3x);padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x);flex-direction:column;margin-block:0;display:flex}.sbb-file-selector__file{gap:var(--sbb-spacing-fixed-4x);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-s);justify-content:space-between;align-items:center;display:flex}.sbb-file-selector__file-details{justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);flex:1;display:flex;overflow:auto}.sbb-file-selector__file-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-file-selector__file-size{white-space:nowrap;color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}
 `,D=class extends Event{get files(){return this._files}constructor(e){super(`filechanged`,{bubbles:!0,composed:!0}),this._files=Object.freeze(e||[])}};const O=l=>(()=>{let d=u(f(l)),b=[],x,T=[],O=[],k,A=[],j=[],M,N=[],P=[],F,I=[],L=[],R,z=[],B=[],V,H;return class extends d{constructor(){super(...arguments),this.#e=(t(this,b),t(this,T,null)),this.#t=(t(this,O),t(this,A,!1)),this.#n=(t(this,j),t(this,N,`default`)),this.#r=(t(this,P),t(this,I,``)),this.#i=(t(this,L),t(this,z,``)),this._files=(t(this,B),[]),this._suffixes=[`B`,`kB`,`MB`,`GB`,`TB`],this.language=new p(this),this._counter=0}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;x=[i({reflect:!0})],k=[m(),i({type:Boolean})],M=[i({attribute:`multiple-mode`})],F=[m(),i()],R=[m(),i({attribute:`accessibility-label`})],V=[i({attribute:!1})],H=[i({attribute:!1})],e(this,null,x,{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:t},T,O),e(this,null,k,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},A,j),e(this,null,M,{kind:`accessor`,name:`multipleMode`,static:!1,private:!1,access:{has:e=>`multipleMode`in e,get:e=>e.multipleMode,set:(e,t)=>{e.multipleMode=t}},metadata:t},N,P),e(this,null,F,{kind:`accessor`,name:`accept`,static:!1,private:!1,access:{has:e=>`accept`in e,get:e=>e.accept,set:(e,t)=>{e.accept=t}},metadata:t},I,L),e(this,null,R,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},z,B),e(this,null,V,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,b),e(this,null,H,{kind:`setter`,name:`files`,static:!1,private:!1,access:{has:e=>`files`in e,set:(e,t)=>{e.files=t}},metadata:t},null,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[c]}static{this.events={filechanged:`filechanged`}}static{this.styles=[C,r(E)]}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get multipleMode(){return this.#n}set multipleMode(e){this.#n=e}#r;get accept(){return this.#r}set accept(e){this.#r=e}#i;get accessibilityLabel(){return this.#i}set accessibilityLabel(e){this.#i=e}set value(e){this._hiddenInput.value=e??``,e||(this.files=[])}get value(){return this._hiddenInput?.value}set files(e){this._files=e??[];let t=new DataTransfer;this.files.forEach(e=>t.items.add(e)),this._hiddenInput.files=t.files,this.updateFormValue()}get files(){return this._files}get type(){return`file`}formResetCallback(){this.files=[]}formStateRestoreCallback(e,t){e&&(this.files=e.getAll(this.name))}updateFormValue(){let e=new FormData;this.files.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}_checkFileEquality(e,t){return e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified}_onFocus(){S.mostRecentModality===`keyboard`&&w(this.loadButton).add(`focus-visible`)}_onBlur(){w(this.loadButton).delete(`focus-visible`)}_readFiles(e){let t=e.target;t.files&&this.createFileList(t.files),h(e,this)}createFileList(e,t=!1){let n=Array.from(e);!this.multiple&&e.length>1||this.accept&&n.some(e=>!this.accept.split(`,`).some(t=>e.name.endsWith(t.trim())))||(this.files=!this.multiple||this.multipleMode!==`persistent`||this.files.length===0?n:n.filter(e=>this.files.findIndex(t=>this._checkFileEquality(e,t))===-1).concat(this.files),this._updateA11yLiveRegion(),this._dispatchFileChangedEvent(),t&&this._dispatchNativeEvents())}getButtonLabel(){return this.multiple?_[this.language.current]:g[this.language.current]}_removeFile(e){this.files=this.files.filter(t=>!this._checkFileEquality(e,t)),this._updateA11yLiveRegion(),this._dispatchNativeEvents(),this._dispatchFileChangedEvent()}_dispatchNativeEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_dispatchFileChangedEvent(){let e=this.files;this.dispatchEvent(new D(e))}_formatFileSize(e){let t=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**t).toFixed(0)} ${this._suffixes[t]}`}_updateA11yLiveRegion(){this._liveRegion.innerText=v(this.files.map(e=>e.name))[this.language.current]}_renderFileList(){let e=this.files.length>1?{WRAPPER:`ul`,ELEMENT:`li`}:{WRAPPER:`div`,ELEMENT:`span`};return o`
       <${s(e.WRAPPER)} class="sbb-file-selector__file-list">
         ${this.files.map(t=>o`
@@ -45,7 +45,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,
         <div class="sbb-file-selector__error">
           <slot name="error"></slot>
         </div>
-      `}}})();var k=`:host([size=m]){--_sbb-file-selector-dropzone-icon-medium-display:block;--_sbb-file-selector-dropzone-icon-small-display:none}:host([size=s]){--_sbb-file-selector-dropzone-icon-medium-display:none;--_sbb-file-selector-dropzone-icon-small-display:block}.sbb-file-selector__dropzone-area{padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);flex-direction:column;align-items:center;transition-property:background-color,border-color;display:flex}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}sbb-icon[name=folder-open-medium]{display:var(--_sbb-file-selector-dropzone-icon-medium-display)}sbb-icon[name=folder-open-small]{display:var(--_sbb-file-selector-dropzone-icon-small-display)}.sbb-file-selector__dropzone-area--title{font-weight:700;font-size:var(--sbb-heading-font-size-6);letter-spacing:var(--sbb-typo-letter-spacing-heading);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{text-align:center;color:var(--sbb-file-selector-subtitle-color);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);margin-block-end:var(--sbb-spacing-fixed-4x)}
+      `}}})();var k=`:host([size=m]){--_sbb-file-selector-dropzone-icon-medium-display:block;--_sbb-file-selector-dropzone-icon-small-display:none}:host([size=s]){--_sbb-file-selector-dropzone-icon-medium-display:none;--_sbb-file-selector-dropzone-icon-small-display:block}.sbb-file-selector__dropzone-area{padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);flex-direction:column;align-items:center;transition-property:background-color,border-color;display:flex}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}sbb-icon[name=folder-open-medium]{display:var(--_sbb-file-selector-dropzone-icon-medium-display)}sbb-icon[name=folder-open-small]{display:var(--_sbb-file-selector-dropzone-icon-small-display)}.sbb-file-selector__dropzone-area--title{font-weight:700;font-size:var(--sbb-heading-font-size-6);letter-spacing:var(--sbb-letter-spacing-heading);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{text-align:center;color:var(--sbb-file-selector-subtitle-color);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);margin-block-end:var(--sbb-spacing-fixed-4x)}
 `;let A=(()=>{let s=O(d),c,u=[],f=[];return class extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;c=[m(),i({attribute:`title-content`})],e(this,null,c,{kind:`accessor`,name:`titleContent`,static:!1,private:!1,access:{has:e=>`titleContent`in e,get:e=>e.titleContent,set:(e,t)=>{e.titleContent=t}},metadata:t},u,f),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-file-selector-dropzone`}static{this.elementDependencies=[T,l]}static{this.styles=[r(k)]}static{this.events={filechanged:`filechanged`}}#e=t(this,u,``);get titleContent(){return this.#e}set titleContent(e){this.#e=e}renderTemplate(e){return o`
       <label>
         <span class="sbb-file-selector__dropzone-area">

package/footer.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{html as a,unsafeStatic as o}from"lit/static-html.js";import{SbbElement as s,SbbNegativeMixin as c,forceType as l,screenReaderOnlyStyles as u}from"./core.js";var d=`:host{--sbb-link-text-decoration-line:none;display:block}:host([negative]){--sbb-footer-background-color:var(--sbb-background-color-2-negative);--sbb-footer-color:var(--sbb-color-1-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}.sbb-footer{font-size:var(--sbb-footer-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);color:var(--sbb-footer-color);padding-block:var(--sbb-footer-padding-block);background-color:var(--sbb-footer-background-color)}@media (forced-colors:active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not([expanded])) .sbb-footer-wrapper{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}::slotted(.sbb-link-list-button-group){gap:var(--sbb-spacing-fixed-6x);flex-direction:column;align-items:flex-start;display:flex}:host([variant=clock-columns]) slot{column-gap:var(--sbb-footer-gap-horizontal);grid-template-rows:auto;grid-template-columns:auto;display:grid}@media (width>=37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media (width>=90rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);grid-template-columns:repeat(4,1fr);margin-inline:auto}}:host([variant=clock-columns]) ::slotted(:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:2;align-self:start}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-area:1/4/auto/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-area:3/1/auto/4;width:100%}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(:last-child){grid-row:4}}@media (width>=64rem){:host([variant=clock-columns]) ::slotted(:last-child){grid-column:1/4}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(:last-child){grid-column:1/5}}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{nothing as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{html as a,unsafeStatic as o}from"lit/static-html.js";import{SbbElement as s,SbbNegativeMixin as c,forceType as l,screenReaderOnlyStyles as u}from"./core.js";var d=`:host{--sbb-link-text-decoration-line:none;display:block}:host([negative]){--sbb-footer-background-color:var(--sbb-background-color-2-negative);--sbb-footer-color:var(--sbb-color-1-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}.sbb-footer{font-size:var(--sbb-footer-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);color:var(--sbb-footer-color);padding-block:var(--sbb-footer-padding-block);background-color:var(--sbb-footer-background-color)}@media (forced-colors:active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not([expanded])) .sbb-footer-wrapper{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}::slotted(.sbb-link-list-button-group){gap:var(--sbb-spacing-fixed-6x);flex-direction:column;align-items:flex-start;display:flex}:host([variant=clock-columns]) slot{column-gap:var(--sbb-footer-gap-horizontal);grid-template-rows:auto;grid-template-columns:auto;display:grid}@media (width>=37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media (width>=90rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);grid-template-columns:repeat(4,1fr);margin-inline:auto}}:host([variant=clock-columns]) ::slotted(:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:2;align-self:start}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-area:1/4/auto/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-area:3/1/auto/4;width:100%}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(:last-child){grid-row:4}}@media (width>=64rem){:host([variant=clock-columns]) ::slotted(:last-child){grid-column:1/4}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(:last-child){grid-column:1/5}}
 `;let f=(()=>{let f=c(s),p,m=[],h=[],g,_=[],v=[],y,b=[],x=[],S,C=[],w=[];return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;p=[i({reflect:!0})],g=[l(),i({reflect:!0,type:Boolean})],y=[l(),i({attribute:`accessibility-title`})],S=[i({attribute:`accessibility-title-level`})],e(this,null,p,{kind:`accessor`,name:`variant`,static:!1,private:!1,access:{has:e=>`variant`in e,get:e=>e.variant,set:(e,t)=>{e.variant=t}},metadata:t},m,h),e(this,null,g,{kind:`accessor`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,get:e=>e.expanded,set:(e,t)=>{e.expanded=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`accessibilityTitle`,static:!1,private:!1,access:{has:e=>`accessibilityTitle`in e,get:e=>e.accessibilityTitle,set:(e,t)=>{e.accessibilityTitle=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`accessibilityTitleLevel`,static:!1,private:!1,access:{has:e=>`accessibilityTitleLevel`in e,get:e=>e.accessibilityTitleLevel,set:(e,t)=>{e.accessibilityTitleLevel=t}},metadata:t},C,w),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-footer`}static{this.styles=[u,r(d)]}#e=t(this,m,`default`);get variant(){return this.#e}set variant(e){this.#e=e}#t=(t(this,h),t(this,_,!1));get expanded(){return this.#t}set expanded(e){this.#t=e}#n=(t(this,v),t(this,b,``));get accessibilityTitle(){return this.#n}set accessibilityTitle(e){this.#n=e}#r=(t(this,x),t(this,C,`1`));get accessibilityTitleLevel(){return this.#r}set accessibilityTitleLevel(e){this.#r=e}render(){let e=`h${this.accessibilityTitleLevel}`,t=a`<${o(e)} class="sbb-screen-reader-only"
         >${this.accessibilityTitle}</${o(e)}>`;return a`
       <footer class="sbb-footer">

package/form-field/_form-field.global.scss

@@ -133,7 +133,7 @@ $theme: 'standard' !default;
       // To be more specific than the styles in normalize.scss we need to use !important
       // TODO: Find a better solution
       font-size: var(--sbb-form-field-input-text-size) !important;
-      letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
+      letter-spacing: var(--sbb-letter-spacing-text) !important;
       font-family: var(--sbb-typo-font-family) !important;
       line-height: var(--sbb-typo-line-height-text) !important;
 

package/form-field.pure.js

@@ -1,4 +1,4 @@
-import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbElement as i,SbbLanguageController as a,SbbNegativeMixin as o,appendAriaElements as s,forceType as c,i18nClearInput as l,i18nRemainingCharacters as u,removeAriaElements as d,sbbInputModalityDetector as f,sbbLiveAnnouncer as p}from"./core.js";import{__esDecorate as m,__runInitializers as h}from"tslib";import{property as g,state as _}from"lit/decorators.js";import{SbbIconElement as v}from"./icon.pure.js";import{miniButtonStyle as y}from"./button.pure.js";var b=`:host{--_sbb-error-height:calc(var(--sbb-typo-line-height-text) * 1em);--sbb-icon-svg-width:var(--sbb-error-icon-size);--sbb-icon-svg-height:var(--sbb-error-icon-size);color:var(--sbb-error-color);min-height:var(--_sbb-error-height);font-size:var(--sbb-error-font-size);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);align-items:flex-start;display:flex}@media (forced-colors:active){:host{--sbb-error-color:LinkText!important}}:host([negative]){--sbb-error-color:var(--sbb-color-red85)}.error__icon{height:var(--_sbb-error-height);align-items:center;margin-inline-end:var(--sbb-spacing-fixed-1x);display:flex}.error-content{line-height:var(--sbb-typo-line-height-text);vertical-align:text-top}.error__icon-svg{stroke:currentColor;height:var(--_sbb-error-height)}
+import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbElement as i,SbbLanguageController as a,SbbNegativeMixin as o,appendAriaElements as s,forceType as c,i18nClearInput as l,i18nRemainingCharacters as u,removeAriaElements as d,sbbInputModalityDetector as f,sbbLiveAnnouncer as p}from"./core.js";import{__esDecorate as m,__runInitializers as h}from"tslib";import{property as g,state as _}from"lit/decorators.js";import{SbbIconElement as v}from"./icon.pure.js";import{miniButtonStyle as y}from"./button.pure.js";var b=`:host{--_sbb-error-height:calc(var(--sbb-typo-line-height-text) * 1em);--sbb-icon-svg-width:var(--sbb-error-icon-size);--sbb-icon-svg-height:var(--sbb-error-icon-size);color:var(--sbb-error-color);min-height:var(--_sbb-error-height);font-size:var(--sbb-error-font-size);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);align-items:flex-start;display:flex}@media (forced-colors:active){:host{--sbb-error-color:LinkText!important}}:host([negative]){--sbb-error-color:var(--sbb-color-red85)}.error__icon{height:var(--_sbb-error-height);align-items:center;margin-inline-end:var(--sbb-spacing-fixed-1x);display:flex}.error-content{line-height:var(--sbb-typo-line-height-text);vertical-align:text-top}.error__icon-svg{stroke:currentColor;height:var(--_sbb-error-height)}
 `,x=class extends o(i){static{this.elementName=`sbb-error`}static{this.styles=[n(b)]}connectedCallback(){super.connectedCallback();let e=this.closest?.(`sbb-form-field`);e&&(this.negative=e.hasAttribute(`negative`))}render(){return e`
       <span class="error__icon">
         <slot name="icon">
@@ -20,7 +20,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
       <span class="error-content">
         <slot></slot>
       </span>
-    `}},S=`:host{--sbb-form-field-hint-divider-width:var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start:var(--sbb-form-field-hint-divider-width);--sbb-form-field-select-inline-padding-end:calc(var(--sbb-icon-svg-width) + var(--sbb-form-field-gap));--sbb-form-field-label-size:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-text-line-height:calc(var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-margin-block-start:calc(( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(--sbb-form-field-text-line-height) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2);--sbb-icon-svg-width:var(--sbb-form-field-icon-size);--sbb-icon-svg-height:var(--sbb-form-field-icon-size);--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));color:var(--sbb-form-field-color);font-weight:400;line-height:var(--sbb-typo-line-height-text);display:inline-block}:host(:where(:not([width=collapse]))){width:min(18.75rem,100%);min-width:9.375rem}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color:var(--sbb-background-color-1-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5);--sbb-form-field-text-color:var(--sbb-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host([negative]){--sbb-form-field-border-color:ButtonBorder}}:host([size=s]){--sbb-form-field-min-height:var(--sbb-size-element-xs);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size:var(--sbb-text-font-size-s);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xxs);--_sbb-form-field-input-margin-block-end:-.125rem;--_sbb-form-field-label-to-input-overlapping:.625rem;--_sbb-form-field-floating-label-transform:.34375rem;--_sbb-form-field-spacer-margin-block-end:-.53125rem}@media (width>=64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping:.6875rem;--_sbb-form-field-floating-label-transform:.3125rem;--_sbb-form-field-spacer-margin-block-end:-.5rem}}:host([size=m]){--sbb-form-field-min-height:var(--sbb-size-element-m);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-form-field-min-height:var(--sbb-size-element-l);--sbb-form-field-padding-inline:var(--sbb-spacing-responsive-xxxs)}:host(:is([size=m],[size=l])){--sbb-form-field-input-text-size:var(--sbb-text-font-size-m);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xs);--_sbb-form-field-input-margin-block-end:0;--_sbb-form-field-label-to-input-overlapping:var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform:.53125rem;--_sbb-form-field-spacer-margin-block-end:calc(-1 * var(--_sbb-form-field-label-to-input-overlapping))}@media (width>=64rem){:host(:is([size=m],[size=l])){--_sbb-form-field-floating-label-transform:.65625rem}}:host([error-space=reserve]){--sbb-form-field-hint-min-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));--sbb-form-field-hint-padding-block-start-override:var(--sbb-form-field-hint-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color:var(--sbb-background-color-3);--sbb-form-field-border-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-form-field-arrow-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color:ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color:var(--sbb-background-color-3-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-arrow-color:var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm));--sbb-form-field-border-style:dashed}@media (forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:GrayText!important;--sbb-form-field-prefix-color:GrayText!important;--sbb-form-field-text-color:GrayText!important;--sbb-form-field-border-color:GrayText!important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color:var(--sbb-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color:var(--sbb-border-color-3);--sbb-form-field-prefix-color:var(--sbb-color-3);--sbb-form-field-border-width:var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color:var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color:Highlight;--sbb-form-field-prefix-color:Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-padding-block-start:0}:host([floating-label]){--sbb-select-placeholder-color:transparent}@media (forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color:Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size:0rem;--_sbb-form-field-label-to-input-overlapping:0rem}:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))){--sbb-form-field-overflow:visible}.sbb-form-field__space-wrapper{flex-direction:column;height:100%;display:flex}.sbb-form-field__space-wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-form-field__wrapper{gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);flex:1;display:flex;position:relative}.sbb-form-field__wrapper:before{content:"";border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none;display:block;position:absolute;inset:0}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset,var(--sbb-focus-outline-offset))}@media (forced-colors:none){:host(:is([borderless],:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:#0000}.sbb-form-field__wrapper:after{border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-border-block-end-inset-inline,var(--sbb-form-field-padding-inline));z-index:var(--sbb-form-field-focus-underline-z-index,initial);position:absolute;inset-block-end:0}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:""}}::slotted([slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted([slot=prefix]),::slotted([slot=suffix]){min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);display:flex}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear),:host(:is(:state(has-error),[state--has-error])) slot[name=hint],:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors:active){::slotted([slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;pointer-events:none;color:var(--sbb-form-field-arrow-color);margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);display:none;position:absolute;inset-inline-end:0;translate:0 -50%}:host(:is(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon{display:inline-block}.sbb-form-field__input-container{flex-direction:column;flex:auto;min-width:0;margin-block-start:var(--sbb-form-field-margin-block-start);display:flex;position:relative}.sbb-form-field__label-spacer{height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--_sbb-form-field-spacer-margin-block-end);display:flex}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sbb-form-field__label{max-width:100%;cursor:var(--sbb-cursor-default);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex;position:absolute;inset-block-start:0}:host(:where(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform, font-size;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media (forced-colors:active){:host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-form-field__input{flex:1;align-items:start;display:flex}:host(:is(:is(:state(input-element-input),[state--input-element-input]),:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input{margin-block-end:var(--_sbb-form-field-input-margin-block-end)}.sbb-form-field__hint{min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override,var(--sbb-form-field-hint-padding-block-start));margin-inline-start:var(--sbb-form-field-padding-inline);display:flex}
+    `}},S=`:host{--sbb-form-field-hint-divider-width:var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start:var(--sbb-form-field-hint-divider-width);--sbb-form-field-select-inline-padding-end:calc(var(--sbb-icon-svg-width) + var(--sbb-form-field-gap));--sbb-form-field-label-size:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-text-line-height:calc(var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-margin-block-start:calc(( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(--sbb-form-field-text-line-height) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2);--sbb-icon-svg-width:var(--sbb-form-field-icon-size);--sbb-icon-svg-height:var(--sbb-form-field-icon-size);--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));color:var(--sbb-form-field-color);font-weight:400;line-height:var(--sbb-typo-line-height-text);display:inline-block}:host(:where(:not([width=collapse]))){width:min(18.75rem,100%);min-width:9.375rem}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color:var(--sbb-background-color-1-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5);--sbb-form-field-text-color:var(--sbb-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host([negative]){--sbb-form-field-border-color:ButtonBorder}}:host([size=s]){--sbb-form-field-min-height:var(--sbb-size-element-xs);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size:var(--sbb-text-font-size-s);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xxs);--_sbb-form-field-input-margin-block-end:-.125rem;--_sbb-form-field-label-to-input-overlapping:.625rem;--_sbb-form-field-floating-label-transform:.34375rem;--_sbb-form-field-spacer-margin-block-end:-.53125rem}@media (width>=64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping:.6875rem;--_sbb-form-field-floating-label-transform:.3125rem;--_sbb-form-field-spacer-margin-block-end:-.5rem}}:host([size=m]){--sbb-form-field-min-height:var(--sbb-size-element-m);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-form-field-min-height:var(--sbb-size-element-l);--sbb-form-field-padding-inline:var(--sbb-spacing-responsive-xxxs)}:host(:is([size=m],[size=l])){--sbb-form-field-input-text-size:var(--sbb-text-font-size-m);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xs);--_sbb-form-field-input-margin-block-end:0;--_sbb-form-field-label-to-input-overlapping:var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform:.53125rem;--_sbb-form-field-spacer-margin-block-end:calc(-1 * var(--_sbb-form-field-label-to-input-overlapping))}@media (width>=64rem){:host(:is([size=m],[size=l])){--_sbb-form-field-floating-label-transform:.65625rem}}:host([error-space=reserve]){--sbb-form-field-hint-min-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));--sbb-form-field-hint-padding-block-start-override:var(--sbb-form-field-hint-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color:var(--sbb-background-color-3);--sbb-form-field-border-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-form-field-arrow-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color:ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color:var(--sbb-background-color-3-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-arrow-color:var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm));--sbb-form-field-border-style:dashed}@media (forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:GrayText!important;--sbb-form-field-prefix-color:GrayText!important;--sbb-form-field-text-color:GrayText!important;--sbb-form-field-border-color:GrayText!important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color:var(--sbb-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-smoke));--sbb-form-field-prefix-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color:var(--sbb-border-color-3);--sbb-form-field-prefix-color:var(--sbb-color-3);--sbb-form-field-border-width:var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color:var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color:Highlight;--sbb-form-field-prefix-color:Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-padding-block-start:0}:host([floating-label]){--sbb-select-placeholder-color:transparent}@media (forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color:Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size:0rem;--_sbb-form-field-label-to-input-overlapping:0rem}:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))){--sbb-form-field-overflow:visible}.sbb-form-field__space-wrapper{flex-direction:column;height:100%;display:flex}.sbb-form-field__space-wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-form-field__wrapper{gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);flex:1;display:flex;position:relative}.sbb-form-field__wrapper:before{content:"";border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none;display:block;position:absolute;inset:0}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset,var(--sbb-focus-outline-offset))}@media (forced-colors:none){:host(:is([borderless],:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:#0000}.sbb-form-field__wrapper:after{border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-border-block-end-inset-inline,var(--sbb-form-field-padding-inline));z-index:var(--sbb-form-field-focus-underline-z-index,initial);position:absolute;inset-block-end:0}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:""}}::slotted([slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted([slot=prefix]),::slotted([slot=suffix]){min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);display:flex}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear),:host(:is(:state(has-error),[state--has-error])) slot[name=hint],:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors:active){::slotted([slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;pointer-events:none;color:var(--sbb-form-field-arrow-color);margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);display:none;position:absolute;inset-inline-end:0;translate:0 -50%}:host(:is(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon{display:inline-block}.sbb-form-field__input-container{flex-direction:column;flex:auto;min-width:0;margin-block-start:var(--sbb-form-field-margin-block-start);display:flex;position:relative}.sbb-form-field__label-spacer{height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--_sbb-form-field-spacer-margin-block-end);display:flex}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sbb-form-field__label{max-width:100%;cursor:var(--sbb-cursor-default);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-letter-spacing-text);display:flex;position:absolute;inset-block-start:0}:host(:where(:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform, font-size;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media (forced-colors:active){:host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-form-field__input{flex:1;align-items:start;display:flex}:host(:is(:is(:state(input-element-input),[state--input-element-input]),:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input{margin-block-end:var(--_sbb-form-field-input-margin-block-end)}.sbb-form-field__hint{min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override,var(--sbb-form-field-hint-padding-block-start));margin-inline-start:var(--sbb-form-field-padding-inline);display:flex}
 `;let C=0;const w=new WeakMap,T=[`input`,`textarea`,`select`];var E=class extends Event{get control(){return this._control}constructor(e){super(`formfieldcontrol`),this._control=e}};let D=(()=>{let r=o(i),a,l=[],u=[],p,y=[],b=[],x,E=[],D=[],O,k=[],A=[],j,M=[],N=[],P,F=[],I=[],L,R=[],z=[],B,V=[],H=[],U,W=[],G=[],K,q=[],J=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[g({attribute:`error-space`,reflect:!0})],p=[g({reflect:!0})],x=[c(),g({reflect:!0,type:Boolean})],O=[g({reflect:!0})],j=[c(),g({attribute:`hidden-label`,reflect:!0,type:Boolean})],P=[c(),g({attribute:`floating-label`,reflect:!0,type:Boolean})],L=[_()],B=[_()],U=[_()],K=[_()],m(this,null,a,{kind:`accessor`,name:`errorSpace`,static:!1,private:!1,access:{has:e=>`errorSpace`in e,get:e=>e.errorSpace,set:(e,t)=>{e.errorSpace=t}},metadata:e},l,u),m(this,null,p,{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},y,b),m(this,null,x,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},E,D),m(this,null,O,{kind:`accessor`,name:`width`,static:!1,private:!1,access:{has:e=>`width`in e,get:e=>e.width,set:(e,t)=>{e.width=t}},metadata:e},k,A),m(this,null,j,{kind:`accessor`,name:`hiddenLabel`,static:!1,private:!1,access:{has:e=>`hiddenLabel`in e,get:e=>e.hiddenLabel,set:(e,t)=>{e.hiddenLabel=t}},metadata:e},M,N),m(this,null,P,{kind:`accessor`,name:`floatingLabel`,static:!1,private:!1,access:{has:e=>`floatingLabel`in e,get:e=>e.floatingLabel,set:(e,t)=>{e.floatingLabel=t}},metadata:e},F,I),m(this,null,L,{kind:`accessor`,name:`_errorElements`,static:!1,private:!1,access:{has:e=>`_errorElements`in e,get:e=>e._errorElements,set:(e,t)=>{e._errorElements=t}},metadata:e},R,z),m(this,null,B,{kind:`accessor`,name:`_hintElements`,static:!1,private:!1,access:{has:e=>`_hintElements`in e,get:e=>e._hintElements,set:(e,t)=>{e._hintElements=t}},metadata:e},V,H),m(this,null,U,{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:e},W,G),m(this,null,K,{kind:`accessor`,name:`_label`,static:!1,private:!1,access:{has:e=>`_label`in e,get:e=>e._label,set:(e,t)=>{e._label=t}},metadata:e},q,J),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-form-field`}static{this.elementDependencies=[v]}static{this.styles=[n(S)]}#e;get errorSpace(){return this.#e}set errorSpace(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get width(){return this.#r}set width(e){this.#r=e}#i;get hiddenLabel(){return this.#i}set hiddenLabel(e){this.#i=e}#a;get floatingLabel(){return this.#a}set floatingLabel(e){this.#a=e}#o;get _errorElements(){return this.#o}set _errorElements(e){this.#o=e}#s;get _hintElements(){return this.#s}set _hintElements(e){this.#s=e}#c;get _input(){return this.#c}set _input(e){this.#c=e}#l;get _label(){return this.#l}set _label(e){this.#l=e}get inputElement(){return this._input}get label(){return this._label}constructor(){super(),this._excludedFocusElements=[`button`,`sbb-popover`,`sbb-option`,`sbb-chip`],this._floatingLabelSupportedInputElements=[`input`,`select`,`textarea`,`sbb-select`],this._floatingLabelSupportedInputTypes=[`email`,`number`,`password`,`search`,`tel`,`text`,`url`],this.#e=h(this,l,`none`),this.#t=(h(this,u),h(this,y,null)),this.#n=(h(this,b),h(this,E,!1)),this.#r=(h(this,D),h(this,k,`default`)),this.#i=(h(this,A),h(this,M,!1)),this.#a=(h(this,N),h(this,F,!1)),this.#o=(h(this,I),h(this,R,[])),this.#s=(h(this,z),h(this,V,[])),this.#c=(h(this,H),h(this,W,null)),this.#l=(h(this,G),h(this,q,void 0)),this._formFieldAttributeObserver=(h(this,J),t?null:new MutationObserver(e=>{e.some(e=>e.type===`attributes`)&&this._input&&(this._readInputState(),this._registerInputFormListener(),this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinputattributechange`)))})),this._inputFormAbortController=new AbortController,this._control=null,this._previousType=null,this.addEventListener?.(`focusin`,e=>{(e.target===this.inputElement||e.target===this.inputElement?.inputElement)&&(this.internals.states.add(`focus`),this.internals.states.add(`focus-origin-${f.mostRecentModality}`))},{passive:!0}),this.addEventListener?.(`focusout`,e=>{if(e.target===this.inputElement||e.target===this.inputElement?.inputElement){this._checkAndUpdateInputEmpty(),this.internals.states.delete(`focus`);for(let e of this.internals.states)e.startsWith(`focus-origin-`)&&this.internals.states.delete(e)}},{passive:!0}),this.addEventListener(`input`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`displayvaluechange`,()=>this._checkAndUpdateInputEmpty()),this.addEventListener(`invalid`,e=>e.preventDefault(),{capture:!0}),this.addEventListener(`formfieldcontrol`,e=>{this._control=e.control,this._connectInputElement()===`unchanged`&&(this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty())})}connectedCallback(){super.connectedCallback(),this._assignSlots(),this._connectInputElement(),this._syncNegative(),this._syncSize()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncNegative(),e.has(`size`)&&this._syncSize()}disconnectedCallback(){super.disconnectedCallback(),this._formFieldAttributeObserver?.disconnect(),this._inputFormAbortController.abort(),(this._input?.localName===`input`||this._input?.localName===`textarea`)&&this._unpatchInputValue()}_handleWrapperClick(e){this._isElementFocusExcluded(e)||(this._control?.onContainerClick?this._control?.onContainerClick(e):e.target.localName!==`label`&&(this._input?.localName===`sbb-select`&&e.target.localName!==`sbb-select`&&this._input.click(),this._input?.focus()))}_isElementFocusExcluded(e){return e.composedPath().some(e=>e instanceof window.HTMLElement&&(e.getAttribute(`tabindex`)===`0`||e.hasAttribute(`contenteditable`))||this._excludedFocusElements.includes(e.localName))}_onSlotLabelChange(){let e=Array.from(this.querySelectorAll(`label`));this._label=e[0],this._syncLabelInputReferences()}_onSlotInputChange(){this._assignSlots(),this._connectInputElement()}_assignSlots(){this.querySelectorAll(`label:not([slot])`).forEach(e=>e.setAttribute(`slot`,`label`)),this.querySelectorAll(`sbb-error:not([slot])`).forEach(e=>e.setAttribute(`slot`,`error`))}_connectInputElement(){let e;if(this._control?.element)e=this._control.element;else if(this._control?.id)e=this.getRootNode().getElementById(this._control.id);else{let t=Array.from(this.querySelectorAll(`*:not([slot],sbb-chip-group)`));e=(t.find(e=>this._isInputElement(e))||t[0])??null}return e===this._input?`unchanged`:(this._input&&(this.internals.states.delete(`input-element-${this._input.localName}`),(this._input.localName===`input`||this._input.localName===`textarea`)&&this._unpatchInputValue()),e?(this._input=e,this._registerInputFormListener(),this._assignAriaDescribedByElements(),this._readInputState(),this._checkAndUpdateInputEmpty(),this._input.localName===`textarea`?(this._input.setAttribute(`rows`,this._input.getAttribute(`rows`)||`3`),this._patchInputValue()):this._input.localName===`input`?this._patchInputValue():(this._input.localName===`select`||this._input.localName===`sbb-select`)&&!this.hasUpdated&&this.hydrationComplete.then(()=>this.requestUpdate()),this._formFieldAttributeObserver?.disconnect(),this._formFieldAttributeObserver?.observe(this._input,{attributes:!0,attributeFilter:[`readonly`,`disabled`,`form`,`class`,`data-expanded`,`maxlength`]}),this.internals.states.add(`input-element-${this._input.localName}`),this._syncLabelInputReferences(),`changed`):(this._input=null,`no-input`))}_syncLabelInputReferences(){if(this._input&&this._label){if(T.includes(this._input.localName)||customElements.get(this._input.localName)?.formAssociated)this._input.id||=`sbb-form-field-input-${C++}`,this._label.htmlFor=this._input.id;else{this._label.id||=`sbb-form-field-label-${C++}`;let e=this._input.getAttribute(`aria-labelledby`)?.split(` `).filter(e=>!!e&&e!==this._label.id)??[];this._input.setAttribute(`aria-labelledby`,[...e,this._label.id].join(` `))}}}_isInputElement(e){return T.includes(e.localName)||!!customElements.get(e.localName)?.formAssociated}_readInputState(){this.toggleState(`readonly`,this._control?.readOnly??this._input.hasAttribute(`readonly`)),this.toggleState(`disabled`,this._control?.disabled??this._input.hasAttribute(`disabled`)),this.toggleState(`has-popup-open`,this._input.hasAttribute(`data-expanded`)),this.toggleState(`interacted`,!!this._control?.interacted),this.toggleState(`invalid`,!!this._control?.invalid),this._previousType&&this.internals.states.delete(`input-type-${this._previousType}`),this._previousType=this._control?.type??this._input.type??`text`,this.internals.states.add(`input-type-${this._previousType}`)}_registerInputFormListener(){this._inputFormAbortController.abort();let{signal:e}=this._inputFormAbortController=new AbortController;(this._input?.form??this._input?.closest(`form`))?.addEventListener(`reset`,()=>setTimeout(()=>this.reset()),{signal:e})}_patchInputValue(){let e=this._input;if(!e||w.has(e))return;let t=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),`value`);if(!t||!t.set||!t.get)return;w.set(e,t);let{get:n,set:r}=t,i=()=>{this._checkAndUpdateInputEmpty(),this.dispatchEvent(new Event(`ɵinput`))};Object.defineProperty(e,"value",{...t,get(){return n.call(this)},set(e){r.call(this,e),i()}})}_unpatchInputValue(){let e=this._input,t=w.get(e);t&&(Object.defineProperty(e,"value",t),w.delete(e))}_checkAndUpdateInputEmpty(){this.toggleState(`empty`,this._control?.empty??(((this._floatingLabelSupportedInputElements.includes(this._input?.localName)||this._input?.constructor?.formFieldAssociated)??!1)&&this._isInputEmpty()))}_isInputEmpty(){let e=this.querySelector(`sbb-chip-group`);return e?this._isInputValueEmpty()&&(Array.isArray(e.value)?e.value.length===0:!e.querySelector(`sbb-chip`)):this._input instanceof HTMLInputElement?this._floatingLabelSupportedInputTypes.includes(this._input.type)&&this._isInputValueEmpty():this._input instanceof HTMLSelectElement?this._input.selectedOptions?.item(0)?.label?.trim()===``:this._input?.localName===`sbb-select`?this._input.getDisplayValue?.()?.trim()===``:this._isInputValueEmpty()}_isInputValueEmpty(){let e=this._input.value;return[``,void 0,null].includes(e)||Array.isArray(e)&&e.length===0}_onSlotErrorChange(e){let t=e.target.assignedElements();this._input&&this._input.ariaDescribedByElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._errorElements??[],...this._hintElements??[])),this._errorElements=t;for(let e of this._errorElements)e.role||=`status`;this._assignAriaDescribedByElements(),this.toggleState(`has-error`,!!this._errorElements.length),this._syncNegative()}_onSlotHintChange(e){let t=e.target.assignedElements();this._input?.ariaDescribedByElements?.length&&this._hintElements?.length&&(this._input.ariaDescribedByElements=d(this._input.ariaDescribedByElements,...this._hintElements)),this._hintElements=t,this._assignAriaDescribedByElements(),this.toggleState(`has-hint`,!!this._hintElements.length),this._syncNegative()}_assignAriaDescribedByElements(){if(this._input){let e=this._errorElements.length?this._errorElements:this._hintElements;this._input.ariaDescribedByElements=s(this._input.ariaDescribedByElements,...e)}}reset(){this._checkAndUpdateInputEmpty()}clear(){this._input?.localName===`input`&&(this._input.value=``,this._checkAndUpdateInputEmpty())}_syncNegative(){this.querySelectorAll?.(`sbb-error,sbb-mini-button,sbb-mini-button-link,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group,sbb-hint,sbb-form-field-text-counter`).forEach(e=>e.toggleAttribute(`negative`,this.negative))}_syncSize(){this.querySelectorAll?.(`sbb-autocomplete,sbb-autocomplete-grid,sbb-select`).forEach(e=>e.size=this.size===`l`?`m`:this.size)}render(){return e`
       <div class="sbb-form-field__space-wrapper">
         ${``}
@@ -49,7 +49,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
           <slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
         </div>
       </div>
-    `}}})();var O=class extends o(r){static{this.elementName=`sbb-form-field-clear`}static{this.elementDependencies=[v]}static{this.styles=[y]}constructor(){super(),this._language=new a(this),this.addEventListener?.(`click`,()=>this._handleClick())}connectedCallback(){super.connectedCallback(),this._formField=this.closest(`sbb-form-field`),this._formField&&(this.slot||=`suffix`,this.negative=this._formField.hasAttribute(`negative`))}async _handleClick(){let e=this._formField?.inputElement;e&&e.localName===`input`&&(this._formField?.clear(),e.focus(),e.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),e.dispatchEvent(new Event(`change`,{bubbles:!0})))}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=l[this._language.current]}renderTemplate(){return e`<sbb-icon name="cross-small"></sbb-icon>`}},k=`:host{--sbb-form-field-hint-font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-texts);display:inline-block}:host([negative]){--sbb-form-field-label-color:var(--sbb-color-5)}
+    `}}})();var O=class extends o(r){static{this.elementName=`sbb-form-field-clear`}static{this.elementDependencies=[v]}static{this.styles=[y]}constructor(){super(),this._language=new a(this),this.addEventListener?.(`click`,()=>this._handleClick())}connectedCallback(){super.connectedCallback(),this._formField=this.closest(`sbb-form-field`),this._formField&&(this.slot||=`suffix`,this.negative=this._formField.hasAttribute(`negative`))}async _handleClick(){let e=this._formField?.inputElement;e&&e.localName===`input`&&(this._formField?.clear(),e.focus(),e.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),e.dispatchEvent(new Event(`change`,{bubbles:!0})))}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=l[this._language.current]}renderTemplate(){return e`<sbb-icon name="cross-small"></sbb-icon>`}},k=`:host{--sbb-form-field-hint-font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-hint-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-texts);display:inline-block}:host([negative]){--sbb-form-field-label-color:var(--sbb-color-5)}
 `,A=class extends o(i){constructor(){super(...arguments),this.formField=null}static{this.elementName=`sbb-hint`}static{this.styles=[n(k)]}connectedCallback(){super.connectedCallback(),this.slot||=`hint`,this.formField=this.closest?.(`sbb-form-field`),this.negative=this.formField?.hasAttribute(`negative`)??!1}render(){return e`<slot></slot>`}};const j=[100,50,25,10,0];let M=(()=>{let t=A,n,r=[],i=[];return class extends t{constructor(){super(...arguments),this.#e=h(this,r,0),this._language=(h(this,i),new a(this)),this._abortController=null}static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;n=[_()],m(this,null,n,{kind:`accessor`,name:`_remainingCharacters`,static:!1,private:!1,access:{has:e=>`_remainingCharacters`in e,get:e=>e._remainingCharacters,set:(e,t)=>{e._remainingCharacters=t}},metadata:e},r,i),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-form-field-text-counter`}#e;get _remainingCharacters(){return this.#e}set _remainingCharacters(e){this.#e=e}connectedCallback(){super.connectedCallback(),this.internals.ariaHidden=`true`,this._abortController?.abort(),this._abortController=new AbortController,this.formField&&(this.formField.addEventListener(`ɵinput`,()=>this._onInputUpdate(),{signal:this._abortController.signal}),this.formField.addEventListener(`input`,()=>this._onInputUpdate(),{signal:this._abortController.signal}),this.formField.addEventListener(`ɵinputattributechange`,()=>this._onInputUpdate(),{signal:this._abortController.signal}),this.formField.addEventListener(`focusin`,e=>{e.target===this.formField?.inputElement&&(this.internals.ariaLabel=this._infoText())},{signal:this._abortController.signal}),this._onInputUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}_onInputUpdate(){let e=this.formField?.inputElement;if(!e)return;let t=e.maxLength??0,n=e.value?.length??0;this._remainingCharacters=Math.max(t-n,0),[...j.map(e=>Math.round(e/100*t))].includes(this._remainingCharacters)&&p.announce(this._infoText())}_infoText(){return`${this._remainingCharacters} ${u[this._language.current]}`}render(){return e`${this._remainingCharacters}<slot>
         ${u[this._language.current]}</slot
       >`}}})();export{x as SbbErrorElement,O as SbbFormFieldClearElement,E as SbbFormFieldControlEvent,D as SbbFormFieldElement,M as SbbFormFieldTextCounterElement,A as SbbHintElement};

package/header/_header.global.scss

@@ -97,11 +97,11 @@ $theme: 'standard' !default;
     align-items: baseline;
     color: var(--sbb-color-1);
     font-size: var(--sbb-text-font-size-xs);
-    letter-spacing: var(--sbb-typo-letter-spacing-text);
+    letter-spacing: var(--sbb-letter-spacing-text);
 
     strong + * {
       font-size: var(--sbb-text-font-size-xxs);
-      letter-spacing: var(--sbb-typo-letter-spacing-text);
+      letter-spacing: var(--sbb-letter-spacing-text);
       color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
     }
   }

package/header.pure.js

@@ -1,4 +1,4 @@
-import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a,state as o}from"lit/decorators.js";import{html as s}from"lit/static-html.js";import{SbbButtonBaseElement as c,SbbElement as l,SbbFocusVisibleWithinController as u,SbbLinkBaseElement as d,SbbPropertyWatcherController as f,forceType as p,idReference as m,queueDomContentLoaded as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";import{MutationController as _}from"@lit-labs/observers/mutation-controller.js";var v=`:host{--sbb-header-action-active-border-margin-inline:var(--sbb-header-action-padding-inline);--sbb-header-action-min-width:var(--sbb-header-action-min-height);--sbb-header-action-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--_sbb-header-first-item-padding-shift:calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-margin-inline-start:calc(var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift));display:inline-block;outline:none!important}@media (any-hover:hover){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color:var(--sbb-background-color-3);--sbb-header-action-translate-y:-.0625rem;--sbb-header-action-background-inset:calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color:Highlight}}:host(:is(:state(size-s),[state--size-s])){--sbb-header-action-min-height:var(--sbb-header-action-min-height-s);--sbb-header-action-padding-inline:var(--sbb-header-action-padding-inline-s)}:host(:is(:state(size-m),[state--size-m])){--sbb-header-action-min-height:var(--sbb-header-action-min-height-m);--sbb-header-action-padding-inline:var(--sbb-header-action-padding-inline-m)}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color:var(--sbb-background-color-4)}@media (forced-colors:active){:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color:Highlight}}:host(.sbb-active){--sbb-header-action-active-border-scale:1}@media (forced-colors:active){:host(.sbb-active){--sbb-header-action-border-color:Highlight}:host(:is(:state(button),[state--button])){--sbb-header-action-color:ButtonText}}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))){--sbb-header-first-item-margin-inline-start:var(--_sbb-header-first-item-padding-shift)}.sbb-action-base{color:var(--sbb-header-action-color);min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero,var(--sbb-header-action-padding-inline));cursor:var(--sbb-cursor-pointer);user-select:none;outline:none;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--sbb-header-action-background-inset,0);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color);transition-property:inset,background-color;position:absolute}@media (forced-colors:active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}: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)}.sbb-action-base:after{content:"";border-block-end:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale,0);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);position:absolute}.sbb-header-action__wrapper{align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y,0));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%;display:flex}.sbb-header-action__icon{--sbb-icon-svg-stroke-color:currentcolor;--sbb-icon-svg-stroke-width:1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon{display:none}.sbb-header-action__text{white-space:nowrap;text-overflow:ellipsis;font-weight:700;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);display:block;overflow:hidden}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{display:none}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}@media (width<=37.4375rem){:host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=63.9375rem){:host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=89.9375rem){:host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=98.9375rem){:host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}::slotted([slot=icon]:is(sbb-image,img)){width:var(--sbb-header-action-icon-dimension);height:var(--sbb-header-action-icon-dimension);border-radius:var(--sbb-border-radius-infinity)}
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a,state as o}from"lit/decorators.js";import{html as s}from"lit/static-html.js";import{SbbButtonBaseElement as c,SbbElement as l,SbbFocusVisibleWithinController as u,SbbLinkBaseElement as d,SbbPropertyWatcherController as f,forceType as p,idReference as m,queueDomContentLoaded as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";import{MutationController as _}from"@lit-labs/observers/mutation-controller.js";var v=`:host{--sbb-header-action-active-border-margin-inline:var(--sbb-header-action-padding-inline);--sbb-header-action-min-width:var(--sbb-header-action-min-height);--sbb-header-action-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--_sbb-header-first-item-padding-shift:calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-margin-inline-start:calc(var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift));display:inline-block;outline:none!important}@media (any-hover:hover){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color:var(--sbb-background-color-3);--sbb-header-action-translate-y:-.0625rem;--sbb-header-action-background-inset:calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color:Highlight}}:host(:is(:state(size-s),[state--size-s])){--sbb-header-action-min-height:var(--sbb-header-action-min-height-s);--sbb-header-action-padding-inline:var(--sbb-header-action-padding-inline-s)}:host(:is(:state(size-m),[state--size-m])){--sbb-header-action-min-height:var(--sbb-header-action-min-height-m);--sbb-header-action-padding-inline:var(--sbb-header-action-padding-inline-m)}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color:var(--sbb-background-color-4)}@media (forced-colors:active){:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color:Highlight}}:host(.sbb-active){--sbb-header-action-active-border-scale:1}@media (forced-colors:active){:host(.sbb-active){--sbb-header-action-border-color:Highlight}:host(:is(:state(button),[state--button])){--sbb-header-action-color:ButtonText}}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))){--sbb-header-first-item-margin-inline-start:var(--_sbb-header-first-item-padding-shift)}.sbb-action-base{color:var(--sbb-header-action-color);min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero,var(--sbb-header-action-padding-inline));cursor:var(--sbb-cursor-pointer);user-select:none;outline:none;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--sbb-header-action-background-inset,0);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color);transition-property:inset,background-color;position:absolute}@media (forced-colors:active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}: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)}.sbb-action-base:after{content:"";border-block-end:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale,0);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);position:absolute}.sbb-header-action__wrapper{align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y,0));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%;display:flex}.sbb-header-action__icon{--sbb-icon-svg-stroke-color:currentcolor;--sbb-icon-svg-stroke-width:1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon{display:none}.sbb-header-action__text{white-space:nowrap;text-overflow:ellipsis;font-weight:700;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);display:block;overflow:hidden}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{display:none}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}@media (width<=37.4375rem){:host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([hide-label-below=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=63.9375rem){:host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([hide-label-below=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=89.9375rem){:host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([hide-label-below=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=98.9375rem){:host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([hide-label-below=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}::slotted([slot=icon]:is(sbb-image,img)){width:var(--sbb-header-action-icon-dimension);height:var(--sbb-header-action-icon-dimension);border-radius:var(--sbb-border-radius-infinity)}
 `;const y=n=>(()=>{let r=g(n),o,c=[],l=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;o=[a({attribute:`hide-label-below`,reflect:!0})],e(this,null,o,{kind:`accessor`,name:`hideLabelBelow`,static:!1,private:!1,access:{has:e=>`hideLabelBelow`in e,get:e=>e.hideLabelBelow,set:(e,t)=>{e.hideLabelBelow=t}},metadata:t},c,l),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[i(v)]}#e;get hideLabelBelow(){return this.#e}set hideLabelBelow(e){this.#e=e}constructor(){super(),this.#e=t(this,c,null),this._previousSize=(t(this,l),null),this.addController(new f(this,()=>this.closest(`sbb-header`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size??null,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}renderTemplate(){return s`
         <span class="sbb-header-action__wrapper">
           <span class="sbb-header-action__icon"> ${super.renderIconSlot()} </span>
@@ -6,7 +6,7 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
             <slot></slot>
           </span>
         </span>
-      `}}})();var b=class extends y(c){static{this.elementName=`sbb-header-button`}},x=`:host{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset-block-start:0;inset-inline-end:0}:host(:dir(rtl)){--sbb-header-environment-rotate:-45deg}:host(:is(:state(env-dev),[state--env-dev])){--sbb-header-environment-background-color:var(--sbb-color-orange)}:host(:is(:state(env-edu),[state--env-edu])){--sbb-header-environment-background-color:var(--sbb-color-green)}:host(:is(:state(env-int),[state--env-int])),:host(:is(:state(env-inte),[state--env-inte])){--sbb-header-environment-background-color:var(--sbb-color-granite)}:host(:is(:state(env-loc),[state--env-loc])){--sbb-header-environment-background-color:var(--sbb-color-pink)}:host(:is(:state(env-test),[state--env-test])){--sbb-header-environment-background-color:var(--sbb-color-sky)}:host:before{content:"";border-block-start:var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);border-inline-start:var(--sbb-header-environment-size) solid transparent}.sbb-header-environment__text{color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x);position:absolute}
+      `}}})();var b=class extends y(c){static{this.elementName=`sbb-header-button`}},x=`:host{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-letter-spacing-text);justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset-block-start:0;inset-inline-end:0}:host(:dir(rtl)){--sbb-header-environment-rotate:-45deg}:host(:is(:state(env-dev),[state--env-dev])){--sbb-header-environment-background-color:var(--sbb-color-orange)}:host(:is(:state(env-edu),[state--env-edu])){--sbb-header-environment-background-color:var(--sbb-color-green)}:host(:is(:state(env-int),[state--env-int])),:host(:is(:state(env-inte),[state--env-inte])){--sbb-header-environment-background-color:var(--sbb-color-granite)}:host(:is(:state(env-loc),[state--env-loc])){--sbb-header-environment-background-color:var(--sbb-color-pink)}:host(:is(:state(env-test),[state--env-test])){--sbb-header-environment-background-color:var(--sbb-color-sky)}:host:before{content:"";border-block-start:var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);border-inline-start:var(--sbb-header-environment-size) solid transparent}.sbb-header-environment__text{color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x);position:absolute}
 `,S=class extends l{static{this.elementName=`sbb-header-environment`}static{this.styles=[i(x)]}constructor(){super(),this._env=null,this.addController(new _(this,{config:{characterData:!0,subtree:!0},callback:()=>{this._slottedTextChange()}}))}_slottedTextChange(){this._env&&this.internals.states.delete(`env-${this._env}`),this._env=this.textContent?.trim()??``,this._env&&this.internals.states.add(`env-${this._env}`)}render(){return n`
       <span class="sbb-header-environment__text">
         <slot></slot>