@sbb-esta/lyne-elements 4.7.0 → 4.8.1

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

@@ -1,49 +1,2 @@
-var g = (a) => {
-  throw TypeError(a);
-};
-var p = (a, e, t) => e.has(a) || g("Cannot " + t);
-var u = (a, e, t) => (p(a, e, "read from private field"), t ? t.call(a) : e.get(a)), f = (a, e, t) => e.has(a) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), h = (a, e, t, i) => (p(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t);
-import { __esDecorate as y, __runInitializers as l } from "tslib";
-import { css as _, LitElement as w, html as x } from "lit";
-import { customElement as A, property as S } from "lit/decorators.js";
-import { boxSizingStyles as k } from "../../core/styles.js";
-const z = _`:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;min-height:var(--sbb-flip-card-min-height);pointer-events:var(--sbb-flip-card-summary-pointer-events);opacity:var(--sbb-flip-card-summary-opacity);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]) .sbb-flip-card-summary{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}}@media(min-width:64rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}}::slotted(sbb-title){padding-inline:var(--sbb-spacing-responsive-s);padding-block:var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);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%}`;
-let F = (() => {
-  var m, r;
-  let a = [A("sbb-flip-card-summary")], e, t = [], i, o = w, d, b = [], c = [];
-  return r = class extends o {
-    constructor() {
-      super(...arguments);
-      f(this, m, l(this, b, "after"));
-      l(this, c);
-    }
-    /** The position where to render the image. */
-    get imageAlignment() {
-      return u(this, m);
-    }
-    set imageAlignment(s) {
-      h(this, m, s);
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.slot ||= "summary";
-    }
-    render() {
-      return x`
-      <div class="sbb-flip-card-summary">
-        <slot></slot>
-        <div class="sbb-flip-card-summary--image-wrapper">
-          <slot name="image"></slot>
-        </div>
-      </div>
-    `;
-    }
-  }, m = new WeakMap(), i = r, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    d = [S({ attribute: "image-alignment", reflect: !0 })], y(r, null, d, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (n) => "imageAlignment" in n, get: (n) => n.imageAlignment, set: (n, v) => {
-      n.imageAlignment = v;
-    } }, metadata: s }, b, c), y(null, e = { value: i }, a, { kind: "class", name: i.name, metadata: s }, null, t), i = e.value, s && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), r.styles = [k, z], l(i, t), i;
-})();
-export {
-  F as SbbFlipCardSummaryElement
-};
+import { t as e } from "../../flip-card-summary.component-DVa7wF7x.js";
+export { e as SbbFlipCardSummaryElement };

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

@@ -1,4 +1,4 @@
-import { SbbFlipCardSummaryElement as e } from "./flip-card-summary/flip-card-summary.component.js";
-export {
-  e as SbbFlipCardSummaryElement
-};
+import { t as e } from "../flip-card-summary.component-DVa7wF7x.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 { SbbFlipCardElement as b } from "./flip-card/flip-card.component.js";
-export {
-  b as SbbFlipCardElement
-};
+import { t as e } from "../flip-card.component-5pxuwGAv.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-BOVK7F1U.js

@@ -0,0 +1,45 @@
+import { css as e, html 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?lit&inline
+var o = e`: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));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);display:block;position:absolute}: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{padding:var(--sbb-flip-card-padding);padding-block-end:var(--sbb-flip-card-details-padding-block-end);overflow:hidden}`, s = class extends n {
+	static {
+		this.elementName = "sbb-flip-card-details";
+	}
+	static {
+		this.styles = [r, 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 t`
+      <div class="sbb-flip-card-details">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+//#endregion
+export { s as t };

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

@@ -0,0 +1,65 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html 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?lit&inline
+var s = n`:host{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);width:100%;height:100%;transition:all var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay);grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);display:grid;overflow:hidden}@media (width>=37.5rem){:host([image-alignment=after]){grid-template-rows:1fr;grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=64rem){:host([image-alignment=after]){grid-template-rows:1fr;grid-template-columns:repeat(2,minmax(0,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);grid-area:1/1/2/2;margin:0}@media (width>=37.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/3}}@media (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 (width>=37.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/3/2/4}}@media (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 n = a, c, l = [], u = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			c = [i({
+				attribute: "image-alignment",
+				reflect: !0
+			})], e(this, null, c, {
+				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
+			}, l, u), 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, s];
+		}
+		#e = t(this, l, "after");
+		get imageAlignment() {
+			return this.#e;
+		}
+		set imageAlignment(e) {
+			this.#e = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.slot ||= "summary";
+		}
+		render() {
+			return r`
+      <slot></slot>
+      <div class="sbb-flip-card-summary--image-wrapper">
+        <slot name="image"></slot>
+      </div>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, u);
+		}
+	};
+})();
+//#endregion
+export { c as t };

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

@@ -0,0 +1,138 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r, isServer 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 { SbbLanguageController as d, SbbPropertyWatcherController as f } from "./core/controllers.js";
+import { i18nFlipCard as p, i18nReverseCard as m } from "./core/i18n.js";
+import { ResizeController as h } from "@lit-labs/observers/resize-controller.js";
+import { IS_FOCUSABLE_QUERY as g } from "./core/a11y.js";
+import "./screen-reader-only.js";
+import "./button/secondary-button-static.js";
+import { until as _ } from "lit/directives/until.js";
+//#region src/elements/flip-card/flip-card/flip-card.scss?lit&inline
+var v = n`: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));display:block;position:relative}@media (any-hover:hover){:host(:hover){--sbb-flip-card-background-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent))var(--lightningcss-dark,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 (width>=37.5rem) and (width<=63.9375rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height:15rem}}@media (width>=90rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height:25rem}}.sbb-flip-card{height:100%;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);flex-flow:column wrap;display:flex;position:relative}: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);pointer-events:none;position:absolute;inset:0}}@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;background-color:var(--sbb-color-midnight);background-color:var(--lightningcss-light,var(--sbb-color-midnight))var(--lightningcss-dark,var(--sbb-color-iron));width:var(--sbb-flip-card-button-dimensions);height:var(--sbb-flip-card-button-dimensions);transition:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x)) ease-out;border-radius:16rem;position:absolute;inset-block-end:var(--sbb-flip-card-padding);inset-inline-start:var(--sbb-flip-card-padding)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card:before{opacity:1;border-radius:var(--sbb-flip-card-border-radius);width:100%;height:100%;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-5x));inset-block-end:0;inset-inline-start:0}.sbb-flip-card--toggle-button{position:absolute;inset-block-end:var(--sbb-flip-card-padding);inset-inline-start: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;-webkit-tap-highlight-color:transparent;color:inherit;border-radius:0;border-radius:var(--sbb-flip-card-border-radius);width:100%;cursor:var(--sbb-cursor-pointer);background:0 0;border:none;outline:none;margin:0;padding:0;position:absolute;inset:0}.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)}`, y = (() => {
+	let n = s, y, b = [], x = [], S, C = [], w = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			y = [c(), a({ attribute: "accessibility-label" })], S = [o()], e(this, null, y, {
+				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
+			}, b, x), e(this, null, S, {
+				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
+			}, C, w), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-flip-card";
+		}
+		static {
+			this.styles = [u, v];
+		}
+		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, b, ""), this.#t = (t(this, x), t(this, C, !1)), this._language = (t(this, w), new d(this)), this._cardDetailsResizeObserver = new h(this, {
+				target: null,
+				skipInitial: !0,
+				callback: () => this._setCardDetailsHeight()
+			}), this.addEventListener?.("click", (e) => {
+				(e.target === this || !e.target?.matches?.(g)) && this.toggle();
+			}), this.addController(new f(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 i ? "" : (await this.hydrationComplete, this._flipped ? m[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${p[this._language.current]}`);
+		}
+		render() {
+			return r`
+      <div class="sbb-flip-card">
+        <button
+          class="sbb-flip-card-button"
+          aria-expanded=${this._flipped.toString()}
+          type="button"
+        >
+          <sbb-screen-reader-only>${_(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 { y as t };

package/flip-card.js

@@ -1,8 +1,7 @@
-import { SbbFlipCardElement as m } from "./flip-card/flip-card/flip-card.component.js";
-import { SbbFlipCardSummaryElement as t } from "./flip-card/flip-card-summary/flip-card-summary.component.js";
-import { SbbFlipCardDetailsElement as o } from "./flip-card/flip-card-details/flip-card-details.component.js";
-export {
-  o as SbbFlipCardDetailsElement,
-  m as SbbFlipCardElement,
-  t as SbbFlipCardSummaryElement
-};
+import { t as e } from "./flip-card-details.component-BOVK7F1U.js";
+import { t } from "./flip-card-summary.component-DVa7wF7x.js";
+import { t as n } from "./flip-card.component-5pxuwGAv.js";
+import "./flip-card.pure.js";
+n.define(), e.define(), t.define();
+//#endregion
+export { e as SbbFlipCardDetailsElement, n as SbbFlipCardElement, t as SbbFlipCardSummaryElement };

package/flip-card.pure.js

@@ -0,0 +1,4 @@
+import { t as e } from "./flip-card-details.component-BOVK7F1U.js";
+import { t } from "./flip-card-summary.component-DVa7wF7x.js";
+import { t as n } from "./flip-card.component-5pxuwGAv.js";
+export { e as SbbFlipCardDetailsElement, n as SbbFlipCardElement, t as SbbFlipCardSummaryElement };

package/footer/footer.component.js

@@ -1,88 +1,2 @@
-var j = (i) => {
-  throw TypeError(i);
-};
-var D = (i, s, a) => s.has(i) || j("Cannot " + a);
-var h = (i, s, a) => (D(i, s, "read from private field"), a ? a.call(i) : s.get(i)), v = (i, s, a) => s.has(i) ? j("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), p = (i, s, a, l) => (D(i, s, "write to private field"), l ? l.call(i, a) : s.set(i, a), a);
-import { __esDecorate as u, __runInitializers as r } from "tslib";
-import { css as O, LitElement as B, nothing as C } from "lit";
-import { customElement as F, property as g } from "lit/decorators.js";
-import { unsafeStatic as A, html as M } from "lit/static-html.js";
-import { forceType as N } from "../core/decorators.js";
-import { SbbNegativeMixin as G } from "../core/mixins.js";
-import { boxSizingStyles as P } from "../core/styles.js";
-const q = O`:host{--sbb-link-text-decoration-line: none;display:block}:host([negative]){--sbb-footer-background-color: var(--sbb-background-color-2-negative);--sbb-footer-color: var(--sbb-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-footer{font-size:var(--sbb-footer-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-footer-color);padding-block:var(--sbb-footer-padding-block);background-color:var(--sbb-footer-background-color)}@media(forced-colors:active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-footer-wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-footer__title{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}::slotted(.sbb-link-list-button-group){display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-6x);align-items:flex-start}:host([variant=clock-columns]) slot{display:grid;grid-template-columns:auto;grid-template-rows:auto;column-gap:var(--sbb-footer-gap-horizontal)}@media(min-width:37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media(min-width:90rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);margin-inline:auto;grid-template-columns:repeat(4,1fr)}}:host([variant=clock-columns]) ::slotted(*:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){align-self:start;grid-row:2}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:1;grid-column:4/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:3;grid-column:1/4;width:100%}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:4}}@media(min-width:64rem){:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/4}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/5}}`;
-let Y = (() => {
-  var n, d, b, m, o;
-  let i = [F("sbb-footer")], s, a = [], l, f = G(B), _, y = [], x = [], k, w = [], T = [], z, L = [], S = [], I, E = [], $ = [];
-  return o = class extends f {
-    constructor() {
-      super(...arguments);
-      v(this, n, r(this, y, "default"));
-      v(this, d, (r(this, x), r(this, w, !1)));
-      v(this, b, (r(this, T), r(this, L, "")));
-      v(this, m, (r(this, S), r(this, E, "1")));
-      r(this, $);
-    }
-    /**
-     * Variants to display the footer. The default, displays the content in regular block element
-     * approach. The clock-columns, used a CSS-grid for displaying the content over different
-     * breakpoints.
-     */
-    get variant() {
-      return h(this, n);
-    }
-    set variant(e) {
-      p(this, n, e);
-    }
-    /**
-     * Whether to allow the footer content to stretch to full width.
-     * By default, the content has the appropriate page size.
-     */
-    get expanded() {
-      return h(this, d);
-    }
-    set expanded(e) {
-      p(this, d, e);
-    }
-    /** Footer title text, visually hidden, necessary for screen readers. */
-    get accessibilityTitle() {
-      return h(this, b);
-    }
-    set accessibilityTitle(e) {
-      p(this, b, e);
-    }
-    /** Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1. */
-    get accessibilityTitleLevel() {
-      return h(this, m);
-    }
-    set accessibilityTitleLevel(e) {
-      p(this, m, e);
-    }
-    render() {
-      const e = `h${this.accessibilityTitleLevel}`, t = M`<${A(e)} class="sbb-footer__title"
-        >${this.accessibilityTitle}</${A(e)}>`;
-      return M`
-      <footer class="sbb-footer">
-        <div class="sbb-footer-wrapper">
-          ${this.accessibilityTitle ? t : C}
-          <slot></slot>
-        </div>
-      </footer>
-    `;
-    }
-  }, n = new WeakMap(), d = new WeakMap(), b = new WeakMap(), m = new WeakMap(), l = o, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    _ = [g({ reflect: !0 })], k = [N(), g({ reflect: !0, type: Boolean })], z = [N(), g({ attribute: "accessibility-title" })], I = [g({ attribute: "accessibility-title-level" })], u(o, null, _, { kind: "accessor", name: "variant", static: !1, private: !1, access: { has: (t) => "variant" in t, get: (t) => t.variant, set: (t, c) => {
-      t.variant = c;
-    } }, metadata: e }, y, x), u(o, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, c) => {
-      t.expanded = c;
-    } }, metadata: e }, w, T), u(o, null, z, { kind: "accessor", name: "accessibilityTitle", static: !1, private: !1, access: { has: (t) => "accessibilityTitle" in t, get: (t) => t.accessibilityTitle, set: (t, c) => {
-      t.accessibilityTitle = c;
-    } }, metadata: e }, L, S), u(o, null, I, { kind: "accessor", name: "accessibilityTitleLevel", static: !1, private: !1, access: { has: (t) => "accessibilityTitleLevel" in t, get: (t) => t.accessibilityTitleLevel, set: (t, c) => {
-      t.accessibilityTitleLevel = c;
-    } }, metadata: e }, E, $), u(null, s = { value: l }, i, { kind: "class", name: l.name, metadata: e }, null, a), l = s.value, e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.styles = [P, q], r(l, a), l;
-})();
-export {
-  Y as SbbFooterElement
-};
+import { t as e } from "../footer.component-C-mSrCud.js";
+export { e as SbbFooterElement };

package/footer.component-C-mSrCud.js

@@ -0,0 +1,129 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, nothing as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { forceType as o } from "./core/decorators.js";
+import { SbbNegativeMixin as s } from "./core/mixins.js";
+import { boxSizingStyles as c } from "./core/styles.js";
+import { html as l, unsafeStatic as u } from "lit/static-html.js";
+//#region src/elements/footer/footer.scss?lit&inline
+var d = n`:host{--sbb-link-text-decoration-line:none;display:block}:host([negative]){--sbb-footer-background-color:var(--sbb-background-color-2-negative);--sbb-footer-color:var(--sbb-color-1-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}.sbb-footer{font-size:var(--sbb-footer-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-footer-color);padding-block:var(--sbb-footer-padding-block);background-color:var(--sbb-footer-background-color)}@media (forced-colors:active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not([expanded])) .sbb-footer-wrapper{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}.sbb-footer__title{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}::slotted(.sbb-link-list-button-group){gap:var(--sbb-spacing-fixed-6x);flex-direction:column;align-items:flex-start;display:flex}:host([variant=clock-columns]) slot{column-gap:var(--sbb-footer-gap-horizontal);grid-template-rows:auto;grid-template-columns:auto;display:grid}@media (width>=37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media (width>=90rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);grid-template-columns:repeat(4,1fr);margin-inline:auto}}:host([variant=clock-columns]) ::slotted(:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:2;align-self:start}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-area:1/4/auto/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-area:3/1/auto/4;width:100%}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media (width>=37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(:last-child){grid-row:4}}@media (width>=64rem){:host([variant=clock-columns]) ::slotted(:last-child){grid-column:1/4}}@media (width>=90rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(:last-child){grid-column:1/5}}`, f = (() => {
+	let n = s(a), f, p = [], m = [], h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			f = [i({ reflect: !0 })], h = [o(), i({
+				reflect: !0,
+				type: Boolean
+			})], v = [o(), i({ attribute: "accessibility-title" })], x = [i({ attribute: "accessibility-title-level" })], e(this, null, f, {
+				kind: "accessor",
+				name: "variant",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "variant" in e,
+					get: (e) => e.variant,
+					set: (e, t) => {
+						e.variant = t;
+					}
+				},
+				metadata: t
+			}, p, m), e(this, null, h, {
+				kind: "accessor",
+				name: "expanded",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "expanded" in e,
+					get: (e) => e.expanded,
+					set: (e, t) => {
+						e.expanded = t;
+					}
+				},
+				metadata: t
+			}, g, _), e(this, null, v, {
+				kind: "accessor",
+				name: "accessibilityTitle",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accessibilityTitle" in e,
+					get: (e) => e.accessibilityTitle,
+					set: (e, t) => {
+						e.accessibilityTitle = t;
+					}
+				},
+				metadata: t
+			}, y, b), e(this, null, x, {
+				kind: "accessor",
+				name: "accessibilityTitleLevel",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accessibilityTitleLevel" in e,
+					get: (e) => e.accessibilityTitleLevel,
+					set: (e, t) => {
+						e.accessibilityTitleLevel = t;
+					}
+				},
+				metadata: t
+			}, S, C), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-footer";
+		}
+		static {
+			this.styles = [c, d];
+		}
+		#e = t(this, p, "default");
+		get variant() {
+			return this.#e;
+		}
+		set variant(e) {
+			this.#e = e;
+		}
+		#t = (t(this, m), t(this, g, !1));
+		get expanded() {
+			return this.#t;
+		}
+		set expanded(e) {
+			this.#t = e;
+		}
+		#n = (t(this, _), t(this, y, ""));
+		get accessibilityTitle() {
+			return this.#n;
+		}
+		set accessibilityTitle(e) {
+			this.#n = e;
+		}
+		#r = (t(this, b), t(this, S, "1"));
+		get accessibilityTitleLevel() {
+			return this.#r;
+		}
+		set accessibilityTitleLevel(e) {
+			this.#r = e;
+		}
+		render() {
+			let e = `h${this.accessibilityTitleLevel}`, t = l`<${u(e)} class="sbb-footer__title"
+        >${this.accessibilityTitle}</${u(e)}>`;
+			return l`
+      <footer class="sbb-footer">
+        <div class="sbb-footer-wrapper">
+          ${this.accessibilityTitle ? t : r}
+          <slot></slot>
+        </div>
+      </footer>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, C);
+		}
+	};
+})();
+//#endregion
+export { f as t };

package/footer.js

@@ -1,4 +1,6 @@
-import { SbbFooterElement as r } from "./footer/footer.component.js";
-export {
-  r as SbbFooterElement
-};
+import { t as e } from "./footer.component-C-mSrCud.js";
+import "./footer.pure.js";
+//#region src/elements/footer.ts
+e.define();
+//#endregion
+export { e as SbbFooterElement };

package/footer.pure.js

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

package/form-field/error/error.component.js

@@ -1,47 +1,2 @@
-import { __esDecorate as l, __runInitializers as n } from "tslib";
-import { css as b, LitElement as c, html as h } from "lit";
-import { customElement as m } from "lit/decorators.js";
-import { SbbNegativeMixin as g } from "../../core/mixins.js";
-import { boxSizingStyles as v } from "../../core/styles.js";
-const f = b`:host{--sbb-error-color: var(--sbb-color-error);--sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em);--sbb-error-icon-size: 1.0625rem;--sbb-icon-svg-width: var(--sbb-error-icon-size);--sbb-icon-svg-height: var(--sbb-error-icon-size);display:flex;align-items:flex-start;color:var(--sbb-error-color);min-height:var(--sbb-error-height);--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)}@media(forced-colors:active){:host{--sbb-error-color: LinkText !important}}:host([negative]){--sbb-error-color: var(--sbb-color-red85)}.error__icon{display:flex;align-items:center;height:var(--sbb-error-height);margin-inline-end:var(--sbb-spacing-fixed-1x)}.error-content{line-height:var(--sbb-typo-line-height-text);vertical-align:text-top}.error__icon-svg{stroke:currentcolor;height:var(--sbb-error-height)}`;
-let p = 0, z = (() => {
-  var t;
-  let a = [m("sbb-error")], s, i = [], e, o = g(c);
-  return t = class extends o {
-    connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-error-${p++}`;
-      const r = this.closest?.("sbb-form-field");
-      r && (this.negative = r.hasAttribute("negative"));
-    }
-    render() {
-      return h`
-      <span class="error__icon">
-        <slot name="icon">
-          <svg
-            class="error__icon-svg"
-            aria-hidden="true"
-            width="14"
-            height="14"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <line x1="7" y1="3" x2="7" y2="8.5" />
-            <line x1="7" y1="10" x2="7" y2="11" />
-            <circle cx="7" cy="7" r="6.5" />
-          </svg>
-        </slot>
-      </span>
-      <span class="error-content">
-        <slot></slot>
-      </span>
-    `;
-    }
-  }, e = t, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    l(null, s = { value: e }, a, { kind: "class", name: e.name, metadata: r }, null, i), e = s.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), t.styles = [v, f], n(e, i), e;
-})();
-export {
-  z as SbbErrorElement
-};
+import { t as e } from "../../error.component-DTYppqRY.js";
+export { e as SbbErrorElement };