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

package/expansion-panel/_expansion-panel.global.scss

@@ -0,0 +1,66 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
+  --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
+  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
+
+  // Vars which will be used by child components
+  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
+  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
+  --sbb-expansion-panel-title-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-title-gap-l),
+        'lean': var(--sbb-expansion-panel-title-gap-s),
+      ),
+      $theme
+    )};
+  --sbb-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-s);
+  --sbb-expansion-panel-content-padding-inline-s: var(--sbb-spacing-fixed-5x);
+  --sbb-expansion-panel-content-padding-inline-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-content-padding-inline-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-content-padding-inline-l),
+        'lean': var(--sbb-expansion-panel-content-padding-inline-s),
+      ),
+      $theme
+    )};
+  --sbb-expansion-panel-header-cursor: var(--sbb-cursor-pointer);
+  --sbb-expansion-panel-header-font-size: var(--sbb-text-font-size-l);
+  --sbb-expansion-panel-header-text-color: var(--sbb-color-2);
+  --sbb-expansion-panel-header-justify-content: space-between;
+  --sbb-expansion-panel-header-gap-s: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-header-gap-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-header-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-gap-l),
+        'lean': var(--sbb-expansion-panel-header-gap-s),
+      ),
+      $theme
+    )};
+  --sbb-expansion-panel-header-padding-block-s: var(--sbb-spacing-fixed-3x);
+  --sbb-expansion-panel-header-padding-block-l: var(--sbb-spacing-responsive-xs);
+  --sbb-expansion-panel-header-padding-block-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-padding-block-l),
+        'lean': var(--sbb-expansion-panel-header-padding-block-s),
+      ),
+      $theme
+    )};
+  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
+  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-header-padding-inline-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-padding-inline-l),
+        'lean': var(--sbb-expansion-panel-header-padding-inline-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin forced-colors {
+  --sbb-expansion-panel-header-text-color: ButtonText;
+}

package/expansion-panel/expansion-panel/expansion-panel.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../expansion-panel.component-DvZogUuX.js";
+import { t as e } from "../../expansion-panel.component-kyVRxBRu.js";
 export { e as SbbExpansionPanelElement };

package/expansion-panel/expansion-panel-content/expansion-panel-content.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../expansion-panel-content.component-WG1cwhjd.js";
+import { t as e } from "../../expansion-panel-content.component-Dm761peO.js";
 export { e as SbbExpansionPanelContentElement };

package/expansion-panel/expansion-panel-header/expansion-panel-header.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../expansion-panel-header.component-CnUqRql_.js";
+import { t as e } from "../../expansion-panel-header.component-Cli4Qy1p.js";
 export { e as SbbExpansionPanelHeaderElement };

package/{expansion-panel.component-DvZogUuX.js → expansion-panel.component-kyVRxBRu.js}

@@ -1,24 +1,23 @@
 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, forceType as a, isZeroAnimationDuration as o, ɵstateController as s } from "./core.js";
-import { html as c, unsafeStatic as l } from "lit/static-html.js";
+import { html as n, nothing as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o, forceType as s, isZeroAnimationDuration as c, ɵstateController as l } from "./core.js";
 //#region src/elements/expansion-panel/expansion-panel/expansion-panel.scss?inline
 var u = ":host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-expansion-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color: var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);display:block;background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box}:host([size=s]){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-default)}@media(forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color: GrayText;--sbb-expansion-panel-border-block-start-color: GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded: grid}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent;--sbb-expansion-panel-start-end-radius: 0;--sbb-expansion-panel-start-start-radius: 0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius: 0;--sbb-expansion-panel-end-start-radius: 0}:host([color=white]){--sbb-expansion-panel-background-color: var(--sbb-background-color-1);--sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3)}:host([color=milk]){--sbb-expansion-panel-background-color: var(--sbb-background-color-3);--sbb-expansion-panel-background-color-hover: var(--sbb-background-color-1)}:host([borderless]){--sbb-expansion-panel-border-width: 0;--sbb-expansion-panel-border-color: transparent;--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent}@media(forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x)}@media(forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width: 0}}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){background-color:var(--sbb-expansion-panel-background-color-hover)}@media(forced-colors:active){:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color: Highlight;--sbb-expansion-panel-border-block-start-color: Highlight}}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded, none);grid-template-rows:0fr;opacity:0}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{grid-template-rows:1fr;opacity:1}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{display:grid;visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}.sbb-expansion-panel__content{min-height:0;min-width:0}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}", d = 0, f = (() => {
-	let f = i, p = [], m, h = [], g = [], _, v = [], y = [], b, x, S, C = [], w = [], T, E = [], D = [];
+	let f = o, p = [], m, h = [], g = [], _, v = [], y = [], b, x, S, C = [], w = [], T, E = [], D = [];
 	return class extends f {
 		static {
 			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-			m = [r({ attribute: "title-level" })], _ = [r({ reflect: !0 })], b = [r({
+			m = [a({ attribute: "title-level" })], _ = [a({ reflect: !0 })], b = [a({
 				reflect: !0,
 				type: Boolean
-			})], x = [r({
+			})], x = [a({
 				reflect: !0,
 				type: Boolean
-			})], S = [a(), r({
+			})], S = [s(), a({
 				reflect: !0,
 				type: Boolean
-			})], T = [r({ reflect: !0 })], e(this, null, m, {
+			})], T = [a({ reflect: !0 })], e(this, null, m, {
 				kind: "accessor",
 				name: "titleLevel",
 				static: !1,
@@ -105,7 +104,7 @@ var u = ":host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-anim
 			this.elementName = "sbb-expansion-panel";
 		}
 		static {
-			this.styles = [n(u)];
+			this.styles = [i(u)];
 		}
 		static {
 			this.events = {
@@ -185,7 +184,7 @@ var u = ":host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-anim
 			this._state = "closing", this.dispatchEvent(new Event("beforeclose")), this._isZeroAnimationDuration() && this._handleClosing();
 		}
 		_isZeroAnimationDuration() {
-			return o(this, "--sbb-expansion-panel-animation-duration");
+			return c(this, "--sbb-expansion-panel-animation-duration");
 		}
 		_handleOpening() {
 			this._state = "opened", this.dispatchEvent(new Event("open"));
@@ -198,17 +197,21 @@ var u = ":host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-anim
 		}
 		_handleSlotchange() {
 			let e = Array.from(this.children ?? []), t = e.find((e) => e.localName === "sbb-expansion-panel-header"), n = e.find((e) => e.localName === "sbb-expansion-panel-content");
-			this._headerRef === t && this._contentRef === n || (t && this._headerRef !== t && (t.id ||= `sbb-expansion-panel-header${this._progressiveId}`, t.setAttribute("aria-expanded", String(this.expanded)), t.toggleAttribute("disabled", this.disabled)), n && this._contentRef !== n && (n.id ||= `sbb-expansion-panel-content${this._progressiveId}`, n.setAttribute("aria-hidden", String(!this.expanded))), this._headerRef = t, this._contentRef = n, this._headerRef && this._contentRef && (this._headerRef.setAttribute("aria-controls", this._contentRef.id), this._contentRef.setAttribute("aria-labelledby", this._headerRef.id), s(this._contentRef).toggle("icon-space", s(this._headerRef).has("icon"))));
+			this._headerRef === t && this._contentRef === n || (t && this._headerRef !== t && (t.id ||= `sbb-expansion-panel-header${this._progressiveId}`, t.setAttribute("aria-expanded", String(this.expanded)), t.toggleAttribute("disabled", this.disabled)), n && this._contentRef !== n && (n.id ||= `sbb-expansion-panel-content${this._progressiveId}`, n.setAttribute("aria-hidden", String(!this.expanded))), this._headerRef = t, this._contentRef = n, this._headerRef && this._contentRef && (this._headerRef.setAttribute("aria-controls", this._contentRef.id), this._contentRef.setAttribute("aria-labelledby", this._headerRef.id), l(this._contentRef).toggle("icon-space", l(this._headerRef).has("icon"))));
 		}
 		_onAnimationEnd(e) {
 			e.animationName === "open-opacity" && this._state === "opening" ? this._handleOpening() : e.animationName === "close" && this._state === "closing" && this._handleClosing();
 		}
 		render() {
-			let e = this.titleLevel ? `h${this.titleLevel}` : "div";
-			return c`
-      <${l(e)} class="sbb-expansion-panel__header">
+			return n`
+      <div
+        role=${this.titleLevel ? "heading" : r}
+        aria-level=${this.titleLevel || r}
+        class="sbb-expansion-panel__header"
+      >
         <slot name="header" @slotchange=${this._handleSlotchange}></slot>
-      </${l(e)}>
+      </div>
+
       <div class="sbb-expansion-panel__content-wrapper" @animationend=${this._onAnimationEnd}>
         <span class="sbb-expansion-panel__content">
           <slot name="content" @slotchange=${this._handleSlotchange}></slot>

package/expansion-panel.js

@@ -1,6 +1,6 @@
-import { t as e } from "./expansion-panel-content.component-WG1cwhjd.js";
-import { t } from "./expansion-panel-header.component-CnUqRql_.js";
-import { t as n } from "./expansion-panel.component-DvZogUuX.js";
+import { t as e } from "./expansion-panel-content.component-Dm761peO.js";
+import { t } from "./expansion-panel-header.component-Cli4Qy1p.js";
+import { t as n } from "./expansion-panel.component-kyVRxBRu.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-WG1cwhjd.js";
-import { t } from "./expansion-panel-header.component-CnUqRql_.js";
-import { t as n } from "./expansion-panel.component-DvZogUuX.js";
+import { t as e } from "./expansion-panel-content.component-Dm761peO.js";
+import { t } from "./expansion-panel-header.component-Cli4Qy1p.js";
+import { t as n } from "./expansion-panel.component-kyVRxBRu.js";
 export { e as SbbExpansionPanelContentElement, n as SbbExpansionPanelElement, t as SbbExpansionPanelHeaderElement };

package/file-selector/_file-selector.global.scss

@@ -0,0 +1,25 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-file-selector-color: var(--sbb-color-2);
+  --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-easing-function: var(--sbb-animation-easing);
+  --_sbb-file-selector-dropzone-icon-medium-display: #{sbb.theme-pattern-select(
+      (
+        'standard': block,
+        'lean': none,
+      ),
+      $theme
+    )};
+  --_sbb-file-selector-dropzone-icon-small-display: #{sbb.theme-pattern-select(
+      (
+        'standard': none,
+        'lean': block,
+      ),
+      $theme
+    )};
+}

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

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

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

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

package/{file-selector-common-BE780nIa.js → file-selector-common-Bk347JZN.js}

@@ -6,11 +6,21 @@ 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";
 //#region src/elements/file-selector/common/file-selector-common.scss?inline
-var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );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__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 = (S) => (() => {
-	let C = a(o(S)), w = [], T, E = [], D = [], O, k = [], A = [], j, M = [], N = [], P, F = [], I = [], L, R = [], z = [], B, V;
-	return class extends C {
+var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );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__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{display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-s)}.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 = class extends Event {
+	get files() {
+		return this._files;
+	}
+	constructor(e) {
+		super("filechanged", {
+			bubbles: !0,
+			composed: !0
+		}), this._files = Object.freeze(e || []);
+	}
+}, C = (C) => (() => {
+	let w = a(o(C)), T = [], E, D = [], O = [], k, A = [], j = [], M, N = [], P = [], F, I = [], L = [], R, z = [], B = [], V, H;
+	return class extends w {
 		constructor() {
-			super(...arguments), this.#e = (t(this, w), t(this, E, null)), this.#t = (t(this, D), t(this, k, !1)), this.#n = (t(this, A), t(this, M, "default")), this.#r = (t(this, N), t(this, F, "")), this.#i = (t(this, I), t(this, R, "")), this._files = (t(this, z), []), this._suffixes = [
+			super(...arguments), this.#e = (t(this, T), t(this, D, null)), this.#t = (t(this, O), t(this, A, !1)), this.#n = (t(this, j), t(this, N, "default")), this.#r = (t(this, P), t(this, I, "")), this.#i = (t(this, L), t(this, z, "")), this._files = (t(this, B), []), this._suffixes = [
 				"B",
 				"kB",
 				"MB",
@@ -19,8 +29,8 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 			], this.language = new s(this), this._counter = 0;
 		}
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
-			T = [i({ reflect: !0 })], O = [c(), i({ type: Boolean })], j = [i({ attribute: "multiple-mode" })], P = [c(), i()], L = [c(), i({ attribute: "accessibility-label" })], B = [i({ attribute: !1 })], V = [i({ attribute: !1 })], e(this, null, T, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+			E = [i({ reflect: !0 })], k = [c(), i({ type: Boolean })], M = [i({ attribute: "multiple-mode" })], F = [c(), i()], R = [c(), i({ attribute: "accessibility-label" })], V = [i({ attribute: !1 })], H = [i({ attribute: !1 })], e(this, null, E, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -33,7 +43,7 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 					}
 				},
 				metadata: t
-			}, E, D), e(this, null, O, {
+			}, D, O), e(this, null, k, {
 				kind: "accessor",
 				name: "multiple",
 				static: !1,
@@ -46,7 +56,7 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 					}
 				},
 				metadata: t
-			}, k, A), e(this, null, j, {
+			}, A, j), e(this, null, M, {
 				kind: "accessor",
 				name: "multipleMode",
 				static: !1,
@@ -59,7 +69,7 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 					}
 				},
 				metadata: t
-			}, M, N), e(this, null, P, {
+			}, N, P), e(this, null, F, {
 				kind: "accessor",
 				name: "accept",
 				static: !1,
@@ -72,7 +82,7 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 					}
 				},
 				metadata: t
-			}, F, I), e(this, null, L, {
+			}, I, L), e(this, null, R, {
 				kind: "accessor",
 				name: "accessibilityLabel",
 				static: !1,
@@ -85,7 +95,7 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 					}
 				},
 				metadata: t
-			}, R, z), e(this, null, B, {
+			}, z, B), e(this, null, V, {
 				kind: "setter",
 				name: "value",
 				static: !1,
@@ -97,7 +107,7 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 					}
 				},
 				metadata: t
-			}, null, w), e(this, null, V, {
+			}, null, T), e(this, null, H, {
 				kind: "setter",
 				name: "files",
 				static: !1,
@@ -109,7 +119,7 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 					}
 				},
 				metadata: t
-			}, null, w), t && Object.defineProperty(this, Symbol.metadata, {
+			}, null, T), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -214,11 +224,8 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 			})), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._dispatchFileChangedEvent();
 		}
 		_dispatchFileChangedEvent() {
-			this.dispatchEvent(new CustomEvent("filechanged", {
-				bubbles: !0,
-				composed: !0,
-				detail: this.files
-			}));
+			let e = this.files;
+			this.dispatchEvent(new S(e));
 		}
 		_formatFileSize(e) {
 			let t = Math.floor(Math.log(e) / Math.log(1024));
@@ -307,4 +314,4 @@ var x = ":host{--sbb-file-selector-transition-duration: var( --sbb-disable-anima
 	};
 })();
 //#endregion
-export { S as t };
+export { C as n, S as t };

package/{file-selector-dropzone.component-CGo6odhC.js → file-selector-dropzone.component-CywJG8KU.js}

@@ -8,7 +8,7 @@ import { SbbIconElement as d } from "./icon.pure.js";
 import { ref as f } from "lit/directives/ref.js";
 import { SbbFileSelectorCommonElementMixin 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 = ":host([size=m]){--_sbb-file-selector-dropzone-icon-medium-display: block;--_sbb-file-selector-dropzone-icon-small-display: none}:host([size=s]){--_sbb-file-selector-dropzone-icon-medium-display: none;--_sbb-file-selector-dropzone-icon-small-display: block}.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-icon[name=folder-open-medium]{display:var(--_sbb-file-selector-dropzone-icon-medium-display)}sbb-icon[name=folder-open-small]{display:var(--_sbb-file-selector-dropzone-icon-small-display)}.sbb-file-selector__dropzone-area--title{font-weight:700;font-size:var(--sbb-heading-font-size-6);letter-spacing:var(--sbb-typo-letter-spacing-heading);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)}", h = (() => {
+var m = ":host([size=m]){--_sbb-file-selector-dropzone-icon-medium-display: block;--_sbb-file-selector-dropzone-icon-small-display: none}:host([size=s]){--_sbb-file-selector-dropzone-icon-medium-display: none;--_sbb-file-selector-dropzone-icon-small-display: block}.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-icon[name=folder-open-medium]{display:var(--_sbb-file-selector-dropzone-icon-medium-display)}sbb-icon[name=folder-open-small]{display:var(--_sbb-file-selector-dropzone-icon-small-display)}.sbb-file-selector__dropzone-area--title{font-weight:700;font-size:var(--sbb-heading-font-size-6);letter-spacing:var(--sbb-typo-letter-spacing-heading);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size-xs)}", h = (() => {
 	let h = p(a), g, _ = [], v = [];
 	return class extends h {
 		static {

package/file-selector.js

@@ -1,7 +1,7 @@
-import { t as e } from "./file-selector-common-BE780nIa.js";
-import { t } from "./file-selector-dropzone.component-CGo6odhC.js";
-import { SbbFileSelectorElement as n } from "./file-selector/file-selector/file-selector.component.js";
+import { n as e, t } from "./file-selector-common-Bk347JZN.js";
+import { t as n } from "./file-selector-dropzone.component-CywJG8KU.js";
+import { SbbFileSelectorElement as r } from "./file-selector/file-selector/file-selector.component.js";
 import "./file-selector.pure.js";
-n.define(), t.define();
+r.define(), n.define();
 //#endregion
-export { e as SbbFileSelectorCommonElementMixin, t as SbbFileSelectorDropzoneElement, n as SbbFileSelectorElement };
+export { t as SbbFileChangeEvent, e as SbbFileSelectorCommonElementMixin, n as SbbFileSelectorDropzoneElement, r as SbbFileSelectorElement };

package/file-selector.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./file-selector-common-BE780nIa.js";
-import { t } from "./file-selector-dropzone.component-CGo6odhC.js";
-import { SbbFileSelectorElement as n } from "./file-selector/file-selector/file-selector.component.js";
-export { e as SbbFileSelectorCommonElementMixin, t as SbbFileSelectorDropzoneElement, n as SbbFileSelectorElement };
+import { n as e, t } from "./file-selector-common-Bk347JZN.js";
+import { t as n } from "./file-selector-dropzone.component-CywJG8KU.js";
+import { SbbFileSelectorElement as r } from "./file-selector/file-selector/file-selector.component.js";
+export { t as SbbFileChangeEvent, e as SbbFileSelectorCommonElementMixin, n as SbbFileSelectorDropzoneElement, r as SbbFileSelectorElement };

package/flip-card/_flip-card.global.scss

@@ -0,0 +1,38 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-flip-card-background-color: var(--sbb-background-color-4);
+  --sbb-flip-card-border: var(--sbb-border-width-2x);
+  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
+  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(280)};
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
+}
+
+@mixin breakpoint-large {
+  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(320)};
+}
+
+@mixin rules {
+  // Every element in the Light DOM of a sbb-flip-card which is focusable should receive this attribute.
+  // This style enables accessing focusable elements inside an sbb-card.
+  sbb-flip-card .sbb-action {
+    pointer-events: all;
+  }
+
+  sbb-flip-card-summary {
+    > [slot='image']:is(sbb-image, img),
+    > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      --sbb-image-aspect-ratio: auto;
+      --sbb-image-object-fit: cover;
+
+      border-radius: 0;
+      display: block;
+      height: 100%;
+    }
+  }
+}

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

@@ -1,2 +1,2 @@
-import { t as e } from "../../flip-card.component-CZ0v44Ym.js";
+import { t as e } from "../../flip-card.component-CtUxr9yF.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-BgOeJ53R.js";
+import { t as e } from "../../flip-card-details.component-D4C0Fde7.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-D5cKgj47.js";
+import { t as e } from "../../flip-card-summary.component-ZvTeHtPV.js";
 export { e as SbbFlipCardSummaryElement };

package/{flip-card.component-CZ0v44Ym.js → flip-card.component-CtUxr9yF.js}

@@ -1,17 +1,17 @@
 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 { IS_FOCUSABLE_QUERY as s, SbbElement as c, SbbLanguageController as l, SbbPropertyWatcherController as u, forceType as d, i18nFlipCard as f, i18nReverseCard as p, screenReaderOnlyStyles as m, ɵstateController as h } from "./core.js";
-import { SbbSecondaryButtonStaticElement as g } from "./button.pure.js";
-import { ResizeController as _ } from "@lit-labs/observers/resize-controller.js";
-import { until as v } from "lit/directives/until.js";
+import { IS_FOCUSABLE_QUERY as s, SbbElement as c, SbbLanguageController as l, SbbPropertyWatcherController as u, buttonResetStyles as d, forceType as f, i18nFlipCard as p, i18nReverseCard as m, screenReaderOnlyStyles as h, ɵstateController as g } from "./core.js";
+import { SbbSecondaryButtonStaticElement as _ } from "./button.pure.js";
+import { ResizeController as v } from "@lit-labs/observers/resize-controller.js";
+import { until as y } 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)}", b = (() => {
-	let b = c, x, S = [], C = [], w, T = [], E = [];
-	return class extends b {
+var b = ":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{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)}", x = (() => {
+	let x = c, S, C = [], w = [], T, E = [], D = [];
+	return class extends x {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-			x = [d(), a({ attribute: "accessibility-label" })], w = [o()], e(this, null, x, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+			S = [f(), a({ attribute: "accessibility-label" })], T = [o()], e(this, null, S, {
 				kind: "accessor",
 				name: "accessibilityLabel",
 				static: !1,
@@ -24,7 +24,7 @@ var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-a
 					}
 				},
 				metadata: t
-			}, S, C), e(this, null, w, {
+			}, C, w), e(this, null, T, {
 				kind: "accessor",
 				name: "_flipped",
 				static: !1,
@@ -37,7 +37,7 @@ var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-a
 					}
 				},
 				metadata: t
-			}, T, E), t && Object.defineProperty(this, Symbol.metadata, {
+			}, E, D), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -48,10 +48,14 @@ var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-a
 			this.elementName = "sbb-flip-card";
 		}
 		static {
-			this.elementDependencies = [g];
+			this.elementDependencies = [_];
 		}
 		static {
-			this.styles = [m, i(y)];
+			this.styles = [
+				d,
+				h,
+				i(b)
+			];
 		}
 		static {
 			this.events = { flip: "flip" };
@@ -83,7 +87,7 @@ var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-a
 			this.#t = e;
 		}
 		constructor() {
-			super(), this.#e = t(this, S, ""), this.#t = (t(this, C), t(this, T, !1)), this._language = (t(this, E), new l(this)), this._cardDetailsResizeObserver = new _(this, {
+			super(), this.#e = t(this, C, ""), this.#t = (t(this, w), t(this, E, !1)), this._language = (t(this, D), new l(this)), this._cardDetailsResizeObserver = new v(this, {
 				target: null,
 				skipInitial: !0,
 				callback: () => this._setCardDetailsHeight()
@@ -94,7 +98,7 @@ var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-a
 			} }));
 		}
 		toggle() {
-			this._flipped = !this._flipped, this._flipped ? (this._setCardDetailsHeight(), this._cardDetailsResizeObserver.observe(this._detailsContentElement)) : this._cardDetailsResizeObserver.unobserve(this._detailsContentElement), this.toggleState("flipped", this._flipped), h(this.details)?.toggle("flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped, this.dispatchEvent(new Event("flip", {
+			this._flipped = !this._flipped, this._flipped ? (this._setCardDetailsHeight(), this._cardDetailsResizeObserver.observe(this._detailsContentElement)) : this._cardDetailsResizeObserver.unobserve(this._detailsContentElement), this.toggleState("flipped", this._flipped), g(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
 			}));
@@ -104,7 +108,7 @@ var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-a
 			this.style?.setProperty("--sbb-flip-card-details-height", `${e}px`);
 		}
 		async _accessibilityLabel() {
-			return r ? "" : (await this.hydrationComplete, this._flipped ? p[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${f[this._language.current]}`);
+			return r ? "" : (await this.hydrationComplete, this._flipped ? m[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${p[this._language.current]}`);
 		}
 		render() {
 			return n`
@@ -114,7 +118,7 @@ var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-a
           aria-expanded=${this._flipped.toString()}
           type="button"
         >
-          <span class="sbb-screen-reader-only">${v(this._accessibilityLabel(), "")}</span>
+          <span class="sbb-screen-reader-only">${y(this._accessibilityLabel(), "")}</span>
         </button>
         <slot name="summary" @slotchange=${() => this.summary.inert = this._flipped}></slot>
         <slot name="details" @slotchange=${() => this.details.inert = !this._flipped}></slot>
@@ -131,4 +135,4 @@ var y = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-a
 	};
 })();
 //#endregion
-export { b as t };
+export { x as t };

package/flip-card.js

@@ -1,6 +1,6 @@
-import { t as e } from "./flip-card-details.component-BgOeJ53R.js";
-import { t } from "./flip-card-summary.component-D5cKgj47.js";
-import { t as n } from "./flip-card.component-CZ0v44Ym.js";
+import { t as e } from "./flip-card-details.component-D4C0Fde7.js";
+import { t } from "./flip-card-summary.component-ZvTeHtPV.js";
+import { t as n } from "./flip-card.component-CtUxr9yF.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-BgOeJ53R.js";
-import { t } from "./flip-card-summary.component-D5cKgj47.js";
-import { t as n } from "./flip-card.component-CZ0v44Ym.js";
+import { t as e } from "./flip-card-details.component-D4C0Fde7.js";
+import { t } from "./flip-card-summary.component-ZvTeHtPV.js";
+import { t as n } from "./flip-card.component-CtUxr9yF.js";
 export { e as SbbFlipCardDetailsElement, n as SbbFlipCardElement, t as SbbFlipCardSummaryElement };

package/footer/_footer.global.scss

@@ -0,0 +1,17 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-footer-background-color: var(--sbb-background-color-3);
+  --sbb-footer-clock-width: #{sbb.px-to-rem-build(76)};
+  --sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
+  --sbb-footer-font-size: var(--sbb-text-font-size-s);
+  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
+  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
+  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
+}
+
+@mixin breakpoint-small {
+  --sbb-footer-clock-width: #{sbb.px-to-rem-build(112)};
+}

package/footer/footer.component.js

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

package/footer.js

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