@sbb-esta/lyne-elements 1.4.0 → 1.5.0

package/flip-card/flip-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './flip-card.js';
+//# sourceMappingURL=index.d.ts.map

package/flip-card/flip-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/flip-card/flip-card-details/flip-card-details.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+
+/**
+ * Combined with a `sbb-flip-card`, it displays its content when the card is flipped.
+ *
+ * @slot - Use the unnamed slot to provide any kind of content.
+ */
+export declare class SbbFlipCardDetailsElement extends LitElement {
+    static styles: CSSResultGroup;
+    private _flipCardMutationObserver;
+    private _checkForSlottedActions;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-flip-card-details': SbbFlipCardDetailsElement;
+    }
+}
+//# sourceMappingURL=flip-card-details.d.ts.map

package/flip-card/flip-card-details/flip-card-details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-card-details.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-details/flip-card-details.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC;;;;GAIG;AACH,qBAIa,yBAA0B,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,yBAAyB,CAE/B;IAEF,OAAO,CAAC,uBAAuB;IAQf,iBAAiB,IAAI,IAAI;cAStB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAKxD,oBAAoB,IAAI,IAAI;cAKzB,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}

package/flip-card/flip-card-details/index.d.ts

@@ -0,0 +1,2 @@
+export * from './flip-card-details.js';
+//# sourceMappingURL=index.d.ts.map

package/flip-card/flip-card-details/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-details/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/flip-card/flip-card-details.d.ts

@@ -0,0 +1,2 @@
+export * from './flip-card-details/flip-card-details.js';
+//# sourceMappingURL=flip-card-details.d.ts.map

package/flip-card/flip-card-details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-card-details.d.ts","sourceRoot":"","sources":["../../../src/elements/flip-card/flip-card-details.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}

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

@@ -0,0 +1,52 @@
+import { css as c, LitElement as n, html as b } from "lit";
+import { customElement as d } from "lit/decorators.js";
+import { IS_FOCUSABLE_QUERY as p } from "../core/a11y.js";
+import { hostAttributes as f } from "../core/decorators.js";
+import { AgnosticMutationObserver as v } from "../core/observers.js";
+const u = c`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-details-opacity: 0;--sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);display:contents}.sbb-flip-card-details{pointer-events:none;color:var(--sbb-color-milk);opacity:var(--sbb-flip-card-details-opacity);padding:var(--sbb-spacing-responsive-s);padding-block-end:calc(var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m));transform:translateY(var(--sbb-flip-card-details-translate-y));transition:var(--sbb-flip-card-details-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-details-transition-delay);max-height:var(--sbb-flip-card-details-min-height)}`;
+var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, _ = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? h(e, s) : e, a = t.length - 1, o; a >= 0; a--)
+    (o = t[a]) && (r = (i ? o(e, s, r) : o(r)) || r);
+  return i && r && m(e, s, r), r;
+};
+let l = class extends n {
+  constructor() {
+    super(...arguments), this._flipCardMutationObserver = new v(
+      () => this._checkForSlottedActions()
+    );
+  }
+  _checkForSlottedActions() {
+    var e;
+    const t = "data-card-focusable";
+    Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, p)) ?? []).filter((s) => !s.hasAttribute(t)).forEach((s) => s.setAttribute(t, ""));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._checkForSlottedActions(), this._flipCardMutationObserver.observe(this, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._checkForSlottedActions();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._flipCardMutationObserver.disconnect();
+  }
+  render() {
+    return b`
+      <div class="sbb-flip-card-details">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+l.styles = u;
+l = _([
+  d("sbb-flip-card-details"),
+  f({
+    slot: "details"
+  })
+], l);
+export {
+  l as SbbFlipCardDetailsElement
+};

package/flip-card/flip-card-summary/flip-card-summary.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+
+export type SbbFlipCardImageAlignment = 'after' | 'below';
+/**
+ * Combined with a `sbb-flip-card`, it displays its content when the card is not flipped.
+ *
+ * @slot - Use the unnamed slot to provide a title for the `sbb-flip-card-summary`.
+ * @slot image - Use this slot to provide an image for the `sbb-flip-card-summary`.
+ */
+export declare class SbbFlipCardSummaryElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** The position where to render the image. */
+    imageAlignment: SbbFlipCardImageAlignment;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-flip-card-summary': SbbFlipCardSummaryElement;
+    }
+}
+//# sourceMappingURL=flip-card-summary.d.ts.map

package/flip-card/flip-card-summary/flip-card-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-card-summary.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-summary/flip-card-summary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAOvC,MAAM,MAAM,yBAAyB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,qBAIa,yBAA0B,SAAQ,UAAU;IACvD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,8CAA8C;IAEvC,cAAc,EAAE,yBAAyB,CAAW;cAExC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAQpD,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,yBAAyB,CAAC;KACpD;CACF"}

package/flip-card/flip-card-summary/index.d.ts

@@ -0,0 +1,2 @@
+export * from './flip-card-summary.js';
+//# sourceMappingURL=index.d.ts.map

package/flip-card/flip-card-summary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/flip-card/flip-card-summary/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/flip-card/flip-card-summary.d.ts

@@ -0,0 +1,2 @@
+export * from './flip-card-summary/flip-card-summary.js';
+//# sourceMappingURL=flip-card-summary.d.ts.map

package/flip-card/flip-card-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-card-summary.d.ts","sourceRoot":"","sources":["../../../src/elements/flip-card/flip-card-summary.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}

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

@@ -0,0 +1,41 @@
+import { css as d, LitElement as o, html as p } from "lit";
+import { property as b, customElement as g } from "lit/decorators.js";
+import { hostAttributes as f } from "../core/decorators.js";
+const c = d`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-summary-opacity: 1;--sbb-flip-card-summary-pointer-events: all;display:contents}.sbb-flip-card-summary{display:grid;position:absolute;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:1fr;grid-template-rows:auto 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,1fr);grid-template-rows:1fr}}@media (min-width: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary{grid-template-columns:repeat(2,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: 52.5rem){:host([image-alignment=after]) ::slotted(sbb-title){grid-area:1/1/2/2}}.sbb-flip-card-summary--image-wrapper{max-height:var(--sbb-flip-card-min-height);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: 52.5rem){:host([image-alignment=after]) .sbb-flip-card-summary--image-wrapper{grid-area:1/2/2/3}}::slotted(img){object-fit:cover;width:100%;height:100%}::slotted(sbb-image){width:100%;height:100%}`;
+var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (i, e, a, t) => {
+  for (var r = t > 1 ? void 0 : t ? h(e, a) : e, m = i.length - 1, l; m >= 0; m--)
+    (l = i[m]) && (r = (t ? l(e, a, r) : l(r)) || r);
+  return t && r && u(e, a, r), r;
+};
+let s = class extends o {
+  constructor() {
+    super(...arguments), this.imageAlignment = "after";
+  }
+  willUpdate(i) {
+    var e, a;
+    super.willUpdate(i), i.has("imageAlignment") && ((a = (e = this.closest) == null ? void 0 : e.call(this, "sbb-flip-card")) == null || a.setAttribute("data-image-alignment", this.imageAlignment));
+  }
+  render() {
+    return p`
+      <div class="sbb-flip-card-summary">
+        <slot></slot>
+        <div class="sbb-flip-card-summary--image-wrapper">
+          <slot name="image"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = c;
+n([
+  b({ attribute: "image-alignment", reflect: !0 })
+], s.prototype, "imageAlignment", 2);
+s = n([
+  g("sbb-flip-card-summary"),
+  f({
+    slot: "summary"
+  })
+], s);
+export {
+  s as SbbFlipCardSummaryElement
+};

package/flip-card/flip-card.d.ts

@@ -0,0 +1,2 @@
+export * from './flip-card/flip-card.js';
+//# sourceMappingURL=flip-card.d.ts.map

package/flip-card/flip-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-card.d.ts","sourceRoot":"","sources":["../../../src/elements/flip-card/flip-card.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/flip-card/flip-card.js

@@ -0,0 +1,58 @@
+import { css as b, LitElement as d, html as p } from "lit";
+import { state as c, customElement as m } from "lit/decorators.js";
+import { SbbLanguageController as f } from "../core/controllers.js";
+import { i18nFlipCard as u, i18nReverseCard as h } from "../core/i18n.js";
+import { SbbHydrationMixin as g } from "../core/mixins.js";
+import "../button/secondary-button.js";
+const v = b`*,:before,:after{box-sizing:border-box}:host{--sbb-flip-card-background-color: var(--sbb-color-cloud);--sbb-flip-card-border-radius: var(--sbb-border-radius-4x);--sbb-flip-card-min-height: 17.5rem;--sbb-flip-card-details-min-height: var(--sbb-flip-card-min-height);--sbb-flip-card-summary-transition-duration: var(--sbb-animation-duration-5x);--sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);--sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-4x);--sbb-flip-card-details-transition-delay: var(--sbb-disable-animation-zero-time);position:relative;display:block}@media (min-width: 52.5rem){:host{--sbb-flip-card-min-height: 20rem}}:host(:hover){--sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80)}:host([data-flipped]){--sbb-flip-card-background-color: var(--sbb-color-midnight);--sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-2x);--sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);--sbb-flip-card-summary-transition-delay: var(--sbb-disable-animation-zero-time);--sbb-flip-card-details-min-height: fit-content}:host([data-flipped]) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host([data-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: 52.4375rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 15rem}}@media (min-width: 80rem){:host([data-image-alignment=after]){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;gap:var(--sbb-spacing-responsive-xs);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:var(--sbb-flip-card-summary-transition-duration) ease-out;transition-delay:var(--sbb-flip-card-summary-transition-delay)}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-spacing-responsive-s);inset-block-end:var(--sbb-spacing-responsive-s)}:host([data-flipped]) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}button{-webkit-appearance:none;-moz-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;cursor:pointer;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-flip-card-border-radius)}button:not([data-focus-origin=mouse],[data-focus-origin=touch]):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (n, t, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? _(t, s) : t, e = n.length - 1, o; e >= 0; e--)
+    (o = n[e]) && (i = (a ? o(t, s, i) : o(i)) || i);
+  return a && i && y(t, s, i), i;
+};
+let r = class extends g(d) {
+  constructor() {
+    super(...arguments), this._flipped = !1, this._language = new f(this);
+  }
+  /** Returns the slotted sbb-flip-card-summary. */
+  get summary() {
+    return this.querySelector("sbb-flip-card-summary");
+  }
+  /** Returns the slotted sbb-flip-card-details. */
+  get details() {
+    return this.querySelector("sbb-flip-card-details");
+  }
+  /** Toggles the state of the sbb-flip-card. */
+  toggle() {
+    this._flipped = !this._flipped, this.toggleAttribute("data-flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped;
+  }
+  render() {
+    return p`
+      <div class="sbb-flip-card">
+        <slot name="summary" @slotchange=${() => this.summary.inert = this._flipped}></slot>
+        <button
+          @click=${() => this.toggle()}
+          aria-label=${this._flipped ? h[this._language.current] : u[this._language.current]}
+          aria-expanded=${this._flipped.toString()}
+        ></button>
+        <slot name="details" @slotchange=${() => this.details.inert = !this._flipped}></slot>
+        <sbb-secondary-button
+          class="sbb-flip-card--toggle-button"
+          icon-name=${this._flipped ? "cross-small" : "plus-small"}
+          @click=${() => this.toggle()}
+          size="s"
+        ></sbb-secondary-button>
+      </div>
+    `;
+  }
+};
+r.styles = v;
+l([
+  c()
+], r.prototype, "_flipped", 2);
+r = l([
+  m("sbb-flip-card")
+], r);
+export {
+  r as SbbFlipCardElement
+};

package/flip-card.d.ts

@@ -0,0 +1,4 @@
+export * from './flip-card/flip-card.js';
+export * from './flip-card/flip-card-summary.js';
+export * from './flip-card/flip-card-details.js';
+//# sourceMappingURL=flip-card.d.ts.map

package/flip-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-card.d.ts","sourceRoot":"","sources":["../../src/elements/flip-card.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC"}

package/flip-card.js

@@ -0,0 +1,3 @@
+export * from "./flip-card/flip-card.js";
+export * from "./flip-card/flip-card-summary.js";
+export * from "./flip-card/flip-card-details.js";

package/index.d.ts

@@ -49,6 +49,9 @@ import { SbbExpansionPanelElement } from "./expansion-panel/expansion-panel.js";
 import { SbbExpansionPanelContentElement } from "./expansion-panel/expansion-panel-content.js";
 import { SbbExpansionPanelHeaderElement } from "./expansion-panel/expansion-panel-header.js";
 import { SbbFileSelectorElement } from "./file-selector.js";
+import { SbbFlipCardElement } from "./flip-card/flip-card.js";
+import { SbbFlipCardDetailsElement } from "./flip-card/flip-card-details.js";
+import { SbbFlipCardSummaryElement } from "./flip-card/flip-card-summary.js";
 import { SbbFooterElement } from "./footer.js";
 import { SbbFormErrorElement } from "./form-error.js";
 import { SbbFormFieldElement } from "./form-field/form-field.js";
@@ -172,6 +175,9 @@ declare global {
   var SbbExpansionPanelContentElement: SbbExpansionPanelContentElement;
   var SbbExpansionPanelHeaderElement: SbbExpansionPanelHeaderElement;
   var SbbFileSelectorElement: SbbFileSelectorElement;
+  var SbbFlipCardElement: SbbFlipCardElement;
+  var SbbFlipCardDetailsElement: SbbFlipCardDetailsElement;
+  var SbbFlipCardSummaryElement: SbbFlipCardSummaryElement;
   var SbbFooterElement: SbbFooterElement;
   var SbbFormErrorElement: SbbFormErrorElement;
   var SbbFormFieldElement: SbbFormFieldElement;

package/index.js

@@ -49,6 +49,9 @@ import { SbbExpansionPanelElement } from "./expansion-panel/expansion-panel.js";
 import { SbbExpansionPanelContentElement } from "./expansion-panel/expansion-panel-content.js";
 import { SbbExpansionPanelHeaderElement } from "./expansion-panel/expansion-panel-header.js";
 import { SbbFileSelectorElement } from "./file-selector.js";
+import { SbbFlipCardElement } from "./flip-card/flip-card.js";
+import { SbbFlipCardDetailsElement } from "./flip-card/flip-card-details.js";
+import { SbbFlipCardSummaryElement } from "./flip-card/flip-card-summary.js";
 import { SbbFooterElement } from "./footer.js";
 import { SbbFormErrorElement } from "./form-error.js";
 import { SbbFormFieldElement } from "./form-field/form-field.js";
@@ -171,6 +174,9 @@ globalThis.SbbExpansionPanelElement = SbbExpansionPanelElement;
 globalThis.SbbExpansionPanelContentElement = SbbExpansionPanelContentElement;
 globalThis.SbbExpansionPanelHeaderElement = SbbExpansionPanelHeaderElement;
 globalThis.SbbFileSelectorElement = SbbFileSelectorElement;
+globalThis.SbbFlipCardElement = SbbFlipCardElement;
+globalThis.SbbFlipCardDetailsElement = SbbFlipCardDetailsElement;
+globalThis.SbbFlipCardSummaryElement = SbbFlipCardSummaryElement;
 globalThis.SbbFooterElement = SbbFooterElement;
 globalThis.SbbFormErrorElement = SbbFormErrorElement;
 globalThis.SbbFormFieldElement = SbbFormFieldElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -469,6 +469,26 @@
       "development": "./development/file-selector.js",
       "default": "./file-selector.js"
     },
+    "./flip-card.js": {
+      "types": "./development/flip-card.d.ts",
+      "development": "./development/flip-card.js",
+      "default": "./flip-card.js"
+    },
+    "./flip-card/flip-card.js": {
+      "types": "./development/flip-card/flip-card.d.ts",
+      "development": "./development/flip-card/flip-card.js",
+      "default": "./flip-card/flip-card.js"
+    },
+    "./flip-card/flip-card-details.js": {
+      "types": "./development/flip-card/flip-card-details.d.ts",
+      "development": "./development/flip-card/flip-card-details.js",
+      "default": "./flip-card/flip-card-details.js"
+    },
+    "./flip-card/flip-card-summary.js": {
+      "types": "./development/flip-card/flip-card-summary.d.ts",
+      "development": "./development/flip-card/flip-card-summary.js",
+      "default": "./flip-card/flip-card-summary.js"
+    },
     "./footer.js": {
       "types": "./development/footer.d.ts",
       "development": "./development/footer.js",

package/radio-button/radio-button-panel/radio-button-panel.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SbbPanelSize } from '../../core/mixins.js';
 
-export type SbbRadioButtonPanelSize = 's' | 'm';
 declare const SbbRadioButtonPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbPanelMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbRadioButtonCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
 /**
  /**
@@ -20,8 +20,8 @@ export declare class SbbRadioButtonPanelElement extends SbbRadioButtonPanelEleme
     /**
      * Size variant.
      */
-    set size(value: SbbRadioButtonPanelSize);
-    get size(): SbbRadioButtonPanelSize;
+    set size(value: SbbPanelSize);
+    get size(): SbbPanelSize;
     private _size;
     protected willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
     protected render(): TemplateResult;

package/radio-button/radio-button-panel/radio-button-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,CAAC;;AAEhD;;;;;;;;GAQG;AACH,qBAEa,0BAA2B,SAAQ,+BAE/C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;IAEX;;OAEG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,EAE7C;IACD,IAAW,IAAI,IAAI,uBAAuB,CAEzC;IACD,OAAO,CAAC,KAAK,CAAgC;cAEpB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQxE,MAAM,IAAI,cAAc;CA6B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}
+{"version":3,"file":"radio-button-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-panel/radio-button-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,6BAA6B,CAAC;;AAErC;;;;;;;;GAQG;AACH,qBAEa,0BAA2B,SAAQ,+BAE/C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;IAEX;;OAEG;IACH,IACW,IAAI,CAAC,KAAK,EAAE,YAAY,EAElC;IACD,IAAW,IAAI,IAAI,YAAY,CAE9B;IACD,OAAO,CAAC,KAAK,CAAqB;cAET,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQxE,MAAM,IAAI,cAAc;CA6B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

package/status/status.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
 import { SbbTitleLevel } from '../title.js';
 
-export type SbbStatusType = 'info' | 'success' | 'warning' | 'error';
+export type SbbStatusType = 'info' | 'success' | 'warning' | 'error' | 'pending' | 'incomplete' | 'not-started' | 'in-progress';
 declare const SbbStatusElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & typeof LitElement;
 /**
  * Displays a message to the user's attention.

package/status/status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/elements/status/status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;;AAErE;;;;;;GAMG;AACH,qBAEa,gBAAiB,SAAQ,qBAA4B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK1B;IAEH,8BAA8B;IACM,IAAI,EAAE,aAAa,CAAU;IAEjE,wBAAwB;IACwC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,yFAAyF;IAC1C,UAAU,EAAE,aAAa,CAAO;cAE5D,cAAc,IAAI,cAAc;cAQhC,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/elements/status/status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;GAMG;AACH,qBAEa,gBAAiB,SAAQ,qBAA4B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IACM,IAAI,EAAE,aAAa,CAAU;IAEjE,wBAAwB;IACwC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,yFAAyF;IAC1C,UAAU,EAAE,aAAa,CAAO;cAE5D,cAAc,IAAI,cAAc;cAQhC,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/status.js

@@ -1,21 +1,25 @@
 import { css as p, LitElement as u, html as c } from "lit";
-import { property as i, customElement as v } from "lit/decorators.js";
-import { slotState as m } from "./core/decorators.js";
-import { SbbIconNameMixin as f } from "./icon.js";
+import { property as i, customElement as m } from "lit/decorators.js";
+import { slotState as v } from "./core/decorators.js";
+import { SbbIconNameMixin as y } from "./icon.js";
 import "./title.js";
-const y = p`*,:before,:after{box-sizing:border-box}:host{--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-icon-color: var(--sbb-color-iron);--sbb-status-text-color: var(--sbb-color-iron);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=error],[type=error]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-text-color: var(--sbb-color-green)}:host(:is([type=success],[type=success]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-text-color: var(--sbb-color-granite);--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-icon-font-size) * var(--sbb-typo-line-height-body-text) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__title{margin-block:0}:host(:not(:is([data-slot-names~=title],[title-content]))) .sbb-status__title{display:none}.sbb-status__content-slot{display:inline;margin:0;padding:0}`;
-var h = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (n, e, a, o) => {
-  for (var t = o > 1 ? void 0 : o ? x(e, a) : e, b = n.length - 1, l; b >= 0; b--)
-    (l = n[b]) && (t = (o ? l(e, a, t) : l(t)) || t);
-  return o && t && h(e, a, t), t;
+const d = p`*,:before,:after{box-sizing:border-box}:host{--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-icon-color: var(--sbb-color-iron);--sbb-status-text-color: var(--sbb-color-iron);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=error],[type=error]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-text-color: var(--sbb-color-green)}:host(:is([type=success],[type=success]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-text-color: var(--sbb-color-charcoal)}:host([type=pending]){--sbb-status-text-color: var(--sbb-color-sky)}:host(:is([type=pending],[type=pending]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-text-color: var(--sbb-color-red125)}:host(:is([type=incomplete],[type=incomplete]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-icon-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host(:is([type=not-started],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-smoke)}:host([type=in-progress]){--sbb-status-text-color: var(--sbb-color-pink)}:host(:is([type=in-progress],[type=in-progress]:is([data-slot-names~=title],[title-content]))){--sbb-status-icon-color: var(--sbb-color-pink)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-text-color: var(--sbb-color-granite);--sbb-status-icon-color: var(--sbb-color-charcoal);--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-icon-font-size) * var(--sbb-typo-line-height-body-text) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__title{margin-block:0}:host(:not(:is([data-slot-names~=title],[title-content]))) .sbb-status__title{display:none}.sbb-status__content-slot{display:inline;margin:0;padding:0}`;
+var h = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (n, o, l, e) => {
+  for (var t = e > 1 ? void 0 : e ? f(o, l) : o, a = n.length - 1, b; a >= 0; a--)
+    (b = n[a]) && (t = (e ? b(o, l, t) : b(t)) || t);
+  return e && t && h(o, l, t), t;
 };
-let s = class extends f(u) {
+let s = class extends y(u) {
   constructor() {
     super(...arguments), this._statusTypes = /* @__PURE__ */ new Map([
       ["info", "circle-information-small"],
       ["success", "circle-tick-small"],
       ["warning", "circle-exclamation-point-small"],
-      ["error", "circle-cross-small"]
+      ["error", "circle-cross-small"],
+      ["pending", "circle-three-dots-small"],
+      ["incomplete", "circle-dotted-part-x-small"],
+      ["not-started", "circle-dotted-small"],
+      ["in-progress", "circle-dotted-part-small"]
     ]), this.type = "info", this.titleLevel = "3";
   }
   renderIconSlot() {
@@ -41,7 +45,7 @@ let s = class extends f(u) {
     `;
   }
 };
-s.styles = y;
+s.styles = d;
 r([
   i({ reflect: !0 })
 ], s.prototype, "type", 2);
@@ -52,8 +56,8 @@ r([
   i({ attribute: "title-level" })
 ], s.prototype, "titleLevel", 2);
 s = r([
-  v("sbb-status"),
-  m()
+  m("sbb-status"),
+  v()
 ], s);
 export {
   s as SbbStatusElement

package/visual-checkbox/visual-checkbox.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbCheckboxSize } from '../checkbox/common.js';
 
 declare const SbbVisualCheckboxElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
 /**
@@ -10,6 +11,8 @@ export declare class SbbVisualCheckboxElement extends SbbVisualCheckboxElement_b
     checked: boolean;
     /** Indeterminate state. */
     indeterminate: boolean;
+    /** Size of the checkbox. */
+    size: SbbCheckboxSize;
     protected render(): TemplateResult;
 }
 declare global {

package/visual-checkbox/visual-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-checkbox.d.ts","sourceRoot":"","sources":["../../../src/elements/visual-checkbox/visual-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;;AAOhD;;GAEG;AACH,qBACa,wBAAyB,SAAQ,6BAA8C;IAC1F,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,qBAAqB;IAC8B,OAAO,EAAE,OAAO,CAAS;IAE5E,2BAA2B;IACwB,aAAa,UAAS;cAEtD,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
+{"version":3,"file":"visual-checkbox.d.ts","sourceRoot":"","sources":["../../../src/elements/visual-checkbox/visual-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;;AAK7D;;GAEG;AACH,qBACa,wBAAyB,SAAQ,6BAA8C;IAC1F,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,qBAAqB;IAC8B,OAAO,EAAE,OAAO,CAAS;IAE5E,2BAA2B;IACwB,aAAa,UAAS;IAEzE,4BAA4B;IACQ,IAAI,EAAE,eAAe,CAAO;cAE7C,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/visual-checkbox.js

@@ -1,23 +1,23 @@
-import { css as d, LitElement as v, html as t, nothing as h } from "lit";
-import { property as n, customElement as u } from "lit/decorators.js";
-import { SbbDisabledMixin as k, SbbNegativeMixin as x } from "./core/mixins.js";
-const m = d`*,:before,:after{box-sizing:border-box}:host{--sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-visual-checkbox-background-color: var(--sbb-color-white);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: solid;--sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);--sbb-visual-checkbox-selection-color: var(--sbb-color-red);--sbb-visual-checkbox-cursor: pointer;display:block}@media (forced-colors: active){:host{--sbb-visual-checkbox-selection-color: Canvas;--sbb-visual-checkbox-border-width: 0}}:host([negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-midnight);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-red)}@media (forced-colors: active){:host([negative]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled]){--sbb-visual-checkbox-background-color: var(--sbb-color-milk);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: dashed;--sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled][negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-white)}@media (forced-colors: active){:host([disabled][negative]){--sbb-visual-checkbox-selection-color: Canvas}}@media (forced-colors: active){:host([indeterminate]){--sbb-visual-checkbox-selection-color: ButtonBorder}}@media (forced-colors: active){:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color: GrayText}}.sbb-visual-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);border:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor)}@media (forced-colors: active){.sbb-visual-checkbox{outline:var(--sbb-border-width-2x) solid ButtonBorder;outline-offset:calc(-1 * var(--sbb-border-width-2x))}:host([checked]:not([indeterminate])) .sbb-visual-checkbox{background-color:HighLight;outline:none}:host([disabled]) .sbb-visual-checkbox{outline-color:GrayText}:host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox{background-color:GrayText}}.sbb-visual-checkbox__icon{display:inline-flex;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension)}.sbb-visual-checkbox__icon svg{margin:auto}.sbb-visual-checkbox__icon path{stroke:var(--sbb-visual-checkbox-selection-color)}`;
-var p = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (l, s, c, b) => {
-  for (var o = b > 1 ? void 0 : b ? g(s, c) : s, r = l.length - 1, i; r >= 0; r--)
-    (i = l[r]) && (o = (b ? i(s, c, o) : i(o)) || o);
-  return b && o && p(s, c, o), o;
+import { css as h, LitElement as d, html as n, nothing as v } from "lit";
+import { property as l, customElement as u } from "lit/decorators.js";
+import { SbbDisabledMixin as x, SbbNegativeMixin as k } from "./core/mixins.js";
+const m = h`*,:before,:after{box-sizing:border-box}:host{--sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-visual-checkbox-background-color: var(--sbb-color-white);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: solid;--sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);--sbb-visual-checkbox-selection-color: var(--sbb-color-red);--sbb-visual-checkbox-cursor: pointer;display:block}@media (forced-colors: active){:host{--sbb-visual-checkbox-selection-color: Canvas;--sbb-visual-checkbox-border-width: 0}}:host([size=xs]){--sbb-visual-checkbox-dimension: 1.25rem}:host([negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-midnight);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-red)}@media (forced-colors: active){:host([negative]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled]){--sbb-visual-checkbox-background-color: var(--sbb-color-milk);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: dashed;--sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled][negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-white)}@media (forced-colors: active){:host([disabled][negative]){--sbb-visual-checkbox-selection-color: Canvas}}@media (forced-colors: active){:host([indeterminate]){--sbb-visual-checkbox-selection-color: ButtonBorder}}@media (forced-colors: active){:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color: GrayText}}.sbb-visual-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);border:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor)}@media (forced-colors: active){.sbb-visual-checkbox{outline:var(--sbb-border-width-2x) solid ButtonBorder;outline-offset:calc(-1 * var(--sbb-border-width-2x))}:host([checked]:not([indeterminate])) .sbb-visual-checkbox{background-color:HighLight;outline:none}:host([disabled]) .sbb-visual-checkbox{outline-color:GrayText}:host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox{background-color:GrayText}}.sbb-visual-checkbox__icon{display:inline-flex;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension)}.sbb-visual-checkbox__icon svg{margin:auto}.sbb-visual-checkbox__icon path{stroke:var(--sbb-visual-checkbox-selection-color)}`;
+var p = Object.defineProperty, f = Object.getOwnPropertyDescriptor, c = (t, s, r, b) => {
+  for (var o = b > 1 ? void 0 : b ? f(s, r) : s, i = t.length - 1, a; i >= 0; i--)
+    (a = t[i]) && (o = (b ? a(s, r, o) : a(o)) || o);
+  return b && o && p(s, r, o), o;
 };
-let e = class extends k(x(v)) {
+let e = class extends x(k(d)) {
   constructor() {
-    super(...arguments), this.checked = !1, this.indeterminate = !1;
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.size = "m";
   }
   render() {
-    return t`
+    return n`
       <span class="sbb-visual-checkbox">
         <span class="sbb-visual-checkbox__icon">
-          ${this.checked || this.indeterminate ? t`<svg
-                width="24"
-                height="24"
+          ${this.checked || this.indeterminate ? n`<svg
+                width=${this.size === "xs" ? "20" : "24"}
+                height=${this.size === "xs" ? "20" : "24"}
                 viewBox="0 0 24 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -28,20 +28,23 @@ let e = class extends k(x(v)) {
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 />
-              </svg>` : h}
+              </svg>` : v}
         </span>
       </span>
     `;
   }
 };
 e.styles = m;
-a([
-  n({ reflect: !0, type: Boolean })
+c([
+  l({ reflect: !0, type: Boolean })
 ], e.prototype, "checked", 2);
-a([
-  n({ reflect: !0, type: Boolean })
+c([
+  l({ reflect: !0, type: Boolean })
 ], e.prototype, "indeterminate", 2);
-e = a([
+c([
+  l({ reflect: !0 })
+], e.prototype, "size", 2);
+e = c([
   u("sbb-visual-checkbox")
 ], e);
 export {