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

package/dist/es/components/time-picker/index.js

@@ -1,14 +1,14 @@
-import { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, from24HourFormat, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, to24HourFormat, tryParseTimeFromUIValue } from "./daikin-time-picker.js";
+import { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, timeValueToUI, tryParseTimeFromUIValue, uiToTimeValue } from "./daikin-time-picker.js";
 export {
   DaikinTimePicker,
   calcDigitInput,
   formatPartsForUI,
   formatTimeForUI,
-  from24HourFormat,
   getTimeItemInSelection,
   isTimeOutOfRange,
   isValidValueTime,
   parsePartsFromUIValue,
-  to24HourFormat,
-  tryParseTimeFromUIValue
+  timeValueToUI,
+  tryParseTimeFromUIValue,
+  uiToTimeValue
 };

package/dist/es/components/toast-notification-manager/daikin-toast-notification-manager.js

@@ -157,7 +157,7 @@ let DaikinToastNotificationManager = class extends DDSElement {
     return html`<aside
       ${ref(this._containerRef)}
       class=${cvaContainer({ position: this.position })}
-      popover="manual"
+      .popover=${"manual"}
     >
       <slot
         @close=${this._handleClose}

package/dist/es/components/toggle/daikin-toggle.d.ts

@@ -36,6 +36,10 @@ export declare class DaikinToggle extends DDSFormElement {
      * Specify the toggle switch disabled state.
      */
     disabled: boolean;
+    /**
+     * Whether the toggle switch is readonly.
+     */
+    readonly: boolean;
     private readonly _inputRef;
     /**
      * Focuses on the inner input.
@@ -43,6 +47,7 @@ export declare class DaikinToggle extends DDSFormElement {
      */
     focus(options?: FocusOptions): void;
     private _updateFormValue;
+    private _handleClick;
     private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;

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

@@ -18,45 +18,103 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const TOGGLE_CLASS_NAME = cva([
-  "w-12",
-  "h-6",
-  "relative",
-  "bg-ddt-color-common-neutral-default",
-  "rounded-full",
-  "cursor-pointer",
-  "transition-colors",
-  "duration-300",
-  "appearance-none",
-  "enabled:hover:bg-ddt-color-common-neutral-hover",
-  "enabled:active:bg-ddt-color-common-neutral-press",
-  "enabled:outline-ddt-color-common-border-focus",
-  "focus-visible:outline-solid",
-  "focus-visible:outline-2",
-  "focus-visible:outline-offset-2",
-  "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",
-  "disabled:bg-ddt-color-common-disabled",
-  "disabled:cursor-default",
-  "before:size-4",
-  "before:m-auto",
-  "before:rounded-full",
-  "before:absolute",
-  "before:top-0",
-  "before:bottom-0",
-  "before:left-1",
-  "before:transition",
-  "before:duration-300",
-  "checked:before:translate-x-6",
-  "enabled:before:bg-ddt-color-common-background-default",
-  "disabled:before:bg-ddt-color-common-surface-hover"
-])();
+const TOGGLE_CLASS_NAME = cva(
+  [
+    "w-12",
+    "h-6",
+    "relative",
+    "rounded-full",
+    "transition-colors",
+    "duration-300",
+    "appearance-none",
+    "enabled:cursor-pointer",
+    "focus-visible:outline-solid",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "enabled:outline-ddt-color-common-border-focus",
+    "disabled:bg-ddt-color-common-disabled",
+    "before:size-4",
+    "before:m-auto",
+    "before:rounded-full",
+    "before:absolute",
+    "before:top-0",
+    "before:bottom-0",
+    "before:left-1",
+    "before:transition",
+    "before:duration-300",
+    "before:border",
+    "before:border-transparent",
+    "disabled:before:bg-ddt-color-common-surface-hover"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [],
+        true: ["cursor-default!"]
+      },
+      readonly: {
+        false: [],
+        true: ["cursor-default!"]
+      },
+      checked: {
+        false: [],
+        true: []
+      }
+    },
+    compoundVariants: [
+      {
+        readonly: false,
+        checked: false,
+        class: [
+          "bg-ddt-color-common-neutral-default",
+          "enabled:hover:bg-ddt-color-common-neutral-hover",
+          "enabled:active:bg-ddt-color-common-neutral-press",
+          "enabled:before:bg-ddt-color-common-background-default"
+        ]
+      },
+      {
+        readonly: false,
+        checked: true,
+        class: [
+          "bg-ddt-color-common-brand-default",
+          "enabled:hover:bg-ddt-color-common-brand-hover",
+          "enabled:active:bg-ddt-color-common-brand-press",
+          "before:translate-x-6",
+          "enabled:before:bg-ddt-color-common-background-default"
+        ]
+      },
+      {
+        readonly: true,
+        checked: false,
+        class: [
+          "border",
+          "border-ddt-color-common-disabled",
+          "bg-(--dds-color-common-surface-secondary)",
+          "before:bg-ddt-color-common-disabled",
+          "before:border-ddt-color-common-disabled"
+        ]
+      },
+      {
+        readonly: true,
+        checked: true,
+        class: [
+          "border",
+          "border-ddt-color-common-neutral-default",
+          "bg-(--dds-color-common-surface-secondary)",
+          "before:translate-x-6",
+          "before:bg-ddt-color-common-neutral-default",
+          "before:border-ddt-color-common-neutral-default"
+        ]
+      }
+    ]
+  }
+);
 let DaikinToggle = class extends DDSFormElement {
   constructor() {
     super(...arguments);
     this.checked = false;
     this.disabled = false;
+    this.readonly = false;
     this._inputRef = createRef();
   }
   /**
@@ -70,7 +128,17 @@ let DaikinToggle = class extends DDSFormElement {
   _updateFormValue() {
     this.setFormValue(this.checked ? this.value : null);
   }
+  _handleClick(event) {
+    if (this.readonly) {
+      event.preventDefault();
+    }
+  }
   _handleChange(event) {
+    if (this.readonly) {
+      event.target.checked = this.checked;
+      event.preventDefault();
+      return;
+    }
     this.checked = event.target.checked;
     this._updateFormValue();
     this.dispatchEvent(new Event("change", event));
@@ -78,13 +146,17 @@ let DaikinToggle = class extends DDSFormElement {
   render() {
     return html`<input
       ${ref(this._inputRef)}
-      class=${TOGGLE_CLASS_NAME}
+      class=${TOGGLE_CLASS_NAME({
+      readonly: this.readonly && !this.disabled,
+      checked: this.checked
+    })}
       type="checkbox"
       name=${ifDefined(this.getBackingProperty("name"))}
       role="switch"
       ?disabled=${this.disabled}
       .checked=${this.checked}
       .value=${this.value}
+      @click=${this._handleClick}
       @change=${this._handleChange}
     />`;
   }
@@ -107,6 +179,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinToggle.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinToggle.prototype, "readonly", 2);
 DaikinToggle = __decorateClass([
   ddsElement("daikin-toggle")
 ], DaikinToggle);

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

@@ -144,7 +144,7 @@ let DaikinTooltip = class extends DDSElement {
         aria-labelledby="tooltip"
         part="tooltip"
         class=${cvaTooltip({ color: this.color })}
-        popover=${this.popoverValue}
+        .popover=${this.popoverValue}
         @beforetoggle=${this._handleBeforeToggle}
         @toggle=${this._handleToggle}
         ${this._autoUpdateController.refFloating()}

package/dist/es/components/tree-item/daikin-tree-item.d.ts

@@ -19,6 +19,7 @@ export declare const cvaTreeChildren: (props?: ({
  * @fires tree-move-focus - _Internal use._ A custom event used to move the focus within a tree.
  *
  * @slot - A slot for the tree item content.
+ * @slot left-icon - A slot for an icon to be placed to the left of the content. Place `daikin-icon` or something similar.
  *
  * @csspart item - CSS styles applied to the `item` part target the internal `<div>` element wrapping the content. For instance, setting `cursor: grab;` changes the hover cursor, signaling that the tree item is draggable.
  *

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

@@ -25,10 +25,10 @@ const cvaTreeChildren = cva(
     "flex",
     "items-center",
     "w-full",
-    "min-h-12",
-    "py-3",
-    "pr-4",
-    "pl-[calc((var(--level)+1)*1rem)]",
+    "text-(length:--dds-font-size-label-text)",
+    "py-(--dds-padding-30)",
+    "px-(--dds-padding-40)",
+    "pl-[calc((var(--level)+1)*(var(--dds-padding-40)))]",
     "natural-break",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
@@ -58,11 +58,10 @@ const cvaTreeChildren = cva(
         ]
       },
       icon: {
-        false: ["before:size-6"],
+        false: ["before:size-(--dds-icon)", "before:flex-none"],
         true: [
           "before:icon-[daikin--chevron-right]",
-          "before:size-5",
-          "before:m-0.5",
+          "before:size-(--dds-icon)",
           "before:transition-all",
           "before:flex-none",
           "before:self-start"
@@ -128,7 +127,15 @@ let DaikinTreeItem = class extends DDSElement {
       @click=${() => emitTreeSelect(this)}
       @keydown=${this._handleKeyDown}
     >
-      <slot></slot>
+      <div class="flex items-start gap-(--dds-gap-20)">
+        <slot
+          name="left-icon"
+          class="slotted:shrink-0 size-(--dds-icon) slotted:size-(--dds-icon)"
+        ></slot>
+        <span class="pt-(--dds-padding-05)">
+          <slot></slot>
+        </span>
+      </div>
     </div>`;
   }
   updated(changedProperties) {
@@ -182,6 +189,15 @@ DaikinTreeItem.styles = css`
 
     :host {
       display: block;
+
+      --ddc-tree-item-min-h: var(--dds-input-height, 3rem);
+      --ddc-tree-item-padding-y: var(--dds-padding-30);
+    }
+
+    :host([data-density="compact"]),
+    :host-context([data-density="compact"]) {
+      --ddc-tree-item-min-h: calc(var(--dds-input-height) + 4px);
+      --ddc-tree-item-padding-y: var(--dds-padding-30);
     }
   `;
 __decorateClass([

package/dist/es/components/tree-section/daikin-tree-section.d.ts

@@ -16,6 +16,7 @@ import { DDSElement } from "../../base/index.js";
  *
  * @slot - A slot for tree children. Place `daikin-tree-section` and `daikin-tree-item` elements here.
  * @slot label - A slot for section header content. Place a `span` element here.
+ * @slot left-icon - A slot for an icon to be placed to the right of the arrow and to the left of the label. Place `daikin-icon` or something similar.
  *
  * @example
  *

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

@@ -127,7 +127,13 @@ let DaikinTreeSection = class extends DDSElement {
         @click=${this._handleClick}
         @keydown=${this._handleKeyDown}
       >
-        <slot name="label"></slot>
+        <div class="flex items-start gap-(--dds-gap-20)">
+          <slot
+            name="left-icon"
+            class="slotted:shrink-0 size-(--dds-icon) slotted:size-(--dds-icon) mr-2"
+          ></slot
+          ><span class="pt-(--dds-padding-05)"><slot name="label"></slot></span>
+        </div>
       </div>
       <div role="group" ?hidden=${!this._open}>
         <slot

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

@@ -26,7 +26,7 @@ let DaikinVerticalNavigation = class extends DDSElement {
   }
   _handleToggle(event) {
     const target = event.target;
-    if (target.type === "link") {
+    if (target.type !== "menu") {
       if (this.exclusive && this.openItems.length > 0) {
         this.openItems = [];
         this._reflectItemOpen();

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

@@ -2,14 +2,16 @@ 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).
+ * 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;