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

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

@@ -0,0 +1,379 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles 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 cvaHeader = cva(
+  [
+    "flex",
+    "relative",
+    "items-start",
+    "gap-2",
+    "w-full",
+    "min-h-12",
+    "px-4",
+    "py-3",
+    "font-bold",
+    "text-left",
+    "natural-break"
+  ],
+  {
+    variants: {
+      type: {
+        link: [
+          "focus-visible:outline-hidden",
+          "focus-visible:before:absolute",
+          "focus-visible:before:-inset-1",
+          "focus-visible:before:z-1",
+          "focus-visible:before:border-2",
+          "focus-visible:before:border-ddt-color-common-border-focus"
+        ],
+        menu: [
+          "focus-visible:outline-hidden",
+          "focus-visible:before:absolute",
+          "focus-visible:before:-inset-1",
+          "focus-visible:before:z-1",
+          "focus-visible:before:border-2",
+          "focus-visible:before:border-ddt-color-common-border-focus"
+        ]
+      },
+      disabled: {
+        false: ["text-ddt-color-common-neutral-default"],
+        true: ["text-ddt-color-common-disabled"]
+      },
+      current: {
+        false: [],
+        true: []
+      }
+    },
+    compoundVariants: [
+      {
+        type: ["link", "menu"],
+        disabled: false,
+        class: [
+          "hover:text-ddt-color-common-neutral-hover",
+          "active:text-ddt-color-common-neutral-press"
+        ]
+      },
+      {
+        type: "menu",
+        disabled: false,
+        class: ["cursor-pointer"]
+      },
+      {
+        type: "link",
+        disabled: true,
+        class: ["pointer-events-none"]
+      },
+      {
+        type: ["link", "menu"],
+        disabled: false,
+        current: false,
+        class: [
+          "link-enabled:hover:bg-ddt-color-common-surface-hover",
+          "link-enabled:active:bg-ddt-color-common-surface-press"
+        ]
+      },
+      {
+        type: ["link", "menu"],
+        disabled: false,
+        current: true,
+        class: [
+          "link-enabled:hover:bg-ddt-color-common-surface-brand-hover",
+          "link-enabled:active:bg-ddt-color-common-surface-brand-press"
+        ]
+      }
+    ]
+  }
+);
+const cvaChevron = cva(
+  ["size-6", "transition-all", "icon-[daikin--chevron-down]", "flex-none"],
+  {
+    variants: {
+      open: {
+        false: ["rotate-0"],
+        true: ["rotate-180"]
+      },
+      disabled: {
+        false: [],
+        true: ["text-ddt-color-common-disabled"]
+      }
+    }
+  }
+);
+const cvaIndicator = cva(["absolute", "left-0", "inset-y-0", "w-1", "z-1"], {
+  variants: {
+    disabled: {
+      false: ["bg-ddt-color-common-brand-default"],
+      true: ["bg-ddt-color-common-disabled"]
+    }
+  }
+});
+const cvaContent = cva(["grid", "duration-150", "ease-in-out"], {
+  variants: {
+    open: {
+      false: ["grid-rows-[0fr]"],
+      true: ["grid-rows-[1fr]", "pb-1"]
+    }
+  }
+});
+let DaikinVerticalNavigationItem = class extends DDSElement {
+  constructor() {
+    super();
+    this._triggerRef = createRef();
+    this.href = null;
+    this.open = false;
+    this.current = false;
+    this.badgeMessage = null;
+    this.disabled = false;
+    this.addEventListener("click", (event) => {
+      if (this.disabled || this.type === "link" && this.href == null) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  /**
+   * _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.type === "menu" || this.href == null || this.disabled) {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: null
+    };
+  }
+  _handleTriggerClick(event) {
+    event.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    this.dispatchEvent(new Event("toggle", event));
+  }
+  _getSlottedItems() {
+    var _a;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot:not([name])");
+    if (!slot) return [];
+    return slot.assignedElements({ flatten: true }).filter((el) => el.localName === "daikin-vertical-navigation-menu-item");
+  }
+  _propagateDisabledToChildren() {
+    for (const item of this._getSlottedItems()) {
+      if (this.disabled) {
+        if (!item.hasAttribute("disabled")) {
+          item.setAttribute("disabled", "");
+          item.setAttribute("data-disabled-by-parent", "");
+        }
+      } else {
+        if (item.hasAttribute("data-disabled-by-parent")) {
+          item.removeAttribute("disabled");
+          item.removeAttribute("data-disabled-by-parent");
+        }
+      }
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("disabled")) {
+      this._propagateDisabledToChildren();
+    }
+  }
+  _handleMenuSlotChange() {
+    this._propagateDisabledToChildren();
+  }
+  render() {
+    const open = this.open;
+    const indicator = this.current ? html`<div class=${cvaIndicator({ disabled: this.disabled })}></div>` : nothing;
+    const leftIconSlot = html`<slot
+      name="left-icon"
+      class="icon-size-6 flex-none slotted:flex-none"
+    ></slot>`;
+    const badgeEl = this.badge !== "none" ? html`<daikin-badge
+              mode="standalone"
+              type="dot"
+              size="large"
+              color=${this.badge}
+            ></daikin-badge>
+            ${this.badgeMessage ? html`<span class="sr-only">${this.badgeMessage}</span>` : nothing}` : nothing;
+    if (this.type === "link") {
+      const disabled = this.disabled || this.href == null;
+      return html`<div class="w-full relative" role="listitem">
+        ${indicator}
+        <a
+          ${ref(this._triggerRef)}
+          class=${cvaHeader({
+        type: "link",
+        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)}
+          aria-current=${ifDefined(this.current ? "page" : void 0)}
+          tabindex=${disabled ? -1 : 0}
+          @click=${(event) => {
+        if (disabled) {
+          return;
+        }
+        this.dispatchEvent(new Event("toggle", event));
+      }}
+        >
+          ${leftIconSlot}
+          <span class="flex-1 min-w-0 mt-0.5"><slot name="label"></slot></span>
+          <span class="flex items-center gap-1 flex-none">
+            <span class="size-3 flex-none flex items-center justify-center"
+              >${badgeEl}</span
+            >
+            <span class="size-6 flex-none"></span>
+          </span>
+        </a>
+      </div>`;
+    }
+    return html`<div class="w-full" role="listitem">
+      <div class="relative">
+        ${indicator}
+        <button
+          id="menu-button"
+          type="button"
+          ${ref(this._triggerRef)}
+          class=${cvaHeader({
+      type: "menu",
+      disabled: this.disabled,
+      current: this.current
+    })}
+          ?disabled=${this.disabled}
+          aria-current=${ifDefined(this.current ? "page" : void 0)}
+          aria-expanded=${open}
+          aria-controls="content"
+          tabindex=${this.disabled ? -1 : 0}
+          @click=${this._handleTriggerClick}
+        >
+          ${leftIconSlot}
+          <span class="flex-1 min-w-0 mt-0.5"><slot name="label"></slot></span>
+          <span class="flex items-center gap-1 flex-none">
+            <span class="size-3 flex-none flex items-center justify-center"
+              >${badgeEl}</span
+            >
+            <span class=${cvaChevron({ open, disabled: this.disabled })}></span>
+          </span>
+        </button>
+      </div>
+      <div
+        id="content"
+        role="region"
+        class=${cvaContent({ open })}
+        aria-labelledby="menu-button"
+        ?inert=${!open}
+      >
+        <div class="overflow-hidden" role="list">
+          <slot @slotchange=${this._handleMenuSlotChange}></slot>
+        </div>
+      </div>
+    </div>`;
+  }
+  /**
+   * Focuses on the inner link or menu button.
+   * Has no effect when `disabled` is `true` or `href` is not provided for a link.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    const isDisabled = this.disabled || this.type === "link" && this.href == null;
+    if (isDisabled) {
+      return;
+    }
+    (_a = this._triggerRef.value) == null ? void 0 : _a.focus(options);
+  }
+};
+DaikinVerticalNavigationItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      position: relative;
+      --divider-bottom-display: none;
+    }
+
+    :host::after {
+      content: "";
+      display: var(--divider-bottom-display, none);
+      position: absolute;
+      inset: 0;
+      top: auto;
+      width: 100%;
+      height: 1px;
+      background: var(--dds-color-divider);
+    }
+  `;
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "link",
+    isAllowedValue: oneOf([
+      "link",
+      "menu"
+    ])
+  })
+], DaikinVerticalNavigationItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinVerticalNavigationItem.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, reflect: true, fallbackValue: "" })
+], DaikinVerticalNavigationItem.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinVerticalNavigationItem.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinVerticalNavigationItem.prototype, "current", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "none",
+    isAllowedValue: oneOf([
+      "none",
+      "negative",
+      "alarm",
+      "warning",
+      "positive",
+      "information"
+    ])
+  })
+], DaikinVerticalNavigationItem.prototype, "badge", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "badge-message" })
+], DaikinVerticalNavigationItem.prototype, "badgeMessage", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinVerticalNavigationItem.prototype, "disabled", 2);
+DaikinVerticalNavigationItem = __decorateClass([
+  ddsElement("daikin-vertical-navigation-item")
+], DaikinVerticalNavigationItem);
+export {
+  DaikinVerticalNavigationItem
+};

package/dist/es/components/vertical-navigation-item/index.d.ts

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

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

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

package/dist/es/components/vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.d.ts

@@ -0,0 +1,86 @@
+import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.js";
+/**
+ * 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/es/components/vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.js

@@ -0,0 +1,177 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, nothing, html } 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 { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles 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(
+  [
+    "text-left",
+    // 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"
+  ],
+  {
+    variants: {
+      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"]
+      }
+    }
+  }
+);
+let DaikinVerticalNavigationMenuItem = class extends DDSElement {
+  constructor() {
+    super();
+    this.href = null;
+    this.disabled = 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.href == null || this.disabled) {
+      return null;
+    }
+    return {
+      href: this.href,
+      target: null
+    };
+  }
+  render() {
+    const disabled = this._disabled;
+    return html`
+      <div
+        class="group flex justify-between items-start w-full min-h-12 py-3 px-11 text-left relative natural-break"
+        role="listitem"
+      >
+        <a
+          class=${cvaInner({ disabled })}
+          href=${ifDefined(!disabled ? this.href ?? void 0 : void 0)}
+          role=${ifDefined(disabled ? "link" : void 0)}
+          aria-disabled=${ifDefined(disabled ? "true" : void 0)}
+          tabindex=${disabled ? -1 : 0}
+        >
+          <span class="flex items-start w-full 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>
+          </span>
+          ${this.badgeMessage && this.badge !== "none" ? html`<span class="sr-only">${this.badgeMessage}</span>` : nothing}
+        </a>
+        <span class="flex items-start mt-1.5 z-1 pointer-events-none">
+          ${this.badge !== "none" ? html`<daikin-badge
+                mode="standalone"
+                type="dot"
+                size="large"
+                color=${this.badge}
+              ></daikin-badge>` : html`<span class="block -mr-1 w-3"></span>`}
+        </span>
+      </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: 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
+};

package/dist/es/components/vertical-navigation-menu-item/index.d.ts

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

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

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