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

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

@@ -30,25 +30,25 @@ const cvaInput = classVarianceAuthority.cva(
     "h-full",
     "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)",
     "enabled:text-ddt-color-common-text-primary",
-    "enabled:data-[empty]:text-ddt-color-common-text-secondary",
+    "enabled:data-empty:text-ddt-color-common-text-secondary",
     "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"
@@ -57,12 +57,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: ["pl-4"],

package/dist/cjs-dev/components/time-picker/daikin-time-picker.cjs

@@ -154,24 +154,24 @@ const cvaField = classVarianceAuthority.cva(
     "flex",
     "items-center",
     "size-full",
-    "w-[94px]",
+    "w-23.5",
     "bg-ddt-color-common-background-default",
     "p-3",
-    "rounded",
+    "rounded-sm",
     "truncate",
-    "outline",
-    "outline-[--color-border]",
+    "outline-solid",
+    "outline-(--color-border)",
     "outline-0",
     "-outline-offset-2",
     "placeholder:text-ddt-color-common-text-secondary",
-    "define-[--color-state-focus,--color-base]/color-border",
+    "[--color-border: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",
     "focus-visible:outline-2",
-    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:[--color-border: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"
@@ -180,10 +180,10 @@ const cvaField = classVarianceAuthority.cva(
     variants: {
       error: {
         false: [
-          "enabled:var-color-ddt-color-common-neutral-default/color-base",
-          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
+          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+          "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)]"]
       }
     }
   }
@@ -498,7 +498,7 @@ exports.DaikinTimePicker = class DaikinTimePicker extends ddsFormElement.DDSForm
         @mouseup=${this._handleMouseUp}
       />
       <daikin-dropdown
-        class="w-[88px]"
+        class="w-22"
         placeholder="--"
         .error=${this.error}
         .value=${this._meridiem}

package/dist/cjs-dev/components/toast-notification/daikin-toast-notification.cjs

@@ -35,40 +35,38 @@ const cvaContainer = classVarianceAuthority.cva(
     "transition",
     "box-border",
     "before:size-6",
-    "before:flex-none"
+    "before:flex-none",
+    "rounded-lg",
+    "border",
+    "border-ddt-color-divider",
+    "translate-x-(--move-offset-x,0)",
+    "translate-y-(--move-offset-y,0)",
+    "opacity-(--opacity,1)",
+    "[pointer-events:var(--pointer-events,auto)]",
+    "duration-(--transition-duration,var(--ddc-toast-animation-duration,0ms))"
   ],
   {
     variants: {
-      variant: {
-        toast: [
-          "rounded-lg",
-          "border",
-          "border-ddt-color-divider",
-          "translate-x-[--move-offset-x,0]",
-          "translate-y-[--move-offset-y,0]",
-          "opacity-[--opacity,1]",
-          "[pointer-events:var(--pointer-events,auto)]",
-          "[transition-duration:var(--transition-duration,var(--ddc-toast-animation-duration,0ms))]"
-        ],
-        inline: []
-      },
       status: {
         positive: [
           "before:text-ddt-color-common-success",
-          "before:i-daikin-success"
+          "before:icon-[daikin--success]"
         ],
         negative: [
           "before:text-ddt-color-common-danger-default",
-          "before:i-daikin-error"
+          "before:icon-[daikin--error]"
         ],
         warning: [
           "before:text-ddt-color-common-warning",
-          "before:i-daikin-warning"
+          "before:icon-[daikin--warning]"
+        ],
+        alarm: [
+          "before:text-ddt-color-common-alarm",
+          "before:icon-[daikin--alarm]"
         ],
-        alarm: ["before:text-ddt-color-common-alarm", "before:i-daikin-alarm"],
         information: [
           "before:text-ddt-color-common-information",
-          "before:i-daikin-information"
+          "before:icon-[daikin--information]"
         ]
       }
     }
@@ -82,15 +80,11 @@ const cvaContent = classVarianceAuthority.cva(["flex", "items-center", "w-full"]
     }
   }
 });
-const cvaTitle = classVarianceAuthority.cva(["slotted:inline-block", "font-bold", "leading-[130%]"], {
+const cvaTitle = classVarianceAuthority.cva(["font-bold", "leading-[130%]"], {
   variants: {
     layout: {
-      vertical: ["slotted:natural-break"],
-      horizontal: [
-        "slotted:whitespace-nowrap",
-        "slotted:overflow-hidden",
-        "slotted:overflow-ellipsis"
-      ]
+      vertical: ["natural-break"],
+      horizontal: ["overflow-hidden", "whitespace-nowrap"]
     }
   }
 });
@@ -98,12 +92,7 @@ const cvaDescription = classVarianceAuthority.cva(["inline-block", "leading-[130
   variants: {
     layout: {
       vertical: ["natural-break"],
-      horizontal: [
-        "whitespace-nowrap",
-        "overflow-hidden",
-        "overflow-ellipsis",
-        "flex-1"
-      ]
+      horizontal: ["flex-1", "overflow-hidden", "whitespace-nowrap"]
     }
   }
 });
@@ -123,7 +112,7 @@ exports.DaikinToastNotification = class DaikinToastNotification extends ddsEleme
   }
   render() {
     return lit.html`<div
-      class=${cvaContainer({ variant: "toast", status: this.status })}
+      class=${cvaContainer({ status: this.status })}
       role="alert"
     >
       <div class=${cvaContent({ layout: this.layout })}>
@@ -133,14 +122,14 @@ exports.DaikinToastNotification = class DaikinToastNotification extends ddsEleme
               >${notificationCommon.formatDate(this.timestamp)}</span
             >` : lit.nothing}
       </div>
-      <slot name="action" class="flex-none"></slot>
+      <slot name="action" class="flex-none slotted:flex-none"></slot>
       ${this.closable ? lit.html`<daikin-icon-button
             variant="ghost"
             button-aria-label="Close"
             @click=${this._handleClickClose}
           >
             <span
-              class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-close"
+              class="flex size-6 text-ddt-color-common-text-secondary relative icon-[daikin--close]"
             ></span>
           </daikin-icon-button>` : lit.nothing}
     </div>`;
@@ -152,7 +141,6 @@ exports.DaikinToastNotification.styles = lit.css`
     :host {
       display: block;
       width: fit-content;
-      max-width: 100%;
 
       --ddc-toast-animation-duration: ${lit.unsafeCSS(notificationCommon.TOAST_ANIMATION_DURATION)}ms;
     }
@@ -160,6 +148,10 @@ exports.DaikinToastNotification.styles = lit.css`
     :host([layout="horizontal"]) {
       height: 4rem;
     }
+
+    :host([layout="vertical"]) {
+      max-width: 100%;
+    }
   `;
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })

package/dist/cjs-dev/components/toast-notification/daikin-toast-notification.d.cts

@@ -3,11 +3,10 @@ import { MergeVariantProps } from "../../type-utils.cjs";
 import { cvaTimestamp } from "../../utils/notification-common.cjs";
 export type ToastNotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaContent | typeof cvaTimestamp>;
 declare const cvaContainer: (props?: ({
-    variant?: "inline" | "toast" | null | undefined;
     status?: "negative" | "alarm" | "warning" | "positive" | "information" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const cvaContent: (props?: ({
-    layout?: "horizontal" | "vertical" | null | undefined;
+    layout?: "vertical" | "horizontal" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * The toast notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
@@ -52,6 +51,7 @@ export declare class DaikinToastNotification extends DDSElement {
     status: ToastNotificationVariantProps["status"];
     /**
      * Specify how to arrange the elements.
+     * In `horizontal` layout, text that overflows the container is truncated. To resolve this, use `vertical` layout, shorten the text, or customize the CSS to allow scrolling or wrapping.
      */
     layout: ToastNotificationVariantProps["layout"];
     /**

package/dist/cjs-dev/components/toast-notification-manager/daikin-toast-notification-manager.cjs

@@ -30,11 +30,11 @@ const cvaContainer = classVarianceAuthority.cva(
   [
     "flex",
     "gap-2",
-    "w-[calc(100vw_-_2rem)]",
+    "w-[calc(100vw-2rem)]",
     "fixed",
     "transition-transform",
-    "translate-y-[var(--container-move-offset-y,0)]",
-    "duration-[var(--container-transition-duration,200ms)]"
+    "translate-y-(--container-move-offset-y,0)",
+    "duration-(--container-transition-duration,200ms)"
   ],
   {
     variants: {

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

@@ -31,10 +31,10 @@ const TOGGLE_CLASS_NAME = classVarianceAuthority.cva([
   "appearance-none",
   "enabled:hover:bg-ddt-color-common-neutral-hover",
   "enabled:active:bg-ddt-color-common-neutral-press",
-  "focus-visible:outline",
+  "enabled:outline-ddt-color-common-border-focus",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-ddt-color-common-border-focus",
   "enabled:checked:bg-ddt-color-common-brand-default",
   "enabled:checked:hover:bg-ddt-color-common-brand-hover",
   "enabled:checked:active:bg-ddt-color-common-brand-press",
@@ -49,7 +49,7 @@ const TOGGLE_CLASS_NAME = classVarianceAuthority.cva([
   "before:left-1",
   "before:transition",
   "before:duration-300",
-  "before:checked:translate-x-6",
+  "checked:before:translate-x-6",
   "enabled:before:bg-ddt-color-common-background-default",
   "disabled:before:bg-ddt-color-common-surface-hover"
 ])();

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

@@ -25,14 +25,14 @@ var __decorateClass = (decorators2, target, key, kind) => {
 };
 const cvaTooltip = classVarianceAuthority.cva(
   [
-    "left-[--floating-x,0]",
-    "top-[--floating-y,0]",
+    "left-(--floating-x,0)",
+    "top-(--floating-y,0)",
     "w-max",
     "text-sm",
     "p-2",
     "leading-[130%]",
     "border",
-    "rounded",
+    "rounded-sm",
     "font-daikinSerif",
     "absolute",
     "floating-unready:hidden"

package/dist/cjs-dev/components/tree-item/daikin-tree-item.cjs

@@ -32,7 +32,7 @@ const cvaTreeChildren = classVarianceAuthority.cva(
     "pr-4",
     "pl-[calc((var(--level)+1)*1rem)]",
     "leading-[130%]",
-    "focus-visible:outline",
+    "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus"
@@ -42,31 +42,32 @@ const cvaTreeChildren = classVarianceAuthority.cva(
       disabled: {
         false: [
           "text-ddt-color-common-text-primary",
-          "bg-[--color-base]",
+          "bg-(--color-base)",
           "cursor-pointer"
         ],
         true: ["text-ddt-color-common-disabled"]
       },
       selected: {
         false: [
-          "var-color-transparent/color-base",
-          "hover:var-color-ddt-color-common-surface-hover/color-base",
-          "active:var-color-ddt-color-common-surface-press/color-base"
+          "[--color-base:transparent]",
+          "hover:[--color-base:var(--dds-color-common-surface-hover)]",
+          "active:[--color-base:var(--dds-color-common-surface-press)]"
         ],
         true: [
-          "var-color-ddt-color-common-surface-selected-default/color-base",
-          "hover:var-color-ddt-color-common-surface-selected-hover/color-base",
-          "active:var-color-ddt-color-common-surface-selected-press/color-base"
+          "[--color-base:var(--dds-color-common-surface-selected-default)]",
+          "hover:[--color-base:var(--dds-color-common-surface-selected-hover)]",
+          "active:[--color-base:var(--dds-color-common-surface-selected-press)]"
         ]
       },
       icon: {
         false: ["before:size-6"],
         true: [
-          "before:i-daikin-chevron-right",
+          "before:icon-[daikin--chevron-right]",
           "before:size-5",
           "before:m-0.5",
           "before:transition-all",
-          "before:flex-none"
+          "before:flex-none",
+          "before:self-start"
         ]
       },
       open: {

package/dist/cjs-dev/index.cjs

@@ -20,6 +20,7 @@ const daikinCombobox = require("./components/combobox/daikin-combobox.cjs");
 const daikinDatePicker = require("./components/date-picker/daikin-date-picker.cjs");
 const daikinDropdown = require("./components/dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./components/dropdown-item/daikin-dropdown-item.cjs");
+const daikinEmptyState = require("./components/empty-state/daikin-empty-state.cjs");
 const daikinIcon = require("./components/icon/daikin-icon.cjs");
 const daikinIconButton = require("./components/icon-button/daikin-icon-button.cjs");
 const daikinInlineNotification = require("./components/inline-notification/daikin-inline-notification.cjs");
@@ -33,6 +34,8 @@ const daikinMenu = require("./components/menu/daikin-menu.cjs");
 const daikinModal = require("./components/modal/daikin-modal.cjs");
 const daikinModalFooter = require("./components/modal-footer/daikin-modal-footer.cjs");
 const daikinModalHeader = require("./components/modal-header/daikin-modal-header.cjs");
+const daikinNavigation = require("./components/navigation/daikin-navigation.cjs");
+const daikinNavigationItem = require("./components/navigation-item/daikin-navigation-item.cjs");
 const daikinPagination = require("./components/pagination/daikin-pagination.cjs");
 const daikinProgressBar = require("./components/progress-bar/daikin-progress-bar.cjs");
 const daikinProgressIndicator = require("./components/progress-indicator/daikin-progress-indicator.cjs");
@@ -48,6 +51,7 @@ const daikinTable = require("./components/table/daikin-table.cjs");
 const daikinTableCell = require("./components/table-cell/daikin-table-cell.cjs");
 const daikinTableHeaderCell = require("./components/table-header-cell/daikin-table-header-cell.cjs");
 const daikinTabs = require("./components/tabs/daikin-tabs.cjs");
+const daikinTag = require("./components/tag/daikin-tag.cjs");
 const daikinTextArea = require("./components/text-area/daikin-text-area.cjs");
 const daikinTextField = require("./components/text-field/daikin-text-field.cjs");
 const daikinTextMaskedField = require("./components/text-masked-field/daikin-text-masked-field.cjs");
@@ -60,6 +64,7 @@ const daikinTree = require("./components/tree/daikin-tree.cjs");
 const daikinTreeItem = require("./components/tree-item/daikin-tree-item.cjs");
 const daikinTreeSection = require("./components/tree-section/daikin-tree-section.cjs");
 const iconRegistry = require("./icon-registry.cjs");
+const navigation = require("./navigation.cjs");
 Object.defineProperty(exports, "DaikinAccordion", {
   enumerable: true,
   get: () => daikinAccordion.DaikinAccordion
@@ -141,6 +146,10 @@ Object.defineProperty(exports, "DaikinDropdownItem", {
   enumerable: true,
   get: () => daikinDropdownItem.DaikinDropdownItem
 });
+Object.defineProperty(exports, "DaikinEmptyState", {
+  enumerable: true,
+  get: () => daikinEmptyState.DaikinEmptyState
+});
 Object.defineProperty(exports, "DaikinIcon", {
   enumerable: true,
   get: () => daikinIcon.DaikinIcon
@@ -194,6 +203,14 @@ Object.defineProperty(exports, "DaikinModalHeader", {
   enumerable: true,
   get: () => daikinModalHeader.DaikinModalHeader
 });
+Object.defineProperty(exports, "DaikinNavigation", {
+  enumerable: true,
+  get: () => daikinNavigation.DaikinNavigation
+});
+Object.defineProperty(exports, "DaikinNavigationItem", {
+  enumerable: true,
+  get: () => daikinNavigationItem.DaikinNavigationItem
+});
 Object.defineProperty(exports, "DaikinPagination", {
   enumerable: true,
   get: () => daikinPagination.DaikinPagination
@@ -254,6 +271,10 @@ Object.defineProperty(exports, "DaikinTabs", {
   enumerable: true,
   get: () => daikinTabs.DaikinTabs
 });
+Object.defineProperty(exports, "DaikinTag", {
+  enumerable: true,
+  get: () => daikinTag.DaikinTag
+});
 Object.defineProperty(exports, "DaikinTextArea", {
   enumerable: true,
   get: () => daikinTextArea.DaikinTextArea
@@ -311,3 +332,7 @@ Object.defineProperty(exports, "DaikinTreeSection", {
 });
 exports.IconRegistry = iconRegistry.IconRegistry;
 exports.iconRegistry = iconRegistry.iconRegistry;
+exports.getNavigationTarget = navigation.getNavigationTarget;
+exports.getSPANavigationURL = navigation.getSPANavigationURL;
+exports.isInternalNavigation = navigation.isInternalNavigation;
+exports.shouldSPANavigate = navigation.shouldSPANavigate;

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

@@ -1,3 +1,4 @@
 export * from "./components/index.cjs";
 export * from "./icon-registry.cjs";
 export * from "./lit-analyzer-types.cjs";
+export * from "./navigation.cjs";

package/dist/cjs-dev/navigation.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./base/dds-element.cjs");
+require("./base/dds-form-element.cjs");
+require("lit/decorators.js");
+require("./base/define.cjs");
+function isDDSNavigable(element) {
+  return typeof element === "object" && element != null && // We intentionally skip the `instanceof` check to avoid issues with multiple versions of the library.
+  "getDDSNavigationTarget" in element;
+}
+function getNavigationTarget(element) {
+  if (isDDSNavigable(element)) {
+    return element.getDDSNavigationTarget();
+  }
+  return null;
+}
+function isInternalNavigation(href, base = document.baseURI, origin = location.origin) {
+  var _a;
+  try {
+    const scheme = (_a = /^[a-zA-Z][a-zA-Z\d+\-.]*:/.exec(href)) == null ? void 0 : _a[0];
+    if (scheme && !/^https?:$/.test(scheme)) {
+      return false;
+    }
+    const url = new URL(href, base);
+    return url.origin === origin;
+  } catch {
+    return false;
+  }
+}
+function shouldSPANavigate(event, element = event == null ? void 0 : event.target, target = getNavigationTarget(element)) {
+  if (!element) {
+    return false;
+  }
+  if (event) {
+    if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
+      return false;
+    }
+    if (event.button !== 0) {
+      return false;
+    }
+  }
+  if (!target || (target.target || "_self") !== "_self" || !isInternalNavigation(target.href)) {
+    return false;
+  }
+  return true;
+}
+function getNearestDDSNavigable(paths) {
+  return paths.find((path) => isDDSNavigable(path)) ?? null;
+}
+function getSPANavigationURL(event) {
+  const paths = event.composedPath();
+  const element = getNearestDDSNavigable(paths);
+  const target = element == null ? void 0 : element.getDDSNavigationTarget();
+  if (!target || !shouldSPANavigate(event, element, target)) {
+    return null;
+  }
+  return target.href;
+}
+exports.getNavigationTarget = getNavigationTarget;
+exports.getSPANavigationURL = getSPANavigationURL;
+exports.isInternalNavigation = isInternalNavigation;
+exports.shouldSPANavigate = shouldSPANavigate;

package/dist/cjs-dev/navigation.d.cts

@@ -0,0 +1,33 @@
+import { NavigationTarget } from "./base/index.cjs";
+/**
+ * Extracts a navigation target from a component that implements `DDSNavigable`.
+ *
+ * @param element - Candidate element that may implement `DDSNavigable`.
+ * @returns The navigation target when available, otherwise null.
+ */
+export declare function getNavigationTarget(element: unknown): NavigationTarget | null;
+/**
+ * Returns true when the href points to the current origin using http(s) or a relative URL.
+ *
+ * @param href - Destination URL or path to evaluate.
+ * @param base - Base URL used when resolving relative paths.
+ * @param origin - Origin to compare against after resolving the URL.
+ * @returns True when the navigation stays within the same origin.
+ */
+export declare function isInternalNavigation(href: string, base?: string, origin?: string): boolean;
+/**
+ * Determines whether a click should be handled by SPA navigation rules.
+ *
+ * @param event - Mouse event that triggered navigation, if any.
+ * @param element - Target element to evaluate when no event is available.
+ * @param target - Navigation target information to evaluate when no event is available.
+ * @returns True when the click qualifies for SPA navigation.
+ */
+export declare function shouldSPANavigate(event: MouseEvent | undefined, element?: EventTarget | null | undefined, target?: NavigationTarget | null): boolean;
+/**
+ * Returns the URL to navigate to when a click event qualifies for SPA navigation, otherwise null.
+ *
+ * @param event - Mouse event that triggered navigation.
+ * @returns The URL to navigate to, or null when the click does not qualify for SPA navigation.
+ */
+export declare function getSPANavigationURL(event: MouseEvent): string | null;