@sbb-esta/lyne-elements 2.11.2 → 3.0.0-next.1

package/checkbox/checkbox-panel/checkbox-panel.component.js

@@ -1,42 +1,50 @@
-var _ = (e) => {
+var y = (e) => {
   throw TypeError(e);
 };
-var k = (e, t, s) => t.has(e) || _("Cannot " + s);
-var x = (e, t, s) => (k(e, t, "read from private field"), s ? s.call(e) : t.get(e)), f = (e, t, s) => t.has(e) ? _("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), b = (e, t, s, i) => (k(e, t, "write to private field"), i ? i.call(e, s) : t.set(e, s), s);
-import { __runInitializers as h, __esDecorate as g } from "tslib";
-import { LitElement as S, nothing as v, html as z } from "lit";
-import { customElement as y, property as C } from "lit/decorators.js";
-import { slotState as E, getOverride as w } from "../../core/decorators.js";
-import { isLean as $ } from "../../core/dom.js";
-import { EventEmitter as D } from "../../core/eventing.js";
-import { SbbPanelMixin as I, SbbUpdateSchedulerMixin as M, panelCommonStyle as O } from "../../core/mixins.js";
-import { SbbCheckboxCommonElementMixin as U, checkboxCommonStyle as j } from "../common.js";
+var C = (e, t, i) => t.has(e) || y("Cannot " + i);
+var d = (e, t, i) => (C(e, t, "read from private field"), i ? i.call(e) : t.get(e)), u = (e, t, i) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), b = (e, t, i, l) => (C(e, t, "write to private field"), l ? l.call(e, i) : t.set(e, i), i);
+import { __runInitializers as h, __esDecorate as p } from "tslib";
+import { LitElement as $, nothing as D, html as E } from "lit";
+import { customElement as I, property as w } from "lit/decorators.js";
+import { slotState as M, getOverride as O } from "../../core/decorators.js";
+import { isLean as U } from "../../core/dom.js";
+import { EventEmitter as j } from "../../core/eventing.js";
+import { SbbPanelMixin as L, SbbUpdateSchedulerMixin as A, panelCommonStyle as T } from "../../core/mixins.js";
+import { SbbCheckboxCommonElementMixin as q, checkboxCommonStyle as B } from "../common.js";
 import "../../screen-reader-only.js";
 import "../../visual-checkbox.js";
-let Q = (() => {
-  var c, l;
-  let e = [y("sbb-checkbox-panel"), E()], t, s = [], i, m = I(U(M(S))), d, p = [], u = [];
-  var o = (l = class extends m {
+let Y = (() => {
+  var c, r, n;
+  let e = [I("sbb-checkbox-panel"), M()], t, i = [], l, _ = L(q(A($))), f, k = [], v = [], x, g = [], z = [];
+  var m = (n = class extends _ {
     constructor() {
       super(...arguments);
-      f(this, c);
-      b(this, c, h(this, p, $() ? "s" : "m")), this.stateChange = (h(this, u), new D(this, o.events.stateChange, { bubbles: !0 }));
+      u(this, c);
+      u(this, r);
+      b(this, c, h(this, k, null)), b(this, r, (h(this, v), h(this, g, U() ? "s" : "m"))), this.stateChange = (h(this, z), new j(this, m.events.stateChange, { bubbles: !0 }));
+    }
+    /** Value of the form element. */
+    get value() {
+      return d(this, c);
+    }
+    set value(s) {
+      b(this, c, s);
     }
     /**
      * Size variant, either m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return x(this, c);
+      return d(this, r);
     }
-    set size(a) {
-      b(this, c, a);
+    set size(s) {
+      b(this, r, s);
     }
-    willUpdate(a) {
-      super.willUpdate(a), a.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== a.get("checked") && this.stateChange.emit({ type: "checked", checked: this.checked })), a.has("disabled") && this.disabled !== a.get("disabled") && this.stateChange.emit({ type: "disabled", disabled: this.disabled });
+    willUpdate(s) {
+      super.willUpdate(s), s.has("checked") && (this.toggleAttribute("data-checked", this.checked), this.checked !== s.get("checked") && this.stateChange.emit({ type: "checked", checked: this.checked })), s.has("disabled") && this.disabled !== s.get("disabled") && this.stateChange.emit({ type: "disabled", disabled: this.disabled });
     }
     render() {
-      return z`
+      return E`
       <span class="sbb-selection-panel">
         <div class="sbb-selection-panel__badge">
           <slot name="badge"></slot>
@@ -57,23 +65,28 @@ let Q = (() => {
               </span>
             </span>
             <slot name="subtext"></slot>
-            ${this.expansionState ? z`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : v}
+            ${this.expansionState ? E`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : D}
           </span>
         </span>
       </span>
     `;
     }
-  }, c = new WeakMap(), i = l, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-    d = [C({ reflect: !0 }), w((n, r) => n.group?.size ? n.group.size === "xs" ? "s" : n.group.size : r)], g(l, null, d, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (n) => "size" in n, get: (n) => n.size, set: (n, r) => {
-      n.size = r;
-    } }, metadata: a }, p, u), g(null, t = { value: i }, e, { kind: "class", name: i.name, metadata: a }, null, s), o = i = t.value, a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), l.styles = [j, O], l.events = {
+  }, c = new WeakMap(), r = new WeakMap(), l = n, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+    f = [w()], x = [w({ reflect: !0 }), O((a, o) => {
+      var S;
+      return (S = a.group) != null && S.size ? a.group.size === "xs" ? "s" : a.group.size : o;
+    })], p(n, null, f, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, o) => {
+      a.value = o;
+    } }, metadata: s }, k, v), p(n, null, x, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, o) => {
+      a.size = o;
+    } }, metadata: s }, g, z), p(null, t = { value: l }, e, { kind: "class", name: l.name, metadata: s }, null, i), m = l = t.value, s && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), n.styles = [B, T], n.events = {
     stateChange: "stateChange",
     panelConnected: "panelConnected"
-  }, h(i, s), l);
-  return o = i;
+  }, h(l, i), n);
+  return m = l;
 })();
 export {
-  Q as SbbCheckboxPanelElement
+  Y as SbbCheckboxPanelElement
 };

package/checkbox/common/checkbox-common.d.ts

@@ -1,10 +1,12 @@
 import { LitElement } from 'lit';
-import { Constructor, SbbDisabledMixinType, SbbFormAssociatedCheckboxMixinType, SbbRequiredMixinType } from '../../core/mixins.js';
+import { Constructor } from '../../core/mixins.js';
 import { SbbCheckboxGroupElement } from '../checkbox-group.js';
 export type SbbCheckboxSize = 'xs' | 's' | 'm';
-export declare class SbbCheckboxCommonElementMixinType extends SbbFormAssociatedCheckboxMixinType implements Partial<SbbDisabledMixinType>, Partial<SbbRequiredMixinType> {
+declare const SbbCheckboxCommonElementMixinType_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbFormAssociatedCheckboxMixinType> & typeof LitElement;
+export declare abstract class SbbCheckboxCommonElementMixinType extends SbbCheckboxCommonElementMixinType_base {
     accessor indeterminate: boolean;
     get group(): SbbCheckboxGroupElement | null;
 }
 export declare const SbbCheckboxCommonElementMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SbbCheckboxCommonElementMixinType> & T;
+export {};
 //# sourceMappingURL=checkbox-common.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/common/checkbox-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAItD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,oBAAoB,EAEzB,KAAK,kCAAkC,EACvC,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,iCACnB,SAAQ,kCACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEvE,SAAgB,aAAa,EAAE,OAAO,CAAC;IAEvC,IAAW,KAAK,IAAI,uBAAuB,GAAG,IAAI,CAAC;CACpD;AAGD,eAAO,MAAM,6BAA6B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC7E,YAAY,CAAC,KACZ,WAAW,CAAC,iCAAiC,CAAC,GAAG,CA+CnD,CAAC"}
+{"version":3,"file":"checkbox-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/common/checkbox-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAItD,OAAO,EAAE,KAAK,WAAW,EAAkC,MAAM,sBAAsB,CAAC;AACxF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;;AAE/C,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,iCAAkC,SAAQ,sCAEvE;IACC,SAAgB,aAAa,EAAE,OAAO,CAAC;IAEvC,IAAW,KAAK,IAAI,uBAAuB,GAAG,IAAI,CAAC;CACpD;AAGD,eAAO,MAAM,6BAA6B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC7E,YAAY,CAAC,KACZ,WAAW,CAAC,iCAAiC,CAAC,GAAG,CA+CnD,CAAC"}

package/checkbox/common/checkbox-common.js

@@ -1,16 +1,16 @@
 var d = (e) => {
   throw TypeError(e);
 };
-var u = (e, t, i) => t.has(e) || d("Cannot " + i);
-var h = (e, t, i) => (u(e, t, "read from private field"), i ? i.call(e) : t.get(e)), b = (e, t, i) => t.has(e) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), l = (e, t, i, s) => (u(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
+var u = (e, i, r) => i.has(e) || d("Cannot " + r);
+var h = (e, i, r) => (u(e, i, "read from private field"), r ? r.call(e) : i.get(e)), b = (e, i, r) => i.has(e) ? d("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, r), l = (e, i, r, s) => (u(e, i, "write to private field"), s ? s.call(e, r) : i.set(e, r), r);
 import { __runInitializers as p, __esDecorate as _ } from "tslib";
 import { property as x } from "lit/decorators.js";
 import { forceType as g } from "../../core/decorators.js";
 import { SbbFormAssociatedCheckboxMixin as y } from "../../core/mixins.js";
 const z = (e) => (() => {
   var n, a;
-  let i = y(e), s, m = [], c = [];
-  return a = class extends i {
+  let r = y(e), s, m = [], c = [];
+  return a = class extends r {
     constructor() {
       super(...arguments);
       b(this, n);
@@ -20,33 +20,35 @@ const z = (e) => (() => {
     get indeterminate() {
       return h(this, n);
     }
-    set indeterminate(r) {
-      l(this, n, r);
+    set indeterminate(t) {
+      l(this, n, t);
     }
     /** Reference to the connected checkbox group. */
     get group() {
       return this._group;
     }
     connectedCallback() {
-      super.connectedCallback(), this._group = this.closest("sbb-checkbox-group"), ["disabled", "required", "size"].forEach((r) => this.requestUpdate(r));
+      super.connectedCallback(), this._group = this.closest("sbb-checkbox-group"), ["disabled", "required", "size"].forEach((t) => this.requestUpdate(t));
     }
-    willUpdate(r) {
-      super.willUpdate(r), (r.has("checked") || r.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
+    willUpdate(t) {
+      super.willUpdate(t), (t.has("checked") || t.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
     }
     isDisabledExternally() {
-      return this.group?.disabled ?? !1;
+      var t;
+      return ((t = this.group) == null ? void 0 : t.disabled) ?? !1;
     }
     isRequiredExternally() {
-      return this.group?.required ?? !1;
+      var t;
+      return ((t = this.group) == null ? void 0 : t.required) ?? !1;
     }
     withUserInteraction() {
       this.indeterminate && (this.indeterminate = !1);
     }
   }, n = new WeakMap(), (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
     s = [g(), x({ type: Boolean })], _(a, null, s, { kind: "accessor", name: "indeterminate", static: !1, private: !1, access: { has: (o) => "indeterminate" in o, get: (o) => o.indeterminate, set: (o, f) => {
       o.indeterminate = f;
-    } }, metadata: r }, m, c), r && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+    } }, metadata: t }, m, c), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), a;
 })();
 export {

package/chip/chip/chip.component.d.ts

@@ -1,23 +1,22 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-declare const SbbChipElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
+declare const SbbChipElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbReadonlyMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
 /**
  * It displays a chip. Usually used in combination with `sbb-chip-group`.
  *
  * @slot - Use the unnamed slot to add the display value. If not provided, the 'value' will be used.
+ * @overrideType value - (T = string) | null
  */
-export declare class SbbChipElement extends SbbChipElement_base {
+export declare class SbbChipElement<T = string> extends SbbChipElement_base {
+    static readonly role = "option";
     static styles: CSSResultGroup;
     static readonly events: {
         readonly requestDelete: "requestDelete";
     };
     /** The value of chip. Will be used as label if nothing is slotted. */
-    accessor value: string;
-    /** Whether the component is readonly */
-    accessor readonly: boolean;
+    accessor value: T | null;
     /** @internal */
     private _requestDelete;
     private _language;
-    constructor();
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     private _deleteButton;

package/chip/chip/chip.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/chip/chip/chip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,OAAO,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC;;AAIrC;;;;GAIG;AACH,qBAEM,cAAe,SAAQ,mBAA8C;IACzE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,sEAAsE;IACtE,SAAyC,KAAK,EAAE,MAAM,CAAM;IAE5D,wCAAwC;IACxC,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAoE;IAE1F,OAAO,CAAC,SAAS,CAAmC;;cASjC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAYzD,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQzE,OAAO,CAAC,aAAa;cAIF,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"chip.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/chip/chip/chip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC;;AAIrC;;;;;GAKG;AACH,qBAEM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,mBAExC;IACC,gBAAgC,IAAI,YAAY;IAChD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,sEAAsE;IACtE,SAA4B,KAAK,EAAE,CAAC,GAAG,IAAI,CAAQ;IAEnD,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAoE;IAE1F,OAAO,CAAC,SAAS,CAAmC;cAEjC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAYzD,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQzE,OAAO,CAAC,aAAa;cAIF,MAAM,IAAI,cAAc;CAmB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/chip/chip/chip.component.js

@@ -1,60 +1,49 @@
-var k = (e) => {
+var v = (e) => {
   throw TypeError(e);
 };
-var z = (e, t, i) => t.has(e) || k("Cannot " + i);
-var u = (e, t, i) => (z(e, t, "read from private field"), i ? i.call(e) : t.get(e)), p = (e, t, i) => t.has(e) ? k("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), c = (e, t, i, s) => (z(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
-import { __esDecorate as v, __runInitializers as n } from "tslib";
-import { css as E, LitElement as q, html as I } from "lit";
-import { customElement as C, property as S } from "lit/decorators.js";
-import { SbbLanguageController as U } from "../../core/controllers.js";
-import { forceType as D } from "../../core/decorators.js";
-import { EventEmitter as A } from "../../core/eventing.js";
-import { i18nChipDelete as B } from "../../core/i18n.js";
-import { SbbNegativeMixin as T, SbbDisabledMixin as $ } from "../../core/mixins.js";
+var m = (e, r, b) => r.has(e) || v("Cannot " + b);
+var f = (e, r, b) => (m(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), c = (e, r, b, o) => (m(e, r, "write to private field"), o ? o.call(e, b) : r.set(e, b), b);
+import { __runInitializers as n, __esDecorate as _ } from "tslib";
+import { css as y, LitElement as w, html as k } from "lit";
+import { customElement as S, property as z } from "lit/decorators.js";
+import { SbbLanguageController as D } from "../../core/controllers.js";
+import { EventEmitter as E } from "../../core/eventing.js";
+import { i18nChipDelete as q } from "../../core/i18n.js";
+import { SbbNegativeMixin as C, SbbDisabledMixin as I, SbbReadonlyMixin as M, SbbElementInternalsMixin as U } from "../../core/mixins.js";
 import "../../button/mini-button.js";
 import "../../screen-reader-only.js";
-const j = E`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-background-color: var(--sbb-color-milk);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-color-cloud);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color-active: var(--sbb-color-charcoal);--sbb-chip-color-hover: var(--sbb-color-charcoal);--sbb-chip-background-color-active: var(--sbb-color-white);--sbb-chip-background-color-hover: var(--sbb-color-white);--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-color-iron);--sbb-chip-background-color: var(--sbb-color-charcoal);--sbb-chip-color: var(--sbb-color-cloud);--sbb-chip-color-active: var(--sbb-color-white);--sbb-chip-color-hover: var(--sbb-color-white);--sbb-chip-background-color-active: var(--sbb-color-midnight);--sbb-chip-background-color-hover: var(--sbb-color-midnight);--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-font-size-text-xxs);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);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-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-button-color-text: var(--sbb-chip-color);--sbb-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-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);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-button-color-text: var(--sbb-chip-color-hover)}}`;
-let V = (() => {
-  var a, l, b;
-  let e = [C("sbb-chip")], t, i = [], s, m = T($(q)), f, _ = [], g = [], y, x = [], w = [];
-  var d = (b = class extends m {
+const A = y`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-background-color: var(--sbb-color-milk);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-color-cloud);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color-active: var(--sbb-color-charcoal);--sbb-chip-color-hover: var(--sbb-color-charcoal);--sbb-chip-background-color-active: var(--sbb-color-white);--sbb-chip-background-color-hover: var(--sbb-color-white);--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-color-iron);--sbb-chip-background-color: var(--sbb-color-charcoal);--sbb-chip-color: var(--sbb-color-cloud);--sbb-chip-color-active: var(--sbb-color-white);--sbb-chip-color-hover: var(--sbb-color-white);--sbb-chip-background-color-active: var(--sbb-color-midnight);--sbb-chip-background-color-hover: var(--sbb-color-midnight);--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-font-size-text-xxs);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);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-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-button-color-text: var(--sbb-chip-color);--sbb-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-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);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-button-color-text: var(--sbb-chip-color-hover)}}`;
+let J = (() => {
+  var s, t;
+  let e = [S("sbb-chip")], r, b = [], o, d = C(I(M(U(w)))), h, u = [], p = [];
+  var l = (t = class extends d {
     constructor() {
-      super();
-      p(this, a);
-      p(this, l);
-      c(this, a, n(this, _, "")), c(this, l, (n(this, g), n(this, x, !1))), this._requestDelete = (n(this, w), new A(this, d.events.requestDelete)), this._language = new U(this);
-      const r = this.attachInternals();
-      r.role = "option";
+      super(...arguments);
+      g(this, s);
+      c(this, s, n(this, u, null)), this._requestDelete = (n(this, p), new E(this, l.events.requestDelete)), this._language = new D(this);
     }
     /** The value of chip. Will be used as label if nothing is slotted. */
     get value() {
-      return u(this, a);
+      return f(this, s);
     }
-    set value(r) {
-      c(this, a, r);
+    set value(i) {
+      c(this, s, i);
     }
-    /** Whether the component is readonly */
-    get readonly() {
-      return u(this, l);
+    willUpdate(i) {
+      super.willUpdate(i), i.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
     }
-    set readonly(r) {
-      c(this, l, r);
-    }
-    willUpdate(r) {
-      super.willUpdate(r), r.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
-    }
-    firstUpdated(r) {
-      super.firstUpdated(r), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
+    firstUpdated(i) {
+      super.firstUpdated(i), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
     }
     _deleteButton() {
       return this.shadowRoot.querySelector("sbb-mini-button");
     }
     render() {
-      return I`
+      return k`
       <div class="sbb-chip">
         <div class="sbb-chip__label-wrapper">
           <span class="sbb-chip__label">
-            <slot>${this.value}</slot>
+            <slot>${this.value ?? ""}</slot>
           </span>
         </div>
         <sbb-mini-button
@@ -64,22 +53,20 @@ let V = (() => {
           @click=${() => this._requestDelete.emit()}
         >
         </sbb-mini-button>
-        <sbb-screen-reader-only>, ${B[this._language.current]}</sbb-screen-reader-only>
+        <sbb-screen-reader-only>, ${q[this._language.current]}</sbb-screen-reader-only>
       </div>
     `;
     }
-  }, a = new WeakMap(), l = new WeakMap(), s = b, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-    f = [D(), S()], y = [D(), S({ type: Boolean, reflect: !0 })], v(b, null, f, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (o) => "value" in o, get: (o) => o.value, set: (o, h) => {
-      o.value = h;
-    } }, metadata: r }, _, g), v(b, null, y, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (o) => "readonly" in o, get: (o) => o.readonly, set: (o, h) => {
-      o.readonly = h;
-    } }, metadata: r }, x, w), v(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: r }, null, i), d = s = t.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), b.styles = j, b.events = {
+  }, s = new WeakMap(), o = t, (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+    h = [z()], _(t, null, h, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, x) => {
+      a.value = x;
+    } }, metadata: i }, u, p), _(null, r = { value: o }, e, { kind: "class", name: o.name, metadata: i }, null, b), l = o = r.value, i && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), t.role = "option", t.styles = A, t.events = {
     requestDelete: "requestDelete"
-  }, n(s, i), b);
-  return d = s;
+  }, n(o, b), t);
+  return l = o;
 })();
 export {
-  V as SbbChipElement
+  J as SbbChipElement
 };

package/chip/chip-group/chip-group.component.d.ts

@@ -1,17 +1,21 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { FormRestoreReason, FormRestoreState } from '../../core/mixins.js';
-export interface SbbChipInputTokenEndEventDetails {
+export interface SbbChipInputTokenEndEventDetails<T = string> {
     /** The element that triggered the chip creation */
     origin: 'input' | 'autocomplete';
-    /** The value of the new chip. Either the input or the option value depending on the origin */
-    value: string;
+    /**
+     * The value of the new chip. Either the input or the option value depending on the origin.
+     * Either the value from the input which is always `string` or the value from the selected option
+     * from an autocomplete, which can be either a string or any other type.
+     */
+    value: T | string;
     label?: string;
     /** Set a new value for the chip that will be created */
-    setValue(value: string): void;
+    setValue(value: T): void;
     /** Set a label for the chip that will be created */
     setLabel(value: string): void;
 }
-declare const SbbChipGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbRequiredMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbFormAssociatedMixinType<string[]>> & typeof LitElement;
+declare const SbbChipGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbRequiredMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbFormAssociatedMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
 /**
  * The `sbb-chip-group` component is used as a container for one or multiple `sbb-chip`.
  *
@@ -19,9 +23,10 @@ declare const SbbChipGroupElement_base: import('../../core/mixins.js').AbstractC
  * @event {CustomEvent<void>} input - Notifies that the component's value has changed.
  * @event {CustomEvent<SbbChipInputTokenEndEventDetails>} chipInputTokenEnd - Notifies that a chip is about to be created. Can be used to customize the value and the label. Can be prevented.
  * @slot - Use the unnamed slot to add `sbb-chip` elements.
- * @overrideType value - string[] | null
+ * @overrideType value - (T = string[]) | null
  */
-export declare class SbbChipGroupElement extends SbbChipGroupElement_base {
+export declare class SbbChipGroupElement<T = string> extends SbbChipGroupElement_base {
+    static readonly role = "listbox";
     static styles: CSSResultGroup;
     static readonly events: {
         readonly input: "input";
@@ -29,8 +34,10 @@ export declare class SbbChipGroupElement extends SbbChipGroupElement_base {
         readonly chipInputTokenEnd: "chipInputTokenEnd";
     };
     /** Value of the form element. */
-    set value(value: string[] | null);
-    get value(): string[];
+    set value(value: (T | null)[] | null);
+    get value(): (T | null)[];
+    /** Function that maps a chip's value to its display value. */
+    accessor displayWith: ((value: T) => string) | null;
     /** The array of keys that will trigger a `chipInputTokenEnd` event. Default `['Enter']` */
     accessor separatorKeys: string[];
     /** Notifies that the component's value has changed. */
@@ -57,7 +64,7 @@ export declare class SbbChipGroupElement extends SbbChipGroupElement_base {
     formResetCallback(): void;
     /** @internal */
     formStateRestoreCallback(state: FormRestoreState | null, _reason: FormRestoreReason): void;
-    protected updateFormValue(): void;
+    private _readFormData;
     protected shouldValidate(name: PropertyKey | undefined): boolean;
     protected validate(): void;
     /** Return the list of chip elements **/
@@ -96,5 +103,10 @@ declare global {
         'sbb-chip-group': SbbChipGroupElement;
     }
 }
+declare global {
+    interface HTMLElementEventMap {
+        chipInputTokenEnd: CustomEvent<SbbChipInputTokenEndEventDetails<any>>;
+    }
+}
 export {};
 //# sourceMappingURL=chip-group.component.d.ts.map

package/chip/chip-group/chip-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/chip/chip-group/chip-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAKtB,MAAM,sBAAsB,CAAC;AAK9B,MAAM,WAAW,gCAAgC;IAC/C,mDAAmD;IACnD,MAAM,EAAE,OAAO,GAAG,cAAc,CAAC;IACjC,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,oDAAoD;IACpD,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;;AAED;;;;;;;;GAQG;AACH,qBAEM,mBAAoB,SAAQ,wBAIjC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX,iCAAiC;IACjC,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EA4B/C;IACD,IAAoB,KAAK,IAAI,MAAM,EAAE,CAEpC;IAED,2FAA2F;IAC3F,SACgB,aAAa,EAAE,MAAM,EAAE,CAAa;IAEpD,uDAAuD;IACvD,OAAO,CAAC,OAAO,CAA2E;IAE1F,uDAAuD;IACvD,OAAO,CAAC,MAAM,CAA0E;IAExF,qEAAqE;IACrE,OAAO,CAAC,kBAAkB,CAGxB;IAEF;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAEtB;IAET;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAE1B;IAET,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,qBAAqB,CAA8B;IAC3D,OAAO,CAAC,SAAS,CAAmC;;IAepC,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAYtE,gBAAgB;IACT,iBAAiB,IAAI,IAAI;IAIhC,gBAAgB;IACT,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAUP,SAAS,CAAC,eAAe,IAAI,IAAI;cAQd,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;cAItD,QAAQ,IAAI,IAAI;IASnC,wCAAwC;IACxC,OAAO,CAAC,aAAa;IAIrB,gDAAgD;IAChD,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,eAAe;IA2CvB;;QAEI;IACJ,OAAO,CAAC,cAAc;IAyBtB;;QAEI;IACJ,OAAO,CAAC,eAAe;IAoBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAuB5B,OAAO,CAAC,WAAW;IAOnB;;;OAGG;IACH,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,uBAAuB;cAUZ,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"chip-group.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/chip/chip-group/chip-group.component.ts"],"names":[],"mappings":"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"}