@sbb-esta/lyne-elements 4.3.1 → 4.5.0

package/chip/chip/chip.component.js

@@ -1,10 +1,10 @@
 var v = (e) => {
   throw TypeError(e);
 };
-var p = (e, r, b) => r.has(e) || v("Cannot " + b);
-var m = (e, r, b) => (p(e, r, "read from private field"), b ? b.call(e) : r.get(e)), g = (e, r, b) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), l = (e, r, b, t) => (p(e, r, "write to private field"), t ? t.call(e, b) : r.set(e, b), b);
-import { __runInitializers as n, __esDecorate as f } from "tslib";
-import { css as x, LitElement as y, html as k } from "lit";
+var p = (e, r, i) => r.has(e) || v("Cannot " + i);
+var m = (e, r, i) => (p(e, r, "read from private field"), i ? i.call(e) : r.get(e)), g = (e, r, i) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, i), l = (e, r, i, s) => (p(e, r, "write to private field"), s ? s.call(e, i) : r.set(e, i), i);
+import { __runInitializers as n, __esDecorate as _ } from "tslib";
+import { css as y, LitElement as x, html as k } from "lit";
 import { customElement as w, property as S } from "lit/decorators.js";
 import { SbbLanguageController as z } from "../../core/controllers.js";
 import { i18nChipDelete as D } from "../../core/i18n.js";
@@ -12,28 +12,28 @@ import { SbbNegativeMixin as E, SbbDisabledMixin as C, SbbReadonlyMixin as q, Sb
 import { boxSizingStyles as I } from "../../core/styles.js";
 import "../../button/mini-button.js";
 import "../../screen-reader-only.js";
-const M = x`:host{--sbb-chip-background-color: var(--sbb-background-color-3);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-border-color-4-inverted);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-color-hover: var(--sbb-color-2);--sbb-chip-background-color-active: var(--sbb-background-color-1);--sbb-chip-background-color-hover: var(--sbb-background-color-1);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--_sbb-mini-button-image-size: ;border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}`;
+const M = y`:host{--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:inline-flex;align-items:stretch;background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);height:var(--sbb-chip-height)}:host(:focus){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;font-size:var(--sbb-chip-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--_sbb-mini-button-image-size: ;border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}`;
 let H = (() => {
-  var s, o;
-  let e = [w("sbb-chip")], r, b = [], t, c = E(C(q(B(y)))), d, u = [], h = [];
-  return o = class extends c {
+  var o, b;
+  let e = [w("sbb-chip")], r, i = [], s, c = E(C(q(B(x)))), d, u = [], h = [];
+  return b = class extends c {
     constructor() {
       super(...arguments);
-      g(this, s);
-      l(this, s, n(this, u, null)), this._language = (n(this, h), new z(this));
+      g(this, o);
+      l(this, o, n(this, u, null)), this._language = (n(this, h), new z(this));
     }
     /** The value of chip. Will be used as label if nothing is slotted. */
     get value() {
-      return m(this, s);
+      return m(this, o);
     }
-    set value(i) {
-      l(this, s, i);
+    set value(t) {
+      l(this, o, t);
     }
-    willUpdate(i) {
-      super.willUpdate(i), i.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
+    willUpdate(t) {
+      super.willUpdate(t), t.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
     }
-    firstUpdated(i) {
-      super.firstUpdated(i), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
+    firstUpdated(t) {
+      super.firstUpdated(t), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
     }
     _deleteButton() {
       return this.shadowRoot.querySelector("sbb-mini-button");
@@ -43,31 +43,29 @@ let H = (() => {
     }
     render() {
       return k`
-      <div class="sbb-chip">
-        <div class="sbb-chip__label-wrapper">
-          <span class="sbb-chip__label">
-            <slot>${this.value ?? ""}</slot>
-          </span>
-        </div>
-        <sbb-mini-button
-          aria-hidden="true"
-          class="sbb-chip__delete"
-          icon-name="cross-tiny-small"
-          @click=${this._handleDeleteButtonClick}
-        >
-        </sbb-mini-button>
-        <sbb-screen-reader-only>, ${D[this._language.current]}</sbb-screen-reader-only>
+      <div class="sbb-chip__label-wrapper">
+        <span class="sbb-chip__label">
+          <slot>${this.value ?? ""}</slot>
+        </span>
       </div>
+      <sbb-mini-button
+        aria-hidden="true"
+        class="sbb-chip__delete"
+        icon-name="cross-tiny-small"
+        @click=${this._handleDeleteButtonClick}
+      >
+      </sbb-mini-button>
+      <sbb-screen-reader-only>, ${D[this._language.current]}</sbb-screen-reader-only>
     `;
     }
-  }, s = new WeakMap(), t = o, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    d = [S()], f(o, null, d, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, _) => {
-      a.value = _;
-    } }, metadata: i }, u, h), f(null, r = { value: t }, e, { kind: "class", name: t.name, metadata: i }, null, b), t = r.value, i && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), o.role = "option", o.styles = [I, M], o.events = {
+  }, o = new WeakMap(), s = b, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    d = [S()], _(b, null, d, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, f) => {
+      a.value = f;
+    } }, metadata: t }, u, h), _(null, r = { value: s }, e, { kind: "class", name: s.name, metadata: t }, null, i), s = r.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), b.role = "option", b.styles = [I, M], b.events = {
     requestdelete: "requestdelete"
-  }, n(t, b), t;
+  }, n(s, i), s;
 })();
 export {
   H as SbbChipElement

package/chip/chip-group/chip-group.component.js

@@ -2,10 +2,10 @@ var x = (i) => {
   throw TypeError(i);
 };
 var I = (i, a, r) => a.has(i) || x("Cannot " + r);
-var d = (i, a, r) => (I(i, a, "read from private field"), r ? r.call(i) : a.get(i)), _ = (i, a, r) => a.has(i) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), m = (i, a, r, p) => (I(i, a, "write to private field"), p ? p.call(i, r) : a.set(i, r), r);
+var d = (i, a, r) => (I(i, a, "read from private field"), r ? r.call(i) : a.get(i)), g = (i, a, r) => a.has(i) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), m = (i, a, r, p) => (I(i, a, "write to private field"), p ? p.call(i, r) : a.set(i, r), r);
 import { __esDecorate as c, __runInitializers as b } from "tslib";
 import { css as K, LitElement as L, isServer as A, html as O } from "lit";
-import { customElement as W, property as g } from "lit/decorators.js";
+import { customElement as W, property as _ } from "lit/decorators.js";
 import { isArrowKeyPressed as T, getNextElementIndex as q } from "../../core/a11y.js";
 import { SbbLanguageController as F, SbbPropertyWatcherController as M } from "../../core/controllers.js";
 import { isLean as V } from "../../core/dom/lean-context.js";
@@ -13,16 +13,16 @@ import { i18nSelectionRequired as R, i18nChipGroupInputDescription as $ } from "
 import { SbbRequiredMixin as B, SbbDisabledMixin as N, SbbNegativeMixin as j, SbbFormAssociatedMixin as G, SbbElementInternalsMixin as U } from "../../core/mixins.js";
 import { boxSizingStyles as J } from "../../core/styles.js";
 import { SbbChipElement as P } from "../chip.js";
-const H = K`:host{--sbb-chip-group-input-min-width: 9.375rem;--_sbb-chip-group-margin-block-start-default: .125rem;--_sbb-chip-group-margin-block-start-default-large: .21875rem;max-width:100%}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(0)}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(0)}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
+const H = K`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}`;
 let ot = (() => {
   var h, u, n;
-  let i = [W("sbb-chip-group")], a, r = [], p, f = B(N(j(G(U(L))))), y = [], v, w, E = [], z = [], k, C = [], S = [];
-  return n = class extends f {
+  let i = [W("sbb-chip-group")], a, r = [], p, y = B(N(j(G(U(L))))), f = [], v, z, w = [], k = [], E, C = [], S = [];
+  return n = class extends y {
     constructor() {
       super();
-      _(this, h);
-      _(this, u);
-      m(this, h, (b(this, y), b(this, E, null))), m(this, u, (b(this, z), b(this, C, ["Enter"]))), this._inputAttributeObserver = (b(this, S), A ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new F(this), this.addEventListener?.(P.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new M(this, () => this.closest("sbb-form-field"), {
+      g(this, h);
+      g(this, u);
+      m(this, h, (b(this, f), b(this, w, null))), m(this, u, (b(this, k), b(this, C, ["Enter"]))), this._inputAttributeObserver = (b(this, S), A ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new F(this), this.addEventListener?.(P.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new M(this, () => this.closest("sbb-form-field"), {
         size: (t) => this._updateSize(t.size),
         label: (t) => this._updateLabelState(t),
         hiddenLabel: (t) => this._updateLabelState(t)
@@ -210,19 +210,15 @@ let ot = (() => {
       this._inputElement && this._inputElement.setAttribute("aria-description", `${$[this._language.current]} ${this.value.length}`);
     }
     render() {
-      return O`
-      <div class="sbb-chip-group">
-        <slot @slotchange=${this._setupComponent}></slot>
-      </div>
-    `;
+      return O`<slot @slotchange=${this._setupComponent}></slot>`;
     }
   }, h = new WeakMap(), u = new WeakMap(), p = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    v = [g({ type: Array })], w = [g({ attribute: !1 })], k = [g({ attribute: "separator-keys", type: Array })], c(n, null, v, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    v = [_({ type: Array })], z = [_({ attribute: !1 })], E = [_({ attribute: "separator-keys", type: Array })], c(n, null, v, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
       e.value = s;
-    } }, metadata: t }, null, y), c(n, null, w, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
+    } }, metadata: t }, null, f), c(n, null, z, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
       e.displayWith = s;
-    } }, metadata: t }, E, z), c(n, null, k, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, s) => {
+    } }, metadata: t }, w, k), c(n, null, E, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, s) => {
       e.separatorKeys = s;
     } }, metadata: t }, C, S), c(null, a = { value: p }, i, { kind: "class", name: p.name, metadata: t }, null, r), p = a.value, t && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), n.role = "listbox", n.styles = [J, H], n.events = {

package/core/a11y/focus-trap-controller.js

@@ -1,5 +1,5 @@
 import { interactivityChecker as i } from "./interactivity-checker.js";
-class r {
+class b {
   /**
    * Whether the focus is trap is enabled.
    * @param enabled
@@ -73,20 +73,20 @@ class r {
   }
   /** Get the last tabbable element from a DOM subtree (inclusive). */
   _getLastTabbableElement(t) {
-    if (t !== this._host && i.isFocusable(t) && i.isTabbable(t))
-      return t;
-    const e = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
-    for (let s = e.length - 1; s >= 0; s--) {
-      const l = e[s].nodeType === document.ELEMENT_NODE ? this._getLastTabbableElement(e[s]) : null;
-      if (l)
-        return l;
+    let e = null;
+    t !== this._host && i.isFocusable(t) && i.isTabbable(t) && (e = t);
+    const s = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
+    for (let l = s.length - 1; l >= 0; l--) {
+      const a = s[l].nodeType === document.ELEMENT_NODE ? this._getLastTabbableElement(s[l]) : null;
+      if (a)
+        return a;
     }
-    return null;
+    return e;
   }
   _untrap() {
     this._abortController?.abort(), this._abortController = null;
   }
 }
 export {
-  r as SbbFocusTrapController
+  b as SbbFocusTrapController
 };

package/core/datetime/date-adapter.js

@@ -1,5 +1,14 @@
-const h = 7, o = 4, D = 4, c = 12, g = 24, l = /(0?[1-9]|[12][0-9]|3[01])[.,\\/\-\s](0?[1-9]|1[0-2])[.,\\/\-\s]([0-9]{1,4}$)?/, u = /^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-3][0-9])$/;
-class O {
+const l = 7, f = 4, u = 4, D = 12, g = 24, h = /(0?[1-9]|[12][0-9]|3[01])[.,\\/\-\s](0?[1-9]|1[0-2])[.,\\/\-\s]([0-9]{1,4}$)?/, o = /^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-3][0-9])$/;
+class d {
+  /**
+   * @param cutoffYearOffset The threshold on whether a two-digit year
+   * should be treated as belonging to 2000 or 1900. e.g. with 15 (default)
+   * the current year plus 15 will be treated as belonging to 2000, and the rest to 1900.
+   * So e.g. with the current year 2025, 40 will be treated as 2040, while 41 will be treated as 1941.
+   */
+  constructor(t = 15) {
+    this._cutoffYearOffset = t;
+  }
   /**
    * Attempts to deserialize a value to a valid date object. This is different from parsing in that
    * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
@@ -11,6 +20,31 @@ class O {
   deserialize(t) {
     return t == null || this.isDateInstance(t) && this.isValid(t) ? t : this.invalid();
   }
+  /**
+   * Get the given string as Date.
+   * @param value The date in the format DD.MM.YYYY.
+   */
+  parse(t) {
+    if (!t)
+      return null;
+    let e = null;
+    const s = t.match(o);
+    try {
+      e = s ? this.createDate(+s[1], +s[2], +s[3]) : null;
+    } catch {
+    }
+    if (this.isValid(e))
+      return e;
+    const r = t.replace(/\D/g, " ").trim()?.match(h);
+    if (!r || r.index !== 0 || r.length <= 2 || r.some((n) => n === void 0) || !this.isValid(this.createDate(+r[3], +r[2], +r[1])))
+      return null;
+    let i = +r[3];
+    if (typeof i == "number" && i < 100 && i >= 0) {
+      const n = this.getYear(this.today()) - 2e3 + this._cutoffYearOffset;
+      i = i <= n ? 2e3 + i : 1900 + i;
+    }
+    return this.createDate(i, +r[2], +r[1]);
+  }
   /**
    * Format the given date as string.
    * @param date The date to format.
@@ -19,23 +53,23 @@ class O {
   format(t, e) {
     if (!this.isValid(t))
       return "";
-    const s = /* @__PURE__ */ new Date(this.toIso8601(t) + "T00:00:00"), i = new Intl.DateTimeFormat("de-CH", {
+    const s = /* @__PURE__ */ new Date(this.toIso8601(t) + "T00:00:00"), a = new Intl.DateTimeFormat("de-CH", {
       day: "2-digit",
       month: "2-digit",
       year: "numeric"
     });
     if (e?.weekdayStyle === "none")
-      return i.format(s);
-    const a = e?.weekdayStyle ?? "short";
-    let r = this.getDayOfWeekNames(a)[this.getDayOfWeek(t)];
-    return r = r.charAt(0).toUpperCase() + r.substring(1), a === "short" && (r = r.substring(0, 2)), `${r}, ${i.format(s)}`;
+      return a.format(s);
+    const r = e?.weekdayStyle ?? "short";
+    let i = this.getDayOfWeekNames(r)[this.getDayOfWeek(t)];
+    return i = i.charAt(0).toUpperCase() + i.substring(1), r === "short" && (i = i.substring(0, 2)), `${i}, ${a.format(s)}`;
   }
   /**
    * Get the given date as ISO String.
    * @param date The date to convert to ISO String.
    */
   toIso8601(t) {
-    const e = (s, i = 2) => `${s}`.padStart(i, "0");
+    const e = (s, a = 2) => `${s}`.padStart(a, "0");
     return `${e(this.getYear(t), 4)}-${e(this.getMonth(t))}-${e(this.getDate(t))}`;
   }
   /**
@@ -73,8 +107,8 @@ class O {
    */
   sameDate(t, e) {
     if (t && e) {
-      const s = this.isValid(t), i = this.isValid(e);
-      return s && i ? !this.compareDate(t, e) : s == i;
+      const s = this.isValid(t), a = this.isValid(e);
+      return s && a ? !this.compareDate(t, e) : s == a;
     }
     return t == e;
   }
@@ -91,12 +125,12 @@ class O {
   }
 }
 export {
-  h as DAYS_PER_ROW,
-  O as DateAdapter,
-  l as FORMAT_DATE,
-  u as ISO8601_FORMAT_DATE,
-  c as MONTHS_PER_PAGE,
-  o as MONTHS_PER_ROW,
+  l as DAYS_PER_ROW,
+  d as DateAdapter,
+  h as FORMAT_DATE,
+  o as ISO8601_FORMAT_DATE,
+  D as MONTHS_PER_PAGE,
+  f as MONTHS_PER_ROW,
   g as YEARS_PER_PAGE,
-  D as YEARS_PER_ROW
+  u as YEARS_PER_ROW
 };

package/core/datetime/native-date-adapter.js

@@ -1,145 +1,120 @@
-import { SbbLanguageController as i } from "../controllers.js";
-import { DateAdapter as u, ISO8601_FORMAT_DATE as l, FORMAT_DATE as h } from "./date-adapter.js";
-const c = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
-class D extends u {
-  constructor(t = 15) {
-    super(), this._cutoffYearOffset = t;
-  }
+import { SbbLanguageController as a } from "../controllers.js";
+import { DateAdapter as s } from "./date-adapter.js";
+const i = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
+class u extends s {
   /** Gets the year of the input date. */
-  getYear(t) {
-    return t.getFullYear();
+  getYear(e) {
+    return e.getFullYear();
   }
   /** Gets the month of the input date. */
-  getMonth(t) {
-    return t.getMonth() + 1;
+  getMonth(e) {
+    return e.getMonth() + 1;
   }
   /** Gets the day of the input date. */
-  getDate(t) {
-    return t.getDate();
+  getDate(e) {
+    return e.getDate();
   }
   /** Gets the day of the week of the input date. */
-  getDayOfWeek(t) {
-    return t.getDay();
+  getDayOfWeek(e) {
+    return e.getDay();
   }
   /** Gets the date in the local format. */
-  getAccessibilityFormatDate(t) {
-    const e = {
+  getAccessibilityFormatDate(e) {
+    const t = {
       year: "numeric",
       month: "long",
       day: "numeric"
     };
-    return new Intl.DateTimeFormat(i.current, e).format(new Date(t));
+    return new Intl.DateTimeFormat(a.current, t).format(new Date(e));
   }
   /**
    * Creates an array of strings with length = 12, filled with the name of the months starting from January, in the document language.
    * @param style See `month` in `DateTimeFormatOptions`: `long` for full name, `short` for short name, `narrow` for single letter,
    * E.g., with January in en-gb: `long` returns "January", `short` returns "Jan", `narrow` returns "J".
    */
-  getMonthNames(t) {
-    const e = new Intl.DateTimeFormat(i.current, { month: t });
-    return this._range(12, (r) => e.format(new Date(2017, r, 1)));
+  getMonthNames(e) {
+    const t = new Intl.DateTimeFormat(a.current, { month: e });
+    return this._range(12, (r) => t.format(new Date(2017, r, 1)));
   }
   /** Creates a string array with length = 31, filled with the days in a month, starting from 1. */
   getDateNames() {
-    const t = new Intl.DateTimeFormat(i.current, { day: "numeric" });
-    return this._range(31, (e) => t.format(new Date(2017, 0, e + 1)));
+    const e = new Intl.DateTimeFormat(a.current, { day: "numeric" });
+    return this._range(31, (t) => e.format(new Date(2017, 0, t + 1)));
   }
   /**
    * Creates a string array with length = 7, filled with the name of the days in a week starting from Sunday, in the document language.
    * @param style See `weekday` in `DateTimeFormatOptions` - 'long' for full name, 'short' for short name, 'narrow' for single letter;
    * E.g., with Monday in en-gb: `long` returns "Monday", `short` returns "Mon", `narrow` returns "M".
    */
-  getDayOfWeekNames(t) {
-    const e = new Intl.DateTimeFormat(i.current, { weekday: t });
-    return this._range(7, (r) => e.format(new Date(2017, 0, r + 1)));
+  getDayOfWeekNames(e) {
+    const t = new Intl.DateTimeFormat(a.current, { weekday: e });
+    return this._range(7, (r) => t.format(new Date(2017, 0, r + 1)));
   }
   /** Defines which is the first day of the week (0: sunday; 1: monday; etc.). */
   getFirstDayOfWeek() {
     return 1;
   }
   /** Calculates the number of days in a month given the year and the month. */
-  getNumDaysInMonth(t) {
-    return this.getDate(this._createDateWithOverflow(this.getYear(t), this.getMonth(t), 0));
+  getNumDaysInMonth(e) {
+    return this.getDate(this._createDateWithOverflow(this.getYear(e), this.getMonth(e), 0));
   }
   /** Creates today's date. */
   today() {
     return new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
   }
   /** Creates a new date, given day, month and year; the method doesn't allow date's overflow. */
-  createDate(t, e, r) {
-    if (e < 1 || e > 12)
-      throw Error(`Invalid month index "${e}". Month index has to be between 1 and 12.`);
+  createDate(e, t, r) {
+    if (t < 1 || t > 12)
+      throw Error(`Invalid month "${t}". Month has to be between 1 and 12.`);
     if (r < 1)
-      throw Error(`Invalid date "${r}". Date has to be greater than 0.`);
-    const a = this._createDateWithOverflow(t, e - 1, r);
-    if (a.getMonth() + 1 !== e)
-      throw Error(`Invalid date "${r}" for month with index "${e}".`);
-    return a;
+      throw Error(`Invalid day "${r}". Day has to be greater than 0.`);
+    const n = this._createDateWithOverflow(e, t - 1, r);
+    if (n.getMonth() + 1 !== t)
+      throw Error(`Invalid day "${r}" for month "${t}".`);
+    return n;
   }
   /** Checks whether the given `obj` is a Date. */
-  isDateInstance(t) {
-    return t instanceof Date;
+  isDateInstance(e) {
+    return e instanceof Date;
   }
   /** Checks whether the given `date` is a valid Date. */
-  isValid(t) {
-    return !!t && !isNaN(t.valueOf());
+  isValid(e) {
+    return !!e && !isNaN(e.valueOf());
   }
   /** Creates a new date by cloning the given one. */
-  clone(t) {
-    return new Date(t.valueOf());
+  clone(e) {
+    return new Date(e.valueOf());
   }
   /**
    * Creates a new date adding the number of provided `years` to the provided `date`.
    * @param date The starting date.
    * @param years The number of years to add.
    */
-  addCalendarYears(t, e) {
-    return this.addCalendarMonths(t, e * 12);
+  addCalendarYears(e, t) {
+    return this.addCalendarMonths(e, t * 12);
   }
   /**
    * Creates a new date adding the number of provided `months` to the provided `date`.
    * If the calculated month has fewer days than the original one, the date is set to the last day of the month.
    * E.g., with `date` = new Date(2022, 0, 31) and `months` = 1, it returns new Date(2022, 1, 28).
    */
-  addCalendarMonths(t, e) {
-    const r = t.getMonth() + e, a = new Date(t.getFullYear(), r, 1, 0, 0, 0, 0), n = this.getNumDaysInMonth(a);
-    return new Date(this.clone(t).setMonth(r, Math.min(n, t.getDate())));
+  addCalendarMonths(e, t) {
+    const r = e.getMonth() + t, n = new Date(e.getFullYear(), r, 1, 0, 0, 0, 0), o = this.getNumDaysInMonth(n);
+    return new Date(this.clone(e).setMonth(r, Math.min(o, e.getDate())));
   }
   /** Creates a new date by adding the number of provided `days` to the provided `date`. */
-  addCalendarDays(t, e) {
-    const r = t.getDate() + e;
-    return new Date(t.getFullYear(), t.getMonth(), r, 0, 0, 0, 0);
+  addCalendarDays(e, t) {
+    const r = e.getDate() + t;
+    return new Date(e.getFullYear(), e.getMonth(), r, 0, 0, 0, 0);
   }
   /** Creates a Date from a valid input (Date or ISO string). */
-  deserialize(t) {
-    if (typeof t == "string")
-      if (t) {
-        if (c.test(t))
-          return this.getValidDateOrNull(new Date(t.includes("T") ? t : t + "T00:00:00"));
+  deserialize(e) {
+    if (typeof e == "string")
+      if (e) {
+        if (i.test(e))
+          return this.getValidDateOrNull(new Date(e.includes("T") ? e : e + "T00:00:00"));
       } else return null;
-    return super.deserialize(t);
-  }
-  /** Returns the right format for the `valueAsDate` property. */
-  parse(t) {
-    if (!t)
-      return null;
-    let e = null;
-    const r = t.match(l);
-    try {
-      e = r ? this.createDate(+r[1], +r[2], +r[3]) : null;
-    } catch {
-    }
-    if (this.isValid(e))
-      return e;
-    const n = t.replace(/\D/g, " ").trim()?.match(h);
-    if (!n || n.index !== 0 || n.length <= 2 || n.some((o) => o === void 0) || !this.isValid(this.createDate(+n[3], +n[2], +n[1])))
-      return null;
-    let s = +n[3];
-    if (typeof s == "number" && s < 100 && s >= 0) {
-      const o = this.today().getFullYear() - 2e3 + this._cutoffYearOffset;
-      s = s <= o ? 2e3 + s : 1900 + s;
-    }
-    return new Date(s, +n[2] - 1, +n[1]);
+    return super.deserialize(e);
   }
   invalid() {
     return /* @__PURE__ */ new Date(NaN);
@@ -149,17 +124,17 @@ class D extends u {
    * @param length The length of the array to be created.
    * @param valueFunction The function of array's index used to fill the array.
    */
-  _range(t, e) {
-    return Array.from({ length: t }).map((r, a) => e(a));
+  _range(e, t) {
+    return Array.from({ length: e }).map((r, n) => t(n));
   }
   /** Creates a date but allows the month and date to overflow. */
-  _createDateWithOverflow(t, e, r) {
-    const a = new Date(t, e, r);
-    return t >= 0 && t < 100 && a.setFullYear(this.getYear(a) - 1900), a;
+  _createDateWithOverflow(e, t, r) {
+    const n = new Date(e, t, r);
+    return e >= 0 && e < 100 && n.setFullYear(this.getYear(n) - 1900), n;
   }
 }
-const m = new D();
+const g = new u();
 export {
-  D as NativeDateAdapter,
-  m as defaultDateAdapter
+  u as NativeDateAdapter,
+  g as defaultDateAdapter
 };