@sbb-esta/lyne-elements 5.0.0-next.3 → 5.0.0

package/_index.scss

@@ -1,2 +1,69 @@
-@forward './core/styles' hide development-style, link-base, link-focus-visible, link-hover,
-  link-active, link-consolidation;
+// This file is auto-generated by scripts/generate-scss-api.ts
+@forward './core/styles';
+@forward './action-group/action-group.global' as action-group-*;
+@forward './alert/alert.global' as alert-*;
+@forward './badge/badge.global' as badge-*;
+@forward './breadcrumb/breadcrumb.global' as breadcrumb-*;
+@forward './button/button.global' as button-*;
+@forward './calendar/calendar.global' as calendar-*;
+@forward './card/card.global' as card-*;
+@forward './carousel/carousel.global' as carousel-*;
+@forward './checkbox/checkbox.global' as checkbox-*;
+@forward './chip/chip.global' as chip-*;
+@forward './chip-label/chip-label.global' as chip-label-*;
+@forward './clock/clock.global' as clock-*;
+@forward './container/container.global' as container-*;
+@forward './dialog/dialog.global' as dialog-*;
+@forward './divider/divider.global' as divider-*;
+@forward './expansion-panel/expansion-panel.global' as expansion-panel-*;
+@forward './file-selector/file-selector.global' as file-selector-*;
+@forward './flip-card/flip-card.global' as flip-card-*;
+@forward './footer/footer.global' as footer-*;
+@forward './form-field/form-field.global' as form-field-*;
+@forward './header/header.global' as header-*;
+@forward './icon-sidebar/icon-sidebar.global' as icon-sidebar-*;
+@forward './lead-container/lead-container.global' as lead-container-*;
+@forward './link/link.global' as link-*;
+@forward './loading-indicator/loading-indicator.global' as loading-indicator-*;
+@forward './loading-indicator-circle/loading-indicator-circle.global' as loading-indicator-circle-*;
+@forward './logo/logo.global' as logo-*;
+@forward './map-container/map-container.global' as map-container-*;
+@forward './menu/menu.global' as menu-*;
+@forward './message/message.global' as message-*;
+@forward './mini-calendar/mini-calendar.global' as mini-calendar-*;
+@forward './navigation/navigation.global' as navigation-*;
+@forward './notification/notification.global' as notification-*;
+@forward './option/option.global' as option-*;
+@forward './overlay/overlay.global' as overlay-*;
+@forward './paginator/paginator.global' as paginator-*;
+@forward './core/mixins/panel-common.global' as panel-common-*;
+@forward './popover/popover.global' as popover-*;
+@forward './radio-button/radio-button.global' as radio-button-*;
+@forward './select/select.global' as select-*;
+@forward './selection-action-panel/selection-action-panel.global' as selection-action-panel-*;
+@forward './selection-expansion-panel/selection-expansion-panel.global' as
+  selection-expansion-panel-*;
+@forward './core/base-elements/selection-group-base-element.global' as
+  selection-group-base-element-*;
+@forward './sidebar/sidebar.global' as sidebar-*;
+@forward './signet/signet.global' as signet-*;
+@forward './slider/slider.global' as slider-*;
+@forward './status/status.global' as status-*;
+@forward './stepper/stepper.global' as stepper-*;
+@forward './table/table.global' as table-*;
+@forward './tabs/tabs.global' as tabs-*;
+@forward './tag/tag.global' as tag-*;
+@forward './teaser/teaser.global' as teaser-*;
+@forward './teaser-hero/teaser-hero.global' as teaser-hero-*;
+@forward './teaser-panel/teaser-panel.global' as teaser-panel-*;
+@forward './teaser-product/teaser-product.global' as teaser-product-*;
+@forward './time-input/time-input.global' as time-input-*;
+@forward './timetable-form/timetable-form.global' as timetable-form-*;
+@forward './timetable-occupancy/timetable-occupancy.global' as timetable-occupancy-*;
+@forward './title/title.global' as title-*;
+@forward './toast/toast.global' as toast-*;
+@forward './toggle/toggle.global' as toggle-*;
+@forward './toggle-check/toggle-check.global' as toggle-check-*;
+@forward './tooltip/tooltip.global' as tooltip-*;
+@forward './train/train.global' as train-*;
+@forward './visual-checkbox/visual-checkbox.global' as visual-checkbox-*;

package/accordion/accordion.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../accordion.component-DbuSYzV1.js";
+import { t as e } from "../accordion.component-ClJHZh_N.js";
 export { e as SbbAccordionElement };

package/accordion.js

@@ -1,4 +1,4 @@
-import { t as e } from "./accordion.component-DbuSYzV1.js";
+import { t as e } from "./accordion.component-ClJHZh_N.js";
 import "./accordion.pure.js";
 //#region src/elements/accordion.ts
 e.define();

package/accordion.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./accordion.component-DbuSYzV1.js";
+import { t as e } from "./accordion.component-ClJHZh_N.js";
 export { e as SbbAccordionElement };

package/action-group/_action-group.global.scss

@@ -0,0 +1,7 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-action-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+}

package/action-group/action-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../action-group.component-BMYAFyHh.js";
+import { t as e } from "../action-group.component-DBfkhMYG.js";
 export { e as SbbActionGroupElement };

package/action-group.component-DBfkhMYG.js

@@ -0,0 +1,16 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbElement as n } from "./core.js";
+//#region src/elements/action-group/action-group.scss?inline
+var r = ":host{display:flex;align-items:center;justify-content:start;gap:var(--sbb-action-group-gap)}:host(.sbb-orientation-vertical-full-width){flex-direction:column;align-items:stretch}:host(:where(.sbb-orientation-vertical,.sbb-orientation-horizontal-from-small,.sbb-orientation-horizontal-from-large,.sbb-orientation-horizontal-from-ultra)){align-items:start}@media(min-width:37.5rem){:host(.sbb-orientation-horizontal-from-small){align-items:center}}@media(min-width:64rem){:host(.sbb-orientation-horizontal-from-large){align-items:center}}@media(min-width:90rem){:host(.sbb-orientation-horizontal-from-ultra){align-items:center}}", i = class extends n {
+	static {
+		this.elementName = "sbb-action-group";
+	}
+	static {
+		this.styles = [t(r)];
+	}
+	render() {
+		return e`<slot></slot>`;
+	}
+};
+//#endregion
+export { i as t };

package/action-group.js

@@ -1,4 +1,4 @@
-import { t as e } from "./action-group.component-BMYAFyHh.js";
+import { t as e } from "./action-group.component-DBfkhMYG.js";
 import "./action-group.pure.js";
 //#region src/elements/action-group.ts
 e.define();

package/action-group.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./action-group.component-BMYAFyHh.js";
+import { t as e } from "./action-group.component-DBfkhMYG.js";
 export { e as SbbActionGroupElement };

package/alert/_alert.global.scss

@@ -0,0 +1,47 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
+  --sbb-alert-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-alert-border-radius: var(--sbb-border-radius-4x);
+  --sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));
+  --sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
+  --sbb-alert-timing-function: ease-in;
+  --sbb-alert-icon-size: #{sbb.px-to-rem-build(20)};
+  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
+  --sbb-alert-title-margin-block: 0;
+  --sbb-alert-font-size: var(--sbb-text-font-size-s);
+  --sbb-alert-gap: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs),
+        'lean': var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs),
+      ),
+      $theme
+    )};
+  --sbb-alert-close-icon-margin: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-responsive-xxs),
+        'lean': var(--sbb-spacing-responsive-xxxs),
+      ),
+      $theme
+    )};
+}
+
+@mixin forced-colors {
+  // Use outline here to not influence content position.
+  // Due to overflow hidden of inner elements it's placed on host.
+  --sbb-alert-outline: var(--sbb-border-width-1x) solid CanvasText;
+  --sbb-alert-forced-color-border-radius: var(--sbb-alert-border-radius);
+}
+
+@mixin breakpoint-small {
+  --sbb-alert-close-button-divider-display: block;
+}
+
+@mixin breakpoint-large {
+  --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)};
+  --sbb-alert-icon-size-l: #{sbb.px-to-rem-build(34)};
+}

package/alert/alert/alert.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../alert.component-DN7sW2NC.js";
+import { t as e } from "../../alert.component-B8EGWmcc.js";
 export { e as SbbAlertElement };

package/alert/alert-group/alert-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../alert-group.component-BqJ6B49z.js";
+import { t as e } from "../../alert-group.component-Ck1kYZb4.js";
 export { e as SbbAlertGroupElement };

package/alert.js

@@ -1,5 +1,5 @@
-import { t as e } from "./alert-group.component-BqJ6B49z.js";
-import { t } from "./alert.component-DN7sW2NC.js";
+import { t as e } from "./alert-group.component-Ck1kYZb4.js";
+import { t } from "./alert.component-B8EGWmcc.js";
 import "./alert.pure.js";
 t.define(), e.define();
 //#endregion

package/alert.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./alert-group.component-BqJ6B49z.js";
-import { t } from "./alert.component-DN7sW2NC.js";
+import { t as e } from "./alert-group.component-Ck1kYZb4.js";
+import { t } from "./alert.component-B8EGWmcc.js";
 export { t as SbbAlertElement, e as SbbAlertGroupElement };

package/autocomplete/autocomplete-base-element.js

@@ -1,2 +1,2 @@
-import { t as e } from "../autocomplete-base-element-DRGjFF9_.js";
-export { e as SbbAutocompleteBaseElement };
+import { n as e, t } from "../autocomplete-base-element-CLMoJtJb.js";
+export { t as SbbAutocompleteBaseElement, e as SbbInputAutocompleteEvent };

package/autocomplete/autocomplete.component.js

@@ -1,4 +1,4 @@
-import { t as e } from "../autocomplete-base-element-DRGjFF9_.js";
+import { t as e } from "../autocomplete-base-element-CLMoJtJb.js";
 import { getNextElementIndex as t, isSafari as n, setAriaComboBoxAttributes as r } from "../core.js";
 //#region src/elements/autocomplete/autocomplete.component.ts
 var i = 0, a = n, o = class extends e {
@@ -33,15 +33,15 @@ var i = 0, a = n, o = class extends e {
 	}
 	setNextActiveOption(e) {
 		let n = this.options.filter((e) => !e.matches(":is(:state(disabled),[state--disabled])"));
-		if (this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), !n.length) {
+		if (this.activeOption?.setActive(!1), this.triggerElement.ariaActiveDescendantElement = null, !n.length) {
 			this.activeOption = null;
 			return;
 		}
 		let r = t(e, this.activeOption ? n.indexOf(this.activeOption) : -1, n.length);
-		this.activeOption = n[r], this.activeOption.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", this.activeOption.id), this.activeOption.scrollIntoView({ block: "nearest" }), e && e.preventDefault(), this.autoSelectActiveOption && e && this.setPendingSelection(this.activeOption);
+		this.activeOption = n[r], this.activeOption.setActive(!0), this.triggerElement.ariaActiveDescendantElement = this.activeOption, this.activeOption.scrollIntoView({ block: "nearest" }), e && e.preventDefault(), this.autoSelectActiveOption && e && this.setPendingSelection(this.activeOption);
 	}
 	resetActiveElement() {
-		this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), this.activeOption = null;
+		this.activeOption?.setActive(!1), this.activeOption = null, this.triggerElement && (this.triggerElement.ariaActiveDescendantElement = null);
 	}
 	setTriggerAttributes(e) {
 		r(e, a ? this.id : this.overlayId, !1);

package/{autocomplete-base-element-DRGjFF9_.js → autocomplete-base-element-CLMoJtJb.js}

@@ -1,11 +1,22 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, nothing as i, unsafeCSS as a } from "lit";
 import { property as o } from "lit/decorators.js";
-import { SbbEscapableOverlayController as s, SbbNegativeMixin as c, SbbOpenCloseBaseElement as l, SbbPropertyWatcherController as u, forceType as d, idReference as f, isEventOnElement as p, isSafari as m, isZeroAnimationDuration as h, optionPanelStyles as g, removeAriaComboBoxAttributes as _, scrollbarStyles as v, setOverlayPosition as y } from "./core.js";
-import { ResizeController as b } from "@lit-labs/observers/resize-controller.js";
-import { ref as x } from "lit/directives/ref.js";
+import { SbbEscapableOverlayController as s, SbbNegativeMixin as c, SbbOpenCloseBaseElement as l, SbbPropertyWatcherController as u, forceType as d, idReference as f, isEventOnElement as p, isSafari as m, isZeroAnimationDuration as ee, popoverResetStyles as te, removeAriaComboBoxAttributes as h, scrollbarStyles as g, setOverlayPosition as _ } from "./core.js";
+import { ResizeController as v } from "@lit-labs/observers/resize-controller.js";
+import { ref as y } from "lit/directives/ref.js";
+import { optionPanelStyles as b } from "./option.pure.js";
 //#region src/elements/autocomplete/autocomplete-base-element.scss?inline
-var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}", C = m, w = (() => {
+var x = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}", S = m, C = class extends Event {
+	get option() {
+		return this._option;
+	}
+	constructor(e) {
+		super("inputAutocomplete", {
+			bubbles: !0,
+			composed: !0
+		}), this._option = e;
+	}
+}, w = (() => {
 	let m = c(l), w, T = [], E = [], D, O = [], k = [], A, j = [], M = [], N, P = [], F = [], I, L = [], R = [], z, B = [], V = [], H, U = [], W = [], G, K = [], q = [], J, Y = [], X = [], Z, Q = [], $ = [];
 	return class extends m {
 		static {
@@ -165,9 +176,10 @@ var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-op
 		}
 		static {
 			this.styles = [
-				v,
+				te,
 				g,
-				a(S)
+				b,
+				a(x)
 			];
 		}
 		#e;
@@ -247,7 +259,7 @@ var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-op
 			return this._triggerElement ?? null;
 		}
 		constructor() {
-			super(), this.#e = t(this, T, null), this.#t = (t(this, E), t(this, O, null)), this.#n = (t(this, k), t(this, j, !1)), this.#r = (t(this, M), t(this, P, !1)), this.#i = (t(this, F), t(this, L, null)), this.#a = (t(this, R), t(this, B, null)), this.#o = (t(this, V), t(this, U, !1)), this.#s = (t(this, W), t(this, K, !1)), this.#c = (t(this, q), t(this, Y, !1)), this.#l = (t(this, X), t(this, Q, "auto")), this._triggerElement = t(this, $), this.activeOption = null, this.pendingAutoSelectedOption = null, this._resizeObserver = new b(this, {
+			super(), this.#e = t(this, T, null), this.#t = (t(this, E), t(this, O, null)), this.#n = (t(this, k), t(this, j, !1)), this.#r = (t(this, M), t(this, P, !1)), this.#i = (t(this, F), t(this, L, null)), this.#a = (t(this, R), t(this, B, null)), this.#o = (t(this, V), t(this, U, !1)), this.#s = (t(this, W), t(this, K, !1)), this.#c = (t(this, q), t(this, Y, !1)), this.#l = (t(this, X), t(this, Q, "auto")), this._triggerElement = t(this, $), this.activeOption = null, this.pendingAutoSelectedOption = null, this._resizeObserver = new v(this, {
 				target: null,
 				skipInitial: !0,
 				callback: (() => {
@@ -283,10 +295,10 @@ var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-op
 			this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.pendingAutoSelectedOption && (this.pendingAutoSelectedOption.selected = !0, this._setValueAndDispatchEvents(this.pendingAutoSelectedOption, !0)), this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._resizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
 		}
 		_isZeroAnimationDuration() {
-			return h(this, "--sbb-options-panel-animation-duration");
+			return ee(this, "--sbb-options-panel-animation-duration");
 		}
 		connectedCallback() {
-			this.popover = "manual", super.connectedCallback(), C && (this.id ||= this.overlayId), this.hasUpdated && this._componentSetup(), this.syncNegative();
+			this.popover = "manual", super.connectedCallback(), S && (this.id ||= this.overlayId), this.hasUpdated && this._componentSetup(), this.syncNegative();
 		}
 		willUpdate(e) {
 			super.willUpdate(e), e.has("negative") && this.syncNegative(), e.has("autoActiveFirstOption") && this.isOpen && this._setNextActiveOptionIfAutoActiveFirstOption();
@@ -304,15 +316,14 @@ var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-op
 			let t = e.target;
 			this._setValueAndDispatchEvents(t), this.close();
 		}
-		onOptionArrowsSelected(e) {}
 		setPendingSelection(e) {
 			this.pendingAutoSelectedOption = e, this._setInputValue(e);
 		}
 		_setValueAndDispatchEvents(e, t = !1) {
-			this.options.filter((t) => t.id !== e.id && t.selected).forEach((e) => e.selected = !1), this.pendingAutoSelectedOption = null, this.triggerElement && (this._setInputValue(e), this._isCustomChangeEvent = !0, this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", {
+			this.options.filter((t) => t !== e && t.selected).forEach((e) => e.selected = !1), this.pendingAutoSelectedOption = null, this.triggerElement && (this._setInputValue(e), this._isCustomChangeEvent = !0, this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", {
 				bubbles: !0,
 				composed: !0
-			})), this._lastUserInput = null, this.triggerElement.dispatchEvent(new CustomEvent("inputAutocomplete", { detail: { option: e } })), t || this.triggerElement.focus());
+			})), this._lastUserInput = null, this.triggerElement.dispatchEvent(new C(e)), t || this.triggerElement.focus());
 		}
 		_setInputValue(e) {
 			if (!this.triggerElement) return;
@@ -335,7 +346,7 @@ var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-op
 		}
 		_configureTrigger() {
 			let e = this.trigger ?? this.closest?.("sbb-form-field")?.querySelector("input");
-			if (e === this.triggerElement || (this._triggerAbortController?.abort(), _(this.triggerElement), this.triggerElement?.removeAttribute("data-expanded"), this._triggerElement = e, !this.triggerElement)) return;
+			if (e === this.triggerElement || (this._triggerAbortController?.abort(), h(this.triggerElement), this.triggerElement?.removeAttribute("data-expanded"), this._triggerElement = e, !this.triggerElement)) return;
 			let t = this.originElement;
 			this.triggerElement === t && this.isOpen && this._setOverlayPosition(t), this._triggerAttributeObserver?.observe(this.triggerElement, {
 				attributes: !0,
@@ -362,7 +373,7 @@ var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-op
 			});
 		}
 		_setOverlayPosition(e = this.originElement) {
-			e && y(this._overlay, e, this._overlay, this.shadowRoot.querySelector(".sbb-option-panel__overlay-container"), this, this.position);
+			e && _(this._overlay, e, this._overlay, this.shadowRoot.querySelector(".sbb-option-panel__overlay-container"), this, this.position);
 		}
 		_onAnimationEnd(e) {
 			e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
@@ -404,11 +415,11 @@ var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-op
       <div class="sbb-option-panel__overlay-container">
         <div
           class="sbb-option-panel__overlay ${this.negative ? "sbb-scrollbar-negative" : "sbb-scrollbar"}"
-          role=${C ? i : this.panelRole}
-          id=${C ? i : this.overlayId}
+          role=${S ? i : this.panelRole}
+          id=${S ? i : this.overlayId}
           tabindex="-1"
           @animationend=${this._onAnimationEnd}
-          ${x((e) => this._overlay = e)}
+          ${y((e) => this._overlay = e)}
         >
           <slot @slotchange=${this._handleSlotchange}></slot>
         </div>
@@ -418,4 +429,4 @@ var S = ":host{display:none}:host(:is(:is(:state(state-opening),[state--state-op
 	};
 })();
 //#endregion
-export { w as t };
+export { C as n, w as t };

package/autocomplete.js

@@ -1,7 +1,7 @@
-import { t as e } from "./autocomplete-base-element-DRGjFF9_.js";
-import { SbbAutocompleteElement as t } from "./autocomplete/autocomplete.component.js";
+import { n as e, t } from "./autocomplete-base-element-CLMoJtJb.js";
+import { SbbAutocompleteElement as n } from "./autocomplete/autocomplete.component.js";
 import "./autocomplete.pure.js";
 //#region src/elements/autocomplete.ts
-t.define();
+n.define();
 //#endregion
-export { e as SbbAutocompleteBaseElement, t as SbbAutocompleteElement };
+export { t as SbbAutocompleteBaseElement, n as SbbAutocompleteElement, e as SbbInputAutocompleteEvent };

package/autocomplete.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./autocomplete-base-element-DRGjFF9_.js";
-import { SbbAutocompleteElement as t } from "./autocomplete/autocomplete.component.js";
-export { e as SbbAutocompleteBaseElement, t as SbbAutocompleteElement };
+import { n as e, t } from "./autocomplete-base-element-CLMoJtJb.js";
+import { SbbAutocompleteElement as n } from "./autocomplete/autocomplete.component.js";
+export { t as SbbAutocompleteBaseElement, n as SbbAutocompleteElement, e as SbbInputAutocompleteEvent };

package/{core/styles/mixins/badge.scss → badge/_badge.global.scss}

@@ -1,8 +1,8 @@
-@use './typo';
+@use '../core/styles' as sbb;
 
-@mixin badge {
-  @include typo.text-xxs--bold;
+$theme: 'standard' !default;
 
+@mixin element-rules {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,19 +12,23 @@
   color: var(--sbb-color-1-negative);
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: 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-xxs);
+  font-weight: bold;
 
   // Transparent outline is visible in forced colors mode to ensure readability
   outline: var(--sbb-border-width-1x) solid transparent;
 }
 
-@mixin badge-attribute {
+@mixin rules {
   [sbb-badge] {
     --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);
 
     position: relative;
 
     &::after {
-      @include badge;
+      @include element-rules;
 
       content: attr(sbb-badge);
       position: absolute;

package/{block-link-common-B1E38xKe.js → block-link-common-BZZ4NhPD.js}

@@ -1,10 +1,10 @@
-import { t as e } from "./link-common-ezSu7e9c.js";
+import { t as e } from "./link-common-C4Jbge1L.js";
 import { __esDecorate as t, __runInitializers as n } from "tslib";
 import { html as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
 import { SbbIconNameMixin as o } from "./icon.pure.js";
 //#region src/elements/link/common/block-link.scss?inline
-var s = ":host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}:host([size=xs]){--sbb-block-link-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size: var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size: var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);font-size:var(--sbb-block-link-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;translate:0 -50%}", c = (c) => (() => {
+var s = ":host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}:host([size=xs]){--sbb-block-link-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size: var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size: var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);font-size:var(--sbb-block-link-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{--sbb-icon-svg-display: block;position:absolute;top:50%;translate:0 -50%}", c = (c) => (() => {
 	let l = e(o(c)), u, d = [], f = [], p, m = [], h = [];
 	return class extends l {
 		static {

package/breadcrumb/_breadcrumb.global.scss

@@ -0,0 +1,36 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
+  --sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
+  --sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
+  --sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
+  --sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-breadcrumb-group-wrap: nowrap;
+  --sbb-breadcrumb-group-visibility: hidden;
+  --sbb-breadcrumb-group-ellipsis-color: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-cloud)
+  );
+  --sbb-breadcrumb-group-ellipsis-background-color: transparent;
+  --sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
+  --sbb-breadcrumb-group-ellipsis-border-color: light-dark(
+    var(--sbb-color-silver),
+    var(--sbb-color-anthracite)
+  );
+}
+
+@mixin forced-colors {
+  --sbb-breadcrumb-color: ButtonText;
+  --sbb-breadcrumb-color-active: Highlight;
+}
+
+@mixin rules {
+  sbb-breadcrumb-group:not(:defined) {
+    display: block;
+    height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
+    overflow: hidden;
+  }
+}

package/breadcrumb/breadcrumb/breadcrumb.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../breadcrumb.component-Kk1U6Iju.js";
+import { t as e } from "../../breadcrumb.component-CC8MxtJj.js";
 export { e as SbbBreadcrumbElement };

package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../breadcrumb-group.component-XPdnV6-a.js";
+import { t as e } from "../../breadcrumb-group.component-FLbOLqwi.js";
 export { e as SbbBreadcrumbGroupElement };

package/{breadcrumb-group.component-XPdnV6-a.js → breadcrumb-group.component-FLbOLqwi.js}

@@ -1,16 +1,16 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, nothing as r, unsafeCSS as i } from "lit";
 import { state as a } from "lit/decorators.js";
-import { SbbElement as o, SbbLanguageController as s, SbbNamedSlotListMixin as c, getNextElementIndex as l, i18nBreadcrumbEllipsisButtonLabel as u, isArrowKeyPressed as d, sbbInputModalityDetector as f } from "./core.js";
-import { SbbIconElement as p } from "./icon.pure.js";
-import { ResizeController as m } from "@lit-labs/observers/resize-controller.js";
+import { SbbElement as o, SbbLanguageController as s, SbbNamedSlotListMixin as c, buttonResetStyles as l, getNextElementIndex as u, i18nBreadcrumbEllipsisButtonLabel as d, isArrowKeyPressed as f, listResetStyles as p, sbbInputModalityDetector as m } from "./core.js";
+import { SbbIconElement as h } from "./icon.pure.js";
+import { ResizeController as g } from "@lit-labs/observers/resize-controller.js";
 //#region src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.scss?inline
-var h = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-text)}:host(:is(:state(loaded),[state--loaded])){--sbb-breadcrumb-group-visibility: visible}:host(:is(:is(:state(state-collapsed),[state--state-collapsed]),:is(:state(state-manually-expanded),[state--state-manually-expanded]))){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;font-family:var(--sbb-typo-font-family);font-weight:400;font-size:var(--sbb-text-font-size-xxs);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis: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)}", g = 3, _ = (() => {
-	let _ = c(o), v = [], y;
-	return class extends _ {
+var _ = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-text)}:host(:is(:state(loaded),[state--loaded])){--sbb-breadcrumb-group-visibility: visible}:host(:is(:is(:state(state-collapsed),[state--state-collapsed]),:is(:state(state-manually-expanded),[state--state-manually-expanded]))){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{font-family:var(--sbb-typo-font-family);font-weight:400;font-size:var(--sbb-text-font-size-xxs);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis: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)}", v = 3, y = (() => {
+	let y = c(o), b = [], x;
+	return class extends y {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-			y = [a()], e(this, null, y, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+			x = [a()], e(this, null, x, {
 				kind: "setter",
 				name: "_state",
 				static: !1,
@@ -22,7 +22,7 @@ var h = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-
 					}
 				},
 				metadata: t
-			}, null, v), t && Object.defineProperty(this, Symbol.metadata, {
+			}, null, b), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -33,13 +33,17 @@ var h = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-
 			this.elementName = "sbb-breadcrumb-group";
 		}
 		static {
-			this.elementDependencies = [p];
+			this.elementDependencies = [h];
 		}
 		static {
 			this.role = "navigation";
 		}
 		static {
-			this.styles = [i(h)];
+			this.styles = [
+				p,
+				l,
+				i(_)
+			];
 		}
 		set _state(e) {
 			this._stateInternal && this.internals.states.delete(`state-${this._stateInternal}`), this._stateInternal = e, this._stateInternal && this.internals.states.add(`state-${this._stateInternal}`);
@@ -48,14 +52,14 @@ var h = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-
 			return this._stateInternal;
 		}
 		constructor() {
-			super(), this.listChildLocalNames = (t(this, v), ["sbb-breadcrumb"]), this._stateInternal = null, this._resizeObserver = new m(this, {
+			super(), this.listChildLocalNames = (t(this, b), ["sbb-breadcrumb"]), this._stateInternal = null, this._resizeObserver = new g(this, {
 				target: null,
 				skipInitial: !0,
 				callback: () => this._evaluateCollapsedState()
 			}), this._language = new s(this), this._markForFocus = !1, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
 		}
 		_handleKeyDown(e) {
-			if (!(!this.listChildren.length || e.target !== this && e.target.parentElement !== this) && d(e)) {
+			if (!(!this.listChildren.length || e.target !== this && e.target.parentElement !== this) && f(e)) {
 				if (this._state === "collapsed") return this._focusNextCollapsed(e);
 				this._focusNext(e);
 			}
@@ -67,10 +71,10 @@ var h = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-
 			super.willUpdate(e), e.has("listChildren") && this._syncBreadcrumbs();
 		}
 		updated(e) {
-			super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && f.mostRecentModality === "keyboard" && (this.listChildren[1]?.focus(), this._markForFocus = !1);
+			super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && m.mostRecentModality === "keyboard" && (this.listChildren[1]?.focus(), this._markForFocus = !1);
 		}
 		_syncBreadcrumbs() {
-			this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length < g && (this._state = null);
+			this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length < v && (this._state = null);
 		}
 		_focusNextCollapsed(e) {
 			let t = [
@@ -81,13 +85,13 @@ var h = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-
 			this._focusNext(e, t);
 		}
 		_focusNext(e, t = this.listChildren) {
-			t[l(e, t.findIndex((e) => e === document.activeElement || e === this.shadowRoot.activeElement), t.length)]?.focus(), e.preventDefault();
+			t[u(e, t.findIndex((e) => e === document.activeElement || e === this.shadowRoot.activeElement), t.length)]?.focus(), e.preventDefault();
 		}
 		_expandBreadcrumbs() {
 			this._state = "manually-expanded", this._markForFocus = !0;
 		}
 		_evaluateCollapsedState() {
-			!this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= g && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
+			!this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= v && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
 		}
 		_renderCollapsed() {
 			return n`
@@ -102,7 +106,7 @@ var h = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-
         <button
           type="button"
           id="sbb-breadcrumb-ellipsis"
-          aria-label=${u[this._language.current]}
+          aria-label=${d[this._language.current]}
           aria-expanded="false"
           @click=${() => this._expandBreadcrumbs()}
         >
@@ -140,4 +144,4 @@ var h = ":host{display:block;min-width:0;line-height:var(--sbb-typo-line-height-
 	};
 })();
 //#endregion
-export { _ as t };
+export { y as t };

package/breadcrumb.js

@@ -1,5 +1,5 @@
-import { t as e } from "./breadcrumb-group.component-XPdnV6-a.js";
-import { t } from "./breadcrumb.component-Kk1U6Iju.js";
+import { t as e } from "./breadcrumb-group.component-FLbOLqwi.js";
+import { t } from "./breadcrumb.component-CC8MxtJj.js";
 import "./breadcrumb.pure.js";
 t.define(), e.define();
 //#endregion