@daikin-oss/design-system-web-components 1.5.2 → 1.6.0-next.0

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

@@ -0,0 +1,86 @@
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs";
+/**
+ * A sub-menu item designed specifically for use inside `daikin-vertical-navigation-item`.
+ * It renders as a link and embeds the visual style of a `daikin-list-item` in the vertical-navigation context,
+ * so no wrapper `daikin-list` component is needed.
+ *
+ * Place multiple `daikin-vertical-navigation-menu-item` elements directly in the default slot of
+ * `daikin-vertical-navigation-item` (type="menu") instead of wrapping them in `daikin-list`.
+ *
+ * Hierarchy:
+ * - `daikin-vertical-navigation` > `daikin-vertical-navigation-item` > `daikin-vertical-navigation-menu-item`
+ *
+ * @slot - A slot for the menu item label text.
+ * @slot left-icon - An optional slot for an icon placed to the left of the label. Place `daikin-icon` here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/vertical-navigation-item/index.js";
+ * import "@daikin-oss/design-system-web-components/components/vertical-navigation-menu-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-vertical-navigation-item type="menu" name="settings">
+ *   <span slot="label">Settings</span>
+ *   <daikin-vertical-navigation-menu-item href="/settings/general">
+ *     General
+ *   </daikin-vertical-navigation-menu-item>
+ *   <daikin-vertical-navigation-menu-item href="/settings/security" badge="alarm">
+ *     Security
+ *   </daikin-vertical-navigation-menu-item>
+ *   <daikin-vertical-navigation-menu-item href="/settings/billing" disabled>
+ *     Billing
+ *   </daikin-vertical-navigation-menu-item>
+ * </daikin-vertical-navigation-item>
+ * ```
+ */
+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.
+     */
+    href: string | null;
+    /**
+     * Whether the menu item is disabled.
+     * A disabled item cannot be clicked or focused.
+     */
+    disabled: 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.
+     * Supported colors: `"negative"`, `"alarm"`, `"warning"`, `"positive"`, `"information"`.
+     *
+     * @default "none"
+     */
+    badge: "none" | "negative" | "alarm" | "warning" | "positive" | "information";
+    /**
+     * The badge message for assistive technologies. Only used when `badge` is not `"none"`.
+     */
+    badgeMessage: string | null;
+    private get _disabled();
+    /**
+     * _Internal use._
+     * Returns the navigation target information.
+     * Used by navigation handling utilities.
+     *
+     * @returns Navigation target information or `null` if not navigable.
+     *
+     * @private
+     */
+    getDDSNavigationTarget(): NavigationTarget | null;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner link element.
+     * Has no effect when `disabled` is `true` or `href` is not provided.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-vertical-navigation-menu-item": DaikinVerticalNavigationMenuItem;
+    }
+}
+export default DaikinVerticalNavigationMenuItem;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinVerticalNavigationMenuItem = require("./daikin-vertical-navigation-menu-item.cjs");
+Object.defineProperty(exports, "DaikinVerticalNavigationMenuItem", {
+  enumerable: true,
+  get: () => daikinVerticalNavigationMenuItem.DaikinVerticalNavigationMenuItem
+});

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

@@ -0,0 +1 @@
+export * from "./daikin-vertical-navigation-menu-item.cjs";

package/dist/cjs-dev/controllers/block-scroll.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const controllerDirective = require("./helpers/controller-directive.cjs");
+const ATTR_COUNT = "data-dds-scroll-lock-count";
+const DDS_SCROLL_LOCK_VAR = "--ddc-scroll-lock";
+const blockScrollDirective = controllerDirective.createControllerDirective(
+  // The host element is accepted as an argument to ensure a non-empty type
+  // parameter tuple, which is required for TypeScript to correctly resolve
+  // the return type of the directive at call sites.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (_host) => {
+    const count = Number(document.body.getAttribute(ATTR_COUNT) ?? 0);
+    if (count === 0) {
+      document.documentElement.style.setProperty(DDS_SCROLL_LOCK_VAR, "hidden");
+    }
+    document.body.setAttribute(ATTR_COUNT, String(count + 1));
+    return () => {
+      const currentCount = Number(document.body.getAttribute(ATTR_COUNT) ?? 0);
+      if (currentCount <= 1) {
+        document.body.removeAttribute(ATTR_COUNT);
+        document.documentElement.style.removeProperty(DDS_SCROLL_LOCK_VAR);
+      } else {
+        document.body.setAttribute(ATTR_COUNT, String(currentCount - 1));
+      }
+    };
+  }
+);
+class BlockScrollController {
+  constructor(_host) {
+    this._host = _host;
+  }
+  /**
+   * Returns the directive result when `enabled` is `true`, or `nothing` when
+   * `false`. Placing this inside a `guard([open], ...)` in the template ensures
+   * the lock is acquired/released exactly when `open` changes.
+   */
+  directive(enabled = true) {
+    return enabled ? blockScrollDirective(this._host) : lit.nothing;
+  }
+}
+exports.BlockScrollController = BlockScrollController;
+exports.DDS_SCROLL_LOCK_VAR = DDS_SCROLL_LOCK_VAR;

package/dist/cjs-dev/controllers/block-scroll.d.cts

@@ -0,0 +1,48 @@
+import { ReactiveControllerHost } from 'lit';
+/**
+ * CSS custom property set on `<html>` while any scroll lock is active.
+ * To enable scroll locking, add the following CSS. If you use a custom scroll container instead of `body`, replace the selector accordingly:
+ *
+ * ```css
+ * body {
+ *   overflow: var(--ddc-scroll-lock, auto);
+ * }
+ * ```
+ *
+ * When no lock is active, the property is removed and the fallback value (`auto`) takes effect automatically.
+ */
+export declare const DDS_SCROLL_LOCK_VAR = "--ddc-scroll-lock";
+/**
+ * A reactive controller that prevents `document.body` from scrolling while
+ * one or more overlay components (e.g. drawers, modals) are open.
+ *
+ * Usage: call `directive(this.open)` inside a `guard` in the component's
+ * `render()`. The directive acquires the lock on connect and releases it
+ * automatically on disconnect — including when the host is removed from the
+ * DOM — so no manual cleanup is needed.
+ *
+ * @example
+ *
+ * ```ts
+ * class MyOverlay extends DDSElement {
+ *   private readonly _blockScroll = new BlockScrollController(this);
+ *
+ *   override render() {
+ *     return html`
+ *       ...
+ *       ${guard([this.open], () => this._blockScroll.directive(this.open))}
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class BlockScrollController<T extends ReactiveControllerHost & HTMLElement> {
+    private readonly _host;
+    constructor(_host: T);
+    /**
+     * Returns the directive result when `enabled` is `true`, or `nothing` when
+     * `false`. Placing this inside a `guard([open], ...)` in the template ensures
+     * the lock is acquired/released exactly when `open` changes.
+     */
+    directive(enabled?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
+}

package/dist/cjs-dev/controllers/focus-trap.cjs

@@ -4,21 +4,32 @@ const focusTrap = require("focus-trap");
 const lit = require("lit");
 const ref_js = require("lit/directives/ref.js");
 const controllerDirective = require("./helpers/controller-directive.cjs");
-const focusTrapDirective = controllerDirective.createControllerDirective((container, persistent, onDeactivate) => {
-  const trap = focusTrap.createFocusTrap(container, {
-    escapeDeactivates: !persistent,
-    fallbackFocus: container,
-    tabbableOptions: {
-      getShadowRoot: (node) => node.shadowRoot ?? void 0
-    },
-    clickOutsideDeactivates: !persistent,
-    onDeactivate
-  });
-  trap.activate();
-  return () => {
-    trap.deactivate();
-  };
-});
+const focusTrapDirective = controllerDirective.createControllerDirective(
+  (container, persistent, enableOutsideClickDeactivation, onDeactivate) => {
+    const trap = focusTrap.createFocusTrap(container, {
+      escapeDeactivates: !persistent,
+      fallbackFocus: container,
+      preventScroll: true,
+      tabbableOptions: {
+        getShadowRoot: (node) => node.shadowRoot ?? void 0
+      },
+      // When the consumer handles outside clicks itself (e.g. via a backdrop
+      // click handler), disable focus-trap's own outside-click detection.
+      // On iOS Safari, focus-trap's pointerdown listener calls deactivate()
+      // which moves focus before the synthesized `click` fires, causing the
+      // browser to redirect the tap away from the backdrop element.
+      clickOutsideDeactivates: !persistent && enableOutsideClickDeactivation,
+      // Prevent focus-trap from calling event.preventDefault() on any outside
+      // click when the consumer is responsible for closing.
+      ...enableOutsideClickDeactivation ? {} : { allowOutsideClick: () => true },
+      onDeactivate
+    });
+    trap.activate();
+    return () => {
+      trap.deactivate();
+    };
+  }
+);
 class FocusTrapController {
   constructor(_host, _onDeactivate) {
     this._host = _host;
@@ -32,11 +43,16 @@ class FocusTrapController {
   refContainer() {
     return ref_js.ref(this._refCallbackContainer);
   }
-  directive(open = true, persistent = false) {
+  directive(open = true, persistent = false, enableOutsideClickDeactivation = true) {
     if (!open || !this._container) {
       return lit.nothing;
     }
-    return focusTrapDirective(this._container, persistent, this._onDeactivate);
+    return focusTrapDirective(
+      this._container,
+      persistent,
+      enableOutsideClickDeactivation,
+      this._onDeactivate
+    );
   }
 }
 exports.FocusTrapController = FocusTrapController;

package/dist/cjs-dev/controllers/focus-trap.d.cts

@@ -6,5 +6,5 @@ export declare class FocusTrapController<T extends ReactiveControllerHost & HTML
     private readonly _refCallbackContainer;
     constructor(_host: T, _onDeactivate: () => void);
     refContainer(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/ref.js').RefDirective>;
-    directive(open?: boolean, persistent?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
+    directive(open?: boolean, persistent?: boolean, enableOutsideClickDeactivation?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
 }

package/dist/cjs-dev/index.cjs

@@ -18,6 +18,10 @@ const daikinCheckboxGroup = require("./components/checkbox-group/daikin-checkbox
 const daikinChip = require("./components/chip/daikin-chip.cjs");
 const daikinCombobox = require("./components/combobox/daikin-combobox.cjs");
 const daikinDatePicker = require("./components/date-picker/daikin-date-picker.cjs");
+const daikinDivider = require("./components/divider/daikin-divider.cjs");
+const daikinDrawer = require("./components/drawer/daikin-drawer.cjs");
+const daikinDrawerFooter = require("./components/drawer-footer/daikin-drawer-footer.cjs");
+const daikinDrawerHeader = require("./components/drawer-header/daikin-drawer-header.cjs");
 const daikinDropdown = require("./components/dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./components/dropdown-item/daikin-dropdown-item.cjs");
 const daikinEmptyState = require("./components/empty-state/daikin-empty-state.cjs");
@@ -63,6 +67,9 @@ const daikinTooltip = require("./components/tooltip/daikin-tooltip.cjs");
 const daikinTree = require("./components/tree/daikin-tree.cjs");
 const daikinTreeItem = require("./components/tree-item/daikin-tree-item.cjs");
 const daikinTreeSection = require("./components/tree-section/daikin-tree-section.cjs");
+const daikinVerticalNavigation = require("./components/vertical-navigation/daikin-vertical-navigation.cjs");
+const daikinVerticalNavigationItem = require("./components/vertical-navigation-item/daikin-vertical-navigation-item.cjs");
+const daikinVerticalNavigationMenuItem = require("./components/vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.cjs");
 const iconRegistry = require("./icon-registry.cjs");
 const navigation = require("./navigation.cjs");
 Object.defineProperty(exports, "DaikinAccordion", {
@@ -138,6 +145,22 @@ Object.defineProperty(exports, "DaikinDatePicker", {
   enumerable: true,
   get: () => daikinDatePicker.DaikinDatePicker
 });
+Object.defineProperty(exports, "DaikinDivider", {
+  enumerable: true,
+  get: () => daikinDivider.DaikinDivider
+});
+Object.defineProperty(exports, "DaikinDrawer", {
+  enumerable: true,
+  get: () => daikinDrawer.DaikinDrawer
+});
+Object.defineProperty(exports, "DaikinDrawerFooter", {
+  enumerable: true,
+  get: () => daikinDrawerFooter.DaikinDrawerFooter
+});
+Object.defineProperty(exports, "DaikinDrawerHeader", {
+  enumerable: true,
+  get: () => daikinDrawerHeader.DaikinDrawerHeader
+});
 Object.defineProperty(exports, "DaikinDropdown", {
   enumerable: true,
   get: () => daikinDropdown.DaikinDropdown
@@ -330,6 +353,18 @@ Object.defineProperty(exports, "DaikinTreeSection", {
   enumerable: true,
   get: () => daikinTreeSection.DaikinTreeSection
 });
+Object.defineProperty(exports, "DaikinVerticalNavigation", {
+  enumerable: true,
+  get: () => daikinVerticalNavigation.DaikinVerticalNavigation
+});
+Object.defineProperty(exports, "DaikinVerticalNavigationItem", {
+  enumerable: true,
+  get: () => daikinVerticalNavigationItem.DaikinVerticalNavigationItem
+});
+Object.defineProperty(exports, "DaikinVerticalNavigationMenuItem", {
+  enumerable: true,
+  get: () => daikinVerticalNavigationMenuItem.DaikinVerticalNavigationMenuItem
+});
 exports.IconRegistry = iconRegistry.IconRegistry;
 exports.iconRegistry = iconRegistry.iconRegistry;
 exports.getNavigationTarget = navigation.getNavigationTarget;