@daikin-oss/design-system-web-components 1.4.1 → 1.5.0

package/dist/cjs-dev/components/select/daikin-select.cjs

@@ -25,41 +25,41 @@ const cvaSelect = classVarianceAuthority.cva(
     "w-full",
     "h-full",
     "relative",
-    "after:i-daikin-chevron-down",
+    "after:icon-[daikin--chevron-down]",
     "after:w-6",
     "after:h-6",
     "after:m-auto",
     "after:absolute",
     "after:top-0",
     "after:bottom-0",
-    "after:right-[calc(0.75rem+1px)]",
+    "after:right-3.25",
     "after:pointer-events-none",
-    "slotted-[select]:!appearance-none",
-    "slotted-[select]:!flex",
-    "slotted-[select]:!items-center",
-    "slotted-[select]:!gap-2",
-    "slotted-[select]:!w-full",
-    "slotted-[select]:!h-full",
-    "slotted-[select]:!min-h-12",
-    "slotted-[select]:!pl-4",
-    "slotted-[select]:!pr-12",
-    "slotted-[select]:!text-base",
-    "slotted-[select]:!font-daikinSerif",
-    "slotted-[select]:!border",
-    "slotted-[select]:!border-[--color-base]",
-    "slotted-[select]:!rounded",
-    "slotted-[select]:!leading-5",
-    "slotted-[select]:!outline",
-    "slotted-[select]:!outline-0",
-    "slotted-[select]:!-outline-offset-2",
-    "slotted-[select:focus-visible]:!outline-2",
-    "slotted-[select:focus-visible]:!outline-[--color-focus]",
-    "slotted-[select:enabled]:!cursor-pointer",
-    "slotted-[select:enabled]:!text-ddt-color-common-text-primary",
-    "slotted-[select:enabled:hover]:!bg-ddt-color-common-surface-hover",
-    "slotted-[select:enabled:active]:!bg-ddt-color-common-surface-press",
-    "slotted-[select:disabled]:!text-ddt-color-common-disabled",
-    "slotted-[select:disabled]:!border-ddt-color-common-disabled"
+    "slotted-select:appearance-none!",
+    "slotted-select:flex!",
+    "slotted-select:items-center!",
+    "slotted-select:gap-2!",
+    "slotted-select:w-full!",
+    "slotted-select:h-full!",
+    "slotted-select:min-h-12!",
+    "slotted-select:pl-4!",
+    "slotted-select:pr-12!",
+    "slotted-select:text-base!",
+    "slotted-select:font-daikinSerif!",
+    "slotted-select:border!",
+    "slotted-select:border-(--color-base)!",
+    "slotted-select:rounded-sm!",
+    "slotted-select:leading-5!",
+    "slotted-select:outline-solid!",
+    "slotted-select:outline-0!",
+    "slotted-select:-outline-offset-2!",
+    "slotted-select-focus-visible:outline-2!",
+    "slotted-select-focus-visible:outline-(--color-focus)!",
+    "slotted-select-enabled:cursor-pointer!",
+    "slotted-select-enabled:text-ddt-color-common-text-primary!",
+    "slotted-select-hover:bg-ddt-color-common-surface-hover!",
+    "slotted-select-active:bg-ddt-color-common-surface-press!",
+    "slotted-select-disabled:text-ddt-color-common-disabled!",
+    "slotted-select-disabled:border-ddt-color-common-disabled!"
   ],
   {
     variants: {
@@ -69,14 +69,14 @@ const cvaSelect = classVarianceAuthority.cva(
       },
       error: {
         false: [
-          "slotted-[select:enabled]:var-color-ddt-color-common-neutral-default/color-base",
-          "slotted-[select:enabled:hover]:var-color-ddt-color-common-neutral-hover/color-base",
-          "slotted-[select:enabled:active]:var-color-ddt-color-common-neutral-press/color-base",
-          "var-color-ddt-color-common-border-focus/color-focus"
+          "slotted-select-enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+          "slotted-select-hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+          "slotted-select-active:[--color-base:var(--dds-color-common-neutral-press)]",
+          "[--color-focus:var(--dds-color-common-border-focus)]"
         ],
         true: [
-          "var-color-ddt-color-common-danger-default/color-base",
-          "var-color-ddt-color-common-danger-default/color-focus"
+          "[--color-base:var(--dds-color-common-danger-default)]",
+          "[--color-focus:var(--dds-color-common-danger-default)]"
         ]
       }
     }

package/dist/cjs-dev/components/slider/daikin-slider.cjs

@@ -30,7 +30,7 @@ const cvaSliderThumb = classVarianceAuthority.cva(
     "w-4",
     "h-4",
     "rounded-full",
-    "left-[--slider-ratio]"
+    "left-(--slider-ratio)"
   ],
   {
     variants: {
@@ -40,8 +40,8 @@ const cvaSliderThumb = classVarianceAuthority.cva(
           "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
           "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
           "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
-          "data-[dragging]:bg-ddt-color-common-brand-press",
-          "focus-visible:outline",
+          "data-dragging:bg-ddt-color-common-brand-press",
+          "focus-visible:outline-solid",
           "focus-visible:outline-2",
           "focus-visible:outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus"
@@ -58,7 +58,7 @@ const cvaSliderTrack = classVarianceAuthority.cva(
     "-translate-y-1/2",
     "left-0",
     "h-1",
-    "w-[--slider-ratio]"
+    "w-(--slider-ratio)"
   ],
   {
     variants: {

package/dist/cjs-dev/components/status-message/daikin-status-message.cjs

@@ -41,22 +41,22 @@ const cvaWrapper = classVarianceAuthority.cva(
       status: {
         neutral: [
           "text-ddt-color-common-text-primary",
-          "before:i-daikin-neutral",
+          "before:icon-[daikin--neutral]",
           "before:text-ddt-color-common-disabled"
         ],
         positive: [
           "text-ddt-color-common-text-primary",
-          "before:i-daikin-success",
+          "before:icon-[daikin--success]",
           "before:text-ddt-color-common-success"
         ],
         negative: [
           "text-ddt-color-common-danger-default",
-          "before:i-daikin-error",
+          "before:icon-[daikin--error]",
           "before:text-ddt-color-common-danger-default"
         ],
         warning: [
           "text-ddt-color-common-text-primary",
-          "before:i-daikin-warning",
+          "before:icon-[daikin--warning]",
           "before:text-ddt-color-common-warning"
         ]
       }

package/dist/cjs-dev/components/tab/daikin-tab.cjs

@@ -33,10 +33,10 @@ const cvaTab = classVarianceAuthority.cva(
     "font-daikinSerif",
     "tracking-wide",
     "relative",
-    "focus-visible:outline-none",
+    "focus-visible:outline-hidden",
     "focus-visible:before:absolute",
     "focus-visible:before:-inset-1",
-    "focus-visible:before:z-[1]",
+    "focus-visible:before:z-1",
     "focus-visible:before:border",
     "focus-visible:before:border-2",
     "focus-visible:before:border-ddt-color-common-border-focus",
@@ -54,7 +54,7 @@ const cvaTab = classVarianceAuthority.cva(
           "enabled:hover:bg-ddt-color-common-surface-hover",
           "enabled:active:text-ddt-color-common-neutral-press",
           "enabled:active:bg-ddt-color-common-surface-press",
-          "after:h-[1px]",
+          "after:h-px",
           "after:bg-ddt-color-divider"
         ],
         true: [

package/dist/cjs-dev/components/table/daikin-table.cjs

@@ -30,7 +30,7 @@ const cvaRow = classVarianceAuthority.cva(
   [
     "border-b",
     "border-b-ddt-color-divider",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus"
@@ -39,13 +39,13 @@ const cvaRow = classVarianceAuthority.cva(
     variants: {
       selected: {
         false: [
-          "group-[:not([data-hover])]:hover:bg-ddt-color-common-surface-hover",
-          "data-[hover]:bg-ddt-color-common-surface-hover"
+          "hover:group-[:not([data-hover])]:bg-ddt-color-common-surface-hover",
+          "data-hover:bg-ddt-color-common-surface-hover"
         ],
         true: [
           "bg-ddt-color-common-surface-selected-default",
-          "group-[:not([data-hover])]:hover:bg-ddt-color-common-surface-selected-hover",
-          "data-[hover]:bg-ddt-color-common-surface-selected-hover"
+          "hover:group-[:not([data-hover])]:bg-ddt-color-common-surface-selected-hover",
+          "data-hover:bg-ddt-color-common-surface-selected-hover"
         ]
       }
     }
@@ -218,6 +218,13 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
           @touchmove=${this._handleTouchMove}
           @touchend=${this._handleTouchEnd}
         >
+          ${this._currentView.length === 0 ? lit.html`<tr>
+                <td colspan=${this.headers.length + (this.selectable ? 1 : 0)}>
+                  <div class="flex items-center justify-center">
+                    <slot name="empty"></slot>
+                  </div>
+                </td>
+              </tr>` : lit.nothing}
           ${repeat_js.repeat(
       this._currentView,
       ({ id }) => id,

package/dist/cjs-dev/components/table/daikin-table.d.cts

@@ -20,12 +20,14 @@ export type HeaderType<T extends string = string> = {
  * Hierarchy:
  * - `daikin-table` > `daikin-table-cell`
  * - `daikin-table` > `daikin-table-header-cell`
+ * - `daikin-table` > `daikin-empty-state`
  *
  * @fires change-check - When the checkbox is operated, it returns the array of `id`s that are currently checked.
  * @fires change-sort - When the sort is changed, it returns the current sort key and the order (ascending or descending).
  *
  * @slot header:${headers[i].key} - A slot for the header cell of a table. Use this when you want to display something other than text, such as an icon. Use `daikin-table-header-cell` for the wrapper.
  * @slot cell:${rows[j].id}:${headers[i].key} - A slot for the data cell of a table. Use `daikin-table-cell` for the wrapper.
+ * @slot empty - A slot to define the content displayed when the table rows are empty. Typically, the `daikin-empty-state` component can be used.
  *
  * @example
  *

package/dist/cjs-dev/components/table-header-cell/daikin-table-header-cell.cjs

@@ -42,7 +42,7 @@ const cvaHeaderCell = classVarianceAuthority.cva(
         true: [
           "hover:bg-ddt-color-common-surface-hover",
           "active:bg-ddt-color-common-surface-press",
-          "focus-visible:outline",
+          "focus-visible:outline-solid",
           "focus-visible:outline-2",
           "focus-visible:-outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus",
@@ -59,17 +59,17 @@ const cvaHeaderCell = classVarianceAuthority.cva(
       {
         sortable: true,
         order: null,
-        class: ["after:i-daikin-sort"]
+        class: ["after:icon-[daikin--sort]"]
       },
       {
         sortable: true,
         order: "asc",
-        class: ["after:i-daikin-chevron-up"]
+        class: ["after:icon-[daikin--chevron-up]"]
       },
       {
         sortable: true,
         order: "desc",
-        class: ["after:i-daikin-chevron-up", "after:rotate-180"]
+        class: ["after:icon-[daikin--chevron-up]", "after:rotate-180"]
       }
     ]
   }

package/dist/cjs-dev/components/tabs/daikin-tabs.cjs

@@ -192,7 +192,7 @@ exports.DaikinTabs = class DaikinTabs extends ddsElement.DDSElement {
   render() {
     return lit.html`
       <div
-        class="flex flex-nowrap w-full p-1 overflow-auto relative before:absolute before:h-[1px] before:inset-1 before:top-auto before:bg-ddt-color-divider"
+        class="flex flex-nowrap w-full p-1 overflow-auto relative before:absolute before:h-px before:inset-1 before:top-auto before:bg-ddt-color-divider"
         role="tablist"
         @click=${this._handleTabClick}
         @keydown=${this._handleKeyDown}

package/dist/cjs-dev/components/tabs/daikin-tabs.d.cts

@@ -1,7 +1,7 @@
 import { PropertyValues } from 'lit';
 import { DDSElement } from "../../base/index.cjs";
 /**
- * The tab group component manages a group of tabs and switches the content displayed using the panel switcher component.
+ * The tabs component manages a group of tab components and switches the content displayed using the panel switcher component.
  * It allows users to navigate between different sections of content by clicking on individual tabs.
  *
  * > [!WARNING]
@@ -22,7 +22,7 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/tab/index.js";
- * import "@daikin-oss/design-system-web-components/components/tab-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tabs/index.js";
  * import "@daikin-oss/design-system-web-components/components/tab-panels/index.js";
  * ```
  *

package/dist/cjs-dev/components/tag/daikin-tag.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaWrapper = classVarianceAuthority.cva([
+  "flex",
+  "items-center",
+  "justify-between",
+  "rounded",
+  "overflow-hidden",
+  "size-full",
+  "gap-1",
+  "bg-(--dds-color-common-surface-secondary-default)"
+]);
+const cvaRemoveButton = classVarianceAuthority.cva([
+  "mr-1",
+  "w-6",
+  "h-6",
+  "flex",
+  "flex-none",
+  "items-center",
+  "justify-center",
+  "rounded-full",
+  "overflow-hidden",
+  "focus-visible:outline-solid",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+  "enabled:hover:[--color-primary:var(--dds-color-common-neutral-hover)]",
+  "enabled:active:[--color-primary:var(--dds-color-common-neutral-press)]",
+  "enabled:[--color-secondary:var(--dds-color-common-surface-secondary-default)]",
+  "enabled:hover:[--color-secondary:var(--dds-color-common-surface-secondary-hover)]",
+  "enabled:active:[--color-secondary:var(--dds-color-common-surface-secondary-press)]",
+  "text-(--color-primary)",
+  "bg-(--color-secondary)"
+]);
+exports.DaikinTag = class DaikinTag extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.hideRemoveButton = false;
+    this.tagAriaLabel = null;
+    this.removeButtonAriaLabel = null;
+  }
+  _handleRemoveClick(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
+  }
+  render() {
+    return lit.html`
+      <div
+        role="group"
+        aria-label=${ifDefined_js.ifDefined(this.tagAriaLabel ?? void 0)}
+        class=${cvaWrapper()}
+      >
+        <span
+          class="text-ddt-color-common-text-primary p-2 text-sm leading-[130%] font-daikinSerif natural-break"
+        >
+          <slot></slot>
+        </span>
+        ${this.hideRemoveButton ? lit.nothing : lit.html`
+              <button
+                type="button"
+                class=${cvaRemoveButton()}
+                aria-label=${ifDefined_js.ifDefined(this.removeButtonAriaLabel ?? "Remove")}
+                @click=${this._handleRemoveClick}
+              >
+                <span class="icon-[daikin--close] size-6"></span>
+              </button>
+            `}
+      </div>
+    `;
+  }
+  /**
+   * Focuses on the inner remove button
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinTag.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: fit-content;
+    }
+  `;
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "hide-remove-button" })
+], exports.DaikinTag.prototype, "hideRemoveButton", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true, attribute: "tag-aria-label" })
+], exports.DaikinTag.prototype, "tagAriaLabel", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "remove-button-aria-label"
+  })
+], exports.DaikinTag.prototype, "removeButtonAriaLabel", 2);
+__decorateClass([
+  decorators_js.query("button")
+], exports.DaikinTag.prototype, "_focusableElement", 2);
+exports.DaikinTag = __decorateClass([
+  decorators.ddsElement("daikin-tag")
+], exports.DaikinTag);

package/dist/cjs-dev/components/tag/daikin-tag.d.cts

@@ -0,0 +1,46 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * The Tag is a flexible component. It is designed not only to display concise text information but also to support automatic line wrapping for longer content. Furthermore, its slots allow for the customization of multi-element content based on specific requirements.
+ *
+ * @fires remove - A custom event emitted when a user clicks the remove button.
+ *
+ * @slot - A slot for the tag content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tag/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-tag remove-button-aria-label="Remove Text">Text</daikin-tag>
+ * ```
+ */
+export declare class DaikinTag extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Hides the remove button and makes the tag non-removable. The default value is `false`.
+     */
+    hideRemoveButton: boolean;
+    /**
+     * Provides an accessible name of the tag.
+     */
+    tagAriaLabel: string | null;
+    /**
+     * Provides an accessible name of the remove button.
+     */
+    removeButtonAriaLabel: string | null;
+    private _focusableElement;
+    private _handleRemoveClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner remove button
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tag": DaikinTag;
+    }
+}

package/dist/cjs-dev/components/tag/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinTag = require("./daikin-tag.cjs");
+Object.defineProperty(exports, "DaikinTag", {
+  enumerable: true,
+  get: () => daikinTag.DaikinTag
+});

package/dist/cjs-dev/components/tag/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-tag.cjs";

package/dist/cjs-dev/components/text-area/daikin-text-area.cjs

@@ -27,18 +27,18 @@ const cvaTextArea = classVarianceAuthority.cva(
     "bg-ddt-color-common-background-default",
     "px-4",
     "py-3",
-    "rounded",
+    "rounded-sm",
     "font-daikinSerif",
-    "outline",
-    "outline-[--color-border]",
+    "outline-solid",
+    "outline-(--color-border)",
     "outline-1",
     "-outline-offset-1",
     "placeholder:text-ddt-color-common-text-secondary",
     // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
     // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
-    "define-[--color-state-active,--color-state-focus,--color-base]/color-border",
+    "[--color-border:var(--color-state-active,var(--color-state-focus,var(--color-base)))]",
     "border",
-    "border-[--color-border]",
+    "border-(--color-border)",
     "enabled:text-ddt-color-common-text-primary",
     "enabled:hover:bg-ddt-color-common-surface-hover",
     "enabled:active:bg-ddt-color-common-surface-press",
@@ -46,7 +46,7 @@ const cvaTextArea = classVarianceAuthority.cva(
     "focus-visible:-outline-offset-2",
     // Update `--color-base` depending on the state.
     // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
-    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:[--color-base:var(--dds-color-common-disabled)]",
     "disabled:text-ddt-color-common-disabled",
     "disabled:bg-color-common-background-default",
     "disabled:placeholder:text-ddt-color-common-disabled"
@@ -55,12 +55,12 @@ const cvaTextArea = classVarianceAuthority.cva(
     variants: {
       error: {
         false: [
-          "enabled:var-color-ddt-color-common-neutral-default/color-base",
-          "enabled:hover:var-color-ddt-color-common-neutral-hover/color-base",
-          "enabled:active:var-color-ddt-color-common-neutral-press/color-base",
-          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
+          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+          "enabled:hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+          "enabled:active:[--color-base:var(--dds-color-common-neutral-press)]",
+          "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
         ],
-        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
+        true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
       },
       resize: {
         false: ["resize-none"],

package/dist/cjs-dev/components/text-field/daikin-text-field.cjs

@@ -29,30 +29,30 @@ const cvaInput = classVarianceAuthority.cva(
     "items-center",
     "w-full",
     "h-full",
-    "pl-[--pl,1rem]",
-    "pr-[--pr,1rem]",
+    "pl-(--pl,1rem)",
+    "pr-(--pr,1rem)",
     "bg-ddt-color-common-background-default",
     "relative",
-    "rounded",
+    "rounded-sm",
     "overflow-hidden",
     "font-daikinSerif",
-    "outline",
-    "outline-[--color-border]",
+    "outline-solid",
+    "outline-(--color-border)",
     "outline-0",
     "-outline-offset-2",
     "placeholder:text-ddt-color-common-text-secondary",
     // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
     // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
-    "define-[--color-state-focus,--color-base]/color-border",
+    "[--color-border:var(--color-state-focus,var(--color-base))]",
     "border",
-    "border-[--color-border]",
+    "border-(--color-border)",
     // Update `--color-base` depending on the state.
     // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
     "enabled:text-ddt-color-common-text-primary",
     "enabled:hover:bg-ddt-color-common-surface-hover",
     "enabled:active:bg-ddt-color-common-surface-press",
     "focus-visible:outline-2",
-    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:[--color-base:var(--dds-color-common-disabled)]",
     "disabled:text-ddt-color-common-disabled",
     "disabled:bg-ddt-color-common-background-default",
     "disabled:placeholder:text-ddt-color-common-disabled"
@@ -61,12 +61,12 @@ const cvaInput = classVarianceAuthority.cva(
     variants: {
       error: {
         false: [
-          "enabled:var-color-ddt-color-common-neutral-default/color-base",
-          "enabled:hover:var-color-ddt-color-common-neutral-hover/color-base",
-          "enabled:active:var-color-ddt-color-common-neutral-press/color-base",
-          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
+          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+          "enabled:hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+          "enabled:active:[--color-base:var(--dds-color-common-neutral-press)]",
+          "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
         ],
-        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
+        true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
       },
       leftIcon: {
         false: [],
@@ -118,11 +118,11 @@ const cvaIcon = classVarianceAuthority.cva(
     }
   }
 );
-const cvaShowPasswordIcon = classVarianceAuthority.cva(["icon-size-6"], {
+const cvaShowPasswordIcon = classVarianceAuthority.cva(["size-6"], {
   variants: {
     showPassword: {
-      false: ["i-daikin-password-hidden"],
-      true: ["i-daikin-password-visible"]
+      false: ["icon-[daikin--password-hidden]"],
+      true: ["icon-[daikin--password-visible]"]
     }
   }
 });
@@ -270,7 +270,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
               tabindex="-1"
               @click=${() => this._updateNumberValue(-1)}
             >
-              <span class="i-daikin-number-minus icon-size-6"></span>
+              <span class="icon-[daikin--number-minus] size-6"></span>
             </daikin-icon-button>
             <daikin-icon-button
               color="neutral"
@@ -280,7 +280,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
               tabindex="-1"
               @click=${() => this._updateNumberValue(1)}
             >
-              <span class="i-daikin-number-plus icon-size-6"></span>
+              <span class="icon-[daikin--number-plus] size-6"></span>
             </daikin-icon-button>
           </span>`;
       case "password":
@@ -303,7 +303,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
           disabled: this.disabled
         })}
           >
-            <span class="i-daikin-search size-6"></span>
+            <span class="icon-[daikin--search] size-6"></span>
           </span>
           ${!!this.value && !!this.value.length ? lit.html`<daikin-icon-button
                 color="neutral"
@@ -313,7 +313,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
                 class="absolute right-3 size-6"
                 @click=${this._handleClearClick}
               >
-                <span class="i-daikin-close"></span>
+                <span class="icon-[daikin--close] size-6"></span>
               </daikin-icon-button>` : lit.nothing}`;
       default:
         return lit.html`${leftIconSlot}${rightIconSlot}`;