@sewadah/selaras 0.1.1

package/dist/runtime/components/NavigationMenu.vue

@@ -0,0 +1,166 @@
+<script setup>
+import {
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  NavigationMenuItem as RekaNavigationMenuItem
+} from "reka-ui";
+import { computed, ref, useSlots } from "vue";
+import { NuxtLink } from "#components";
+import { useRoute } from "#imports";
+import { useIcons } from "../composables/use-icons";
+import { navigationMenuTheme } from "../theme/navigation-menu";
+import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Icon from "./Icon.vue";
+import NavigationMenuAccordionItem from "./NavigationMenuAccordionItem.vue";
+import NavigationMenuFlyoutTrigger from "./NavigationMenuFlyoutTrigger.vue";
+const props = defineProps({
+  items: { type: Array, required: true },
+  orientation: { type: String, required: false, default: "horizontal" },
+  color: { type: null, required: false },
+  variant: { type: String, required: false, default: "pill" },
+  highlight: { type: Boolean, required: false },
+  collapsed: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const route = useRoute();
+const icons = useIcons();
+const slots = useSlots();
+function slotName(item, suffix) {
+  const named = item.slot ? `${item.slot}${suffix}` : void 0;
+  if (named && slots[named])
+    return named;
+  return `item${suffix}`;
+}
+const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
+const ui = computed(() => theme.value({ orientation: props.orientation, color: props.color, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed }));
+const rootProps = computed(() => resolveSlot(ui.value.root, props.ui?.root));
+const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
+function isActive(item) {
+  return isNavigationMenuItemActive(item, route.path);
+}
+function linkProps(item) {
+  return resolveSlot(theme.value({ orientation: props.orientation, color: props.color, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
+}
+function childLinkProps(item) {
+  return resolveSlot(theme.value({ orientation: props.orientation, color: props.color, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).childLink, props.ui?.childLink);
+}
+const openFlyoutLabel = ref(null);
+function onFlyoutOpenChange(item, value) {
+  if (value)
+    openFlyoutLabel.value = item.label;
+  else if (openFlyoutLabel.value === item.label)
+    openFlyoutLabel.value = null;
+}
+function anotherFlyoutOpen(item) {
+  return openFlyoutLabel.value !== null && openFlyoutLabel.value !== item.label;
+}
+function onSelect(item, event) {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+  item.onSelect?.(event);
+}
+</script>
+
+<template>
+  <NavigationMenuRoot :orientation="orientation" v-bind="rootProps">
+    <slot name="list-leading" />
+    <NavigationMenuList v-bind="listProps">
+      <template v-for="item in items" :key="item.label">
+        <li v-if="item.type === 'separator'" role="separator" v-bind="resolveSlot(ui.separator, props.ui?.separator)" />
+        <li v-else-if="item.type === 'label'" v-bind="resolveSlot(ui.groupLabel, props.ui?.groupLabel)">
+          <slot :name="slotName(item, '-label')" :item="item" :active="false">
+            {{ item.label }}
+          </slot>
+        </li>
+        <RekaNavigationMenuItem v-else v-bind="resolveSlot(ui.item, props.ui?.item)">
+          <template v-if="orientation === 'vertical' && item.children?.length && !collapsed">
+            <NavigationMenuAccordionItem :item="item" :color="color" :variant="variant" :highlight="highlight" :ui="props.ui">
+              <template v-for="(_, name) in slots" #[name]="scope">
+                <slot :name="name" v-bind="scope" />
+              </template>
+            </NavigationMenuAccordionItem>
+          </template>
+          <template v-else-if="orientation === 'vertical' && item.children?.length && collapsed">
+            <NavigationMenuFlyoutTrigger
+              :item="item" :color="color" :variant="variant" :highlight="highlight" :on-select="onSelect" :ui="props.ui"
+              :open="openFlyoutLabel === item.label" :another-flyout-open="anotherFlyoutOpen(item)"
+              @update:open="onFlyoutOpenChange(item, $event)"
+            >
+              <template v-for="(_, name) in slots" #[name]="scope">
+                <slot :name="name" v-bind="scope" />
+              </template>
+            </NavigationMenuFlyoutTrigger>
+          </template>
+          <template v-else-if="orientation === 'horizontal' && item.children?.length">
+            <NavigationMenuTrigger :disabled="item.disabled" v-bind="linkProps(item)">
+              <slot :name="slotName(item, '')" :item="item" :active="isActive(item)">
+                <slot :name="slotName(item, '-leading')" :item="item" :active="isActive(item)">
+                  <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
+                </slot>
+                <slot :name="slotName(item, '-label')" :item="item" :active="isActive(item)">
+                  <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
+                </slot>
+                <slot :name="slotName(item, '-trailing')" :item="item" :active="isActive(item)">
+                  <Icon :name="icons.chevronDown" v-bind="resolveSlot(ui.linkTrailingIcon, props.ui?.linkTrailingIcon)" />
+                </slot>
+              </slot>
+            </NavigationMenuTrigger>
+            <NavigationMenuContent v-bind="resolveSlot(ui.content, props.ui?.content)">
+              <slot :name="slotName(item, '-content')" :item="item">
+                <ul v-bind="resolveSlot(ui.childList, props.ui?.childList)">
+                  <li v-for="child in item.children" :key="child.label" v-bind="resolveSlot(ui.childItem, props.ui?.childItem)">
+                    <NavigationMenuLink as-child :active="isActive(child)">
+                      <component
+                        :is="child.to ? NuxtLink : 'button'" :to="child.to" :type="child.to ? void 0 : 'button'"
+                        :disabled="child.to ? void 0 : child.disabled" v-bind="childLinkProps(child)"
+                        :aria-disabled="child.to && child.disabled ? 'true' : void 0" @click="onSelect(child, $event)"
+                      >
+                        <slot :name="slotName(child, '')" :item="child" :active="isActive(child)">
+                          <slot :name="slotName(child, '-leading')" :item="child" :active="isActive(child)">
+                            <Icon v-if="child.icon" :name="child.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
+                          </slot>
+                          <slot :name="slotName(child, '-label')" :item="child" :active="isActive(child)">
+                            <span v-bind="resolveSlot(ui.childLinkLabel, props.ui?.childLinkLabel)">{{ child.label }}</span>
+                          </slot>
+                          <slot :name="slotName(child, '-trailing')" :item="child" :active="isActive(child)" />
+                        </slot>
+                      </component>
+                    </NavigationMenuLink>
+                  </li>
+                </ul>
+              </slot>
+            </NavigationMenuContent>
+          </template>
+          <NavigationMenuLink v-else as-child :active="isActive(item)">
+            <component
+              :is="item.to ? NuxtLink : 'button'" :to="item.to" :type="item.to ? void 0 : 'button'"
+              :disabled="item.to ? void 0 : item.disabled" v-bind="linkProps(item)"
+              :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
+            >
+              <slot :name="slotName(item, '')" :item="item" :active="isActive(item)">
+                <slot :name="slotName(item, '-leading')" :item="item" :active="isActive(item)">
+                  <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
+                  <span v-else-if="collapsed" v-bind="resolveSlot(ui.linkIconFallback, props.ui?.linkIconFallback)" aria-hidden="true">{{ item.label.charAt(0) }}</span>
+                </slot>
+                <slot :name="slotName(item, '-label')" :item="item" :active="isActive(item)">
+                  <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
+                </slot>
+                <slot :name="slotName(item, '-trailing')" :item="item" :active="isActive(item)" />
+              </slot>
+            </component>
+          </NavigationMenuLink>
+        </RekaNavigationMenuItem>
+      </template>
+    </NavigationMenuList>
+    <slot name="list-trailing" />
+
+    <NavigationMenuViewport v-if="orientation === 'horizontal'" v-bind="resolveSlot(ui.viewport, props.ui?.viewport)" />
+  </NavigationMenuRoot>
+</template>

package/dist/runtime/components/NavigationMenu.vue.d.ts

@@ -0,0 +1,108 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { UiProp } from '../utils/ui.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface NavigationMenuProps {
+    items: NavigationMenuItem[];
+    /** Horizontal uses Reka's real shared-viewport flyout for a single level of dropdown children. Vertical falls back to a recursive accordion (see NavigationMenuAccordionItem.vue) for arbitrary depth - Reka's own NavigationMenuContent isn't built for deep nested trees. */
+    orientation?: 'horizontal' | 'vertical';
+    color?: ButtonVariants['color'];
+    variant?: 'pill' | 'link';
+    /** Draws a bar/underline next to the active item, in addition to its own color styling. */
+    highlight?: boolean;
+    /** Icon-only rail mode (vertical only) - labels stay in the DOM for assistive tech (`sr-only`, not removed) but visually collapse to just each item's own leading icon. A parent with children renders as a themed Popover trigger instead of an expandable accordion row - no room for a nested list in an icon rail, so its children surface in a flyout next to the icon instead (the common "collapsed sidebar" pattern - VSCode's activity bar, Linear, Notion). */
+    collapsed?: boolean;
+    ui?: UiProp<NavigationMenuThemeSlots>;
+}
+declare var __VLS_8: {}, __VLS_17: string, __VLS_18: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_34: string, __VLS_35: any, __VLS_47: string, __VLS_48: {
+    item: NavigationMenuItem;
+}, __VLS_57: string, __VLS_58: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_61: string, __VLS_62: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_70: string, __VLS_71: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_74: string, __VLS_75: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_89: string, __VLS_90: {
+    item: NavigationMenuItem;
+}, __VLS_107: string, __VLS_108: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_111: string, __VLS_112: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_120: string, __VLS_121: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_124: string, __VLS_125: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_142: string, __VLS_143: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_146: string, __VLS_147: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_155: string, __VLS_156: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_159: string, __VLS_160: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_162: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
+} & {
+    [K in NonNullable<typeof __VLS_34>]?: (props: typeof __VLS_35) => any;
+} & {
+    [K in NonNullable<typeof __VLS_47>]?: (props: typeof __VLS_48) => any;
+} & {
+    [K in NonNullable<typeof __VLS_57>]?: (props: typeof __VLS_58) => any;
+} & {
+    [K in NonNullable<typeof __VLS_61>]?: (props: typeof __VLS_62) => any;
+} & {
+    [K in NonNullable<typeof __VLS_70>]?: (props: typeof __VLS_71) => any;
+} & {
+    [K in NonNullable<typeof __VLS_74>]?: (props: typeof __VLS_75) => any;
+} & {
+    [K in NonNullable<typeof __VLS_89>]?: (props: typeof __VLS_90) => any;
+} & {
+    [K in NonNullable<typeof __VLS_107>]?: (props: typeof __VLS_108) => any;
+} & {
+    [K in NonNullable<typeof __VLS_111>]?: (props: typeof __VLS_112) => any;
+} & {
+    [K in NonNullable<typeof __VLS_120>]?: (props: typeof __VLS_121) => any;
+} & {
+    [K in NonNullable<typeof __VLS_124>]?: (props: typeof __VLS_125) => any;
+} & {
+    [K in NonNullable<typeof __VLS_142>]?: (props: typeof __VLS_143) => any;
+} & {
+    [K in NonNullable<typeof __VLS_146>]?: (props: typeof __VLS_147) => any;
+} & {
+    [K in NonNullable<typeof __VLS_155>]?: (props: typeof __VLS_156) => any;
+} & {
+    [K in NonNullable<typeof __VLS_159>]?: (props: typeof __VLS_160) => any;
+} & {
+    'list-leading'?: (props: typeof __VLS_8) => any;
+} & {
+    'list-trailing'?: (props: typeof __VLS_162) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NavigationMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/NavigationMenuAccordionItem.d.vue.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { UiProp } from '../utils/ui.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface NavigationMenuAccordionItemProps {
+    item: NavigationMenuItem;
+    color?: ButtonVariants['color'];
+    variant?: 'pill' | 'link';
+    highlight?: boolean;
+    ui?: UiProp<NavigationMenuThemeSlots>;
+}
+type __VLS_Slots = Record<string, (props: any) => any>;
+declare const __VLS_base: import("vue").DefineComponent<NavigationMenuAccordionItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuAccordionItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/NavigationMenuAccordionItem.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed, useId, useSlots } from "vue";
+import { NuxtLink } from "#components";
+import { useRoute } from "#imports";
+import { navigationMenuTheme } from "../theme/navigation-menu";
+import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Accordion from "./Accordion.vue";
+import Icon from "./Icon.vue";
+import NavigationMenuAccordionItem from "./NavigationMenuAccordionItem.vue";
+const props = defineProps({
+  item: { type: Object, required: true },
+  color: { type: null, required: false },
+  variant: { type: String, required: false },
+  highlight: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const route = useRoute();
+const slots = useSlots();
+function slotName(item, suffix) {
+  const named = item.slot ? `${item.slot}${suffix}` : void 0;
+  if (named && slots[named])
+    return named;
+  return `item${suffix}`;
+}
+const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
+const ui = computed(() => theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight }));
+const accordionValue = useId();
+const accordionItems = computed(() => [{ value: accordionValue, label: props.item.label, disabled: props.item.disabled }]);
+const groupUi = computed(() => ({
+  item: "",
+  trigger: `${ui.value.link({ active: false, disabled: props.item.disabled })} w-full justify-between text-start`,
+  label: "inline-flex min-w-0 items-center gap-2",
+  chevron: ui.value.linkTrailingIcon(),
+  content: ui.value.content()
+}));
+function isActive(item) {
+  return isNavigationMenuItemActive(item, route.path);
+}
+function linkProps(child) {
+  return resolveSlot(theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight, active: isActive(child), disabled: child.disabled }).link, props.ui?.link);
+}
+function onSelect(item, event) {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+  item.onSelect?.(event);
+}
+</script>
+
+<template>
+  <Accordion :items="accordionItems" :default-value="[]" :ui="groupUi">
+    <template #label>
+      <slot :name="slotName(item, '')" :item="item" :active="false">
+        <slot :name="slotName(item, '-leading')" :item="item" :active="false">
+          <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
+        </slot>
+        <slot :name="slotName(item, '-label')" :item="item" :active="false">
+          <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
+        </slot>
+      </slot>
+    </template>
+    <template #[accordionValue]>
+      <slot :name="slotName(item, '-content')" :item="item">
+        <ul v-bind="resolveSlot(ui.childList, props.ui?.childList)">
+          <li v-for="child in item.children" :key="child.label" v-bind="resolveSlot(ui.childItem, props.ui?.childItem)">
+            <NavigationMenuAccordionItem
+              v-if="child.children?.length"
+              :item="child"
+              :color="color"
+              :variant="variant"
+              :highlight="highlight"
+              :ui="props.ui"
+            >
+              <template v-for="(_, name) in slots" #[name]="scope">
+                <slot :name="name" v-bind="scope" />
+              </template>
+            </NavigationMenuAccordionItem>
+            <component
+              :is="child.to ? NuxtLink : 'button'"
+              v-else
+              :to="child.to"
+              :type="child.to ? void 0 : 'button'"
+              :disabled="child.to ? void 0 : child.disabled"
+              v-bind="linkProps(child)"
+              :aria-disabled="child.to && child.disabled ? 'true' : void 0"
+              @click="onSelect(child, $event)"
+            >
+              <slot :name="slotName(child, '')" :item="child" :active="isActive(child)">
+                <slot :name="slotName(child, '-leading')" :item="child" :active="isActive(child)">
+                  <Icon v-if="child.icon" :name="child.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
+                </slot>
+                <slot :name="slotName(child, '-label')" :item="child" :active="isActive(child)">
+                  <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ child.label }}</span>
+                </slot>
+                <slot :name="slotName(child, '-trailing')" :item="child" :active="isActive(child)" />
+              </slot>
+            </component>
+          </li>
+        </ul>
+      </slot>
+    </template>
+  </Accordion>
+</template>

package/dist/runtime/components/NavigationMenuAccordionItem.vue.d.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { UiProp } from '../utils/ui.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface NavigationMenuAccordionItemProps {
+    item: NavigationMenuItem;
+    color?: ButtonVariants['color'];
+    variant?: 'pill' | 'link';
+    highlight?: boolean;
+    ui?: UiProp<NavigationMenuThemeSlots>;
+}
+type __VLS_Slots = Record<string, (props: any) => any>;
+declare const __VLS_base: import("vue").DefineComponent<NavigationMenuAccordionItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuAccordionItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/NavigationMenuFlyoutList.d.vue.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { UiProp } from '../utils/ui.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface NavigationMenuFlyoutListProps {
+    items: NavigationMenuItem[];
+    color?: ButtonVariants['color'];
+    variant?: 'pill' | 'link';
+    highlight?: boolean;
+    onSelect: (item: NavigationMenuItem, event: Event) => void;
+    /** Set only from NavigationMenuFlyoutTrigger.vue, on this list's one top-level call - strips this list's own guide-line/indent, since (unlike every nesting level below it) it has no visible parent row inside the popover to connect to; the real "parent" is the icon trigger sitting outside the popover entirely. A group's own nested AccordionItem below keeps the normal indent/line treatment against its own real heading row untouched. */
+    root?: boolean;
+    ui?: UiProp<NavigationMenuThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<NavigationMenuFlyoutListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuFlyoutListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NavigationMenuFlyoutList.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from "vue";
+import { NuxtLink } from "#components";
+import { useRoute } from "#imports";
+import { navigationMenuTheme } from "../theme/navigation-menu";
+import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Icon from "./Icon.vue";
+import NavigationMenuAccordionItem from "./NavigationMenuAccordionItem.vue";
+const props = defineProps({
+  items: { type: Array, required: true },
+  color: { type: null, required: false },
+  variant: { type: String, required: false },
+  highlight: { type: Boolean, required: false },
+  onSelect: { type: Function, required: true },
+  root: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const route = useRoute();
+function isActive(item) {
+  return isNavigationMenuItemActive(item, route.path);
+}
+const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
+const ui = computed(() => theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight, collapsed: false, flyoutRoot: props.root }));
+function linkProps(item) {
+  return resolveSlot(theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight, collapsed: false, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
+}
+</script>
+
+<template>
+  <ul v-bind="resolveSlot(ui.childList, props.ui?.childList)">
+    <li v-for="item in items" :key="item.label" v-bind="resolveSlot(ui.childItem, props.ui?.childItem)">
+      <NavigationMenuAccordionItem v-if="item.children?.length" :item="item" :color="color" :variant="variant" :highlight="highlight" :ui="props.ui" />
+      <component
+        :is="item.to ? NuxtLink : 'button'" v-else :to="item.to" :type="item.to ? void 0 : 'button'"
+        :disabled="item.to ? void 0 : item.disabled" v-bind="linkProps(item)"
+        :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
+      >
+        <Icon v-if="item.icon" :name="item.icon" v-bind="resolveSlot(ui.linkIcon, props.ui?.linkIcon)" />
+        <span v-bind="resolveSlot(ui.linkLabel, props.ui?.linkLabel)">{{ item.label }}</span>
+      </component>
+    </li>
+  </ul>
+</template>

package/dist/runtime/components/NavigationMenuFlyoutList.vue.d.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { UiProp } from '../utils/ui.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface NavigationMenuFlyoutListProps {
+    items: NavigationMenuItem[];
+    color?: ButtonVariants['color'];
+    variant?: 'pill' | 'link';
+    highlight?: boolean;
+    onSelect: (item: NavigationMenuItem, event: Event) => void;
+    /** Set only from NavigationMenuFlyoutTrigger.vue, on this list's one top-level call - strips this list's own guide-line/indent, since (unlike every nesting level below it) it has no visible parent row inside the popover to connect to; the real "parent" is the icon trigger sitting outside the popover entirely. A group's own nested AccordionItem below keeps the normal indent/line treatment against its own real heading row untouched. */
+    root?: boolean;
+    ui?: UiProp<NavigationMenuThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<NavigationMenuFlyoutListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NavigationMenuFlyoutListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NavigationMenuFlyoutTrigger.d.vue.ts

@@ -0,0 +1,49 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { NavigationMenuItem } from '../utils/navigation-menu.js';
+import type { UiProp } from '../utils/ui.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface NavigationMenuFlyoutTriggerProps {
+    item: NavigationMenuItem;
+    color?: ButtonVariants['color'];
+    variant?: 'pill' | 'link';
+    highlight?: boolean;
+    open: boolean;
+    /** Whether a *different* sibling trigger currently holds the flyout - see the note above on why `return-focus-on-close` needs this rather than a flat `false`. */
+    anotherFlyoutOpen?: boolean;
+    onSelect: (item: NavigationMenuItem, event: Event) => void;
+    ui?: UiProp<NavigationMenuThemeSlots>;
+}
+export interface NavigationMenuFlyoutTriggerEmits {
+    'update:open': [value: boolean];
+}
+declare var __VLS_12: string, __VLS_13: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_21: string, __VLS_22: {
+    item: NavigationMenuItem;
+    active: boolean;
+}, __VLS_26: string, __VLS_27: {
+    item: NavigationMenuItem;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_12>]?: (props: typeof __VLS_13) => any;
+} & {
+    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
+} & {
+    [K in NonNullable<typeof __VLS_26>]?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NavigationMenuFlyoutTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NavigationMenuFlyoutTriggerProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};