@sbb-esta/lyne-elements 5.1.0 → 5.3.0

package/development/overlay.pure.js

@@ -240,7 +240,7 @@ let SbbOverlayBaseElement = (() => {
 
 //#endregion
 //#region src/elements/overlay/overlay.scss?inline
-var overlay_default = ":host {\n  --_sbb-overlay-padding-block: calc(\n    var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l)\n  );\n  --sbb-overlay-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: var(--sbb-overlay-display);\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n  z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-overlay-display: block;\n  --sbb-overlay-container-display: flex;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-overlay-pointer-events: all;\n}\n\n:host([negative]) {\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-overlay-color: var(--sbb-color-1-negative);\n  --sbb-overlay-background-color: var(--sbb-background-color-3-negative);\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-overlay-inset: 0;\n}\n\n.sbb-overlay__container {\n  background-color: var(--sbb-overlay-background-color);\n  pointer-events: var(--sbb-overlay-pointer-events);\n  display: var(--sbb-overlay-container-display);\n  align-items: center;\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\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]))) .sbb-overlay__container {\n  animation-name: open;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container {\n  pointer-events: none;\n  animation-name: close;\n}\n\n.sbb-overlay {\n  position: absolute;\n  inset-inline: 0;\n  margin: auto;\n  padding: 0;\n  border: none;\n  height: var(--sbb-overlay-height);\n  color: var(--sbb-overlay-color);\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]))) .sbb-overlay {\n  animation-name: open-move-in;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay {\n  animation-name: close-move-out;\n}\n\n.sbb-overlay__wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: var(--sbb-overlay-height);\n  outline: none;\n  position: fixed;\n}\n@media (min-width: calc(64rem)) {\n  .sbb-overlay__wrapper {\n    position: sticky;\n    inset-block-start: 0;\n    height: auto;\n  }\n}\n\n.sbb-overlay__header {\n  position: absolute;\n  inset-inline-start: 0;\n  display: flex;\n  pointer-events: none;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--sbb-spacing-responsive-xs);\n  padding-block-end: 0;\n  z-index: 1;\n}\n.sbb-overlay__header * {\n  pointer-events: all;\n}\n\n.sbb-overlay__close {\n  margin-inline-start: auto;\n}\n\n.sbb-overlay__content {\n  height: 100vh;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sbb-overlay__content-container {\n  padding-block: var(--_sbb-overlay-padding-block);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes open-move-in {\n  from {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes close-move-out {\n  from {\n    transform: translateY(0%);\n  }\n  to {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n}\n";
+var overlay_default = ":host {\n  --sbb-overlay-display: none;\n  --sbb-overlay-inset: 0 auto auto 0;\n  --sbb-overlay-pointer-events: none;\n  --sbb-overlay-container-display: none;\n  --_sbb-overlay-padding-block: calc(\n    var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l)\n  );\n  --sbb-overlay-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: var(--sbb-overlay-display);\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n  z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  --sbb-overlay-display: block;\n  --sbb-overlay-container-display: flex;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-overlay-pointer-events: all;\n}\n\n:host(:not([negative])) {\n  --sbb-overlay-color: var(--sbb-color-1);\n  --sbb-overlay-background-color: var(--sbb-background-color-3);\n}\n\n:host([negative]) {\n  --sbb-overlay-color: var(--sbb-color-1-negative);\n  --sbb-overlay-background-color: var(--sbb-background-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-overlay-inset: 0;\n}\n\n.sbb-overlay__container {\n  background-color: var(--sbb-overlay-background-color);\n  pointer-events: var(--sbb-overlay-pointer-events);\n  display: var(--sbb-overlay-container-display);\n  align-items: center;\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\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]))) .sbb-overlay__container {\n  animation-name: open;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container {\n  pointer-events: none;\n  animation-name: close;\n}\n\n.sbb-overlay {\n  position: absolute;\n  inset-inline: 0;\n  margin: auto;\n  padding: 0;\n  border: none;\n  height: var(--sbb-overlay-height);\n  color: var(--sbb-overlay-color);\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]))) .sbb-overlay {\n  animation-name: open-move-in;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay {\n  animation-name: close-move-out;\n}\n\n.sbb-overlay__wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: var(--sbb-overlay-height);\n  outline: none;\n  position: fixed;\n}\n@media (min-width: calc(64rem)) {\n  .sbb-overlay__wrapper {\n    position: sticky;\n    inset-block-start: 0;\n    height: auto;\n  }\n}\n\n.sbb-overlay__header {\n  position: absolute;\n  inset-inline-start: 0;\n  display: flex;\n  pointer-events: none;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--sbb-spacing-responsive-xs);\n  padding-block-end: 0;\n  z-index: 1;\n}\n.sbb-overlay__header * {\n  pointer-events: all;\n}\n\n.sbb-overlay__close {\n  margin-inline-start: auto;\n}\n\n.sbb-overlay__content {\n  height: 100vh;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sbb-overlay__content-container {\n  padding-block: var(--_sbb-overlay-padding-block);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes open-move-in {\n  from {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes close-move-out {\n  from {\n    transform: translateY(0%);\n  }\n  to {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n}\n";
 
 //#endregion
 //#region src/elements/overlay/overlay.component.ts

package/development/paginator.pure.js

@@ -695,24 +695,24 @@ let SbbPaginatorElement = (() => {
 			return html`
       <ul class="sbb-paginator__pages">
         ${repeat(this._getVisiblePagesIndex(), (item) => item === "ellipsis" ? html`
-                  <li class="sbb-paginator__page--ellipsis">
-                    <span class="sbb-paginator__page--ellipsis-item">…</span>
-                  </li>
-                ` : html`
-                  <li class="sbb-paginator__page--number">
-                    <button
-                      ?data-selected=${this.pageIndex === item}
-                      ?disabled=${this.disabled}
-                      class="sbb-paginator__page--number-item"
-                      data-index=${item}
-                      aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : i18nPage[this.language.current]} ${item + 1}"
-                      aria-current=${this.pageIndex === item ? "true" : nothing}
-                      @click=${() => this._onPageNumberClick(item)}
-                    >
-                      <span class="sbb-paginator__page--number-item-label">${item + 1}</span>
-                    </button>
-                  </li>
-                `)}
+                <li class="sbb-paginator__page--ellipsis">
+                  <span class="sbb-paginator__page--ellipsis-item">…</span>
+                </li>
+              ` : html`
+                <li class="sbb-paginator__page--number">
+                  <button
+                    ?data-selected=${this.pageIndex === item}
+                    ?disabled=${this.disabled}
+                    class="sbb-paginator__page--number-item"
+                    data-index=${item}
+                    aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : i18nPage[this.language.current]} ${item + 1}"
+                    aria-current=${this.pageIndex === item ? "true" : nothing}
+                    @click=${() => this._onPageNumberClick(item)}
+                  >
+                    <span class="sbb-paginator__page--number-item-label">${item + 1}</span>
+                  </button>
+                </li>
+              `)}
       </ul>
     `;
 		}

package/development/popover.pure.js

@@ -213,7 +213,7 @@ let SbbPopoverBaseElement = (() => {
 		_setPopoverFocus() {
 			if (!this._focusTrapController.focusInitialElement() && this._openStateController) {
 				this.setAttribute("tabindex", "0");
-				this.focus();
+				this.focus({ preventScroll: true });
 				this.addEventListener("blur", (e) => {
 					this._blurTimeout = setTimeout(() => {
 						if (document.visibilityState !== "hidden") {

package/development/signet.pure.js

@@ -90,23 +90,23 @@ let SbbSignetElement = (() => {
 			return html`
       <span class="sbb-signet__svg-container">
         ${this.protectiveRoom === "panel" ? html`
-              <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
-                <title .textContent=${this.accessibilityLabel}></title>
-                <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
-                <path
-                  id="sbb-signet__icon"
-                  d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
-                ></path>
-              </svg>
-            ` : html`
-              <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
-                <title .textContent=${this.accessibilityLabel}></title>
-                <path
-                  id="sbb-signet__icon"
-                  d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
-                ></path>
-              </svg>
-            `}
+                <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
+                  <title .textContent=${this.accessibilityLabel}></title>
+                  <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
+                  <path
+                    id="sbb-signet__icon"
+                    d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
+                  ></path>
+                </svg>
+              ` : html`
+                <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
+                  <title .textContent=${this.accessibilityLabel}></title>
+                  <path
+                    id="sbb-signet__icon"
+                    d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
+                  ></path>
+                </svg>
+              `}
       </span>
     `;
 		}

package/development/stepper/step/step.component.d.ts

@@ -58,8 +58,6 @@ export declare class SbbStepElement extends SbbElement {
     protected configure(stepperLoaded: boolean): void;
     /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
     private _handleClick;
-    private _isGoNextElement;
-    private _isGoPreviousElement;
     private _onStepElementResize;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;

package/development/stepper/stepper/stepper.component.d.ts

@@ -64,9 +64,9 @@ export declare class SbbStepperElement extends SbbElement {
     private _resizeObserverTimeout;
     private _mediaMatcher;
     constructor();
-    /** Selects the next step. */
+    /** Selects the next enabled step. If no available step is found, it simply exits. */
     next(): void;
-    /** Selects the previous step. */
+    /** Selects the previous enabled step. If no available step is found, it simply exits. */
     previous(): void;
     /** Resets the form in which the stepper is nested or every form of each step, if any. */
     reset(): void;

package/development/stepper.pure.js

@@ -47,7 +47,7 @@ var SbbStepLabelElement = class extends SbbIconNameMixin(SbbDisabledMixin(SbbBut
 		this._previousSize = null;
 		this.addEventListener?.("click", () => {
 			const stepper = this.stepper;
-			if (stepper && this.step && this._isNotDeactivatedByLinearMode(this.step)) stepper.selected = this.step;
+			if (stepper && this.step && this._isNotDeactivatedByLinearMode(this.step) && !this.disabled) stepper.selected = this.step;
 		});
 		this.addController(new SbbPropertyWatcherController(this, () => this.stepper, {
 			orientation: (s) => {
@@ -246,14 +246,8 @@ var SbbStepElement = class extends SbbElement {
 	/** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
 	_handleClick(event) {
 		const composedPathElements = event.composedPath().filter((el) => el instanceof window.HTMLElement);
-		if (composedPathElements.some((el) => this._isGoNextElement(el))) this.stepper?.next();
-		else if (composedPathElements.some((el) => this._isGoPreviousElement(el))) this.stepper?.previous();
-	}
-	_isGoNextElement(element) {
-		return element.hasAttribute("sbb-stepper-next") && !element.hasAttribute("disabled");
-	}
-	_isGoPreviousElement(element) {
-		return element.hasAttribute("sbb-stepper-previous") && !element.hasAttribute("disabled");
+		if (composedPathElements.some((el) => el.hasAttribute("sbb-stepper-next"))) this.stepper?.next();
+		else if (composedPathElements.some((el) => el.hasAttribute("sbb-stepper-previous"))) this.stepper?.previous();
 	}
 	_onStepElementResize() {
 		if (!this.matches(":is(:state(selected),[state--selected])")) return;
@@ -572,13 +566,25 @@ let SbbStepperElement = (() => {
 			this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
 			this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
 		}
-		/** Selects the next step. */
+		/** Selects the next enabled step. If no available step is found, it simply exits. */
 		next() {
-			if (this.selectedIndex !== null) this._select(this.steps[this.selectedIndex + 1]);
+			if (this.selectedIndex !== null) for (let i = this.selectedIndex + 1; i < this.steps.length; i++) {
+				const step = this.steps[i];
+				if (this._isSelectable(step)) {
+					this._select(step);
+					return;
+				}
+			}
 		}
-		/** Selects the previous step. */
+		/** Selects the previous enabled step. If no available step is found, it simply exits. */
 		previous() {
-			if (this.selectedIndex !== null) this._select(this.steps[this.selectedIndex - 1]);
+			if (this.selectedIndex !== null) for (let i = this.selectedIndex - 1; i >= 0; i--) {
+				const step = this.steps[i];
+				if (this._isSelectable(step)) {
+					this._select(step);
+					return;
+				}
+			}
 		}
 		/** Resets the form in which the stepper is nested or every form of each step, if any. */
 		reset() {
@@ -599,17 +605,18 @@ let SbbStepperElement = (() => {
 			} else return false;
 		}
 		_select(step) {
-			if (!this._isSelectable(step) || step === this.selected) return;
+			if (!step || step === this.selected) return;
 			const currentIndex = this.selectedIndex;
 			const currentStep = this.selected;
+			const stepIndex = this.steps.indexOf(step);
 			const validatePayload = {
 				currentIndex,
 				currentStep,
-				nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
-				nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null
+				nextIndex: stepIndex >= 0 ? stepIndex : null,
+				nextStep: step
 			};
 			if (this.selected && !this.selected["validate"](validatePayload)) return;
-			this.selected?.["deselect"]();
+			currentStep?.["deselect"]();
 			step["select"]();
 			/** @internal only to provide double entry in docs. It is a public event! */
 			this.dispatchEvent(new SbbStepChangeEvent({

package/development/tabs.pure.js

@@ -299,10 +299,10 @@ let SbbTabGroupElement = (() => {
         <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
       </div>
       ${!this.fixedHeight ? html`
-            <div class="sbb-tab-group-content">
-              <slot @slotchange=${this._onContentSlotChange}></slot>
-            </div>
-          ` : html`<slot @slotchange=${this._onContentSlotChange}></slot>`}
+              <div class="sbb-tab-group-content">
+                <slot @slotchange=${this._onContentSlotChange}></slot>
+              </div>
+            ` : html`<slot @slotchange=${this._onContentSlotChange}></slot>`}
     `;
 		}
 	};

package/development/teaser.pure.js

@@ -5,7 +5,7 @@ import { html } from "lit/static-html.js";
 import { SbbLinkBaseElement, screenReaderOnlyStyles } from "./core.js";
 
 //#region src/elements/teaser/teaser.scss?inline
-var teaser_default = "@charset \"UTF-8\";\n:host {\n  --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-border-radius: calc(\n    var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n  );\n  display: inline-block;\n  outline: none !important;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-teaser-description-color: LinkText;\n    --sbb-title-color: LinkText !important;\n  }\n}\n\n:host([alignment=after]) {\n  --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n  --sbb-teaser-flex-direction: column;\n  --sbb-teaser-align-items: baseline;\n  --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n  }\n}\n.sbb-teaser__wrapper {\n  display: flex;\n  position: relative;\n  cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-teaser {\n  text-decoration: none;\n  position: absolute;\n  inset: 0;\n}\n.sbb-teaser:focus-visible {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  border-radius: var(--sbb-teaser-border-radius);\n}\n@media (forced-colors: active) {\n  .sbb-teaser:focus-visible {\n    outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n  }\n}\n@media (forced-colors: active) {\n  .sbb-teaser::before {\n    content: \"\";\n    position: absolute;\n    inset: var(--_sbb-teaser-forced-colors-inset);\n    pointer-events: none;\n    border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-teaser__container {\n  display: flex;\n  flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n  align-items: var(--sbb-teaser-align-items);\n  gap: var(--sbb-teaser-gap);\n  max-width: 100%;\n  width: 100%;\n  pointer-events: none;\n}\n\n.sbb-teaser__text {\n  color: var(--sbb-teaser-description-color);\n  font-size: var(--sbb-teaser-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n::slotted([slot=image]) {\n  display: block;\n  width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: var(--sbb-teaser-border-radius);\n  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n  display: none;\n}\n@media (any-hover: hover) {\n  :host(:hover) .sbb-teaser__image-wrapper {\n    box-shadow: var(--sbb-box-shadow-level-9-hard);\n  }\n}\n\n.sbb-teaser__description {\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n  margin-block: 0;\n}\n";
+var teaser_default = "@charset \"UTF-8\";\n:host {\n  --_sbb-teaser-forced-colors-inset: calc(-1 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-outline-offset: calc(2 * var(--sbb-focus-outline-offset));\n  --_sbb-teaser-forced-colors-border-radius: calc(\n    var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset)\n  );\n  display: inline-block;\n  outline: none !important;\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-teaser-description-color: LinkText;\n    --sbb-title-color: LinkText !important;\n  }\n}\n\n:host([alignment=after]) {\n  --sbb-teaser-align-items: start;\n}\n\n:host([alignment=below]) {\n  --sbb-teaser-flex-direction: column;\n  --sbb-teaser-align-items: baseline;\n  --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);\n  }\n}\n.sbb-teaser__wrapper {\n  display: flex;\n  position: relative;\n  cursor: var(--sbb-cursor-pointer);\n}\n.sbb-teaser__wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-teaser {\n  text-decoration: none;\n  position: absolute;\n  inset: 0;\n}\n.sbb-teaser:focus-visible {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  border-radius: var(--sbb-teaser-border-radius);\n}\n@media (forced-colors: active) {\n  .sbb-teaser:focus-visible {\n    outline-offset: var(--_sbb-teaser-forced-colors-outline-offset);\n  }\n}\n@media (forced-colors: active) {\n  .sbb-teaser::before {\n    content: \"\";\n    position: absolute;\n    inset: var(--_sbb-teaser-forced-colors-inset);\n    pointer-events: none;\n    border-radius: var(--_sbb-teaser-forced-colors-border-radius);\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n.sbb-teaser__container {\n  display: flex;\n  flex-flow: var(--sbb-teaser-flex-direction) nowrap;\n  align-items: var(--sbb-teaser-align-items);\n  gap: var(--sbb-teaser-gap);\n  max-width: 100%;\n  width: 100%;\n  pointer-events: none;\n}\n\n.sbb-teaser__text {\n  color: var(--sbb-teaser-description-color);\n  font-size: var(--sbb-teaser-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  overflow: hidden;\n  max-width: 100%;\n}\n\n::slotted([slot=image]) {\n  display: block;\n  width: var(--sbb-teaser-image-width);\n}\n\n.sbb-teaser__image-wrapper {\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: var(--sbb-teaser-border-radius);\n  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);\n  max-width: 100%;\n}\n:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper {\n  display: none;\n}\n@media (any-hover: hover) {\n  :host(:hover) .sbb-teaser__image-wrapper {\n    box-shadow: var(--sbb-box-shadow-level-9-hard);\n  }\n}\n\n.sbb-teaser__description {\n  display: inline-block;\n  margin: 0;\n  padding: 0;\n}\n\n::slotted(sbb-chip-label) {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  margin-block-end: var(--sbb-spacing-fixed-1x);\n}\n\n::slotted(sbb-title) {\n  margin-block: 0;\n}\n";
 
 //#endregion
 //#region src/elements/teaser/teaser.component.ts

package/development/time-input.pure.js

@@ -154,12 +154,16 @@ let SbbTimeInputElement = (() => {
 		validate() {
 			super.validate();
 			if (!this.value) this._removeValidityErrors();
-			else if (!this._valueAsTime) this.setValidityFlag("badInput", i18nTimeInvalid[this.language.current]);
-			else if (!this._isTimeValid(this._valueAsTime)) this.setValidityFlag("rangeOverflow", i18nTimeMax[this.language.current]);
-			else this._removeValidityErrors();
-		}
-		_removeValidityErrors() {
-			["badInput", "rangeOverflow"].forEach((f) => this.removeValidityFlag(f));
+			else if (!this._valueAsTime) {
+				this._removeValidityErrors("badInput");
+				this.setValidityFlag("badInput", i18nTimeInvalid[this.language.current]);
+			} else if (!this._isTimeValid(this._valueAsTime)) {
+				this._removeValidityErrors("rangeOverflow");
+				this.setValidityFlag("rangeOverflow", i18nTimeMax[this.language.current]);
+			} else this._removeValidityErrors();
+		}
+		_removeValidityErrors(except) {
+			["badInput", "rangeOverflow"].filter((v) => v !== except).forEach((f) => this.removeValidityFlag(f));
 		}
 		/** Checks if values of hours and minutes are possible, to avoid non-existent times. */
 		_isTimeValid(time) {

package/development/timetable-form.pure.js

@@ -60,9 +60,9 @@ var SbbTimetableFormFieldElement = class extends SbbFormFieldElement {
 	render() {
 		return html`
       ${this._routeIcon ? html` <sbb-icon
-            name="route-circle-start-small"
-            class="sbb-timetable-form-field__start-route-icon"
-          ></sbb-icon>` : html` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
+              name="route-circle-start-small"
+              class="sbb-timetable-form-field__start-route-icon"
+            ></sbb-icon>` : html` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
       ${super.render()}
     `;
 	}

package/development/timetable-occupancy.pure.js

@@ -97,28 +97,28 @@ let SbbTimetableOccupancyElement = (() => {
 		}
 		render() {
 			return html` ${(this.firstClassOccupancy || this.secondClassOccupancy) && html`
-      <ul
-        class="sbb-timetable-occupancy__list"
-        role=${!this.firstClassOccupancy || !this.secondClassOccupancy ? "presentation" : nothing}
-      >
-        ${[this.firstClassOccupancy, this.secondClassOccupancy].map((occupancy, index) => occupancy && html`
-              <li class="sbb-timetable-occupancy__list-item">
-                <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
-                  ${this.firstClassOccupancy && index === 0 ? "1" : "2"}.
-                </span>
-                <span class="sbb-screen-reader-only">
-                  ${`${i18nClass[this.firstClassOccupancy && index === 0 ? "first" : "second"][this._language.current]}.`}
-                </span>
-                <sbb-timetable-occupancy-icon
-                  class="sbb-timetable-occupancy__list-item-icon"
-                  ?negative=${this.negative}
-                  .occupancy=${occupancy}
-                >
-                </sbb-timetable-occupancy-icon>
-              </li>
-            `)}
-      </ul>
-    `}`;
+        <ul
+          class="sbb-timetable-occupancy__list"
+          role=${!this.firstClassOccupancy || !this.secondClassOccupancy ? "presentation" : nothing}
+        >
+          ${[this.firstClassOccupancy, this.secondClassOccupancy].map((occupancy, index) => occupancy && html`
+                <li class="sbb-timetable-occupancy__list-item">
+                  <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
+                    ${this.firstClassOccupancy && index === 0 ? "1" : "2"}.
+                  </span>
+                  <span class="sbb-screen-reader-only">
+                    ${`${i18nClass[this.firstClassOccupancy && index === 0 ? "first" : "second"][this._language.current]}.`}
+                  </span>
+                  <sbb-timetable-occupancy-icon
+                    class="sbb-timetable-occupancy__list-item-icon"
+                    ?negative=${this.negative}
+                    .occupancy=${occupancy}
+                  >
+                  </sbb-timetable-occupancy-icon>
+                </li>
+              `)}
+        </ul>
+      `}`;
 		}
 	};
 })();

package/development/toast.pure.js

@@ -250,12 +250,12 @@ let SbbToastElement = (() => {
               ?negative=${this._isLightMode()}
             ></sbb-divider>
             ${!this.readOnly ? html`<sbb-transparent-button
-                  class="sbb-toast__close-button"
-                  icon-name="cross-small"
-                  ?negative=${this._isLightMode()}
-                  aria-label=${i18nCloseAlert[this._language.current]}
-                  sbb-toast-close
-                ></sbb-transparent-button>` : nothing}
+                    class="sbb-toast__close-button"
+                    icon-name="cross-small"
+                    ?negative=${this._isLightMode()}
+                    aria-label=${i18nCloseAlert[this._language.current]}
+                    sbb-toast-close
+                  ></sbb-transparent-button>` : nothing}
           </div>
         </div>
       </div>

package/development/tooltip.pure.js

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

package/development/train.pure.js

@@ -243,18 +243,18 @@ let SbbTrainFormationElement = (() => {
 		render() {
 			return html`
       ${this._sectors.length && this._sectors[0].label !== void 0 ? html`<div class="sbb-train-formation__sectors" aria-hidden="true">
-            ${this._sectors.map((aggregatedSector) => html`<span
-                  class="sbb-train-formation__sector"
-                  style=${styleMap({
+              ${this._sectors.map((aggregatedSector) => html`<span
+                    class="sbb-train-formation__sector"
+                    style=${styleMap({
 				"--sbb-train-formation-wagon-count": aggregatedSector.wagonCount,
 				"--sbb-train-formation-wagon-blocked-passage-count": aggregatedSector.blockedPassageCount
 			})}
-                >
-                  <span class="sbb-train-formation__sector-sticky-wrapper">
-                    ${`${aggregatedSector.wagonCount === 1 && aggregatedSector.label ? i18nSectorShort[this._language.current] : i18nSector[this._language.current]} ${aggregatedSector.label ? aggregatedSector.label : ""}`}
-                  </span>
-                </span>`)}
-          </div>` : nothing}
+                  >
+                    <span class="sbb-train-formation__sector-sticky-wrapper">
+                      ${`${aggregatedSector.wagonCount === 1 && aggregatedSector.label ? i18nSectorShort[this._language.current] : i18nSector[this._language.current]} ${aggregatedSector.label ? aggregatedSector.label : ""}`}
+                    </span>
+                  </span>`)}
+            </div>` : nothing}
 
       <div class="sbb-train-formation__trains">
         ${this.renderList({
@@ -636,13 +636,13 @@ const SbbTrainWagonMixin = (superClass) => {
                 ${this.label ? html$1`<li class="sbb-screen-reader-only">${labelString}</li>` : nothing}
                 ${this.wagonClass && this.wagonType !== "closed" ? html$1`<li class="sbb-train-wagon__class">${wagonClassContent}</li>` : nothing}
                 ${this.occupancy && this.wagonType !== "closed" ? html$1`<sbb-timetable-occupancy-icon
-                      class="sbb-train-wagon__occupancy"
-                      role="listitem"
-                      occupancy=${this.occupancy}
-                    ></sbb-timetable-occupancy-icon>` : nothing}
+                        class="sbb-train-wagon__occupancy"
+                        role="listitem"
+                        occupancy=${this.occupancy}
+                      ></sbb-timetable-occupancy-icon>` : nothing}
                 ${hasBlockedPassageEntry ? html$1`<li class="sbb-screen-reader-only">
-                      ${i18nBlockedPassage[blockedPassage][this._language.current]}
-                    </li>` : nothing}
+                        ${i18nBlockedPassage[blockedPassage][this._language.current]}
+                      </li>` : nothing}
               </ul>`, () => html$1`<div class="sbb-train-wagon__compartment">
                 <span class="sbb-screen-reader-only">
                   ${`${this._wagonTypeLabel()}${this.sector ? `, ${sectorString}` : ""}`}
@@ -650,17 +650,17 @@ const SbbTrainWagonMixin = (superClass) => {
                 ${this.label ? html$1`<span class="sbb-screen-reader-only">${labelString}</span>` : nothing}
                 ${this.wagonClass && this.wagonType !== "closed" ? html$1`<span class="sbb-train-wagon__class">${wagonClassContent}</span>` : nothing}
                 ${this.occupancy && this.wagonType !== "closed" ? html$1`<sbb-timetable-occupancy-icon
-                      class="sbb-train-wagon__occupancy"
-                      occupancy=${this.occupancy}
-                    ></sbb-timetable-occupancy-icon>` : nothing}
+                        class="sbb-train-wagon__occupancy"
+                        occupancy=${this.occupancy}
+                      ></sbb-timetable-occupancy-icon>` : nothing}
                 ${hasBlockedPassageEntry ? html$1`<span class="sbb-screen-reader-only">
-                      ${i18nBlockedPassage[blockedPassage][this._language.current]}
-                    </span>` : nothing}
+                        ${i18nBlockedPassage[blockedPassage][this._language.current]}
+                      </span>` : nothing}
               </div> `)}
           ${wagonTypeToIconMap[this.wagonType] ? html$1`<sbb-icon
-                name=${wagonTypeToIconMap[this.wagonType]}
-                class="sbb-train-wagon__main-icon"
-              ></sbb-icon>` : nothing}
+                  name=${wagonTypeToIconMap[this.wagonType]}
+                  class="sbb-train-wagon__main-icon"
+                ></sbb-icon>` : nothing}
           <svg class="sbb-train-wagon__shape" viewBox="0 0 84 36" aria-hidden="true">
             <path d=${path}></path>
             <path
@@ -673,18 +673,18 @@ const SbbTrainWagonMixin = (superClass) => {
             ></path>
           </svg>
           ${this.additionalAccessibilityText ? html$1`<span class="sbb-screen-reader-only"
-                >, ${this.additionalAccessibilityText}</span
-              >` : nothing}
+                  >, ${this.additionalAccessibilityText}</span
+                >` : nothing}
           <span
             class="sbb-train-wagon__information-wrapper"
             ?hidden=${!this.listChildren.length && !this.label}
           >
             ${this.label ? html$1`<span aria-hidden="true" class="sbb-train-wagon__label">${this.label}</span>` : nothing}
             ${this.label && this.listChildren.length ? html$1`<sbb-divider
-                  orientation=${this.orientation === "vertical" ? "horizontal" : "vertical"}
-                  aria-hidden="true"
-                  class="sbb-train-wagon__label-divider"
-                ></sbb-divider>` : nothing}
+                    orientation=${this.orientation === "vertical" ? "horizontal" : "vertical"}
+                    aria-hidden="true"
+                    class="sbb-train-wagon__label-divider"
+                  ></sbb-divider>` : nothing}
             ${this.renderList({
 					class: "sbb-train-wagon__attribute-icon-list",
 					ariaLabel: i18nAdditionalWagonInformationHeading[this._language.current]

package/development/visual-checkbox.pure.js

@@ -118,19 +118,19 @@ let SbbVisualCheckboxElement = (() => {
 		render() {
 			return html`
       ${this.checked || this.indeterminate ? html`<svg
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-            width="100%"
-            height="100%"
-          >
-            <path
-              fill="none"
-              d=${this.indeterminate ? "M9 12H15" : "M8 12.3304L10.4615 15L16 9"}
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>` : nothing}
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              width="100%"
+              height="100%"
+            >
+              <path
+                fill="none"
+                d=${this.indeterminate ? "M9 12H15" : "M8 12.3304L10.4615 15L16 9"}
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>` : nothing}
     `;
 		}
 		constructor() {

package/download/_download.global.scss

@@ -0,0 +1,12 @@
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
+}
+
+@mixin forced-colors {
+  --sbb-download-label-color: CanvasText;
+  --sbb-download-info-color: CanvasText;
+}

package/download.js

@@ -0,0 +1 @@
+import{SbbDownloadElement as e,SbbDownloadInfoElement as t}from"./download.pure.js";export*from"./download.pure.js";e.define(),t.define();

package/download.pure.js

@@ -0,0 +1,21 @@
+import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbSecondaryButtonStaticElement as o}from"./button.pure.js";import{SbbElement as s,SbbLanguageController as c,SbbLinkBaseElement as l,SbbPropertyWatcherController as u,defaultDateAdapter as d,forceType as f,i18nDownload as p,i18nNonAccessible as m,omitEmptyConverter as h,readConfig as g,screenReaderOnlyStyles as _}from"./core.js";import{SbbIconNameMixin as v}from"./icon.pure.js";var y=`:host{--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent;--sbb-card-border-radius:var(--sbb-border-radius-4x);--sbb-card-animation-easing:var(--sbb-animation-easing);--sbb-card-border-style:solid;--sbb-card-padding-inline-default:var(--sbb-spacing-responsive-s);--sbb-card-padding-block-default:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block-default:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default);display:block}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}.sbb-download{--sbb-focus-outline-color:light-dark(var(--sbb-focus-outline-color-default),var(--sbb-focus-outline-color-dark));--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}.sbb-download:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}@media (forced-colors:active){.sbb-download{--sbb-title-color:var(--sbb-card-color)}}.sbb-download{align-items:center;gap:var(--sbb-download-gap);translate:0 var(--sbb-card-hover-shift,0);transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);text-decoration:none;display:flex}.sbb-download:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (any-hover:hover){:host(:hover) .sbb-download{--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover) .sbb-download{--sbb-card-border-color:Highlight}}.sbb-download__icon{flex:none}.sbb-download__content{flex-direction:column;flex:auto;min-width:0;display:flex}.sbb-download__label{overflow-wrap:break-word;color:var(--sbb-download-label-color);font-weight:700}.sbb-download__custom-content,.sbb-download__info{line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xxs);color:var(--sbb-download-info-color)}.sbb-download__button{flex:none;margin-inline-start:auto}
+`;const b=new Map([[`pdf`,`document-pdf-small`],[`xls`,`document-xls-small`],[`xlsx`,`document-xls-small`],[`ppt`,`document-ppt-small`],[`pptx`,`document-ppt-small`],[`doc`,`document-doc-small`],[`docx`,`document-doc-small`],[`zip`,`document-zip-small`],[`jpg`,`document-image-small`],[`jpeg`,`document-image-small`],[`png`,`document-image-small`],[`gif`,`document-image-small`],[`svg`,`document-image-small`],[`webp`,`document-image-small`]]);let x=(()=>{let s=v(l),u=[],d,m=[],g=[],x,S=[],C=[],w;return class extends s{constructor(){super(...arguments),this.#e=(t(this,u),t(this,m,`white`)),this.#t=(t(this,g),t(this,S,``)),this._languageController=(t(this,C),new c(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;d=[a({reflect:!0})],x=[f(),a({converter:h})],w=[a({type:Boolean,reflect:!1})],e(this,null,d,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:t},m,g),e(this,null,x,{kind:`accessor`,name:`label`,static:!1,private:!1,access:{has:e=>`label`in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},S,C),e(this,null,w,{kind:`setter`,name:`download`,static:!1,private:!1,access:{has:e=>`download`in e,set:(e,t)=>{e.download=t}},metadata:t},null,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download`}static{this.elementDependencies=[o]}static{this.styles=[_,i(y)]}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get label(){return this.#t}set label(e){this.#t=e}set download(e){}get download(){return!0}get fileName(){return this.href.split(/[?#]/)[0].split(`/`).filter(Boolean).at(-1)??``}get fileExtension(){let e=this.fileName;return e.includes(`.`)?e.split(`.`).at(-1)?.toLowerCase()??``:``}renderIconName(){if(this.iconName)return this.iconName;if(!this.href)return``;let e=this.fileExtension;return e&&b.get(e)||`document-standard-small`}firstUpdated(e){super.firstUpdated(e),this._updateDescribedByElements()}_updateDescribedByElements(){let e=this.shadowRoot?.querySelector?.(`a`);if(e){let t=this.shadowRoot?.querySelector?.(`.sbb-download__custom-content`);e.ariaDescribedByElements=[...t?[t]:[],...this._downloadInfoElements()]}}_downloadInfoElements(){return this.querySelectorAll?.(`sbb-download-info`)??[]}renderTemplate(){return n`
+      ${this.renderIconSlot(`sbb-download__icon`)}
+      <span class="sbb-download__content">
+        <span class="sbb-download__label">${this.label||this.fileName}</span>
+        <span class="sbb-screen-reader-only">
+          ${this._downloadInfoElements().length?r:n`&nbsp;${this.fileExtension}`}&nbsp;${p[this._languageController.current]}
+        </span>
+        <span class="sbb-download__custom-content" aria-hidden="true">
+          <slot></slot>
+        </span>
+        <span class="sbb-download__info">
+          <slot name="info" @slotchange="${()=>this._updateDescribedByElements()}"></slot>
+        </span>
+      </span>
+      <sbb-secondary-button-static
+        class="sbb-download__button"
+        icon-name="download-small"
+      ></sbb-secondary-button-static>
+    `}}})();var S=`:host{display:block}
+`;const C=[`B`,`KB`,`MB`,`GB`,`TB`];let w=(()=>{let r=s,o,l=[],p=[],_,v=[],y=[],b,x=[],w=[],T,E=[],D=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;o=[f(),a({converter:h})],_=[f(),a({converter:h})],b=[f(),a({converter:h})],T=[f(),a({attribute:`non-accessible`,type:Boolean})],e(this,null,o,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},l,p),e(this,null,_,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},v,y),e(this,null,b,{kind:`accessor`,name:`changed`,static:!1,private:!1,access:{has:e=>`changed`in e,get:e=>e.changed,set:(e,t)=>{e.changed=t}},metadata:t},x,w),e(this,null,T,{kind:`accessor`,name:`nonAccessible`,static:!1,private:!1,access:{has:e=>`nonAccessible`in e,get:e=>e.nonAccessible,set:(e,t)=>{e.nonAccessible=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-download-info`}static{this.styles=[i(S)]}#e;get type(){return this.#e}set type(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get changed(){return this.#n}set changed(e){this.#n=e}#r;get nonAccessible(){return this.#r}set nonAccessible(e){this.#r=e}constructor(){super(),this.#e=t(this,l,``),this.#t=(t(this,p),t(this,v,``)),this.#n=(t(this,y),t(this,x,``)),this.#r=(t(this,w),t(this,E,!1)),this._language=(t(this,D),new c(this)),this._dateAdapter=g().datetime?.dateAdapter??d,this._resolvedType=``,this._typeRedundant=!1,this._resolvedSize=``,this._resolvedChanged=``,this.internals.ariaHidden=`true`,this.addController(new u(this,()=>this.closest(`sbb-download`),{href:()=>this.requestUpdate(),label:()=>this.requestUpdate()}))}connectedCallback(){super.connectedCallback(),this.slot||=`info`,this.requestUpdate()}willUpdate(e){super.willUpdate(e),this._resolvedType=this._resolveType(),this._typeRedundant=this._isTypeRedundant(),e.has(`size`)&&(this._resolvedSize=this._resolveSize()),e.has(`changed`)&&(this._resolvedChanged=this._resolveChanged())}_resolveType(){return this.type||(this.closest?.(`sbb-download`)?.fileExtension.toUpperCase()??``)}_isTypeRedundant(){let e=this.closest?.(`sbb-download`);return!!e&&!e.label&&!!e.fileExtension}_resolveSize(){let e=this.size.trim();if(!e||!/^\d+$/.test(e))return e;let t=Number(e);if(t<=0)return`0 ${C[0]}`;let n=Math.min(Math.floor(Math.log(t)/Math.log(1024)),C.length-1);return`${(t/1024**n).toFixed(0)} ${C[n]}`}_resolveChanged(){if(!this.changed)return``;let e=this._dateAdapter.deserialize(this.changed);return this._dateAdapter.isValid(e)?this._dateAdapter.format(e,{weekdayStyle:`none`}):this.changed}render(){let e=[this._resolvedType,this._resolvedSize,this.nonAccessible?m[this._language.current]:``,this._resolvedChanged].filter(Boolean);return this.internals.ariaLabel=e.slice(this._typeRedundant&&this._resolvedType?1:0).join(`, `),n`${e.join(`, `)}`}}})();export{x as SbbDownloadElement,w as SbbDownloadInfoElement};