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

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

@@ -6,36 +6,34 @@ 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 { n as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { buttonStyles as p, loadingDotsStyles as m, textStyles as h } 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 { n as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { buttonStyles as f, loadingDotsStyles as p, textStyles as m } from "./styles/common.styles.js";
 //#region src/components/ds-button/ds-button.ts
-var g = class extends l(i) {
+var h = class extends c(i) {
 	constructor(...e) {
 		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
 	}
 	static {
 		this.styles = [
-			p,
-			h,
-			m
+			f,
+			m,
+			p
 		];
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.closestForm = this.closest("form");
 	}
 	get classes() {
-		let e = typeof this.size == "string" ? this.size : this.size[this.viewport], t = !!(this.customBackground || this.customColor);
+		let e = typeof this.size == "string" ? this.size : this.size[this.viewport];
 		return {
 			button: !0,
 			[`tag-${this.htmlTagName}`]: !0,
 			[`variant-${this.variant}`]: !0,
-			custom: t,
 			[e]: !!e,
 			[this.mode]: !!this.mode,
 			rounded: this.rounded,
@@ -76,11 +74,8 @@ var g = class extends l(i) {
 	get contentTemplate() {
 		return this.loading && this.textLoading ? t`${this.textLoading}` : t`<slot></slot>`;
 	}
-	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");
-	}
 	get cssTokens() {
-		return s`
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -95,45 +90,45 @@ var g = class extends l(i) {
 	render() {
 		return t`
             ${this.cssTokens}
-            ${d(this.htmlTagName || "button", [
+            ${u(this.htmlTagName || "button", [
 			["button", () => t`
                         <button
-                            class=${c(this.classes)}
+                            class=${s(this.classes)}
                             aria-label=${this.textContent?.replace(/^\s+|\s+$/g, "")}
                             type=${this.type}
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${f(this.iconPosition === "left", () => t` ${this.iconTemplate} `)}
+                            ${d(this.iconPosition === "left", () => t` ${this.iconTemplate} `)}
                             <span class="container">
                                 ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${f(this.iconPosition === "right", () => t` ${this.iconTemplate} `)}
+                            ${d(this.iconPosition === "right", () => t` ${this.iconTemplate} `)}
                         </button>
                     `],
 			["a", () => t`
                         <a
-                            class=${c(this.classes)}
+                            class=${s(this.classes)}
                             aria-label=${this.textContent?.replace(/^\s+|\s+$/g, "")}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
                             @click=${this.handleClick}
                         >
-                            ${f(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                            ${d(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                             <span class="container">
                                 ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${f(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
+                            ${d(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </a>
                     `],
 			["custom", () => t`
-                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
-                            ${f(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                        <div class=${s(this.classes)} @click=${this.handleCustomClick}>
+                            ${d(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                             ${this.loading && this.textLoading ? t`<span class="container">${this.textLoading}${this.loadingTemplate}</span>` : t`<slot></slot>${this.loadingTemplate}`}
-                            ${f(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
+                            ${d(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </div>
                     `]
 		])}
@@ -143,55 +138,49 @@ var g = class extends l(i) {
 r([n({
 	type: String,
 	reflect: !0
-})], g.prototype, "variant", void 0), r([n({
+})], h.prototype, "variant", void 0), r([n({
 	type: String,
 	reflect: !0
-})], g.prototype, "mode", void 0), r([n({
+})], h.prototype, "mode", void 0), r([n({
 	type: String,
-	converter: u
-})], g.prototype, "size", void 0), r([n({
+	converter: l
+})], h.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], g.prototype, "disabled", void 0), r([n({
+})], h.prototype, "disabled", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], g.prototype, "destructive", void 0), r([n({
+})], h.prototype, "destructive", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], g.prototype, "iconName", void 0), r([n({
+})], h.prototype, "iconName", void 0), r([n({
 	type: String,
 	attribute: "html-tag-name"
-})], g.prototype, "htmlTagName", void 0), r([n({
+})], h.prototype, "htmlTagName", void 0), r([n({
 	type: String,
 	reflect: !0
-})], g.prototype, "href", void 0), r([n({
+})], h.prototype, "href", void 0), r([n({
 	type: String,
 	reflect: !0
-})], g.prototype, "rel", void 0), r([n({
+})], h.prototype, "rel", void 0), r([n({
 	type: String,
 	reflect: !0
-})], g.prototype, "target", void 0), r([n({ type: String })], g.prototype, "type", void 0), r([n({
+})], h.prototype, "target", void 0), r([n({ type: String })], h.prototype, "type", void 0), r([n({
 	type: String,
 	attribute: "icon-position"
-})], g.prototype, "iconPosition", void 0), r([n({
+})], h.prototype, "iconPosition", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], g.prototype, "rounded", void 0), r([n({
+})], h.prototype, "rounded", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	attribute: "full-width"
-})], g.prototype, "fullWidth", void 0), r([n({
+})], h.prototype, "fullWidth", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], g.prototype, "loading", void 0), r([n({
+})], h.prototype, "loading", void 0), r([n({
 	type: String,
 	attribute: "text-loading"
-})], g.prototype, "textLoading", void 0), r([n({
-	type: String,
-	attribute: "custom-background"
-})], g.prototype, "customBackground", void 0), r([n({
-	type: String,
-	attribute: "custom-color"
-})], g.prototype, "customColor", void 0), g = r([a("ds-button")], g);
+})], h.prototype, "textLoading", void 0), h = r([a("ds-button")], h);
 //#endregion
-export { g as DsButton };
+export { h as DsButton };

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

@@ -13,7 +13,7 @@ var t = e`
         box-sizing: border-box;
         justify-content: center;
         align-items: center;
-        gap: var(--ui-kit-button-gap, 0);
+        gap: var(--ui-kit-private-button-gap, 0);
         padding: 0;
         margin: 0;
         background: transparent;
@@ -38,7 +38,7 @@ var t = e`
         width: auto;
         flex: 1;
         min-width: 0;
-        gap: var(--ui-kit-button-gap, 0);
+        gap: var(--ui-kit-private-button-gap, 0);
         padding: 0;
         margin: 0;
         background: transparent;

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

@@ -8,14 +8,13 @@ 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 { htmlWithTokens as l } from "../../utils/htmlWithTokens.js";
-import { e as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.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 { checkboxGroupDisabledContext as d, checkboxGroupErrorContext as f, checkboxGroupSizeContext as p } from "../ds-checkbox-group/ds-checkbox-group.js";
-import { FormAssociatedMixin as m } from "../../mixins/FormAssociatedMixin.js";
-import { commonStyles as h } from "./styles/common.styles.js";
+import { checkboxGroupDisabledContext as u, checkboxGroupErrorContext as d, checkboxGroupSizeContext as f } from "../ds-checkbox-group/ds-checkbox-group.js";
+import { FormAssociatedMixin as p } from "../../mixins/FormAssociatedMixin.js";
+import { commonStyles as m } from "./styles/common.styles.js";
 //#region src/components/ds-checkbox/ds-checkbox.ts
-var g = class extends m(o) {
+var h = class extends p(o) {
 	constructor(...e) {
 		super(...e), this.inputPlacement = "left", this._checked = void 0, this._checkedState = !1, this.required = !1, this._disabled = !1, this.mode = "light", this._size = "medium", this.helperText = "", this.infoText = "", this._forcedError = "", this.invalidError = "", this.indeterminate = !1, this.dataAriaLabel = "";
 	}
@@ -26,25 +25,25 @@ var g = class extends m(o) {
 		this._checked = e;
 	}
 	static {
-		this.styles = [h];
+		this.styles = [m];
 	}
 	connectedCallback() {
 		super.connectedCallback(), queueMicrotask(() => {
 			this.createContextConsumers([
 				{
-					context: d,
+					context: u,
 					callback: (e) => {
 						this.disabledGroup = e;
 					}
 				},
 				{
-					context: f,
+					context: d,
 					callback: (e) => {
 						this.errorGroup = e;
 					}
 				},
 				{
-					context: p,
+					context: f,
 					callback: (e) => {
 						this.sizeGroup = e;
 					}
@@ -113,7 +112,7 @@ var g = class extends m(o) {
 		});
 	}
 	get styleTokens() {
-		return l`
+		return n`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -125,7 +124,7 @@ var g = class extends m(o) {
 	render() {
 		return n`
             ${this.styleTokens}
-            <div class=${u(this.classes)}>
+            <div class=${l(this.classes)}>
                 <label>
                     <span class="checkmark-container">
                         <span class="checkmark">
@@ -157,44 +156,44 @@ var g = class extends m(o) {
         `;
 	}
 };
-a([r({ type: String })], g.prototype, "name", void 0), a([r({ type: String })], g.prototype, "value", void 0), a([r({
+a([r({ type: String })], h.prototype, "name", void 0), a([r({ type: String })], h.prototype, "value", void 0), a([r({
 	type: String,
 	attribute: "input-placement"
-})], g.prototype, "inputPlacement", void 0), a([r({
+})], h.prototype, "inputPlacement", void 0), a([r({
 	type: Boolean,
 	attribute: "checked",
 	converter: c,
 	reflect: !0
-})], g.prototype, "_checked", void 0), a([i()], g.prototype, "_checkedState", void 0), a([r({
+})], h.prototype, "_checked", void 0), a([i()], h.prototype, "_checkedState", void 0), a([r({
 	type: Boolean,
 	converter: c
-})], g.prototype, "required", void 0), a([r({
+})], h.prototype, "required", void 0), a([r({
 	type: Boolean,
 	converter: c,
 	attribute: "disabled"
-})], g.prototype, "_disabled", void 0), a([r({
+})], h.prototype, "_disabled", void 0), a([r({
 	type: String,
 	reflect: !0
-})], g.prototype, "mode", void 0), a([r({
+})], h.prototype, "mode", void 0), a([r({
 	type: String,
 	attribute: "size"
-})], g.prototype, "_size", void 0), a([r({
+})], h.prototype, "_size", void 0), a([r({
 	type: String,
 	attribute: "helper-text"
-})], g.prototype, "helperText", void 0), a([r({
+})], h.prototype, "helperText", void 0), a([r({
 	type: String,
 	attribute: "info-text"
-})], g.prototype, "infoText", void 0), a([r({
+})], h.prototype, "infoText", void 0), a([r({
 	type: String,
 	attribute: "forced-error"
-})], g.prototype, "_forcedError", void 0), a([r({
+})], h.prototype, "_forcedError", void 0), a([r({
 	type: String,
 	attribute: "invalid-error"
-})], g.prototype, "invalidError", void 0), a([r({
+})], h.prototype, "invalidError", void 0), a([r({
 	type: Boolean,
 	converter: c
-})], g.prototype, "indeterminate", void 0), a([r({
+})], h.prototype, "indeterminate", void 0), a([r({
 	type: String,
 	attribute: "data-aria-label"
-})], g.prototype, "dataAriaLabel", void 0), a([i()], g.prototype, "disabledGroup", void 0), a([i()], g.prototype, "errorGroup", void 0), a([i()], g.prototype, "sizeGroup", void 0), g = a([s("ds-checkbox")], g);
+})], h.prototype, "dataAriaLabel", void 0), a([i()], h.prototype, "disabledGroup", void 0), a([i()], h.prototype, "errorGroup", void 0), a([i()], h.prototype, "sizeGroup", void 0), h = a([s("ds-checkbox")], h);
 //#endregion

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

@@ -6,19 +6,18 @@ 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-chip/ds-chip.ts
-var u = class extends i {
+var l = class extends i {
 	constructor(...e) {
 		super(...e), this.mode = "light", this.size = "large", this.selected = !1, this.deselectable = !1, this.slottedText = "", this.handleSlotChange = (e) => {
 			this.slottedText = e.target.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent.trim()).join(" "), this.requestUpdate();
 		};
 	}
 	static {
-		this.styles = [l];
+		this.styles = [c];
 	}
 	get classes() {
 		return {
@@ -31,7 +30,7 @@ var u = class extends i {
 		};
 	}
 	get styleTokens() {
-		return s`
+		return t`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
@@ -89,7 +88,7 @@ var u = class extends i {
                 aria-label=${`chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
-                class=${c(this.classes)}
+                class=${s(this.classes)}
                 @click=${this.handleClick}
                 @keydown=${this.handleKeyDown}
             >
@@ -100,21 +99,21 @@ var u = class extends i {
         `;
 	}
 };
-r([n({ type: String })], u.prototype, "value", void 0), r([n({
+r([n({ type: String })], l.prototype, "value", void 0), r([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "mode", void 0), r([n({
+})], l.prototype, "mode", void 0), r([n({
 	type: String,
 	reflect: !0
-})], u.prototype, "size", void 0), r([n({
+})], l.prototype, "size", void 0), r([n({
 	type: Boolean,
 	converter: o,
 	reflect: !0
-})], u.prototype, "selected", void 0), r([n({
+})], l.prototype, "selected", void 0), r([n({
 	type: Boolean,
 	converter: o
-})], u.prototype, "deselectable", void 0), r([n({
+})], l.prototype, "deselectable", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], u.prototype, "iconName", void 0), u = r([a("ds-chip")], u);
+})], l.prototype, "iconName", void 0), l = r([a("ds-chip")], l);
 //#endregion

package/dist/esm/components/ds-dialog-body/ds-dialog-body.js

@@ -3,20 +3,19 @@ import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
 import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
 import { UiKitElement as n } from "../base/UiKitElement.js";
 import { customUiKitElement as r } from "../../decorators/customUiKitElement.js";
-import { htmlWithTokens as i } from "../../utils/htmlWithTokens.js";
-import { e as a } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as i } 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 o } from "./styles/common.styles.js";
+import { commonStyles as a } from "./styles/common.styles.js";
 //#region src/components/ds-dialog-body/ds-dialog-body.ts
-var s = class extends n {
+var o = class extends n {
 	static {
-		this.styles = [o];
+		this.styles = [a];
 	}
 	get classes() {
 		return { container: !0 };
 	}
 	get styleTokens() {
-		return i`
+		return e`
                 <style>
                     :host{
                         grid-area: body;
@@ -27,7 +26,7 @@ var s = class extends n {
 	render() {
 		return e`
             ${this.styleTokens}
-            <div data-testid="ds-dialog-body-container" class=${a(this.classes)}>
+            <div data-testid="ds-dialog-body-container" class=${i(this.classes)}>
                 <slot name="description"></slot>
                 <slot name="image"></slot>
                 <slot></slot>
@@ -35,5 +34,5 @@ var s = class extends n {
         `;
 	}
 };
-s = t([r("ds-dialog-body")], s);
+o = t([r("ds-dialog-body")], o);
 //#endregion

package/dist/esm/components/ds-dialog-header/ds-dialog-header.js

@@ -5,23 +5,22 @@ 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 } from "./styles/common.styles.js";
+import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-dialog-header/ds-dialog-header.ts
-var l = class extends i {
+var c = class extends i {
 	constructor(...e) {
 		super(...e), this.title = "primary", this.iconSize = 32;
 	}
 	static {
-		this.styles = [c];
+		this.styles = [s];
 	}
 	get classes() {
 		return { container: !0 };
 	}
 	get styleTokens() {
-		return o`
+		return t`
                 <style>
                     :host{
                         grid-area: header;
@@ -39,7 +38,7 @@ var l = class extends i {
 	render() {
 		return t`
             ${this.styleTokens}
-            <div data-testid="ds-dialog-header-container" class=${s(this.classes)}>
+            <div data-testid="ds-dialog-header-container" class=${o(this.classes)}>
                 <div class="title-container">
                     ${this.iconTemplate}
                     <div class="title">${this.title}</div>
@@ -49,11 +48,11 @@ var l = class extends i {
         `;
 	}
 };
-r([n({ type: String })], l.prototype, "title", void 0), r([n({
+r([n({ type: String })], c.prototype, "title", void 0), r([n({
 	type: String,
 	attribute: "icon-name"
-})], l.prototype, "iconName", void 0), r([n({
+})], c.prototype, "iconName", void 0), r([n({
 	type: Number,
 	attribute: "icon-size"
-})], l.prototype, "iconSize", void 0), l = r([a("ds-dialog-header")], l);
+})], c.prototype, "iconSize", void 0), c = r([a("ds-dialog-header")], c);
 //#endregion

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

@@ -5,17 +5,16 @@ 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 { htmlWithTokens as a } from "../../utils/htmlWithTokens.js";
-import { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as a } 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 { orientationStyles as s } from "./styles/common.styles.js";
+import { orientationStyles as o } from "./styles/common.styles.js";
 //#region src/components/ds-divider/ds-divider.ts
-var c = class extends r {
+var s = class extends r {
 	constructor(...e) {
 		super(...e), this.orientation = "horizontal", this.variant = "primary", this.mode = "light";
 	}
 	static {
-		this.styles = [s];
+		this.styles = [o];
 	}
 	get classes() {
 		return {
@@ -26,7 +25,7 @@ var c = class extends r {
 		};
 	}
 	get styleTokens() {
-		return a`
+		return e`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -37,13 +36,13 @@ var c = class extends r {
 	render() {
 		return e`
             ${this.styleTokens}
-            <hr aria-orientation=${this.orientation} class=${o(this.classes)} />
+            <hr aria-orientation=${this.orientation} class=${a(this.classes)} />
         `;
 	}
 };
-n([t({ type: String })], c.prototype, "orientation", void 0), n([t({ type: String })], c.prototype, "variant", void 0), n([t({
+n([t({ type: String })], s.prototype, "orientation", void 0), n([t({ type: String })], s.prototype, "variant", void 0), n([t({
 	type: String,
 	reflect: !0
-})], c.prototype, "mode", void 0), c = n([i("ds-divider")], c);
+})], s.prototype, "mode", void 0), s = n([i("ds-divider")], s);
 //#endregion
-export { c as DsDivider };
+export { s as DsDivider };

package/dist/esm/components/ds-drawer/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";
 import { cssQueries as t } from "../../../utils/cssQueries.js";
 //#region src/components/ds-drawer/styles/common.styles.ts
 var n = e`
@@ -58,7 +59,7 @@ var n = e`
         transform: translateY(0);
         ${t.m} {
             transform: translateX(0);
-            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.60));
+            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.6));
         }
     }
 
@@ -82,7 +83,7 @@ var n = e`
         -webkit-overflow-scrolling: touch;
     }
 `, r = e`
-   .close-button {
+    .close-button {
         position: absolute;
     }
 `;

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

@@ -5,24 +5,23 @@ 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 { htmlWithTokens as a } from "../../utils/htmlWithTokens.js";
-import { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { e as a } 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 s } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { commonStyles as c } from "./styles/common.styles.js";
+import { r as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { commonStyles as s } from "./styles/common.styles.js";
 //#region src/components/ds-hyperlink/ds-hyperlink.ts
-var l = class extends r {
+var c = class extends r {
 	constructor(...e) {
 		super(...e), this.htmlTagName = "a", this.mode = "light", this.size = "large";
 	}
 	static {
-		this.styles = [c];
+		this.styles = [s];
 	}
 	handleClick(e) {
 		this.href || e.preventDefault();
 	}
 	get styleTokens() {
-		return a`
+		return e`
             <style>
                 :host {
                     color-scheme: ${this.mode};
@@ -40,13 +39,13 @@ var l = class extends r {
 	render() {
 		return e`
             ${this.styleTokens}
-            ${s(this.htmlTagName || "a", [["button", () => e`
-                        <button class=${o(this.classes)}>
+            ${o(this.htmlTagName || "a", [["button", () => e`
+                        <button class=${a(this.classes)}>
                             <slot></slot>
                         </button>
                     `], ["a", () => e`
                         <a
-                            class=${o(this.classes)}
+                            class=${a(this.classes)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
@@ -61,17 +60,17 @@ var l = class extends r {
 n([t({
 	type: String,
 	attribute: "html-tag-name"
-})], l.prototype, "htmlTagName", void 0), n([t({
+})], c.prototype, "htmlTagName", void 0), n([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "href", void 0), n([t({
+})], c.prototype, "href", void 0), n([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "rel", void 0), n([t({
+})], c.prototype, "rel", void 0), n([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "target", void 0), n([t({
+})], c.prototype, "target", void 0), n([t({
 	type: String,
 	reflect: !0
-})], l.prototype, "mode", void 0), n([t({ type: String })], l.prototype, "size", void 0), l = n([i("ds-hyperlink")], l);
+})], c.prototype, "mode", void 0), n([t({ type: String })], c.prototype, "size", void 0), c = n([i("ds-hyperlink")], c);
 //#endregion