@sbb-esta/lyne-elements 1.4.0 → 1.6.0

package/overlay.js

@@ -1,24 +1,24 @@
-import { css as g, nothing as w } from "lit";
-import { property as b, customElement as _ } from "lit/decorators.js";
+import { css as g, nothing as _ } from "lit";
+import { property as b, customElement as w } from "lit/decorators.js";
 import { html as d, unsafeStatic as v } from "lit/static-html.js";
 import { SbbFocusHandler as k, setModalityOnNextFocus as h, getFirstFocusableElement as C } from "./core/a11y.js";
 import { EventEmitter as p } from "./core/eventing.js";
 import { i18nDialog as x, i18nCloseDialog as O, i18nGoBack as E } from "./core/i18n.js";
-import { applyInertMechanism as y, removeInertMechanism as m } from "./core/overlay.js";
+import { applyInertMechanism as m, removeInertMechanism as y } from "./core/overlay.js";
 import { SbbOpenCloseBaseElement as L } from "./core/base-elements.js";
 import { SbbLanguageController as $ } from "./core/controllers.js";
-import { SbbScrollHandler as A, hostContext as R } from "./core/dom.js";
-import { SbbNegativeMixin as S } from "./core/mixins.js";
+import { SbbScrollHandler as A, hostContext as S } from "./core/dom.js";
+import { SbbNegativeMixin as R } from "./core/mixins.js";
 import "./button/secondary-button.js";
 import "./button/transparent-button.js";
 import "./container.js";
 import "./screen-reader-only.js";
-var B = Object.defineProperty, F = (t, e, o, a) => {
-  for (var r = void 0, i = t.length - 1, n; i >= 0; i--)
-    (n = t[i]) && (r = n(e, o, r) || r);
-  return r && B(e, o, r), r;
+var B = Object.defineProperty, F = (t, e, o, r) => {
+  for (var a = void 0, n = t.length - 1, i; n >= 0; n--)
+    (i = t[n]) && (a = i(e, o, a) || a);
+  return a && B(e, o, a), a;
 };
-const l = [], u = class f extends S(L) {
+const l = [], u = class f extends R(L) {
   constructor() {
     super(...arguments), this.didClose = new p(
       this,
@@ -30,22 +30,22 @@ const l = [], u = class f extends S(L) {
     if (this.state !== "opened")
       return;
     this.returnValue = e, this.overlayCloseElement = o;
-    const a = {
+    const r = {
       returnValue: this.returnValue,
       closeTarget: this.overlayCloseElement
     };
-    this.willClose.emit(a) && (this.state = "closing", this.removeAriaLiveRefContent());
+    this.willClose.emit(r) && (this.state = "closing", this.removeAriaLiveRefContent());
   }
   connectedCallback() {
     var e;
-    super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController(), this.state === "opened" && y(this);
+    super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController(), this.state === "opened" && m(this);
   }
   firstUpdated(e) {
     this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(e);
   }
   disconnectedCallback() {
     var e, o;
-    super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), m();
+    super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), y(), this.scrollHandler.enableScroll();
   }
   attachOpenOverlayEvents() {
     this.openOverlayController = new AbortController(), window.addEventListener(
@@ -71,13 +71,13 @@ const l = [], u = class f extends S(L) {
   }
   // Close the component on click of any element that has the `closeAttribute` attribute.
   closeOnSbbOverlayCloseClick(e) {
-    const o = e.composedPath().filter((r) => r instanceof window.HTMLElement).find(
-      (r) => r.hasAttribute(this.closeAttribute) && !r.hasAttribute("disabled")
+    const o = e.composedPath().filter((a) => a instanceof window.HTMLElement).find(
+      (a) => a.hasAttribute(this.closeAttribute) && !a.hasAttribute("disabled")
     );
     if (!o)
       return;
-    const a = o.getAttribute("type") === "submit" ? R("form", o) : void 0;
-    l[l.length - 1].close(a, o);
+    const r = o.getAttribute("type") === "submit" ? S("form", o) : void 0;
+    l[l.length - 1].close(r, o);
   }
   removeAriaLiveRefContent() {
     this.ariaLiveRef.textContent = "";
@@ -90,11 +90,11 @@ F([
   b({ attribute: "accessibility-label" })
 ], u.prototype, "accessibilityLabel");
 let H = u;
-const T = g`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc( var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l) );--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;--sbb-overlay-content-transition: transform var(--sbb-overlay-animation-duration) var(--sbb-overlay-animation-easing);display:block;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 64rem){:host{--sbb-overlay-padding-block: var(--sbb-spacing-responsive-xl)}}:host(:is([data-state=opened],[data-state=opening])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:flex;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}.sbb-overlay{display:none;position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{display:block;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:ease}:host([data-state][data-state=closing]) .sbb-overlay{pointer-events:none;animation-name:close}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-overlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
-var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, c = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? M(e, o) : e, i = t.length - 1, n; i >= 0; i--)
-    (n = t[i]) && (r = (a ? n(e, o, r) : n(r)) || r);
-  return a && r && z(e, o, r), r;
+const T = g`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc( var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l) );--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:block;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 64rem){:host{--sbb-overlay-padding-block: var(--sbb-spacing-responsive-xl)}}:host(:is([data-state=opened],[data-state=opening])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:none;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}:host([data-state]:not([data-state=closed])) .sbb-overlay__container{display:flex;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host([data-state][data-state=closing]) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-overlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
+var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, c = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? M(e, o) : e, n = t.length - 1, i; n >= 0; n--)
+    (i = t[n]) && (a = (r ? i(e, o, a) : i(a)) || a);
+  return r && a && z(e, o, a), a;
 };
 let s = class extends H {
   constructor() {
@@ -114,8 +114,8 @@ let s = class extends H {
   // In rare cases, it can be that the animationEnd event is triggered twice.
   // To avoid entering a corrupt state, exit when state is not expected.
   onOverlayAnimationEnd(t) {
-    var e, o, a;
-    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), y(this), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && ((e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", m(), h(this.lastFocusedElement), (o = this.lastFocusedElement) == null || o.focus(), (a = this.openOverlayController) == null || a.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), !l.length && this.scrollHandler.enableScroll(), this.didClose.emit({
+    var e, o, r;
+    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), m(this), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && ((e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", y(), h(this.lastFocusedElement), (o = this.lastFocusedElement) == null || o.focus(), (r = this.openOverlayController) == null || r.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), !l.length && this.scrollHandler.enableScroll(), this.didClose.emit({
       returnValue: this.returnValue,
       closeTarget: this.overlayCloseElement
     }));
@@ -152,17 +152,17 @@ let s = class extends H {
       ></${v(t)}>
     `;
     return d`
-      <div class="sbb-overlay__container">
-        <div
-          @animationend=${(a) => this.onOverlayAnimationEnd(a)}
-          class="sbb-overlay"
-        >
+      <div
+        class="sbb-overlay__container"
+        @animationend=${(r) => this.onOverlayAnimationEnd(r)}
+      >
+        <div class="sbb-overlay">
           <div
-            @click=${(a) => this.closeOnSbbOverlayCloseClick(a)}
+            @click=${(r) => this.closeOnSbbOverlayCloseClick(r)}
             class="sbb-overlay__wrapper"
           >
             <div class="sbb-overlay__header">
-              ${this.backButton ? o : w} ${e}
+              ${this.backButton ? o : _} ${e}
             </div>
             <div class="sbb-overlay__content">
               <sbb-container
@@ -201,7 +201,7 @@ c([
   b({ attribute: "accessibility-back-label" })
 ], s.prototype, "accessibilityBackLabel", 2);
 s = c([
-  _("sbb-overlay")
+  w("sbb-overlay")
 ], s);
 export {
   H as SbbOverlayBaseElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.4.0",
+  "version": "1.6.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/toggle/toggle.js

@@ -5,7 +5,7 @@ import { SbbConnectedAbortController as x } from "../core/controllers.js";
 import { hostAttributes as k } from "../core/decorators.js";
 import { EventEmitter as p } from "../core/eventing.js";
 import { AgnosticResizeObserver as C } from "../core/observers.js";
-const z = u`*,:before,:after{box-sizing:border-box}:host{--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);display:block}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-s);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-toggle{--sbb-text-font-size: var(--sbb-font-size-text-m);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);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
+const z = u`*,:before,:after{box-sizing:border-box}:host{--sbb-toggle-width: fit-content;--sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small) );--sbb-toggle-selected-option-border-color: var(--sbb-color-smoke);--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toggle-height: 1.75rem;--sbb-toggle-border-width: var(--sbb-border-width-1x);--sbb-toggle-border-style: solid;--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);display:block}@media (min-width: 52.5rem){:host{--sbb-toggle-height: 2rem}}@media (forced-colors: active){:host{--sbb-toggle-selected-option-border-color: Highlight;--sbb-toggle-border-width: var(--sbb-border-width-2x)}}:host([even]){--sbb-toggle-width: 100%}:host([even]) ::slotted(sbb-toggle-option){width:50%}:host([disabled]){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-border-style: dashed}@media (forced-colors: active){:host([disabled]){--sbb-toggle-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: 2.75rem}@media (min-width: 52.5rem){:host([size=m]){--sbb-toggle-height: 3.25rem}}:host([data-disable-animation-on-resizing]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-toggle{--sbb-text-font-size: var(--sbb-font-size-text-m);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);position:relative;display:flex;align-items:center;width:var(--sbb-toggle-width);max-width:100%;min-width:calc(var(--sbb-toggle-min-width) * 2);height:var(--sbb-toggle-height);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sbb-color-cloud);border-radius:var(--sbb-toggle-border-radius)}.sbb-toggle:after{content:"";padding-inline:var(--sbb-toggle-padding-inline);display:inline-block;opacity:1;background-color:var(--sbb-color-white);border:var(--sbb-toggle-border-width) var(--sbb-toggle-border-style) var(--sbb-toggle-selected-option-border-color);border-radius:var(--sbb-toggle-border-radius);position:absolute;max-width:100%;min-width:var(--sbb-toggle-min-width);inset-block:calc(-2 * var(--sbb-toggle-border-width));inset-inline:calc(var(--sbb-toggle-option-left) - .125rem) calc(var(--sbb-toggle-option-right) - .125rem);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:opacity,inset-inline-end,inset-inline-start}@media (forced-colors: active){.sbb-toggle{outline:var(--sbb-toggle-border-width) solid CanvasText}}`;
 var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, b = (e, t, s, i) => {
   for (var o = i > 1 ? void 0 : i ? E(t, s) : t, n = e.length - 1, l; n >= 0; n--)
     (l = e[n]) && (o = (i ? l(t, s, o) : l(o)) || o);

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 {