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

package/dist-react/esm/components/ds-search/ds-search.js

@@ -7,13 +7,15 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as o } from "../base/UiKitElement.js";
 import { customUiKitElement as s } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.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 { FormAssociatedMixin as u } from "../../mixins/FormAssociatedMixin.js";
-import { commonStyles as d, containerStyles as f, helperTextStyles as p, inputContainerStyles as m, inputFieldStyles as h } from "./styles/common.styles.js";
+import { FormAssociatedMixin as d } from "../../mixins/FormAssociatedMixin.js";
+import { commonStyles as f, containerStyles as p, helperTextStyles as m, inputContainerStyles as h, inputFieldStyles as g } from "./styles/common.styles.js";
 //#region src/components/ds-search/ds-search.ts
-var g = class extends u(o) {
+var _ = class extends d(o) {
 	constructor(...e) {
 		super(...e), this.initialValue = "", this.label = "", this.helperText = "", this.errorText = "", this.disabled = !1, this.success = !1, this.mode = "light", this.size = "large", this.name = "", this.placeholder = "", this.type = "text", this.focused = !1, this.handleFocus = () => {
 			this.focused = !0;
@@ -42,11 +44,11 @@ var g = class extends u(o) {
 	}
 	static {
 		this.styles = [
-			d,
 			f,
 			p,
-			h,
-			m
+			m,
+			g,
+			h
 		];
 	}
 	firstUpdated() {
@@ -71,28 +73,17 @@ var g = class extends u(o) {
 	}
 	get searchIconTemplate() {
 		return t`
-            ${this.componentFactory.createIcon({
-			class: "search-icon",
-			"icon-name": "magnifying-glass"
-		})}
+            ${l`<ds-icon class="search-icon" icon-name="magnifying-glass"></ds-icon>`}
         `;
 	}
 	get positionIconTemplate() {
 		return t`
-            ${this.componentFactory.createIcon({
-			class: "position-icon",
-			"icon-name": "position"
-		})}
+            ${l`<ds-icon class="position-icon" icon-name="position"></ds-icon>`}
         `;
 	}
 	get clearIconTemplate() {
 		return t`
-            ${this.componentFactory.createIcon({
-			class: "clear-icon",
-			"data-testid": "clear-icon",
-			"icon-name": "cross",
-			"@click": this.handleClickClearIcon
-		})}
+            ${l`<ds-icon class="clear-icon" data-testid="clear-icon" icon-name="cross" @click=${this.handleClickClearIcon}></ds-icon>`}
         `;
 	}
 	get inputTemplate() {
@@ -139,7 +130,7 @@ var g = class extends u(o) {
 	render() {
 		return t`
             ${this.styleTokens}
-            <div class=${l(this.classes)}>
+            <div class=${u(this.classes)}>
                 <div class="input-container">
                     ${this.searchIconTemplate}
                     ${this.inputTemplate}
@@ -155,23 +146,23 @@ a([n({
 	type: String,
 	reflect: !0,
 	attribute: "initial-value"
-})], g.prototype, "initialValue", void 0), a([n({ type: String })], g.prototype, "label", void 0), a([n({
+})], _.prototype, "initialValue", void 0), a([n({ type: String })], _.prototype, "label", void 0), a([n({
 	type: String,
 	attribute: "helper-text"
-})], g.prototype, "helperText", void 0), a([n({
+})], _.prototype, "helperText", void 0), a([n({
 	type: String,
 	attribute: "error-text"
-})], g.prototype, "errorText", void 0), a([n({
+})], _.prototype, "errorText", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], g.prototype, "disabled", void 0), a([n({
+})], _.prototype, "disabled", void 0), a([n({
 	type: Boolean,
 	converter: c
-})], g.prototype, "success", void 0), a([n({
+})], _.prototype, "success", void 0), a([n({
 	type: String,
 	reflect: !0
-})], g.prototype, "mode", void 0), a([n({ type: String })], g.prototype, "size", void 0), a([n({ type: String })], g.prototype, "name", void 0), a([n({ type: String })], g.prototype, "placeholder", void 0), a([n({
+})], _.prototype, "mode", void 0), a([n({ type: String })], _.prototype, "size", void 0), a([n({ type: String })], _.prototype, "name", void 0), a([n({ type: String })], _.prototype, "placeholder", void 0), a([n({
 	type: String,
 	attribute: "max-length"
-})], g.prototype, "maxLength", void 0), a([n({ type: String })], g.prototype, "type", void 0), a([r()], g.prototype, "_value", void 0), a([r()], g.prototype, "focused", void 0), a([i(".input-field")], g.prototype, "inputField", void 0), g = a([s("ds-search")], g);
+})], _.prototype, "maxLength", void 0), a([n({ type: String })], _.prototype, "type", void 0), a([r()], _.prototype, "_value", void 0), a([r()], _.prototype, "focused", void 0), a([i(".input-field")], _.prototype, "inputField", void 0), _ = a([s("ds-search")], _);
 //#endregion

package/dist-react/esm/components/ds-search-input/ds-search-input.js

@@ -5,14 +5,20 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
 import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as i } from "../base/UiKitElement.js";
 import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.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 { inputStatesMixin as c } from "../../mixins/inputStatesMixin.js";
-import { validateMaxLength as l } from "../../utils/validateMaxLength.js";
-import { commonStyles as u } from "./styles/common.styles.js";
+import { o as l } 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 { inputStatesMixin as u } from "../../mixins/inputStatesMixin.js";
+import "../ds-loader-spinner/ds-loader-spinner.js";
+import { validateMaxLength as d } from "../../utils/validateMaxLength.js";
+import { commonStyles as f } from "./styles/common.styles.js";
 //#region src/components/ds-search-input/ds-search-input.ts
-var d = class extends c(i) {
+var p = class extends u(i) {
 	constructor(...e) {
 		super(...e), this.size = "large", this.variant = "primary", this.loading = !1, this.helperText = "", this.forcedError = "", this.invalidError = "", this.dataAriaLabelRemoveButton = "", this.dataAriaLabelPositionButton = "", this.withPositionButton = !0, this.handleRemove = () => {
 			this.nativeInput.value = "", this.nativeInput.focus(), ["input", "change"].forEach((e) => this.nativeInput.dispatchEvent(new Event(e, {
@@ -27,7 +33,7 @@ var d = class extends c(i) {
 		};
 	}
 	static {
-		this.styles = [u];
+		this.styles = [f];
 	}
 	get classes() {
 		return {
@@ -45,7 +51,7 @@ var d = class extends c(i) {
 	}
 	render() {
 		return t`
-            <div part="container" class=${s(this.classes)}>
+            <div part="container" class=${c(this.classes)}>
                 <div part="input-container" class="input-container">
                     ${this.searchIconTemplate}
                     <slot></slot>
@@ -60,36 +66,32 @@ var d = class extends c(i) {
         `;
 	}
 	get searchIconTemplate() {
-		return this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": "magnifying-glass",
-			variant: "standard"
-		});
+		return s`<ds-icon class="icon" icon-name="magnifying-glass"></ds-icon>`;
 	}
 	get removeTemplate() {
-		return !this.nativeInput?.value?.length || this.loading ? e : this.componentFactory.createIconButton({
-			class: "remove-icon-button",
-			"icon-name": "cross",
-			disabled: !!this.nativeInput?.disabled,
-			size: this.size,
-			variant: "naked",
-			"@click": this.handleRemove,
-			"data-aria-label": this.dataAriaLabelRemoveButton || "remove button"
-		});
+		return !this.nativeInput?.value?.length || this.loading ? e : s`<ds-icon-button
+            class="remove-icon-button"
+            icon-name="cross"
+            ?disabled=${!!this.nativeInput?.disabled}
+            size=${l(this.size)}
+            variant="naked"
+            @click=${this.handleRemove}
+            data-aria-label=${this.dataAriaLabelRemoveButton || "remove button"}
+        ></ds-icon-button>`;
 	}
 	get positionTemplate() {
-		return this.loading || !this.withPositionButton ? e : this.componentFactory.createIconButton({
-			class: "position-icon-button",
-			"icon-name": "position",
-			disabled: !!this.nativeInput?.disabled,
-			size: this.size,
-			variant: "naked",
-			"@click": this.handleClickPositionButton,
-			"data-aria-label": this.dataAriaLabelPositionButton || "position button"
-		});
+		return this.loading || !this.withPositionButton ? e : s`<ds-icon-button
+            class="position-icon-button"
+            icon-name="position"
+            ?disabled=${!!this.nativeInput?.disabled}
+            size=${l(this.size)}
+            variant="naked"
+            @click=${this.handleClickPositionButton}
+            data-aria-label=${this.dataAriaLabelPositionButton || "position button"}
+        ></ds-icon-button>`;
 	}
 	get loaderSpinnerTemplate() {
-		return this.componentFactory.createLoaderSpinner({ show: this.loading });
+		return s`<ds-loader-spinner ?show=${this.loading}></ds-loader-spinner>`;
 	}
 	get footerTemplate() {
 		return !this.helperText?.length && !this.forcedError && (!this.inputStates.invalid || !this.invalidError) && Number(this.nativeInput?.maxLength) < 0 ? e : t`
@@ -112,30 +114,30 @@ var d = class extends c(i) {
 	}
 	get lengthTemplate() {
 		let n = this.nativeInput?.maxLength?.toString();
-		return l(n) ? t`<span class="char-counter">${this.inputStates.currentValue?.length || 0}/${n}</span>` : e;
+		return d(n) ? t`<span class="char-counter">${this.inputStates.currentValue?.length || 0}/${n}</span>` : e;
 	}
 };
-r([n({ type: String })], d.prototype, "size", void 0), r([n({ type: String })], d.prototype, "variant", void 0), r([n({
+r([n({ type: String })], p.prototype, "size", void 0), r([n({ type: String })], p.prototype, "variant", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], d.prototype, "loading", void 0), r([n({
+})], p.prototype, "loading", void 0), r([n({
 	type: String,
 	attribute: "helper-text"
-})], d.prototype, "helperText", void 0), r([n({
+})], p.prototype, "helperText", void 0), r([n({
 	type: String,
 	attribute: "forced-error"
-})], d.prototype, "forcedError", void 0), r([n({
+})], p.prototype, "forcedError", void 0), r([n({
 	type: String,
 	attribute: "invalid-error"
-})], d.prototype, "invalidError", void 0), r([n({
+})], p.prototype, "invalidError", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label-remove-button"
-})], d.prototype, "dataAriaLabelRemoveButton", void 0), r([n({
+})], p.prototype, "dataAriaLabelRemoveButton", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label-position-button"
-})], d.prototype, "dataAriaLabelPositionButton", void 0), r([n({
+})], p.prototype, "dataAriaLabelPositionButton", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "with-position-button"
-})], d.prototype, "withPositionButton", void 0), d = r([a("ds-search-input")], d);
+})], p.prototype, "withPositionButton", void 0), p = r([a("ds-search-input")], p);
 //#endregion

package/dist-react/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-react/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-react/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