@sbb-esta/lyne-elements-dev 4.11.0-dev.1776089549 → 5.0.0-next-dev.1776089780

package/expansion-panel.js

@@ -1,6 +1,6 @@
-import { t as e } from "./expansion-panel-content.component--OJYAiBh.js";
-import { t } from "./expansion-panel-header.component-B_dQ3ZWT.js";
-import { t as n } from "./expansion-panel.component-DBnZ6IgB.js";
+import { t as e } from "./expansion-panel-content.component-CL_uEP-7.js";
+import { t } from "./expansion-panel-header.component-DdRIlyms.js";
+import { t as n } from "./expansion-panel.component-BYOTclLb.js";
 import "./expansion-panel.pure.js";
 n.define(), e.define(), t.define();
 //#endregion

package/expansion-panel.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./expansion-panel-content.component--OJYAiBh.js";
-import { t } from "./expansion-panel-header.component-B_dQ3ZWT.js";
-import { t as n } from "./expansion-panel.component-DBnZ6IgB.js";
+import { t as e } from "./expansion-panel-content.component-CL_uEP-7.js";
+import { t } from "./expansion-panel-header.component-DdRIlyms.js";
+import { t as n } from "./expansion-panel.component-BYOTclLb.js";
 export { e as SbbExpansionPanelContentElement, n as SbbExpansionPanelElement, t as SbbExpansionPanelHeaderElement };

package/file-selector/common/file-selector-common.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../file-selector-common-DN4vHMpP.js";
+import { n as e, t } from "../../file-selector-common-DpccuOQ4.js";
 export { t as SbbFileSelectorCommonElementMixin, e as fileSelectorCommonStyle };

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

@@ -1,15 +1,16 @@
-import { SbbElement as e } from "../../core/base-elements.js";
-import { boxSizingStyles as t } from "../../core/styles.js";
+import { SbbElement as e, boxSizingStyles as t } from "../../core.js";
 import { html as n } from "lit/static-html.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
-r.define();
 var s = class extends a(e) {
 	static {
 		this.elementName = "sbb-file-selector";
 	}
+	static {
+		this.elementDependencies = [r];
+	}
 	static {
 		this.styles = [t, o];
 	}

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

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

package/file-selector-common-DpccuOQ4.js

@@ -0,0 +1,310 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { nothing as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbDisabledMixin as a, SbbFormAssociatedMixin as o, SbbLanguageController as s, forceType as c, forwardEvent as l, i18nFileSelectorButtonLabel as u, i18nFileSelectorButtonLabelMultiple as d, i18nFileSelectorCurrentlySelected as f, i18nFileSelectorDeleteFile as p, isLean as m, sbbInputModalityDetector as h, ɵstateController as g } from "./core.js";
+import { html as _, unsafeStatic as v } from "lit/static-html.js";
+import { SbbSecondaryButtonElement as y } from "./button.pure.js";
+import { ref as b } from "lit/directives/ref.js";
+//#endregion
+//#region src/elements/file-selector/common/file-selector-common.ts
+var x = r(":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}"), S = (r) => (() => {
+	let x = a(o(r)), S = [], C, w = [], T = [], E, D = [], O = [], k, A = [], j = [], M, N = [], P = [], F, I = [], L = [], R, z;
+	return class extends x {
+		constructor() {
+			super(...arguments), this.#e = (t(this, S), t(this, w, m() ? "s" : "m")), this.#t = (t(this, T), t(this, D, !1)), this.#n = (t(this, O), t(this, A, "default")), this.#r = (t(this, j), t(this, N, "")), this.#i = (t(this, P), t(this, I, "")), this._files = (t(this, L), []), this._suffixes = [
+				"B",
+				"kB",
+				"MB",
+				"GB",
+				"TB"
+			], this.language = new s(this), this._counter = 0;
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+			C = [i({ reflect: !0 })], E = [c(), i({ type: Boolean })], k = [i({ attribute: "multiple-mode" })], M = [c(), i()], F = [c(), i({ attribute: "accessibility-label" })], R = [i({ attribute: !1 })], z = [i({ attribute: !1 })], e(this, null, C, {
+				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
+			}, w, T), e(this, null, E, {
+				kind: "accessor",
+				name: "multiple",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "multiple" in e,
+					get: (e) => e.multiple,
+					set: (e, t) => {
+						e.multiple = t;
+					}
+				},
+				metadata: t
+			}, D, O), e(this, null, k, {
+				kind: "accessor",
+				name: "multipleMode",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "multipleMode" in e,
+					get: (e) => e.multipleMode,
+					set: (e, t) => {
+						e.multipleMode = t;
+					}
+				},
+				metadata: t
+			}, A, j), e(this, null, M, {
+				kind: "accessor",
+				name: "accept",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accept" in e,
+					get: (e) => e.accept,
+					set: (e, t) => {
+						e.accept = t;
+					}
+				},
+				metadata: t
+			}, N, P), e(this, null, F, {
+				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
+			}, I, L), e(this, null, R, {
+				kind: "setter",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, null, S), e(this, null, z, {
+				kind: "setter",
+				name: "files",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "files" in e,
+					set: (e, t) => {
+						e.files = t;
+					}
+				},
+				metadata: t
+			}, null, S), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementDependencies = [y];
+		}
+		static {
+			this.events = { filechanged: "filechanged" };
+		}
+		#e;
+		get size() {
+			return this.#e;
+		}
+		set size(e) {
+			this.#e = e;
+		}
+		#t;
+		get multiple() {
+			return this.#t;
+		}
+		set multiple(e) {
+			this.#t = e;
+		}
+		#n;
+		get multipleMode() {
+			return this.#n;
+		}
+		set multipleMode(e) {
+			this.#n = e;
+		}
+		#r;
+		get accept() {
+			return this.#r;
+		}
+		set accept(e) {
+			this.#r = e;
+		}
+		#i;
+		get accessibilityLabel() {
+			return this.#i;
+		}
+		set accessibilityLabel(e) {
+			this.#i = e;
+		}
+		set value(e) {
+			this._hiddenInput.value = e ?? "", e || (this.files = []);
+		}
+		get value() {
+			return this._hiddenInput?.value;
+		}
+		set files(e) {
+			this._files = e ?? [];
+			let t = new DataTransfer();
+			this.files.forEach((e) => t.items.add(e)), this._hiddenInput.files = t.files, this.updateFormValue();
+		}
+		get files() {
+			return this._files;
+		}
+		get type() {
+			return "file";
+		}
+		formResetCallback() {
+			this.files = [];
+		}
+		formStateRestoreCallback(e, t) {
+			e && (this.files = e.getAll(this.name));
+		}
+		updateFormValue() {
+			let e = new FormData();
+			this.files.forEach((t) => e.append(this.name, t)), this.internals.setFormValue(e);
+		}
+		_checkFileEquality(e, t) {
+			return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
+		}
+		_onFocus() {
+			h.mostRecentModality === "keyboard" && g(this.loadButton).add("focus-visible");
+		}
+		_onBlur() {
+			g(this.loadButton).delete("focus-visible");
+		}
+		_readFiles(e) {
+			let t = e.target;
+			t.files && this.createFileList(t.files), l(e, this);
+		}
+		createFileList(e) {
+			let t = Array.from(e);
+			!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 ? d[this.language.current] : u[this.language.current];
+		}
+		_removeFile(e) {
+			this.files = this.files.filter((t) => !this._checkFileEquality(e, t)), this._updateA11yLiveRegion(), this.dispatchEvent(new InputEvent("input", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._dispatchFileChangedEvent();
+		}
+		_dispatchFileChangedEvent() {
+			this.dispatchEvent(new CustomEvent("filechanged", {
+				bubbles: !0,
+				composed: !0,
+				detail: this.files
+			}));
+		}
+		_formatFileSize(e) {
+			let t = Math.floor(Math.log(e) / Math.log(1024));
+			return `${(e / 1024 ** t).toFixed(0)} ${this._suffixes[t]}`;
+		}
+		_updateA11yLiveRegion() {
+			this._liveRegion.innerText = f(this.files.map((e) => e.name))[this.language.current];
+		}
+		_renderFileList() {
+			let e = this.files.length > 1 ? {
+				WRAPPER: "ul",
+				ELEMENT: "li"
+			} : {
+				WRAPPER: "div",
+				ELEMENT: "span"
+			};
+			return _`
+      <${v(e.WRAPPER)} class='sbb-file-selector__file-list'>
+        ${this.files.map((t) => _`
+            <${v(e.ELEMENT)} class='sbb-file-selector__file'>
+                <span class='sbb-file-selector__file-details'>
+                  <span class='sbb-file-selector__file-name'>${t.name}</span>
+                  <span class='sbb-file-selector__file-size'>${this._formatFileSize(t.size)}</span>
+                </span>
+              <sbb-secondary-button
+                size='${this.size}'
+                icon-name='trash-small'
+                @click='${() => this._removeFile(t)}'
+                aria-label='${`${p[this.language.current]} - ${t.name}`}'
+              ></sbb-secondary-button>
+            </${v(e.ELEMENT)}>`)}
+      </${v(e.WRAPPER)}>
+    `;
+		}
+		_onDragEnter(e) {
+			this._counter++, !this.disabled && !this.formDisabled && (this._setDragState(e.target, !0), this._blockEvent(e));
+		}
+		_onDragLeave(e) {
+			this._counter--, !this.disabled && !this.formDisabled && e.target === this._dragTarget && this._counter === 0 && (this._setDragState(), this._blockEvent(e));
+		}
+		_onFileDrop(e) {
+			this._counter = 0, !this.disabled && !this.formDisabled && (this._setDragState(), this._blockEvent(e), this.createFileList(e.dataTransfer.files));
+		}
+		_blockEvent(e) {
+			e.stopPropagation(), e.preventDefault();
+		}
+		_setDragState(e = void 0, t = !1) {
+			this._dragTarget = e, this.toggleState("active", t), g(this.loadButton).toggle("active", t);
+		}
+		render() {
+			let e = this.accessibilityLabel ? `${this.getButtonLabel()} - ${this.accessibilityLabel}` : void 0;
+			return _`
+        <div class="sbb-file-selector">
+          <div
+            class="sbb-file-selector__input-container"
+            @dragenter=${this._onDragEnter}
+            @dragover=${this._blockEvent}
+            @dragleave=${this._onDragLeave}
+            @drop=${this._onFileDrop}
+          >
+            ${this.renderTemplate(_`<input
+                class="sbb-file-selector__visually-hidden"
+                type="file"
+                ?disabled="${this.disabled || this.formDisabled}"
+                ?multiple="${this.multiple}"
+                accept="${this.accept || n}"
+                aria-label="${e || n}"
+                @change="${this._readFiles}"
+                @focus="${this._onFocus}"
+                @blur="${this._onBlur}"
+                ${b((e) => {
+				this._hiddenInput = e;
+			})}
+              />`)}
+          </div>
+          <p
+            role="status"
+            class="sbb-file-selector__visually-hidden"
+            ${b((e) => this._liveRegion = e)}
+          ></p>
+          ${this.files.length > 0 ? this._renderFileList() : n}
+          <div class="sbb-file-selector__error">
+            <slot name="error"></slot>
+          </div>
+        </div>
+      `;
+		}
+	};
+})();
+//#endregion
+export { x as n, S as t };

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

@@ -0,0 +1,94 @@
+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, boxSizingStyles as a, forceType as o, i18nFileSelectorSubtitleLabel as s, i18nFileSelectorSubtitleLabelMultiple as c } from "./core.js";
+import { html as l } from "lit/static-html.js";
+import { SbbSecondaryButtonStaticElement as u } from "./button.pure.js";
+import { SbbIconElement as d } from "./icon.pure.js";
+import { ref as f } from "lit/directives/ref.js";
+import { SbbFileSelectorCommonElementMixin as p, fileSelectorCommonStyle as m } from "./file-selector/common/file-selector-common.js";
+//#region src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.scss?inline
+var h = ".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)}", g = (() => {
+	let g = p(i), _, v = [], y = [];
+	return class extends g {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+			_ = [o(), r({ attribute: "title-content" })], e(this, null, _, {
+				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
+			}, v, y), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-file-selector-dropzone";
+		}
+		static {
+			this.elementDependencies = [d, u];
+		}
+		static {
+			this.styles = [
+				a,
+				m,
+				n(h)
+			];
+		}
+		static {
+			this.events = { filechanged: "filechanged" };
+		}
+		#e = t(this, v, "");
+		get titleContent() {
+			return this.#e;
+		}
+		set titleContent(e) {
+			this.#e = e;
+		}
+		renderTemplate(e) {
+			return l`
+      <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 ? c[this.language.current] : s[this.language.current]}
+          </span>
+          <span class="sbb-file-selector__dropzone-area--button">
+            <sbb-secondary-button-static
+              size=${this.size}
+              ?disabled=${this.disabled || this.formDisabled}
+              ${f((e) => {
+				this.loadButton = e;
+			})}
+            >
+              ${this.getButtonLabel()}
+            </sbb-secondary-button-static>
+          </span>
+        </span>
+        ${e}
+      </label>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, y);
+		}
+	};
+})();
+//#endregion
+export { g as t };

package/file-selector.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./file-selector-common-DN4vHMpP.js";
-import { t as n } from "./file-selector-dropzone.component-CBKsZsC2.js";
+import { n as e, t } from "./file-selector-common-DpccuOQ4.js";
+import { t as n } from "./file-selector-dropzone.component-Bz3Wpl0X.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-DN4vHMpP.js";
-import { t as n } from "./file-selector-dropzone.component-CBKsZsC2.js";
+import { n as e, t } from "./file-selector-common-DpccuOQ4.js";
+import { t as n } from "./file-selector-dropzone.component-Bz3Wpl0X.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-D7HNqWXz.js";
+import { t as e } from "../../flip-card.component-Cq5BUWxc.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-CUaLeEKc.js";
+import { t as e } from "../../flip-card-details.component-DXpqywbn.js";
 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-T2UMG_YI.js";
+import { t as e } from "../../flip-card-summary.component-X3PL0o4l.js";
 export { e as SbbFlipCardSummaryElement };

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

@@ -0,0 +1,43 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { IS_FOCUSABLE_QUERY as n, SbbElement as r, boxSizingStyles as i } from "./core.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 r {
+	static {
+		this.elementName = "sbb-flip-card-details";
+	}
+	static {
+		this.styles = [i, 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?.(n) ?? []).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-X3PL0o4l.js

@@ -0,0 +1,64 @@
+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, boxSizingStyles as o } from "./core.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 };