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

package/dist/es-dev/components/text-masked-field/daikin-text-masked-field.js

@@ -28,25 +28,25 @@ const cvaInput = 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"
@@ -55,12 +55,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: ["pl-4"],

package/dist/es-dev/components/time-picker/daikin-time-picker.js

@@ -152,24 +152,24 @@ const cvaField = 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"
@@ -178,10 +178,10 @@ const cvaField = 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)]"]
       }
     }
   }
@@ -496,7 +496,7 @@ let DaikinTimePicker = class extends DDSFormElement {
         @mouseup=${this._handleMouseUp}
       />
       <daikin-dropdown
-        class="w-[88px]"
+        class="w-22"
         placeholder="--"
         .error=${this.error}
         .value=${this._meridiem}

package/dist/es-dev/components/toast-notification/daikin-toast-notification.d.ts

@@ -3,11 +3,10 @@ import { MergeVariantProps } from "../../type-utils.js";
 import { cvaTimestamp } from "../../utils/notification-common.js";
 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/es-dev/components/toast-notification/daikin-toast-notification.js

@@ -33,40 +33,38 @@ const cvaContainer = 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]"
         ]
       }
     }
@@ -80,15 +78,11 @@ const cvaContent = cva(["flex", "items-center", "w-full"], {
     }
   }
 });
-const cvaTitle = cva(["slotted:inline-block", "font-bold", "leading-[130%]"], {
+const cvaTitle = 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"]
     }
   }
 });
@@ -96,12 +90,7 @@ const cvaDescription = 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"]
     }
   }
 });
@@ -121,7 +110,7 @@ let DaikinToastNotification = class extends DDSElement {
   }
   render() {
     return html`<div
-      class=${cvaContainer({ variant: "toast", status: this.status })}
+      class=${cvaContainer({ status: this.status })}
       role="alert"
     >
       <div class=${cvaContent({ layout: this.layout })}>
@@ -131,14 +120,14 @@ let DaikinToastNotification = class extends DDSElement {
               >${formatDate(this.timestamp)}</span
             >` : nothing}
       </div>
-      <slot name="action" class="flex-none"></slot>
+      <slot name="action" class="flex-none slotted:flex-none"></slot>
       ${this.closable ? 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>` : nothing}
     </div>`;
@@ -150,7 +139,6 @@ DaikinToastNotification.styles = css`
     :host {
       display: block;
       width: fit-content;
-      max-width: 100%;
 
       --ddc-toast-animation-duration: ${unsafeCSS(TOAST_ANIMATION_DURATION)}ms;
     }
@@ -158,6 +146,10 @@ DaikinToastNotification.styles = css`
     :host([layout="horizontal"]) {
       height: 4rem;
     }
+
+    :host([layout="vertical"]) {
+      max-width: 100%;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true, fallbackValue: "" })

package/dist/es-dev/components/toast-notification-manager/daikin-toast-notification-manager.js

@@ -28,11 +28,11 @@ const cvaContainer = 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/es-dev/components/toggle/daikin-toggle.js

@@ -29,10 +29,10 @@ const TOGGLE_CLASS_NAME = 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",
@@ -47,7 +47,7 @@ const TOGGLE_CLASS_NAME = 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/es-dev/components/tooltip/daikin-tooltip.js

@@ -23,14 +23,14 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const cvaTooltip = 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/es-dev/components/tree-item/daikin-tree-item.js

@@ -30,7 +30,7 @@ const cvaTreeChildren = 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"
@@ -40,31 +40,32 @@ const cvaTreeChildren = 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/es-dev/index.d.ts

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

package/dist/es-dev/index.js

@@ -18,6 +18,7 @@ import { DaikinCombobox, defaultFilterFn } from "./components/combobox/daikin-co
 import { DaikinDatePicker } from "./components/date-picker/daikin-date-picker.js";
 import { DaikinDropdown } from "./components/dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./components/dropdown-item/daikin-dropdown-item.js";
+import { DaikinEmptyState } from "./components/empty-state/daikin-empty-state.js";
 import { DaikinIcon, iconList } from "./components/icon/daikin-icon.js";
 import { DaikinIconButton } from "./components/icon-button/daikin-icon-button.js";
 import { DaikinInlineNotification } from "./components/inline-notification/daikin-inline-notification.js";
@@ -31,6 +32,8 @@ import { DaikinMenu } from "./components/menu/daikin-menu.js";
 import { DaikinModal } from "./components/modal/daikin-modal.js";
 import { DaikinModalFooter } from "./components/modal-footer/daikin-modal-footer.js";
 import { DaikinModalHeader } from "./components/modal-header/daikin-modal-header.js";
+import { DaikinNavigation } from "./components/navigation/daikin-navigation.js";
+import { DaikinNavigationItem } from "./components/navigation-item/daikin-navigation-item.js";
 import { DaikinPagination } from "./components/pagination/daikin-pagination.js";
 import { DaikinProgressBar } from "./components/progress-bar/daikin-progress-bar.js";
 import { DaikinProgressIndicator } from "./components/progress-indicator/daikin-progress-indicator.js";
@@ -46,6 +49,7 @@ import { DaikinTable } from "./components/table/daikin-table.js";
 import { DaikinTableCell } from "./components/table-cell/daikin-table-cell.js";
 import { DaikinTableHeaderCell } from "./components/table-header-cell/daikin-table-header-cell.js";
 import { DaikinTabs } from "./components/tabs/daikin-tabs.js";
+import { DaikinTag } from "./components/tag/daikin-tag.js";
 import { DaikinTextArea } from "./components/text-area/daikin-text-area.js";
 import { DaikinTextField } from "./components/text-field/daikin-text-field.js";
 import { DaikinTextMaskedField } from "./components/text-masked-field/daikin-text-masked-field.js";
@@ -58,6 +62,7 @@ import { DaikinTree } from "./components/tree/daikin-tree.js";
 import { DaikinTreeItem, cvaTreeChildren } from "./components/tree-item/daikin-tree-item.js";
 import { DaikinTreeSection } from "./components/tree-section/daikin-tree-section.js";
 import { IconRegistry, iconRegistry } from "./icon-registry.js";
+import { getNavigationTarget, getSPANavigationURL, isInternalNavigation, shouldSPANavigate } from "./navigation.js";
 export {
   DaikinAccordion,
   DaikinAccordionItem,
@@ -79,6 +84,7 @@ export {
   DaikinDatePicker,
   DaikinDropdown,
   DaikinDropdownItem,
+  DaikinEmptyState,
   DaikinIcon,
   DaikinIconButton,
   DaikinInlineNotification,
@@ -92,6 +98,8 @@ export {
   DaikinModal,
   DaikinModalFooter,
   DaikinModalHeader,
+  DaikinNavigation,
+  DaikinNavigationItem,
   DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
@@ -107,6 +115,7 @@ export {
   DaikinTableCell,
   DaikinTableHeaderCell,
   DaikinTabs,
+  DaikinTag,
   DaikinTextArea,
   DaikinTextField,
   DaikinTextMaskedField,
@@ -125,12 +134,16 @@ export {
   formatPartsForUI,
   formatTimeForUI,
   from24HourFormat,
+  getNavigationTarget,
+  getSPANavigationURL,
   getTimeItemInSelection,
   iconList,
   iconRegistry,
+  isInternalNavigation,
   isTimeOutOfRange,
   isValidValueTime,
   parsePartsFromUIValue,
+  shouldSPANavigate,
   to24HourFormat,
   tryParseTimeFromUIValue
 };

package/dist/es-dev/navigation.d.ts

@@ -0,0 +1,33 @@
+import { NavigationTarget } from "./base/index.js";
+/**
+ * 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;

package/dist/es-dev/navigation.js

@@ -0,0 +1,62 @@
+import "./base/dds-element.js";
+import "./base/dds-form-element.js";
+import "lit/decorators.js";
+import "./base/define.js";
+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;
+}
+export {
+  getNavigationTarget,
+  getSPANavigationURL,
+  isInternalNavigation,
+  shouldSPANavigate
+};