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

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