@daikin-oss/design-system-web-components 1.5.2 → 1.6.0-next.0

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

@@ -31,7 +31,6 @@ const cvaContainer = classVarianceAuthority.cva(
     "bg-ddt-color-common-background-default",
     "p-4",
     "overflow-hidden",
-    "font-daikinSerif",
     "transition",
     "box-border",
     "before:size-6",
@@ -80,7 +79,7 @@ const cvaContent = classVarianceAuthority.cva(["flex", "items-center", "w-full"]
     }
   }
 });
-const cvaTitle = classVarianceAuthority.cva(["font-bold", "leading-[130%]"], {
+const cvaTitle = classVarianceAuthority.cva(["font-bold"], {
   variants: {
     layout: {
       vertical: ["natural-break"],
@@ -88,7 +87,7 @@ const cvaTitle = classVarianceAuthority.cva(["font-bold", "leading-[130%]"], {
     }
   }
 });
-const cvaDescription = classVarianceAuthority.cva(["inline-block", "leading-[130%]"], {
+const cvaDescription = classVarianceAuthority.cva(["inline-block"], {
   variants: {
     layout: {
       vertical: ["natural-break"],

package/dist/cjs/components/toggle/daikin-toggle.d.cts

@@ -29,6 +29,7 @@ export declare class DaikinToggle extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Whether the toggle switch is turned on.
+     * To keep external state in sync, listen to the `change` event.
      */
     checked: boolean;
     /**

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

@@ -28,12 +28,10 @@ const cvaTooltip = classVarianceAuthority.cva(
     "left-(--floating-x,0)",
     "top-(--floating-y,0)",
     "w-max",
-    "text-sm",
+    "text-(length:--dds-font-size-350)",
     "p-2",
-    "leading-[130%]",
     "border",
     "rounded-sm",
-    "font-daikinSerif",
     "absolute",
     "floating-unready:hidden"
   ],
@@ -124,7 +122,7 @@ exports.DaikinTooltip = class DaikinTooltip extends ddsElement.DDSElement {
       10
     );
     return lit.html`<div
-      class="relative inline-block text-ddt-color-common-text-primary font-daikinSerif"
+      class="relative inline-block text-ddt-color-common-text-primary"
     >
       <div
         id="trigger"

package/dist/cjs/components/tooltip/daikin-tooltip.d.cts

@@ -54,6 +54,9 @@ export declare class DaikinTooltip extends DDSElement {
     color: TooltipVariantProps["color"];
     /**
      * Whether the tooltip is open.
+     * When controlling this property manually, make sure to:
+     * - Set `trigger="manual"`.
+     * - Either set `popover-value="manual"`, or listen to the `toggle` event and sync your state based on `event.newState`.
      */
     open: boolean;
     /**
@@ -64,8 +67,10 @@ export declare class DaikinTooltip extends DDSElement {
     description: string;
     /**
      * Specify the value of the popover attribute in the Popover API.
-     * - `auto`: Clicking on a trigger element will open a tooltip, and clicking again will close it. You can also close it using the Esc button. You cannot open multiple tooltips at the same time.
-     * - `manual`: No click operation is specified for the trigger element. It will not close even if the Esc button is pressed. Multiple tooltips can be opened at once.
+     * - `auto`: Enables the browser's native popover behavior, such as closing on outside click or when the Esc key is pressed. Only one `auto` popover can remain open at a time.
+     * - `manual`: Disables automatic light-dismiss behavior. The tooltip will not close on outside click or when the Esc key is pressed, and multiple `manual` popovers can remain open at the same time.
+     *
+     * When controlling `open` manually, either set `popover-value="manual"` or listen to the `toggle` event and sync your state based on `event.newState`.
      *
      * @default "auto"
      */
@@ -76,6 +81,8 @@ export declare class DaikinTooltip extends DDSElement {
      * - `click`: The tooltip is displayed when the mouse clicks on the trigger element, and hidden when you click on it again.
      * - `manual`: The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
      *
+     * When controlling `open` manually, use `trigger="manual"` (do not use other trigger values).
+     *
      * @default "hover"
      */
     trigger: "hover" | "click" | "manual";

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

@@ -44,6 +44,7 @@ exports.DaikinTree = class DaikinTree extends ddsElement.DDSElement {
     event.stopPropagation();
     const target = event.target;
     this.selectedItems = [target.value];
+    this.dispatchEvent(new Event("change", { bubbles: true }));
   }
   _handleTreeUnselect(event) {
     if (!this.selectable) {
@@ -51,6 +52,7 @@ exports.DaikinTree = class DaikinTree extends ddsElement.DDSElement {
     }
     event.stopPropagation();
     this.selectedItems = this.getSelectedItems();
+    this.dispatchEvent(new Event("change", { bubbles: true }));
   }
   render() {
     return lit.html`<div role="tree" @mousedown=${this._handleMouseDown}>

package/dist/cjs/components/tree/daikin-tree.d.cts

@@ -8,6 +8,8 @@ import { DDSElement } from "../../base/index.cjs";
  * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-section` ...
  * - `daikin-tree` > `daikin-tree-item`
  *
+ * @fires change - A custom event emitted when the selection changes due to user interaction. The updated `selectedItems` can be read from the event target.
+ *
  * @slot - A slot for tree sections and tree items. Place `daikin-tree-section` or `daikin-tree-item` elements here.
  *
  * @example
@@ -39,6 +41,8 @@ export declare class DaikinTree extends DDSElement {
     selectable: boolean;
     /**
      * The values of the currently selected tree sections or items.
+     * When `selectable` is `true`, this property is updated and a `change` event is emitted when the user clicks.
+     * When controlling this property externally, listen to the `change` event and read the updated `selectedItems` from the component to keep your state in sync.
      * Even if `selectable` is `false`, you can still set this property yourself.
      * See the `value` property of the `daikin-tree-section` and `daikin-tree-item` components.
      */

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

@@ -31,7 +31,6 @@ const cvaTreeChildren = classVarianceAuthority.cva(
     "py-3",
     "pr-4",
     "pl-[calc((var(--level)+1)*1rem)]",
-    "leading-[130%]",
     "natural-break",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
@@ -136,7 +135,7 @@ exports.DaikinTreeItem = class DaikinTreeItem extends ddsElement.DDSElement {
   }
   updated(changedProperties) {
     if (changedProperties.has("disabled")) {
-      if (this.disabled) {
+      if (this.disabled && changedProperties.get("disabled") === false) {
         common.emitTreeUnselect(this);
       }
     }

package/dist/cjs/components/tree-section/daikin-tree-section.cjs

@@ -91,14 +91,18 @@ exports.DaikinTreeSection = class DaikinTreeSection extends ddsElement.DDSElemen
       }
       case "left":
         if (this._open) {
-          this.open = false;
+          if (this.dispatchEvent(new Event("toggle", { cancelable: true }))) {
+            this.open = false;
+          }
         } else {
           common.emitTreeMoveFocus(this, "left");
         }
         break;
       case "right":
         if (!this._open) {
-          this.open = true;
+          if (this.dispatchEvent(new Event("toggle", { cancelable: true }))) {
+            this.open = true;
+          }
         } else {
           (_a = this._children[0]) == null ? void 0 : _a.focus();
         }
@@ -140,7 +144,7 @@ exports.DaikinTreeSection = class DaikinTreeSection extends ddsElement.DDSElemen
       this._updateChildrenLevel();
     }
     if (changedProperties.has("disabled")) {
-      if (this.disabled) {
+      if (this.disabled && changedProperties.get("disabled") === false) {
         common.emitTreeUnselect(this);
       }
     }

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

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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;
+};
+exports.DaikinVerticalNavigation = class DaikinVerticalNavigation extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.openItems = [];
+    this.exclusive = false;
+    this.navigationAriaLabel = null;
+  }
+  _handleToggle(event) {
+    const target = event.target;
+    if (target.type === "link") {
+      if (this.exclusive && this.openItems.length > 0) {
+        this.openItems = [];
+        this._reflectItemOpen();
+        this.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+      return;
+    }
+    const targetName = target.name;
+    if (!targetName) {
+      return;
+    }
+    const willOpen = !target.open;
+    if (this.exclusive) {
+      this.openItems = willOpen ? [targetName] : [];
+    } else {
+      this.openItems = willOpen ? [...this.openItems, targetName] : this.openItems.filter((item) => item !== targetName);
+    }
+    this._reflectItemOpen();
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  _reflectItemOpen() {
+    for (const item of this._items) {
+      if (item.type === "menu") {
+        item.open = this.openItems.includes(item.name);
+      }
+    }
+  }
+  render() {
+    return lit.html`<nav aria-label=${ifDefined_js.ifDefined(this.navigationAriaLabel)}>
+      <div role="list" class="w-full flex flex-col">
+        <slot
+          @toggle=${this._handleToggle}
+          @slotchange=${this._reflectItemOpen}
+        ></slot>
+      </div>
+    </nav>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("openItems") || changedProperties.has("exclusive")) {
+      this._reflectItemOpen();
+    }
+  }
+};
+exports.DaikinVerticalNavigation.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      min-width: 10rem;
+      --divider-bottom-display: none;
+    }
+
+    :host([border="underline"]) ::slotted(daikin-vertical-navigation-item) {
+      --divider-bottom-display: block;
+    }
+  `;
+__decorateClass([
+  ddsProperty.property({ type: Array, attribute: false })
+], exports.DaikinVerticalNavigation.prototype, "openItems", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinVerticalNavigation.prototype, "exclusive", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "none",
+    isAllowedValue: ddsProperty.oneOf([
+      "none",
+      "underline"
+    ])
+  })
+], exports.DaikinVerticalNavigation.prototype, "border", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true, attribute: "navigation-aria-label" })
+], exports.DaikinVerticalNavigation.prototype, "navigationAriaLabel", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({
+    selector: "daikin-vertical-navigation-item"
+  })
+], exports.DaikinVerticalNavigation.prototype, "_items", 2);
+exports.DaikinVerticalNavigation = __decorateClass([
+  decorators.ddsElement("daikin-vertical-navigation")
+], exports.DaikinVerticalNavigation);

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

@@ -0,0 +1,77 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * The vertical navigation component serves as the parent element that organizes and manages the overall structure of a vertical navigation sidebar.
+ * It supports an exclusive mode where only one menu item can be open at a time.
+ *
+ * Hierarchy:
+ * - `daikin-vertical-navigation` > `daikin-vertical-navigation-item`
+ *
+ * @fires change - A custom event emitted when the open state of the vertical navigation changes. The updated `openItems` can be read from the event target.
+ *
+ * @slot - A slot for the navigation items. Place `daikin-vertical-navigation-item` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/vertical-navigation/index.js";
+ * import "@daikin-oss/design-system-web-components/components/vertical-navigation-item/index.js";
+ * import "@daikin-oss/design-system-web-components/components/vertical-navigation-menu-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-vertical-navigation navigation-aria-label="Global Navigation">
+ *   <daikin-vertical-navigation-item type="link" href="/home" current>
+ *     <span slot="label">Home</span>
+ *   </daikin-vertical-navigation-item>
+ *   <daikin-vertical-navigation-item type="menu" name="settings">
+ *     <span slot="label">Settings</span>
+ *     <daikin-vertical-navigation-menu-item href="/settings/general">
+ *       General
+ *     </daikin-vertical-navigation-menu-item>
+ *     <daikin-vertical-navigation-menu-item badge="alarm" badge-message="New content updated" href="/settings/security">
+ *       Security
+ *     </daikin-vertical-navigation-menu-item>
+ *     <daikin-vertical-navigation-menu-item href="/settings/billing" disabled>
+ *       Billing
+ *     </daikin-vertical-navigation-menu-item>
+ *   </daikin-vertical-navigation-item>
+ * </daikin-vertical-navigation>
+ * ```
+ */
+export declare class DaikinVerticalNavigation extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * A list of the names of the open menu items.
+     * If `exclusive` is `true`, this array contains at most one element.
+     */
+    openItems: string[];
+    /**
+     * Whether or not to use exclusive mode.
+     * If `true`, only one menu item can be open at a time, and clicking a
+     * link-type item also closes any currently open menu items.
+     */
+    exclusive: boolean;
+    /**
+     * The border style of the navigation items.
+     * - `none`: No border style.
+     * - `underline`: Underline border style shown below each navigation item.
+     *
+     * @default "none"
+     */
+    border: "none" | "underline";
+    /**
+     * The aria-label of the navigation.
+     */
+    navigationAriaLabel: string | null;
+    private readonly _items;
+    private _handleToggle;
+    private _reflectItemOpen;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-vertical-navigation": DaikinVerticalNavigation;
+    }
+}
+export default DaikinVerticalNavigation;

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

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

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

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