@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

package/dist/es-dev/components/vertical-navigation-item/index.js

@@ -1,4 +1,2 @@
 import { DaikinVerticalNavigationItem } from "./daikin-vertical-navigation-item.js";
-export {
-  DaikinVerticalNavigationItem
-};
+export { DaikinVerticalNavigationItem };

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

@@ -1,167 +1,154 @@
-import { cva } from "class-variance-authority";
-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";
-import { property, oneOf } from "../../base/dds-property.js";
+import { oneOf, property } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
-import tailwindStyles from "../../tailwind.css.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
 import "../badge/daikin-badge.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-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-visible:outline-hidden"
-  ],
-  {
-    variants: {
-      current: {
-        false: [],
-        true: []
-      },
-      disabled: {
-        false: [
-          // Vertical navigation neutral text colors (hard-coded for this component)
-          "text-ddt-color-common-neutral-default",
-          "group-hover:text-ddt-color-common-neutral-hover",
-          "active:text-ddt-color-common-neutral-press"
-        ],
-        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"]
-    }
-  }
+import { css, html, nothing, unsafeCSS } from "lit";
+import { cva } from "class-variance-authority";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.ts
+var cvaInner = cva([
+	"block",
+	"relative",
+	"flex",
+	"justify-between",
+	"items-start",
+	"gap-0",
+	"text-left",
+	"relative",
+	"w-full",
+	"py-(--dds-padding-10)",
+	"px-(--dds-padding-40)",
+	"before:absolute",
+	"before:inset-0",
+	"before:w-full",
+	"before:h-full",
+	"focus-visible:outline-hidden"
+], {
+	variants: {
+		current: {
+			false: [],
+			true: []
+		},
+		disabled: {
+			false: [
+				"text-ddt-color-common-neutral-default",
+				"group-hover:text-ddt-color-common-neutral-hover",
+				"active:text-ddt-color-common-neutral-press"
+			],
+			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"]
+	}]
+});
+var 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"]
+	}]
 });
-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) {
-        event.stopImmediatePropagation();
-      }
-    });
-  }
-  get _disabled() {
-    return this.disabled || this.href == null;
-  }
-  /**
-   * _Internal use._
-   * Returns the navigation target information.
-   * Used by navigation handling utilities.
-   *
-   * @returns Navigation target information or `null` if not navigable.
-   *
-   * @private
-   */
-  getDDSNavigationTarget() {
-    if (this.disabled || this.href == null) {
-      return null;
+var 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"]
+} } });
+var DaikinVerticalNavigationMenuItem = class DaikinVerticalNavigationMenuItem extends DDSElement {
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+      width: 100%;
     }
-    return {
-      href: this.href,
-      target: null
-    };
-  }
-  render() {
-    const disabled = this._disabled;
-    const indicator = this.current ? html`<span class=${cvaIndicator({ disabled })}></span>` : nothing;
-    return html`
+  `;
+	}
+	get _disabled() {
+		return this.disabled || this.href == null;
+	}
+	/**
+	* _Internal use._
+	* Returns the navigation target information.
+	* Used by navigation handling utilities.
+	*
+	* @returns Navigation target information or `null` if not navigable.
+	*
+	* @private
+	*/
+	getDDSNavigationTarget() {
+		if (this.disabled || this.href == null) return null;
+		return {
+			href: this.href,
+			target: null
+		};
+	}
+	constructor() {
+		super();
+		this.href = null;
+		this.disabled = false;
+		this.current = false;
+		this.badgeMessage = null;
+		this.addEventListener("click", (event) => {
+			if (this._disabled) event.stopImmediatePropagation();
+		});
+	}
+	render() {
+		const disabled = this._disabled;
+		const indicator = this.current ? html`<span class=${cvaIndicator({ disabled })}></span>` : nothing;
+		return html`
       <div
-        class=${cvaContainer({ disabled, current: this.current })}
+        class=${cvaContainer({
+			disabled,
+			current: this.current
+		})}
         role="listitem"
       >
         <a
-          class=${cvaInner({ disabled, current: this.current })}
+          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)}
@@ -190,58 +177,47 @@ let DaikinVerticalNavigationMenuItem = class extends DDSElement {
         </a>
       </div>
     `;
-  }
-  /**
-   * Focuses on the inner link element.
-   * Has no effect when `disabled` is `true` or `href` is not provided.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a, _b;
-    if (this._disabled) {
-      return;
-    }
-    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("a")) == null ? void 0 : _b.focus(options);
-  }
-};
-DaikinVerticalNavigationMenuItem.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinVerticalNavigationMenuItem.prototype, "href", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinVerticalNavigationMenuItem.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinVerticalNavigationMenuItem.prototype, "current", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "none",
-    isAllowedValue: oneOf([
-      "none",
-      "negative",
-      "alarm",
-      "warning",
-      "positive",
-      "information"
-    ])
-  })
-], DaikinVerticalNavigationMenuItem.prototype, "badge", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "badge-message" })
-], DaikinVerticalNavigationMenuItem.prototype, "badgeMessage", 2);
-DaikinVerticalNavigationMenuItem = __decorateClass([
-  ddsElement("daikin-vertical-navigation-menu-item")
-], DaikinVerticalNavigationMenuItem);
-export {
-  DaikinVerticalNavigationMenuItem
+	}
+	/**
+	* Focuses on the inner link element.
+	* Has no effect when `disabled` is `true` or `href` is not provided.
+	* @param options focus options
+	*/
+	focus(options) {
+		if (this._disabled) return;
+		this.shadowRoot?.querySelector("a")?.focus(options);
+	}
 };
+__decorate([property({
+	type: String,
+	reflect: true
+})], DaikinVerticalNavigationMenuItem.prototype, "href", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DaikinVerticalNavigationMenuItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DaikinVerticalNavigationMenuItem.prototype, "current", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: "none",
+	isAllowedValue: oneOf([
+		"none",
+		"negative",
+		"alarm",
+		"warning",
+		"positive",
+		"information"
+	])
+})], DaikinVerticalNavigationMenuItem.prototype, "badge", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "badge-message"
+})], DaikinVerticalNavigationMenuItem.prototype, "badgeMessage", void 0);
+DaikinVerticalNavigationMenuItem = __decorate([ddsElement("daikin-vertical-navigation-menu-item")], DaikinVerticalNavigationMenuItem);
+//#endregion
+export { DaikinVerticalNavigationMenuItem };

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

@@ -1,4 +1,2 @@
 import { DaikinVerticalNavigationMenuItem } from "./daikin-vertical-navigation-menu-item.js";
-export {
-  DaikinVerticalNavigationMenuItem
-};
+export { DaikinVerticalNavigationMenuItem };

package/dist/es-dev/controllers/block-scroll.js

@@ -1,43 +1,76 @@
-import { nothing } from "lit";
 import { createControllerDirective } from "./helpers/controller-directive.js";
-const ATTR_COUNT = "data-dds-scroll-lock-count";
-const DDS_SCROLL_LOCK_VAR = "--ddc-scroll-lock";
-const blockScrollDirective = 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) : nothing;
-  }
-}
-export {
-  BlockScrollController,
-  DDS_SCROLL_LOCK_VAR
+import { nothing } from "lit";
+//#region src/controllers/block-scroll.ts
+var ATTR_COUNT = "data-dds-scroll-lock-count";
+/**
+* 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.
+*/
+var DDS_SCROLL_LOCK_VAR = "--ddc-scroll-lock";
+/**
+* An async directive that acquires the scroll lock when connected and releases
+* it when disconnected.
+*
+* Multiple instances coordinate through a `data-*` attribute on
+* `document.body`:
+* - `data-dds-scroll-lock-count`   — number of directives currently holding a lock.
+*/
+var blockScrollDirective = createControllerDirective((_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));
+	};
+});
+/**
+* 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))}
+*     `;
+*   }
+* }
+* ```
+*/
+var BlockScrollController = class {
+	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) : nothing;
+	}
 };
+//#endregion
+export { BlockScrollController, DDS_SCROLL_LOCK_VAR };

package/dist/es-dev/controllers/click-outside.js

@@ -1,31 +1,63 @@
-import { nothing } from "lit";
 import { createControllerDirective } from "./helpers/controller-directive.js";
-const clickOutsideDirective = createControllerDirective(
-  (element, callback) => {
-    const listener = (event) => {
-      if (!event.target || element.contains(event.target)) {
-        return;
-      }
-      callback.call(element, event);
-    };
-    setTimeout(() => {
-      window.addEventListener("click", listener);
-    }, 0);
-    return () => {
-      window.removeEventListener("click", listener);
-    };
-  }
-);
-class ClickOutsideController {
-  constructor(_host, _callback) {
-    this._host = _host;
-    this._callback = _callback;
-    _host.addController(this);
-  }
-  directive(enabled = true) {
-    return enabled ? clickOutsideDirective(this._host, this._callback) : nothing;
-  }
-}
-export {
-  ClickOutsideController
+import { nothing } from "lit";
+//#region src/controllers/click-outside.ts
+/**
+* An async directive that listens for outside clicks.
+* This directive takes the target HTMLElement and a callback function as arguments.
+* When the directive is connected to the DOM, an event listener is registered, and when it is disconnected from or removed from the DOM, the event listener will be unregistered.
+* Also, when the directive arguments are updated, the event listener is re-registered.
+*/
+var clickOutsideDirective = createControllerDirective((element, callback) => {
+	const listener = (event) => {
+		if (!event.target || element.contains(event.target)) return;
+		callback.call(element, event);
+	};
+	setTimeout(() => {
+		window.addEventListener("click", listener);
+	}, 0);
+	return () => {
+		window.removeEventListener("click", listener);
+	};
+});
+/**
+* A reactive controller that provides a directive that listens for clicks outside the host element.
+* This provides a declarative way to listen for outside clicks.
+* Create an instance of `ClickOutsideController` in the constructor or in a class field, and call `instance.directive()` inside a html template.
+*
+* @example
+*
+* ```ts
+* class MyComponent extends DDSElement {
+*   private _clickOutsideController = new ClickOutsideController(
+*     this,
+*     this._onClickOutside
+*   );
+*
+*   private _onClickOutside(event: MouseEvent): void {
+*     console.debug("Click Outside", event);
+*     this.open = false;
+*   }
+*
+*   override render() {
+*     return html`<div ?hidden=${!open}>
+*       ${
+*         // Listen to click outside only when `this.open` is `true`.
+*         this._clickOutsideController.directive(this.open)
+*       }
+*     </div>`;
+*   }
+* }
+* ```
+*/
+var ClickOutsideController = class {
+	constructor(_host, _callback) {
+		this._host = _host;
+		this._callback = _callback;
+		_host.addController(this);
+	}
+	directive(enabled = true) {
+		return enabled ? clickOutsideDirective(this._host, this._callback) : nothing;
+	}
 };
+//#endregion
+export { ClickOutsideController };