@sbb-esta/lyne-elements 4.7.0 → 4.8.1

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

@@ -1,252 +1,2 @@
-var D = (i) => {
-  throw TypeError(i);
-};
-var B = (i, a, r) => a.has(i) || D("Cannot " + r);
-var _ = (i, a, r) => (B(i, a, "read from private field"), r ? r.call(i) : a.get(i)), g = (i, a, r) => a.has(i) ? D("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), u = (i, a, r, p) => (B(i, a, "write to private field"), p ? p.call(i, r) : a.set(i, r), r);
-import { __esDecorate as d, __runInitializers as h } from "tslib";
-import { css as W, LitElement as T, isServer as K, html as F } from "lit";
-import { customElement as q, property as y } from "lit/decorators.js";
-import { isArrowKeyPressed as M, getNextElementIndex as V } from "../../core/a11y.js";
-import { SbbLanguageController as R, SbbPropertyWatcherController as $ } from "../../core/controllers.js";
-import { forceType as N } from "../../core/decorators.js";
-import { isLean as j } from "../../core/dom/lean-context.js";
-import { i18nSelectionRequired as G, i18nChipGroupInputDescription as U } from "../../core/i18n.js";
-import { SbbRequiredMixin as J, SbbDisabledMixin as P, SbbNegativeMixin as H, SbbFormAssociatedMixin as Q, SbbElementInternalsMixin as X } from "../../core/mixins.js";
-import { boxSizingStyles as Y } from "../../core/styles.js";
-import { SbbChipElement as Z } from "../chip.js";
-const tt = W`: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 ct = (() => {
-  var b, m, c, l;
-  let i = [q("sbb-chip-group")], a, r = [], p, f = J(P(H(Q(X(T))))), v = [], z, w, k = [], E = [], C, S = [], x = [], I, O = [], A = [];
-  return l = class extends f {
-    constructor() {
-      super();
-      g(this, b);
-      g(this, m);
-      g(this, c);
-      u(this, b, (h(this, v), h(this, k, null))), u(this, m, (h(this, E), h(this, S, ["Enter"]))), u(this, c, (h(this, x), h(this, O, !1))), this._inputAttributeObserver = (h(this, A), K ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new R(this), this.addEventListener?.(Z.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new $(this, () => this.closest("sbb-form-field"), {
-        size: (t) => this._updateSize(t.size),
-        label: (t) => this._updateLabelState(t),
-        hiddenLabel: (t) => this._updateLabelState(t)
-      }));
-    }
-    /** Value of the form element. */
-    set value(t) {
-      t = t ?? [];
-      const e = this.value, s = [...e];
-      for (const n of t)
-        s.includes(n) && s.splice(s.indexOf(n), 1);
-      s.forEach((n) => this._chipElements().find((L) => L.value === n)?.remove());
-      const o = [...t];
-      for (const n of e)
-        o.includes(n) && o.splice(o.indexOf(n), 1);
-      o.forEach((n) => this._createChipElement(n));
-    }
-    get value() {
-      return this._chipElements().map((t) => t.value);
-    }
-    /** Function that maps a chip's value to its display value. */
-    get displayWith() {
-      return _(this, b);
-    }
-    set displayWith(t) {
-      u(this, b, t);
-    }
-    /** The array of keys that will trigger a `chipinputtokenend` event. Default `['Enter']` */
-    get separatorKeys() {
-      return _(this, m);
-    }
-    set separatorKeys(t) {
-      u(this, m, t);
-    }
-    /** Whether to automatically add a chip when the input loses focus if there's a value. */
-    get addOnBlur() {
-      return _(this, c);
-    }
-    set addOnBlur(t) {
-      u(this, c, t);
-    }
-    _updateLabelState(t) {
-      this.toggleState("without-label", !t.label || t.hiddenLabel);
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._setupComponent();
-    }
-    willUpdate(t) {
-      super.willUpdate(t), (t.has("disabled") || t.has("formDisabled") || t.has("negative")) && this._proxyStateToChips();
-    }
-    /** @internal */
-    formResetCallback() {
-      this.value = null;
-    }
-    /** @internal */
-    formStateRestoreCallback(t, e) {
-      if (!t) {
-        this.value = null;
-        return;
-      }
-      this._readFormData(t).then((s) => this.value = s);
-    }
-    async _readFormData(t) {
-      return Promise.all(t.getAll(this.name).map(async (e) => e instanceof Blob ? JSON.parse(await e.text()) : e));
-    }
-    shouldValidate(t) {
-      return super.shouldValidate(t) || t === "required" || t === "value";
-    }
-    validate() {
-      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", G[this._language.current]) : this.removeValidityFlag("valueMissing");
-    }
-    /** Return the list of chip elements **/
-    _chipElements() {
-      return Array.from(this.querySelectorAll?.("sbb-chip") ?? []);
-    }
-    /** Return the list of enabled chip elements **/
-    _enabledChipElements() {
-      return Array.from(this.querySelectorAll?.("sbb-chip:not([disabled])") ?? []);
-    }
-    _setupComponent() {
-      const t = this.querySelector("input");
-      t && t !== this._inputElement && (this._inputAbortController?.abort(), this._inputAttributeObserver?.disconnect(), this._inputElement = t, this._inputAbortController = new AbortController(), this._inputElement.addEventListener("keydown", (e) => this._onInputKeyDown(e), {
-        signal: this._inputAbortController.signal
-      }), this._inputElement.addEventListener("blur", () => this._onInputBlur(), {
-        signal: this._inputAbortController.signal,
-        capture: !0
-      }), this._inputElement.addEventListener("inputAutocomplete", (e) => {
-        this._createChipFromInput("autocomplete", e.detail?.option.value);
-      }, {
-        signal: this._inputAbortController.signal
-      }), this._inputAttributeObserver?.observe(this._inputElement, {
-        attributes: !0,
-        attributeFilter: ["readonly", "disabled"]
-      })), (!this._previousSize || !this.closest("sbb-form-field")) && this._updateSize(j() ? "s" : "m"), this.toggleState("empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
-    }
-    /**
-     * Listen for keyboard events on the chip elements
-     **/
-    _onChipKeyDown(t) {
-      const e = t.target;
-      if (e.localName === "sbb-chip") {
-        if (M(t)) {
-          const s = this._enabledChipElements(), o = V(t, s.indexOf(e), s.length);
-          s[o].focus();
-          return;
-        }
-        switch (t.key) {
-          case "Backspace":
-          case "Delete":
-            !e.readOnly && !e.disabled && (t.preventDefault(), this._deleteChip(e));
-            break;
-        }
-      }
-    }
-    /**
-     * Listen for keyboard events on the input
-     **/
-    _onInputKeyDown(t) {
-      switch (t.key) {
-        case "Backspace":
-        case "ArrowLeft":
-          this._inputElement.value || this._focusChip();
-          break;
-        case "Enter":
-          t.preventDefault();
-          break;
-      }
-      this.separatorKeys.includes(t.key) && (t.preventDefault(), this._createChipFromInput("input"));
-    }
-    /**
-     * Handle blur event on the input
-     **/
-    _onInputBlur() {
-      this.addOnBlur && this._createChipFromInput("input");
-    }
-    /**
-     * If the input is not empty, create a chip with its value
-     */
-    _createChipFromInput(t = "input", e) {
-      const s = e ?? this._inputElement.value.trim();
-      if (!s)
-        return;
-      const o = {
-        origin: t,
-        value: s,
-        label: (e ? this.displayWith?.(e) : null) ?? void 0,
-        setValue: (n) => o.value = n,
-        setLabel: (n) => o.label = n
-      };
-      this._dispatchChipInputTokenEnd(o) && (this._createChipElement(o.value, o.label), this._inputElement.value = "", this._emitInputEvents());
-    }
-    _dispatchChipInputTokenEnd(t) {
-      return this.dispatchEvent(new CustomEvent("chipinputtokenend", {
-        detail: t,
-        cancelable: !0,
-        bubbles: !0,
-        composed: !0
-      }));
-    }
-    _deleteChip(t) {
-      const e = this._enabledChipElements();
-      t.remove(), this._emitInputEvents(), this._focusChip(e.indexOf(t));
-    }
-    /**
-     * Focus an enabled chip. If none are present, focus the input
-     * @param index The index of the enabled chip. If null, focus the last one.
-     */
-    _focusChip(t) {
-      const e = this._enabledChipElements();
-      if (t !== void 0 && e[t]) {
-        e[t].focus();
-        return;
-      }
-      if (e.length > 0) {
-        e[e.length - 1].focus();
-        return;
-      }
-      this._inputElement?.focus();
-    }
-    _emitInputEvents() {
-      this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 }));
-    }
-    _createChipElement(t, e) {
-      if (K)
-        return;
-      const s = document.createElement("sbb-chip");
-      s.value = t, s.innerText = e ?? (t ? this.displayWith?.(t) : null) ?? "", this.insertBefore(s, this._inputElement ?? this.querySelector("input"));
-    }
-    _reactToInputChanges() {
-      this.disabled = this._inputElement?.disabled ?? !1, this._proxyStateToChips();
-    }
-    _proxyStateToChips() {
-      this._chipElements().forEach((t) => {
-        t.disabled = this.disabled || this.formDisabled, t.readOnly = this._inputElement?.hasAttribute("readonly") ?? !1, t.negative = this.negative;
-      });
-    }
-    _updateSize(t) {
-      this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
-    }
-    _updateInputDescription() {
-      this._inputElement && this._inputElement.setAttribute("aria-description", `${U[this._language.current]} ${this.value.length}`);
-    }
-    render() {
-      return F`<slot @slotchange=${this._setupComponent}></slot>`;
-    }
-  }, b = new WeakMap(), m = new WeakMap(), c = new WeakMap(), p = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    z = [y({ type: Array })], w = [y({ attribute: !1 })], C = [y({ attribute: "separator-keys", type: Array })], I = [N(), y({ attribute: "add-on-blur", type: Boolean })], d(l, null, z, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
-      e.value = s;
-    } }, metadata: t }, null, v), d(l, null, w, { 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 }, k, E), d(l, null, C, { 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 }, S, x), d(l, null, I, { kind: "accessor", name: "addOnBlur", static: !1, private: !1, access: { has: (e) => "addOnBlur" in e, get: (e) => e.addOnBlur, set: (e, s) => {
-      e.addOnBlur = s;
-    } }, metadata: t }, O, A), d(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 });
-  })(), l.role = "listbox", l.styles = [Y, tt], l.events = {
-    input: "input",
-    change: "change",
-    chipinputtokenend: "chipinputtokenend"
-  }, h(p, r), p;
-})();
-export {
-  ct as SbbChipGroupElement
-};
+import { n as e, t } from "../../chip-group.component-CbruCoHR.js";
+export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/chip/chip-group.js

@@ -1,4 +1,4 @@
-import { SbbChipGroupElement as p } from "./chip-group/chip-group.component.js";
-export {
-  p as SbbChipGroupElement
-};
+import { n as e, t } from "../chip-group.component-CbruCoHR.js";
+t.define(), console.warn("The entrypoint '@sbb-esta/elements/chip/chip-group.js' has been deprecated.\nUse either '@sbb-esta/elements/chip.js' or '@sbb-esta/elements/chip.pure.js' instead.");
+//#endregion
+export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/chip/chip.js

@@ -1,4 +1,4 @@
-import { SbbChipElement as m } from "./chip/chip.component.js";
-export {
-  m as SbbChipElement
-};
+import { t as e } from "../chip.component-DMB36gvC.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/chip/chip.js' has been deprecated.\nUse either '@sbb-esta/elements/chip.js' or '@sbb-esta/elements/chip.pure.js' instead.");
+//#endregion
+export { e as SbbChipElement };

package/chip-group.component-CbruCoHR.js

@@ -0,0 +1,290 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r, isServer as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o } from "./core/base-elements.js";
+import { forceType as s } from "./core/decorators.js";
+import { SbbDisabledMixin as c, SbbFormAssociatedMixin as l, SbbNegativeMixin as u, SbbRequiredMixin as d } from "./core/mixins.js";
+import { boxSizingStyles as f } from "./core/styles.js";
+import { SbbLanguageController as p, SbbPropertyWatcherController as m } from "./core/controllers.js";
+import { i18nChipGroupInputDescription as h, i18nSelectionRequired as g } from "./core/i18n.js";
+import { getNextElementIndex as _, isArrowKeyPressed as v } from "./core/a11y.js";
+import { isLean as y } from "./core/dom/lean-context.js";
+import { SbbChipElement as b } from "./chip/chip/chip.component.js";
+//#region src/elements/chip/chip-group/chip-group.scss?lit&inline
+var x = n`:host{gap:var(--sbb-chip-group-gap);width:100%;margin-block:var(--sbb-chip-group-margin-block);flex-wrap:wrap;align-items:center;display:flex}: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 (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 (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 (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 (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 (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 (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 (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%}`, S = class extends CustomEvent {
+	get detail() {
+		return this;
+	}
+	constructor(e) {
+		super("chipinputtokenend", {
+			cancelable: !0,
+			bubbles: !0,
+			composed: !0
+		}), this.origin = e.origin, this.value = e.value, this.label = e.label;
+	}
+	setValue(e) {
+		this.value = e;
+	}
+	setLabel(e) {
+		this.label = e;
+	}
+}, C = (() => {
+	let n = d(c(u(l(o)))), C = [], w, T, E = [], D = [], O, k = [], A = [], j, M = [], N = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			w = [a({ type: Array })], T = [a({ attribute: !1 })], O = [a({
+				attribute: "separator-keys",
+				type: Array
+			})], j = [s(), a({
+				attribute: "add-on-blur",
+				type: Boolean
+			})], e(this, null, w, {
+				kind: "setter",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, null, C), e(this, null, T, {
+				kind: "accessor",
+				name: "displayWith",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "displayWith" in e,
+					get: (e) => e.displayWith,
+					set: (e, t) => {
+						e.displayWith = t;
+					}
+				},
+				metadata: t
+			}, E, D), e(this, null, O, {
+				kind: "accessor",
+				name: "separatorKeys",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "separatorKeys" in e,
+					get: (e) => e.separatorKeys,
+					set: (e, t) => {
+						e.separatorKeys = t;
+					}
+				},
+				metadata: t
+			}, k, A), e(this, null, j, {
+				kind: "accessor",
+				name: "addOnBlur",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "addOnBlur" in e,
+					get: (e) => e.addOnBlur,
+					set: (e, t) => {
+						e.addOnBlur = t;
+					}
+				},
+				metadata: t
+			}, M, N), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-chip-group";
+		}
+		static {
+			this.role = "listbox";
+		}
+		static {
+			this.styles = [f, x];
+		}
+		static {
+			this.events = {
+				input: "input",
+				change: "change",
+				chipinputtokenend: "chipinputtokenend"
+			};
+		}
+		set value(e) {
+			e ??= [];
+			let t = this.value, n = [...t];
+			for (let t of e) n.includes(t) && n.splice(n.indexOf(t), 1);
+			n.forEach((e) => this._chipElements().find((t) => t.value === e)?.remove());
+			let r = [...e];
+			for (let e of t) r.includes(e) && r.splice(r.indexOf(e), 1);
+			r.forEach((e) => this._createChipElement(e));
+		}
+		get value() {
+			return this._chipElements().map((e) => e.value);
+		}
+		#e;
+		get displayWith() {
+			return this.#e;
+		}
+		set displayWith(e) {
+			this.#e = e;
+		}
+		#t;
+		get separatorKeys() {
+			return this.#t;
+		}
+		set separatorKeys(e) {
+			this.#t = e;
+		}
+		#n;
+		get addOnBlur() {
+			return this.#n;
+		}
+		set addOnBlur(e) {
+			this.#n = e;
+		}
+		constructor() {
+			super(), this.#e = (t(this, C), t(this, E, null)), this.#t = (t(this, D), t(this, k, ["Enter"])), this.#n = (t(this, A), t(this, M, !1)), this._inputAttributeObserver = (t(this, N), i ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new p(this), this.addEventListener?.(b.events.requestdelete, (e) => this._deleteChip(e.target)), this.addEventListener?.("keydown", (e) => this._onChipKeyDown(e)), this.addController(new m(this, () => this.closest("sbb-form-field"), {
+				size: (e) => this._updateSize(e.size),
+				label: (e) => this._updateLabelState(e),
+				hiddenLabel: (e) => this._updateLabelState(e)
+			}));
+		}
+		_updateLabelState(e) {
+			this.toggleState("without-label", !e.label || e.hiddenLabel);
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._setupComponent();
+		}
+		willUpdate(e) {
+			super.willUpdate(e), (e.has("disabled") || e.has("formDisabled") || e.has("negative")) && this._proxyStateToChips();
+		}
+		formResetCallback() {
+			this.value = null;
+		}
+		formStateRestoreCallback(e, t) {
+			if (!e) {
+				this.value = null;
+				return;
+			}
+			this._readFormData(e).then((e) => this.value = e);
+		}
+		async _readFormData(e) {
+			return Promise.all(e.getAll(this.name).map(async (e) => e instanceof Blob ? JSON.parse(await e.text()) : e));
+		}
+		shouldValidate(e) {
+			return super.shouldValidate(e) || e === "required" || e === "value";
+		}
+		validate() {
+			super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", g[this._language.current]) : this.removeValidityFlag("valueMissing");
+		}
+		_chipElements() {
+			return Array.from(this.querySelectorAll?.("sbb-chip") ?? []);
+		}
+		_enabledChipElements() {
+			return Array.from(this.querySelectorAll?.("sbb-chip:not([disabled])") ?? []);
+		}
+		_setupComponent() {
+			let e = this.querySelector("input");
+			e && e !== this._inputElement && (this._inputAbortController?.abort(), this._inputAttributeObserver?.disconnect(), this._inputElement = e, this._inputAbortController = new AbortController(), this._inputElement.addEventListener("keydown", (e) => this._onInputKeyDown(e), { signal: this._inputAbortController.signal }), this._inputElement.addEventListener("blur", () => this._onInputBlur(), {
+				signal: this._inputAbortController.signal,
+				capture: !0
+			}), this._inputElement.addEventListener("inputAutocomplete", (e) => {
+				this._createChipFromInput("autocomplete", e.detail?.option.value);
+			}, { signal: this._inputAbortController.signal }), this._inputAttributeObserver?.observe(this._inputElement, {
+				attributes: !0,
+				attributeFilter: ["readonly", "disabled"]
+			})), (!this._previousSize || !this.closest("sbb-form-field")) && this._updateSize(y() ? "s" : "m"), this.toggleState("empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
+		}
+		_onChipKeyDown(e) {
+			let t = e.target;
+			if (t.localName === "sbb-chip") {
+				if (v(e)) {
+					let n = this._enabledChipElements();
+					n[_(e, n.indexOf(t), n.length)].focus();
+					return;
+				}
+				switch (e.key) {
+					case "Backspace":
+					case "Delete":
+						!t.readOnly && !t.disabled && (e.preventDefault(), this._deleteChip(t));
+						break;
+				}
+			}
+		}
+		_onInputKeyDown(e) {
+			switch (e.key) {
+				case "Backspace":
+				case "ArrowLeft":
+					this._inputElement.value || this._focusChip();
+					break;
+				case "Enter":
+					e.preventDefault();
+					break;
+			}
+			this.separatorKeys.includes(e.key) && (e.preventDefault(), this._createChipFromInput("input"));
+		}
+		_onInputBlur() {
+			this.addOnBlur && this._createChipFromInput("input");
+		}
+		_createChipFromInput(e = "input", t) {
+			let n = t ?? this._inputElement.value.trim();
+			if (!n) return;
+			let r = new S({
+				origin: e,
+				value: n,
+				label: (t ? this.displayWith?.(t) : null) ?? void 0
+			});
+			this.dispatchEvent(r) && (this._createChipElement(r.value, r.label), this._inputElement.value = "", this._emitInputEvents());
+		}
+		_deleteChip(e) {
+			let t = this._enabledChipElements();
+			e.remove(), this._emitInputEvents(), this._focusChip(t.indexOf(e));
+		}
+		_focusChip(e) {
+			let t = this._enabledChipElements();
+			if (e !== void 0 && t[e]) {
+				t[e].focus();
+				return;
+			}
+			if (t.length > 0) {
+				t[t.length - 1].focus();
+				return;
+			}
+			this._inputElement?.focus();
+		}
+		_emitInputEvents() {
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+		}
+		_createChipElement(e, t) {
+			if (i) return;
+			let n = document.createElement("sbb-chip");
+			n.value = e, n.innerText = t ?? (e ? this.displayWith?.(e) : null) ?? "", this.insertBefore(n, this._inputElement ?? this.querySelector("input"));
+		}
+		_reactToInputChanges() {
+			this.disabled = this._inputElement?.disabled ?? !1, this._proxyStateToChips();
+		}
+		_proxyStateToChips() {
+			this._chipElements().forEach((e) => {
+				e.disabled = this.disabled || this.formDisabled, e.readOnly = this._inputElement?.hasAttribute("readonly") ?? !1, e.negative = this.negative;
+			});
+		}
+		_updateSize(e) {
+			this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+		}
+		_updateInputDescription() {
+			this._inputElement && this._inputElement.setAttribute("aria-description", `${h[this._language.current]} ${this.value.length}`);
+		}
+		render() {
+			return r`<slot @slotchange=${this._setupComponent}></slot>`;
+		}
+	};
+})();
+//#endregion
+export { S as n, C as t };

package/chip-label/chip-label.component.js

@@ -1,55 +1,2 @@
-var k = (e) => {
-  throw TypeError(e);
-};
-var y = (e, s, l) => s.has(e) || k("Cannot " + l);
-var p = (e, s, l) => (y(e, s, "read from private field"), l ? l.call(e) : s.get(e)), d = (e, s, l) => s.has(e) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, l), h = (e, s, l, t) => (y(e, s, "write to private field"), t ? t.call(e, l) : s.set(e, l), l);
-import { __esDecorate as g, __runInitializers as c } from "tslib";
-import { css as S, LitElement as E, html as I } from "lit";
-import { customElement as j, property as w } from "lit/decorators.js";
-import { boxSizingStyles as D } from "../core/styles.js";
-const C = S`:host{display:inline-block}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-color-granite);--sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-chip-label-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-chip-label-font-size: var(--sbb-text-font-size-s)}.sbb-chip-label{line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);font-size:var(--sbb-chip-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);overflow:hidden}@media(forced-colors:active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
-let B = (() => {
-  var o, b, i;
-  let e = [j("sbb-chip-label")], s, l = [], t, v = E, u, f = [], m = [], x, _ = [], z = [];
-  return i = class extends v {
-    constructor() {
-      super(...arguments);
-      d(this, o, c(this, f, "xxs"));
-      d(this, b, (c(this, m), c(this, _, "milk")));
-      c(this, z);
-    }
-    /** Size of the chip. */
-    get size() {
-      return p(this, o);
-    }
-    set size(r) {
-      h(this, o, r);
-    }
-    /** Color of the chip. */
-    get color() {
-      return p(this, b);
-    }
-    set color(r) {
-      h(this, b, r);
-    }
-    render() {
-      return I`
-      <span class="sbb-chip-label">
-        <span class="sbb-chip__text-wrapper">
-          <slot></slot>
-        </span>
-      </span>
-    `;
-    }
-  }, o = new WeakMap(), b = new WeakMap(), t = i, (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    u = [w({ reflect: !0 })], x = [w({ reflect: !0 })], g(i, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, n) => {
-      a.size = n;
-    } }, metadata: r }, f, m), g(i, null, x, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, n) => {
-      a.color = n;
-    } }, metadata: r }, _, z), g(null, s = { value: t }, e, { kind: "class", name: t.name, metadata: r }, null, l), t = s.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), i.styles = [D, C], c(t, l), t;
-})();
-export {
-  B as SbbChipLabelElement
-};
+import { t as e } from "../chip-label.component-D9AZdMSJ.js";
+export { e as SbbChipLabelElement };