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

package/dist/es-dev/components/select/daikin-select.js

@@ -23,41 +23,41 @@ const cvaSelect = 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: {
@@ -67,14 +67,14 @@ const cvaSelect = 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/es-dev/components/slider/daikin-slider.js

@@ -28,7 +28,7 @@ const cvaSliderThumb = cva(
     "w-4",
     "h-4",
     "rounded-full",
-    "left-[--slider-ratio]"
+    "left-(--slider-ratio)"
   ],
   {
     variants: {
@@ -38,8 +38,8 @@ const cvaSliderThumb = 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"
@@ -56,7 +56,7 @@ const cvaSliderTrack = cva(
     "-translate-y-1/2",
     "left-0",
     "h-1",
-    "w-[--slider-ratio]"
+    "w-(--slider-ratio)"
   ],
   {
     variants: {

package/dist/es-dev/components/status-message/daikin-status-message.js

@@ -39,22 +39,22 @@ const cvaWrapper = 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/es-dev/components/tab/daikin-tab.js

@@ -31,10 +31,10 @@ const cvaTab = 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",
@@ -52,7 +52,7 @@ const cvaTab = 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/es-dev/components/table/daikin-table.d.ts

@@ -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/es-dev/components/table/daikin-table.js

@@ -28,7 +28,7 @@ const cvaRow = 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"
@@ -37,13 +37,13 @@ const cvaRow = 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"
         ]
       }
     }
@@ -216,6 +216,13 @@ let DaikinTable = class extends DDSElement {
           @touchmove=${this._handleTouchMove}
           @touchend=${this._handleTouchEnd}
         >
+          ${this._currentView.length === 0 ? 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>` : nothing}
           ${repeat(
       this._currentView,
       ({ id }) => id,

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.js

@@ -40,7 +40,7 @@ const cvaHeaderCell = 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",
@@ -57,17 +57,17 @@ const cvaHeaderCell = 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/es-dev/components/tabs/daikin-tabs.d.ts

@@ -1,7 +1,7 @@
 import { PropertyValues } from 'lit';
 import { DDSElement } from "../../base/index.js";
 /**
- * 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.js";
  *
  * ```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/es-dev/components/tabs/daikin-tabs.js

@@ -190,7 +190,7 @@ let DaikinTabs = class extends DDSElement {
   render() {
     return 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/es-dev/components/tag/daikin-tag.d.ts

@@ -0,0 +1,46 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * 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/es-dev/components/tag/daikin-tag.js

@@ -0,0 +1,127 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, nothing, html } from "lit";
+import { query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaWrapper = cva([
+  "flex",
+  "items-center",
+  "justify-between",
+  "rounded",
+  "overflow-hidden",
+  "size-full",
+  "gap-1",
+  "bg-(--dds-color-common-surface-secondary-default)"
+]);
+const cvaRemoveButton = 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)"
+]);
+let DaikinTag = class extends 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 html`
+      <div
+        role="group"
+        aria-label=${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 ? nothing : html`
+              <button
+                type="button"
+                class=${cvaRemoveButton()}
+                aria-label=${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);
+  }
+};
+DaikinTag.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: fit-content;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-remove-button" })
+], DaikinTag.prototype, "hideRemoveButton", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "tag-aria-label" })
+], DaikinTag.prototype, "tagAriaLabel", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "remove-button-aria-label"
+  })
+], DaikinTag.prototype, "removeButtonAriaLabel", 2);
+__decorateClass([
+  query("button")
+], DaikinTag.prototype, "_focusableElement", 2);
+DaikinTag = __decorateClass([
+  ddsElement("daikin-tag")
+], DaikinTag);
+export {
+  DaikinTag
+};

package/dist/es-dev/components/tag/index.d.ts

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

package/dist/es-dev/components/tag/index.js

@@ -0,0 +1,4 @@
+import { DaikinTag } from "./daikin-tag.js";
+export {
+  DaikinTag
+};

package/dist/es-dev/components/text-area/daikin-text-area.js

@@ -25,18 +25,18 @@ const cvaTextArea = 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",
@@ -44,7 +44,7 @@ const cvaTextArea = 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"
@@ -53,12 +53,12 @@ const cvaTextArea = 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/es-dev/components/text-field/daikin-text-field.js

@@ -27,30 +27,30 @@ const cvaInput = 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"
@@ -59,12 +59,12 @@ const cvaInput = 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: [],
@@ -116,11 +116,11 @@ const cvaIcon = cva(
     }
   }
 );
-const cvaShowPasswordIcon = cva(["icon-size-6"], {
+const cvaShowPasswordIcon = 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]"]
     }
   }
 });
@@ -268,7 +268,7 @@ let DaikinTextField = class extends DDSFormElement {
               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"
@@ -278,7 +278,7 @@ let DaikinTextField = class extends DDSFormElement {
               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":
@@ -301,7 +301,7 @@ let DaikinTextField = class extends DDSFormElement {
           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 ? html`<daikin-icon-button
                 color="neutral"
@@ -311,7 +311,7 @@ let DaikinTextField = class extends DDSFormElement {
                 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>` : nothing}`;
       default:
         return html`${leftIconSlot}${rightIconSlot}`;