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

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

@@ -5,23 +5,29 @@ 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 { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
-import { alignStyles as l, commonStyles as u, dialogStyles as d, fitStyles as f, fullScreenStyles as p } 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 { ViewportMixin as u } from "../../mixins/ViewportMixin.js";
+import "../ds-button/ds-button.js";
+import "../ds-icon-button/ds-icon-button.js";
+import { alignStyles as d, commonStyles as f, dialogStyles as p, fitStyles as m, fullScreenStyles as h } from "./styles/common.styles.js";
 //#region src/components/ds-modal/ds-modal.ts
-var m = class extends c(i) {
+var g = class extends u(i) {
 	constructor(...e) {
 		super(...e), this.withCloseButton = !0, this.variant = "fullScreen", this.zIndex = 2e3, this.disableScrollLock = !1, this.fullWidth = !1, this.vAlign = "default";
 	}
 	static {
 		this.styles = [
+			h,
 			p,
-			d,
+			m,
 			f,
-			u,
-			l
+			d
 		];
 	}
 	disconnectedCallback() {
@@ -43,7 +49,7 @@ var m = class extends c(i) {
 		};
 	}
 	get backdropTemplate() {
-		return this.variant === "dialog" ? t`<div class=${s(this.backdropClasses)} />` : e;
+		return this.variant === "dialog" ? t`<div class=${c(this.backdropClasses)} />` : e;
 	}
 	get buttonSize() {
 		return [
@@ -56,40 +62,34 @@ var m = class extends c(i) {
 		return this.variant === "dialog" || ["xs", "s"].includes(this.viewport) ? "small" : "medium";
 	}
 	get closeButtonTemplate() {
-		return this.withCloseButton ? this.componentFactory.createIconButton({
-			class: "close-button",
-			"data-aria-label": "close-button",
-			"@click": this.handleClickCloseButton,
-			size: this.closeButtonSize,
-			"icon-name": "cross",
-			mode: "light",
-			variant: "primary"
-		}) : e;
+		return this.withCloseButton ? s`<ds-icon-button
+            class="close-button"
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            size=${l(this.closeButtonSize)}
+            icon-name="cross"
+            mode="light"
+            variant="primary"
+        ></ds-icon-button>` : e;
 	}
 	get iconTemplate() {
-		return this.iconName ? this.componentFactory.createIcon({
-			class: "icon",
-			"icon-name": this.iconName,
-			size: 64
-		}) : e;
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${l(this.iconName)} size="64"></ds-icon>` : e;
 	}
 	get cancelButtonTemplate() {
-		return this.cancelButtonText ? this.componentFactory.createButton({
-			class: "cancel-button",
-			variant: "secondary",
-			size: this.buttonSize,
-			"@click": this.handleClickCancelButton,
-			children: this.cancelButtonText
-		}) : e;
+		return this.cancelButtonText ? s`<ds-button
+            class="cancel-button"
+            variant="secondary"
+            size=${l(this.buttonSize)}
+            @click=${this.handleClickCancelButton}
+        >${this.cancelButtonText}</ds-button>` : e;
 	}
 	get confirmButtonTemplate() {
-		return this.confirmButtonText ? this.componentFactory.createButton({
-			class: "confirm-button",
-			variant: "primary",
-			size: this.buttonSize,
-			"@click": this.handleClickConfirmButton,
-			children: this.confirmButtonText
-		}) : e;
+		return this.confirmButtonText ? s`<ds-button
+            class="confirm-button"
+            variant="primary"
+            size=${l(this.buttonSize)}
+            @click=${this.handleClickConfirmButton}
+        >${this.confirmButtonText}</ds-button>` : e;
 	}
 	get modalClasses() {
 		return {
@@ -123,12 +123,12 @@ var m = class extends c(i) {
             <div
                 role="dialog"
                 aria-labelledby="ds-modal-title"
-                class=${s(this.modalClasses)}
+                class=${c(this.modalClasses)}
                 @transitionend=${this.handleTransitionEnd}
             >
                 ${this.closeButtonTemplate}
                 ${this.iconTemplate}
-                <div class=${s(this.contentClasses)}>
+                <div class=${c(this.contentClasses)}>
                     <slot id="ds-modal-title" name="title"></slot>
                     <slot name="content"></slot>
                     ${this.cancelButtonTemplate}
@@ -169,32 +169,32 @@ r([n({
 	type: Boolean,
 	reflect: !0,
 	converter: o
-})], m.prototype, "open", void 0), r([n({
+})], g.prototype, "open", void 0), r([n({
 	type: Boolean,
 	attribute: "with-close-button",
 	converter: o
-})], m.prototype, "withCloseButton", void 0), r([n({
+})], g.prototype, "withCloseButton", void 0), r([n({
 	type: String,
 	attribute: "cancel-button-text"
-})], m.prototype, "cancelButtonText", void 0), r([n({
+})], g.prototype, "cancelButtonText", void 0), r([n({
 	type: String,
 	attribute: "confirm-button-text"
-})], m.prototype, "confirmButtonText", void 0), r([n({ type: String })], m.prototype, "variant", void 0), r([n({
+})], g.prototype, "confirmButtonText", void 0), r([n({ type: String })], g.prototype, "variant", void 0), r([n({
 	type: Number,
 	attribute: "z-index"
-})], m.prototype, "zIndex", void 0), r([n({
+})], g.prototype, "zIndex", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "disable-scroll-lock"
-})], m.prototype, "disableScrollLock", void 0), r([n({
+})], g.prototype, "disableScrollLock", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], m.prototype, "iconName", void 0), r([n({
+})], g.prototype, "iconName", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "full-width"
-})], m.prototype, "fullWidth", void 0), r([n({
+})], g.prototype, "fullWidth", void 0), r([n({
 	type: String,
 	attribute: "v-align"
-})], m.prototype, "vAlign", void 0), m = r([a("ds-modal")], m);
+})], g.prototype, "vAlign", void 0), g = r([a("ds-modal")], g);
 //#endregion

package/dist/esm/components/ds-password-input/ds-password-input.js

@@ -3,31 +3,35 @@ import { r as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/nod
 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 { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
-import { DsTextInput as i } from "../ds-text-input/ds-text-input.js";
+import { uiKitHtml as i } from "../../utils/uiKitHtml.js";
+import { o as a } 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 { DsTextInput as o } from "../ds-text-input/ds-text-input.js";
 //#region src/components/ds-password-input/ds-password-input.ts
-var a = class extends i {
+var s = class extends o {
 	constructor(...e) {
 		super(...e), this.dataAriaLabelHideButton = "", this.dataAriaLabelShowButton = "", this.visible = !1, this.handleClickIcon = () => {
 			this.visible ? (this.nativeInput.setAttribute("type", "password"), this.visible = !1) : (this.nativeInput.setAttribute("type", "text"), this.visible = !0);
 		};
 	}
 	get iconTemplate() {
-		return this.componentFactory.createIconButton({
-			class: "icon-button",
-			"icon-name": this.visible ? "eye-crossed-out" : "eye",
-			disabled: !!this.nativeInput?.disabled,
-			size: this.size,
-			variant: "naked",
-			"@click": this.handleClickIcon,
-			"data-aria-label": this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"
-		});
+		return i`<ds-icon-button
+            class="icon-button"
+            icon-name=${this.visible ? "eye-crossed-out" : "eye"}
+            ?disabled=${!!this.nativeInput?.disabled}
+            size=${a(this.size)}
+            variant="naked"
+            @click=${this.handleClickIcon}
+            data-aria-label=${this.visible ? this.dataAriaLabelHideButton || "hide" : this.dataAriaLabelShowButton || "show"}
+        ></ds-icon-button>`;
 	}
 };
 n([e({
 	type: String,
 	attribute: "data-aria-label-hide-button"
-})], a.prototype, "dataAriaLabelHideButton", void 0), n([e({
+})], s.prototype, "dataAriaLabelHideButton", void 0), n([e({
 	type: String,
 	attribute: "data-aria-label-show-button"
-})], a.prototype, "dataAriaLabelShowButton", void 0), n([t()], a.prototype, "visible", void 0), a = n([r("ds-password-input", { extendComponentNames: ["ds-text-input"] })], a);
+})], s.prototype, "dataAriaLabelShowButton", void 0), n([t()], s.prototype, "visible", void 0), s = n([r("ds-password-input", { extendComponentNames: ["ds-text-input"] })], s);
 //#endregion

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

@@ -5,18 +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 "../ds-icon/ds-icon.js";
-import { commonStyles as s } from "./styles/common.styles.js";
+import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-rating/ds-rating.ts
-var c = class extends r {
+var l = class extends r {
 	constructor(...e) {
 		super(...e), this.disabled = !1, this.hideRatingText = !1;
 	}
 	static {
-		this.styles = [s];
+		this.styles = [c];
 	}
 	get displayValue() {
 		if (this.value === void 0 || this.value === null || this.value < 0) return 0;
@@ -36,31 +37,27 @@ var c = class extends r {
 		let e = this.displayValue, t = [];
 		for (let n = 1; n <= 5; n++) {
 			let r = this.getStarIconName(n, e);
-			r && t.push(this.componentFactory.createIcon({
-				class: "star-icon",
-				"icon-name": r,
-				size: 16
-			}));
+			r && t.push(o`<ds-icon class="star-icon" icon-name=${r} size="16"></ds-icon>`);
 		}
 		return t;
 	}
 	render() {
 		let t = this.value !== void 0 && this.value >= 0 ? this.value : 0, n = Math.max(0, Math.min(5, t)).toString();
 		return e`
-            <div class=${o(this.classes)} aria-label=${`Rating: ${n} out of 5`} role="img">
+            <div class=${s(this.classes)} aria-label=${`Rating: ${n} out of 5`} role="img">
                 <div class="stars-wrapper">${this.starsTemplate}</div>
                 ${this.hideRatingText ? "" : e`<span class="rating-text">${n}</span>`}
             </div>
         `;
 	}
 };
-n([t({ type: Number })], c.prototype, "value", void 0), n([t({
+n([t({ type: Number })], l.prototype, "value", void 0), n([t({
 	type: Boolean,
 	converter: a,
 	reflect: !0
-})], c.prototype, "disabled", void 0), n([t({
+})], l.prototype, "disabled", void 0), n([t({
 	type: Boolean,
 	converter: a,
 	attribute: "hide-rating-text"
-})], c.prototype, "hideRatingText", void 0), c = n([i("ds-rating")], c);
+})], l.prototype, "hideRatingText", void 0), l = n([i("ds-rating")], l);
 //#endregion

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