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

package/development/autocomplete.pure.js

@@ -1,9 +1,9 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
-import { html, isServer, nothing, unsafeCSS } from "lit";
+import { html, isServer, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
-import { SbbActionBaseElement, SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, forceType, getNextElementIndex, idReference, isAndroid, isEventOnElement, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, scrollbarStyles, setAriaComboBoxAttributes, setOverlayPosition } from "./core.js";
+import { SbbActionBaseElement, SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbLanguageController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, appendAriaElements, forceType, getNextElementIndex, i18nAutocompleteActionsHint, i18nButton, idReference, isAndroid, isEventOnElement, isIOS, isMacOS, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, sbbLiveAnnouncer, scrollbarStyles, setOverlayPosition } from "./core.js";
 import { optionPanelStyles } from "./option.pure.js";
 import { miniButtonStyle } from "./button.pure.js";
 import { SbbIconNameMixin } from "./icon.pure.js";
@@ -12,11 +12,6 @@ import { SbbIconNameMixin } from "./icon.pure.js";
 var autocomplete_base_element_default = ":host {\n  display: none;\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  display: block;\n}\n";
 
 // src/elements/autocomplete/autocomplete/autocomplete-base-element.ts
-/**
-* On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
-* On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
-*/
-const ariaRoleOnHost$1 = isSafari;
 var SbbInputAutocompleteEvent = class extends Event {
 	get option() {
 		return this._option;
@@ -34,6 +29,7 @@ var SbbInputAutocompleteEvent = class extends Event {
 *
 * @event {Event} change - The change event is fired on the autocomplete's trigger when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
 * @event {InputEvent} input - The input event fires  on the autocomplete's trigger when the value has been changed as a direct result of a user action.
+* @deprecated Will be inlined into autocompelte with next major release.
 */
 let SbbAutocompleteBaseElement = (() => {
 	let _classSuper = SbbNegativeMixin(SbbOpenCloseBaseElement);
@@ -366,8 +362,9 @@ let SbbAutocompleteBaseElement = (() => {
 		get triggerElement() {
 			return this._triggerElement ?? null;
 		}
+		/** @deprecated **/
 		get overlayId() {
-			return `${this.id}-overlay`;
+			return this.id;
 		}
 		constructor() {
 			super();
@@ -382,6 +379,8 @@ let SbbAutocompleteBaseElement = (() => {
 			this.#requireSelection_accessor_storage = (__runInitializers(this, _autoSelectActiveOptionOnBlur_extraInitializers), __runInitializers(this, _requireSelection_initializers, false));
 			this.#position_accessor_storage = (__runInitializers(this, _requireSelection_extraInitializers), __runInitializers(this, _position_initializers, "auto"));
 			this._triggerElement = __runInitializers(this, _position_extraInitializers);
+			/** @deprecated **/
+			this.generatedId = "";
 			this.activeOption = null;
 			this.pendingAutoSelectedOption = null;
 			this._resizeObserver = new ResizeController(this, {
@@ -458,7 +457,7 @@ let SbbAutocompleteBaseElement = (() => {
 		connectedCallback() {
 			this.popover = "manual";
 			super.connectedCallback();
-			this.id ||= this.generatedId;
+			this.tabIndex = -1;
 			if (this.hasUpdated) this._componentSetup();
 			this.syncNegative();
 		}
@@ -536,7 +535,9 @@ let SbbAutocompleteBaseElement = (() => {
 				if (this._optionsCount > 0 && this.options.length === 0) this.close();
 			} else if (document?.activeElement === this.triggerElement && this._optionsCount === 0 && this.options.length > 0) this.open();
 			this._optionsCount = this.options.length;
+			this.handleOptionChange();
 		}
+		handleOptionChange() {}
 		_setNextActiveOptionIfAutoActiveFirstOption() {
 			if (this.autoActiveFirstOption) {
 				this.resetActiveElement();
@@ -680,9 +681,6 @@ let SbbAutocompleteBaseElement = (() => {
       <div class="sbb-option-panel__overlay-container">
         <div
           class="sbb-option-panel__overlay ${this.negative ? "sbb-scrollbar-negative" : "sbb-scrollbar"}"
-          role=${!ariaRoleOnHost$1 ? this.panelRole : nothing}
-          id=${!ariaRoleOnHost$1 ? this.overlayId : nothing}
-          tabindex="-1"
           @animationend=${this._onAnimationEnd}
           ${ref((overlayRef) => this._overlay = overlayRef)}
         >
@@ -705,7 +703,7 @@ var SbbAutocompleteButtonElement = class extends SbbDisabledMixin(SbbNegativeMix
 		this.elementName = "sbb-autocomplete-button";
 	}
 	static {
-		this.role = "button";
+		this.role = isSafari ? "button" : "option";
 	}
 	static {
 		this.styles = [miniButtonStyle];
@@ -720,7 +718,14 @@ var SbbAutocompleteButtonElement = class extends SbbDisabledMixin(SbbNegativeMix
 	}
 	constructor() {
 		super();
+		this._languageController = new SbbLanguageController(this);
 		this.internals.states.add("button");
+		if (!isSafari) {
+			this.internals.ariaRoleDescription = "";
+			const updateDescription = () => this.internals.ariaDescription = i18nButton[this._languageController.current];
+			updateDescription();
+			this._languageController.withHandler(updateDescription);
+		}
 		if (!isServer) {
 			this.setupBaseEventHandlers();
 			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-optgroup"), { disabled: () => this._updateInternals() }));
@@ -733,6 +738,18 @@ var SbbAutocompleteButtonElement = class extends SbbDisabledMixin(SbbNegativeMix
 	*/
 	setActive(value) {
 		this.toggleState("focus-visible", value);
+		if (value && isSafari && isMacOS) {
+			const output = [];
+			if (this.ariaLabel) output.push(this.ariaLabel);
+			else if (this.ariaLabelledByElements?.length) output.push(this._textContent(this.ariaLabelledByElements));
+			if (this.ariaDescription) output.push(this.ariaDescription);
+			else if (this.ariaDescribedByElements?.length) output.push(this._textContent(this.ariaDescribedByElements));
+			output.push(i18nButton[this._languageController.current]);
+			sbbLiveAnnouncer.announce(output.join(", "), "assertive");
+		}
+	}
+	_textContent(elements) {
+		return elements?.map((el) => el.textContent.trim().replace(/\.$/, "")).join(". ") ?? "";
 	}
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
@@ -772,26 +789,42 @@ var SbbAutocompleteRowElement = class extends SbbElement {
 	static {
 		this.elementName = "sbb-autocomplete-row";
 	}
+	static {
+		this.role = "group";
+	}
 	static {
 		this.styles = [unsafeCSS(autocomplete_row_default)];
 	}
 	constructor() {
 		super();
+		this._languageController = new SbbLanguageController(this).withHandler(() => this._updateAriaDescription());
 		this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete"), { negative: (e) => this.toggleState("negative", e.negative) }));
 		this.addController(new SbbPropertyWatcherController(this, () => this.querySelector("sbb-option"), { disabled: (e) => this.toggleState("disabled", e.disabled) }));
 	}
+	_updateAriaDescription() {
+		if (isIOS || isAndroid) return;
+		const hasButton = !!this.querySelector("sbb-autocomplete-button");
+		const option = this.querySelector("sbb-option");
+		if (!option) return;
+		if (!option["internals"]) customElements.upgrade(option);
+		if (hasButton) option["internals"].ariaDescription = i18nAutocompleteActionsHint[this._languageController.current];
+		else if (!hasButton && option["internals"].ariaDescription) option["internals"].ariaDescription = null;
+		if (isSafari) {
+			if (hasButton && (!option.ariaDescription || this._assignedDescription && option.ariaDescription === this._assignedDescription && option.ariaDescription !== i18nAutocompleteActionsHint[this._languageController.current])) {
+				option.ariaDescription = i18nAutocompleteActionsHint[this._languageController.current];
+				this._assignedDescription = option.ariaDescription;
+			} else if (!hasButton && this._assignedDescription && option.ariaDescription === this._assignedDescription) {
+				option.ariaDescription = null;
+				this._assignedDescription = void 0;
+			}
+		}
+	}
 	render() {
-		return html`<slot></slot>`;
+		return html`<slot @slotchange=${this._updateAriaDescription}></slot>`;
 	}
 };
 
 // src/elements/autocomplete/autocomplete/autocomplete.component.ts
-let nextId = 0;
-/**
-* On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
-* On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
-*/
-const ariaRoleOnHost = isSafari;
 /**
 * Combined with a native input, it displays a panel with a list of available options.
 *
@@ -806,8 +839,6 @@ const ariaRoleOnHost = isSafari;
 var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
 	constructor() {
 		super(...arguments);
-		this.generatedId = `sbb-autocomplete-${++nextId}`;
-		this.panelRole = "listbox";
 		/** Index of the active element within the active option's row (0 = option, >0 = a button). */
 		this._activeColumnIndex = 0;
 	}
@@ -815,7 +846,7 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
 		this.elementName = "sbb-autocomplete";
 	}
 	static {
-		this.role = ariaRoleOnHost ? "listbox" : null;
+		this.role = "listbox";
 	}
 	get options() {
 		return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
@@ -866,6 +897,19 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
 		if (event) event.preventDefault();
 		if (this.autoSelectActiveOption && event) this.setPendingSelection(this.activeOption);
 	}
+	handleOptionChange() {
+		const options = this.options;
+		const optionsCount = `${options.length}`;
+		let position = 1;
+		for (const option of options) {
+			const buttons = Array.from(option.closest("sbb-autocomplete-row")?.querySelectorAll("sbb-autocomplete-button") ?? []);
+			for (const element of [option, ...buttons]) {
+				element["internals"].ariaSetSize = optionsCount;
+				element["internals"].ariaPosInSet = `${position}`;
+			}
+			position++;
+		}
+	}
 	/**
 	* Moves the active element horizontally within the active option's `sbb-autocomplete-row`,
 	* between the option itself and its `sbb-autocomplete-button`s.
@@ -900,7 +944,13 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
 		if (this.triggerElement) this.triggerElement.ariaActiveDescendantElement = null;
 	}
 	setTriggerAttributes(element) {
-		setAriaComboBoxAttributes(element, ariaRoleOnHost ? this.id : this.overlayId, false);
+		if (!element) return;
+		element.autocomplete = "off";
+		element.role = "combobox";
+		element.ariaAutoComplete = "list";
+		element.ariaHasPopup = "listbox";
+		element.ariaControlsElements = appendAriaElements(element.ariaControlsElements, this);
+		element.ariaExpanded = "false";
 	}
 };
 

package/development/button.pure.js

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

package/development/core/controllers/language-controller.d.ts

@@ -23,7 +23,10 @@ export declare class SbbLanguageController implements ReactiveController {
     private _previousLanguage?;
     private _handlers;
     constructor(_host: ReactiveControllerHost);
-    /** Add a language change handler. */
+    /**
+     * Add a language change handler.
+     * TODO: Refactor to EventTarget.
+     */
     withHandler(handler: () => void): this;
     hostConnected(): void;
     hostDisconnected(): void;

package/development/core/i18n/i18n.d.ts

@@ -106,3 +106,5 @@ export declare const i18nSlide: Record<string, string>;
 export declare const i18nRemainingCharacters: Record<string, string>;
 export declare const i18nLogo125Anniversary: Record<string, string>;
 export declare const i18nLogo125AnniversaryYears: Record<string, string>;
+export declare const i18nButton: Record<string, string>;
+export declare const i18nAutocompleteActionsHint: Record<string, string>;

package/development/core/overlay/overlay-trigger-attributes.d.ts

@@ -9,9 +9,11 @@ export declare function setAriaOverlayTriggerProperties(overlay: HTMLElement, tr
 export declare function removeAriaOverlayTriggerProperties(trigger: HTMLElement | null | undefined): void;
 /**
  * Add meaningful aria attributes to trigger element of role='combobox'
+ * @deprecated
  */
 export declare function setAriaComboBoxAttributes(trigger: HTMLElement, overlayId: string, expanded: boolean, hasPopup?: 'listbox' | 'grid'): void;
 /**
  * Remove aria attributes from trigger elements.
+ * @deprecated
  */
 export declare function removeAriaComboBoxAttributes(trigger?: HTMLElement | null): void;

package/development/core.js

@@ -1629,7 +1629,10 @@ var SbbLanguageController = class SbbLanguageController {
 		this._handlers = [];
 		this._host.addController(this);
 	}
-	/** Add a language change handler. */
+	/**
+	* Add a language change handler.
+	* TODO: Refactor to EventTarget.
+	*/
 	withHandler(handler) {
 		this._handlers.unshift(handler);
 		return this;
@@ -2473,6 +2476,18 @@ const i18nLogo125AnniversaryYears = {
 	fr: "ans",
 	it: "anni"
 };
+const i18nButton = {
+	de: "Schaltfläche",
+	en: "Button",
+	fr: "Bouton",
+	it: "Pulsante"
+};
+const i18nAutocompleteActionsHint = {
+	de: "Drücken Sie Pfeil links oder rechts für verfügbare Aktionen",
+	en: "Press arrow left or right for available actions",
+	fr: "Appuyez sur les flèches gauche ou droite pour les actions disponibles",
+	it: "Usare i tasti freccia destra o sinistra per le azioni disponibili"
+};
 
 // src/elements/core/base-elements/link-base-element.ts
 /** Link base class. */
@@ -6286,7 +6301,7 @@ const sbbOverlayOutsidePointerEventListener = new SbbOverlayOutsidePointerEventL
 function setAriaOverlayTriggerProperties(overlay, trigger, popupType, state) {
 	if (!trigger) return;
 	trigger.ariaHasPopup = popupType;
-	trigger.ariaControlsElements = [overlay];
+	trigger.ariaControlsElements = appendAriaElements(trigger.ariaControlsElements, overlay);
 	trigger.ariaExpanded = `${state === "opening" || state === "opened"}`;
 }
 /**
@@ -6300,6 +6315,7 @@ function removeAriaOverlayTriggerProperties(trigger) {
 }
 /**
 * Add meaningful aria attributes to trigger element of role='combobox'
+* @deprecated
 */
 function setAriaComboBoxAttributes(trigger, overlayId, expanded, hasPopup = "listbox") {
 	if (!trigger) return;
@@ -6308,11 +6324,11 @@ function setAriaComboBoxAttributes(trigger, overlayId, expanded, hasPopup = "lis
 	trigger.setAttribute("aria-autocomplete", "list");
 	trigger.setAttribute("aria-haspopup", hasPopup);
 	trigger.setAttribute("aria-controls", overlayId);
-	trigger.setAttribute("aria-owns", overlayId);
 	trigger.setAttribute("aria-expanded", `${expanded}`);
 }
 /**
 * Remove aria attributes from trigger elements.
+* @deprecated
 */
 function removeAriaComboBoxAttributes(trigger) {
 	if (!trigger) return;
@@ -6321,8 +6337,7 @@ function removeAriaComboBoxAttributes(trigger) {
 	trigger.removeAttribute("aria-autocomplete");
 	trigger.removeAttribute("aria-haspopup");
 	trigger.removeAttribute("aria-controls");
-	trigger.removeAttribute("aria-owns");
 	trigger.removeAttribute("aria-expanded");
 }
 
-export { DateAdapter, FORMAT_DATE, FRIDAY, ISO8601_FORMAT_DATE, IS_FOCUSABLE_QUERY, InteractivityChecker, IsFocusableConfig, MONDAY, NativeDateAdapter, SATURDAY, SEPARATORLESS_FORMAT_DATE, SUNDAY, SbbActionBaseElement, SbbAnimationCompleteMixin, SbbButtonBaseElement, SbbButtonLikeBaseElement, SbbDarkModeController, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbElement, SbbEscapableOverlayController, SbbFocusTrapController, SbbFocusVisibleWithinController, SbbFormAssociatedCheckboxMixin, SbbFormAssociatedInputMixin, SbbFormAssociatedMixin, SbbFormAssociatedRadioButtonMixin, SbbIdReferenceController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbLiveAnnouncer, SbbMediaMatcherController, SbbMediaQueryBreakpointLargeAndAbove, SbbMediaQueryBreakpointLargeAndBelow, SbbMediaQueryBreakpointSmallAndAbove, SbbMediaQueryBreakpointSmallAndBelow, SbbMediaQueryBreakpointUltraAndAbove, SbbMediaQueryBreakpointZeroAndAbove, SbbMediaQueryDarkMode, SbbMediaQueryForcedColors, SbbMediaQueryHover, SbbMediaQueryPointerCoarse, SbbNamedSlotListMixin, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbOverlayOutsidePointerEventListener, SbbOverlayPositionController, SbbPanelMixin, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbScrollController, SbbScrollHandler, SbbSelectionGroupBaseElement, SbbSelectionPanelMixin, SbbSlottedChangeEvent, SbbUpdateSchedulerMixin, THURSDAY, TUESDAY, TemporalDateAdapter, WEDNESDAY, appendAriaElements, buttonResetStyles, containsPierceShadowDom, defaultDateAdapter, forceType, forwardEvent, getElementPosition, getElementPositionHorizontal, getElementRectangle, getEventTarget, getNextElementIndex, getOverride, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nArrival, i18nBlockedPassage, i18nBreadcrumbEllipsisButtonLabel, i18nCalendarDateSelection, i18nCalendarWeekNumber, i18nCarouselArrowsNavigationHint, i18nCarouselItemAriaLabel, i18nCheckboxRequired, i18nChipDelete, i18nChipGroupInputDescription, i18nClass, i18nClearInput, i18nCloseAlert, i18nCloseDialog, i18nCloseNavigation, i18nCloseNotification, i18nClosePopover, i18nCloseSidebar, i18nClosedCompartmentLabel, i18nCollapsed, i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo, i18nCouchetteWagonLabel, i18nDateChangedTo, i18nDateInvalid, i18nDateMax, i18nDateMin, i18nDatePickerPlaceholder, i18nDeparture, i18nDialog, i18nDirection, i18nDownload, i18nDurationDay, i18nDurationHour, i18nDurationMinute, i18nExpanded, i18nFileSelectorButtonLabel, i18nFileSelectorButtonLabelMultiple, i18nFileSelectorCurrentlySelected, i18nFileSelectorDeleteFile, i18nFileSelectorSubtitleLabel, i18nFileSelectorSubtitleLabelMultiple, i18nFlipCard, i18nFromPlatform, i18nGoBack, i18nInputRequired, i18nItemsPerPage, i18nLocomotiveLabel, i18nLogo125Anniversary, i18nLogo125AnniversaryYears, i18nMapContainerButtonLabel, i18nMeansOfTransport, i18nMultipleSelectionPossible, i18nNew, i18nNextDay, i18nNextMonth, i18nNextPage, i18nNextSlide, i18nNextYear, i18nNextYearRange, i18nNonAccessible, i18nOccupancy, i18nPage, i18nPaginatorOf, i18nPaginatorSelected, i18nPreviousDay, i18nPreviousMonth, i18nPreviousPage, i18nPreviousSlide, i18nPreviousYear, i18nPreviousYearRange, i18nRealTimeInfo, i18nRemainingCharacters, i18nRestaurantWagonLabel, i18nReverseCard, i18nSector, i18nSectorShort, i18nSelectNextDay, i18nSelectPreviousDay, i18nSelectionRequired, i18nShowCalendar, i18nSleepingWagonLabel, i18nSlide, i18nSupersaver, i18nTargetOpensInNewWindow, i18nTimeInputChange, i18nTimeInvalid, i18nTimeMax, i18nTimeMaxLength, i18nTimetableFormSwapButtonLabel, i18nToday, i18nTrain, i18nTrains, i18nTransferProcedure, i18nTransferProcedures, i18nTravelhints, i18nTripDuration, i18nTripQuayChange, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, i18nWalkingDistanceArrival, i18nWalkingDistanceDeparture, i18nYearMonthSelection, idReference, interactivityChecker, isAndroid, isArrowKeyOrPageKeysPressed, isArrowKeyPressed, isBlink, isChromium, isEdge, isEventOnElement, isEventPrevented, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, isFirefox, isIOS, isMacOS, isNextArrowKeyPressed, isNextjs, isPreviousArrowKeyPressed, isSafari, isTrident, isWebkit, isZeroAnimationDuration, listResetStyles, mergeConfig, omitEmptyConverter, pageScrollDisabled, plainDate, plainDateConverter, popoverResetStyles, preventScrollOnSpacebarPress, queueDomContentLoaded, radioButtonRegistry, readConfig, removeAriaComboBoxAttributes, removeAriaElements, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, sbbLiveAnnouncer, sbbOverlayOutsidePointerEventListener, screenReaderOnlyStyles, scrollbarStyles, setAriaComboBoxAttributes, setAriaOverlayTriggerProperties, setOrRemoveAttribute, setOverlayPosition, ɵstateController };
+export { DateAdapter, FORMAT_DATE, FRIDAY, ISO8601_FORMAT_DATE, IS_FOCUSABLE_QUERY, InteractivityChecker, IsFocusableConfig, MONDAY, NativeDateAdapter, SATURDAY, SEPARATORLESS_FORMAT_DATE, SUNDAY, SbbActionBaseElement, SbbAnimationCompleteMixin, SbbButtonBaseElement, SbbButtonLikeBaseElement, SbbDarkModeController, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbElement, SbbEscapableOverlayController, SbbFocusTrapController, SbbFocusVisibleWithinController, SbbFormAssociatedCheckboxMixin, SbbFormAssociatedInputMixin, SbbFormAssociatedMixin, SbbFormAssociatedRadioButtonMixin, SbbIdReferenceController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbLiveAnnouncer, SbbMediaMatcherController, SbbMediaQueryBreakpointLargeAndAbove, SbbMediaQueryBreakpointLargeAndBelow, SbbMediaQueryBreakpointSmallAndAbove, SbbMediaQueryBreakpointSmallAndBelow, SbbMediaQueryBreakpointUltraAndAbove, SbbMediaQueryBreakpointZeroAndAbove, SbbMediaQueryDarkMode, SbbMediaQueryForcedColors, SbbMediaQueryHover, SbbMediaQueryPointerCoarse, SbbNamedSlotListMixin, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbOverlayOutsidePointerEventListener, SbbOverlayPositionController, SbbPanelMixin, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbScrollController, SbbScrollHandler, SbbSelectionGroupBaseElement, SbbSelectionPanelMixin, SbbSlottedChangeEvent, SbbUpdateSchedulerMixin, THURSDAY, TUESDAY, TemporalDateAdapter, WEDNESDAY, appendAriaElements, buttonResetStyles, containsPierceShadowDom, defaultDateAdapter, forceType, forwardEvent, getElementPosition, getElementPositionHorizontal, getElementRectangle, getEventTarget, getNextElementIndex, getOverride, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nArrival, i18nAutocompleteActionsHint, i18nBlockedPassage, i18nBreadcrumbEllipsisButtonLabel, i18nButton, i18nCalendarDateSelection, i18nCalendarWeekNumber, i18nCarouselArrowsNavigationHint, i18nCarouselItemAriaLabel, i18nCheckboxRequired, i18nChipDelete, i18nChipGroupInputDescription, i18nClass, i18nClearInput, i18nCloseAlert, i18nCloseDialog, i18nCloseNavigation, i18nCloseNotification, i18nClosePopover, i18nCloseSidebar, i18nClosedCompartmentLabel, i18nCollapsed, i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo, i18nCouchetteWagonLabel, i18nDateChangedTo, i18nDateInvalid, i18nDateMax, i18nDateMin, i18nDatePickerPlaceholder, i18nDeparture, i18nDialog, i18nDirection, i18nDownload, i18nDurationDay, i18nDurationHour, i18nDurationMinute, i18nExpanded, i18nFileSelectorButtonLabel, i18nFileSelectorButtonLabelMultiple, i18nFileSelectorCurrentlySelected, i18nFileSelectorDeleteFile, i18nFileSelectorSubtitleLabel, i18nFileSelectorSubtitleLabelMultiple, i18nFlipCard, i18nFromPlatform, i18nGoBack, i18nInputRequired, i18nItemsPerPage, i18nLocomotiveLabel, i18nLogo125Anniversary, i18nLogo125AnniversaryYears, i18nMapContainerButtonLabel, i18nMeansOfTransport, i18nMultipleSelectionPossible, i18nNew, i18nNextDay, i18nNextMonth, i18nNextPage, i18nNextSlide, i18nNextYear, i18nNextYearRange, i18nNonAccessible, i18nOccupancy, i18nPage, i18nPaginatorOf, i18nPaginatorSelected, i18nPreviousDay, i18nPreviousMonth, i18nPreviousPage, i18nPreviousSlide, i18nPreviousYear, i18nPreviousYearRange, i18nRealTimeInfo, i18nRemainingCharacters, i18nRestaurantWagonLabel, i18nReverseCard, i18nSector, i18nSectorShort, i18nSelectNextDay, i18nSelectPreviousDay, i18nSelectionRequired, i18nShowCalendar, i18nSleepingWagonLabel, i18nSlide, i18nSupersaver, i18nTargetOpensInNewWindow, i18nTimeInputChange, i18nTimeInvalid, i18nTimeMax, i18nTimeMaxLength, i18nTimetableFormSwapButtonLabel, i18nToday, i18nTrain, i18nTrains, i18nTransferProcedure, i18nTransferProcedures, i18nTravelhints, i18nTripDuration, i18nTripQuayChange, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, i18nWalkingDistanceArrival, i18nWalkingDistanceDeparture, i18nYearMonthSelection, idReference, interactivityChecker, isAndroid, isArrowKeyOrPageKeysPressed, isArrowKeyPressed, isBlink, isChromium, isEdge, isEventOnElement, isEventPrevented, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, isFirefox, isIOS, isMacOS, isNextArrowKeyPressed, isNextjs, isPreviousArrowKeyPressed, isSafari, isTrident, isWebkit, isZeroAnimationDuration, listResetStyles, mergeConfig, omitEmptyConverter, pageScrollDisabled, plainDate, plainDateConverter, popoverResetStyles, preventScrollOnSpacebarPress, queueDomContentLoaded, radioButtonRegistry, readConfig, removeAriaComboBoxAttributes, removeAriaElements, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, sbbLiveAnnouncer, sbbOverlayOutsidePointerEventListener, screenReaderOnlyStyles, scrollbarStyles, setAriaComboBoxAttributes, setAriaOverlayTriggerProperties, setOrRemoveAttribute, setOverlayPosition, ɵstateController };

package/development/datepicker.pure.js

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

package/lean-off-brand-theme.css

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