@sbb-esta/lyne-elements 5.0.0-next → 5.0.0-next.2

package/{carousel.component-a189Wn9e.js → carousel.component-9oMMOyWo.js}

@@ -1,17 +1,17 @@
 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, SbbLanguageController as o, SbbScreenReaderOnlyElement as s, boxSizingStyles as c, forceType as l, i18nCarouselArrowsNavigationHint as u, i18nNextSlide as d, i18nPreviousSlide as f, i18nSlide as p } from "./core.js";
+import { SbbElement as a, SbbLanguageController as o, forceType as s, i18nCarouselArrowsNavigationHint as c, i18nNextSlide as l, i18nPreviousSlide as u, i18nSlide as d, screenReaderOnlyStyles as f } from "./core.js";
 //#region src/elements/carousel/carousel/carousel.scss?inline
-var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-carousel-box-shadow);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-carousel-paginator-padding)}", h = (() => {
-	let h = a, g, _ = [], v = [];
-	return class extends h {
+var p = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-carousel-box-shadow);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-carousel-paginator-padding)}", m = (() => {
+	let m = a, h, g = [], _ = [];
+	return class extends m {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-			g = [l(), i({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+			h = [s(), i({
 				reflect: !0,
 				type: Boolean
-			})], e(this, null, g, {
+			})], e(this, null, h, {
 				kind: "accessor",
 				name: "shadow",
 				static: !1,
@@ -24,7 +24,7 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 					}
 				},
 				metadata: t
-			}, _, v), t && Object.defineProperty(this, Symbol.metadata, {
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -35,10 +35,7 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 			this.elementName = "sbb-carousel";
 		}
 		static {
-			this.elementDependencies = [s];
-		}
-		static {
-			this.styles = [c, r(m)];
+			this.styles = [f, r(p)];
 		}
 		#e;
 		get shadow() {
@@ -48,7 +45,7 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 			this.#e = e;
 		}
 		constructor() {
-			super(), this.#e = t(this, _, !1), this._paginator = (t(this, v), null), this._abortController = null, this._language = new o(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
+			super(), this.#e = t(this, g, !1), this._paginator = (t(this, _), null), this._abortController = null, this._language = new o(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
 				this._requestedPageIndexByPaginator !== -1 && this._requestedPageIndexByPaginator !== e.detail.index || (this._paginator && e.detail.index !== this._paginator.pageIndex && (this._paginator.pageIndex = e.detail.index), this._requestedPageIndexByPaginator = -1);
 			});
 		}
@@ -65,7 +62,7 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 			let e = Array.from(this.children).find((e) => e.localName === "sbb-compact-paginator"), t = Array.from(this.children).find((e) => e.localName === "sbb-carousel-list");
 			if (!e || !t) return;
 			let n = t.querySelectorAll("sbb-carousel-item");
-			n && n.length > 0 && (e.length = n.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= d[this._language.current], e.accessibilityPreviousPageLabel ||= f[this._language.current], e.accessibilityPageLabel ||= p[this._language.current], e !== this._paginator && (this._paginator = e, this._setupPaginator());
+			n && n.length > 0 && (e.length = n.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= l[this._language.current], e.accessibilityPreviousPageLabel ||= u[this._language.current], e.accessibilityPageLabel ||= d[this._language.current], e !== this._paginator && (this._paginator = e, this._setupPaginator());
 		}
 		_setupPaginator() {
 			this._abortController?.abort(), this._paginator && (this._abortController = new AbortController(), this._paginator.addEventListener("click", () => this._scrollAtPaginatorChange(), { signal: this._abortController.signal }));
@@ -82,8 +79,8 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 		render() {
 			return n`
       <div class="sbb-carousel">
-        <sbb-screen-reader-only id="sbb-carousel-arrows-navigation-hint"
-          >${u[this._language.current]}</sbb-screen-reader-only
+        <span class="sbb-screen-reader-only" id="sbb-carousel-arrows-navigation-hint"
+          >${c[this._language.current]}</span
         >
         <slot @slotchange=${this._handleSlotchange}></slot>
       </div>
@@ -92,4 +89,4 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 	};
 })();
 //#endregion
-export { h as t };
+export { m as t };

package/carousel.js

@@ -1,6 +1,6 @@
-import { t as e } from "./carousel-item.component-mHyHTxEd.js";
-import { t } from "./carousel-list.component-ByZDFoLe.js";
-import { t as n } from "./carousel.component-a189Wn9e.js";
+import { t as e } from "./carousel-item.component-DyZAdXL_.js";
+import { t } from "./carousel-list.component-Ai0uJWB7.js";
+import { t as n } from "./carousel.component-9oMMOyWo.js";
 import "./carousel.pure.js";
 n.define(), e.define(), t.define();
 //#endregion

package/carousel.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./carousel-item.component-mHyHTxEd.js";
-import { t } from "./carousel-list.component-ByZDFoLe.js";
-import { t as n } from "./carousel.component-a189Wn9e.js";
+import { t as e } from "./carousel-item.component-DyZAdXL_.js";
+import { t } from "./carousel-list.component-Ai0uJWB7.js";
+import { t as n } from "./carousel.component-9oMMOyWo.js";
 export { n as SbbCarouselElement, e as SbbCarouselItemElement, t as SbbCarouselListElement };

package/checkbox/checkbox.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../checkbox.component-vjqZh2aC.js";
+import { t as e } from "../checkbox.component-ChQmCxal.js";
 export { e as SbbCheckboxElement };

package/checkbox/common/checkbox-common.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../checkbox-common-Bo4u1RXX.js";
-export { t as SbbCheckboxCommonElementMixin, e as checkboxCommonStyle };
+import { t as e } from "../../checkbox-common-BSzAnug3.js";
+export { e as SbbCheckboxCommonElementMixin };

package/checkbox-common-BSzAnug3.js

@@ -0,0 +1,69 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbFormAssociatedCheckboxMixin as i, forceType as a } from "./core.js";
+//#region src/elements/checkbox/common/checkbox-common.scss?inline
+var o = "@charset \"UTF-8\";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb-text-font-size-xs);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs)}:host([size=s]){--sbb-checkbox-font-size: var(--sbb-text-font-size-s);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s)}:host([size=m]){--sbb-checkbox-font-size: var(--sbb-text-font-size-m);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m)}:host(:disabled){--sbb-checkbox-cursor: var(--sbb-cursor-default);--sbb-checkbox-label-color: var(--sbb-color-granite);--sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:\"​\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-size:var(--sbb-checkbox-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}", s = (s) => (() => {
+	let c = i(s), l, u = [], d = [];
+	return class extends c {
+		constructor() {
+			super(...arguments), this.#e = t(this, u, !1), this._group = (t(this, d), null);
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [a(), r({ type: Boolean })], e(this, null, l, {
+				kind: "accessor",
+				name: "indeterminate",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "indeterminate" in e,
+					get: (e) => e.indeterminate,
+					set: (e, t) => {
+						e.indeterminate = t;
+					}
+				},
+				metadata: t
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.styles = [n(o)];
+		}
+		#e;
+		get indeterminate() {
+			return this.#e;
+		}
+		set indeterminate(e) {
+			this.#e = e;
+		}
+		get group() {
+			return this._group;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._group = this.closest("sbb-checkbox-group"), [
+				"disabled",
+				"required",
+				"size"
+			].forEach((e) => this.requestUpdate(e));
+		}
+		willUpdate(e) {
+			super.willUpdate(e), (e.has("checked") || e.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
+		}
+		isDisabledExternally() {
+			return this.group?.disabled ?? !1;
+		}
+		isRequiredExternally() {
+			return this.group?.required ?? !1;
+		}
+		withUserInteraction() {
+			this.indeterminate &&= !1;
+		}
+	};
+})();
+//#endregion
+export { s as t };

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

@@ -1,16 +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, 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";
+import { SbbElement as a, SbbPanelMixin as o, SbbUpdateSchedulerMixin as s, screenReaderOnlyStyles as c } from "../core.js";
+import { SbbCheckboxCommonElementMixin as l } from "../checkbox/common/checkbox-common.js";
+import { SbbVisualCheckboxElement as u } from "../visual-checkbox.pure.js";
 //#region src/elements/checkbox-panel/checkbox-panel.component.ts
-var m = (() => {
-	let m = o(d(c(a))), h, g = [], _ = [];
-	return class extends m {
+var d = (() => {
+	let d = o(l(s(a))), f, p = [], m = [];
+	return class extends d {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-			h = [i()], e(this, null, h, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [i()], e(this, null, f, {
 				kind: "accessor",
 				name: "value",
 				static: !1,
@@ -23,7 +23,7 @@ var m = (() => {
 					}
 				},
 				metadata: t
-			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
+			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -34,16 +34,12 @@ var m = (() => {
 			this.elementName = "sbb-checkbox-panel";
 		}
 		static {
-			this.elementDependencies = [s, p];
+			this.elementDependencies = [u];
 		}
 		static {
-			this.styles = [
-				l,
-				f,
-				u
-			];
+			this.styles = [c];
 		}
-		#e = t(this, g, null);
+		#e = t(this, p, null);
 		get value() {
 			return this.#e;
 		}
@@ -76,16 +72,16 @@ var m = (() => {
               </span>
             </span>
             <slot name="subtext"></slot>
-            ${this.expansionState ? n`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : r}
+            ${this.expansionState ? n`<span class="sbb-screen-reader-only">${this.expansionState}</span>` : r}
           </span>
         </span>
       </span>
     `;
 		}
 		constructor() {
-			super(...arguments), t(this, _);
+			super(...arguments), t(this, m);
 		}
 	};
 })();
 //#endregion
-export { m as SbbCheckboxPanelElement };
+export { d as SbbCheckboxPanelElement };

package/{checkbox.component-vjqZh2aC.js → checkbox.component-ChQmCxal.js}

@@ -1,20 +1,20 @@
-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";
+import { t as e } from "./checkbox-common-BSzAnug3.js";
+import { __esDecorate as t, __runInitializers as n } from "tslib";
+import { html as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o, getOverride as s, isLean as c } from "./core.js";
+import { SbbIconNameMixin as l } from "./icon.pure.js";
+import { SbbVisualCheckboxElement as u } 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 {
+var d = ":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))}", f = (() => {
+	let f = l(e(o)), p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [];
+	return class extends f {
 		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({
+			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			p = [a()], g = [a({ reflect: !0 }), s((e, t) => e.group?.size ?? t)], y = [a({
 				attribute: "icon-placement",
 				reflect: !0
-			})], n(this, null, h, {
+			})], t(this, null, p, {
 				kind: "accessor",
 				name: "value",
 				static: !1,
@@ -27,7 +27,7 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 					}
 				},
 				metadata: e
-			}, g, _), n(this, null, v, {
+			}, m, h), t(this, null, g, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -40,7 +40,7 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 					}
 				},
 				metadata: e
-			}, y, b), n(this, null, x, {
+			}, _, v), t(this, null, y, {
 				kind: "accessor",
 				name: "iconPlacement",
 				static: !1,
@@ -53,7 +53,7 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 					}
 				},
 				metadata: e
-			}, S, C), e && Object.defineProperty(this, Symbol.metadata, {
+			}, b, x), e && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -64,30 +64,26 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 			this.elementName = "sbb-checkbox";
 		}
 		static {
-			this.elementDependencies = [f];
+			this.elementDependencies = [u];
 		}
 		static {
-			this.styles = [
-				c,
-				e,
-				a(p)
-			];
+			this.styles = [i(d)];
 		}
-		#e = r(this, g, null);
+		#e = n(this, m, null);
 		get value() {
 			return this.#e;
 		}
 		set value(e) {
 			this.#e = e;
 		}
-		#t = (r(this, _), r(this, y, u() ? "xs" : "m"));
+		#t = (n(this, h), n(this, _, c() ? "xs" : "m"));
 		get size() {
 			return this.#t;
 		}
 		set size(e) {
 			this.#t = e;
 		}
-		#n = (r(this, b), r(this, S, "end"));
+		#n = (n(this, v), n(this, b, "end"));
 		get iconPlacement() {
 			return this.#n;
 		}
@@ -95,7 +91,7 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 			this.#n = e;
 		}
 		render() {
-			return i`
+			return r`
       <span class="sbb-checkbox-wrapper">
         <span class="sbb-checkbox">
           <span class="sbb-checkbox__inner">
@@ -117,9 +113,9 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
     `;
 		}
 		constructor() {
-			super(...arguments), r(this, C);
+			super(...arguments), n(this, x);
 		}
 	};
 })();
 //#endregion
-export { m as t };
+export { f as t };

package/checkbox.js

@@ -1,7 +1,7 @@
-import { t as e } from "./checkbox.component-vjqZh2aC.js";
-import { n as t, t as n } from "./checkbox-common-Bo4u1RXX.js";
+import { t as e } from "./checkbox.component-ChQmCxal.js";
+import { t } from "./checkbox-common-BSzAnug3.js";
 import "./checkbox.pure.js";
 //#region src/elements/checkbox.ts
 e.define();
 //#endregion
-export { n as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement, t as checkboxCommonStyle };
+export { t as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement };

package/checkbox.pure.js

@@ -1,3 +1,3 @@
-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 };
+import { t as e } from "./checkbox.component-ChQmCxal.js";
+import { t } from "./checkbox-common-BSzAnug3.js";
+export { t as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement };

package/chip/chip/chip.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chip.component-34R1PNPV.js";
+import { t as e } from "../../chip.component-gcvF3pEX.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-DPzfaV_H.js";
+import { n as e, t } from "../../chip-group.component-BMpczIZH.js";
 export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/{chip-group.component-DPzfaV_H.js → chip-group.component-BMpczIZH.js}

@@ -1,10 +1,10 @@
 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";
+import { SbbDisabledMixin as o, SbbElement as s, SbbFormAssociatedMixin as c, SbbLanguageController as l, SbbNegativeMixin as u, SbbPropertyWatcherController as d, SbbRequiredMixin as f, forceType as p, getNextElementIndex as m, i18nChipGroupInputDescription as h, i18nSelectionRequired as g, isArrowKeyPressed as _, isLean as v } from "./core.js";
+import { SbbChipElement as y } 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 {
+var b = ":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);line-height:var(--sbb-typo-line-height-text)}: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%}", x = class extends CustomEvent {
 	get detail() {
 		return this;
 	}
@@ -21,18 +21,18 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 	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 {
+}, S = (() => {
+	let S = f(o(u(c(s)))), C = [], w, T, E = [], D = [], O, k = [], A = [], j, M = [], N = [];
+	return class extends S {
 		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({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(S[Symbol.metadata] ?? null) : void 0;
+			w = [a({ type: Array })], T = [a({ attribute: !1 })], O = [a({
 				attribute: "separator-keys",
 				type: Array
-			})], M = [m(), a({
+			})], j = [p(), a({
 				attribute: "add-on-blur",
 				type: Boolean
-			})], e(this, null, T, {
+			})], e(this, null, w, {
 				kind: "setter",
 				name: "value",
 				static: !1,
@@ -44,7 +44,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 					}
 				},
 				metadata: t
-			}, null, w), e(this, null, E, {
+			}, null, C), e(this, null, T, {
 				kind: "accessor",
 				name: "displayWith",
 				static: !1,
@@ -57,7 +57,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 					}
 				},
 				metadata: t
-			}, D, O), e(this, null, k, {
+			}, E, D), e(this, null, O, {
 				kind: "accessor",
 				name: "separatorKeys",
 				static: !1,
@@ -70,7 +70,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 					}
 				},
 				metadata: t
-			}, A, j), e(this, null, M, {
+			}, k, A), e(this, null, j, {
 				kind: "accessor",
 				name: "addOnBlur",
 				static: !1,
@@ -83,7 +83,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 					}
 				},
 				metadata: t
-			}, N, P), t && Object.defineProperty(this, Symbol.metadata, {
+			}, M, N), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -97,7 +97,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 			this.role = "listbox";
 		}
 		static {
-			this.styles = [p, i(x)];
+			this.styles = [i(b)];
 		}
 		static {
 			this.events = {
@@ -140,7 +140,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 			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"), {
+			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), r ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new l(this), this.addEventListener?.(y.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)
@@ -172,7 +172,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 			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");
+			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") ?? []);
@@ -190,14 +190,14 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 			}, { 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();
+			})), (!this._previousSize || !this.closest("sbb-form-field")) && this._updateSize(v() ? "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)) {
+				if (_(e)) {
 					let n = this._enabledChipElements();
-					n[h(e, n.indexOf(t), n.length)].focus();
+					n[m(e, n.indexOf(t), n.length)].focus();
 					return;
 				}
 				switch (e.key) {
@@ -226,7 +226,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 		_createChipFromInput(e = "input", t) {
 			let n = t ?? this._inputElement.value.trim();
 			if (!n) return;
-			let r = new S({
+			let r = new x({
 				origin: e,
 				value: n,
 				label: (t ? this.displayWith?.(t) : null) ?? void 0
@@ -272,7 +272,7 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 			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}`);
+			this._inputElement && this._inputElement.setAttribute("aria-description", `${h[this._language.current]} ${this.value.length}`);
 		}
 		render() {
 			return n`<slot @slotchange=${this._setupComponent}></slot>`;
@@ -280,4 +280,4 @@ var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-g
 	};
 })();
 //#endregion
-export { S as n, C as t };
+export { x as n, S as t };

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

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