@cupra/ui-kit 2.0.0-canary.131 → 2.0.0-canary.133

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

@@ -8,14 +8,17 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as s } from "../base/UiKitElement.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
-import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../ds-icon/ds-icon.js";
+import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
+import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
-import { o as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
+import { ViewportMixin as d } from "../../mixins/ViewportMixin.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/style-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/style-map.js";
-import { commonStyles as f } from "./styles/common.styles.js";
+import { commonStyles as p } from "./styles/common.styles.js";
 //#region src/components/ds-secondary-navigation/ds-secondary-navigation.ts
-var p = class extends u(s) {
+var m = class extends d(s) {
 	constructor(...e) {
 		super(...e), this.dropdownButtonText = "Menu", this.textTransform = "none", 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();
@@ -25,7 +28,7 @@ var p = class extends u(s) {
 		};
 	}
 	static {
-		this.styles = [f];
+		this.styles = [p];
 	}
 	updated(e) {
 		super.updated(e), (e.has("viewport") || e.has("actionsMode")) && this.updateCtas(), e.has("selectedIndex") && this.updateSelectedItem();
@@ -131,7 +134,7 @@ var p = class extends u(s) {
 		return t`
             ${this.backdropTemplate}
             <div class="container gutter">
-                <nav data-testid="ds-secondary-navigation-container" class=${l(this.classes)}>
+                <nav data-testid="ds-secondary-navigation-container" class=${u(this.classes)}>
                     ${this.itemsTemplate}
                     ${this.itemsDropdownButtonTemplate}
                     ${this.actionsTemplate}
@@ -145,7 +148,7 @@ var p = class extends u(s) {
 	get itemsTemplate() {
 		return this.shouldShowItemsInline ? t`
             <div class="items-container">
-                <div style=${d(this.textTransformStyle)}>
+                <div style=${f(this.textTransformStyle)}>
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
@@ -153,39 +156,31 @@ var p = class extends u(s) {
 	}
 	get actionsTemplate() {
 		return this.shouldShowActionsInline ? t`
-            <div class="actions-container" style=${d(this.textTransformStyle)}>
+            <div class="actions-container" style=${f(this.textTransformStyle)}>
                 <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
             </div>
         ` : e;
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.openItems ? "arrow-down" : "arrow-up",
-			size: 20
-		});
+		return l`<ds-icon class="icon" icon-name=${this.openItems ? "arrow-down" : "arrow-up"} size="20"></ds-icon>`;
 	}
 	get listIconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": "list-line",
-			size: 20
-		});
+		return l`<ds-icon class="icon" icon-name="list-line" size="20"></ds-icon>`;
 	}
 	get itemsDropdownButtonTemplate() {
-		return this.shouldShowItemsDropdownButton ? this.itemsMode === "icon-button" ? this.componentFactory.createIconButton({
-			class: "items-list-button",
-			"data-aria-label": "open items dropdown",
-			"@click": this.toggleItemsDropdown,
-			size: "medium",
-			"icon-name": "list-line"
-		}) : t`
+		return this.shouldShowItemsDropdownButton ? this.itemsMode === "icon-button" ? l`<ds-icon-button
+                class="items-list-button"
+                data-aria-label="open items dropdown"
+                @click=${this.toggleItemsDropdown}
+                size="medium"
+                icon-name="list-line"
+            ></ds-icon-button>` : t`
             <button
                 class="items-dropdown-button"
                 @click=${this.toggleItemsDropdown}
                 aria-expanded=${this.openItems}
                 aria-haspopup="true"
-                style=${d(this.textTransformStyle)}
+                style=${f(this.textTransformStyle)}
             >
                 <span>${this.selectedItemText}</span>
                 ${this.iconTemplate}
@@ -195,7 +190,7 @@ var p = class extends u(s) {
 	get itemsDropdownTemplate() {
 		return this.shouldShowItemsDropdownButton ? t`
             <div
-                class=${l({
+                class=${u({
 			gutter: !0,
 			"dropdown-container": !0,
 			"items-dropdown": !0,
@@ -205,25 +200,25 @@ var p = class extends u(s) {
                 aria-hidden=${!this.openItems}
                 ?inert=${!this.openItems}
             >
-                <div class="dropdown ds-blur" style=${d(this.textTransformStyle)}>
+                <div class="dropdown ds-blur" style=${f(this.textTransformStyle)}>
                     <slot name="items" @slotchange=${this.handleItemsSlotChange} @click=${this.handleItemClick}></slot>
                 </div>
             </div>
         ` : e;
 	}
 	get actionsDropdownButtonTemplate() {
-		return this.shouldShowActionsDropdownButton ? this.componentFactory.createIconButton({
-			class: "nav-arrow",
-			"data-aria-label": "open actions dropdown",
-			"@click": this.toggleActionsDropdown,
-			size: "medium",
-			"icon-name": "triple-dot-v"
-		}) : e;
+		return this.shouldShowActionsDropdownButton ? l`<ds-icon-button
+            class="nav-arrow"
+            data-aria-label="open actions dropdown"
+            @click=${this.toggleActionsDropdown}
+            size="medium"
+            icon-name="triple-dot-v"
+        ></ds-icon-button>` : e;
 	}
 	get actionsDropdownTemplate() {
 		return this.shouldShowActionsDropdownButton ? t`
             <div
-                class=${l({
+                class=${u({
 			gutter: !0,
 			"dropdown-container": !0,
 			"actions-dropdown": !0,
@@ -233,7 +228,7 @@ var p = class extends u(s) {
                 aria-hidden=${!this.openCtas}
                 ?inert=${!this.openCtas}
             >
-                <div class="dropdown ds-blur" style=${d(this.textTransformStyle)}>
+                <div class="dropdown ds-blur" style=${f(this.textTransformStyle)}>
                     <slot name="actions"></slot>
                 </div>
             </div>
@@ -246,20 +241,20 @@ var p = class extends u(s) {
 o([n({
 	type: String,
 	attribute: "dropdown-button-text"
-})], p.prototype, "dropdownButtonText", void 0), o([n({
+})], m.prototype, "dropdownButtonText", void 0), o([n({
 	type: Number,
 	attribute: "selected-index"
-})], p.prototype, "selectedIndex", void 0), o([n({
+})], m.prototype, "selectedIndex", void 0), o([n({
 	type: String,
 	attribute: "text-transform"
-})], p.prototype, "textTransform", void 0), o([n({
+})], m.prototype, "textTransform", void 0), o([n({
 	type: Boolean,
 	attribute: "keep-dropdown-button-text"
-})], p.prototype, "keepDropdownButtonText", void 0), o([n({
+})], m.prototype, "keepDropdownButtonText", void 0), o([n({
 	type: String,
 	attribute: "items-mode"
-})], p.prototype, "itemsMode", void 0), o([n({
+})], m.prototype, "itemsMode", void 0), o([n({
 	type: String,
 	attribute: "actions-mode"
-})], p.prototype, "actionsMode", void 0), o([r()], p.prototype, "openItems", void 0), o([r()], p.prototype, "openCtas", void 0), o([r()], p.prototype, "hasScrollLeft", void 0), o([r()], p.prototype, "hasScrollRight", void 0), o([a({ slot: "items" })], p.prototype, "items", void 0), o([a({ slot: "actions" })], p.prototype, "ctas", void 0), o([i(".items-container")], p.prototype, "itemsContainer", void 0), p = o([c("ds-secondary-navigation")], p);
+})], 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 = o([c("ds-secondary-navigation")], m);
 //#endregion

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

@@ -9,15 +9,19 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as s } from "../base/UiKitElement.js";
 import { customUiKitElement as c } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as l } from "../../utils/booleanConverter.js";
-import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as u } from "../../utils/uiKitHtml.js";
+import { e as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { SelectKeyboardController as d } from "./controllers/SelectKeyboardController.js";
-import { commonStyles as f } from "./styles/common.styles.js";
+import { o as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.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 p, m = class extends s {
+var h, g = class extends s {
 	static {
-		p = this;
+		h = this;
 	}
 	constructor(...e) {
 		super(...e), this.mode = "light", this.size = "large", this.variant = "primary", this.readonly = !1, this.iconName = 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) => {
@@ -33,20 +37,20 @@ var p, m = class extends s {
 		}, this.handleClickDisplaySelect = () => {
 			this._open ? this.handleClose() : (this._keyboardNavigating = !1, this.handleOpen());
 		}, this.handleKeydown = (e) => {
-			this._open ? (this._keyboardNavigating = !0, d.handleKeydownWhenOpen(e, {
+			this._open ? (this._keyboardNavigating = !0, p.handleKeydownWhenOpen(e, {
 				commit: () => this.commitSelection(),
 				navigateNext: () => this.advanceSelection(1),
 				navigatePrev: () => this.advanceSelection(-1),
 				navigateFirst: () => this.advanceToFirst(),
 				navigateLast: () => this.advanceToLast(),
 				close: this.handleClose
-			})) : d.handleKeydownWhenClosed(e, { open: () => {
+			})) : p.handleKeydownWhenClosed(e, { open: () => {
 				this._keyboardNavigating = !0, this.handleOpen();
 			} });
 		};
 	}
 	static {
-		this.styles = [f];
+		this.styles = [m];
 	}
 	static {
 		this.ARIA_OPTION_PREFIX = "option-";
@@ -145,7 +149,7 @@ var p, m = class extends s {
 	render() {
 		return t`
             <slot @slotchange=${this.initializeNativeSelect}></slot>
-            <div class=${u(this.containerClasses)}>
+            <div class=${d(this.containerClasses)}>
                 ${this.displaySelectTemplate}
                 ${this.optionsContainerTemplate}
                 <slot name="helper-text"></slot>
@@ -156,16 +160,10 @@ var p, m = class extends s {
         `;
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this._open ? "arrow-up" : "arrow-down"
-		});
+		return u`<ds-icon class="icon" icon-name=${this._open ? "arrow-up" : "arrow-down"}></ds-icon>`;
 	}
 	get leftIconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: "left-icon",
-			"icon-name": this.iconName
-		}) : e;
+		return this.iconName ? u`<ds-icon class="left-icon" icon-name=${f(this.iconName)}></ds-icon>` : e;
 	}
 	get displaySelectTemplate() {
 		let e = this.nativeOptions.find((e) => e.selected), n = Array.from(e?.childNodes || [])?.map((e) => {
@@ -201,7 +199,7 @@ var p, m = class extends s {
         `;
 	}
 	get activeDescendantId() {
-		return this._open && this.keyboardFocusIndex >= 0 ? `${p.ARIA_OPTION_PREFIX}${this.nativeOptions[this.keyboardFocusIndex].value}` : "";
+		return this._open && this.keyboardFocusIndex >= 0 ? `${h.ARIA_OPTION_PREFIX}${this.nativeOptions[this.keyboardFocusIndex].value}` : "";
 	}
 	get optionsContainerTemplate() {
 		return t`
@@ -214,8 +212,8 @@ var p, m = class extends s {
 		let r = Array.from(e.childNodes).map((e) => e.cloneNode(!0));
 		return t`
             <div
-                id="${p.ARIA_OPTION_PREFIX}${e.value}"
-                class=${u({
+                id="${h.ARIA_OPTION_PREFIX}${e.value}"
+                class=${d({
 			option: !0,
 			"keyboard-focused": n === this.keyboardFocusIndex && this._keyboardNavigating,
 			selected: e.value === this.nativeSelect.value
@@ -230,23 +228,23 @@ var p, m = class extends s {
         `;
 	}
 };
-o([n({ type: String })], m.prototype, "mode", void 0), o([n({ type: String })], m.prototype, "size", void 0), o([n({ type: String })], m.prototype, "variant", void 0), o([n({
+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({
 	type: Boolean,
 	converter: l,
 	reflect: !0
-})], m.prototype, "readonly", void 0), o([n({
+})], g.prototype, "readonly", void 0), o([n({
 	type: String,
 	attribute: "icon-name"
-})], m.prototype, "iconName", void 0), o([r()], m.prototype, "_open", void 0), o([r()], m.prototype, "_keyboardNavigating", void 0), o([r()], m.prototype, "nativeOptions", void 0), o([r()], m.prototype, "keyboardFocusIndex", void 0), o([r()], m.prototype, "hasForcedError", void 0), o([a({
+})], g.prototype, "iconName", void 0), o([r()], g.prototype, "_open", void 0), o([r()], g.prototype, "_keyboardNavigating", 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({
 	slot: "",
 	selector: "select",
 	flatten: !0
-})], m.prototype, "nativeSelects", void 0), o([a({
+})], g.prototype, "nativeSelects", void 0), o([a({
 	slot: "",
 	selector: "label",
 	flatten: !0
-})], m.prototype, "nativeLabels", void 0), o([a({
+})], g.prototype, "nativeLabels", void 0), o([a({
 	slot: "forced-error",
 	flatten: !0
-})], m.prototype, "forcedError", void 0), o([i(".select")], m.prototype, "displaySelect", void 0), m = p = o([c("ds-select")], m);
+})], g.prototype, "forcedError", void 0), o([i(".select")], g.prototype, "displaySelect", void 0), g = h = o([c("ds-select")], g);
 //#endregion

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

@@ -5,21 +5,19 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as r } from "../base/UiKitElement.js";
 import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as a } from "../../utils/booleanConverter.js";
-import { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as o } from "../../utils/uiKitHtml.js";
+import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { commonStyles as s } from "./styles/common.styles.js";
+import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-selection/ds-selection.ts
-var c = class extends r {
+var l = class extends r {
 	static {
-		this.styles = [s];
+		this.styles = [c];
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			size: 40,
-			"icon-name": this.checked ? "check" : "plus"
-		});
+		return o`<ds-icon class="icon" size="40" icon-name=${this.checked ? "check" : "plus"}></ds-icon>`;
 	}
 	get classes() {
 		return {
@@ -36,7 +34,7 @@ var c = class extends r {
 	}
 	render() {
 		return e`
-            <span data-testid="ds-selection-container" class=${o(this.classes)} @click=${this.handleClick}>
+            <span data-testid="ds-selection-container" class=${s(this.classes)} @click=${this.handleClick}>
                 ${this.iconTemplate}
             </span>
         `;
@@ -45,5 +43,5 @@ var c = class extends r {
 n([t({
 	type: Boolean,
 	converter: a
-})], c.prototype, "checked", void 0), c = n([i("ds-selection")], c);
+})], l.prototype, "checked", void 0), l = n([i("ds-selection")], l);
 //#endregion

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

@@ -7,12 +7,14 @@ import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as o } from "../../utils/booleanConverter.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { scrollLock as c } from "../../utils/scrollLock.js";
-import { commonStyles as l } from "./styles/common.styles.js";
+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 u = class extends i {
+var 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", {
@@ -40,7 +42,7 @@ var u = class extends i {
 		};
 	}
 	static {
-		this.styles = [l];
+		this.styles = [u];
 	}
 	firstUpdated(e) {
 		super.firstUpdated(e);
@@ -48,29 +50,29 @@ var u = class extends i {
 		t && this.setMainCtaSize(t);
 	}
 	updated(e) {
-		super.updated(e), e.has("open") && (this.open ? (c.lock(), this.scrollLocked = !0) : this.scrollLocked &&= (c.unlock(), !1));
+		super.updated(e), e.has("open") && (this.open ? (l.lock(), this.scrollLocked = !0) : this.scrollLocked &&= (l.unlock(), !1));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.scrollLocked &&= (c.unlock(), !1);
+		super.disconnectedCallback(), this.scrollLocked &&= (l.unlock(), !1);
 	}
 	modalButtonTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "modal-button",
-			"icon-name": this.open ? "cross" : "triple-dot-v",
-			"@click": this.toggleModal,
-			"data-testid": "modal-button",
-			"data-aria-label": "more actions",
-			variant: "tertiary",
-			size: JSON.stringify({
-				xxl: "large",
-				xl: "large",
-				l: "medium",
-				m: "medium",
-				s: "small",
-				xs: "small",
-				xxs: "small"
-			})
-		});
+		return s`<ds-icon-button
+            class="modal-button"
+            icon-name=${this.open ? "cross" : "triple-dot-v"}
+            @click=${this.toggleModal}
+            data-testid="modal-button"
+            data-aria-label="more actions"
+            variant="tertiary"
+            size=${JSON.stringify({
+			xxl: "large",
+			xl: "large",
+			l: "medium",
+			m: "medium",
+			s: "small",
+			xs: "small",
+			xxs: "small"
+		})}
+        ></ds-icon-button>`;
 	}
 	classes() {
 		return {
@@ -80,7 +82,7 @@ var u = class extends i {
 	}
 	render() {
 		return e`
-            <div class=${s(this.classes())}>
+            <div class=${c(this.classes())}>
                 <nav class="nav" part="bar">
                     <div class="aside" part="aside">
                         <slot name="aside-text"></slot>
@@ -105,9 +107,9 @@ r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "open", void 0), r([n({
+})], d.prototype, "open", void 0), r([n({
 	slot: "main-cta",
 	selector: "ds-button",
 	flatten: !0
-})], u.prototype, "mainCtas", void 0), u = r([a("ds-sidebar-navigation")], u);
+})], d.prototype, "mainCtas", void 0), d = r([a("ds-sidebar-navigation")], d);
 //#endregion

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

@@ -44,4 +44,3 @@ var c = class extends r {
 };
 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);
 //#endregion
-export { c as DsSkeleton };

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

@@ -8,12 +8,16 @@ import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/he
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
 import { booleanConverter as c } from "../../utils/booleanConverter.js";
-import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as l } from "../../utils/uiKitHtml.js";
+import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { commonStyles as u, navigationStyles as d, panelsStyles as f, tabsStyles as p } from "./styles/common.styles.js";
-import { themeConfig as m } from "./theme-config.js";
+import { o as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { commonStyles as f, navigationStyles as p, panelsStyles as m, tabsStyles as h } from "./styles/common.styles.js";
+import { themeConfig as g } from "./theme-config.js";
 //#region src/components/ds-tabs/ds-tabs.ts
-var h = class extends o {
+var _ = class extends o {
 	constructor(...e) {
 		super(...e), this._selectedTab = void 0, this._selectedTabState = 0, this.mode = "light", this.variant = "primary", this.size = "large", this.disabled = !1, this.focusedTabIndex = -1, this.handleKeyDown = (e) => {
 			if (!(this.focusedTabIndex < 0)) switch (e.key) {
@@ -59,10 +63,10 @@ var h = class extends o {
 	}
 	static {
 		this.styles = [
-			u,
-			d,
+			f,
 			p,
-			f
+			h,
+			m
 		];
 	}
 	get selectedTab() {
@@ -79,16 +83,16 @@ var h = class extends o {
 	}
 	getScrollButtonTemplate(t, n) {
 		if (!this.theme || t === "left" && !this.hasScrollLeft || t === "right" && !this.hasScrollRight) return e;
-		let r = `arrow-${t}`, i = m[this.theme]?.["icon-button-variant"];
-		return this.componentFactory.createIconButton({
-			class: `nav-arrow ${t}`,
-			"data-aria-label": `nav-arrow-${t}`,
-			"@click": n,
-			size: this.size === "medium" ? "medium" : "large",
-			"icon-name": r,
-			mode: this.mode,
-			variant: i
-		});
+		let r = `arrow-${t}`, i = g[this.theme]?.["icon-button-variant"];
+		return l`<ds-icon-button
+            class=${`nav-arrow ${t}`}
+            data-aria-label=${`nav-arrow-${t}`}
+            @click=${n}
+            size=${this.size === "medium" ? "medium" : "large"}
+            icon-name=${r}
+            mode=${d(this.mode)}
+            variant=${d(i)}
+        ></ds-icon-button>`;
 	}
 	firstUpdated() {
 		this.handleScrollNav(), this.resizeObserver.observe(this.nav), this.tabs.forEach((e) => this.resizeObserver.observe(e)), window.addEventListener("resize", this.handleScrollNav), this.nav.addEventListener("scroll", this.handleScrollNav), this.setTabsFocusable();
@@ -154,8 +158,8 @@ var h = class extends o {
 	}
 	render() {
 		return t`
-            <div part="container" class=${l(this.classes)}>
-                <div class=${l(this.navContainerClasses)}>
+            <div part="container" class=${u(this.classes)}>
+                <div class=${u(this.navContainerClasses)}>
                     ${this.getScrollButtonTemplate("left", this.handleScrollLeft)}
                     <nav tabindex="0" role="tablist" @scroll=${this.handleScrollNav} @keydown=${this.handleKeyDown}>
                         <slot @slotchange=${this.handleTabsSlotchange} name="tab" @click=${this.handleSelect}></slot>
@@ -171,14 +175,14 @@ a([n({
 	type: Number,
 	attribute: "selected-tab",
 	reflect: !0
-})], h.prototype, "_selectedTab", void 0), a([r()], h.prototype, "_selectedTabState", void 0), a([n({
+})], _.prototype, "_selectedTab", void 0), a([r()], _.prototype, "_selectedTabState", void 0), a([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "mode", void 0), a([n({
+})], _.prototype, "mode", void 0), a([n({
 	type: String,
 	reflect: !0
-})], h.prototype, "variant", void 0), a([n({ type: String })], h.prototype, "size", void 0), a([n({
+})], _.prototype, "variant", void 0), a([n({ type: String })], _.prototype, "size", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], h.prototype, "disabled", void 0), a([r()], h.prototype, "focusedTabIndex", void 0), a([i("nav")], h.prototype, "nav", void 0), a([r()], h.prototype, "tabs", void 0), a([r()], h.prototype, "panels", void 0), a([r()], h.prototype, "hasScrollLeft", void 0), a([r()], h.prototype, "hasScrollRight", void 0), h = a([s("ds-tabs")], h);
+})], _.prototype, "disabled", void 0), a([r()], _.prototype, "focusedTabIndex", void 0), a([i("nav")], _.prototype, "nav", void 0), a([r()], _.prototype, "tabs", void 0), a([r()], _.prototype, "panels", void 0), a([r()], _.prototype, "hasScrollLeft", void 0), a([r()], _.prototype, "hasScrollRight", void 0), _ = a([s("ds-tabs")], _);
 //#endregion

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

@@ -6,18 +6,22 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as a } from "../base/UiKitElement.js";
 import { customUiKitElement as o } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
 import { booleanConverter as s } from "../../utils/booleanConverter.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { uiKitHtml as c } from "../../utils/uiKitHtml.js";
+import { e as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
-import { n as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { commonStyles as u, iconStyles as d } from "./styles/common.styles.js";
+import { o as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.js";
+import { n as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { commonStyles as f, iconStyles as p } from "./styles/common.styles.js";
 //#region src/components/ds-tag/ds-tag.ts
-var f = class extends a {
+var m = class extends a {
 	constructor(...e) {
 		super(...e), this.show = !0, this.clickableIcon = !1, this.iconPosition = "left";
 	}
 	static {
-		this.styles = [u, d];
+		this.styles = [f, p];
 	}
 	get classes() {
 		return {
@@ -40,19 +44,14 @@ var f = class extends a {
 		this.dispatchEvent(e);
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: c(this.iconClasses),
-			"icon-name": this.iconName,
-			size: 16,
-			"@click": this.handleClickIcon
-		}) : e;
+		return this.iconName ? c`<ds-icon class=${l(this.iconClasses)} icon-name=${u(this.iconName)} size="16" @click=${this.handleClickIcon}></ds-icon>` : e;
 	}
 	render() {
 		return this.show ? t`
-                <div class=${c(this.classes)}>
-                    ${l(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                <div class=${l(this.classes)}>
+                    ${d(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                     <slot></slot>
-                    ${l(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
+                    ${d(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                 </div>
             ` : e;
 	}
@@ -60,21 +59,21 @@ var f = class extends a {
 i([n({
 	type: Boolean,
 	converter: s
-})], f.prototype, "show", void 0), i([n({
+})], m.prototype, "show", void 0), i([n({
 	type: Boolean,
 	converter: s,
 	attribute: "clickable-icon"
-})], f.prototype, "clickableIcon", void 0), i([n({
+})], m.prototype, "clickableIcon", void 0), i([n({
 	type: String,
 	attribute: "icon-name"
-})], f.prototype, "iconName", void 0), i([n({
+})], m.prototype, "iconName", void 0), i([n({
 	type: String,
 	attribute: "icon-position"
-})], f.prototype, "iconPosition", void 0), i([n({
+})], m.prototype, "iconPosition", void 0), i([n({
 	type: String,
 	attribute: "color"
-})], f.prototype, "color", void 0), i([n({
+})], m.prototype, "color", void 0), i([n({
 	type: String,
 	attribute: "variant"
-})], f.prototype, "variant", void 0), i([r()], f.prototype, "onClickHandler", void 0), f = i([o("ds-tag")], f);
+})], m.prototype, "variant", void 0), i([r()], m.prototype, "onClickHandler", void 0), m = i([o("ds-tag")], m);
 //#endregion