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

package/dist/cjs/components/time-picker/daikin-time-picker.d.cts

@@ -14,16 +14,24 @@ type TimeParts = {
  */
 type TimeItem = "hour" | "minute";
 /**
- * Converts a 12-hour time string and AM/PM to 24-hour format (e.g. "02:30", "PM" => "14:30").
+ * Hour cycle for time input UI.
+ * - h12: 12-hour UI (01:00〜12:59) + AM/PM dropdown.
+ * - h23: 24-hour UI (00:00〜23:59) without AM/PM dropdown.
  */
-export declare function to24HourFormat(time: string, meridiem: "AM" | "PM"): string;
-/**
- * Converts a 24-hour time string to 12-hour format and AM/PM (e.g. "14:30" => { time: "02:30", meridiem: "PM" }).
- */
-export declare function from24HourFormat(time: string): {
-    time: string;
+type HourCycle = "h12" | "h23";
+type UiTimeObject = {
+    hourCycle: "h12";
+    hour: string;
+    minute: string;
     meridiem: "AM" | "PM";
+} | {
+    hourCycle: "h23";
+    hour: string;
+    minute: string;
+    meridiem: null;
 };
+export declare function uiToTimeValue(object: UiTimeObject): string;
+export declare function timeValueToUI(time: string, hourCycle: HourCycle): UiTimeObject;
 /**
  * Validates if a time string matches the 24-hour format.
  */
@@ -60,13 +68,16 @@ export declare function getTimeItemInSelection(selectionStart: number, selection
  * Calculate digit key input, returns new time parts and whether input is complete.
  * @returns { parts, done } or null
  */
-export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeItem, digit: string, hourDigitIndex: number): {
+export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeItem, digit: string, hourDigitIndex: number, hourCycle: HourCycle): {
     parts: TimeParts;
     done: boolean;
 } | null;
 /**
- * The time picker provides a time input field and a dropdown button for selecting AM/PM, allowing users to quickly enter a specific time in 12-hour format.
- * Please note that while the value displayed on the UI is in 12-hour format, the value you get from the component's value property will be automatically converted to 24-hour format.
+ * The time picker provides a time input field and supports two hour cycles via `hourCycle`.
+ * - h12: input in 12-hour format with AM/PM dropdown.
+ * - h23: input in 24-hour format without AM/PM dropdown.
+ *
+ * Please note that the component's `value` is always stored in 24-hour format.
  *
  * @attr form - The form the component belongs to.
  * @attr name - The form name, submitted as a name/value pair when submitting the form.
@@ -98,14 +109,16 @@ export declare class DaikinTimePicker extends DDSFormElement {
     placeholder: string;
     /**
      * Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.
-     * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `min` property must also be provided in 24-hour format.
+     * Please note that regardless of the selected UI hour cycle, the component value is stored in 24-hour format.
+     * The `min` property must be provided in 24-hour format.
      *
      * @default "00:00"
      */
     min: string;
     /**
      * Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.
-     * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `max` property must also be provided in 24-hour format.
+     * Please note that regardless of the selected UI hour cycle, the component value is stored in 24-hour format.
+     * The `max` property must be provided in 24-hour format.
      *
      * @default "23:59"
      */
@@ -114,6 +127,11 @@ export declare class DaikinTimePicker extends DDSFormElement {
      * Whether the field is disabled. Controlled by daikin-input-group.
      */
     disabled: boolean;
+    /**
+     * Whether the field is readonly.
+     * When readonly, the user cannot change the value.
+     */
+    readonly: boolean;
     /**
      * Whether the field is required. Controlled by daikin-input-group.
      */
@@ -122,28 +140,48 @@ export declare class DaikinTimePicker extends DDSFormElement {
      * Whether to show error state. Controlled by daikin-input-group. Ignored if disabled.
      */
     error: boolean;
+    /**
+     * Hour cycle for the UI.
+     * - h12: input uses 12-hour UI + AM/PM dropdown.
+     * - h23: input uses 24-hour UI and hides AM/PM dropdown.
+     *
+     * @default "h12"
+     */
+    hourCycle: HourCycle;
     /**
      * Minutes step. Specify the step size for the minutes when using the up and down arrow keys.
      *
      * @default "1"
      */
     minutesStep: string;
+    /**
+     * Whether AM/PM dropdown should be single-open across sibling time pickers in the same root.
+     */
+    meridiemSingleOpen: boolean;
     private _label;
     private _inputValue;
     private _currentSelection;
     private _meridiem;
     /**
      * Returns the value to be displayed in the input field.
-     * - If the main value is a valid 24-hour time, returns the 12-hour formatted string for UI display.
+     * - If the main value is a valid 24-hour time, returns a display string based on the selected hour cycle.
      * - If the current input value is not valid or meridiem is empty, returns the raw input value.
      * - Otherwise, returns null.
      */
     private get _value();
     private _timeInputElement;
+    private _meridiemDropdown;
     /**
      * Tracks the current digit index for hour input (0: first digit, 1: second digit).
      */
     private _hourDigitIndex;
+    private _preCompositionValue;
+    /**
+     * Tracks the current digit index for minute input (0: first digit, 1: second digit).
+     * When 0 (fresh entry), always starts with "0X" regardless of the existing value,
+     * preventing pre-existing values like "04" from being mistaken as a first-digit state.
+     */
+    private _minuteDigitIndex;
     /**
      * Returns the value to display in the input field (from _inputValue state).
      */
@@ -160,16 +198,21 @@ export declare class DaikinTimePicker extends DDSFormElement {
     private _handleChange;
     private _handleMouseUp;
     private _handleDigitInput;
+    private _handleCompositionStart;
+    private _handleCompositionEnd;
+    private _applyDigits;
     private _handleKeyDown;
     private _updateTimeByOffset;
     private _handleBeforeInput;
     /**
-     * Updates the value in 24-hour format if the input is valid, keeps UI in 12-hour format.
+     * Updates the value in 24-hour format if the input is valid, while preserving the selected UI hour cycle.
      */
     private _updateValue;
     private _updateInputSelection;
     private _updateSelection;
     private _handleDropdownChange;
+    private _closeMeridiemDropdown;
+    private _handleMeridiemDropdownToggle;
     /**
      * Focuses on the inner time input.
      * @param options focus options

package/dist/cjs/components/time-picker/index.cjs

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "DaikinTimePicker", {
 exports.calcDigitInput = daikinTimePicker.calcDigitInput;
 exports.formatPartsForUI = daikinTimePicker.formatPartsForUI;
 exports.formatTimeForUI = daikinTimePicker.formatTimeForUI;
-exports.from24HourFormat = daikinTimePicker.from24HourFormat;
 exports.getTimeItemInSelection = daikinTimePicker.getTimeItemInSelection;
 exports.isTimeOutOfRange = daikinTimePicker.isTimeOutOfRange;
 exports.isValidValueTime = daikinTimePicker.isValidValueTime;
 exports.parsePartsFromUIValue = daikinTimePicker.parsePartsFromUIValue;
-exports.to24HourFormat = daikinTimePicker.to24HourFormat;
+exports.timeValueToUI = daikinTimePicker.timeValueToUI;
 exports.tryParseTimeFromUIValue = daikinTimePicker.tryParseTimeFromUIValue;
+exports.uiToTimeValue = daikinTimePicker.uiToTimeValue;

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

@@ -159,7 +159,7 @@ exports.DaikinToastNotificationManager = class DaikinToastNotificationManager ex
     return lit.html`<aside
       ${ref_js.ref(this._containerRef)}
       class=${cvaContainer({ position: this.position })}
-      popover="manual"
+      .popover=${"manual"}
     >
       <slot
         @close=${this._handleClose}

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

@@ -20,45 +20,103 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const TOGGLE_CLASS_NAME = classVarianceAuthority.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 = classVarianceAuthority.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"
+        ]
+      }
+    ]
+  }
+);
 exports.DaikinToggle = class DaikinToggle extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
     this.checked = false;
     this.disabled = false;
+    this.readonly = false;
     this._inputRef = ref_js.createRef();
   }
   /**
@@ -72,7 +130,17 @@ exports.DaikinToggle = class DaikinToggle extends ddsFormElement.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));
@@ -80,13 +148,17 @@ exports.DaikinToggle = class DaikinToggle extends ddsFormElement.DDSFormElement
   render() {
     return lit.html`<input
       ${ref_js.ref(this._inputRef)}
-      class=${TOGGLE_CLASS_NAME}
+      class=${TOGGLE_CLASS_NAME({
+      readonly: this.readonly && !this.disabled,
+      checked: this.checked
+    })}
       type="checkbox"
       name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
       role="switch"
       ?disabled=${this.disabled}
       .checked=${this.checked}
       .value=${this.value}
+      @click=${this._handleClick}
       @change=${this._handleChange}
     />`;
   }
@@ -109,6 +181,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinToggle.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinToggle.prototype, "readonly", 2);
 exports.DaikinToggle = __decorateClass([
   decorators.ddsElement("daikin-toggle")
 ], exports.DaikinToggle);

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

@@ -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/cjs/components/tooltip/daikin-tooltip.cjs

@@ -146,7 +146,7 @@ exports.DaikinTooltip = class DaikinTooltip extends ddsElement.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/cjs/components/tree-item/daikin-tree-item.cjs

@@ -27,10 +27,10 @@ const cvaTreeChildren = classVarianceAuthority.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",
@@ -60,11 +60,10 @@ const cvaTreeChildren = classVarianceAuthority.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"
@@ -130,7 +129,15 @@ exports.DaikinTreeItem = class DaikinTreeItem extends ddsElement.DDSElement {
       @click=${() => common.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) {
@@ -184,6 +191,15 @@ exports.DaikinTreeItem.styles = lit.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/cjs/components/tree-item/daikin-tree-item.d.cts

@@ -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/cjs/components/tree-section/daikin-tree-section.cjs

@@ -129,7 +129,13 @@ exports.DaikinTreeSection = class DaikinTreeSection extends ddsElement.DDSElemen
         @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/cjs/components/tree-section/daikin-tree-section.d.cts

@@ -16,6 +16,7 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * @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/cjs/components/vertical-navigation/daikin-vertical-navigation.cjs

@@ -28,7 +28,7 @@ exports.DaikinVerticalNavigation = class DaikinVerticalNavigation extends ddsEle
   }
   _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();