@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773157346

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

@@ -1,39 +1,40 @@
-var k = (t) => {
+var g = (t) => {
   throw TypeError(t);
 };
-var C = (t, e, a) => e.has(t) || k("Cannot " + a);
-var p = (t, e, a) => (C(t, e, "read from private field"), a ? a.call(t) : e.get(t)), m = (t, e, a) => e.has(t) ? k("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), b = (t, e, a, r) => (C(t, e, "write to private field"), r ? r.call(t, a) : e.set(t, a), a);
-import { __esDecorate as f, __runInitializers as d } from "tslib";
-import { ResizeController as S } from "@lit-labs/observers/resize-controller.js";
-import { css as L, LitElement as w, isServer as E, html as z } from "lit";
-import { customElement as I, property as D, state as $ } from "lit/decorators.js";
-import { until as A } from "lit/directives/until.js";
-import { IS_FOCUSABLE_QUERY as H } from "../../core/a11y.js";
-import { SbbLanguageController as R, SbbPropertyWatcherController as O } from "../../core/controllers.js";
-import { forceType as F } from "../../core/decorators.js";
-import { i18nFlipCard as M, i18nReverseCard as P } from "../../core/i18n.js";
-import { SbbHydrationMixin as T, SbbElementInternalsMixin as j, ɵstateController as q } from "../../core/mixins.js";
-import { boxSizingStyles as U } from "../../core/styles.js";
+var v = (t, i, s) => i.has(t) || g("Cannot " + s);
+var p = (t, i, s) => (v(t, i, "read from private field"), s ? s.call(t) : i.get(t)), m = (t, i, s) => i.has(t) ? g("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), b = (t, i, s, n) => (v(t, i, "write to private field"), n ? n.call(t, s) : i.set(t, s), s);
+import { __esDecorate as y, __runInitializers as d } from "tslib";
+import { ResizeController as _ } from "@lit-labs/observers/resize-controller.js";
+import { css as x, isServer as k, html as w } from "lit";
+import { property as L, state as C } from "lit/decorators.js";
+import { until as S } from "lit/directives/until.js";
+import { IS_FOCUSABLE_QUERY as z } from "../../core/a11y.js";
+import { SbbElement as I } from "../../core/base-elements.js";
+import { SbbLanguageController as $, SbbPropertyWatcherController as A } from "../../core/controllers.js";
+import { forceType as D } from "../../core/decorators.js";
+import { i18nFlipCard as E, i18nReverseCard as R } from "../../core/i18n.js";
+import { ɵstateController as H } from "../../core/mixins.js";
+import { boxSizingStyles as O } from "../../core/styles.js";
 import "../../button/secondary-button-static.js";
 import "../../screen-reader-only.js";
-const B = L`: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)}`;
-let rt = (() => {
-  var o, n, l;
-  let t = [I("sbb-flip-card")], e, a = [], r, u = T(j(w)), h, g = [], v = [], _, y = [], x = [];
-  return l = class extends u {
+const P = x`: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)}`;
+let F = (() => {
+  var o, l, a;
+  let t = I, i, s = [], n = [], f, h = [], u = [];
+  return a = class extends t {
     constructor() {
       super();
       m(this, o);
-      m(this, n);
-      b(this, o, d(this, g, "")), b(this, n, (d(this, v), d(this, y, !1))), this._language = (d(this, x), new R(this)), this._cardDetailsResizeObserver = new S(this, {
+      m(this, l);
+      b(this, o, d(this, s, "")), b(this, l, (d(this, n), d(this, h, !1))), this._language = (d(this, u), new $(this)), this._cardDetailsResizeObserver = new _(this, {
         target: null,
         skipInitial: !0,
         callback: () => this._setCardDetailsHeight()
-      }), this.addEventListener?.("click", (i) => {
-        (i.target === this || !i.target?.matches?.(H)) && this.toggle();
-      }), this.addController(new O(this, () => this.summary, {
-        imageAlignment: (i) => {
-          this._previousImageAlignment && this.internals.states.delete(`image-alignment-${this._previousImageAlignment}`), this._previousImageAlignment = i.imageAlignment, this._previousImageAlignment && this.internals.states.add(`image-alignment-${this._previousImageAlignment}`);
+      }), this.addEventListener?.("click", (e) => {
+        (e.target === this || !e.target?.matches?.(z)) && this.toggle();
+      }), this.addController(new A(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}`);
         }
       }));
     }
@@ -44,8 +45,8 @@ let rt = (() => {
     get accessibilityLabel() {
       return p(this, o);
     }
-    set accessibilityLabel(i) {
-      b(this, o, i);
+    set accessibilityLabel(e) {
+      b(this, o, e);
     }
     /** Returns the slotted sbb-flip-card-summary. */
     get summary() {
@@ -65,31 +66,31 @@ let rt = (() => {
     }
     /** Whether the card is flipped or not. */
     get _flipped() {
-      return p(this, n);
+      return p(this, l);
     }
-    set _flipped(i) {
-      b(this, n, i);
+    set _flipped(e) {
+      b(this, l, e);
     }
     /** Toggles the state of the sbb-flip-card. */
     toggle() {
-      this._flipped = !this._flipped, this._flipped ? (this._setCardDetailsHeight(), this._cardDetailsResizeObserver.observe(this._detailsContentElement)) : this._cardDetailsResizeObserver.unobserve(this._detailsContentElement), this.toggleState("flipped", this._flipped), q(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 }));
+      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", { bubbles: !0, composed: !0 }));
     }
     _setCardDetailsHeight() {
-      const i = Math.floor(this._detailsContentElement.offsetHeight);
-      this.style?.setProperty("--sbb-flip-card-details-height", `${i}px`);
+      const e = Math.floor(this._detailsContentElement.offsetHeight);
+      this.style?.setProperty("--sbb-flip-card-details-height", `${e}px`);
     }
     async _accessibilityLabel() {
-      return E ? "" : (await this.hydrationComplete, this._flipped ? P[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${M[this._language.current]}`);
+      return k ? "" : (await this.hydrationComplete, this._flipped ? R[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${E[this._language.current]}`);
     }
     render() {
-      return z`
+      return w`
       <div class="sbb-flip-card">
         <button
           class="sbb-flip-card-button"
           aria-expanded=${this._flipped.toString()}
           type="button"
         >
-          <sbb-screen-reader-only>${A(this._accessibilityLabel(), "")}</sbb-screen-reader-only>
+          <sbb-screen-reader-only>${S(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>
@@ -103,17 +104,17 @@ let rt = (() => {
       </div>
     `;
     }
-  }, o = new WeakMap(), n = new WeakMap(), r = l, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    h = [F(), D({ attribute: "accessibility-label" })], _ = [$()], f(l, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (s) => "accessibilityLabel" in s, get: (s) => s.accessibilityLabel, set: (s, c) => {
-      s.accessibilityLabel = c;
-    } }, metadata: i }, g, v), f(l, null, _, { kind: "accessor", name: "_flipped", static: !1, private: !1, access: { has: (s) => "_flipped" in s, get: (s) => s._flipped, set: (s, c) => {
-      s._flipped = c;
-    } }, metadata: i }, y, x), f(null, e = { value: r }, t, { kind: "class", name: r.name, metadata: i }, null, a), r = e.value, i && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), l.styles = [U, B], l.events = {
+  }, o = new WeakMap(), l = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    i = [D(), L({ attribute: "accessibility-label" })], f = [C()], y(a, null, i, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (r) => "accessibilityLabel" in r, get: (r) => r.accessibilityLabel, set: (r, c) => {
+      r.accessibilityLabel = c;
+    } }, metadata: e }, s, n), y(a, null, f, { kind: "accessor", name: "_flipped", static: !1, private: !1, access: { has: (r) => "_flipped" in r, get: (r) => r._flipped, set: (r, c) => {
+      r._flipped = c;
+    } }, metadata: e }, h, u), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.elementName = "sbb-flip-card", a.styles = [O, P], a.events = {
     flip: "flip"
-  }, d(r, a), r;
+  }, a;
 })();
 export {
-  rt as SbbFlipCardElement
+  F as SbbFlipCardElement
 };

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

@@ -1,44 +1,36 @@
-import { __esDecorate as o, __runInitializers as n } from "tslib";
-import { MutationController as d } from "@lit-labs/observers/mutation-controller.js";
-import { css as c, LitElement as b, html as p } from "lit";
-import { customElement as m } from "lit/decorators.js";
-import { IS_FOCUSABLE_QUERY as u } from "../../core/a11y.js";
-import { SbbElementInternalsMixin as f } from "../../core/mixins.js";
-import { boxSizingStyles as v } from "../../core/styles.js";
-const y = c`: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)}`;
-let C = (() => {
-  var a;
-  let l = [m("sbb-flip-card-details")], i, r = [], t, s = f(b);
-  return a = class extends s {
-    constructor() {
-      super(), this.addController(new d(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?.(u) ?? []).forEach((e) => e.classList.toggle("sbb-action", !0));
-    }
-    render() {
-      return p`
+import { MutationController as r } from "@lit-labs/observers/mutation-controller.js";
+import { css as s, html as o } from "lit";
+import { IS_FOCUSABLE_QUERY as e } from "../../core/a11y.js";
+import { SbbElement as l } from "../../core/base-elements.js";
+import { boxSizingStyles as d } from "../../core/styles.js";
+const n = s`: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)}`, t = class t extends l {
+  constructor() {
+    super(), this.addController(new r(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?.(e) ?? []).forEach((a) => a.classList.toggle("sbb-action", !0));
+  }
+  render() {
+    return o`
       <div class="sbb-flip-card-details">
         <slot></slot>
       </div>
     `;
-    }
-  }, t = a, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    o(null, i = { value: t }, l, { kind: "class", name: t.name, metadata: e }, null, r), t = i.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = [v, y], n(t, r), t;
-})();
+  }
+};
+t.elementName = "sbb-flip-card-details", t.styles = [d, n];
+let i = t;
 export {
-  C as SbbFlipCardDetailsElement
+  i as SbbFlipCardDetailsElement
 };

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

@@ -1,4 +1,7 @@
-import { SbbFlipCardDetailsElement as r } from "./flip-card-details/flip-card-details.component.js";
+import { SbbFlipCardDetailsElement as e } from "./flip-card-details/flip-card-details.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/flip-card/flip-card-details.js' has been deprecated.
+Use either '@sbb-esta/elements/flip-card.js' or '@sbb-esta/elements/flip-card.pure.js' instead.`);
 export {
-  r as SbbFlipCardDetailsElement
+  e as SbbFlipCardDetailsElement
 };

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

@@ -1,47 +1,48 @@
-var b = (a) => {
+var l = (a) => {
   throw TypeError(a);
 };
-var p = (a, e, t) => e.has(a) || b("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) ? b("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{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%}`;
-let F = (() => {
-  var m, r;
-  let a = [A("sbb-flip-card-summary")], e, t = [], i, d = w, o, g = [], c = [];
-  return r = class extends d {
+var o = (a, e, t) => e.has(a) || l("Cannot " + t);
+var d = (a, e, t) => (o(a, e, "read from private field"), t ? t.call(a) : e.get(a)), g = (a, e, t) => e.has(a) ? l("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), b = (a, e, t, r) => (o(a, e, "write to private field"), r ? r.call(a, t) : e.set(a, t), t);
+import { __esDecorate as f, __runInitializers as c } from "tslib";
+import { css as u, html as h } from "lit";
+import { property as y } from "lit/decorators.js";
+import { SbbElement as v } from "../../core/base-elements.js";
+import { boxSizingStyles as w } from "../../core/styles.js";
+const A = u`: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%}`;
+let O = (() => {
+  var m, i;
+  let a = v, e, t = [], r = [];
+  return i = class extends a {
     constructor() {
       super(...arguments);
-      f(this, m, l(this, g, "after"));
-      l(this, c);
+      g(this, m, c(this, t, "after"));
+      c(this, r);
     }
     /** The position where to render the image. */
     get imageAlignment() {
-      return u(this, m);
+      return d(this, m);
     }
     set imageAlignment(s) {
-      h(this, m, s);
+      b(this, m, s);
     }
     connectedCallback() {
       super.connectedCallback(), this.slot ||= "summary";
     }
     render() {
-      return x`
+      return h`
       <slot></slot>
       <div class="sbb-flip-card-summary--image-wrapper">
         <slot name="image"></slot>
       </div>
     `;
     }
-  }, m = new WeakMap(), i = r, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    o = [S({ attribute: "image-alignment", reflect: !0 })], y(r, null, o, { 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 }, g, 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;
+  }, m = new WeakMap(), (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    e = [y({ attribute: "image-alignment", reflect: !0 })], f(i, null, e, { kind: "accessor", name: "imageAlignment", static: !1, private: !1, access: { has: (n) => "imageAlignment" in n, get: (n) => n.imageAlignment, set: (n, p) => {
+      n.imageAlignment = p;
+    } }, metadata: s }, t, r), s && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), i.elementName = "sbb-flip-card-summary", i.styles = [w, A], i;
 })();
 export {
-  F as SbbFlipCardSummaryElement
+  O as SbbFlipCardSummaryElement
 };

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

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

package/flip-card/flip-card.js

@@ -1,4 +1,7 @@
-import { SbbFlipCardElement as b } from "./flip-card/flip-card.component.js";
+import { SbbFlipCardElement as e } from "./flip-card/flip-card.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/flip-card/flip-card.js' has been deprecated.
+Use either '@sbb-esta/elements/flip-card.js' or '@sbb-esta/elements/flip-card.pure.js' instead.`);
 export {
-  b as SbbFlipCardElement
+  e as SbbFlipCardElement
 };

package/flip-card.js

@@ -1,8 +1,11 @@
-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";
+import { SbbFlipCardDetailsElement as e } from "./flip-card/flip-card-details/flip-card-details.component.js";
+import { SbbFlipCardSummaryElement as m } from "./flip-card/flip-card-summary/flip-card-summary.component.js";
+import { SbbFlipCardElement as r } from "./flip-card/flip-card/flip-card.component.js";
+r.define();
+e.define();
+m.define();
 export {
-  o as SbbFlipCardDetailsElement,
-  m as SbbFlipCardElement,
-  t as SbbFlipCardSummaryElement
+  e as SbbFlipCardDetailsElement,
+  r as SbbFlipCardElement,
+  m as SbbFlipCardSummaryElement
 };

package/flip-card.pure.js

@@ -0,0 +1,8 @@
+import { SbbFlipCardDetailsElement as m } from "./flip-card/flip-card-details/flip-card-details.component.js";
+import { SbbFlipCardSummaryElement as t } from "./flip-card/flip-card-summary/flip-card-summary.component.js";
+import { SbbFlipCardElement as o } from "./flip-card/flip-card/flip-card.component.js";
+export {
+  m as SbbFlipCardDetailsElement,
+  o as SbbFlipCardElement,
+  t as SbbFlipCardSummaryElement
+};

package/footer/footer.component.js

@@ -1,27 +1,28 @@
-var j = (i) => {
-  throw TypeError(i);
+var I = (e) => {
+  throw TypeError(e);
 };
-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";
+var S = (e, s, a) => s.has(e) || I("Cannot " + a);
+var h = (e, s, a) => (S(e, s, "read from private field"), a ? a.call(e) : s.get(e)), v = (e, s, a) => s.has(e) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, a), p = (e, s, a, c) => (S(e, s, "write to private field"), c ? c.call(e, a) : s.set(e, a), a);
+import { __esDecorate as g, __runInitializers as l } from "tslib";
+import { css as A, nothing as M } from "lit";
+import { property as u } from "lit/decorators.js";
+import { unsafeStatic as $, html as j } from "lit/static-html.js";
+import { SbbElement as O } from "../core/base-elements.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 = (() => {
+import { SbbNegativeMixin as B } from "../core/mixins.js";
+import { boxSizingStyles as C } from "../core/styles.js";
+const D = A`: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 W = (() => {
   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 {
+  let e = B(O), s, a = [], c = [], f, y = [], x = [], k, w = [], _ = [], T, z = [], L = [];
+  return o = class extends e {
     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, $);
+      v(this, n, l(this, a, "default"));
+      v(this, d, (l(this, c), l(this, y, !1)));
+      v(this, b, (l(this, x), l(this, w, "")));
+      v(this, m, (l(this, _), l(this, z, "1")));
+      l(this, L);
     }
     /**
      * Variants to display the footer. The default, displays the content in regular block element
@@ -31,8 +32,8 @@ let Y = (() => {
     get variant() {
       return h(this, n);
     }
-    set variant(e) {
-      p(this, n, e);
+    set variant(i) {
+      p(this, n, i);
     }
     /**
      * Whether to allow the footer content to stretch to full width.
@@ -41,48 +42,48 @@ let Y = (() => {
     get expanded() {
       return h(this, d);
     }
-    set expanded(e) {
-      p(this, d, e);
+    set expanded(i) {
+      p(this, d, i);
     }
     /** Footer title text, visually hidden, necessary for screen readers. */
     get accessibilityTitle() {
       return h(this, b);
     }
-    set accessibilityTitle(e) {
-      p(this, b, e);
+    set accessibilityTitle(i) {
+      p(this, b, i);
     }
     /** 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);
+    set accessibilityTitleLevel(i) {
+      p(this, m, i);
     }
     render() {
-      const e = `h${this.accessibilityTitleLevel}`, t = M`<${A(e)} class="sbb-footer__title"
-        >${this.accessibilityTitle}</${A(e)}>`;
-      return M`
+      const i = `h${this.accessibilityTitleLevel}`, t = j`<${$(i)} class="sbb-footer__title"
+        >${this.accessibilityTitle}</${$(i)}>`;
+      return j`
       <footer class="sbb-footer">
         <div class="sbb-footer-wrapper">
-          ${this.accessibilityTitle ? t : C}
+          ${this.accessibilityTitle ? t : M}
           <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;
+  }, n = new WeakMap(), d = new WeakMap(), b = new WeakMap(), m = new WeakMap(), (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    s = [u({ reflect: !0 })], f = [N(), u({ reflect: !0, type: Boolean })], k = [N(), u({ attribute: "accessibility-title" })], T = [u({ attribute: "accessibility-title-level" })], g(o, null, s, { kind: "accessor", name: "variant", static: !1, private: !1, access: { has: (t) => "variant" in t, get: (t) => t.variant, set: (t, r) => {
+      t.variant = r;
+    } }, metadata: i }, a, c), g(o, null, f, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, r) => {
+      t.expanded = r;
+    } }, metadata: i }, y, x), g(o, null, k, { kind: "accessor", name: "accessibilityTitle", static: !1, private: !1, access: { has: (t) => "accessibilityTitle" in t, get: (t) => t.accessibilityTitle, set: (t, r) => {
+      t.accessibilityTitle = r;
+    } }, metadata: i }, w, _), g(o, null, T, { kind: "accessor", name: "accessibilityTitleLevel", static: !1, private: !1, access: { has: (t) => "accessibilityTitleLevel" in t, get: (t) => t.accessibilityTitleLevel, set: (t, r) => {
+      t.accessibilityTitleLevel = r;
+    } }, metadata: i }, z, L), i && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), o.elementName = "sbb-footer", o.styles = [C, D], o;
 })();
 export {
-  Y as SbbFooterElement
+  W as SbbFooterElement
 };

package/footer.js

@@ -1,4 +1,5 @@
-import { SbbFooterElement as r } from "./footer/footer.component.js";
+import { SbbFooterElement as e } from "./footer/footer.component.js";
+e.define();
 export {
-  r as SbbFooterElement
+  e as SbbFooterElement
 };

package/footer.pure.js

@@ -0,0 +1,4 @@
+import { SbbFooterElement as r } from "./footer/footer.component.js";
+export {
+  r as SbbFooterElement
+};

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

@@ -1,20 +1,17 @@
-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`
+import { css as i, html as s } from "lit";
+import { SbbElement as o } from "../../core/base-elements.js";
+import { SbbNegativeMixin as n } from "../../core/mixins.js";
+import { boxSizingStyles as a } from "../../core/styles.js";
+const b = i`: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 l = 0;
+const e = class e extends n(o) {
+  connectedCallback() {
+    super.connectedCallback(), this.id ||= `sbb-error-${l++}`;
+    const r = this.closest?.("sbb-form-field");
+    r && (this.negative = r.hasAttribute("negative"));
+  }
+  render() {
+    return s`
       <span class="error__icon">
         <slot name="icon">
           <svg
@@ -36,12 +33,10 @@ let p = 0, z = (() => {
         <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;
-})();
+  }
+};
+e.elementName = "sbb-error", e.styles = [a, b];
+let t = e;
 export {
-  z as SbbErrorElement
+  t as SbbErrorElement
 };