@sbb-esta/lyne-elements 4.9.0 → 4.10.0

package/file-selector/file-selector/file-selector.component.js

@@ -1,17 +1,17 @@
-import "lit";
 import { SbbElement as e } from "../../core/base-elements.js";
 import { boxSizingStyles as t } from "../../core/styles.js";
 import { html as n } from "lit/static-html.js";
-import { ref as r } from "lit/directives/ref.js";
-import { SbbFileSelectorCommonElementMixin as i, fileSelectorCommonStyle as a } from "../common/file-selector-common.js";
-import "../../button/secondary-button-static.js";
+import { SbbSecondaryButtonStaticElement as r } from "../../button.pure.js";
+import { ref as i } from "lit/directives/ref.js";
+import { SbbFileSelectorCommonElementMixin as a, fileSelectorCommonStyle as o } from "../common/file-selector-common.js";
 //#region src/elements/file-selector/file-selector/file-selector.component.ts
-var o = class extends i(e) {
+r.define();
+var s = class extends a(e) {
 	static {
 		this.elementName = "sbb-file-selector";
 	}
 	static {
-		this.styles = [t, a];
+		this.styles = [t, o];
 	}
 	static {
 		this.events = { filechanged: "filechanged" };
@@ -23,7 +23,7 @@ var o = class extends i(e) {
           size=${this.size}
           icon-name="folder-open-small"
           ?disabled=${this.disabled || this.formDisabled}
-          ${r((e) => {
+          ${i((e) => {
 			this.loadButton = e;
 		})}
         >
@@ -35,4 +35,4 @@ var o = class extends i(e) {
 	}
 };
 //#endregion
-export { o as SbbFileSelectorElement };
+export { s as SbbFileSelectorElement };

package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../file-selector-dropzone.component-DhPsfRQk.js";
+import { t as e } from "../../file-selector-dropzone.component-CBKsZsC2.js";
 export { e as SbbFileSelectorDropzoneElement };

package/file-selector/file-selector-dropzone.js

@@ -1,4 +1,4 @@
-import { t as e } from "../file-selector-dropzone.component-DhPsfRQk.js";
+import { t as e } from "../file-selector-dropzone.component-CBKsZsC2.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/file-selector/file-selector-dropzone.js' has been deprecated.\nUse either '@sbb-esta/elements/file-selector.js' or '@sbb-esta/elements/file-selector.pure.js' instead.");
 //#endregion
 export { e as SbbFileSelectorDropzoneElement };

package/{file-selector-common-Bk07ovZm.js → file-selector-common-DN4vHMpP.js}

@@ -1,5 +1,5 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, nothing as r } from "lit";
+import { nothing as n, unsafeCSS as r } from "lit";
 import { property as i } from "lit/decorators.js";
 import "./core/base-elements.js";
 import { forceType as a } from "./core/decorators.js";
@@ -7,15 +7,19 @@ import { isLean as o } from "./core/dom.js";
 import { forwardEvent as s } from "./core/eventing.js";
 import { SbbDisabledMixin as c, SbbFormAssociatedMixin as l, ɵstateController as u } from "./core/mixins.js";
 import { html as d, unsafeStatic as f } from "lit/static-html.js";
-import { SbbLanguageController as p } from "./core/controllers.js";
-import { i18nFileSelectorButtonLabel as m, i18nFileSelectorButtonLabelMultiple as h, i18nFileSelectorCurrentlySelected as g, i18nFileSelectorDeleteFile as _ } from "./core/i18n.js";
-import { ref as v } from "lit/directives/ref.js";
-import { sbbInputModalityDetector as y } from "./core/a11y.js";
-import "./button/secondary-button.js";
-//#region src/elements/file-selector/common/file-selector-common.scss?lit&inline
-var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-file-selector-background-color: var(--sbb-background-color-1);--sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media(forced-colors:active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-background-color-3);--sbb-file-selector-border-color: var(--sbb-color-storm);--sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite))}@media(forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal);color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}`, x = (n) => (() => {
-	let b = c(l(n)), x = [], S, C = [], w = [], T, E = [], D = [], O, k = [], A = [], j, M = [], N = [], P, F = [], I = [], L, R;
-	return class extends b {
+import { SbbSecondaryButtonElement as p } from "./button.pure.js";
+import { SbbLanguageController as m } from "./core/controllers.js";
+import { i18nFileSelectorButtonLabel as h, i18nFileSelectorButtonLabelMultiple as g, i18nFileSelectorCurrentlySelected as _, i18nFileSelectorDeleteFile as v } from "./core/i18n.js";
+import { ref as y } from "lit/directives/ref.js";
+import { sbbInputModalityDetector as b } from "./core/a11y.js";
+//#region src/elements/file-selector/common/file-selector-common.scss?inline
+var x = ":host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-file-selector-background-color: var(--sbb-background-color-1);--sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media(forced-colors:active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-background-color-3);--sbb-file-selector-border-color: var(--sbb-color-storm);--sbb-file-selector-border-color: light-dark(var(--sbb-color-storm), var(--sbb-color-anthracite))}@media(forced-colors:active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal);color:light-dark(var(--sbb-color-metal),var(--sbb-color-smoke))}:host(:not(:is(:state(slotted-error),[state--slotted-error]))) .sbb-file-selector__error{display:none}";
+//#endregion
+//#region src/elements/file-selector/common/file-selector-common.ts
+p.define();
+var S = r(x), C = (r) => (() => {
+	let p = c(l(r)), x = [], S, C = [], w = [], T, E = [], D = [], O, k = [], A = [], j, M = [], N = [], P, F = [], I = [], L, R;
+	return class extends p {
 		constructor() {
 			super(...arguments), this.#e = (t(this, x), t(this, C, o() ? "s" : "m")), this.#t = (t(this, w), t(this, E, !1)), this.#n = (t(this, D), t(this, k, "default")), this.#r = (t(this, A), t(this, M, "")), this.#i = (t(this, N), t(this, F, "")), this._files = (t(this, I), []), this._suffixes = [
 				"B",
@@ -23,10 +27,10 @@ var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selecto
 				"MB",
 				"GB",
 				"TB"
-			], this.language = new p(this), this._counter = 0;
+			], this.language = new m(this), this._counter = 0;
 		}
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
 			S = [i({ reflect: !0 })], T = [a(), i({ type: Boolean })], O = [i({ attribute: "multiple-mode" })], j = [a(), i()], P = [a(), i({ attribute: "accessibility-label" })], L = [i({ attribute: !1 })], R = [i({ attribute: !1 })], e(this, null, S, {
 				kind: "accessor",
 				name: "size",
@@ -192,7 +196,7 @@ var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selecto
 			return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
 		}
 		_onFocus() {
-			y.mostRecentModality === "keyboard" && u(this.loadButton).add("focus-visible");
+			b.mostRecentModality === "keyboard" && u(this.loadButton).add("focus-visible");
 		}
 		_onBlur() {
 			u(this.loadButton).delete("focus-visible");
@@ -206,7 +210,7 @@ var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selecto
 			!this.multiple && e.length > 1 || this.accept && t.some((e) => !this.accept.split(",").some((t) => e.name.endsWith(t.trim()))) || (!this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = t : this.files = t.filter((e) => this.files.findIndex((t) => this._checkFileEquality(e, t)) === -1).concat(this.files), this._updateA11yLiveRegion(), this._dispatchFileChangedEvent());
 		}
 		getButtonLabel() {
-			return this.multiple ? h[this.language.current] : m[this.language.current];
+			return this.multiple ? g[this.language.current] : h[this.language.current];
 		}
 		_removeFile(e) {
 			this.files = this.files.filter((t) => !this._checkFileEquality(e, t)), this._updateA11yLiveRegion(), this.dispatchEvent(new InputEvent("input", {
@@ -226,7 +230,7 @@ var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selecto
 			return `${(e / 1024 ** t).toFixed(0)} ${this._suffixes[t]}`;
 		}
 		_updateA11yLiveRegion() {
-			this._liveRegion.innerText = g(this.files.map((e) => e.name))[this.language.current];
+			this._liveRegion.innerText = _(this.files.map((e) => e.name))[this.language.current];
 		}
 		_renderFileList() {
 			let e = this.files.length > 1 ? {
@@ -248,7 +252,7 @@ var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selecto
                 size='${this.size}'
                 icon-name='trash-small'
                 @click='${() => this._removeFile(t)}'
-                aria-label='${`${_[this.language.current]} - ${t.name}`}'
+                aria-label='${`${v[this.language.current]} - ${t.name}`}'
               ></sbb-secondary-button>
             </${f(e.ELEMENT)}>`)}
       </${f(e.WRAPPER)}>
@@ -285,12 +289,12 @@ var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selecto
                 type="file"
                 ?disabled="${this.disabled || this.formDisabled}"
                 ?multiple="${this.multiple}"
-                accept="${this.accept || r}"
-                aria-label="${e || r}"
+                accept="${this.accept || n}"
+                aria-label="${e || n}"
                 @change="${this._readFiles}"
                 @focus="${this._onFocus}"
                 @blur="${this._onBlur}"
-                ${v((e) => {
+                ${y((e) => {
 				this._hiddenInput = e;
 			})}
               />`)}
@@ -298,9 +302,9 @@ var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selecto
           <p
             role="status"
             class="sbb-file-selector__visually-hidden"
-            ${v((e) => this._liveRegion = e)}
+            ${y((e) => this._liveRegion = e)}
           ></p>
-          ${this.files.length > 0 ? this._renderFileList() : r}
+          ${this.files.length > 0 ? this._renderFileList() : n}
           <div class="sbb-file-selector__error">
             <slot name="error"></slot>
           </div>
@@ -310,4 +314,4 @@ var b = n`:host{--sbb-file-selector-color: var(--sbb-color-2);--sbb-file-selecto
 	};
 })();
 //#endregion
-export { b as n, x as t };
+export { S as n, C as t };

package/file-selector-dropzone.component-CBKsZsC2.js

@@ -0,0 +1,98 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbElement as i } from "./core/base-elements.js";
+import { forceType as a } from "./core/decorators.js";
+import { boxSizingStyles as o } from "./core/styles.js";
+import { html as s } from "lit/static-html.js";
+import { SbbSecondaryButtonStaticElement as c } from "./button.pure.js";
+import { i18nFileSelectorSubtitleLabel as l, i18nFileSelectorSubtitleLabelMultiple as u } from "./core/i18n.js";
+import "./icon.js";
+import { ref as d } from "lit/directives/ref.js";
+import { SbbFileSelectorCommonElementMixin as f, fileSelectorCommonStyle as p } from "./file-selector/common/file-selector-common.js";
+//#region src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.scss?inline
+var m = ".sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));--sbb-title-line-height: var(--sbb-typo-line-height-text);margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}";
+//#endregion
+//#region src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.component.ts
+c.define();
+var h = (() => {
+	let c = f(i), h, g = [], _ = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			h = [a(), r({ attribute: "title-content" })], e(this, null, h, {
+				kind: "accessor",
+				name: "titleContent",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "titleContent" in e,
+					get: (e) => e.titleContent,
+					set: (e, t) => {
+						e.titleContent = t;
+					}
+				},
+				metadata: t
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-file-selector-dropzone";
+		}
+		static {
+			this.styles = [
+				o,
+				p,
+				n(m)
+			];
+		}
+		static {
+			this.events = { filechanged: "filechanged" };
+		}
+		#e = t(this, g, "");
+		get titleContent() {
+			return this.#e;
+		}
+		set titleContent(e) {
+			this.#e = e;
+		}
+		renderTemplate(e) {
+			return s`
+      <label>
+        <span class="sbb-file-selector__dropzone-area">
+          <span class="sbb-file-selector__dropzone-area--icon">
+            <sbb-icon
+              name=${this.size === "m" ? "folder-open-medium" : "folder-open-small"}
+            ></sbb-icon>
+          </span>
+          <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
+          <span class="sbb-file-selector__dropzone-area--subtitle">
+            ${this.multiple ? u[this.language.current] : l[this.language.current]}
+          </span>
+          <span class="sbb-file-selector__dropzone-area--button">
+            <sbb-secondary-button-static
+              size=${this.size}
+              ?disabled=${this.disabled || this.formDisabled}
+              ${d((e) => {
+				this.loadButton = e;
+			})}
+            >
+              ${this.getButtonLabel()}
+            </sbb-secondary-button-static>
+          </span>
+        </span>
+        ${e}
+      </label>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, _);
+		}
+	};
+})();
+//#endregion
+export { h as t };

package/file-selector.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./file-selector-common-Bk07ovZm.js";
-import { t as n } from "./file-selector-dropzone.component-DhPsfRQk.js";
+import { n as e, t } from "./file-selector-common-DN4vHMpP.js";
+import { t as n } from "./file-selector-dropzone.component-CBKsZsC2.js";
 import { SbbFileSelectorElement as r } from "./file-selector/file-selector/file-selector.component.js";
 import "./file-selector.pure.js";
 r.define(), n.define();

package/file-selector.pure.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./file-selector-common-Bk07ovZm.js";
-import { t as n } from "./file-selector-dropzone.component-DhPsfRQk.js";
+import { n as e, t } from "./file-selector-common-DN4vHMpP.js";
+import { t as n } from "./file-selector-dropzone.component-CBKsZsC2.js";
 import { SbbFileSelectorElement as r } from "./file-selector/file-selector/file-selector.component.js";
 export { t as SbbFileSelectorCommonElementMixin, n as SbbFileSelectorDropzoneElement, r as SbbFileSelectorElement, e as fileSelectorCommonStyle };

package/flip-card/flip-card/flip-card.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../flip-card.component-CrUlzxck.js";
+import { t as e } from "../../flip-card.component-D7HNqWXz.js";
 export { e as SbbFlipCardElement };

package/flip-card/flip-card-details/flip-card-details.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../flip-card-details.component-Dd9w2AaO.js";
+import { t as e } from "../../flip-card-details.component-CUaLeEKc.js";
 export { e as SbbFlipCardDetailsElement };

package/flip-card/flip-card-details.js

@@ -1,4 +1,4 @@
-import { t as e } from "../flip-card-details.component-Dd9w2AaO.js";
+import { t as e } from "../flip-card-details.component-CUaLeEKc.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/flip-card/flip-card-details.js' has been deprecated.\nUse either '@sbb-esta/elements/flip-card.js' or '@sbb-esta/elements/flip-card.pure.js' instead.");
 //#endregion
 export { e as SbbFlipCardDetailsElement };

package/flip-card/flip-card-summary/flip-card-summary.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../flip-card-summary.component-DN08GsS9.js";
+import { t as e } from "../../flip-card-summary.component-T2UMG_YI.js";
 export { e as SbbFlipCardSummaryElement };

package/flip-card/flip-card-summary.js

@@ -1,4 +1,4 @@
-import { t as e } from "../flip-card-summary.component-DN08GsS9.js";
+import { t as e } from "../flip-card-summary.component-T2UMG_YI.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/flip-card/flip-card-summary.js' has been deprecated.\nUse either '@sbb-esta/elements/flip-card.js' or '@sbb-esta/elements/flip-card.pure.js' instead.");
 //#endregion
 export { e as SbbFlipCardSummaryElement };

package/flip-card/flip-card.js

@@ -1,4 +1,4 @@
-import { t as e } from "../flip-card.component-CrUlzxck.js";
+import { t as e } from "../flip-card.component-D7HNqWXz.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/flip-card/flip-card.js' has been deprecated.\nUse either '@sbb-esta/elements/flip-card.js' or '@sbb-esta/elements/flip-card.pure.js' instead.");
 //#endregion
 export { e as SbbFlipCardElement };

package/flip-card-details.component-CUaLeEKc.js

@@ -0,0 +1,45 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbElement as n } from "./core/base-elements.js";
+import { boxSizingStyles as r } from "./core/styles.js";
+import { IS_FOCUSABLE_QUERY as i } from "./core/a11y.js";
+import { MutationController as a } from "@lit-labs/observers/mutation-controller.js";
+//#region src/elements/flip-card/flip-card-details/flip-card-details.scss?inline
+var o = ":host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-flip-card-details-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-details-padding-block-end: calc( var(--sbb-flip-card-padding) + var(--sbb-flip-card-padding-block-end) + var(--sbb-button-min-height-size-s) );display:block;position:absolute;pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity, 0);transform:translateY(var(--sbb-flip-card-details-translate-y));transition-property:transform,opacity;transition-duration:var(--sbb-flip-card-details-transition-duration)}:host(:is(:state(flipped),[state--flipped])){transition-delay:var(--sbb-flip-card-details-transition-delay),var(--sbb-flip-card-details-transition-delay)}.sbb-flip-card-details{overflow:hidden;padding:var(--sbb-flip-card-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end)}", s = class extends n {
+	static {
+		this.elementName = "sbb-flip-card-details";
+	}
+	static {
+		this.styles = [r, t(o)];
+	}
+	constructor() {
+		super(), this.addController(new a(this, {
+			config: {
+				childList: !0,
+				subtree: !0,
+				attributes: !0,
+				attributeFilter: [
+					"href",
+					"tabindex",
+					"disabled",
+					"inert"
+				]
+			},
+			callback: () => this._checkForSlottedActions()
+		}));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.slot ||= "details";
+	}
+	_checkForSlottedActions() {
+		Array.from(this.querySelectorAll?.(i) ?? []).forEach((e) => e.classList.toggle("sbb-action", !0));
+	}
+	render() {
+		return e`
+      <div class="sbb-flip-card-details">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+//#endregion
+export { s as t };

package/flip-card-summary.component-T2UMG_YI.js

@@ -0,0 +1,65 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { boxSizingStyles as o } from "./core/styles.js";
+//#region src/elements/flip-card/flip-card-summary/flip-card-summary.scss?inline
+var s = ":host{display:grid;min-height:var(--sbb-flip-card-min-height);pointer-events:var(--sbb-flip-card-summary-pointer-events, all);opacity:var(--sbb-flip-card-summary-opacity, 1);border-radius:var(--sbb-flip-card-border-radius);overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}@media(min-width:37.5rem){:host([image-alignment=after]){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}}@media(min-width:64rem){:host([image-alignment=after]){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-flip-card-padding);padding-block:var(--sbb-flip-card-padding) var(--sbb-flip-card-padding-block-end);margin:0;grid-area:1/1/2/2}@media(min-width:37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media(min-width:64rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}::slotted(*:not([slot=image])){transform:translateY(var(--sbb-flip-card-translate-title-y-hover, 0rem));transition:transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x)) var(--sbb-animation-easing)}.sbb-flip-card-summary--image-wrapper{grid-area:2/1/3/2}@media(min-width:37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media(min-width:64rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted([slot=image]){width:100%;height:100%}", c = (() => {
+	let c = a, l, u = [], d = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [i({
+				attribute: "image-alignment",
+				reflect: !0
+			})], e(this, null, l, {
+				kind: "accessor",
+				name: "imageAlignment",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "imageAlignment" in e,
+					get: (e) => e.imageAlignment,
+					set: (e, t) => {
+						e.imageAlignment = t;
+					}
+				},
+				metadata: t
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-flip-card-summary";
+		}
+		static {
+			this.styles = [o, r(s)];
+		}
+		#e = t(this, u, "after");
+		get imageAlignment() {
+			return this.#e;
+		}
+		set imageAlignment(e) {
+			this.#e = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.slot ||= "summary";
+		}
+		render() {
+			return n`
+      <slot></slot>
+      <div class="sbb-flip-card-summary--image-wrapper">
+        <slot name="image"></slot>
+      </div>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, d);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/flip-card.component-D7HNqWXz.js

@@ -0,0 +1,142 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, isServer as r, unsafeCSS as i } from "lit";
+import { property as a, state as o } from "lit/decorators.js";
+import { SbbElement as s } from "./core/base-elements.js";
+import { forceType as c } from "./core/decorators.js";
+import { ɵstateController as l } from "./core/mixins.js";
+import { boxSizingStyles as u } from "./core/styles.js";
+import { SbbSecondaryButtonStaticElement as d } from "./button.pure.js";
+import { SbbLanguageController as f, SbbPropertyWatcherController as p } from "./core/controllers.js";
+import { i18nFlipCard as m, i18nReverseCard as h } from "./core/i18n.js";
+import { ResizeController as g } from "@lit-labs/observers/resize-controller.js";
+import { IS_FOCUSABLE_QUERY as _ } from "./core/a11y.js";
+import "./screen-reader-only.js";
+import { until as v } from "lit/directives/until.js";
+//#region src/elements/flip-card/flip-card/flip-card.scss?inline
+var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-summary-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );position:relative;display:block}@media(any-hover:hover){:host(:hover){--sbb-flip-card-background-color: color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent);--sbb-flip-card-background-color: light-dark( color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent), var(--sbb-color-iron) );--sbb-flip-card-translate-title-y-hover: -.0625rem}}:host(:is(:state(flipped),[state--flipped])){--sbb-flip-card-toggle-icon-transform: rotate(45deg);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-flip-card-summary-transition-delay: 0s}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media(min-width:37.5rem)and (max-width:63.9375rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height: 15rem}}@media(min-width:90rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:all var(--sbb-flip-card-summary-transition-duration) ease-out,min-height var(--sbb-flip-card-details-transition-duration);transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:var(--sbb-cursor-pointer)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card{min-height:max(var(--sbb-flip-card-min-height),var(--sbb-flip-card-details-height))}@media(forced-colors:active){.sbb-flip-card:after{content:\"\";border:var(--sbb-flip-card-border) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);position:absolute;inset:0;pointer-events:none}}@media(forced-colors:active)and (any-hover:hover){:host(:hover) .sbb-flip-card:after{border-color:Highlight}}.sbb-flip-card:before{content:\"\";opacity:0;pointer-events:none;position:absolute;inset-inline-start:var(--sbb-flip-card-padding);inset-block-end:var(--sbb-flip-card-padding);background-color:var(--sbb-color-midnight);background-color:light-dark(var(--sbb-color-midnight),var(--sbb-color-iron));width:var(--sbb-flip-card-button-dimensions);height:var(--sbb-flip-card-button-dimensions);border-radius:16rem;transition:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-3x)) ease-out}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card:before{opacity:1;inset-inline-start:0;inset-block-end:0;width:100%;height:100%;border-radius:var(--sbb-flip-card-border-radius);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-5x))}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-flip-card-padding);inset-block-end:var(--sbb-flip-card-padding)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-flip-card--toggle-button-icon{transform:var(--sbb-flip-card-toggle-icon-transform, none);transition:transform var(--sbb-flip-card-summary-transition-duration) ease-out}.sbb-flip-card-button{appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;position:absolute;inset:0;width:100%;border-radius:var(--sbb-flip-card-border-radius);cursor:var(--sbb-cursor-pointer)}.sbb-flip-card-button: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)}";
+//#endregion
+//#region src/elements/flip-card/flip-card/flip-card.component.ts
+d.define();
+var b = (() => {
+	let d = s, b, x = [], S = [], C, w = [], T = [];
+	return class extends d {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			b = [c(), a({ attribute: "accessibility-label" })], C = [o()], e(this, null, b, {
+				kind: "accessor",
+				name: "accessibilityLabel",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accessibilityLabel" in e,
+					get: (e) => e.accessibilityLabel,
+					set: (e, t) => {
+						e.accessibilityLabel = t;
+					}
+				},
+				metadata: t
+			}, x, S), e(this, null, C, {
+				kind: "accessor",
+				name: "_flipped",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "_flipped" in e,
+					get: (e) => e._flipped,
+					set: (e, t) => {
+						e._flipped = t;
+					}
+				},
+				metadata: t
+			}, w, T), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-flip-card";
+		}
+		static {
+			this.styles = [u, i(y)];
+		}
+		static {
+			this.events = { flip: "flip" };
+		}
+		#e;
+		get accessibilityLabel() {
+			return this.#e;
+		}
+		set accessibilityLabel(e) {
+			this.#e = e;
+		}
+		get summary() {
+			return this.querySelector?.("sbb-flip-card-summary");
+		}
+		get details() {
+			return this.querySelector?.("sbb-flip-card-details");
+		}
+		get _detailsContentElement() {
+			return this.details.shadowRoot.firstElementChild;
+		}
+		get isFlipped() {
+			return this._flipped;
+		}
+		#t;
+		get _flipped() {
+			return this.#t;
+		}
+		set _flipped(e) {
+			this.#t = e;
+		}
+		constructor() {
+			super(), this.#e = t(this, x, ""), this.#t = (t(this, S), t(this, w, !1)), this._language = (t(this, T), new f(this)), this._cardDetailsResizeObserver = new g(this, {
+				target: null,
+				skipInitial: !0,
+				callback: () => this._setCardDetailsHeight()
+			}), this.addEventListener?.("click", (e) => {
+				(e.target === this || !e.target?.matches?.(_)) && this.toggle();
+			}), this.addController(new p(this, () => this.summary, { imageAlignment: (e) => {
+				this._previousImageAlignment && this.internals.states.delete(`image-alignment-${this._previousImageAlignment}`), this._previousImageAlignment = e.imageAlignment, this._previousImageAlignment && this.internals.states.add(`image-alignment-${this._previousImageAlignment}`);
+			} }));
+		}
+		toggle() {
+			this._flipped = !this._flipped, this._flipped ? (this._setCardDetailsHeight(), this._cardDetailsResizeObserver.observe(this._detailsContentElement)) : this._cardDetailsResizeObserver.unobserve(this._detailsContentElement), this.toggleState("flipped", this._flipped), l(this.details)?.toggle("flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped, this.dispatchEvent(new Event("flip", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+		_setCardDetailsHeight() {
+			let e = Math.floor(this._detailsContentElement.offsetHeight);
+			this.style?.setProperty("--sbb-flip-card-details-height", `${e}px`);
+		}
+		async _accessibilityLabel() {
+			return r ? "" : (await this.hydrationComplete, this._flipped ? h[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${m[this._language.current]}`);
+		}
+		render() {
+			return n`
+      <div class="sbb-flip-card">
+        <button
+          class="sbb-flip-card-button"
+          aria-expanded=${this._flipped.toString()}
+          type="button"
+        >
+          <sbb-screen-reader-only>${v(this._accessibilityLabel(), "")}</sbb-screen-reader-only>
+        </button>
+        <slot name="summary" @slotchange=${() => this.summary.inert = this._flipped}></slot>
+        <slot name="details" @slotchange=${() => this.details.inert = !this._flipped}></slot>
+        <sbb-secondary-button-static class="sbb-flip-card--toggle-button" size="s">
+          <sbb-icon
+            class="sbb-flip-card--toggle-button-icon"
+            slot="icon"
+            name="plus-small"
+          ></sbb-icon>
+        </sbb-secondary-button-static>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { b as t };

package/flip-card.js

@@ -1,6 +1,6 @@
-import { t as e } from "./flip-card-details.component-Dd9w2AaO.js";
-import { t } from "./flip-card-summary.component-DN08GsS9.js";
-import { t as n } from "./flip-card.component-CrUlzxck.js";
+import { t as e } from "./flip-card-details.component-CUaLeEKc.js";
+import { t } from "./flip-card-summary.component-T2UMG_YI.js";
+import { t as n } from "./flip-card.component-D7HNqWXz.js";
 import "./flip-card.pure.js";
 n.define(), e.define(), t.define();
 //#endregion

package/flip-card.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flip-card-details.component-Dd9w2AaO.js";
-import { t } from "./flip-card-summary.component-DN08GsS9.js";
-import { t as n } from "./flip-card.component-CrUlzxck.js";
+import { t as e } from "./flip-card-details.component-CUaLeEKc.js";
+import { t } from "./flip-card-summary.component-T2UMG_YI.js";
+import { t as n } from "./flip-card.component-D7HNqWXz.js";
 export { e as SbbFlipCardDetailsElement, n as SbbFlipCardElement, t as SbbFlipCardSummaryElement };

package/footer/footer.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../footer.component-C8s7qhZs.js";
+import { t as e } from "../footer.component-BM91Utiz.js";
 export { e as SbbFooterElement };