@sbb-esta/lyne-elements-dev 4.7.0-dev.1773648103 → 4.7.0-dev.1773648656

package/chip-group.component-D2AZqL3m.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,56 +1,2 @@
-var u = (e) => {
-  throw TypeError(e);
-};
-var m = (e, s, i) => s.has(e) || u("Cannot " + i);
-var p = (e, s, i) => (m(e, s, "read from private field"), i ? i.call(e) : s.get(e)), d = (e, s, i) => s.has(e) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, i), h = (e, s, i, a) => (m(e, s, "write to private field"), a ? a.call(e, i) : s.set(e, i), i);
-import { __esDecorate as x, __runInitializers as c } from "tslib";
-import { css as _, html as k } from "lit";
-import { property as z } from "lit/decorators.js";
-import { SbbElement as y } from "../core/base-elements.js";
-import { boxSizingStyles as w } from "../core/styles.js";
-const 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 q = (() => {
-  var o, b, t;
-  let e = y, s, i = [], a = [], g, v = [], f = [];
-  return t = class extends e {
-    constructor() {
-      super(...arguments);
-      d(this, o, c(this, i, "xxs"));
-      d(this, b, (c(this, a), c(this, v, "milk")));
-      c(this, f);
-    }
-    /** Size of the chip. */
-    get size() {
-      return p(this, o);
-    }
-    set size(l) {
-      h(this, o, l);
-    }
-    /** Color of the chip. */
-    get color() {
-      return p(this, b);
-    }
-    set color(l) {
-      h(this, b, l);
-    }
-    render() {
-      return k`
-      <span class="sbb-chip-label">
-        <span class="sbb-chip__text-wrapper">
-          <slot></slot>
-        </span>
-      </span>
-    `;
-    }
-  }, o = new WeakMap(), b = new WeakMap(), (() => {
-    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
-    s = [z({ reflect: !0 })], g = [z({ reflect: !0 })], x(t, null, s, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (r) => "size" in r, get: (r) => r.size, set: (r, n) => {
-      r.size = n;
-    } }, metadata: l }, i, a), x(t, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (r) => "color" in r, get: (r) => r.color, set: (r, n) => {
-      r.color = n;
-    } }, metadata: l }, v, f), l && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
-  })(), t.elementName = "sbb-chip-label", t.styles = [w, S], t;
-})();
-export {
-  q as SbbChipLabelElement
-};
+import { t as e } from "../chip-label.component-DBN4jfW7.js";
+export { e as SbbChipLabelElement };

package/chip-label.component-DBN4jfW7.js

@@ -0,0 +1,80 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { boxSizingStyles as o } from "./core/styles.js";
+//#region src/elements/chip-label/chip-label.scss?lit&inline
+var s = n`: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(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,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(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,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{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);line-height:2;font-size:var(--sbb-chip-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);justify-content:center;align-items:center;display:inline-flex;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{white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}`, c = (() => {
+	let n = a, c, l = [], u = [], d, f = [], p = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			c = [i({ reflect: !0 })], d = [i({ reflect: !0 })], e(this, null, c, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, l, u), e(this, null, d, {
+				kind: "accessor",
+				name: "color",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "color" in e,
+					get: (e) => e.color,
+					set: (e, t) => {
+						e.color = t;
+					}
+				},
+				metadata: t
+			}, f, p), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-chip-label";
+		}
+		static {
+			this.styles = [o, s];
+		}
+		#e = t(this, l, "xxs");
+		get size() {
+			return this.#e;
+		}
+		set size(e) {
+			this.#e = e;
+		}
+		#t = (t(this, u), t(this, f, "milk"));
+		get color() {
+			return this.#t;
+		}
+		set color(e) {
+			this.#t = e;
+		}
+		render() {
+			return r`
+      <span class="sbb-chip-label">
+        <span class="sbb-chip__text-wrapper">
+          <slot></slot>
+        </span>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, p);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/chip-label.js

@@ -1,5 +1,6 @@
-import { SbbChipLabelElement as e } from "./chip-label/chip-label.component.js";
+import { t as e } from "./chip-label.component-DBN4jfW7.js";
+import "./chip-label.pure.js";
+//#region src/elements/chip-label.ts
 e.define();
-export {
-  e as SbbChipLabelElement
-};
+//#endregion
+export { e as SbbChipLabelElement };

package/chip-label.pure.js

@@ -1,4 +1,2 @@
-import { SbbChipLabelElement as l } from "./chip-label/chip-label.component.js";
-export {
-  l as SbbChipLabelElement
-};
+import { t as e } from "./chip-label.component-DBN4jfW7.js";
+export { e as SbbChipLabelElement };

package/chip.component-BNOs8T6O.js

@@ -0,0 +1,94 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { SbbDisabledMixin as o, SbbNegativeMixin as s, SbbReadonlyMixin as c } from "./core/mixins.js";
+import { boxSizingStyles as l } from "./core/styles.js";
+import { SbbLanguageController as u } from "./core/controllers.js";
+import { i18nChipDelete as d } from "./core/i18n.js";
+import "./screen-reader-only.js";
+import "./button/mini-button.js";
+//#region src/elements/chip/chip/chip.scss?lit&inline
+var f = n`: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));background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);height:var(--sbb-chip-height);align-items:stretch;display:inline-flex}: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-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);padding-inline:var(--sbb-chip-label-padding-inline);border-inline-end:none;outline:none;align-items:center;display:flex;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{white-space:nowrap;text-overflow:ellipsis;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);display:inline-block;overflow:hidden}.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)}}`, p = (() => {
+	let n = s(o(c(a))), p, m = [], h = [];
+	return class extends n {
+		constructor() {
+			super(...arguments), this.#e = t(this, m, null), this._language = (t(this, h), new u(this));
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			p = [i()], e(this, null, p, {
+				kind: "accessor",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					get: (e) => e.value,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-chip";
+		}
+		static {
+			this.role = "option";
+		}
+		static {
+			this.styles = [l, f];
+		}
+		static {
+			this.events = { requestdelete: "requestdelete" };
+		}
+		#e;
+		get value() {
+			return this.#e;
+		}
+		set value(e) {
+			this.#e = e;
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
+		}
+		_deleteButton() {
+			return this.shadowRoot.querySelector("sbb-mini-button");
+		}
+		_handleDeleteButtonClick() {
+			this.dispatchEvent(new Event("requestdelete", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+		render() {
+			return r`
+      <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>
+    `;
+		}
+	};
+})();
+//#endregion
+export { p as t };

package/chip.js

@@ -1,10 +1,6 @@
-import { SbbChipGroupElement as e } from "./chip/chip-group/chip-group.component.js";
-import { SbbChipInputTokenEndEvent as i } from "./chip/chip-group/chip-group.component.js";
-import { SbbChipElement as o } from "./chip/chip/chip.component.js";
-o.define();
-e.define();
-export {
-  o as SbbChipElement,
-  e as SbbChipGroupElement,
-  i as SbbChipInputTokenEndEvent
-};
+import { n as e, t } from "./chip-group.component-D2AZqL3m.js";
+import { t as n } from "./chip.component-BNOs8T6O.js";
+import "./chip.pure.js";
+n.define(), t.define();
+//#endregion
+export { n as SbbChipElement, t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/chip.pure.js

@@ -1,7 +1,3 @@
-import { SbbChipGroupElement as b, SbbChipInputTokenEndEvent as n } from "./chip/chip-group/chip-group.component.js";
-import { SbbChipElement as t } from "./chip/chip/chip.component.js";
-export {
-  t as SbbChipElement,
-  b as SbbChipGroupElement,
-  n as SbbChipInputTokenEndEvent
-};
+import { n as e, t } from "./chip-group.component-D2AZqL3m.js";
+import { t as n } from "./chip.component-BNOs8T6O.js";
+export { n as SbbChipElement, t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };