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

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

@@ -1,365 +1,375 @@
-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 { 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 cvaHeader = cva(
-  [
-    "flex",
-    "relative",
-    "items-start",
-    "gap-0",
-    "w-full",
-    "px-(--dds-padding-30)",
-    "py-(--dds-padding-30)",
-    "font-bold",
-    "text-left",
-    "text-(length:--dds-font-size-label-text)",
-    "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"
-        ],
-        section: [
-          "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: [],
-        true: ["text-ddt-color-common-disabled"]
-      },
-      current: {
-        false: [],
-        true: [],
-        descendant: []
-      },
-      interactive: {
-        true: ["text-(length:--dds-font-size-label-text)"],
-        false: [
-          "font-normal",
-          "cursor-default",
-          "pointer-events-none",
-          "tracking-widest",
-          "text-(length:--dds-font-size-helper-text)"
-        ]
-      }
-    },
-    defaultVariants: {
-      interactive: true
-    },
-    compoundVariants: [
-      {
-        type: ["link", "menu", "section"],
-        disabled: false,
-        class: ["text-ddt-color-common-neutral-default"]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: false,
-        current: false,
-        class: [
-          "hover:text-ddt-color-common-neutral-hover",
-          "active:text-ddt-color-common-neutral-press"
-        ]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: false,
-        current: true,
-        class: [
-          "hover:text-ddt-color-common-neutral-default",
-          "active:text-ddt-color-common-neutral-default"
-        ]
-      },
-      {
-        type: "menu",
-        disabled: false,
-        class: ["cursor-pointer"]
-      },
-      {
-        type: "menu",
-        disabled: false,
-        current: false,
-        class: [
-          "hover:bg-ddt-color-common-surface-hover",
-          "active:bg-ddt-color-common-surface-press"
-        ]
-      },
-      {
-        type: "menu",
-        disabled: false,
-        current: true,
-        class: [
-          "hover:bg-ddt-color-common-surface-brand-hover",
-          "active:bg-ddt-color-common-surface-brand-press"
-        ]
-      },
-      {
-        type: "section",
-        disabled: false,
-        class: ["cursor-pointer"]
-      },
-      {
-        type: ["link", "section"],
-        disabled: true,
-        class: ["pointer-events-none"]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: false,
-        current: false,
-        class: [
-          "hover:bg-ddt-color-common-surface-hover",
-          "active:bg-ddt-color-common-surface-press"
-        ]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: false,
-        current: "descendant",
-        class: [
-          "text-ddt-color-common-neutral-default",
-          "hover:bg-ddt-color-common-surface-brand-hover",
-          "active:bg-ddt-color-common-surface-brand-press"
-        ]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: false,
-        current: true,
-        class: [
-          "hover:bg-ddt-color-common-surface-brand-hover",
-          "active:bg-ddt-color-common-surface-brand-press"
-        ]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: false,
-        current: "descendant",
-        interactive: true,
-        class: [
-          "bg-ddt-color-common-surface-selected-secondary",
-          "hover:bg-ddt-color-common-surface-brand-hover",
-          "active:bg-ddt-color-common-surface-brand-press"
-        ]
-      },
-      {
-        type: ["menu", "section"],
-        disabled: false,
-        current: "descendant",
-        interactive: false,
-        class: ["bg-ddt-color-common-surface-selected-secondary"]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: true,
-        class: ["text-ddt-color-common-disabled"]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: true,
-        current: "descendant",
-        class: ["bg-ddt-color-common-surface-disabled-overlay/80"]
-      },
-      {
-        type: ["link", "menu", "section"],
-        disabled: true,
-        interactive: false,
-        class: ["text-ddt-color-common-disabled"]
-      }
-    ]
-  }
-);
-const cvaChevron = cva(
-  [
-    "size-(--dds-icon)",
-    "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"]
-    }
-  }
+import { css, html, nothing, unsafeCSS } from "lit";
+import { cva } from "class-variance-authority";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/vertical-navigation-item/daikin-vertical-navigation-item.ts
+var cvaHeader = cva([
+	"flex",
+	"relative",
+	"items-start",
+	"gap-0",
+	"w-full",
+	"px-(--dds-padding-30)",
+	"py-(--dds-padding-30)",
+	"font-bold",
+	"text-left",
+	"text-(length:--dds-font-size-label-text)",
+	"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"
+			],
+			section: [
+				"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: [],
+			true: ["text-ddt-color-common-disabled"]
+		},
+		current: {
+			false: [],
+			true: [],
+			descendant: []
+		},
+		interactive: {
+			true: ["text-(length:--dds-font-size-label-text)"],
+			false: [
+				"font-normal",
+				"cursor-default",
+				"pointer-events-none",
+				"tracking-widest",
+				"text-(length:--dds-font-size-helper-text)"
+			]
+		}
+	},
+	defaultVariants: { interactive: true },
+	compoundVariants: [
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: false,
+			class: ["text-ddt-color-common-neutral-default"]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: false,
+			current: false,
+			class: ["hover:text-ddt-color-common-neutral-hover", "active:text-ddt-color-common-neutral-press"]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: false,
+			current: true,
+			class: ["hover:text-ddt-color-common-neutral-default", "active:text-ddt-color-common-neutral-default"]
+		},
+		{
+			type: "menu",
+			disabled: false,
+			class: ["cursor-pointer"]
+		},
+		{
+			type: "menu",
+			disabled: false,
+			current: false,
+			class: ["hover:bg-ddt-color-common-surface-hover", "active:bg-ddt-color-common-surface-press"]
+		},
+		{
+			type: "menu",
+			disabled: false,
+			current: true,
+			class: ["hover:bg-ddt-color-common-surface-brand-hover", "active:bg-ddt-color-common-surface-brand-press"]
+		},
+		{
+			type: "section",
+			disabled: false,
+			class: ["cursor-pointer"]
+		},
+		{
+			type: ["link", "section"],
+			disabled: true,
+			class: ["pointer-events-none"]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: false,
+			current: false,
+			class: ["hover:bg-ddt-color-common-surface-hover", "active:bg-ddt-color-common-surface-press"]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: false,
+			current: "descendant",
+			class: [
+				"text-ddt-color-common-neutral-default",
+				"hover:bg-ddt-color-common-surface-brand-hover",
+				"active:bg-ddt-color-common-surface-brand-press"
+			]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: false,
+			current: true,
+			class: ["hover:bg-ddt-color-common-surface-brand-hover", "active:bg-ddt-color-common-surface-brand-press"]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: false,
+			current: "descendant",
+			interactive: true,
+			class: [
+				"bg-ddt-color-common-surface-selected-secondary",
+				"hover:bg-ddt-color-common-surface-brand-hover",
+				"active:bg-ddt-color-common-surface-brand-press"
+			]
+		},
+		{
+			type: ["menu", "section"],
+			disabled: false,
+			current: "descendant",
+			interactive: false,
+			class: ["bg-ddt-color-common-surface-selected-secondary"]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: true,
+			class: ["text-ddt-color-common-disabled"]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: true,
+			current: "descendant",
+			class: ["bg-ddt-color-common-surface-disabled-overlay/80"]
+		},
+		{
+			type: [
+				"link",
+				"menu",
+				"section"
+			],
+			disabled: true,
+			interactive: false,
+			class: ["text-ddt-color-common-disabled"]
+		}
+	]
 });
-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) => {
-      const isLinkInvalid = this.disabled || this.type === "link" && this.href == null || this.type === "section" && this.href == null;
-      if (isLinkInvalid) {
-        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");
-  }
-  get _effectiveCurrent() {
-    if (this.current === true) {
-      return true;
-    }
-    if (this.current === "descendant") {
-      return "descendant";
-    }
-    return false;
-  }
-  _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");
-        }
-      }
+var cvaChevron = cva([
+	"size-(--dds-icon)",
+	"transition-all",
+	"icon-[daikin--chevron-down]",
+	"flex-none"
+], { variants: {
+	open: {
+		false: ["rotate-0"],
+		true: ["rotate-180"]
+	},
+	disabled: {
+		false: [],
+		true: ["text-ddt-color-common-disabled"]
+	}
+} });
+var 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"]
+} } });
+var cvaContent = cva([
+	"grid",
+	"duration-150",
+	"ease-in-out"
+], { variants: { open: {
+	false: ["grid-rows-[0fr]"],
+	true: ["grid-rows-[1fr]", "pb-1"]
+} } });
+var DaikinVerticalNavigationItem = class DaikinVerticalNavigationItem extends DDSElement {
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+      position: relative;
+      --divider-bottom-display: none;
     }
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("disabled")) {
-      this._propagateDisabledToChildren();
+    :host::after {
+      content: "";
+      display: var(--divider-bottom-display, none);
+      position: absolute;
+      inset: 0;
+      top: auto;
+      width: 100%;
+      height: 1px;
+      background: var(--dds-color-divider);
     }
-  }
-  _handleMenuSlotChange() {
-    this._propagateDisabledToChildren();
-  }
-  render() {
-    const open = this.type === "section" ? true : this.open;
-    const current = this._effectiveCurrent;
-    const isCurrent = current === true;
-    const indicator = isCurrent ? html`<div class=${cvaIndicator({ disabled: this.disabled })}></div>` : nothing;
-    const leftIconSlot = html`<slot
+  `;
+	}
+	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 || this.type === "section" && 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() {
+		const slot = this.shadowRoot?.querySelector("slot:not([name])");
+		if (!slot) return [];
+		return slot.assignedElements({ flatten: true }).filter((el) => el.localName === "daikin-vertical-navigation-menu-item");
+	}
+	get _effectiveCurrent() {
+		if (this.current === true) return true;
+		if (this.current === "descendant") return "descendant";
+		return false;
+	}
+	_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.type === "section" ? true : this.open;
+		const current = this._effectiveCurrent;
+		const isCurrent = current === true;
+		const indicator = isCurrent ? html`<div class=${cvaIndicator({ disabled: this.disabled })}></div>` : nothing;
+		const leftIconSlot = html`<slot
       name="left-icon"
       class="icon-size-token flex-none slotted:flex-none"
     ></slot>`;
-    const badgeEl = this.badge !== "none" ? html`<daikin-badge
+		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
+		if (this.type === "link") {
+			const disabled = this.disabled || this.href == null;
+			return html`<div
         class="w-full relative ${disabled ? "pointer-events-none" : ""}"
         role="listitem"
       >
         ${indicator}
         <a
           ${ref(this._triggerRef)}
-          class=${cvaHeader({ type: "link", disabled, current })}
+          class=${cvaHeader({
+				type: "link",
+				disabled,
+				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(isCurrent ? "page" : void 0)}
           tabindex=${disabled ? -1 : 0}
           @click=${(event) => {
-        if (disabled) {
-          return;
-        }
-        this.dispatchEvent(new Event("toggle", event));
-      }}
+				if (disabled) return;
+				this.dispatchEvent(new Event("toggle", event));
+			}}
         >
           ${leftIconSlot}
           <span class="flex-1 min-w-0 pl-1 leading-normal"
@@ -373,17 +383,16 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
           </span>
         </a>
       </div>`;
-    }
-    if (this.type === "section") {
-      const disabled = this.disabled;
-      const isInteractive = !!this.href;
-      const headerClass = cvaHeader({
-        type: "section",
-        disabled,
-        current,
-        interactive: isInteractive
-      });
-      const renderSectionHeader = this.href ? html`<a
+		}
+		if (this.type === "section") {
+			const disabled = this.disabled;
+			const headerClass = cvaHeader({
+				type: "section",
+				disabled,
+				current,
+				interactive: !!this.href
+			});
+			const renderSectionHeader = this.href ? html`<a
             ${ref(this._triggerRef)}
             class=${headerClass}
             href=${ifDefined(!disabled ? this.href : void 0)}
@@ -392,11 +401,9 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
             aria-current=${ifDefined(isCurrent ? "page" : void 0)}
             tabindex=${disabled ? -1 : 0}
             @click=${(event) => {
-        if (disabled) {
-          return;
-        }
-        this.dispatchEvent(new Event("toggle", event));
-      }}
+				if (disabled) return;
+				this.dispatchEvent(new Event("toggle", event));
+			}}
           >
             ${leftIconSlot}
             <span class="flex-1 min-w-0 pl-1 leading-normal"
@@ -425,7 +432,7 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
               <span class="size-(--dds-icon) flex-none"></span>
             </span>
           </div>`;
-      return html`<div class="w-full" role="listitem">
+			return html`<div class="w-full" role="listitem">
         <div class="relative">${indicator} ${renderSectionHeader}</div>
         <div role="region" class=${cvaContent({ open: true })}>
           <div class="overflow-hidden" role="list">
@@ -433,8 +440,8 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
           </div>
         </div>
       </div>`;
-    }
-    return html`<div class="w-full" role="listitem">
+		}
+		return html`<div class="w-full" role="listitem">
       <div class="relative">
         ${indicator}
         <button
@@ -442,10 +449,10 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
           type="button"
           ${ref(this._triggerRef)}
           class=${cvaHeader({
-      type: "menu",
-      disabled: this.disabled,
-      current
-    })}
+			type: "menu",
+			disabled: this.disabled,
+			current
+		})}
           ?disabled=${this.disabled}
           aria-current=${ifDefined(isCurrent ? "page" : void 0)}
           aria-expanded=${open}
@@ -461,7 +468,10 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
             <span class="size-3 flex-none flex items-center justify-center"
               >${badgeEl}</span
             >
-            <span class=${cvaChevron({ open, disabled: this.disabled })}></span>
+            <span class=${cvaChevron({
+			open,
+			disabled: this.disabled
+		})}></span>
           </span>
         </button>
       </div>
@@ -477,113 +487,78 @@ let DaikinVerticalNavigationItem = class extends DDSElement {
         </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 !== "menu" && 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",
-      "section"
-    ])
-  })
-], 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({
-    reflect: true,
-    converter: {
-      fromAttribute(value) {
-        if (value === null) {
-          return false;
-        }
-        if (value === "" || value === "true") {
-          return true;
-        }
-        if (value === "descendant") {
-          return "descendant";
-        }
-        return false;
-      },
-      toAttribute(value) {
-        if (value === false) {
-          return null;
-        }
-        if (value === true) {
-          return "";
-        }
-        return "descendant";
-      }
-    }
-  })
-], 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
+	}
+	/**
+	* 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) {
+		if (this.disabled || this.type !== "menu" && this.href == null) return;
+		this._triggerRef.value?.focus(options);
+	}
 };
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: "link",
+	isAllowedValue: oneOf([
+		"link",
+		"menu",
+		"section"
+	])
+})], DaikinVerticalNavigationItem.prototype, "type", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DaikinVerticalNavigationItem.prototype, "href", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinVerticalNavigationItem.prototype, "name", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DaikinVerticalNavigationItem.prototype, "open", void 0);
+__decorate([property({
+	reflect: true,
+	converter: {
+		fromAttribute(value) {
+			if (value === null) return false;
+			if (value === "" || value === "true") return true;
+			if (value === "descendant") return "descendant";
+			return false;
+		},
+		toAttribute(value) {
+			if (value === false) return null;
+			if (value === true) return "";
+			return "descendant";
+		}
+	}
+})], DaikinVerticalNavigationItem.prototype, "current", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: "none",
+	isAllowedValue: oneOf([
+		"none",
+		"negative",
+		"alarm",
+		"warning",
+		"positive",
+		"information"
+	])
+})], DaikinVerticalNavigationItem.prototype, "badge", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "badge-message"
+})], DaikinVerticalNavigationItem.prototype, "badgeMessage", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DaikinVerticalNavigationItem.prototype, "disabled", void 0);
+DaikinVerticalNavigationItem = __decorate([ddsElement("daikin-vertical-navigation-item")], DaikinVerticalNavigationItem);
+//#endregion
+export { DaikinVerticalNavigationItem };