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

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

@@ -1,7 +1,8 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinVerticalNavigationItem = require("./daikin-vertical-navigation-item.cjs");
+const require_daikin_vertical_navigation_item = require("./daikin-vertical-navigation-item.cjs");
 Object.defineProperty(exports, "DaikinVerticalNavigationItem", {
-  enumerable: true,
-  get: () => daikinVerticalNavigationItem.DaikinVerticalNavigationItem
+	enumerable: true,
+	get: function() {
+		return require_daikin_vertical_navigation_item.DaikinVerticalNavigationItem;
+	}
 });

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

@@ -1,173 +1,158 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
-const lit = require("lit");
-const ifDefined_js = require("lit/directives/if-defined.js");
-const ddsElement = require("../../base/dds-element.cjs");
-require("../../base/dds-form-element.cjs");
-const ddsProperty = require("../../base/dds-property.cjs");
-const decorators = require("../../base/decorators.cjs");
-require("../../base/define.cjs");
-const tailwind = require("../../tailwind.css.cjs");
+const require_dds_element = require("../../base/dds-element.cjs");
+const require_dds_property = require("../../base/dds-property.cjs");
+const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
+const require_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
 require("../badge/daikin-badge.cjs");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators2[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-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-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 = 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"]
-    }
-  }
+let lit = require("lit");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_if_defined_js = require("lit/directives/if-defined.js");
+//#region src/components/vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.ts
+var cvaInner = (0, class_variance_authority.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"]
+	}]
 });
-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) {
-        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 cvaContainer = (0, class_variance_authority.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"]
+	}]
+});
+var cvaIndicator = (0, class_variance_authority.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 require_dds_element.DDSElement {
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
     }
-    return {
-      href: this.href,
-      target: null
-    };
-  }
-  render() {
-    const disabled = this._disabled;
-    const indicator = this.current ? lit.html`<span class=${cvaIndicator({ disabled })}></span>` : lit.nothing;
-    return lit.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 ? lit.html`<span class=${cvaIndicator({ disabled })}></span>` : lit.nothing;
+		return lit.html`
       <div
-        class=${cvaContainer({ disabled, current: this.current })}
+        class=${cvaContainer({
+			disabled,
+			current: this.current
+		})}
         role="listitem"
       >
         <a
-          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)}
+          class=${cvaInner({
+			disabled,
+			current: this.current
+		})}
+          href=${(0, lit_directives_if_defined_js.ifDefined)(!disabled ? this.href ?? void 0 : void 0)}
+          role=${(0, lit_directives_if_defined_js.ifDefined)(disabled ? "link" : void 0)}
+          aria-disabled=${(0, lit_directives_if_defined_js.ifDefined)(disabled ? "true" : void 0)}
+          aria-current=${(0, lit_directives_if_defined_js.ifDefined)(this.current ? "page" : void 0)}
           tabindex=${disabled ? -1 : 0}
         >
           ${indicator}
@@ -192,55 +177,52 @@ exports.DaikinVerticalNavigationMenuItem = class DaikinVerticalNavigationMenuIte
         </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);
-  }
+	}
+	/**
+	* 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);
+	}
 };
-exports.DaikinVerticalNavigationMenuItem.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: block;
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true })
-], exports.DaikinVerticalNavigationMenuItem.prototype, "href", 2);
-__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,
-    reflect: true,
-    fallbackValue: "none",
-    isAllowedValue: ddsProperty.oneOf([
-      "none",
-      "negative",
-      "alarm",
-      "warning",
-      "positive",
-      "information"
-    ])
-  })
-], exports.DaikinVerticalNavigationMenuItem.prototype, "badge", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, attribute: "badge-message" })
-], exports.DaikinVerticalNavigationMenuItem.prototype, "badgeMessage", 2);
-exports.DaikinVerticalNavigationMenuItem = __decorateClass([
-  decorators.ddsElement("daikin-vertical-navigation-menu-item")
-], exports.DaikinVerticalNavigationMenuItem);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true
+})], DaikinVerticalNavigationMenuItem.prototype, "href", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinVerticalNavigationMenuItem.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinVerticalNavigationMenuItem.prototype, "current", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "none",
+	isAllowedValue: require_dds_property.oneOf([
+		"none",
+		"negative",
+		"alarm",
+		"warning",
+		"positive",
+		"information"
+	])
+})], DaikinVerticalNavigationMenuItem.prototype, "badge", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "badge-message"
+})], DaikinVerticalNavigationMenuItem.prototype, "badgeMessage", void 0);
+DaikinVerticalNavigationMenuItem = require_decorate.default([require_decorators.ddsElement("daikin-vertical-navigation-menu-item")], DaikinVerticalNavigationMenuItem);
+//#endregion
+Object.defineProperty(exports, "DaikinVerticalNavigationMenuItem", {
+	enumerable: true,
+	get: function() {
+		return DaikinVerticalNavigationMenuItem;
+	}
+});

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

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

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

@@ -1,43 +1,77 @@
-"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;
-  }
-}
+const require_controller_directive = require("./helpers/controller-directive.cjs");
+let lit = require("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 = require_controller_directive.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) : lit.nothing;
+	}
+};
+//#endregion
 exports.BlockScrollController = BlockScrollController;
 exports.DDS_SCROLL_LOCK_VAR = DDS_SCROLL_LOCK_VAR;