@sbb-esta/lyne-elements 4.10.0 → 5.0.0-next

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

@@ -1,19 +1,16 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, nothing as r } from "lit";
 import { property as i } from "lit/decorators.js";
-import { SbbElement as a } from "../core/base-elements.js";
-import { SbbPanelMixin as o, SbbUpdateSchedulerMixin as s, panelCommonStyle as c } from "../core/mixins.js";
-import { boxSizingStyles as l } from "../core/styles.js";
-import "../screen-reader-only.js";
-import { SbbCheckboxCommonElementMixin as u, checkboxCommonStyle as d } from "../checkbox/common/checkbox-common.js";
-import "../visual-checkbox.js";
+import { SbbElement as a, SbbPanelMixin as o, SbbScreenReaderOnlyElement as s, SbbUpdateSchedulerMixin as c, boxSizingStyles as l, panelCommonStyle as u } from "../core.js";
+import { SbbCheckboxCommonElementMixin as d, checkboxCommonStyle as f } from "../checkbox/common/checkbox-common.js";
+import { SbbVisualCheckboxElement as p } from "../visual-checkbox.pure.js";
 //#region src/elements/checkbox-panel/checkbox-panel.component.ts
-var f = (() => {
-	let f = o(u(s(a))), p, m = [], h = [];
-	return class extends f {
+var m = (() => {
+	let m = o(d(c(a))), h, g = [], _ = [];
+	return class extends m {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-			p = [i()], e(this, null, p, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+			h = [i()], e(this, null, h, {
 				kind: "accessor",
 				name: "value",
 				static: !1,
@@ -26,7 +23,7 @@ var f = (() => {
 					}
 				},
 				metadata: t
-			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -36,14 +33,17 @@ var f = (() => {
 		static {
 			this.elementName = "sbb-checkbox-panel";
 		}
+		static {
+			this.elementDependencies = [s, p];
+		}
 		static {
 			this.styles = [
 				l,
-				d,
-				c
+				f,
+				u
 			];
 		}
-		#e = t(this, m, null);
+		#e = t(this, g, null);
 		get value() {
 			return this.#e;
 		}
@@ -83,9 +83,9 @@ var f = (() => {
     `;
 		}
 		constructor() {
-			super(...arguments), t(this, h);
+			super(...arguments), t(this, _);
 		}
 	};
 })();
 //#endregion
-export { f as SbbCheckboxPanelElement };
+export { m as SbbCheckboxPanelElement };

package/checkbox.component-vjqZh2aC.js

@@ -0,0 +1,125 @@
+import { n as e, t } from "./checkbox-common-Bo4u1RXX.js";
+import { __esDecorate as n, __runInitializers as r } from "tslib";
+import { html as i, unsafeCSS as a } from "lit";
+import { property as o } from "lit/decorators.js";
+import { SbbElement as s, boxSizingStyles as c, getOverride as l, isLean as u } from "./core.js";
+import { SbbIconNameMixin as d } from "./icon.pure.js";
+import { SbbVisualCheckboxElement as f } from "./visual-checkbox.pure.js";
+//#region src/elements/checkbox/checkbox.scss?inline
+var p = ":host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-checkbox__label{display:none}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}", m = (() => {
+	let m = d(t(s)), h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [];
+	return class extends m {
+		static {
+			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+			h = [o()], v = [o({ reflect: !0 }), l((e, t) => e.group?.size ?? t)], x = [o({
+				attribute: "icon-placement",
+				reflect: !0
+			})], n(this, null, h, {
+				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: e
+			}, g, _), n(this, null, v, {
+				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: e
+			}, y, b), n(this, null, x, {
+				kind: "accessor",
+				name: "iconPlacement",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "iconPlacement" in e,
+					get: (e) => e.iconPlacement,
+					set: (e, t) => {
+						e.iconPlacement = t;
+					}
+				},
+				metadata: e
+			}, S, C), e && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: e
+			});
+		}
+		static {
+			this.elementName = "sbb-checkbox";
+		}
+		static {
+			this.elementDependencies = [f];
+		}
+		static {
+			this.styles = [
+				c,
+				e,
+				a(p)
+			];
+		}
+		#e = r(this, g, null);
+		get value() {
+			return this.#e;
+		}
+		set value(e) {
+			this.#e = e;
+		}
+		#t = (r(this, _), r(this, y, u() ? "xs" : "m"));
+		get size() {
+			return this.#t;
+		}
+		set size(e) {
+			this.#t = e;
+		}
+		#n = (r(this, b), r(this, S, "end"));
+		get iconPlacement() {
+			return this.#n;
+		}
+		set iconPlacement(e) {
+			this.#n = e;
+		}
+		render() {
+			return i`
+      <span class="sbb-checkbox-wrapper">
+        <span class="sbb-checkbox">
+          <span class="sbb-checkbox__inner">
+            <span class="sbb-checkbox__aligner">
+              <sbb-visual-checkbox
+                ?checked=${this.checked}
+                ?indeterminate=${this.indeterminate}
+                ?disabled=${this.disabled || this.formDisabled}
+                .size=${this.size}
+              ></sbb-visual-checkbox>
+            </span>
+            <span class="sbb-checkbox__label">
+              <slot></slot>
+              ${this.renderIconSlot()}
+            </span>
+          </span>
+        </span>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), r(this, C);
+		}
+	};
+})();
+//#endregion
+export { m as t };

package/checkbox.js

@@ -1,10 +1,7 @@
-import { SbbCheckboxGroupElement as e } from "./checkbox-group/checkbox-group.component.js";
-import "./checkbox-group.pure.js";
-import { SbbCheckboxPanelElement as t } from "./checkbox-panel/checkbox-panel.component.js";
-import "./checkbox-panel.pure.js";
-import { t as n } from "./checkbox.component-ROzxEnPh.js";
-import { n as r, t as i } from "./checkbox-common-DdieysTG.js";
+import { t as e } from "./checkbox.component-vjqZh2aC.js";
+import { n as t, t as n } from "./checkbox-common-Bo4u1RXX.js";
 import "./checkbox.pure.js";
-n.define(), e.define(), t.define();
+//#region src/elements/checkbox.ts
+e.define();
 //#endregion
-export { i as SbbCheckboxCommonElementMixin, n as SbbCheckboxElement, e as SbbCheckboxGroupElement, t as SbbCheckboxPanelElement, r as checkboxCommonStyle };
+export { n as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement, t as checkboxCommonStyle };

package/checkbox.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./checkbox.component-ROzxEnPh.js";
-import { n as t, t as n } from "./checkbox-common-DdieysTG.js";
+import { t as e } from "./checkbox.component-vjqZh2aC.js";
+import { n as t, t as n } from "./checkbox-common-Bo4u1RXX.js";
 export { n as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement, t as checkboxCommonStyle };

package/chip/chip/chip.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chip.component-Cu5guQs8.js";
+import { t as e } from "../../chip.component-34R1PNPV.js";
 export { e as SbbChipElement };

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

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chip-group.component-DJzUToem.js";
+import { n as e, t } from "../../chip-group.component-DPzfaV_H.js";
 export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/chip-group.component-DPzfaV_H.js

@@ -0,0 +1,283 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, isServer as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbDisabledMixin as o, SbbElement as s, SbbFormAssociatedMixin as c, SbbLanguageController as l, SbbNegativeMixin as u, SbbPropertyWatcherController as d, SbbRequiredMixin as f, boxSizingStyles as p, forceType as m, getNextElementIndex as h, i18nChipGroupInputDescription as g, i18nSelectionRequired as _, isArrowKeyPressed as v, isLean as y } from "./core.js";
+import { SbbChipElement as b } from "./chip/chip/chip.component.js";
+//#region src/elements/chip/chip-group/chip-group.scss?inline
+var x = ":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%}", 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 C = f(o(u(c(s)))), w = [], T, E, D = [], O = [], k, A = [], j = [], M, N = [], P = [];
+	return class extends C {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
+			T = [a({ type: Array })], E = [a({ attribute: !1 })], k = [a({
+				attribute: "separator-keys",
+				type: Array
+			})], M = [m(), a({
+				attribute: "add-on-blur",
+				type: Boolean
+			})], e(this, null, T, {
+				kind: "setter",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, null, w), e(this, null, E, {
+				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
+			}, D, O), e(this, null, k, {
+				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
+			}, A, j), e(this, null, M, {
+				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
+			}, N, P), 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 = [p, i(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, w), t(this, D, null)), this.#t = (t(this, O), t(this, A, ["Enter"])), this.#n = (t(this, j), t(this, N, !1)), this._inputAttributeObserver = (t(this, P), r ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new l(this), this.addEventListener?.(b.events.requestdelete, (e) => this._deleteChip(e.target)), this.addEventListener?.("keydown", (e) => this._onChipKeyDown(e)), this.addController(new d(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", _[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[h(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 (r) 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", `${g[this._language.current]} ${this.value.length}`);
+		}
+		render() {
+			return n`<slot @slotchange=${this._setupComponent}></slot>`;
+		}
+	};
+})();
+//#endregion
+export { S as n, C as t };

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

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

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

@@ -0,0 +1,79 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a, boxSizingStyles as o } from "./core.js";
+//#region src/elements/chip-label/chip-label.scss?inline
+var 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}", c = (() => {
+	let c = a, l, u = [], d = [], f, p = [], m = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [i({ reflect: !0 })], f = [i({ reflect: !0 })], e(this, null, l, {
+				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
+			}, u, d), e(this, null, f, {
+				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
+			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-chip-label";
+		}
+		static {
+			this.styles = [o, r(s)];
+		}
+		#e = t(this, u, "xxs");
+		get size() {
+			return this.#e;
+		}
+		set size(e) {
+			this.#e = e;
+		}
+		#t = (t(this, d), t(this, p, "milk"));
+		get color() {
+			return this.#t;
+		}
+		set color(e) {
+			this.#t = e;
+		}
+		render() {
+			return n`
+      <span class="sbb-chip-label">
+        <span class="sbb-chip__text-wrapper">
+          <slot></slot>
+        </span>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, m);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/chip-label.js

@@ -1,4 +1,4 @@
-import { t as e } from "./chip-label.component-B76PdOCg.js";
+import { t as e } from "./chip-label.component-CUJTTb1-.js";
 import "./chip-label.pure.js";
 //#region src/elements/chip-label.ts
 e.define();

package/chip-label.pure.js

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