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

package/dist/cjs/components/navigation-item/daikin-navigation-item.cjs

@@ -0,0 +1,219 @@
+"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 cvaBaseClasses = [
+  "flex",
+  "relative",
+  "gap-1",
+  "justify-center",
+  "items-center",
+  "min-h-12",
+  "px-8",
+  "pt-2",
+  "pb-3",
+  "font-daikinSerif",
+  "text-base",
+  "leading-[130%]",
+  "font-bold",
+  "focus-visible:outline-hidden",
+  "focus-visible:before:absolute",
+  "focus-visible:before:-inset-1",
+  "focus-visible:before:z-1",
+  "focus-visible:before:border-2",
+  "focus-visible:before:border-ddt-color-common-border-focus",
+  "text-(--color-primary)",
+  "bg-(--color-secondary)"
+];
+const cvaBaseVariants = {
+  variants: {
+    current: {
+      false: [
+        "link-enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+        "hover:link-enabled:[--color-primary:var(--dds-color-common-neutral-hover)]",
+        "active:link-enabled:[--color-primary:var(--dds-color-common-neutral-press)]",
+        "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-hover)]",
+        "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-press)]"
+      ],
+      true: [
+        "link-enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+        "hover:link-enabled:[--color-primary:var(--dds-color-common-neutral-hover)]",
+        "active:link-enabled:[--color-primary:var(--dds-color-common-neutral-press)]",
+        "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
+        "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-press)]",
+        "after:h-1",
+        "after:absolute",
+        "after:inset-0",
+        "after:top-auto",
+        "after:bg-ddt-color-common-brand-default"
+      ]
+    },
+    disabled: {
+      false: [],
+      true: [
+        "text-ddt-color-common-disabled",
+        "after:text-ddt-color-common-disabled",
+        "after:bg-ddt-color-common-disabled"
+      ]
+    }
+  }
+};
+const cvaLinkItem = classVarianceAuthority.cva(cvaBaseClasses, cvaBaseVariants);
+const cvaMenuItem = classVarianceAuthority.cva(cvaBaseClasses, cvaBaseVariants);
+exports.DaikinNavigationItem = class DaikinNavigationItem extends ddsElement.DDSElement {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.current = false;
+    this.href = null;
+    this.navigationItemAriaHaspopup = null;
+    this.navigationItemAriaExpanded = null;
+    this.addEventListener("click", (event) => {
+      if (this.disabled || this.type === "link" && this.href == null) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  /**
+   * _Internal use._
+   * Returns the navigation target information.
+   * Used by navigation handling utilities.
+   *
+   * @returns Navigation target information or `null` if not navigable.
+   *
+   * @private
+   */
+  getDDSNavigationTarget() {
+    if (this.type === "menu" || this.href == null || this.disabled) {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: null
+    };
+  }
+  render() {
+    switch (this.type) {
+      case "link": {
+        const linkDisabled = this.disabled || this.href == null;
+        return lit.html`
+          <div role="listitem">
+            <a
+              href=${ifDefined_js.ifDefined(!linkDisabled ? this.href : void 0)}
+              class=${cvaLinkItem({
+          current: this.current,
+          disabled: linkDisabled
+        })}
+              role=${linkDisabled ? "link" : lit.nothing}
+              aria-current=${ifDefined_js.ifDefined(this.current ? "page" : void 0)}
+              aria-disabled=${ifDefined_js.ifDefined(linkDisabled ? "true" : void 0)}
+              ><slot
+                name="left-icon"
+                class="icon-size-6 slotted:flex-none"
+              ></slot
+              ><span class="px-1"><slot class="text-nowrap"></slot></span
+            ></a>
+          </div>
+        `;
+      }
+      case "menu":
+        return lit.html`
+          <div role="listitem">
+            <button
+              type="button"
+              class=${cvaMenuItem({
+          current: this.current,
+          disabled: this.disabled
+        })}
+              aria-current=${ifDefined_js.ifDefined(this.current ? "page" : void 0)}
+              aria-expanded=${ifDefined_js.ifDefined(this.navigationItemAriaExpanded)}
+              aria-haspopup=${ifDefined_js.ifDefined(this.navigationItemAriaHaspopup)}
+              ?disabled=${this.disabled}
+            >
+              <slot
+                name="left-icon"
+                class="icon-size-6 slotted:flex-none"
+              ></slot
+              ><span class="px-1"><slot class="text-nowrap"></slot></span
+              ><span
+                class="icon-[daikin--chevron-down] size-6 flex-none rotate-(--chevron-rotation)"
+              ></span>
+            </button>
+          </div>
+        `;
+    }
+  }
+  /**
+   * Focuses on the inner button or link.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinNavigationItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: fit-content;
+
+      --chevron-rotation: 0deg;
+    }
+  `;
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "link",
+    isAllowedValue: ddsProperty.oneOf(["link", "menu"])
+  })
+], exports.DaikinNavigationItem.prototype, "type", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinNavigationItem.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinNavigationItem.prototype, "current", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true })
+], exports.DaikinNavigationItem.prototype, "href", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "navigation-item-aria-haspopup"
+  })
+], exports.DaikinNavigationItem.prototype, "navigationItemAriaHaspopup", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "navigation-item-aria-expanded"
+  })
+], exports.DaikinNavigationItem.prototype, "navigationItemAriaExpanded", 2);
+__decorateClass([
+  decorators_js.query("a,button")
+], exports.DaikinNavigationItem.prototype, "_focusableElement", 2);
+exports.DaikinNavigationItem = __decorateClass([
+  decorators.ddsElement("daikin-navigation-item")
+], exports.DaikinNavigationItem);

package/dist/cjs/components/navigation-item/daikin-navigation-item.d.cts

@@ -0,0 +1,89 @@
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
+/**
+ * The navigation item component is a child element within the `daikin-navigation` component.
+ * It represents a single navigational action and is rendered as a link or button, depending on configuration.
+ * This component is responsible for displaying the specific content within the navigation and allowing users to navigate to the associated target.
+ *
+ * Hierarchy:
+ * - `daikin-navigation` > `daikin-navigation-item`
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<a>` or `<button>` element. Suppressed if `disabled` is true or when rendered as a link (`type="link"`) without an `href`.
+ *
+ * @slot - A slot for the navigation item content.
+ * @slot left-icon - A slot for the left icon.
+ *
+ * @cssprop [--chevron-rotation=0deg] - The rotation angle of the chevron icon. This can be used to indicate the open or closed state of a menu. When used within a `daikin-menu` component, this property is automatically controlled by the menu to rotate the chevron icon when the menu is opened or closed, so you don't need to specify it explicitly.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/navigation-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-navigation-item>
+ *   Navigation content
+ * </daikin-navigation-item>
+ * ```
+ */
+export declare class DaikinNavigationItem extends DDSElement implements DDSNavigable {
+    static readonly styles: import('lit').CSSResult;
+    constructor();
+    /**
+     * Type of the navigation item.
+     * - `"link"`: A regular navigation item that is rendered as a link (`<a>`). Use this for navigation items that directly link to other pages or sections.
+     * - `"menu"`: A navigation item that is rendered as a button (`<button>`) and is intended to trigger a dropdown menu. Use this for navigation items that open a menu with additional options.
+     *
+     * @default "link"
+     */
+    type: "link" | "menu";
+    /**
+     * Whether the navigation item is disabled.
+     * When set to `true`, the navigation item is rendered in a disabled state
+     * and does not respond to user interaction or navigation.
+     */
+    disabled: boolean;
+    /**
+     * Whether the navigation item is the current item.
+     * If this is set to `true`, the navigation item will be highlighted as the current item.
+     */
+    current: boolean;
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.
+     */
+    href: string | null;
+    /**
+     * The aria-haspopup of the navigation item when `type="menu"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `navigationItemAriaHaspopup="menu"`.
+     */
+    navigationItemAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of the navigation item when `type="menu"`.
+     * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
+     */
+    navigationItemAriaExpanded: "true" | "false" | "undefined" | null;
+    private readonly _focusableElement;
+    /**
+     * _Internal use._
+     * Returns the navigation target information.
+     * Used by navigation handling utilities.
+     *
+     * @returns Navigation target information or `null` if not navigable.
+     *
+     * @private
+     */
+    getDDSNavigationTarget(): NavigationTarget | null;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button or link.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-navigation-item": DaikinNavigationItem;
+    }
+}

package/dist/cjs/components/navigation-item/index.cjs

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

package/dist/cjs/components/navigation-item/index.d.cts

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

package/dist/cjs/components/pagination/daikin-pagination.cjs

@@ -37,9 +37,9 @@ const cvaPageButton = classVarianceAuthority.cva(
     "not-italic",
     "leading-6",
     "bg-clip-content",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
-    "focus-visible:outline-offset-[-2px]",
+    "focus-visible:-outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
@@ -106,10 +106,10 @@ const cvaChevronButton = classVarianceAuthority.cva([
   "enabled:hover:text-ddt-color-common-neutral-hover",
   "enabled:active:bg-ddt-color-common-surface-neutral-press",
   "enabled:active:text-ddt-color-common-neutral-press",
-  "disabled:!text-ddt-color-common-disabled",
-  "focus-visible:outline",
+  "disabled:text-ddt-color-common-disabled",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
-  "focus-visible:outline-offset-[-2px]",
+  "focus-visible:-outline-offset-2",
   "focus-visible:outline-ddt-color-common-border-focus"
 ]);
 exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement {
@@ -153,7 +153,7 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
           ?disabled=${this.current === 1}
           @click=${() => this._gotoOffset(-1)}
         >
-          <span class="i-daikin-pagination-chevron-left w-4 h-4"></span>
+          <span class="icon-[daikin--pagination-chevron-left] w-4 h-4"></span>
         </button>
         ${repeat_js.repeat(
       pageArray,
@@ -197,7 +197,7 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
           ?disabled=${this.current === this.total}
           @click=${() => this._gotoOffset(1)}
         >
-          <span class="i-daikin-pagination-chevron-right w-4 h-4"></span>
+          <span class="icon-[daikin--pagination-chevron-right] w-4 h-4"></span>
         </button>
       </div>
     `;

package/dist/cjs/components/progress-bar/daikin-progress-bar.cjs

@@ -33,7 +33,7 @@ const cvaBar = classVarianceAuthority.cva(
     variants: {
       variant: {
         inprogress: [
-          "after:w-[--bar-width]",
+          "after:w-(--bar-width)",
           "after:bg-ddt-color-common-brand-default"
         ],
         completed: ["after:w-full", "after:bg-ddt-color-common-success"],
@@ -68,14 +68,14 @@ const cvaBarContainer = classVarianceAuthority.cva(
           "after:size-4",
           "after:flex-none",
           "after:bg-ddt-color-common-success",
-          "after:i-daikin-success"
+          "after:icon-[daikin--success]"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
           "after:flex-none",
           "after:text-ddt-color-common-danger-default",
-          "after:i-daikin-error"
+          "after:icon-[daikin--error]"
         ]
       }
     }

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.cjs

@@ -27,7 +27,7 @@ const cvaContainer = classVarianceAuthority.cva(
     "w-full",
     "text-ddt-color-common-text-primary",
     "pt-2",
-    "border-t-[0.25rem]",
+    "border-t-4",
     "font-daikinSerif"
   ],
   {
@@ -56,7 +56,7 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
       ${this.status === "finished" ? lit.html`
             <span
               role="img"
-              class="flex-none size-4 i-daikin-success text-ddt-color-common-brand-default"
+              class="flex-none size-4 icon-[daikin--success] text-ddt-color-common-brand-default"
               aria-label="Completed"
             ></span>
           ` : lit.nothing}

package/dist/cjs/components/radio/daikin-radio.cjs

@@ -28,20 +28,20 @@ const RADIO_CLASS_NAME = classVarianceAuthority.cva([
   "rounded-full",
   "relative",
   "appearance-none",
-  "focus-visible:outline",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
   "focus-visible:outline-ddt-color-common-border-focus",
   "unchecked:border-2",
   "enabled:unchecked:border-ddt-color-common-neutral-default",
-  "enabled:unchecked:group-hover:border-ddt-color-common-neutral-hover",
-  "enabled:unchecked:group-active:border-ddt-color-common-neutral-press",
-  "enabled:unchecked:group-hover:bg-ddt-color-common-surface-neutral-hover",
-  "enabled:unchecked:group-active:bg-ddt-color-common-surface-neutral-press",
+  "group-hover:unchecked:enabled:border-ddt-color-common-neutral-hover",
+  "group-active:unchecked:enabled:border-ddt-color-common-neutral-press",
+  "group-hover:unchecked:enabled:bg-ddt-color-common-surface-neutral-hover",
+  "group-active:unchecked:enabled:bg-ddt-color-common-surface-neutral-press",
   "checked:border-[5px]",
   "enabled:checked:border-ddt-color-common-brand-default",
-  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
-  "enabled:checked:group-active:border-ddt-color-common-brand-press",
+  "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
+  "group-active:checked:enabled:border-ddt-color-common-brand-press",
   "disabled:border-ddt-color-common-disabled"
 ])();
 const cvaLabel = classVarianceAuthority.cva([], {

package/dist/cjs/components/radio-group/daikin-radio-group.d.cts

@@ -3,7 +3,7 @@ import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 declare const cvaRadioGroup: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type RadioGroupProps = MergeVariantProps<typeof cvaRadioGroup>;
 /**

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