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

package/dist/es/components/vertical-navigation-item/daikin-vertical-navigation-item.js

@@ -24,13 +24,13 @@ const cvaHeader = 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"
   ],
   {
@@ -51,59 +51,169 @@ const cvaHeader = 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 = cva(
-  ["size-6", "transition-all", "icon-[daikin--chevron-down]", "flex-none"],
+  [
+    "size-(--dds-icon)",
+    "transition-all",
+    "icon-[daikin--chevron-down]",
+    "flex-none"
+  ],
   {
     variants: {
       open: {
@@ -143,7 +253,8 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
     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();
       }
     });
@@ -179,6 +290,15 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
     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) {
@@ -204,11 +324,13 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
     this._propagateDisabledToChildren();
   }
   render() {
-    const open = this.open;
-    const indicator = this.current ? html`<div class=${cvaIndicator({ disabled: this.disabled })}></div>` : nothing;
+    const open = this.type === "section" ? true : this.open;
+    const current = this._effectiveCurrent;
+    const isCurrent = current === true;
+    const indicator = isCurrent ? html`<div class=${cvaIndicator({ disabled: this.disabled })}></div>` : nothing;
     const leftIconSlot = 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" ? html`<daikin-badge
               mode="standalone"
@@ -219,19 +341,18 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
             ${this.badgeMessage ? html`<span class="sr-only">${this.badgeMessage}</span>` : nothing}` : nothing;
     if (this.type === "link") {
       const disabled = this.disabled || this.href == null;
-      return html`<div class="w-full relative" role="listitem">
+      return html`<div
+        class="w-full relative ${disabled ? "pointer-events-none" : ""}"
+        role="listitem"
+      >
         ${indicator}
         <a
           ${ref(this._triggerRef)}
-          class=${cvaHeader({
-        type: "link",
-        disabled,
-        current: this.current
-      })}
+          class=${cvaHeader({ type: "link", disabled, current })}
           href=${ifDefined(!disabled ? this.href ?? void 0 : void 0)}
           role=${ifDefined(disabled ? "link" : void 0)}
           aria-disabled=${ifDefined(disabled ? "true" : void 0)}
-          aria-current=${ifDefined(this.current ? "page" : void 0)}
+          aria-current=${ifDefined(isCurrent ? "page" : void 0)}
           tabindex=${disabled ? -1 : 0}
           @click=${(event) => {
         if (disabled) {
@@ -241,16 +362,78 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
       }}
         >
           ${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 ? html`<a
+            ${ref(this._triggerRef)}
+            class=${headerClass}
+            href=${ifDefined(!disabled ? this.href : void 0)}
+            role=${ifDefined(disabled ? "link" : void 0)}
+            aria-disabled=${ifDefined(disabled ? "true" : void 0)}
+            aria-current=${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>` : html`<div ${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 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 html`<div class="w-full" role="listitem">
       <div class="relative">
         ${indicator}
@@ -261,18 +444,20 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
           class=${cvaHeader({
       type: "menu",
       disabled: this.disabled,
-      current: this.current
+      current
     })}
           ?disabled=${this.disabled}
-          aria-current=${ifDefined(this.current ? "page" : void 0)}
+          aria-current=${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
             >
@@ -285,7 +470,7 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
         role="region"
         class=${cvaContent({ open })}
         aria-labelledby="menu-button"
-        ?inert=${!open}
+        .inert=${!open}
       >
         <div class="overflow-hidden" role="list">
           <slot @slotchange=${this._handleMenuSlotChange}></slot>
@@ -300,7 +485,7 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
    */
   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;
     }
@@ -315,7 +500,6 @@ DaikinVerticalNavigationItem.styles = css`
       position: relative;
       --divider-bottom-display: none;
     }
-
     :host::after {
       content: "";
       display: var(--divider-bottom-display, none);
@@ -334,7 +518,8 @@ __decorateClass([
     fallbackValue: "link",
     isAllowedValue: oneOf([
       "link",
-      "menu"
+      "menu",
+      "section"
     ])
   })
 ], DaikinVerticalNavigationItem.prototype, "type", 2);
@@ -348,7 +533,32 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinVerticalNavigationItem.prototype, "open", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  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";
+      }
+    }
+  })
 ], DaikinVerticalNavigationItem.prototype, "current", 2);
 __decorateClass([
   property({

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

@@ -38,7 +38,7 @@ import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js"
 export declare class DaikinVerticalNavigationMenuItem extends DDSElement implements DDSNavigable {
     static readonly styles: import('lit').CSSResult;
     /**
-     * The link `href`. When omitted, the item is rendered as a placeholder link in the disabled visual state.
+     * The link `href`. When omitted, the item is rendered as an interactive item without navigation target.
      */
     href: string | null;
     /**
@@ -46,6 +46,11 @@ export declare class DaikinVerticalNavigationMenuItem extends DDSElement impleme
      * A disabled item cannot be clicked or focused.
      */
     disabled: boolean;
+    /**
+     * Whether this sub-menu 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.

package/dist/es/components/vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, nothing, html } from "lit";
+import { unsafeCSS, css, html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
@@ -20,29 +20,30 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const cvaInner = cva(
   [
+    "block",
+    "relative",
+    "flex",
+    "justify-between",
+    "items-start",
+    "gap-0",
     "text-left",
+    "relative",
+    "w-full",
+    "py-(--dds-padding-10)",
+    "px-(--dds-padding-40)",
     // Hover/active background overlay
     "before:absolute",
     "before:inset-0",
     "before:w-full",
     "before:h-full",
-    // Focus ring overlay (separate from hover bg so it can be raised above the divider)
-    "after:absolute",
-    "after:inset-0",
-    "after:w-full",
-    "after:h-full",
-    "focus-visible:outline-hidden",
-    "focus-visible:after:outline-solid",
-    "focus-visible:after:outline-2",
-    "focus-visible:after:-outline-offset-2",
-    "focus-visible:after:outline-ddt-color-common-border-focus",
-    "focus-visible:after:z-1",
-    // Background on hover/press (link-enabled = <a> with href)
-    "not-active:group-hover:link-enabled:before:bg-ddt-color-common-surface-hover",
-    "active:link-enabled:before:bg-ddt-color-common-surface-press"
+    "focus-visible:outline-hidden"
   ],
   {
     variants: {
+      current: {
+        false: [],
+        true: []
+      },
       disabled: {
         false: [
           // Vertical navigation neutral text colors (hard-coded for this component)
@@ -52,14 +53,77 @@ const cvaInner = cva(
         ],
         true: ["text-ddt-color-common-disabled", "pointer-events-none"]
       }
-    }
+    },
+    compoundVariants: [
+      {
+        current: true,
+        disabled: false,
+        class: [
+          "group-hover:text-ddt-color-common-neutral-default",
+          "active:text-ddt-color-common-neutral-default"
+        ]
+      }
+    ]
+  }
+);
+const cvaContainer = cva(
+  [
+    "group",
+    "flex",
+    "justify-between",
+    "items-start",
+    "w-full",
+    "py-(--dds-padding-20)",
+    "px-(--dds-padding-60)",
+    "text-left",
+    "isolate",
+    "natural-break"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [
+          "cursor-pointer",
+          "has-focus-visible:outline-2",
+          "has-focus-visible:-outline-offset-2",
+          "has-focus-visible:outline-ddt-color-common-border-focus"
+        ],
+        true: []
+      },
+      current: {
+        false: [
+          "hover:bg-ddt-color-common-surface-hover",
+          "active:bg-ddt-color-common-surface-press"
+        ],
+        true: [
+          "bg-ddt-color-common-surface-default",
+          "hover:bg-ddt-color-common-surface-brand-hover",
+          "active:bg-ddt-color-common-surface-brand-press"
+        ]
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: true,
+        class: ["pointer-events-none"]
+      }
+    ]
   }
 );
+const cvaIndicator = cva(["absolute", "inset-y-0", "w-1", "z-1", "left-0"], {
+  variants: {
+    disabled: {
+      false: ["bg-ddt-color-common-brand-default"],
+      true: ["bg-ddt-color-common-disabled"]
+    }
+  }
+});
 let DaikinVerticalNavigationMenuItem = class extends DDSElement {
   constructor() {
     super();
     this.href = null;
     this.disabled = false;
+    this.current = false;
     this.badgeMessage = null;
     this.addEventListener("click", (event) => {
       if (this._disabled) {
@@ -80,7 +144,7 @@ let DaikinVerticalNavigationMenuItem = class extends DDSElement {
    * @private
    */
   getDDSNavigationTarget() {
-    if (this.href == null || this.disabled) {
+    if (this.disabled || this.href == null) {
       return null;
     }
     return {
@@ -90,37 +154,40 @@ let DaikinVerticalNavigationMenuItem = class extends DDSElement {
   }
   render() {
     const disabled = this._disabled;
+    const indicator = this.current ? html`<span class=${cvaIndicator({ disabled })}></span>` : nothing;
     return html`
       <div
-        class="group flex justify-between items-start w-full min-h-12 py-3 px-11 text-left relative natural-break"
+        class=${cvaContainer({ disabled, current: this.current })}
         role="listitem"
       >
         <a
-          class=${cvaInner({ disabled })}
+          class=${cvaInner({ disabled, current: this.current })}
           href=${ifDefined(!disabled ? this.href ?? void 0 : void 0)}
           role=${ifDefined(disabled ? "link" : void 0)}
           aria-disabled=${ifDefined(disabled ? "true" : void 0)}
+          aria-current=${ifDefined(this.current ? "page" : void 0)}
           tabindex=${disabled ? -1 : 0}
         >
-          <span class="flex items-start w-full relative">
-            <slot
+          ${indicator}
+          <span class="flex items-start flex-1 min-w-0 relative"
+            ><slot
               name="left-icon"
-              class="icon-size-6 slotted:flex-none z-1 slotted:text-inherit"
-            >
-              <span class="flex-none block -ml-1"></span>
-            </slot>
-            <slot class="block pl-2 pr-2 mt-0.5 text-left"></slot>
+              class="icon-size-token slotted:flex-none z-1 slotted:text-inherit"
+              ><span class="flex-none block -ml-1"></span></slot
+            ><span
+              class="relative block pl-1 pr-(--dds-space-200) text-left min-w-0 text-(length:--dds-font-size-label-text) leading-normal natural-break"
+              ><slot></slot></span
+          ></span>
+          <span class="flex items-start mt-1.5 z-1 pointer-events-none">
+            ${this.badge !== "none" ? html`<daikin-badge
+                  mode="standalone"
+                  type="dot"
+                  size="large"
+                  color=${this.badge}
+                ></daikin-badge>` : html`<span class="block -mr-1 w-3"></span>`}
           </span>
           ${this.badgeMessage && this.badge !== "none" ? html`<span class="sr-only">${this.badgeMessage}</span>` : nothing}
         </a>
-        <span class="flex items-start mt-1.5 z-1 pointer-events-none">
-          ${this.badge !== "none" ? html`<daikin-badge
-                mode="standalone"
-                type="dot"
-                size="large"
-                color=${this.badge}
-              ></daikin-badge>` : html`<span class="block -mr-1 w-3"></span>`}
-        </span>
       </div>
     `;
   }
@@ -151,6 +218,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinVerticalNavigationMenuItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinVerticalNavigationMenuItem.prototype, "current", 2);
 __decorateClass([
   property({
     type: String,