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

package/dist/es/components/tree/daikin-tree.js

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

package/dist/es/components/tree-item/daikin-tree-item.js

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

package/dist/es/components/tree-section/daikin-tree-section.js

@@ -89,14 +89,18 @@ let DaikinTreeSection = class extends DDSElement {
       }
       case "left":
         if (this._open) {
-          this.open = false;
+          if (this.dispatchEvent(new Event("toggle", { cancelable: true }))) {
+            this.open = false;
+          }
         } else {
           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();
         }
@@ -138,7 +142,7 @@ let DaikinTreeSection = class extends DDSElement {
       this._updateChildrenLevel();
     }
     if (changedProperties.has("disabled")) {
-      if (this.disabled) {
+      if (this.disabled && changedProperties.get("disabled") === false) {
         emitTreeUnselect(this);
       }
     }

package/dist/es/components/vertical-navigation/daikin-vertical-navigation.d.ts

@@ -0,0 +1,77 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * 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/es/components/vertical-navigation/daikin-vertical-navigation.js

@@ -0,0 +1,116 @@
+import { unsafeCSS, css, html } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let DaikinVerticalNavigation = class extends 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 html`<nav aria-label=${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();
+    }
+  }
+};
+DaikinVerticalNavigation.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      min-width: 10rem;
+      --divider-bottom-display: none;
+    }
+
+    :host([border="underline"]) ::slotted(daikin-vertical-navigation-item) {
+      --divider-bottom-display: block;
+    }
+  `;
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinVerticalNavigation.prototype, "openItems", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinVerticalNavigation.prototype, "exclusive", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "none",
+    isAllowedValue: oneOf([
+      "none",
+      "underline"
+    ])
+  })
+], DaikinVerticalNavigation.prototype, "border", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "navigation-aria-label" })
+], DaikinVerticalNavigation.prototype, "navigationAriaLabel", 2);
+__decorateClass([
+  queryAssignedElements({
+    selector: "daikin-vertical-navigation-item"
+  })
+], DaikinVerticalNavigation.prototype, "_items", 2);
+DaikinVerticalNavigation = __decorateClass([
+  ddsElement("daikin-vertical-navigation")
+], DaikinVerticalNavigation);
+export {
+  DaikinVerticalNavigation
+};

package/dist/es/components/vertical-navigation/index.d.ts

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

package/dist/es/components/vertical-navigation/index.js

@@ -0,0 +1,4 @@
+import { DaikinVerticalNavigation } from "./daikin-vertical-navigation.js";
+export {
+  DaikinVerticalNavigation
+};

package/dist/es/components/vertical-navigation-item/daikin-vertical-navigation-item.d.ts

@@ -0,0 +1,121 @@
+import { PropertyValues } from 'lit';
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
+/**
+ * The vertical navigation item component is a child element within the `daikin-vertical-navigation` component.
+ * It can be rendered as a direct link or a collapsible menu (Use `daikin-vertical-navigation-menu-item` components for sub-items).
+ *
+ * Hierarchy:
+ * - `daikin-vertical-navigation` > `daikin-vertical-navigation-item`
+ *
+ * @fires toggle - Fires when the item is activated (menu button clicked, or link item activated). Used by `daikin-vertical-navigation` to update `openItems` (and enforce exclusive mode when enabled).
+ *
+ * @slot - A slot for the sub-list content (e.g. `daikin-vertical-navigation-menu-item` elements). Only used when `type="menu"`.
+ * @slot label - A slot for the item label text (used as the link text or the menu button label).
+ * @slot left-icon - A slot for an optional icon placed to the left of the label.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/vertical-navigation-item/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- Link item with badge -->
+ * <daikin-vertical-navigation-item type="link" href="/home" badge="alarm">
+ *   <span slot="label">Home</span>
+ * </daikin-vertical-navigation-item>
+ *
+ * <!-- Menu item -->
+ * <daikin-vertical-navigation-item type="menu" name="settings" open>
+ *   <span slot="label">Settings</span>
+ *   <daikin-vertical-navigation-menu-item href="/settings/general">
+ *     General
+ *   </daikin-vertical-navigation-menu-item>
+ *   <daikin-vertical-navigation-menu-item href="/settings/security" badge="alarm">
+ *     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>
+ *
+ * ```
+ */
+export declare class DaikinVerticalNavigationItem extends DDSElement implements DDSNavigable {
+    static readonly styles: import('lit').CSSResult;
+    private _triggerRef;
+    /**
+     * Type of the vertical navigation item.
+     * - `"link"` (default): Renders as an `<a>` element for direct navigation.
+     * - `"menu"`: Renders as a collapsible section with a toggle button and a default slot for sub-items.
+     *
+     * @default "link"
+     */
+    type: "link" | "menu";
+    /**
+     * The link `href`. Only used when `type="link"`.
+     */
+    href: string | null;
+    /**
+     * A unique name for this item within the vertical navigation.
+     * Used by `daikin-vertical-navigation` for exclusive mode. Only meaningful when `type="menu"`.
+     */
+    name: string;
+    /**
+     * Whether the menu content is expanded.
+     * Only used when `type="menu"`. Controlled by `daikin-vertical-navigation`.
+     * Even in the disabled state, the open state will not be closed automatically.
+     */
+    open: boolean;
+    /**
+     * Whether this item is the currently active/selected item.
+     * When `true`, a blue vertical indicator bar is displayed on the left side.
+     */
+    current: boolean;
+    /**
+     * Badge to display on the right side of the item.
+     * Uses `daikin-badge` in standalone dot mode. Set to `"none"` (default) to hide the badge.
+     * Supported colors: `"negative"`, `"alarm"`, `"warning"`, `"positive"`, `"information"`.
+     *
+     * @default "none"
+     */
+    badge: "none" | "negative" | "alarm" | "warning" | "positive" | "information";
+    /**
+     * The badge message for assistive technologies. Only used when `badge` is not `"none"`.
+     */
+    badgeMessage: string | null;
+    /**
+     * Whether the item is disabled.
+     * A disabled item cannot be clicked or focused.
+     */
+    disabled: boolean;
+    constructor();
+    /**
+     * _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;
+    private _handleTriggerClick;
+    private _getSlottedItems;
+    private _propagateDisabledToChildren;
+    updated(changedProperties: PropertyValues): void;
+    private _handleMenuSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner link or menu button.
+     * Has no effect when `disabled` is `true` or `href` is not provided for a link.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-vertical-navigation-item": DaikinVerticalNavigationItem;
+    }
+}
+export default DaikinVerticalNavigationItem;