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

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

@@ -26,13 +26,13 @@ const cvaHeader = classVarianceAuthority.cva(
     "flex",
     "relative",
     "items-start",
-    "gap-2",
+    "gap-0",
     "w-full",
-    "min-h-12",
-    "px-4",
-    "py-3",
+    "px-(--dds-padding-30)",
+    "py-(--dds-padding-30)",
     "font-bold",
     "text-left",
+    "text-(length:--dds-font-size-label-text)",
     "natural-break"
   ],
   {
@@ -53,59 +53,169 @@ const cvaHeader = classVarianceAuthority.cva(
           "focus-visible:before:z-1",
           "focus-visible:before:border-2",
           "focus-visible:before:border-ddt-color-common-border-focus"
+        ],
+        section: [
+          "focus-visible:outline-hidden",
+          "focus-visible:before:absolute",
+          "focus-visible:before:-inset-1",
+          "focus-visible:before:z-1",
+          "focus-visible:before:border-2",
+          "focus-visible:before:border-ddt-color-common-border-focus"
         ]
       },
       disabled: {
-        false: ["text-ddt-color-common-neutral-default"],
+        false: [],
         true: ["text-ddt-color-common-disabled"]
       },
       current: {
         false: [],
-        true: []
+        true: [],
+        descendant: []
+      },
+      interactive: {
+        true: ["text-(length:--dds-font-size-label-text)"],
+        false: [
+          "font-normal",
+          "cursor-default",
+          "pointer-events-none",
+          "tracking-widest",
+          "text-(length:--dds-font-size-helper-text)"
+        ]
       }
     },
+    defaultVariants: {
+      interactive: true
+    },
     compoundVariants: [
       {
-        type: ["link", "menu"],
+        type: ["link", "menu", "section"],
+        disabled: false,
+        class: ["text-ddt-color-common-neutral-default"]
+      },
+      {
+        type: ["link", "menu", "section"],
         disabled: false,
+        current: false,
         class: [
           "hover:text-ddt-color-common-neutral-hover",
           "active:text-ddt-color-common-neutral-press"
         ]
       },
+      {
+        type: ["link", "menu", "section"],
+        disabled: false,
+        current: true,
+        class: [
+          "hover:text-ddt-color-common-neutral-default",
+          "active:text-ddt-color-common-neutral-default"
+        ]
+      },
       {
         type: "menu",
         disabled: false,
         class: ["cursor-pointer"]
       },
       {
-        type: "link",
+        type: "menu",
+        disabled: false,
+        current: false,
+        class: [
+          "hover:bg-ddt-color-common-surface-hover",
+          "active:bg-ddt-color-common-surface-press"
+        ]
+      },
+      {
+        type: "menu",
+        disabled: false,
+        current: true,
+        class: [
+          "hover:bg-ddt-color-common-surface-brand-hover",
+          "active:bg-ddt-color-common-surface-brand-press"
+        ]
+      },
+      {
+        type: "section",
+        disabled: false,
+        class: ["cursor-pointer"]
+      },
+      {
+        type: ["link", "section"],
         disabled: true,
         class: ["pointer-events-none"]
       },
       {
-        type: ["link", "menu"],
+        type: ["link", "menu", "section"],
         disabled: false,
         current: false,
         class: [
-          "link-enabled:hover:bg-ddt-color-common-surface-hover",
-          "link-enabled:active:bg-ddt-color-common-surface-press"
+          "hover:bg-ddt-color-common-surface-hover",
+          "active:bg-ddt-color-common-surface-press"
         ]
       },
       {
-        type: ["link", "menu"],
+        type: ["link", "menu", "section"],
+        disabled: false,
+        current: "descendant",
+        class: [
+          "text-ddt-color-common-neutral-default",
+          "hover:bg-ddt-color-common-surface-brand-hover",
+          "active:bg-ddt-color-common-surface-brand-press"
+        ]
+      },
+      {
+        type: ["link", "menu", "section"],
         disabled: false,
         current: true,
         class: [
-          "link-enabled:hover:bg-ddt-color-common-surface-brand-hover",
-          "link-enabled:active:bg-ddt-color-common-surface-brand-press"
+          "hover:bg-ddt-color-common-surface-brand-hover",
+          "active:bg-ddt-color-common-surface-brand-press"
         ]
+      },
+      {
+        type: ["link", "menu", "section"],
+        disabled: false,
+        current: "descendant",
+        interactive: true,
+        class: [
+          "bg-ddt-color-common-surface-selected-secondary",
+          "hover:bg-ddt-color-common-surface-brand-hover",
+          "active:bg-ddt-color-common-surface-brand-press"
+        ]
+      },
+      {
+        type: ["menu", "section"],
+        disabled: false,
+        current: "descendant",
+        interactive: false,
+        class: ["bg-ddt-color-common-surface-selected-secondary"]
+      },
+      {
+        type: ["link", "menu", "section"],
+        disabled: true,
+        class: ["text-ddt-color-common-disabled"]
+      },
+      {
+        type: ["link", "menu", "section"],
+        disabled: true,
+        current: "descendant",
+        class: ["bg-ddt-color-common-surface-disabled-overlay/80"]
+      },
+      {
+        type: ["link", "menu", "section"],
+        disabled: true,
+        interactive: false,
+        class: ["text-ddt-color-common-disabled"]
       }
     ]
   }
 );
 const cvaChevron = classVarianceAuthority.cva(
-  ["size-6", "transition-all", "icon-[daikin--chevron-down]", "flex-none"],
+  [
+    "size-(--dds-icon)",
+    "transition-all",
+    "icon-[daikin--chevron-down]",
+    "flex-none"
+  ],
   {
     variants: {
       open: {
@@ -145,7 +255,8 @@ exports.DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extend
     this.badgeMessage = null;
     this.disabled = false;
     this.addEventListener("click", (event) => {
-      if (this.disabled || this.type === "link" && this.href == null) {
+      const isLinkInvalid = this.disabled || this.type === "link" && this.href == null || this.type === "section" && this.href == null;
+      if (isLinkInvalid) {
         event.stopImmediatePropagation();
       }
     });
@@ -181,6 +292,15 @@ exports.DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extend
     if (!slot) return [];
     return slot.assignedElements({ flatten: true }).filter((el) => el.localName === "daikin-vertical-navigation-menu-item");
   }
+  get _effectiveCurrent() {
+    if (this.current === true) {
+      return true;
+    }
+    if (this.current === "descendant") {
+      return "descendant";
+    }
+    return false;
+  }
   _propagateDisabledToChildren() {
     for (const item of this._getSlottedItems()) {
       if (this.disabled) {
@@ -206,11 +326,13 @@ exports.DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extend
     this._propagateDisabledToChildren();
   }
   render() {
-    const open = this.open;
-    const indicator = this.current ? lit.html`<div class=${cvaIndicator({ disabled: this.disabled })}></div>` : lit.nothing;
+    const open = this.type === "section" ? true : this.open;
+    const current = this._effectiveCurrent;
+    const isCurrent = current === true;
+    const indicator = isCurrent ? lit.html`<div class=${cvaIndicator({ disabled: this.disabled })}></div>` : lit.nothing;
     const leftIconSlot = lit.html`<slot
       name="left-icon"
-      class="icon-size-6 flex-none slotted:flex-none"
+      class="icon-size-token flex-none slotted:flex-none"
     ></slot>`;
     const badgeEl = this.badge !== "none" ? lit.html`<daikin-badge
               mode="standalone"
@@ -221,19 +343,18 @@ exports.DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extend
             ${this.badgeMessage ? lit.html`<span class="sr-only">${this.badgeMessage}</span>` : lit.nothing}` : lit.nothing;
     if (this.type === "link") {
       const disabled = this.disabled || this.href == null;
-      return lit.html`<div class="w-full relative" role="listitem">
+      return lit.html`<div
+        class="w-full relative ${disabled ? "pointer-events-none" : ""}"
+        role="listitem"
+      >
         ${indicator}
         <a
           ${ref_js.ref(this._triggerRef)}
-          class=${cvaHeader({
-        type: "link",
-        disabled,
-        current: this.current
-      })}
+          class=${cvaHeader({ type: "link", disabled, current })}
           href=${ifDefined_js.ifDefined(!disabled ? this.href ?? void 0 : void 0)}
           role=${ifDefined_js.ifDefined(disabled ? "link" : void 0)}
           aria-disabled=${ifDefined_js.ifDefined(disabled ? "true" : void 0)}
-          aria-current=${ifDefined_js.ifDefined(this.current ? "page" : void 0)}
+          aria-current=${ifDefined_js.ifDefined(isCurrent ? "page" : void 0)}
           tabindex=${disabled ? -1 : 0}
           @click=${(event) => {
         if (disabled) {
@@ -243,16 +364,78 @@ exports.DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extend
       }}
         >
           ${leftIconSlot}
-          <span class="flex-1 min-w-0 mt-0.5"><slot name="label"></slot></span>
-          <span class="flex items-center gap-1 flex-none">
+          <span class="flex-1 min-w-0 pl-1 leading-normal"
+            ><slot name="label"></slot
+          ></span>
+          <span class="flex items-center gap-1 flex-none pl-(--dds-space-200)">
             <span class="size-3 flex-none flex items-center justify-center"
               >${badgeEl}</span
             >
-            <span class="size-6 flex-none"></span>
+            <span class="size-(--dds-icon) flex-none"></span>
           </span>
         </a>
       </div>`;
     }
+    if (this.type === "section") {
+      const disabled = this.disabled;
+      const isInteractive = !!this.href;
+      const headerClass = cvaHeader({
+        type: "section",
+        disabled,
+        current,
+        interactive: isInteractive
+      });
+      const renderSectionHeader = this.href ? lit.html`<a
+            ${ref_js.ref(this._triggerRef)}
+            class=${headerClass}
+            href=${ifDefined_js.ifDefined(!disabled ? this.href : void 0)}
+            role=${ifDefined_js.ifDefined(disabled ? "link" : void 0)}
+            aria-disabled=${ifDefined_js.ifDefined(disabled ? "true" : void 0)}
+            aria-current=${ifDefined_js.ifDefined(isCurrent ? "page" : void 0)}
+            tabindex=${disabled ? -1 : 0}
+            @click=${(event) => {
+        if (disabled) {
+          return;
+        }
+        this.dispatchEvent(new Event("toggle", event));
+      }}
+          >
+            ${leftIconSlot}
+            <span class="flex-1 min-w-0 pl-1 leading-normal"
+              ><slot name="label"></slot
+            ></span>
+            <span
+              class="flex items-center gap-1 flex-none pl-(--dds-space-200)"
+            >
+              <span class="size-3 flex-none flex items-center justify-center"
+                >${badgeEl}</span
+              >
+              <span class="size-(--dds-icon) flex-none"></span>
+            </span>
+          </a>` : lit.html`<div ${ref_js.ref(this._triggerRef)} class=${headerClass}>
+            ${leftIconSlot}
+            <span
+              class="relative top-px flex-1 min-w-0 pl-1 tracking-widest text-(length:--dds-font-size-helper-text) leading-normal"
+              ><slot name="label"></slot
+            ></span>
+            <span
+              class="flex items-center gap-1 flex-none pl-(--dds-space-200)"
+            >
+              <span class="size-3 flex-none flex items-center justify-center"
+                >${badgeEl}</span
+              >
+              <span class="size-(--dds-icon) flex-none"></span>
+            </span>
+          </div>`;
+      return lit.html`<div class="w-full" role="listitem">
+        <div class="relative">${indicator} ${renderSectionHeader}</div>
+        <div role="region" class=${cvaContent({ open: true })}>
+          <div class="overflow-hidden" role="list">
+            <slot @slotchange=${this._handleMenuSlotChange}></slot>
+          </div>
+        </div>
+      </div>`;
+    }
     return lit.html`<div class="w-full" role="listitem">
       <div class="relative">
         ${indicator}
@@ -263,18 +446,20 @@ exports.DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extend
           class=${cvaHeader({
       type: "menu",
       disabled: this.disabled,
-      current: this.current
+      current
     })}
           ?disabled=${this.disabled}
-          aria-current=${ifDefined_js.ifDefined(this.current ? "page" : void 0)}
+          aria-current=${ifDefined_js.ifDefined(isCurrent ? "page" : void 0)}
           aria-expanded=${open}
           aria-controls="content"
           tabindex=${this.disabled ? -1 : 0}
           @click=${this._handleTriggerClick}
         >
           ${leftIconSlot}
-          <span class="flex-1 min-w-0 mt-0.5"><slot name="label"></slot></span>
-          <span class="flex items-center gap-1 flex-none">
+          <span class="flex-1 min-w-0 pl-1 leading-normal"
+            ><slot name="label"></slot
+          ></span>
+          <span class="flex items-center gap-1 flex-none pl-(--dds-space-200)">
             <span class="size-3 flex-none flex items-center justify-center"
               >${badgeEl}</span
             >
@@ -287,7 +472,7 @@ exports.DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extend
         role="region"
         class=${cvaContent({ open })}
         aria-labelledby="menu-button"
-        ?inert=${!open}
+        .inert=${!open}
       >
         <div class="overflow-hidden" role="list">
           <slot @slotchange=${this._handleMenuSlotChange}></slot>
@@ -302,7 +487,7 @@ exports.DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extend
    */
   focus(options) {
     var _a;
-    const isDisabled = this.disabled || this.type === "link" && this.href == null;
+    const isDisabled = this.disabled || this.type !== "menu" && this.href == null;
     if (isDisabled) {
       return;
     }
@@ -317,7 +502,6 @@ exports.DaikinVerticalNavigationItem.styles = lit.css`
       position: relative;
       --divider-bottom-display: none;
     }
-
     :host::after {
       content: "";
       display: var(--divider-bottom-display, none);
@@ -336,7 +520,8 @@ __decorateClass([
     fallbackValue: "link",
     isAllowedValue: ddsProperty.oneOf([
       "link",
-      "menu"
+      "menu",
+      "section"
     ])
   })
 ], exports.DaikinVerticalNavigationItem.prototype, "type", 2);
@@ -350,7 +535,32 @@ __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinVerticalNavigationItem.prototype, "open", 2);
 __decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
+  ddsProperty.property({
+    reflect: true,
+    converter: {
+      fromAttribute(value) {
+        if (value === null) {
+          return false;
+        }
+        if (value === "" || value === "true") {
+          return true;
+        }
+        if (value === "descendant") {
+          return "descendant";
+        }
+        return false;
+      },
+      toAttribute(value) {
+        if (value === false) {
+          return null;
+        }
+        if (value === true) {
+          return "";
+        }
+        return "descendant";
+      }
+    }
+  })
 ], exports.DaikinVerticalNavigationItem.prototype, "current", 2);
 __decorateClass([
   ddsProperty.property({

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

@@ -2,14 +2,16 @@ import { PropertyValues } from 'lit';
 import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
 /**
  * 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).
+ * It can be rendered as a direct link, a collapsible menu, or an always-expanded section group
+ * (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 - A slot for the sub-list content (e.g. `daikin-vertical-navigation-menu-item` elements).
+ * Used when `type="menu"` or `type="section"`.
  * @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.
  *
@@ -48,12 +50,17 @@ export declare class DaikinVerticalNavigationItem extends DDSElement implements
      * 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.
+     * - `"section"`: Renders as an always-expanded section without a chevron.
+     *   If `href` is set, the parent is rendered as a link.
+     *   If `href` is omitted, the parent is rendered as non-interactive title text.
      *
      * @default "link"
      */
-    type: "link" | "menu";
+    type: "link" | "menu" | "section";
     /**
-     * The link `href`. Only used when `type="link"`.
+     * The link `href`.
+     * Used when `type="link"`.
+     * Also used when `type="section"` to make the parent interactive.
      */
     href: string | null;
     /**
@@ -68,10 +75,12 @@ export declare class DaikinVerticalNavigationItem extends DDSElement implements
      */
     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 state of this item.
+     * - `false`: default state
+     * - `true`: current state (blue indicator)
+     * - `"descendant"`: indicates a descendant is current (neutral indicator)
      */
-    current: boolean;
+    current: boolean | "descendant";
     /**
      * 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.
@@ -102,6 +111,7 @@ export declare class DaikinVerticalNavigationItem extends DDSElement implements
     getDDSNavigationTarget(): NavigationTarget | null;
     private _handleTriggerClick;
     private _getSlottedItems;
+    private get _effectiveCurrent();
     private _propagateDisabledToChildren;
     updated(changedProperties: PropertyValues): void;
     private _handleMenuSlotChange;