@sbb-esta/lyne-elements 1.3.0 → 1.5.0

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;;;;;;;;GAQG;AACH,qBAEa,0BAA2B,SAAQ,+BAE/C;IACC,OAAuB,MAAM,EAAE,cAAc,CAA8C;IAG3F,gBAAuB,MAAM;;;MAGlB;cAEc,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/radio-button/radio-button-panel.js

@@ -1,22 +1,32 @@
-import { LitElement as d, html as r, nothing as b } from "lit";
-import { customElement as p } from "lit/decorators.js";
-import { slotState as c } from "../core/decorators.js";
-import { SbbPanelMixin as m, SbbUpdateSchedulerMixin as u, panelCommonStyle as h } from "../core/mixins.js";
-import { SbbRadioButtonCommonElementMixin as f, radioButtonCommonStyle as v } from "./common.js";
+import { LitElement as d, html as l, nothing as b } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+import { slotState as m } from "../core/decorators.js";
+import { SbbPanelMixin as h, SbbUpdateSchedulerMixin as f, panelCommonStyle as _ } from "../core/mixins.js";
+import { SbbRadioButtonCommonElementMixin as g, radioButtonCommonStyle as v } from "./common.js";
 import "../screen-reader-only.js";
-var x = Object.defineProperty, S = Object.getOwnPropertyDescriptor, _ = (t, s, l, n) => {
-  for (var e = n > 1 ? void 0 : n ? S(s, l) : s, o = t.length - 1, i; o >= 0; o--)
-    (i = t[o]) && (e = (n ? i(s, l, e) : i(e)) || e);
-  return n && e && x(s, l, e), e;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (e, n, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? y(n, o) : n, a = e.length - 1, r; a >= 0; a--)
+    (r = e[a]) && (t = (i ? r(n, o, t) : r(t)) || t);
+  return i && t && x(n, o, t), t;
 };
-let a = class extends m(
-  f(u(d))
+let s = class extends h(
+  g(f(d))
 ) {
-  async willUpdate(t) {
-    super.willUpdate(t), t.has("checked") && this.toggleAttribute("data-checked", this.checked);
+  constructor() {
+    super(...arguments), this._size = "m";
+  }
+  set size(e) {
+    this._size = e;
+  }
+  get size() {
+    var e;
+    return (e = this.group) != null && e.size ? this.group.size === "xs" ? "s" : this.group.size : this._size;
+  }
+  async willUpdate(e) {
+    super.willUpdate(e), e.has("checked") && this.toggleAttribute("data-checked", this.checked);
   }
   render() {
-    return r`
+    return l`
       <label class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
@@ -37,21 +47,24 @@ let a = class extends m(
             <slot name="suffix"></slot>
           </span>
           <slot name="subtext"></slot>
-          ${this.expansionState ? r`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : b}
+          ${this.expansionState ? l`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : b}
         </span>
       </label>
     `;
   }
 };
-a.styles = [v, h];
-a.events = {
+s.styles = [v, _];
+s.events = {
   stateChange: "stateChange",
   panelConnected: "panelConnected"
 };
-a = _([
-  p("sbb-radio-button-panel"),
-  c()
-], a);
+p([
+  c({ reflect: !0 })
+], s.prototype, "size", 1);
+s = p([
+  u("sbb-radio-button-panel"),
+  m()
+], s);
 export {
-  a as SbbRadioButtonPanelElement
+  s as SbbRadioButtonPanelElement
 };

package/radio-button/radio-button.js

@@ -1,16 +1,26 @@
-import { css as n, LitElement as l, html as u, nothing as d } from "lit";
-import { customElement as c } from "lit/decorators.js";
-import { slotState as f } from "../core/decorators.js";
-import { SbbRadioButtonCommonElementMixin as m, radioButtonCommonStyle as p } from "./common.js";
-const h = n`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, x = (b, t, r, e) => {
-  for (var o = e > 1 ? void 0 : e ? _(t, r) : t, i = b.length - 1, a; i >= 0; i--)
-    (a = b[i]) && (o = (e ? a(t, r, o) : a(o)) || o);
-  return e && o && v(t, r, o), o;
+import { css as l, LitElement as u, html as d, nothing as c } from "lit";
+import { property as f, customElement as p } from "lit/decorators.js";
+import { slotState as m } from "../core/decorators.js";
+import { SbbRadioButtonCommonElementMixin as h, radioButtonCommonStyle as v } from "./common.js";
+const _ = l`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, b = (t, s, i, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(s, i) : s, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (e = (r ? a(s, i, e) : a(e)) || e);
+  return r && e && g(s, i, e), e;
 };
-let s = class extends m(l) {
+let o = class extends h(u) {
+  constructor() {
+    super(...arguments), this._size = "m";
+  }
+  set size(t) {
+    this._size = t;
+  }
+  get size() {
+    var t;
+    return ((t = this.group) == null ? void 0 : t.size) ?? this._size;
+  }
   render() {
-    return u`
+    return d`
       <label class="sbb-radio-button">
         <input
           type="radio"
@@ -19,7 +29,7 @@ let s = class extends m(l) {
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?checked=${this.checked}
-          value=${this.value || d}
+          value=${this.value || c}
           class="sbb-screen-reader-only"
         />
         <span class="sbb-radio-button__label-slot">
@@ -29,14 +39,17 @@ let s = class extends m(l) {
     `;
   }
 };
-s.styles = [p, h];
-s.events = {
+o.styles = [v, _];
+o.events = {
   stateChange: "stateChange"
 };
-s = x([
-  c("sbb-radio-button"),
-  f()
-], s);
+b([
+  f({ reflect: !0 })
+], o.prototype, "size", 1);
+o = b([
+  p("sbb-radio-button"),
+  m()
+], o);
 export {
-  s as SbbRadioButtonElement
+  o as SbbRadioButtonElement
 };

package/skiplink-list/skiplink-list.d.ts

@@ -8,6 +8,7 @@ declare const SbbSkiplinkListElement_base: import('../core/mixins.js').AbstractC
  * It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused.
  *
  * @slot - Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`.
+ * @slot title - Use this to provide a title for the skiplink-list (optional).
  * @cssprop [--sbb-skiplink-list-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.

package/skiplink-list/skiplink-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skiplink-list.d.ts","sourceRoot":"","sources":["../../../src/elements/skiplink-list/skiplink-list.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;;AAErB;;;;;;;GAOG;AACH,qBAEa,sBAAuB,SAAQ,2BAG/B;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAA+C;IAE9F,uDAAuD;IACS,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,oDAAoD;IACL,UAAU,EAAE,aAAa,CAAO;cAE5D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAW3E,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"skiplink-list.d.ts","sourceRoot":"","sources":["../../../src/elements/skiplink-list/skiplink-list.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;;AAErB;;;;;;;;GAQG;AACH,qBAEa,sBAAuB,SAAQ,2BAG/B;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAA+C;IAE9F,uDAAuD;IACS,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,oDAAoD;IACL,UAAU,EAAE,aAAa,CAAO;cAE5D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAW3E,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/standard-theme.css

@@ -218,7 +218,7 @@ summary {
 
 /**
  * Do not edit directly
- * Generated on Fri, 14 Jun 2024 15:20:35 GMT
+ * Generated on Mon, 15 Jul 2024 09:40:16 GMT
  */
 *,
 ::before,
@@ -361,6 +361,7 @@ summary {
   --sbb-color-aluminium: #d2d2d2;
   --sbb-color-silver: #dcdcdc;
   --sbb-color-cloud: #e5e5e5;
+  --sbb-color-cloud-alpha-80: rgba(229, 229, 229, 0.8);
   --sbb-color-milk: #f6f6f6;
   --sbb-color-red: #eb0000;
   --sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
@@ -1453,6 +1454,7 @@ sbb-form-field[negative] textarea::-webkit-scrollbar-button, sbb-form-field[nega
 }
 
 :is(sbb-autocomplete,
+sbb-autocomplete-grid,
 sbb-dialog,
 sbb-menu,
 sbb-navigation,

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/tabs/tab-group.js

@@ -1,16 +1,16 @@
 import { css as h, LitElement as u, html as f } from "lit";
-import { property as d, customElement as v } from "lit/decorators.js";
+import { property as c, customElement as v } from "lit/decorators.js";
 import { ref as p } from "lit/directives/ref.js";
 import { isArrowKeyPressed as _, getNextElementIndex as g } from "../core/a11y.js";
 import { SbbConnectedAbortController as m } from "../core/controllers.js";
 import { EventEmitter as A, throttle as T } from "../core/eventing.js";
 import { SbbHydrationMixin as x } from "../core/mixins.js";
-import { AgnosticMutationObserver as y, AgnosticResizeObserver as c } from "../core/observers.js";
-import { SbbTabElement as C } from "./tab.js";
-const E = h`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content:after,.tab-content:before{content:" ";display:block;visibility:hidden;height:0}.tab-content ::slotted(*){visibility:hidden;opacity:0;height:0;overflow:hidden;position:relative}.tab-content ::slotted(*[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted([role=tabpanel]:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
+import { AgnosticMutationObserver as C, AgnosticResizeObserver as d } from "../core/observers.js";
+import { SbbTabElement as y } from "./tab.js";
+const E = h`*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content ::slotted(*){visibility:hidden;opacity:0;height:0;overflow:hidden;position:relative}.tab-content ::slotted(*[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted([role=tabpanel]:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
 var z = Object.defineProperty, G = Object.getOwnPropertyDescriptor, b = (t, i, e, n) => {
-  for (var s = n > 1 ? void 0 : n ? G(i, e) : i, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (s = (n ? r(i, e, s) : r(s)) || s);
+  for (var s = n > 1 ? void 0 : n ? G(i, e) : i, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (n ? o(i, e, s) : o(s)) || s);
   return n && s && z(i, e, s), s;
 };
 const I = {
@@ -18,11 +18,11 @@ const I = {
 };
 let S = 0, a = class extends x(u) {
   constructor() {
-    super(...arguments), this._tabs = [], this._abort = new m(this), this._tabAttributeObserver = new y(
+    super(...arguments), this._tabs = [], this._abort = new m(this), this._tabAttributeObserver = new C(
       (t) => this._onTabAttributesChange(t)
-    ), this._tabGroupResizeObserver = new c(
+    ), this._tabGroupResizeObserver = new d(
       (t) => this._onTabGroupElementResize(t)
-    ), this._tabContentResizeObserver = new c(
+    ), this._tabContentResizeObserver = new d(
       (t) => this._onTabContentElementResize(t)
     ), this._size = "l", this.initialSelectedIndex = 0, this._selectedTabChanged = new A(
       this,
@@ -104,8 +104,8 @@ let S = 0, a = class extends x(u) {
     for (const s of t) {
       if (s.type !== "attributes")
         return;
-      const o = s.target;
-      s.attributeName === "disabled" && (o.hasAttribute("disabled") && o !== this._selectedTab ? (i = o.tabGroupActions) == null || i.disable() : o.disabled && ((e = o.tabGroupActions) == null || e.enable())), s.attributeName === "active" && (o.hasAttribute("active") && !o.disabled ? (n = o.tabGroupActions) == null || n.select() : o === this._selectedTab && o.toggleAttribute("active", !0));
+      const r = s.target;
+      s.attributeName === "disabled" && (r.hasAttribute("disabled") && r !== this._selectedTab ? (i = r.tabGroupActions) == null || i.disable() : r.disabled && ((e = r.tabGroupActions) == null || e.enable())), s.attributeName === "active" && (r.hasAttribute("active") && !r.disabled ? (n = r.tabGroupActions) == null || n.select() : r === this._selectedTab && r.toggleAttribute("active", !0));
     }
   }
   _onTabGroupElementResize(t) {
@@ -147,18 +147,18 @@ let S = 0, a = class extends x(u) {
         if (t !== this._selectedTab && !t.disabled) {
           const s = this._selectedTab;
           s && ((e = s.tabGroupActions) == null || e.deactivate(), this._tabContentResizeObserver.unobserve(s.tab)), (n = t.tabGroupActions) == null || n.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.tab);
-          const o = this._tabs;
+          const r = this._tabs;
           this._selectedTabChanged.emit({
-            activeIndex: o.findIndex((r) => r === t),
+            activeIndex: r.findIndex((o) => o === t),
             activeTabLabel: t,
             activeTab: t.tab,
-            previousIndex: o.findIndex((r) => r === s),
+            previousIndex: r.findIndex((o) => o === s),
             previousTabLabel: s,
             previousTab: s == null ? void 0 : s.tab
           });
         }
       }
-    }, ((i = t.nextElementSibling) == null ? void 0 : i.localName) === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof C && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
+    }, ((i = t.nextElementSibling) == null ? void 0 : i.localName) === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof y && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
       var e;
       (e = t.tabGroupActions) == null || e.select();
     }), t.tab && (t.setAttribute("aria-controls", t.tab.id), t.tab.setAttribute("role", "tabpanel"), t.tab.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t, I), t.slot = "tab-bar";
@@ -168,8 +168,8 @@ let S = 0, a = class extends x(u) {
     const i = this._enabledTabs;
     if (!(!i || // don't trap nested handling
     t.target !== this && t.target.parentElement !== this) && _(t)) {
-      const o = i.findIndex((l) => l.active), r = g(t, o, i.length);
-      (n = (e = i[r]) == null ? void 0 : e.tabGroupActions) == null || n.select(), (s = i[r]) == null || s.focus(), t.preventDefault();
+      const r = i.findIndex((l) => l.active), o = g(t, r, i.length);
+      (n = (e = i[o]) == null ? void 0 : e.tabGroupActions) == null || n.select(), (s = i[o]) == null || s.focus(), t.preventDefault();
     }
   }
   render() {
@@ -193,10 +193,10 @@ a.events = {
   didChange: "didChange"
 };
 b([
-  d()
+  c()
 ], a.prototype, "size", 1);
 b([
-  d({ attribute: "initial-selected-index", type: Number })
+  c({ attribute: "initial-selected-index", type: Number })
 ], a.prototype, "initialSelectedIndex", 2);
 a = b([
   v("sbb-tab-group")

package/tabs/tab.js

@@ -1,12 +1,12 @@
-import { css as a, LitElement as n, html as u } from "lit";
-import { customElement as m } from "lit/decorators.js";
-const p = a`*,:before,:after{box-sizing:border-box}:host{display:block}`;
-var c = Object.defineProperty, v = Object.getOwnPropertyDescriptor, _ = (e, l, r, s) => {
-  for (var t = s > 1 ? void 0 : s ? v(l, r) : l, b = e.length - 1, i; b >= 0; b--)
+import { css as n, LitElement as a, html as h } from "lit";
+import { customElement as c } from "lit/decorators.js";
+const p = n`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}`;
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, m = (e, l, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? f(l, r) : l, b = e.length - 1, i; b >= 0; b--)
     (i = e[b]) && (t = (s ? i(l, r, t) : i(t)) || t);
-  return s && t && c(l, r, t), t;
+  return s && t && u(l, r, t), t;
 };
-let o = class extends n {
+let o = class extends a {
   constructor() {
     super(...arguments), this._label = null;
   }
@@ -25,7 +25,7 @@ let o = class extends n {
     this._label = this._getTabLabel();
   }
   render() {
-    return u`
+    return h`
       <div class="sbb-tab">
         <slot></slot>
       </div>
@@ -33,8 +33,8 @@ let o = class extends n {
   }
 };
 o.styles = p;
-o = _([
-  m("sbb-tab")
+o = m([
+  c("sbb-tab")
 ], o);
 export {
   o as SbbTabElement

package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy-icon/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;;AAIzC;;GAEG;AACH,qBACa,gCAAiC,SAAQ,qCAA6B;IACjF,OAAuB,MAAM,EAAE,cAAc,CAA+B;IAE5E,uBAAuB;IACJ,SAAS,EAAG,YAAY,CAAC;IAE5C,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAA2E;YAE9E,oBAAoB;cAoBT,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAKvF,OAAO,CAAC,aAAa;IAOL,iBAAiB,IAAI,IAAI;cAetB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
+{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy-icon/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;;AAIzC;;GAEG;AACH,qBACa,gCAAiC,SAAQ,qCAA6B;IACjF,OAAuB,MAAM,EAAE,cAAc,CAA+B;IAE5E,uBAAuB;IACJ,SAAS,EAAG,YAAY,CAAC;IAE5C,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAA2E;YAE9E,oBAAoB;cAeT,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAKvF,OAAO,CAAC,aAAa;IAOL,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}

package/timetable-occupancy-icon.js

@@ -1,26 +1,26 @@
-import { property as h, customElement as m } from "lit/decorators.js";
-import { SbbConnectedAbortController as b, SbbLanguageController as p } from "./core/controllers.js";
-import { setOrRemoveAttribute as d } from "./core/dom.js";
+import { property as b, customElement as h } from "lit/decorators.js";
+import { SbbConnectedAbortController as m, SbbLanguageController as p } from "./core/controllers.js";
+import { setOrRemoveAttribute as u } from "./core/dom.js";
 import { i18nOccupancy as f } from "./core/i18n.js";
-import { SbbNegativeMixin as u } from "./core/mixins.js";
+import { SbbNegativeMixin as v } from "./core/mixins.js";
 import { SbbIconBase as n } from "./icon.js";
-import { css as g } from "lit";
-const v = g`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
-var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
-  for (var a = r > 1 ? void 0 : r ? w(t, i) : t, c = e.length - 1, o; c >= 0; c--)
-    (o = e[c]) && (a = (r ? o(t, i, a) : o(a)) || a);
-  return r && a && _(t, i, a), a;
+import { css as d } from "lit";
+const g = d`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (e, t, c, i) => {
+  for (var a = i > 1 ? void 0 : i ? y(t, c) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (a = (i ? o(t, c, a) : o(a)) || a);
+  return i && a && _(t, c, a), a;
 };
-let s = class extends u(n) {
+let r = class extends v(n) {
   constructor() {
-    super(...arguments), this._abort = new b(this), this._language = new p(this).withHandler(() => this._setAriaLabel());
+    super(...arguments), this._abort = new m(this), this._language = new p(this).withHandler(() => this._setAriaLabel());
   }
   async _setNameAndAriaLabel() {
-    var t, i;
+    var t;
     if (!this.occupancy)
       return;
     let e = `utilization-${this.occupancy}`;
-    (t = globalThis.window) != null && t.matchMedia("(forced-colors: active)").matches ? e += "-high-contrast" : (this.negative || (i = globalThis.window) != null && i.matchMedia("(prefer-color-scheme: dark)").matches) && (e += "-negative"), await this.loadSvgIcon(e);
+    (t = globalThis.window) != null && t.matchMedia("(forced-colors: active)").matches ? e += "-high-contrast" : this.negative && (e += "-negative"), await this.loadSvgIcon(e);
   }
   async fetchSvgIcon(e, t) {
     return this._setAriaLabel(), super.fetchSvgIcon(e, t);
@@ -28,26 +28,24 @@ let s = class extends u(n) {
   _setAriaLabel() {
     var t;
     const e = (t = f[this.occupancy]) == null ? void 0 : t[this._language.current];
-    d(this, "aria-label", e);
+    u(this, "aria-label", e);
   }
   connectedCallback() {
     super.connectedCallback(), window.matchMedia("(forced-colors: active)").addEventListener("change", () => this._setNameAndAriaLabel(), {
       signal: this._abort.signal
-    }), window.matchMedia("(prefer-color-scheme: dark)").addEventListener("change", () => this._setNameAndAriaLabel(), {
-      signal: this._abort.signal
     }), this._setNameAndAriaLabel();
   }
   willUpdate(e) {
     super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
   }
 };
-s.styles = [n.styles, v];
+r.styles = [n.styles, g];
 l([
-  h()
-], s.prototype, "occupancy", 2);
-s = l([
-  m("sbb-timetable-occupancy-icon")
-], s);
+  b()
+], r.prototype, "occupancy", 2);
+r = l([
+  h("sbb-timetable-occupancy-icon")
+], r);
 export {
-  s as SbbTimetableOccupancyIconElement
+  r as SbbTimetableOccupancyIconElement
 };

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 {