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

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

@@ -22,29 +22,30 @@ var __decorateClass = (decorators2, target, key, kind) => {
 };
 const cvaInner = classVarianceAuthority.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)
@@ -54,14 +55,77 @@ const cvaInner = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.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"]
+    }
+  }
+});
 exports.DaikinVerticalNavigationMenuItem = class DaikinVerticalNavigationMenuItem extends ddsElement.DDSElement {
   constructor() {
     super();
     this.href = null;
     this.disabled = false;
+    this.current = false;
     this.badgeMessage = null;
     this.addEventListener("click", (event) => {
       if (this._disabled) {
@@ -82,7 +146,7 @@ exports.DaikinVerticalNavigationMenuItem = class DaikinVerticalNavigationMenuIte
    * @private
    */
   getDDSNavigationTarget() {
-    if (this.href == null || this.disabled) {
+    if (this.disabled || this.href == null) {
       return null;
     }
     return {
@@ -92,37 +156,40 @@ exports.DaikinVerticalNavigationMenuItem = class DaikinVerticalNavigationMenuIte
   }
   render() {
     const disabled = this._disabled;
+    const indicator = this.current ? lit.html`<span class=${cvaIndicator({ disabled })}></span>` : lit.nothing;
     return lit.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_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)}
           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" ? lit.html`<daikin-badge
+                  mode="standalone"
+                  type="dot"
+                  size="large"
+                  color=${this.badge}
+                ></daikin-badge>` : lit.html`<span class="block -mr-1 w-3"></span>`}
           </span>
           ${this.badgeMessage && this.badge !== "none" ? lit.html`<span class="sr-only">${this.badgeMessage}</span>` : lit.nothing}
         </a>
-        <span class="flex items-start mt-1.5 z-1 pointer-events-none">
-          ${this.badge !== "none" ? lit.html`<daikin-badge
-                mode="standalone"
-                type="dot"
-                size="large"
-                color=${this.badge}
-              ></daikin-badge>` : lit.html`<span class="block -mr-1 w-3"></span>`}
-        </span>
       </div>
     `;
   }
@@ -153,6 +220,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinVerticalNavigationMenuItem.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinVerticalNavigationMenuItem.prototype, "current", 2);
 __decorateClass([
   ddsProperty.property({
     type: String,

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

@@ -38,7 +38,7 @@ import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs
 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/cjs-dev/controllers/custom-readonly.cjs

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class CustomReadonlyController {
+  constructor(host, _options) {
+    this._options = _options;
+    this._target = null;
+    this._preventInteraction = (event) => {
+      if (!this._isReadonlyActive()) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    this._handleKeydown = (event) => {
+      if (!this._isReadonlyActive() || !this._blockedKeys.has(event.key)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    host.addController(this);
+    this._blockedKeys = new Set(_options.blockedKeys ?? []);
+  }
+  _isReadonlyActive() {
+    return this._options.isReadonly() && !(this._options.isDisabled ? this._options.isDisabled() : false);
+  }
+  _detachFromTarget(target) {
+    target.removeEventListener("pointerdown", this._preventInteraction);
+    target.removeEventListener("keydown", this._handleKeydown);
+    target.removeEventListener("wheel", this._preventInteraction);
+  }
+  _attachToTarget(target) {
+    target.addEventListener("pointerdown", this._preventInteraction);
+    target.addEventListener("keydown", this._handleKeydown);
+    target.addEventListener("wheel", this._preventInteraction, {
+      passive: false
+    });
+  }
+  setTarget(target) {
+    const previous = this._target;
+    if (previous && previous !== target) {
+      this._detachFromTarget(previous);
+    }
+    this._target = target;
+    if (!target) {
+      return;
+    }
+    if (previous !== target) {
+      this._attachToTarget(target);
+    }
+  }
+  hostDisconnected() {
+    if (this._target) {
+      this._detachFromTarget(this._target);
+      this._target = null;
+    }
+  }
+}
+exports.CustomReadonlyController = CustomReadonlyController;

package/dist/cjs-dev/controllers/custom-readonly.d.cts

@@ -0,0 +1,28 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface CustomReadonlyControllerOptions {
+    /** Returns whether readonly fallback should be active. */
+    isReadonly: () => boolean;
+    /** Returns whether the control is effectively disabled. */
+    isDisabled?: () => boolean;
+    /** Keyboard keys that should be blocked when readonly is active. */
+    blockedKeys?: readonly string[];
+}
+/**
+ * Adds a readonly fallback for controls that do not support native readonly semantics.
+ *
+ * This controller blocks interaction events (pointerdown, keydown, wheel)
+ * to prevent the user from changing the value.
+ */
+export declare class CustomReadonlyController<T extends ReactiveControllerHost, E extends HTMLElement> implements ReactiveController {
+    private readonly _options;
+    private _target;
+    private readonly _blockedKeys;
+    constructor(host: T, _options: CustomReadonlyControllerOptions);
+    private _isReadonlyActive;
+    private readonly _preventInteraction;
+    private readonly _handleKeydown;
+    private _detachFromTarget;
+    private _attachToTarget;
+    setTarget(target: E | null): void;
+    hostDisconnected(): void;
+}

package/dist/cjs-dev/index.cjs

@@ -317,13 +317,13 @@ 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;
 Object.defineProperty(exports, "DaikinToastNotification", {
   enumerable: true,
   get: () => daikinToastNotification.DaikinToastNotification