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

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

@@ -8,12 +8,11 @@ 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 { o as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
+import { iconsManager as c } from "../../utils/IconsManager.js";
+import { o as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/unsafe-html.js";
-import { htmlWithTokens as l } from "../../utils/htmlWithTokens.js";
-import { iconsManager as u } from "../../utils/IconsManager.js";
 //#region src/components/ds-icon/ds-icon.ts
-var d = class extends o {
+var u = class extends o {
 	static {
 		this.styles = t`
         :host {
@@ -25,7 +24,7 @@ var d = class extends o {
 	#e = 0;
 	constructor() {
 		super(), this.iconHtml = "", this.getIcon = async () => {
-			let e = ++this.#e, t = await u.fetchIcon(this.iconName);
+			let e = ++this.#e, t = await c.fetchIcon(this.iconName);
 			e === this.#e && (this.iconHtml = t);
 		}, e.subscribe("theme", this.getIcon);
 	}
@@ -36,20 +35,21 @@ var d = class extends o {
 		return e ? `${e}px` : t ? "auto" : this.size ? `${this.size}px` : n;
 	}
 	get styleTokens() {
-		return l`
+		let e = this.getDimension(this.width, this.height, "var(--ui-kit-icon-width, 20px)"), t = this.getDimension(this.height, this.width, "var(--ui-kit-icon-height, 20px)"), r = this.color ? this.color : "var(--ui-kit-icon-color, black)";
+		return n`
             <style>
                 .ds-icon {
                     display: inline-block;
-                    width: ${this.getDimension(this.width, this.height, "var(--private-ui-kit-icon-width, var(--ui-kit-icon-width, 20px))")};
-                    height: ${this.getDimension(this.height, this.width, "var(--private-ui-kit-icon-height, var(--ui-kit-icon-height, 20px))")};
+                    width: ${e};
+                    height: ${t};
                 }
 
                 .ds-icon-color {
-                    fill: ${this.color ? this.color : "var(--private-ui-kit-icon-color, var(--ui-kit-icon-color, black))"};
+                    fill: ${r};
                 }
 
                 .ds-icon-color-stroke {
-                    stroke: ${this.color ? this.color : "var(--private-ui-kit-icon-color, var(--ui-kit-icon-color, black))"};
+                    stroke: ${r};
                 }
             </style>
         `;
@@ -57,19 +57,19 @@ var d = class extends o {
 	render() {
 		return n`
             ${this.styleTokens}
-            ${this.iconHtml ? c(this.iconHtml) : n`<svg class="ds-icon">x</svg>`}
+            ${this.iconHtml ? l(this.iconHtml) : n`<svg class="ds-icon">x</svg>`}
         `;
 	}
 };
 a([r({
 	type: String,
 	attribute: "icon-name"
-})], d.prototype, "iconName", void 0), a([r({
+})], u.prototype, "iconName", void 0), a([r({
 	type: String,
 	attribute: "color"
-})], d.prototype, "color", void 0), a([r({ type: Number })], d.prototype, "width", void 0), a([r({ type: Number })], d.prototype, "height", void 0), a([r({
+})], u.prototype, "color", void 0), a([r({ type: Number })], u.prototype, "width", void 0), a([r({ type: Number })], u.prototype, "height", void 0), a([r({
 	type: Number,
 	attribute: "size"
-})], d.prototype, "size", void 0), a([i()], d.prototype, "iconHtml", void 0), d = a([s("ds-icon")], d);
+})], u.prototype, "size", void 0), a([i()], u.prototype, "iconHtml", void 0), u = a([s("ds-icon")], u);
 //#endregion
-export { d as DsIcon };
+export { u as DsIcon };

package/dist/esm/components/ds-icon-button/ds-icon-button.js

@@ -6,20 +6,19 @@ 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 { htmlWithTokens as s } from "../../utils/htmlWithTokens.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.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 { ViewportMixin as l } from "../../mixins/ViewportMixin.js";
-import { objectConverter as u } from "../../utils/objectConverter.js";
-import { r as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { buttonStyles as f } from "./styles/common.styles.js";
+import { ViewportMixin as c } from "../../mixins/ViewportMixin.js";
+import { objectConverter as l } from "../../utils/objectConverter.js";
+import { r as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { buttonStyles as d } from "./styles/common.styles.js";
 //#region src/components/ds-icon-button/ds-icon-button.ts
-var p = class extends l(i) {
+var f = class extends c(i) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.htmlTagName = "button";
 	}
 	static {
-		this.styles = [f];
+		this.styles = [d];
 	}
 	get iconTemplate() {
 		return this.iconName ? this.componentFactory.createIcon({
@@ -47,10 +46,10 @@ var p = class extends l(i) {
 		};
 	}
 	updated(e) {
-		super.updated(e), this.customBackground ? this.style.setProperty("--ui-kit-button-custom-bg", this.customBackground) : this.style.removeProperty("--ui-kit-button-custom-bg"), this.customColor ? this.style.setProperty("--ui-kit-button-custom-color", this.customColor) : this.style.removeProperty("--ui-kit-button-custom-color");
+		super.updated(e), this.customBackground ? this.style.setProperty("--ui-kit-private-button-custom-bg", this.customBackground) : this.style.removeProperty("--ui-kit-private-button-custom-bg"), this.customColor ? this.style.setProperty("--ui-kit-private-button-custom-color", this.customColor) : this.style.removeProperty("--ui-kit-private-button-custom-color");
 	}
 	get variantColorTokens() {
-		return s`
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -62,11 +61,11 @@ var p = class extends l(i) {
 	render() {
 		return t`
             ${this.variantColorTokens}
-            ${d(this.htmlTagName || "button", [
+            ${u(this.htmlTagName || "button", [
 			["button", () => t`
                         <button
                             ?disabled=${this.disabled}
-                            class=${c(this.classes)}
+                            class=${s(this.classes)}
                             aria-label=${this.dataAriaLabel}
                         >
                             ${this.iconTemplate}
@@ -75,7 +74,7 @@ var p = class extends l(i) {
 			["a", () => t`
                         <a
                             ?disabled=${this.disabled}
-                            class=${c(this.classes)}
+                            class=${s(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -86,7 +85,7 @@ var p = class extends l(i) {
                         </a>
                     `],
 			["custom", () => t`
-                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
+                        <div class=${s(this.classes)} @click=${this.handleCustomClick}>
                             <slot></slot>
                         </div>
                     `]
@@ -97,39 +96,39 @@ var p = class extends l(i) {
 r([n({
 	type: String,
 	reflect: !0
-})], p.prototype, "variant", void 0), r([n({
+})], f.prototype, "variant", void 0), r([n({
 	type: String,
 	attribute: "custom-background"
-})], p.prototype, "customBackground", void 0), r([n({
+})], f.prototype, "customBackground", void 0), r([n({
 	type: String,
 	attribute: "custom-color"
-})], p.prototype, "customColor", void 0), r([n({
+})], f.prototype, "customColor", void 0), r([n({
 	type: String,
 	reflect: !0
-})], p.prototype, "mode", void 0), r([n({
+})], f.prototype, "mode", void 0), r([n({
 	type: String,
-	converter: u
-})], p.prototype, "size", void 0), r([n({
+	converter: l
+})], f.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], p.prototype, "disabled", void 0), r([n({
+})], f.prototype, "disabled", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], p.prototype, "iconName", void 0), r([n({
+})], f.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], p.prototype, "htmlTagName", void 0), r([n({
+})], f.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	attribute: "data-aria-label"
-})], p.prototype, "dataAriaLabel", void 0), r([n({
+})], f.prototype, "dataAriaLabel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], p.prototype, "href", void 0), r([n({
+})], f.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], p.prototype, "rel", void 0), r([n({
+})], f.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], p.prototype, "target", void 0), p = r([a("ds-icon-button")], p);
+})], f.prototype, "target", void 0), f = r([a("ds-icon-button")], f);
 //#endregion
-export { p as DsIconButton };
+export { f as DsIconButton };

package/dist/esm/components/ds-link-button/ds-link-button.js

@@ -7,18 +7,17 @@ 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 { htmlWithTokens as s } from "../../utils/htmlWithTokens.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.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 { r as l } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { commonStyles as u } from "./styles/common.styles.js";
+import { r as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-link-button/ds-link-button.ts
-var d = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.mode = "light", this.size = "large", this.underline = !1, this.disabled = !1, this.iconName = "arrow-right", this.iconPosition = "right";
 	}
 	static {
-		this.styles = [u];
+		this.styles = [l];
 	}
 	get iconTemplate() {
 		return this.iconName === "none" ? e : this.componentFactory.createIcon({
@@ -39,7 +38,7 @@ var d = class extends i {
 		this.href || e.preventDefault();
 	}
 	get styleTokens() {
-		return s`
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -51,15 +50,15 @@ var d = class extends i {
 	render() {
 		return t`
             ${this.styleTokens}
-            ${l(this.htmlTagName || "button", [["button", () => t`
-                        <button class=${c(this.classes)} ?disabled=${this.disabled}>
+            ${c(this.htmlTagName || "button", [["button", () => t`
+                        <button class=${s(this.classes)} ?disabled=${this.disabled}>
                             ${this.iconPosition === "left" ? this.iconTemplate : e}
                             <span class="label"><slot></slot></span>
                             ${this.iconPosition === "right" ? this.iconTemplate : e}
                         </button>
                     `], ["a", () => t`
                         <a
-                            class=${c(this.classes)}
+                            class=${s(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -77,29 +76,29 @@ var d = class extends i {
 r([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "mode", void 0), r([n({ type: String })], d.prototype, "size", void 0), r([n({
+})], u.prototype, "mode", void 0), r([n({ type: String })], u.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], d.prototype, "underline", void 0), r([n({
+})], u.prototype, "underline", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], d.prototype, "disabled", void 0), r([n({
+})], u.prototype, "disabled", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], d.prototype, "htmlTagName", void 0), r([n({
+})], u.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "href", void 0), r([n({
+})], u.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "rel", void 0), r([n({
+})], u.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "target", void 0), r([n({
+})], u.prototype, "target", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], d.prototype, "iconName", void 0), r([n({
+})], u.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "icon-position"
-})], d.prototype, "iconPosition", void 0), d = r([a("ds-link-button")], d);
+})], u.prototype, "iconPosition", void 0), u = r([a("ds-link-button")], u);
 //#endregion

package/dist/esm/components/ds-list/styles/common.styles.js

@@ -1,4 +1,5 @@
-import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/components/ds-list/styles/common.styles.ts
 var t = e`
     :host {

package/dist/esm/components/ds-list-item/styles/common.styles.js

@@ -1,4 +1,5 @@
-import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/components/ds-list-item/styles/common.styles.ts
 var t = e`
     :host {

package/dist/esm/components/ds-loader-dots/ds-loader-dots.js

@@ -6,17 +6,16 @@ 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 { htmlWithTokens as s } from "../../utils/htmlWithTokens.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.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 l } from "./styles/common.styles.js";
+import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-loader-dots/ds-loader-dots.ts
-var u = class extends i {
+var l = class extends i {
 	constructor(...e) {
 		super(...e), this.show = !1, this.mode = "light", this.size = "large";
 	}
 	static {
-		this.styles = [l];
+		this.styles = [c];
 	}
 	get classes() {
 		return {
@@ -26,7 +25,7 @@ var u = class extends i {
 		};
 	}
 	get styleTokens() {
-		return s`
+		return t`
                 <style>
                     :host {
                         color-scheme: ${this.mode};
@@ -37,7 +36,7 @@ var u = class extends i {
 	render() {
 		return this.show ? t`
                   ${this.styleTokens}
-                  <div class=${c(this.classes)}>
+                  <div class=${s(this.classes)}>
                       <div class="dot first"></div>
                       <div class="dot middle"></div>
                       <div class="dot last"></div>
@@ -48,8 +47,8 @@ var u = class extends i {
 r([n({
 	type: Boolean,
 	converter: o
-})], u.prototype, "show", void 0), r([n({
+})], l.prototype, "show", void 0), r([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), r([n({ type: String })], u.prototype, "size", void 0), u = r([a("ds-loader-dots")], u);
+})], l.prototype, "mode", void 0), r([n({ type: String })], l.prototype, "size", void 0), l = r([a("ds-loader-dots")], l);
 //#endregion

package/dist/esm/components/ds-loader-dots/styles/common.styles.js

@@ -1,4 +1,5 @@
-import { cssWithTokens as e } from "../../../utils/cssWithTokens.js";
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 //#region src/components/ds-loader-dots/styles/common.styles.ts
 var t = e`
     .container {
@@ -6,15 +7,15 @@ var t = e`
         justify-content: center;
         align-items: center;
     }
-    
+
     .dot.middle {
         animation-delay: 0.4s;
     }
-    
+
     .dot.last {
         animation-delay: 0.8s;
     }
-    
+
     .dot {
         border-radius: 50%;
         animation-name: loader;
@@ -25,10 +26,18 @@ var t = e`
     }
 
     @keyframes loader {
-        0% { opacity: 1 }
-        18% { opacity: 0.2 }
-        82% { opacity: 0.6 }
-        100% { opacity: 1 }
+        0% {
+            opacity: 1;
+        }
+        18% {
+            opacity: 0.2;
+        }
+        82% {
+            opacity: 0.6;
+        }
+        100% {
+            opacity: 1;
+        }
     }
 `;
 //#endregion

package/dist/esm/components/ds-loader-logo/ds-loader-logo.js

@@ -19,7 +19,7 @@ var c = class extends i {
 		return t`
                 <style>
                     :host {
-                        --ui-kit-icon-color: ${this.color || "var(--ui-kit-loader-logo-icon-color)"};
+                        --ui-kit-icon-color: ${this.color || "var(--ui-kit-private-loader-logo-icon-color)"};
                     }
                 </style>
         `;

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

@@ -5,18 +5,17 @@ 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 { htmlWithTokens as o } from "../../utils/htmlWithTokens.js";
-import { e as s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as o } 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 c, containerStyles as l } from "./styles/common.styles.js";
-import { themeConfig as u } from "./theme-config.js";
+import { commonStyles as s, containerStyles as c } from "./styles/common.styles.js";
+import { themeConfig as l } from "./theme-config.js";
 //#region src/components/ds-logo/ds-logo.ts
-var d = class extends i {
+var u = class extends i {
 	constructor(...e) {
 		super(...e), this.size = "xxsmall", this.mode = "light";
 	}
 	static {
-		this.styles = [c, l];
+		this.styles = [s, c];
 	}
 	get logoTemplate() {
 		return this.componentFactory.createIcon({
@@ -25,7 +24,7 @@ var d = class extends i {
 		});
 	}
 	get logoWordmarkTemplate() {
-		return !this.theme || !u[this.theme]?.["show-wordmark"] ? e : this.componentFactory.createIcon({
+		return !this.theme || !l[this.theme]?.["show-wordmark"] ? e : this.componentFactory.createIcon({
 			class: "icon-wordmark",
 			"icon-name": "logo-wordmark"
 		});
@@ -38,7 +37,7 @@ var d = class extends i {
 		};
 	}
 	get styleTokens() {
-		return o`
+		return t`
                 <style>
                     :host {
                         color-scheme: ${this.mode};
@@ -49,15 +48,15 @@ var d = class extends i {
 	render() {
 		return t`
             ${this.styleTokens}
-            <div data-testid="ds-logo-container" class=${s(this.classes)}>
+            <div data-testid="ds-logo-container" class=${o(this.classes)}>
                 ${this.logoTemplate}
                 ${this.logoWordmarkTemplate}
             </div>
         `;
 	}
 };
-r([n({ type: String })], d.prototype, "size", void 0), r([n({
+r([n({ type: String })], u.prototype, "size", void 0), r([n({
 	type: String,
 	reflect: !0
-})], d.prototype, "mode", void 0), d = r([a("ds-logo")], d);
+})], u.prototype, "mode", void 0), u = r([a("ds-logo")], u);
 //#endregion

package/dist/esm/components/ds-map-pin/styles/common.styles.js

@@ -4,7 +4,7 @@ import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 var t = e`
     :host {
         display: inline-block;
-        --ui-kit-icon-color: var(--ui-kit-map-pin-icon-color);
+        --ui-kit-icon-color: var(--ui-kit-private-map-pin-icon-color);
     }
 
     .container {

package/dist/esm/components/ds-navigation-controls/styles/common.styles.js

@@ -13,7 +13,7 @@ var t = e`
 
     ::slotted(div) {
         display: flex;
-        gap: var(--ui-kit-navigation-controls-section-gap, 12px);
+        gap: var(--ui-kit-private-navigation-controls-section-gap, 12px);
         align-items: center;
     }
 `;

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

@@ -7,12 +7,11 @@ 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 { htmlWithTokens as s } from "../../utils/htmlWithTokens.js";
-import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.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 l } from "./styles/common.styles.js";
+import { commonStyles as c } from "./styles/common.styles.js";
 //#region src/components/ds-radio/ds-radio.ts
-var u = class extends i {
+var l = class extends i {
 	constructor(...e) {
 		super(...e), this.readonly = !1, this.checked = !1, this.disabled = !1, this.mode = "light", this.size = "large", this.handleClickInput = (e) => {
 			this.readonly && e.preventDefault();
@@ -29,7 +28,7 @@ var u = class extends i {
 		};
 	}
 	static {
-		this.styles = [l];
+		this.styles = [c];
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.input = document.createElement("input"), this.input.type = "radio", this.input.slot = "radio", this.input.ariaLabel = this.value, this.input.addEventListener("click", this.handleClickInput), this.appendChild(this.input);
@@ -52,7 +51,7 @@ var u = class extends i {
 		};
 	}
 	get styleTokens() {
-		return s`
+		return e`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -64,7 +63,7 @@ var u = class extends i {
 	render() {
 		return e`
             ${this.styleTokens}
-            <label @click=${this.handleClickLabel} class=${c(this.labelClasses)}>
+            <label @click=${this.handleClickLabel} class=${s(this.labelClasses)}>
                 <slot name="radio"></slot>
                 <slot></slot>
             </label>
@@ -75,22 +74,22 @@ r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "readonly", void 0), r([t({
+})], l.prototype, "readonly", void 0), r([t({
 	type: String,
 	reflect: !0
-})], u.prototype, "name", void 0), r([t({ type: String })], u.prototype, "value", void 0), r([t({
+})], l.prototype, "name", void 0), r([t({ type: String })], l.prototype, "value", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "checked", void 0), r([t({
+})], l.prototype, "checked", void 0), r([t({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "disabled", void 0), r([t({
+})], l.prototype, "disabled", void 0), r([t({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), r([t({ type: String })], u.prototype, "size", void 0), r([n({
+})], l.prototype, "mode", void 0), r([t({ type: String })], l.prototype, "size", void 0), r([n({
 	slot: "",
 	flatten: !0
-})], u.prototype, "_defaultSlotNodes", void 0), u = r([a("ds-radio")], u);
+})], l.prototype, "_defaultSlotNodes", void 0), l = r([a("ds-radio")], l);
 //#endregion