@cupra/ui-kit 2.0.0-canary.167 → 2.0.0-canary.169

package/dist/esm/components/ds-secondary-navigation/ds-secondary-navigation.js

@@ -17,41 +17,16 @@ import "../ds-button/ds-button.js";
 import "../ds-icon-button/ds-icon-button.js";
 import { commonStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
-var p, m = class extends d(s) {
-	static {
-		p = this;
-	}
+var p, m, h = (p = class extends d(s) {
 	constructor(...e) {
 		super(...e), this.dropdownButtonText = "Menu", this.keepDropdownButtonText = !1, this.itemsMode = "auto", this.actionsMode = "auto", this.openItems = !1, this.openCtas = !1, this.hasScrollLeft = !1, this.hasScrollRight = !1, this.resizeObserver = new ResizeObserver(() => {
 			this.handleScroll();
 		}), this.handleScroll = () => {
-			let e = this.itemsContainer?.scrollLeft + this.itemsContainer?.clientWidth;
-			this.hasScrollLeft = this.itemsContainer?.scrollLeft > 0, this.hasScrollRight = e < this.itemsContainer?.scrollWidth;
+			var e, t, n, r;
+			let i = ((e = this.itemsContainer) == null ? void 0 : e.scrollLeft) + ((t = this.itemsContainer) == null ? void 0 : t.clientWidth);
+			this.hasScrollLeft = ((n = this.itemsContainer) == null ? void 0 : n.scrollLeft) > 0, this.hasScrollRight = i < ((r = this.itemsContainer) == null ? void 0 : r.scrollWidth);
 		};
 	}
-	static {
-		this.styles = [f];
-	}
-	static {
-		this.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
-			xs: "medium",
-			s: "medium",
-			m: "medium",
-			l: "medium",
-			xl: "large",
-			xxl: "large"
-		});
-	}
-	static {
-		this.VIEWPORT_ORDER = [
-			"xs",
-			"s",
-			"m",
-			"l",
-			"xl",
-			"xxl"
-		];
-	}
 	static resolveResponsive(e, t, n) {
 		let r;
 		try {
@@ -60,30 +35,32 @@ var p, m = class extends d(s) {
 			return e;
 		}
 		if (typeof r != "object" || !r || Array.isArray(r)) return e;
-		let i = r, a = p.VIEWPORT_ORDER.indexOf(t);
+		let i = r, a = m.VIEWPORT_ORDER.indexOf(t);
 		for (let e = a; e >= 0; e--) {
-			let t = p.VIEWPORT_ORDER[e];
+			let t = m.VIEWPORT_ORDER[e];
 			if (t in i) return i[t];
 		}
 		return n;
 	}
 	get resolvedItemsMode() {
-		return p.resolveResponsive(this.itemsMode, this.viewport, "auto");
+		return m.resolveResponsive(this.itemsMode, this.viewport, "auto");
 	}
 	get resolvedActionsMode() {
-		return p.resolveResponsive(this.actionsMode, this.viewport, "auto");
+		return m.resolveResponsive(this.actionsMode, this.viewport, "auto");
 	}
 	updated(e) {
 		super.updated(e), (e.has("viewport") || e.has("actionsMode")) && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
 	}
 	firstUpdated(e) {
-		super.firstUpdated(e), this.handleScroll(), this.itemsContainer && this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), this.itemsContainer?.addEventListener("scroll", this.handleScroll);
+		var t;
+		super.firstUpdated(e), this.handleScroll(), this.itemsContainer && this.resizeObserver.observe(this.itemsContainer), window.addEventListener("resize", this.handleScroll), (t = this.itemsContainer) == null || t.addEventListener("scroll", this.handleScroll);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.resizeObserver.disconnect(), window.removeEventListener("resize", this.handleScroll);
 	}
 	get selectedItemText() {
-		return this.keepDropdownButtonText ? this.dropdownButtonText : this.items?.[this.selectedIndex]?.textContent?.trim() || this.dropdownButtonText;
+		var e;
+		return this.keepDropdownButtonText ? this.dropdownButtonText : ((e = this.items) == null || (e = e[this.selectedIndex]) == null || (e = e.textContent) == null ? void 0 : e.trim()) || this.dropdownButtonText;
 	}
 	get classes() {
 		return {
@@ -109,23 +86,27 @@ var p, m = class extends d(s) {
 		this.updateCtas();
 	}
 	updateSelectedItem() {
-		this.items?.forEach((e, t) => {
+		var e;
+		(e = this.items) == null || e.forEach((e, t) => {
 			t === this.selectedIndex ? e.classList.add("selected") : e.classList.remove("selected");
 		});
 	}
 	updateCtas() {
-		this.ctas?.forEach((e) => {
-			["xxl", "xl"].includes(this.viewport) ? e?.setAttribute("size", "large") : e?.setAttribute("size", "medium");
+		var e;
+		(e = this.ctas) == null || e.forEach((e) => {
+			["xxl", "xl"].includes(this.viewport) ? e == null || e.setAttribute("size", "large") : e == null || e.setAttribute("size", "medium");
 		});
 	}
 	handleItemClick(e) {
-		let t = e.target, n = this.items?.indexOf(t) ?? -1;
-		if (n !== -1) {
-			this.selectedIndex = n, this.updateSelectedItem();
-			let e = t.textContent?.trim() || t.getAttribute("data-label") || "";
+		var t;
+		let n = e.target, r = ((t = this.items) == null ? void 0 : t.indexOf(n)) ?? -1;
+		if (r !== -1) {
+			var i;
+			this.selectedIndex = r, this.updateSelectedItem();
+			let e = ((i = n.textContent) == null ? void 0 : i.trim()) || n.getAttribute("data-label") || "";
 			this.dispatchEvent(new CustomEvent("ds-secondary-navigation:select", {
 				detail: {
-					index: n,
+					index: r,
 					label: e
 				},
 				bubbles: !0,
@@ -209,13 +190,13 @@ var p, m = class extends d(s) {
                 class="items-list-button"
                 data-aria-label="open items dropdown"
                 @click=${this.toggleItemsDropdown}
-                size=${p.RESPONSIVE_BUTTON_SIZE}
+                size=${m.RESPONSIVE_BUTTON_SIZE}
                 variant="secondary"
                 icon-name="list-line"
             ></ds-icon-button>` : l`<ds-button
             class="items-dropdown-button"
             variant="secondary"
-            size=${p.RESPONSIVE_BUTTON_SIZE}
+            size=${m.RESPONSIVE_BUTTON_SIZE}
             icon-name=${this.openItems ? "arrow-down" : "arrow-up"}
             icon-position="right"
             @click=${this.toggleItemsDropdown}
@@ -247,7 +228,7 @@ var p, m = class extends d(s) {
             class="nav-arrow"
             data-aria-label="open actions dropdown"
             @click=${this.toggleActionsDropdown}
-            size=${p.RESPONSIVE_BUTTON_SIZE}
+            size=${m.RESPONSIVE_BUTTON_SIZE}
             icon-name="triple-dot-v"
         ></ds-icon-button>` : e;
 	}
@@ -273,21 +254,35 @@ var p, m = class extends d(s) {
 	get backdropTemplate() {
 		return !this.openItems && !this.openCtas ? e : t`<div class="dropdown-backdrop" @click=${this.closeDropdowns}></div>`;
 	}
-};
+}, m = p, p.styles = [f], p.RESPONSIVE_BUTTON_SIZE = JSON.stringify({
+	xs: "medium",
+	s: "medium",
+	m: "medium",
+	l: "medium",
+	xl: "large",
+	xxl: "large"
+}), p.VIEWPORT_ORDER = [
+	"xs",
+	"s",
+	"m",
+	"l",
+	"xl",
+	"xxl"
+], p);
 o([n({
 	type: String,
 	attribute: "dropdown-button-text"
-})], m.prototype, "dropdownButtonText", void 0), o([n({
+})], h.prototype, "dropdownButtonText", void 0), o([n({
 	type: Number,
 	attribute: "selected-index"
-})], m.prototype, "selectedIndex", void 0), o([n({
+})], h.prototype, "selectedIndex", void 0), o([n({
 	type: Boolean,
 	attribute: "keep-dropdown-button-text"
-})], m.prototype, "keepDropdownButtonText", void 0), o([n({
+})], h.prototype, "keepDropdownButtonText", void 0), o([n({
 	type: String,
 	attribute: "items-mode"
-})], m.prototype, "itemsMode", void 0), o([n({
+})], h.prototype, "itemsMode", void 0), o([n({
 	type: String,
 	attribute: "actions-mode"
-})], m.prototype, "actionsMode", void 0), o([r()], m.prototype, "openItems", void 0), o([r()], m.prototype, "openCtas", void 0), o([r()], m.prototype, "hasScrollLeft", void 0), o([r()], m.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], m.prototype, "items", void 0), o([a({ slot: "actions" })], m.prototype, "ctas", void 0), o([i(".items-container")], m.prototype, "itemsContainer", void 0), m = p = o([c("ds-secondary-navigation")], m);
+})], h.prototype, "actionsMode", void 0), o([r()], h.prototype, "openItems", void 0), o([r()], h.prototype, "openCtas", void 0), o([r()], h.prototype, "hasScrollLeft", void 0), o([r()], h.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], h.prototype, "items", void 0), o([a({ slot: "actions" })], h.prototype, "ctas", void 0), o([i(".items-container")], h.prototype, "itemsContainer", void 0), h = m = o([c("ds-secondary-navigation")], h);
 //#endregion

package/dist/esm/components/ds-segmented-control/ds-segmented-control.js

@@ -11,13 +11,10 @@ import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
 import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-segmented-control/ds-segmented-control.ts
-var l = class extends i {
+var l, u = (l = class extends i {
 	constructor(...e) {
 		super(...e), this.size = "medium", this.fullWidth = !1;
 	}
-	static {
-		this.styles = [c];
-	}
 	get classes() {
 		return {
 			container: !0,
@@ -47,13 +44,13 @@ var l = class extends i {
             </fieldset>
         `;
 	}
-};
-r([t({ type: String })], l.prototype, "size", void 0), r([t({
+}, l.styles = [c], l);
+r([t({ type: String })], u.prototype, "size", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	attribute: "full-width"
-})], l.prototype, "fullWidth", void 0), r([n({
+})], u.prototype, "fullWidth", void 0), r([n({
 	slot: "",
 	flatten: !0
-})], l.prototype, "slottedElements", void 0), l = r([a("ds-segmented-control")], l);
+})], u.prototype, "slottedElements", void 0), u = r([a("ds-segmented-control")], u);
 //#endregion

package/dist/esm/components/ds-select/controllers/SelectKeyboardController.js

@@ -1,23 +1,5 @@
 //#region src/components/ds-select/controllers/SelectKeyboardController.ts
-var e = class {
-	static {
-		this.KEYS_WHEN_OPEN = new Set([
-			"ArrowDown",
-			"ArrowUp",
-			"Home",
-			"End",
-			"Enter",
-			"Escape",
-			" "
-		]);
-	}
-	static {
-		this.KEYS_WHEN_CLOSED = new Set([
-			"ArrowDown",
-			"ArrowUp",
-			" "
-		]);
-	}
+var e, t = class {
 	static handleKeydownWhenOpen(e, t) {
 		switch (this.KEYS_WHEN_OPEN.has(e.key) && e.preventDefault(), e.key) {
 			case " ":
@@ -45,5 +27,18 @@ var e = class {
 		this.KEYS_WHEN_CLOSED.has(e.key) && (e.preventDefault(), t.open());
 	}
 };
+e = t, e.KEYS_WHEN_OPEN = new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"Home",
+	"End",
+	"Enter",
+	"Escape",
+	" "
+]), e.KEYS_WHEN_CLOSED = new Set([
+	"ArrowDown",
+	"ArrowUp",
+	" "
+]);
 //#endregion
-export { e as SelectKeyboardController };
+export { t as SelectKeyboardController };

package/dist/esm/components/ds-select/ds-select.js

@@ -20,10 +20,7 @@ import "../ds-loader-spinner/ds-loader-spinner.js";
 import { SelectKeyboardController as p } from "./controllers/SelectKeyboardController.js";
 import { commonStyles as m } from "./styles/common.styles.js";
 //#region src/components/ds-select/ds-select.ts
-var h, g = class extends s {
-	static {
-		h = this;
-	}
+var h, g, _ = (h = class extends s {
 	constructor(...e) {
 		super(...e), this.mode = "light", this.size = "large", this.variant = "primary", this.readonly = !1, this.loading = !1, this.loadingAriaLabel = "Loading", this.iconName = void 0, this.dataAriaLabel = void 0, this._open = !1, this._keyboardNavigating = !1, this.nativeSelect = null, this.nativeLabel = null, this.nativeOptions = [], this.keyboardFocusIndex = -1, this.hasForcedError = !1, this.handleMutations = (e) => {
 			e.forEach((e) => {
@@ -50,12 +47,6 @@ var h, g = class extends s {
 			} });
 		};
 	}
-	static {
-		this.styles = [m];
-	}
-	static {
-		this.ARIA_OPTION_PREFIX = "option-";
-	}
 	firstUpdated() {
 		queueMicrotask(() => this.initializeNativeSelect());
 	}
@@ -63,10 +54,12 @@ var h, g = class extends s {
 		super.disconnectedCallback(), this.cleanup();
 	}
 	initializeNativeSelect() {
-		this.nativeSelect = this.nativeSelects?.[0], this.nativeLabel = this.nativeLabels?.[0], this.nativeSelect && (this.syncNativeOptions(), this.setupNativeElementsAttributes(), this.setupEventListeners());
+		var e, t;
+		this.nativeSelect = (e = this.nativeSelects) == null ? void 0 : e[0], this.nativeLabel = (t = this.nativeLabels) == null ? void 0 : t[0], this.nativeSelect && (this.syncNativeOptions(), this.setupNativeElementsAttributes(), this.setupEventListeners());
 	}
 	handleChangeForcedError() {
-		this.hasForcedError = this.forcedError?.length > 0;
+		var e;
+		this.hasForcedError = ((e = this.forcedError) == null ? void 0 : e.length) > 0;
 	}
 	setupNativeElementsAttributes() {
 		this.nativeSelect.setAttribute("aria-hidden", "true"), this.nativeSelect.setAttribute("tabindex", "-1");
@@ -79,15 +72,18 @@ var h, g = class extends s {
 		});
 	}
 	cleanup() {
-		this.nativeSelect?.removeEventListener("change", this.syncNativeOptions), this.observer?.disconnect();
+		var e, t;
+		(e = this.nativeSelect) == null || e.removeEventListener("change", this.syncNativeOptions), (t = this.observer) == null || t.disconnect();
 	}
 	findSelectedOptionIndex() {
-		let e = this.nativeOptions.findIndex((e) => e.value === this.nativeSelect.value);
-		return this.nativeOptions[e]?.hidden ? this.nativeOptions.findIndex((e) => !e.hidden) : e;
+		var e;
+		let t = this.nativeOptions.findIndex((e) => e.value === this.nativeSelect.value);
+		return (e = this.nativeOptions[t]) != null && e.hidden ? this.nativeOptions.findIndex((e) => !e.hidden) : t;
 	}
 	focusDisplaySelect() {
 		this.updateComplete.then(() => {
-			this.displaySelect?.focus();
+			var e;
+			(e = this.displaySelect) == null || e.focus();
 		});
 	}
 	advanceToFirst() {
@@ -114,12 +110,13 @@ var h, g = class extends s {
 		return this.nativeOptions.some((e) => !e.hidden) && this.nativeOptions[this.keyboardFocusIndex].hidden;
 	}
 	scrollToActive(e) {
-		e?.scrollIntoView?.({ block: "nearest" });
+		var t;
+		e == null || (t = e.scrollIntoView) == null || t.call(e, { block: "nearest" });
 	}
 	commitSelection(e = this.keyboardFocusIndex) {
 		this.handleClose();
 		let t = this.nativeOptions[e];
-		this.nativeSelect && t?.value && this.updateNativeSelectValue(t.value);
+		this.nativeSelect && t != null && t.value && this.updateNativeSelectValue(t.value);
 	}
 	updateNativeSelectValue(e) {
 		this.nativeSelect.value = e, ["input", "change"].forEach((e) => this.nativeSelect.dispatchEvent(new Event(e, {
@@ -128,14 +125,15 @@ var h, g = class extends s {
 		})));
 	}
 	get containerClasses() {
+		var e, t, n;
 		return {
 			container: !0,
 			open: this._open,
-			disabled: !!this.nativeSelect?.disabled,
+			disabled: !!((e = this.nativeSelect) != null && e.disabled),
 			readonly: !!this.readonly,
 			loading: !!this.loading,
-			filled: !!this.nativeOptions?.find((e) => e.selected && !e.hidden)?.selected,
-			invalid: !this.nativeSelect?.validity.valid,
+			filled: !!(!((t = this.nativeOptions) == null || (t = t.find((e) => e.selected && !e.hidden)) == null) && t.selected),
+			invalid: !((n = this.nativeSelect) != null && n.validity.valid),
 			error: this.hasForcedError,
 			[this.size]: !!this.size,
 			[this.mode]: !!this.mode,
@@ -176,17 +174,18 @@ var h, g = class extends s {
 		return this.iconName ? u`<ds-icon class="left-icon" icon-name=${f(this.iconName)}></ds-icon>` : e;
 	}
 	get displaySelectTemplate() {
-		let n = this.nativeOptions.find((e) => e.selected), r = Array.from(n?.childNodes || [])?.map((e) => {
+		var n, r;
+		let i = this.nativeOptions.find((e) => e.selected), a = (n = Array.from((i == null ? void 0 : i.childNodes) || [])) == null ? void 0 : n.map((e) => {
 			let t = e.cloneNode(!0);
 			if (e.nodeType !== 3) return t;
 			if (e.textContent.trim() === "") return "";
 			let n = document.createElement("span");
 			return n.classList.add("text"), n.appendChild(t), n;
-		}), i = this.nativeLabel ? t`<label id="display-label" class="label">${this.nativeLabel.textContent}</label>` : e, a = this.nativeLabel ? "display-label" : void 0, o = this.nativeLabel ? void 0 : this.dataAriaLabel;
+		}), o = this.nativeLabel ? t`<label id="display-label" class="label">${this.nativeLabel.textContent}</label>` : e, s = this.nativeLabel ? "display-label" : void 0, c = this.nativeLabel ? void 0 : this.dataAriaLabel;
 		return t`
             <div class="select-outline">
                 <div class="select-container">
-                    ${i}
+                    ${o}
                     <div
                         class="select"
                         role="combobox"
@@ -194,15 +193,15 @@ var h, g = class extends s {
                         aria-expanded="${this._open}"
                         aria-activedescendant="${this.activeDescendantId}"
                         aria-controls="options-container"
-                        aria-labelledby=${f(a)}
-                        aria-label=${f(o)}
-                        aria-disabled=${!!this.nativeSelect?.disabled}
+                        aria-labelledby=${f(s)}
+                        aria-label=${f(c)}
+                        aria-disabled=${!!((r = this.nativeSelect) != null && r.disabled)}
                         @click=${this.handleClickDisplaySelect}
                         @keydown=${this.handleKeydown}
                         @blur=${this.handleClose}
                     >
                         ${this.leftIconTemplate}
-                        <span class="select-content">${r}</span>
+                        <span class="select-content">${a}</span>
                         ${this.iconTemplate}
                     </div>
                 </div>
@@ -210,7 +209,7 @@ var h, g = class extends s {
         `;
 	}
 	get activeDescendantId() {
-		return this._open && this.keyboardFocusIndex >= 0 ? `${h.ARIA_OPTION_PREFIX}${this.nativeOptions[this.keyboardFocusIndex].value}` : "";
+		return this._open && this.keyboardFocusIndex >= 0 ? `${g.ARIA_OPTION_PREFIX}${this.nativeOptions[this.keyboardFocusIndex].value}` : "";
 	}
 	get optionsContainerTemplate() {
 		return t`
@@ -223,7 +222,7 @@ var h, g = class extends s {
 		let r = Array.from(e.childNodes).map((e) => e.cloneNode(!0));
 		return t`
             <div
-                id="${h.ARIA_OPTION_PREFIX}${e.value}"
+                id="${g.ARIA_OPTION_PREFIX}${e.value}"
                 class=${d({
 			option: !0,
 			"keyboard-focused": n === this.keyboardFocusIndex && this._keyboardNavigating,
@@ -238,34 +237,34 @@ var h, g = class extends s {
             </div>
         `;
 	}
-};
-o([n({ type: String })], g.prototype, "mode", void 0), o([n({ type: String })], g.prototype, "size", void 0), o([n({ type: String })], g.prototype, "variant", void 0), o([n({
+}, g = h, h.styles = [m], h.ARIA_OPTION_PREFIX = "option-", h);
+o([n({ type: String })], _.prototype, "mode", void 0), o([n({ type: String })], _.prototype, "size", void 0), o([n({ type: String })], _.prototype, "variant", void 0), o([n({
 	type: Boolean,
 	converter: l,
 	reflect: !0
-})], g.prototype, "readonly", void 0), o([n({
+})], _.prototype, "readonly", void 0), o([n({
 	type: Boolean,
 	converter: l,
 	reflect: !0
-})], g.prototype, "loading", void 0), o([n({
+})], _.prototype, "loading", void 0), o([n({
 	type: String,
 	attribute: "loading-aria-label"
-})], g.prototype, "loadingAriaLabel", void 0), o([n({
+})], _.prototype, "loadingAriaLabel", void 0), o([n({
 	type: String,
 	attribute: "icon-name"
-})], g.prototype, "iconName", void 0), o([n({
+})], _.prototype, "iconName", void 0), o([n({
 	type: String,
 	attribute: "data-aria-label"
-})], g.prototype, "dataAriaLabel", void 0), o([r()], g.prototype, "_open", void 0), o([r()], g.prototype, "_keyboardNavigating", void 0), o([r()], g.prototype, "nativeLabel", void 0), o([r()], g.prototype, "nativeOptions", void 0), o([r()], g.prototype, "keyboardFocusIndex", void 0), o([r()], g.prototype, "hasForcedError", void 0), o([a({
+})], _.prototype, "dataAriaLabel", void 0), o([r()], _.prototype, "_open", void 0), o([r()], _.prototype, "_keyboardNavigating", void 0), o([r()], _.prototype, "nativeLabel", void 0), o([r()], _.prototype, "nativeOptions", void 0), o([r()], _.prototype, "keyboardFocusIndex", void 0), o([r()], _.prototype, "hasForcedError", void 0), o([a({
 	slot: "",
 	selector: "select",
 	flatten: !0
-})], g.prototype, "nativeSelects", void 0), o([a({
+})], _.prototype, "nativeSelects", void 0), o([a({
 	slot: "",
 	selector: "label",
 	flatten: !0
-})], g.prototype, "nativeLabels", void 0), o([a({
+})], _.prototype, "nativeLabels", void 0), o([a({
 	slot: "forced-error",
 	flatten: !0
-})], g.prototype, "forcedError", void 0), o([i(".select")], g.prototype, "displaySelect", void 0), g = h = o([c("ds-select")], g);
+})], _.prototype, "forcedError", void 0), o([i(".select")], _.prototype, "displaySelect", void 0), _ = g = o([c("ds-select")], _);
 //#endregion

package/dist/esm/components/ds-selection/ds-selection.js

@@ -14,10 +14,7 @@ import { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
 import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-selection/ds-selection.ts
-var u = class extends r {
-	static {
-		this.styles = [l];
-	}
+var u, d = (u = class extends r {
 	get iconTemplate() {
 		return o`<ds-icon class="icon" size="40" icon-name=${this.checked ? "check" : "plus"}></ds-icon>`;
 	}
@@ -48,12 +45,12 @@ var u = class extends r {
             </span>
         `;
 	}
-};
+}, u.styles = [l], u);
 n([t({
 	type: Boolean,
 	converter: a
-})], u.prototype, "checked", void 0), n([t({
+})], d.prototype, "checked", void 0), n([t({
 	type: String,
 	attribute: "data-aria-label"
-})], u.prototype, "dataAriaLabel", void 0), u = n([i("ds-selection")], u);
+})], d.prototype, "dataAriaLabel", void 0), d = n([i("ds-selection")], d);
 //#endregion

package/dist/esm/components/ds-sidebar-navigation/ds-sidebar-navigation.js

@@ -14,7 +14,7 @@ import "../ds-icon-button/ds-icon-button.js";
 import { scrollLock as l } from "../../utils/scrollLock.js";
 import { commonStyles as u } from "./styles/common.styles.js";
 //#region src/components/ds-sidebar-navigation/ds-sidebar-navigation.ts
-var d = class extends i {
+var d, f = (d = class extends i {
 	constructor(...e) {
 		super(...e), this.open = !1, this.scrollLocked = !1, this.toggleModal = () => {
 			this.open = !this.open, this.open ? this.dispatchEvent(new Event("ds-sidebar-navigation:open", {
@@ -26,6 +26,8 @@ var d = class extends i {
 			}));
 		}, this.handleModalClick = (e) => {
 			e.target === e.currentTarget && this.toggleModal();
+		}, this.handleClick = (e) => {
+			e.stopPropagation();
 		}, this.handleSlotChange = (e) => {
 			let t = e.target.assignedElements().find((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--"));
 			this.setMainCtaSize(t);
@@ -45,19 +47,17 @@ var d = class extends i {
 			}));
 		};
 	}
-	static {
-		this.styles = [u];
-	}
 	firstUpdated(e) {
+		var t, n;
 		super.firstUpdated(e);
-		let t = this.mainCtas?.find((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--"));
-		t && this.setMainCtaSize(t), this.ctasButtons?.filter((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--")).forEach((e) => this.setButtonSize(e));
+		let r = (t = this.mainCtas) == null ? void 0 : t.find((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--"));
+		r && this.setMainCtaSize(r), (n = this.ctasButtons) == null || n.filter((e) => e.tagName === "DS-BUTTON" || e.tagName.startsWith("DS-BUTTON--")).forEach((e) => this.setButtonSize(e));
 	}
 	updated(e) {
-		super.updated(e), e.has("open") && (this.open ? (l.lock(), this.scrollLocked = !0) : this.scrollLocked &&= (l.unlock(), !1));
+		super.updated(e), e.has("open") && (this.open ? (l.lock(), this.scrollLocked = !0) : this.scrollLocked && (l.unlock(), this.scrollLocked = !1));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.scrollLocked &&= (l.unlock(), !1);
+		super.disconnectedCallback(), this.scrollLocked && (l.unlock(), this.scrollLocked = !1);
 	}
 	modalButtonTemplate() {
 		return s`<ds-icon-button
@@ -86,7 +86,7 @@ var d = class extends i {
 	}
 	render() {
 		return e`
-            <div class=${c(this.classes())}>
+            <div class=${c(this.classes())} @click=${this.handleClick}>
                 <nav class="nav" part="bar">
                     <div class="aside" part="aside">
                         <slot name="aside-text"></slot>
@@ -106,16 +106,16 @@ var d = class extends i {
             </div>
         `;
 	}
-};
+}, d.styles = [u], d);
 r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], d.prototype, "open", void 0), r([n({
+})], f.prototype, "open", void 0), r([n({
 	slot: "main-cta",
 	flatten: !0
-})], d.prototype, "mainCtas", void 0), r([n({
+})], f.prototype, "mainCtas", void 0), r([n({
 	slot: "ctas",
 	flatten: !0
-})], d.prototype, "ctasButtons", void 0), d = r([a("ds-sidebar-navigation")], d);
+})], f.prototype, "ctasButtons", void 0), f = r([a("ds-sidebar-navigation")], f);
 //#endregion

package/dist/esm/components/ds-skeleton/ds-skeleton.js

@@ -11,13 +11,10 @@ import { o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
 import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-skeleton/ds-skeleton.ts
-var c = class extends r {
+var c, l = (c = class extends r {
 	constructor(...e) {
 		super(...e), this.variant = "text", this.animation = "shimmer";
 	}
-	static {
-		this.styles = [s];
-	}
 	get classes() {
 		return {
 			skeleton: !0,
@@ -41,6 +38,6 @@ var c = class extends r {
             ></div>
         `;
 	}
-};
-n([t({ type: String })], c.prototype, "variant", void 0), n([t({ type: String })], c.prototype, "width", void 0), n([t({ type: String })], c.prototype, "height", void 0), n([t({ type: String })], c.prototype, "animation", void 0), c = n([i("ds-skeleton")], c);
+}, c.styles = [s], c);
+n([t({ type: String })], l.prototype, "variant", void 0), n([t({ type: String })], l.prototype, "width", void 0), n([t({ type: String })], l.prototype, "height", void 0), n([t({ type: String })], l.prototype, "animation", void 0), l = n([i("ds-skeleton")], l);
 //#endregion