@sbb-esta/lyne-elements-dev 4.7.0-dev.1773648103 → 4.7.0-dev.1773648656

package/calendar.js

@@ -1,10 +1,6 @@
-import { SbbCalendarDayElement as e } from "./calendar/calendar-day/calendar-day.component.js";
-import { SbbCalendarElement as n } from "./calendar/calendar/calendar.component.js";
-import { SbbMonthChangeEvent as a } from "./calendar/calendar/calendar.component.js";
-n.define();
-e.define();
-export {
-  e as SbbCalendarDayElement,
-  n as SbbCalendarElement,
-  a as SbbMonthChangeEvent
-};
+import { t as e } from "./calendar-day.component-DqAXvoP3.js";
+import { n as t, t as n } from "./calendar.component-BgZDy-rX.js";
+import "./calendar.pure.js";
+n.define(), e.define();
+//#endregion
+export { e as SbbCalendarDayElement, n as SbbCalendarElement, t as SbbMonthChangeEvent };

package/calendar.pure.js

@@ -1,7 +1,3 @@
-import { SbbCalendarDayElement as a } from "./calendar/calendar-day/calendar-day.component.js";
-import { SbbCalendarElement as r, SbbMonthChangeEvent as t } from "./calendar/calendar/calendar.component.js";
-export {
-  a as SbbCalendarDayElement,
-  r as SbbCalendarElement,
-  t as SbbMonthChangeEvent
-};
+import { t as e } from "./calendar-day.component-DqAXvoP3.js";
+import { n as t, t as n } from "./calendar.component-BgZDy-rX.js";
+export { e as SbbCalendarDayElement, n as SbbCalendarElement, t as SbbMonthChangeEvent };

package/card/card/card.component.js

@@ -1,48 +1,2 @@
-var d = (a) => {
-  throw TypeError(a);
-};
-var c = (a, r, s) => r.has(a) || d("Cannot " + s);
-var n = (a, r, s) => (c(a, r, "read from private field"), s ? s.call(a) : r.get(a)), l = (a, r, s) => r.has(a) ? d("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, s), p = (a, r, s, o) => (c(a, r, "write to private field"), o ? o.call(a, s) : r.set(a, s), s);
-import { __esDecorate as h, __runInitializers as v } from "tslib";
-import { css as x, html as u } from "lit";
-import { property as k } from "lit/decorators.js";
-import { SbbElement as m } from "../../core/base-elements.js";
-import { boxSizingStyles as f } from "../../core/styles.js";
-const w = x`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-title-text-color-normal-override: var(--sbb-card-color);--sbb-card-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-1x) );display:block;position:relative;padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color)}:host:after{content:"";position:absolute;inset:0;background-color:transparent;border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none}:host{--sbb-card-padding-block: var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline: var(--sbb-card-padding-inline-default)}:host(:where([color=white])){--sbb-card-background-color: var(--sbb-background-color-1);--sbb-card-border-color: transparent}:host(:where([color=milk])){--sbb-card-background-color: var(--sbb-background-color-3);--sbb-card-border-color: transparent}:host(:where([color=transparent-bordered])){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-border-color-4-inverted);--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-focus-outline-color: inherit}:host(:where([color=transparent-bordered-dashed])){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cement);--sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-card-border-style: dashed;--sbb-focus-outline-color: inherit}:host(:where(:not([color]))){--sbb-card-background-color: var(--sbb-background-color-1);--sbb-card-border-color: transparent}:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color: var(--sbb-border-color-3);--sbb-card-border-width: var(--sbb-border-width-2x);--sbb-card-border-style: solid}@media(forced-colors:active){:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color: Highlight}}:host(:is(:state(has-action),[state--has-action])){--sbb-card-pointer-events: none}@media(any-hover:hover){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-hover-shift: -.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media(any-hover:hover)and (forced-colors:active){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-border-color: Highlight}}@media(forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))){--sbb-card-color: ButtonText}}@media(forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))){--sbb-card-color: LinkText;--sbb-card-border-color: CanvasText}}:host(.sbb-card-spacing-3x-xxs){--sbb-card-padding-block: var(--sbb-spacing-fixed-3x);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-xxs){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-s){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-4x-xxs){--sbb-card-padding-block: var(--sbb-spacing-fixed-4x);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxs){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-s){--sbb-card-padding-block: var(--sbb-spacing-responsive-s);--sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);--sbb-card-padding-inline: var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-l){--sbb-card-padding-block: var(--sbb-spacing-responsive-l);--sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);--sbb-card-padding-inline: var(--sbb-spacing-responsive-l)}:host(:is(:state(slotted-badge),[state--slotted-badge])){--sbb-card-padding-block: var(--sbb-card-with-badge-padding-block);--sbb-card-badge-display: block}.sbb-card__wrapper{display:block;height:100%;pointer-events:var(--sbb-card-pointer-events, auto);translate:0 var(--sbb-card-hover-shift, 0);transition:translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing)}.sbb-card__badge-wrapper{display:var(--sbb-card-badge-display, none);overflow:hidden;position:absolute;inset:0;inset-block-end:unset;border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius);pointer-events:var(--sbb-card-pointer-events, auto)}::slotted(sbb-title){margin-block-start:0}`;
-let I = (() => {
-  var e, b;
-  let a = m, r, s = [], o = [];
-  return b = class extends a {
-    constructor() {
-      super(...arguments);
-      l(this, e, v(this, s, "white"));
-      v(this, o);
-    }
-    /** Option to set the component's background color. */
-    get color() {
-      return n(this, e);
-    }
-    set color(t) {
-      p(this, e, t);
-    }
-    render() {
-      return u`
-      <slot name="action"></slot>
-      <span class="sbb-card__wrapper">
-        <slot></slot>
-      </span>
-      <span class="sbb-card__badge-wrapper">
-        <slot name="badge"></slot>
-      </span>
-    `;
-    }
-  }, e = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    r = [k({ reflect: !0 })], h(b, null, r, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, g) => {
-      i.color = g;
-    } }, metadata: t }, s, o), t && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), b.elementName = "sbb-card", b.styles = [f, w], b;
-})();
-export {
-  I as SbbCardElement
-};
+import { t as e } from "../../card.component-Dt2YFmd3.js";
+export { e as SbbCardElement };

package/card/card-badge/card-badge.component.js

@@ -1,48 +1,2 @@
-var d = (r) => {
-  throw TypeError(r);
-};
-var c = (r, a, e) => a.has(r) || d("Cannot " + e);
-var l = (r, a, e) => (c(r, a, "read from private field"), e ? e.call(r) : a.get(r)), n = (r, a, e) => a.has(r) ? d("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, e), g = (r, a, e, o) => (c(r, a, "write to private field"), o ? o.call(r, e) : a.set(r, e), e);
-import { __esDecorate as m, __runInitializers as u } from "tslib";
-import { css as h, html as v } from "lit";
-import { property as f } from "lit/decorators.js";
-import { SbbElement as k } from "../../core/base-elements.js";
-import { boxSizingStyles as y } from "../../core/styles.js";
-const x = h`:host{display:flex;position:relative;height:fit-content;width:fit-content;margin-inline-start:auto}:host:after{content:"";display:var(--sbb-card-badge-border-display, none);position:absolute;inset:0;border:var(--sbb-border-width-1x) solid CanvasText}:host{inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-card-badge-padding-inline)}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-3);--sbb-card-badge-background-color: var(--sbb-background-color-1);--sbb-card-badge-border-color: var(--sbb-color-aluminium);--sbb-card-badge-border-color: light-dark( var(--sbb-color-aluminium), var(--sbb-color-anthracite) )}:host(:dir(rtl)){--sbb-card-badge-skew: skew(-16deg, 0deg)}.sbb-card-badge-content{font-weight:700;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{display:block;position:absolute;inset:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-card-badge-border-radius);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:var(--sbb-card-badge-skew)}.sbb-card-badge-background:before{content:"";display:var(--sbb-card-badge-inline-border-display, block);position:absolute;inset:0;border-block-end:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-card-badge-border-radius)}`;
-let D = (() => {
-  var s, t;
-  let r = k, a, e = [], o = [];
-  return t = class extends r {
-    constructor() {
-      super(...arguments);
-      n(this, s, u(this, e, "charcoal"));
-      u(this, o);
-    }
-    /** Color of the card badge. */
-    get color() {
-      return l(this, s);
-    }
-    set color(b) {
-      g(this, s, b);
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.slot ||= "badge";
-    }
-    render() {
-      return v`
-      <span class="sbb-card-badge-background" aria-hidden="true"></span>
-      <span class="sbb-card-badge-content">
-        <slot></slot>
-      </span>
-    `;
-    }
-  }, s = new WeakMap(), (() => {
-    const b = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    a = [f({ reflect: !0 })], m(t, null, a, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, p) => {
-      i.color = p;
-    } }, metadata: b }, e, o), b && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: b });
-  })(), t.elementName = "sbb-card-badge", t.role = "text", t.styles = [y, x], t;
-})();
-export {
-  D as SbbCardBadgeElement
-};
+import { t as e } from "../../card-badge.component-D_PI9Ega.js";
+export { e as SbbCardBadgeElement };

package/card/card-badge.js

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

package/card/card-button/card-button.component.js

@@ -1,12 +1,13 @@
 import { SbbButtonBaseElement as e } from "../../core/base-elements.js";
-import { SbbCardActionCommonElementMixin as s } from "../common/card-action-common.js";
-const t = class t extends s(e) {
-  constructor() {
-    super(...arguments), this.actionRole = "button";
-  }
-};
-t.elementName = "sbb-card-button";
-let o = t;
-export {
-  o as SbbCardButtonElement
+import { SbbCardActionCommonElementMixin as t } from "../common/card-action-common.js";
+//#region src/elements/card/card-button/card-button.component.ts
+var n = class extends t(e) {
+	constructor() {
+		super(...arguments), this.actionRole = "button";
+	}
+	static {
+		this.elementName = "sbb-card-button";
+	}
 };
+//#endregion
+export { n as SbbCardButtonElement };

package/card/card-button.js

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

package/card/card-link/card-link.component.js

@@ -1,12 +1,13 @@
 import { SbbLinkBaseElement as e } from "../../core/base-elements.js";
-import { SbbCardActionCommonElementMixin as s } from "../common/card-action-common.js";
-const t = class t extends s(e) {
-  constructor() {
-    super(...arguments), this.actionRole = "link";
-  }
-};
-t.elementName = "sbb-card-link";
-let o = t;
-export {
-  o as SbbCardLinkElement
+import { SbbCardActionCommonElementMixin as t } from "../common/card-action-common.js";
+//#region src/elements/card/card-link/card-link.component.ts
+var n = class extends t(e) {
+	constructor() {
+		super(...arguments), this.actionRole = "link";
+	}
+	static {
+		this.elementName = "sbb-card-link";
+	}
 };
+//#endregion
+export { n as SbbCardLinkElement };

package/card/card-link.js

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

package/card/card.js

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

package/card/common/card-action-common.js

@@ -1,63 +1,2 @@
-import { __runInitializers as n, __esDecorate as b } from "tslib";
-import { MutationController as d } from "@lit-labs/observers/mutation-controller.js";
-import { property as u } from "lit/decorators.js";
-import { html as h } from "lit/static-html.js";
-import { IS_FOCUSABLE_QUERY as m } from "../../core/a11y.js";
-import { ɵstateController as o } from "../../core/mixins.js";
-import { boxSizingStyles as f } from "../../core/styles.js";
-import { css as p } from "lit";
-const v = p`:host{display:block;outline:none!important;position:absolute;inset:0}:is(.sbb-card-button,.sbb-card-link){display:block;position:absolute;inset:0;border-radius:var(--sbb-card-border-radius);cursor:var(--sbb-cursor-pointer);outline:none}:host(:focus-visible) :is(.sbb-card-button,.sbb-card-link),:is(.sbb-card-button,.sbb-card-link):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)}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, E = (c) => (() => {
-  var e;
-  let s = c, a = [], r;
-  return e = class extends s {
-    constructor() {
-      super(...arguments), this._active = (n(this, a), !1), this._card = null, this._cardMutationObserver = new d(this, {
-        target: null,
-        config: {
-          childList: !0,
-          subtree: !0,
-          attributes: !0,
-          attributeFilter: ["href", "tabindex", "disabled", "inert"]
-        },
-        callback: () => this._checkForSlottedActions()
-      });
-    }
-    /** Whether the card is active. */
-    set active(t) {
-      this._active = t, this._onActiveChange();
-    }
-    get active() {
-      return this._active;
-    }
-    _onActiveChange() {
-      this._card && o(this._card).toggle("has-active-action", this.active);
-    }
-    _checkForSlottedActions() {
-      Array.from(this._card?.querySelectorAll?.(m) ?? []).filter((t) => t.localName !== "sbb-card-link" && t.localName !== "sbb-card-button" && !t.classList.contains("sbb-action")).forEach((t) => t.classList.toggle("sbb-action", !0));
-    }
-    connectedCallback() {
-      if (super.connectedCallback(), this._card = this.closest?.("sbb-card"), this._card) {
-        this.slot ||= "action";
-        const t = o(this._card);
-        t.add("has-action"), t.toggle("has-active-action", this.active), t.add(`action-role-${this.actionRole}`), t.delete(`action-role-${this.actionRole === "button" ? "link" : "button"}`), this._checkForSlottedActions(), this._cardMutationObserver.observe(this._card);
-      }
-    }
-    disconnectedCallback() {
-      if (super.disconnectedCallback(), this._card) {
-        const t = o(this._card);
-        t.delete("has-action"), t.delete("has-active-action"), t.delete("action-role-button"), t.delete("action-role-link"), this._card.querySelectorAll(".sbb-action").forEach((i) => i.classList.remove("sbb-action")), this._card = null;
-      }
-    }
-    renderTemplate() {
-      return h`<span class="sbb-screen-reader-only"><slot></slot></span>`;
-    }
-  }, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    r = [u({ reflect: !0, type: Boolean })], b(e, null, r, { kind: "setter", name: "active", static: !1, private: !1, access: { has: (i) => "active" in i, set: (i, l) => {
-      i.active = l;
-    } }, metadata: t }, null, a), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.styles = [f, v], e;
-})();
-export {
-  E as SbbCardActionCommonElementMixin
-};
+import { t as e } from "../../card-action-common-GpkaNYtV.js";
+export { e as SbbCardActionCommonElementMixin };

package/card/common.js

@@ -1,6 +1,5 @@
-import { SbbCardActionCommonElementMixin as n } from "./common/card-action-common.js";
-console.warn(`The entrypoint '@sbb-esta/elements/card/common.js' has been deprecated.
-Use either '@sbb-esta/elements/card.js' or '@sbb-esta/elements/card.pure.js' instead.`);
-export {
-  n as SbbCardActionCommonElementMixin
-};
+import { t as e } from "../card-action-common-GpkaNYtV.js";
+//#region src/elements/card/common.ts
+console.warn("The entrypoint '@sbb-esta/elements/card/common.js' has been deprecated.\nUse either '@sbb-esta/elements/card.js' or '@sbb-esta/elements/card.pure.js' instead.");
+//#endregion
+export { e as SbbCardActionCommonElementMixin };

package/card-action-common-GpkaNYtV.js

@@ -0,0 +1,88 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { ɵstateController as i } from "./core/mixins.js";
+import { boxSizingStyles as a } from "./core/styles.js";
+import { html as o } from "lit/static-html.js";
+import { IS_FOCUSABLE_QUERY as s } from "./core/a11y.js";
+import { MutationController as c } from "@lit-labs/observers/mutation-controller.js";
+//#region src/elements/card/common/card-action.scss?lit&inline
+var l = n`:host{display:block;position:absolute;inset:0;outline:none!important}:is(.sbb-card-button,.sbb-card-link){border-radius:var(--sbb-card-border-radius);cursor:var(--sbb-cursor-pointer);outline:none;display:block;position:absolute;inset:0}:host(:focus-visible) :is(.sbb-card-button,.sbb-card-link),:is(.sbb-card-button,.sbb-card-link):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)}.sbb-screen-reader-only{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`, u = (n) => (() => {
+	let u = n, d = [], f;
+	return class extends u {
+		constructor() {
+			super(...arguments), this._active = (t(this, d), !1), this._card = null, this._cardMutationObserver = new c(this, {
+				target: null,
+				config: {
+					childList: !0,
+					subtree: !0,
+					attributes: !0,
+					attributeFilter: [
+						"href",
+						"tabindex",
+						"disabled",
+						"inert"
+					]
+				},
+				callback: () => this._checkForSlottedActions()
+			});
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+			f = [r({
+				reflect: !0,
+				type: Boolean
+			})], e(this, null, f, {
+				kind: "setter",
+				name: "active",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "active" in e,
+					set: (e, t) => {
+						e.active = t;
+					}
+				},
+				metadata: t
+			}, null, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.styles = [a, l];
+		}
+		set active(e) {
+			this._active = e, this._onActiveChange();
+		}
+		get active() {
+			return this._active;
+		}
+		_onActiveChange() {
+			this._card && i(this._card).toggle("has-active-action", this.active);
+		}
+		_checkForSlottedActions() {
+			Array.from(this._card?.querySelectorAll?.(s) ?? []).filter((e) => e.localName !== "sbb-card-link" && e.localName !== "sbb-card-button" && !e.classList.contains("sbb-action")).forEach((e) => e.classList.toggle("sbb-action", !0));
+		}
+		connectedCallback() {
+			if (super.connectedCallback(), this._card = this.closest?.("sbb-card"), this._card) {
+				this.slot ||= "action";
+				let e = i(this._card);
+				e.add("has-action"), e.toggle("has-active-action", this.active), e.add(`action-role-${this.actionRole}`), e.delete(`action-role-${this.actionRole === "button" ? "link" : "button"}`), this._checkForSlottedActions(), this._cardMutationObserver.observe(this._card);
+			}
+		}
+		disconnectedCallback() {
+			if (super.disconnectedCallback(), this._card) {
+				let e = i(this._card);
+				e.delete("has-action"), e.delete("has-active-action"), e.delete("action-role-button"), e.delete("action-role-link"), this._card.querySelectorAll(".sbb-action").forEach((e) => e.classList.remove("sbb-action")), this._card = null;
+			}
+		}
+		renderTemplate() {
+			return o`<span class="sbb-screen-reader-only"><slot></slot></span>`;
+		}
+	};
+})();
+//#endregion
+export { u as t };

package/card-badge.component-D_PI9Ega.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/card/card-badge/card-badge.scss?lit&inline
+var s = n`:host{width:fit-content;height:fit-content;margin-inline-start:auto;display:flex;position:relative}:host:after{content:"";display:var(--sbb-card-badge-border-display,none);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute;inset:0}:host{padding-inline:var(--sbb-card-badge-padding-inline);inset-block-start:0;inset-inline-end:0}:host([color=white]){--sbb-card-badge-color:var(--sbb-color-3);--sbb-card-badge-background-color:var(--sbb-background-color-1);--sbb-card-badge-border-color:var(--lightningcss-light,var(--sbb-color-aluminium))var(--lightningcss-dark,var(--sbb-color-anthracite))}:host(:dir(rtl)){--sbb-card-badge-skew:skew(-16deg, 0deg)}.sbb-card-badge-content{font-weight:700;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color);display:flex;position:relative}.sbb-card-badge-background{background-color:var(--sbb-card-badge-background-color);transform:var(--sbb-card-badge-skew);border-end-start-radius:var(--sbb-card-badge-border-radius);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);display:block;position:absolute;inset:0}.sbb-card-badge-background:before{content:"";display:var(--sbb-card-badge-inline-border-display,block);border-block-end:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-card-badge-border-radius);position:absolute;inset:0}`, 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({ reflect: !0 })], e(this, null, c, {
+				kind: "accessor",
+				name: "color",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "color" in e,
+					get: (e) => e.color,
+					set: (e, t) => {
+						e.color = t;
+					}
+				},
+				metadata: t
+			}, l, u), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-card-badge";
+		}
+		static {
+			this.role = "text";
+		}
+		static {
+			this.styles = [o, s];
+		}
+		#e = t(this, l, "charcoal");
+		get color() {
+			return this.#e;
+		}
+		set color(e) {
+			this.#e = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.slot ||= "badge";
+		}
+		render() {
+			return r`
+      <span class="sbb-card-badge-background" aria-hidden="true"></span>
+      <span class="sbb-card-badge-content">
+        <slot></slot>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, u);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/card.component-Dt2YFmd3.js

@@ -0,0 +1,62 @@
+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/card/card/card.scss?lit&inline
+var s = n`:host{--sbb-focus-outline-color:var(--lightningcss-light,var(--sbb-focus-outline-color-default))var(--lightningcss-dark,var(--sbb-focus-outline-color-dark));--sbb-title-text-color-normal-override:var(--sbb-card-color);--sbb-card-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-1x));padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);display:block;position:relative}:host:after{content:"";border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none;background-color:#0000;position:absolute;inset:0}:host{--sbb-card-padding-block:var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block:var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline:var(--sbb-card-padding-inline-default)}:host(:where([color=white])){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:where([color=milk])){--sbb-card-background-color:var(--sbb-background-color-3);--sbb-card-border-color:transparent}:host(:where([color=transparent-bordered])){--sbb-card-background-color:transparent;--sbb-card-border-color:var(--sbb-border-color-4-inverted);--sbb-card-border-width:var(--sbb-border-width-1x);--sbb-focus-outline-color:inherit}:host(:where([color=transparent-bordered-dashed])){--sbb-card-background-color:transparent;--sbb-card-border-color:var(--lightningcss-light,var(--sbb-color-cement))var(--lightningcss-dark,var(--sbb-color-granite));--sbb-card-border-width:var(--sbb-border-width-1x);--sbb-card-border-style:dashed;--sbb-focus-outline-color:inherit}:host(:where(:not([color]))){--sbb-card-background-color:var(--sbb-background-color-1);--sbb-card-border-color:transparent}:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color:var(--sbb-border-color-3);--sbb-card-border-width:var(--sbb-border-width-2x);--sbb-card-border-style:solid}@media (forced-colors:active){:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color:Highlight}}:host(:is(:state(has-action),[state--has-action])){--sbb-card-pointer-events:none}@media (any-hover:hover){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-hover-shift:-.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media (any-hover:hover) and (forced-colors:active){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-border-color:Highlight}}@media (forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))){--sbb-card-color:ButtonText}:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))){--sbb-card-color:LinkText;--sbb-card-border-color:CanvasText}}:host(.sbb-card-spacing-3x-xxs){--sbb-card-padding-block:var(--sbb-spacing-fixed-3x);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-xxs){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-s){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-4x-xxs){--sbb-card-padding-block:var(--sbb-spacing-fixed-4x);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxs){--sbb-card-padding-block:var(--sbb-spacing-responsive-xxs);--sbb-card-with-badge-padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);--sbb-card-padding-inline:var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-s){--sbb-card-padding-block:var(--sbb-spacing-responsive-s);--sbb-card-with-badge-padding-block:var(--sbb-spacing-responsive-s);--sbb-card-padding-inline:var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-l){--sbb-card-padding-block:var(--sbb-spacing-responsive-l);--sbb-card-with-badge-padding-block:var(--sbb-spacing-responsive-l);--sbb-card-padding-inline:var(--sbb-spacing-responsive-l)}:host(:is(:state(slotted-badge),[state--slotted-badge])){--sbb-card-padding-block:var(--sbb-card-with-badge-padding-block);--sbb-card-badge-display:block}.sbb-card__wrapper{pointer-events:var(--sbb-card-pointer-events,auto);height:100%;translate:0 var(--sbb-card-hover-shift,0);transition:translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);display:block}.sbb-card__badge-wrapper{display:var(--sbb-card-badge-display,none);inset:0;pointer-events:var(--sbb-card-pointer-events,auto);border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius);position:absolute;inset-block-end:unset;overflow:hidden}::slotted(sbb-title){margin-block-start:0}`, 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({ reflect: !0 })], e(this, null, c, {
+				kind: "accessor",
+				name: "color",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "color" in e,
+					get: (e) => e.color,
+					set: (e, t) => {
+						e.color = t;
+					}
+				},
+				metadata: t
+			}, l, u), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-card";
+		}
+		static {
+			this.styles = [o, s];
+		}
+		#e = t(this, l, "white");
+		get color() {
+			return this.#e;
+		}
+		set color(e) {
+			this.#e = e;
+		}
+		render() {
+			return r`
+      <slot name="action"></slot>
+      <span class="sbb-card__wrapper">
+        <slot></slot>
+      </span>
+      <span class="sbb-card__badge-wrapper">
+        <slot name="badge"></slot>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, u);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/card.js

@@ -1,16 +1,9 @@
-import { SbbCardBadgeElement as e } from "./card/card-badge/card-badge.component.js";
-import { SbbCardButtonElement as m } from "./card/card-button/card-button.component.js";
-import { SbbCardLinkElement as r } from "./card/card-link/card-link.component.js";
-import { SbbCardElement as o } from "./card/card/card.component.js";
-import { SbbCardActionCommonElementMixin as a } from "./card/common/card-action-common.js";
-o.define();
-e.define();
-m.define();
-r.define();
-export {
-  a as SbbCardActionCommonElementMixin,
-  e as SbbCardBadgeElement,
-  m as SbbCardButtonElement,
-  o as SbbCardElement,
-  r as SbbCardLinkElement
-};
+import { t as e } from "./card-badge.component-D_PI9Ega.js";
+import { SbbCardButtonElement as t } from "./card/card-button/card-button.component.js";
+import { SbbCardLinkElement as n } from "./card/card-link/card-link.component.js";
+import { t as r } from "./card.component-Dt2YFmd3.js";
+import { t as i } from "./card-action-common-GpkaNYtV.js";
+import "./card.pure.js";
+r.define(), e.define(), t.define(), n.define();
+//#endregion
+export { i as SbbCardActionCommonElementMixin, e as SbbCardBadgeElement, t as SbbCardButtonElement, r as SbbCardElement, n as SbbCardLinkElement };

package/card.pure.js

@@ -1,12 +1,6 @@
-import { SbbCardBadgeElement as o } from "./card/card-badge/card-badge.component.js";
-import { SbbCardButtonElement as m } from "./card/card-button/card-button.component.js";
+import { t as e } from "./card-badge.component-D_PI9Ega.js";
+import { SbbCardButtonElement as t } from "./card/card-button/card-button.component.js";
 import { SbbCardLinkElement as n } from "./card/card-link/card-link.component.js";
-import { SbbCardElement as d } from "./card/card/card.component.js";
-import { SbbCardActionCommonElementMixin as C } from "./card/common/card-action-common.js";
-export {
-  C as SbbCardActionCommonElementMixin,
-  o as SbbCardBadgeElement,
-  m as SbbCardButtonElement,
-  d as SbbCardElement,
-  n as SbbCardLinkElement
-};
+import { t as r } from "./card.component-Dt2YFmd3.js";
+import { t as i } from "./card-action-common-GpkaNYtV.js";
+export { i as SbbCardActionCommonElementMixin, e as SbbCardBadgeElement, t as SbbCardButtonElement, r as SbbCardElement, n as SbbCardLinkElement };