@sbb-esta/lyne-elements 5.2.0 → 5.4.0

package/development/chip/chip-group/chip-group.component.d.ts

@@ -1,5 +1,5 @@
 import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
-import { type FormRestoreReason, type FormRestoreState, SbbElement } from '../../core.ts';
+import { type FormRestoreReason, type FormRestoreState, SbbElement, type SbbElementType } from '../../core.ts';
 export declare class SbbChipInputTokenEndEvent<T = string> extends Event {
     /** The element that triggered the chip creation */
     origin: 'input' | 'autocomplete';
@@ -26,6 +26,7 @@ declare const SbbChipGroupElement_base: import("../../core.ts").AbstractConstruc
  */
 export declare class SbbChipGroupElement<T = string> extends SbbChipGroupElement_base {
     static readonly elementName: string;
+    static elementDependencies: SbbElementType[];
     static readonly role = "listbox";
     static styles: CSSResultGroup;
     static readonly events: {

package/development/chip.pure.js

@@ -237,6 +237,9 @@ let SbbChipGroupElement = (() => {
 		static {
 			this.elementName = "sbb-chip-group";
 		}
+		static {
+			this.elementDependencies = [SbbChipElement];
+		}
 		static {
 			this.role = "listbox";
 		}

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

@@ -18,6 +18,8 @@ export declare const i18nRestaurantWagonLabel: Record<string, string>;
 export declare const i18nBlockedPassage: Record<string, Record<string, string>>;
 export declare const i18nAdditionalWagonInformationHeading: Record<string, string>;
 export declare const i18nDeparture: Record<string, string>;
+export declare const i18nNonAccessible: Record<string, string>;
+export declare const i18nDownload: Record<string, string>;
 export declare const i18nDurationMinute: Record<string, Record<string, Record<string, string>>>;
 export declare const i18nDurationHour: Record<string, Record<string, Record<string, string>>>;
 export declare const i18nDurationDay: Record<string, Record<string, Record<string, string>>>;

package/development/core.js

@@ -1817,6 +1817,18 @@ const i18nDeparture = {
 	fr: "Départ",
 	it: "Partenza"
 };
+const i18nNonAccessible = {
+	de: "nicht barrierefrei",
+	en: "not accessible",
+	fr: "non accessible",
+	it: "non accessibile"
+};
+const i18nDownload = {
+	de: "herunterladen",
+	en: "download",
+	fr: "télécharger",
+	it: "scaricare"
+};
 const i18nDurationMinute = {
 	single: {
 		long: {
@@ -6148,4 +6160,4 @@ function removeAriaComboBoxAttributes(trigger) {
 }
 
 //#endregion
-export { DateAdapter, FORMAT_DATE, FRIDAY, ISO8601_FORMAT_DATE, IS_FOCUSABLE_QUERY, InteractivityChecker, IsFocusableConfig, MONDAY, NativeDateAdapter, SATURDAY, SUNDAY, SbbActionBaseElement, SbbAnimationCompleteMixin, SbbButtonBaseElement, SbbButtonLikeBaseElement, SbbDarkModeController, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbElement, SbbEscapableOverlayController, SbbFocusTrapController, SbbFocusVisibleWithinController, SbbFormAssociatedCheckboxMixin, SbbFormAssociatedInputMixin, SbbFormAssociatedMixin, SbbFormAssociatedRadioButtonMixin, SbbIdReferenceController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbLiveAnnouncer, SbbMediaMatcherController, SbbMediaQueryBreakpointLargeAndAbove, SbbMediaQueryBreakpointLargeAndBelow, SbbMediaQueryBreakpointSmallAndAbove, SbbMediaQueryBreakpointSmallAndBelow, SbbMediaQueryBreakpointUltraAndAbove, SbbMediaQueryBreakpointZeroAndAbove, SbbMediaQueryDarkMode, SbbMediaQueryForcedColors, SbbMediaQueryHover, SbbMediaQueryPointerCoarse, SbbNamedSlotListMixin, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbOverlayOutsidePointerEventListener, SbbOverlayPositionController, SbbPanelMixin, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbScrollHandler, SbbSelectionGroupBaseElement, SbbSelectionPanelMixin, SbbSlottedChangeEvent, SbbUpdateSchedulerMixin, THURSDAY, TUESDAY, TemporalDateAdapter, WEDNESDAY, appendAriaElements, buttonResetStyles, containsPierceShadowDom, defaultDateAdapter, forceType, forwardEvent, getElementPosition, getElementPositionHorizontal, getElementRectangle, getEventTarget, getNextElementIndex, getOverride, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nArrival, i18nBlockedPassage, i18nBreadcrumbEllipsisButtonLabel, i18nCalendarDateSelection, i18nCalendarWeekNumber, i18nCarouselArrowsNavigationHint, i18nCarouselItemAriaLabel, i18nCheckboxRequired, i18nChipDelete, i18nChipGroupInputDescription, i18nClass, i18nClearInput, i18nCloseAlert, i18nCloseDialog, i18nCloseNavigation, i18nCloseNotification, i18nClosePopover, i18nCloseSidebar, i18nClosedCompartmentLabel, i18nCollapsed, i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo, i18nCouchetteWagonLabel, i18nDateChangedTo, i18nDateInvalid, i18nDateMax, i18nDateMin, i18nDatePickerPlaceholder, i18nDeparture, i18nDialog, i18nDirection, i18nDurationDay, i18nDurationHour, i18nDurationMinute, i18nExpanded, i18nFileSelectorButtonLabel, i18nFileSelectorButtonLabelMultiple, i18nFileSelectorCurrentlySelected, i18nFileSelectorDeleteFile, i18nFileSelectorSubtitleLabel, i18nFileSelectorSubtitleLabelMultiple, i18nFlipCard, i18nFromPlatform, i18nGoBack, i18nInputRequired, i18nItemsPerPage, i18nLocomotiveLabel, i18nMapContainerButtonLabel, i18nMeansOfTransport, i18nNew, i18nNextDay, i18nNextMonth, i18nNextPage, i18nNextSlide, i18nNextYear, i18nNextYearRange, i18nOccupancy, i18nPage, i18nPaginatorOf, i18nPaginatorSelected, i18nPreviousDay, i18nPreviousMonth, i18nPreviousPage, i18nPreviousSlide, i18nPreviousYear, i18nPreviousYearRange, i18nRealTimeInfo, i18nRemainingCharacters, i18nRestaurantWagonLabel, i18nReverseCard, i18nSector, i18nSectorShort, i18nSelectNextDay, i18nSelectPreviousDay, i18nSelectionRequired, i18nShowCalendar, i18nSleepingWagonLabel, i18nSlide, i18nSupersaver, i18nTargetOpensInNewWindow, i18nTimeInputChange, i18nTimeInvalid, i18nTimeMax, i18nTimeMaxLength, i18nTimetableFormSwapButtonLabel, i18nToday, i18nTrain, i18nTrains, i18nTransferProcedure, i18nTransferProcedures, i18nTravelhints, i18nTripDuration, i18nTripQuayChange, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, i18nWalkingDistanceArrival, i18nWalkingDistanceDeparture, i18nYearMonthSelection, idReference, interactivityChecker, isAndroid, isArrowKeyOrPageKeysPressed, isArrowKeyPressed, isBlink, isChromium, isEdge, isEventOnElement, isEventPrevented, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, isFirefox, isIOS, isMacOS, isNextArrowKeyPressed, isNextjs, isPreviousArrowKeyPressed, isSafari, isTrident, isWebkit, isZeroAnimationDuration, listResetStyles, mergeConfig, omitEmptyConverter, pageScrollDisabled, plainDate, plainDateConverter, popoverResetStyles, preventScrollOnSpacebarPress, queueDomContentLoaded, radioButtonRegistry, readConfig, removeAriaComboBoxAttributes, removeAriaElements, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, sbbLiveAnnouncer, sbbOverlayOutsidePointerEventListener, screenReaderOnlyStyles, scrollbarStyles, setAriaComboBoxAttributes, setAriaOverlayTriggerProperties, setOrRemoveAttribute, setOverlayPosition, ɵstateController };
+export { DateAdapter, FORMAT_DATE, FRIDAY, ISO8601_FORMAT_DATE, IS_FOCUSABLE_QUERY, InteractivityChecker, IsFocusableConfig, MONDAY, NativeDateAdapter, SATURDAY, SUNDAY, SbbActionBaseElement, SbbAnimationCompleteMixin, SbbButtonBaseElement, SbbButtonLikeBaseElement, SbbDarkModeController, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbElement, SbbEscapableOverlayController, SbbFocusTrapController, SbbFocusVisibleWithinController, SbbFormAssociatedCheckboxMixin, SbbFormAssociatedInputMixin, SbbFormAssociatedMixin, SbbFormAssociatedRadioButtonMixin, SbbIdReferenceController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbLiveAnnouncer, SbbMediaMatcherController, SbbMediaQueryBreakpointLargeAndAbove, SbbMediaQueryBreakpointLargeAndBelow, SbbMediaQueryBreakpointSmallAndAbove, SbbMediaQueryBreakpointSmallAndBelow, SbbMediaQueryBreakpointUltraAndAbove, SbbMediaQueryBreakpointZeroAndAbove, SbbMediaQueryDarkMode, SbbMediaQueryForcedColors, SbbMediaQueryHover, SbbMediaQueryPointerCoarse, SbbNamedSlotListMixin, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbOverlayOutsidePointerEventListener, SbbOverlayPositionController, SbbPanelMixin, SbbPropertyWatcherController, SbbReadonlyMixin, SbbRequiredMixin, SbbScrollHandler, SbbSelectionGroupBaseElement, SbbSelectionPanelMixin, SbbSlottedChangeEvent, SbbUpdateSchedulerMixin, THURSDAY, TUESDAY, TemporalDateAdapter, WEDNESDAY, appendAriaElements, buttonResetStyles, containsPierceShadowDom, defaultDateAdapter, forceType, forwardEvent, getElementPosition, getElementPositionHorizontal, getElementRectangle, getEventTarget, getNextElementIndex, getOverride, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nArrival, i18nBlockedPassage, i18nBreadcrumbEllipsisButtonLabel, i18nCalendarDateSelection, i18nCalendarWeekNumber, i18nCarouselArrowsNavigationHint, i18nCarouselItemAriaLabel, i18nCheckboxRequired, i18nChipDelete, i18nChipGroupInputDescription, i18nClass, i18nClearInput, i18nCloseAlert, i18nCloseDialog, i18nCloseNavigation, i18nCloseNotification, i18nClosePopover, i18nCloseSidebar, i18nClosedCompartmentLabel, i18nCollapsed, i18nConnectionFrom, i18nConnectionRoundtrip, i18nConnectionTo, i18nCouchetteWagonLabel, i18nDateChangedTo, i18nDateInvalid, i18nDateMax, i18nDateMin, i18nDatePickerPlaceholder, i18nDeparture, i18nDialog, i18nDirection, i18nDownload, i18nDurationDay, i18nDurationHour, i18nDurationMinute, i18nExpanded, i18nFileSelectorButtonLabel, i18nFileSelectorButtonLabelMultiple, i18nFileSelectorCurrentlySelected, i18nFileSelectorDeleteFile, i18nFileSelectorSubtitleLabel, i18nFileSelectorSubtitleLabelMultiple, i18nFlipCard, i18nFromPlatform, i18nGoBack, i18nInputRequired, i18nItemsPerPage, i18nLocomotiveLabel, i18nMapContainerButtonLabel, i18nMeansOfTransport, i18nNew, i18nNextDay, i18nNextMonth, i18nNextPage, i18nNextSlide, i18nNextYear, i18nNextYearRange, i18nNonAccessible, i18nOccupancy, i18nPage, i18nPaginatorOf, i18nPaginatorSelected, i18nPreviousDay, i18nPreviousMonth, i18nPreviousPage, i18nPreviousSlide, i18nPreviousYear, i18nPreviousYearRange, i18nRealTimeInfo, i18nRemainingCharacters, i18nRestaurantWagonLabel, i18nReverseCard, i18nSector, i18nSectorShort, i18nSelectNextDay, i18nSelectPreviousDay, i18nSelectionRequired, i18nShowCalendar, i18nSleepingWagonLabel, i18nSlide, i18nSupersaver, i18nTargetOpensInNewWindow, i18nTimeInputChange, i18nTimeInvalid, i18nTimeMax, i18nTimeMaxLength, i18nTimetableFormSwapButtonLabel, i18nToday, i18nTrain, i18nTrains, i18nTransferProcedure, i18nTransferProcedures, i18nTravelhints, i18nTripDuration, i18nTripQuayChange, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, i18nWalkingDistanceArrival, i18nWalkingDistanceDeparture, i18nYearMonthSelection, idReference, interactivityChecker, isAndroid, isArrowKeyOrPageKeysPressed, isArrowKeyPressed, isBlink, isChromium, isEdge, isEventOnElement, isEventPrevented, isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader, isFirefox, isIOS, isMacOS, isNextArrowKeyPressed, isNextjs, isPreviousArrowKeyPressed, isSafari, isTrident, isWebkit, isZeroAnimationDuration, listResetStyles, mergeConfig, omitEmptyConverter, pageScrollDisabled, plainDate, plainDateConverter, popoverResetStyles, preventScrollOnSpacebarPress, queueDomContentLoaded, radioButtonRegistry, readConfig, removeAriaComboBoxAttributes, removeAriaElements, removeAriaOverlayTriggerProperties, sbbInputModalityDetector, sbbLiveAnnouncer, sbbOverlayOutsidePointerEventListener, screenReaderOnlyStyles, scrollbarStyles, setAriaComboBoxAttributes, setAriaOverlayTriggerProperties, setOrRemoveAttribute, setOverlayPosition, ɵstateController };

package/development/download/download/download.component.d.ts

@@ -0,0 +1,51 @@
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { type SbbElementType, SbbLinkBaseElement } from '../../core.ts';
+declare const SbbDownloadElement_base: import("../../core.ts").AbstractConstructor<import("../../icon.pure.ts").SbbIconNameMixinType> & typeof SbbLinkBaseElement;
+/**
+ * It displays a downloadable document, styled as a card.
+ *
+ * Inherits link properties from `SbbLinkBaseElement`: `href`, `target`, `rel`
+ * and `accessibilityLabel`. The download behavior is always enabled.
+ *
+ * @slot - Use the unnamed slot to add custom content. Optional.
+ * @slot info - Slot used to render a `sbb-download-info`. A `sbb-download-info`
+ * placed in the unnamed slot is automatically moved to this slot. Optional.
+ * @slot icon - Use this slot to display a custom icon, by providing a
+ * `sbb-icon` component. Optional.
+ */
+export declare class SbbDownloadElement extends SbbDownloadElement_base {
+    static readonly elementName: string;
+    static elementDependencies: SbbElementType[];
+    static styles: CSSResultGroup;
+    /** Option to set the component's background color. */
+    accessor color: 'white' | 'milk';
+    /** The label of the download. Defaults to the file name of the `href`. */
+    accessor label: string;
+    /**
+     * The download behavior is always enabled and handled internally, therefore
+     * this property cannot be disabled and is not reflected to the host element.
+     * @default true
+     */
+    set download(_value: boolean);
+    get download(): boolean;
+    /** The file name extracted from the `href` (e.g. `report.pdf`). */
+    get fileName(): string;
+    /** The lower-cased file extension extracted from the `href` (e.g. `pdf`), if any. */
+    get fileExtension(): string;
+    private _languageController;
+    /**
+     * Provides a default icon based on the `href` extension, if no icon name is
+     * set.
+     */
+    protected renderIconName(): string;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    private _updateDescribedByElements;
+    private _downloadInfoElements;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-download': SbbDownloadElement;
+    }
+}
+export {};

package/development/download/download-info/download-info.component.d.ts

@@ -0,0 +1,59 @@
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { SbbElement } from '../../core.ts';
+/**
+ * It displays metadata of a document; used within a `sbb-download`.
+ */
+export declare class SbbDownloadInfoElement extends SbbElement {
+    static readonly elementName: string;
+    static styles: CSSResultGroup;
+    /**
+     * The type of the document (e.g. `PDF`). Falls back to the extension of the
+     * parent `sbb-download`.
+     */
+    accessor type: string;
+    /**
+     * The size of the document. If the value contains non-numeric characters it
+     * is rendered as is, otherwise it is interpreted as a number of bytes and
+     * shortened to the closest unit.
+     */
+    accessor size: string;
+    /** The date of the latest change of the document, as an ISO 8601 string. */
+    accessor changed: string;
+    /** Whether the document is not accessible. */
+    accessor nonAccessible: boolean;
+    private _language;
+    private _dateAdapter;
+    private _resolvedType;
+    private _typeRedundant;
+    private _resolvedSize;
+    private _resolvedChanged;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /** Resolves the type, falling back to the extension of the parent download's
+     * href.
+     */
+    private _resolveType;
+    /**
+     * Whether the type is already conveyed by the parent download's label.
+     * When the parent download has no explicit `label`, it falls back to the file
+     * name (e.g. `some-file.pdf`), which already includes the extension. In that
+     * case the type is redundant for assistive technology.
+     */
+    private _isTypeRedundant;
+    /**
+     * Formats the size, shortening a pure number of bytes to the closest unit.
+     */
+    private _resolveSize;
+    /**
+     * Formats the ISO 8601 change date using the configured date adapter, or
+     * renders it as is if invalid.
+     */
+    private _resolveChanged;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-download-info': SbbDownloadInfoElement;
+    }
+}

package/development/download.d.ts

@@ -0,0 +1 @@
+export * from './download.pure.ts';

package/development/download.js

@@ -0,0 +1,10 @@
+import { SbbDownloadElement, SbbDownloadInfoElement } from "./download.pure.js";
+
+export * from "./download.pure.js"
+
+//#region src/elements/download.ts
+/** @entrypoint */
+SbbDownloadElement.define();
+SbbDownloadInfoElement.define();
+
+//#endregion

package/development/download.pure.d.ts

@@ -0,0 +1,3 @@
+/** @entrypoint */
+export * from './download/download/download.component.ts';
+export * from './download/download-info/download-info.component.ts';

package/development/download.pure.js

@@ -0,0 +1,436 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbSecondaryButtonStaticElement } from "./button.pure.js";
+import { SbbElement, SbbLanguageController, SbbLinkBaseElement, SbbPropertyWatcherController, defaultDateAdapter, forceType, i18nDownload, i18nNonAccessible, omitEmptyConverter, readConfig, screenReaderOnlyStyles } from "./core.js";
+import { SbbIconNameMixin } from "./icon.pure.js";
+
+//#region src/elements/download/download/download.scss?inline
+var download_default = ":host {\n  --sbb-card-background-color: var(--sbb-background-color-1);\n  --sbb-card-border-color: transparent;\n  --sbb-card-border-radius: var(--sbb-border-radius-4x);\n  --sbb-card-animation-easing: var(--sbb-animation-easing);\n  --sbb-card-border-style: solid;\n  --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);\n  --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);\n  --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);\n  --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n  --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n  --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n  display: block;\n}\n\n:host(:where([color=white])) {\n  --sbb-card-background-color: var(--sbb-background-color-1);\n  --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n  --sbb-card-background-color: var(--sbb-background-color-3);\n  --sbb-card-border-color: transparent;\n}\n\n.sbb-download {\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  --sbb-card-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-1x)\n  );\n  display: block;\n  position: relative;\n  padding-inline: var(--sbb-card-padding-inline);\n  padding-block: var(--sbb-card-padding-block);\n  border-radius: var(--sbb-card-border-radius);\n  background-color: var(--sbb-card-background-color);\n  box-shadow: none;\n  transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n  color: var(--sbb-card-color);\n}\n.sbb-download::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: transparent;\n  border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n  border-radius: var(--sbb-card-border-radius);\n  pointer-events: none;\n}\n@media (forced-colors: active) {\n  .sbb-download {\n    --sbb-title-color: var(--sbb-card-color);\n  }\n}\n.sbb-download {\n  display: flex;\n  align-items: center;\n  gap: var(--sbb-download-gap);\n  text-decoration: none;\n  translate: 0 var(--sbb-card-hover-shift, 0);\n  transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-download:focus-visible {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n  :host(:hover) .sbb-download {\n    --sbb-card-hover-shift: -0.125rem;\n    box-shadow: var(--sbb-box-shadow-level-9-hard);\n  }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n  :host(:hover) .sbb-download {\n    --sbb-card-border-color: Highlight;\n  }\n}\n\n.sbb-download__icon {\n  flex: 0 0 auto;\n}\n\n.sbb-download__content {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.sbb-download__label {\n  overflow-wrap: break-word;\n  font-weight: bold;\n  color: var(--sbb-download-label-color);\n}\n\n.sbb-download__custom-content,\n.sbb-download__info {\n  line-height: var(--sbb-typo-line-height-text);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  font-size: var(--sbb-text-font-size-xxs);\n  color: var(--sbb-download-info-color);\n}\n\n.sbb-download__button {\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n";
+
+//#endregion
+//#region src/elements/download/download/download.component.ts
+const fileExtensionIcons = /* @__PURE__ */ 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"]
+]);
+/**
+* It displays a downloadable document, styled as a card.
+*
+* Inherits link properties from `SbbLinkBaseElement`: `href`, `target`, `rel`
+* and `accessibilityLabel`. The download behavior is always enabled.
+*
+* @slot - Use the unnamed slot to add custom content. Optional.
+* @slot info - Slot used to render a `sbb-download-info`. A `sbb-download-info`
+* placed in the unnamed slot is automatically moved to this slot. Optional.
+* @slot icon - Use this slot to display a custom icon, by providing a
+* `sbb-icon` component. Optional.
+*/
+let SbbDownloadElement = (() => {
+	let _classSuper = SbbIconNameMixin(SbbLinkBaseElement);
+	let _instanceExtraInitializers = [];
+	let _color_decorators;
+	let _color_initializers = [];
+	let _color_extraInitializers = [];
+	let _label_decorators;
+	let _label_initializers = [];
+	let _label_extraInitializers = [];
+	let _set_download_decorators;
+	return class SbbDownloadElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.#color_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _color_initializers, "white"));
+			this.#label_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _label_initializers, ""));
+			this._languageController = (__runInitializers(this, _label_extraInitializers), new SbbLanguageController(this));
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_color_decorators = [property({ reflect: true })];
+			_label_decorators = [forceType(), property({ converter: omitEmptyConverter })];
+			_set_download_decorators = [property({
+				type: Boolean,
+				reflect: false
+			})];
+			__esDecorate(this, null, _color_decorators, {
+				kind: "accessor",
+				name: "color",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "color" in obj,
+					get: (obj) => obj.color,
+					set: (obj, value) => {
+						obj.color = value;
+					}
+				},
+				metadata: _metadata
+			}, _color_initializers, _color_extraInitializers);
+			__esDecorate(this, null, _label_decorators, {
+				kind: "accessor",
+				name: "label",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "label" in obj,
+					get: (obj) => obj.label,
+					set: (obj, value) => {
+						obj.label = value;
+					}
+				},
+				metadata: _metadata
+			}, _label_initializers, _label_extraInitializers);
+			__esDecorate(this, null, _set_download_decorators, {
+				kind: "setter",
+				name: "download",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "download" in obj,
+					set: (obj, value) => {
+						obj.download = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-download";
+		}
+		static {
+			this.elementDependencies = [SbbSecondaryButtonStaticElement];
+		}
+		static {
+			this.styles = [screenReaderOnlyStyles, unsafeCSS(download_default)];
+		}
+		#color_accessor_storage;
+		/** Option to set the component's background color. */
+		get color() {
+			return this.#color_accessor_storage;
+		}
+		set color(value) {
+			this.#color_accessor_storage = value;
+		}
+		#label_accessor_storage;
+		/** The label of the download. Defaults to the file name of the `href`. */
+		get label() {
+			return this.#label_accessor_storage;
+		}
+		set label(value) {
+			this.#label_accessor_storage = value;
+		}
+		/**
+		* The download behavior is always enabled and handled internally, therefore
+		* this property cannot be disabled and is not reflected to the host element.
+		* @default true
+		*/
+		set download(_value) {}
+		get download() {
+			return true;
+		}
+		/** The file name extracted from the `href` (e.g. `report.pdf`). */
+		get fileName() {
+			return this.href.split(/[?#]/)[0].split("/").filter(Boolean).at(-1) ?? "";
+		}
+		/** The lower-cased file extension extracted from the `href` (e.g. `pdf`), if any. */
+		get fileExtension() {
+			const fileName = this.fileName;
+			return fileName.includes(".") ? fileName.split(".").at(-1)?.toLowerCase() ?? "" : "";
+		}
+		/**
+		* Provides a default icon based on the `href` extension, if no icon name is
+		* set.
+		*/
+		renderIconName() {
+			if (this.iconName) return this.iconName;
+			else if (!this.href) return "";
+			const extension = this.fileExtension;
+			return extension && fileExtensionIcons.get(extension) || "document-standard-small";
+		}
+		firstUpdated(_changedProperties) {
+			super.firstUpdated(_changedProperties);
+			this._updateDescribedByElements();
+		}
+		_updateDescribedByElements() {
+			const link = this.shadowRoot?.querySelector?.("a");
+			if (link) {
+				const customContentElement = this.shadowRoot?.querySelector?.(".sbb-download__custom-content");
+				link.ariaDescribedByElements = [...customContentElement ? [customContentElement] : [], ...this._downloadInfoElements()];
+			}
+		}
+		_downloadInfoElements() {
+			return this.querySelectorAll?.("sbb-download-info") ?? [];
+		}
+		renderTemplate() {
+			return html`
+      ${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 ? html`&nbsp;${this.fileExtension}` : nothing}&nbsp;${i18nDownload[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>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/download/download-info/download-info.scss?inline
+var download_info_default = ":host {\n  display: block;\n}\n";
+
+//#endregion
+//#region src/elements/download/download-info/download-info.component.ts
+const fileSizeSuffixes = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB"
+];
+/**
+* It displays metadata of a document; used within a `sbb-download`.
+*/
+let SbbDownloadInfoElement = (() => {
+	let _classSuper = SbbElement;
+	let _type_decorators;
+	let _type_initializers = [];
+	let _type_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	let _changed_decorators;
+	let _changed_initializers = [];
+	let _changed_extraInitializers = [];
+	let _nonAccessible_decorators;
+	let _nonAccessible_initializers = [];
+	let _nonAccessible_extraInitializers = [];
+	return class SbbDownloadInfoElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_type_decorators = [forceType(), property({ converter: omitEmptyConverter })];
+			_size_decorators = [forceType(), property({ converter: omitEmptyConverter })];
+			_changed_decorators = [forceType(), property({ converter: omitEmptyConverter })];
+			_nonAccessible_decorators = [forceType(), property({
+				attribute: "non-accessible",
+				type: Boolean
+			})];
+			__esDecorate(this, null, _type_decorators, {
+				kind: "accessor",
+				name: "type",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "type" in obj,
+					get: (obj) => obj.type,
+					set: (obj, value) => {
+						obj.type = value;
+					}
+				},
+				metadata: _metadata
+			}, _type_initializers, _type_extraInitializers);
+			__esDecorate(this, null, _size_decorators, {
+				kind: "accessor",
+				name: "size",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "size" in obj,
+					get: (obj) => obj.size,
+					set: (obj, value) => {
+						obj.size = value;
+					}
+				},
+				metadata: _metadata
+			}, _size_initializers, _size_extraInitializers);
+			__esDecorate(this, null, _changed_decorators, {
+				kind: "accessor",
+				name: "changed",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "changed" in obj,
+					get: (obj) => obj.changed,
+					set: (obj, value) => {
+						obj.changed = value;
+					}
+				},
+				metadata: _metadata
+			}, _changed_initializers, _changed_extraInitializers);
+			__esDecorate(this, null, _nonAccessible_decorators, {
+				kind: "accessor",
+				name: "nonAccessible",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "nonAccessible" in obj,
+					get: (obj) => obj.nonAccessible,
+					set: (obj, value) => {
+						obj.nonAccessible = value;
+					}
+				},
+				metadata: _metadata
+			}, _nonAccessible_initializers, _nonAccessible_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-download-info";
+		}
+		static {
+			this.styles = [unsafeCSS(download_info_default)];
+		}
+		#type_accessor_storage;
+		/**
+		* The type of the document (e.g. `PDF`). Falls back to the extension of the
+		* parent `sbb-download`.
+		*/
+		get type() {
+			return this.#type_accessor_storage;
+		}
+		set type(value) {
+			this.#type_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* The size of the document. If the value contains non-numeric characters it
+		* is rendered as is, otherwise it is interpreted as a number of bytes and
+		* shortened to the closest unit.
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		#changed_accessor_storage;
+		/** The date of the latest change of the document, as an ISO 8601 string. */
+		get changed() {
+			return this.#changed_accessor_storage;
+		}
+		set changed(value) {
+			this.#changed_accessor_storage = value;
+		}
+		#nonAccessible_accessor_storage;
+		/** Whether the document is not accessible. */
+		get nonAccessible() {
+			return this.#nonAccessible_accessor_storage;
+		}
+		set nonAccessible(value) {
+			this.#nonAccessible_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.#type_accessor_storage = __runInitializers(this, _type_initializers, "");
+			this.#size_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _size_initializers, ""));
+			this.#changed_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _changed_initializers, ""));
+			this.#nonAccessible_accessor_storage = (__runInitializers(this, _changed_extraInitializers), __runInitializers(this, _nonAccessible_initializers, false));
+			this._language = (__runInitializers(this, _nonAccessible_extraInitializers), new SbbLanguageController(this));
+			this._dateAdapter = readConfig().datetime?.dateAdapter ?? defaultDateAdapter;
+			this._resolvedType = "";
+			this._typeRedundant = false;
+			this._resolvedSize = "";
+			this._resolvedChanged = "";
+			/** @internal **/
+			this.internals.ariaHidden = "true";
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-download"), {
+				href: () => this.requestUpdate(),
+				label: () => this.requestUpdate()
+			}));
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.slot ||= "info";
+			this.requestUpdate();
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			this._resolvedType = this._resolveType();
+			this._typeRedundant = this._isTypeRedundant();
+			if (changedProperties.has("size")) this._resolvedSize = this._resolveSize();
+			if (changedProperties.has("changed")) this._resolvedChanged = this._resolveChanged();
+		}
+		/** Resolves the type, falling back to the extension of the parent download's
+		* href.
+		*/
+		_resolveType() {
+			return this.type || (this.closest?.("sbb-download")?.fileExtension.toUpperCase() ?? "");
+		}
+		/**
+		* Whether the type is already conveyed by the parent download's label.
+		* When the parent download has no explicit `label`, it falls back to the file
+		* name (e.g. `some-file.pdf`), which already includes the extension. In that
+		* case the type is redundant for assistive technology.
+		*/
+		_isTypeRedundant() {
+			const parent = this.closest?.("sbb-download");
+			return !!parent && !parent.label && !!parent.fileExtension;
+		}
+		/**
+		* Formats the size, shortening a pure number of bytes to the closest unit.
+		*/
+		_resolveSize() {
+			const size = this.size.trim();
+			if (!size || !/^\d+$/.test(size)) return size;
+			const bytes = Number(size);
+			if (bytes <= 0) return `0 ${fileSizeSuffixes[0]}`;
+			const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), fileSizeSuffixes.length - 1);
+			return `${(bytes / 1024 ** i).toFixed(0)} ${fileSizeSuffixes[i]}`;
+		}
+		/**
+		* Formats the ISO 8601 change date using the configured date adapter, or
+		* renders it as is if invalid.
+		*/
+		_resolveChanged() {
+			if (!this.changed) return "";
+			const date = this._dateAdapter.deserialize(this.changed);
+			if (!this._dateAdapter.isValid(date)) return this.changed;
+			return this._dateAdapter.format(date, { weekdayStyle: "none" });
+		}
+		render() {
+			const separator = ", ";
+			const items = [
+				this._resolvedType,
+				this._resolvedSize,
+				this.nonAccessible ? i18nNonAccessible[this._language.current] : "",
+				this._resolvedChanged
+			].filter(Boolean);
+			this.internals.ariaLabel = items.slice(this._typeRedundant && this._resolvedType ? 1 : 0).join(separator);
+			return html`${items.join(separator)}`;
+		}
+	};
+})();
+
+//#endregion
+export { SbbDownloadElement, SbbDownloadInfoElement };

package/development/flip-card.pure.js

@@ -232,7 +232,7 @@ let SbbFlipCardElement = (() => {
 		}
 		/** Returns the card details content element wrapper. */
 		get _detailsContentElement() {
-			return this.details.shadowRoot.firstElementChild;
+			return this.details?.shadowRoot?.querySelector(".sbb-flip-card-details") ?? null;
 		}
 		/** Whether the flip card is flipped. */
 		get isFlipped() {
@@ -268,10 +268,11 @@ let SbbFlipCardElement = (() => {
 		/** Toggles the state of the sbb-flip-card. */
 		toggle() {
 			this._flipped = !this._flipped;
-			if (this._flipped) {
+			const detailsContentElement = this._detailsContentElement;
+			if (this._flipped && detailsContentElement) {
 				this._setCardDetailsHeight();
-				this._cardDetailsResizeObserver.observe(this._detailsContentElement);
-			} else this._cardDetailsResizeObserver.unobserve(this._detailsContentElement);
+				this._cardDetailsResizeObserver.observe(detailsContentElement);
+			} else if (detailsContentElement) this._cardDetailsResizeObserver.unobserve(detailsContentElement);
 			this.toggleState("flipped", this._flipped);
 			ɵstateController(this.details)?.toggle("flipped", this._flipped);
 			this.summary.inert = this._flipped;