@sewadah/selaras 0.1.1

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

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { KbdThemeSlots } from '../theme/kbd.js';
+import type { UiProp } from '../utils/ui.js';
+import { kbdTheme } from '../theme/kbd.js';
+type KbdVariants = VariantProps<typeof kbdTheme>;
+export interface KbdProps {
+    /** A key name resolved via a small built-in symbol map (`meta` -> ⌘, `up` -> ↑, ...) - falls back to the raw string itself when there's no match. Omit in favor of the default slot for anything more custom. */
+    value?: string;
+    size?: KbdVariants['size'];
+    ui?: UiProp<KbdThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & 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/Modal.d.vue.ts

@@ -0,0 +1,72 @@
+import type { ModalThemeSlots } from '../theme/modal.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ModalProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** Full-viewport layout instead of the default centered card. Still the initial state when `maximizable` is set - the toggle button takes over from there, optionally controllable via `v-model:fullscreen`. */
+    fullscreen?: boolean;
+    /** Shows a header button that toggles `fullscreen` at runtime, matching a comparable reference's own dialog maximize toggle - distinct from `fullscreen` alone, which only sets the initial/fixed layout with no way for the user to change it. */
+    maximizable?: boolean;
+    /** When `false`, Escape and an outside click (or, for a non-modal dialog, an outside element merely receiving focus) no longer close the dialog - the `escapeKeyDown`/`pointerDownOutside`/`focusOutside` events still fire, so a consumer can still react (e.g. a shake animation), but none of them close it on their own anymore. */
+    dismissible?: boolean;
+    /** Set `false` to render no close button at all - usually paired with `dismissible={false}` for a dialog that only closes via an explicit footer action. */
+    close?: boolean;
+    /** Forwarded to Reka UI's own DialogRoot `modal` prop - set `false` for a non-modal dialog that doesn't block interaction with the rest of the page (no focus trap, outside elements stay reachable). `overlay` below is independent of this - a non-modal dialog can still show a backdrop, and a modal one can hide it. */
+    modal?: boolean;
+    /** Set `false` to render no backdrop behind the dialog at all. */
+    overlay?: boolean;
+    /** Set `false` to skip the open/close animation entirely - this library's animation is CSS-only, so this just omits those classes rather than toggling a JS transition system. */
+    transition?: boolean;
+    /** When `false`, opening the dialog never moves keyboard focus into it - for a trigger that's meant to stay focused and interactive the whole time the dialog is open (e.g. a search input whose own typing keeps filtering the dialog's contents), rather than a one-off tap/click that hands off to the dialog's own content. Defaults to `true`, matching Reka's own out-of-the-box behavior. */
+    autoFocus?: boolean;
+    ui?: UiProp<ModalThemeSlots>;
+}
+export interface ModalEmits {
+    'update:open': [value: boolean];
+    'update:fullscreen': [value: boolean];
+    'escapeKeyDown': [event: KeyboardEvent];
+    'pointerDownOutside': [event: Event];
+    'focusOutside': [event: Event];
+    /** Fires once the close transition has actually finished (or immediately, if `transition` is off) - the signal a programmatic caller needs before it's safe to unmount this instance without cutting its exit animation short. */
+    'afterLeave': [];
+}
+declare var __VLS_16: {}, __VLS_65: {}, __VLS_67: {}, __VLS_91: "minimize-icon" | "maximize-icon", __VLS_92: {}, __VLS_112: {}, __VLS_119: {}, __VLS_121: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_91>]?: (props: typeof __VLS_92) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    content?: (props: typeof __VLS_65) => any;
+} & {
+    header?: (props: typeof __VLS_67) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_112) => any;
+} & {
+    body?: (props: typeof __VLS_119) => any;
+} & {
+    footer?: (props: typeof __VLS_121) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: Event) => any;
+    afterLeave: () => any;
+    focusOutside: (event: Event) => any;
+    "update:fullscreen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: Event) => any) | undefined;
+    onAfterLeave?: (() => any) | undefined;
+    onFocusOutside?: ((event: Event) => any) | undefined;
+    "onUpdate:fullscreen"?: ((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;
+    };
+};

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,178 @@
+<script setup>
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, VisuallyHidden } from "reka-ui";
+import { computed, ref, useSlots, watch, watchEffect } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { modalTheme } from "../theme/modal";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  fullscreen: { type: Boolean, required: false },
+  maximizable: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  close: { type: Boolean, required: false, default: true },
+  modal: { type: Boolean, required: false, default: true },
+  overlay: { type: Boolean, required: false, default: true },
+  transition: { type: Boolean, required: false, default: true },
+  autoFocus: { type: Boolean, required: false, default: true },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:open", "update:fullscreen", "escapeKeyDown", "pointerDownOutside", "focusOutside", "afterLeave"]);
+function onEscapeKeyDown(event) {
+  if (!props.dismissible)
+    event.preventDefault();
+  emit("escapeKeyDown", event);
+}
+function onPointerDownOutside(event) {
+  if (!props.dismissible)
+    event.preventDefault();
+  emit("pointerDownOutside", event);
+}
+function onFocusOutside(event) {
+  if (!props.dismissible)
+    event.preventDefault();
+  emit("focusOutside", event);
+}
+function onOpenAutoFocus(event) {
+  if (!props.autoFocus)
+    event.preventDefault();
+}
+function onContentAnimationEnd(event) {
+  if (event.target !== event.currentTarget)
+    return;
+  if (event.target.getAttribute("data-state") === "closed")
+    emit("afterLeave");
+}
+const internalOpen = ref(props.open ?? false);
+watch(() => props.open, (value) => {
+  if (value !== void 0)
+    internalOpen.value = value;
+});
+function onUpdateOpen(value) {
+  internalOpen.value = value;
+  emit("update:open", value);
+}
+watch(internalOpen, (value) => {
+  if (!value && !props.transition)
+    emit("afterLeave");
+});
+const internalFullscreen = ref(props.fullscreen ?? false);
+watch(() => props.fullscreen, (value) => {
+  if (value !== void 0)
+    internalFullscreen.value = value;
+});
+function toggleFullscreen() {
+  internalFullscreen.value = !internalFullscreen.value;
+  emit("update:fullscreen", internalFullscreen.value);
+}
+const slots = useSlots();
+if (import.meta.dev) {
+  watchEffect(() => {
+    if (!props.title && !slots.header && !slots.content)
+      console.warn("[SModal] no accessible name - pass a `title` prop, or a `header`/`content` slot containing a heading, so screen readers can announce this dialog.");
+  });
+}
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("modal", modalTheme);
+const ui = computed(() => theme.value({ fullscreen: internalFullscreen.value, transition: props.transition }));
+const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const headerActionsProps = computed(() => resolveSlot(ui.value.headerActions, props.ui?.headerActions));
+const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const closeProps = computed(() => resolveSlot(ui.value.close, props.ui?.close));
+const maximizeProps = computed(() => resolveSlot(ui.value.maximize, props.ui?.maximize));
+const bodyProps = computed(() => resolveSlot(ui.value.body, props.ui?.body));
+const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
+</script>
+
+<template>
+  <DialogRoot :open="internalOpen" :modal="modal" @update:open="onUpdateOpen">
+    <DialogTrigger v-if="$slots.default" as-child>
+      <slot />
+    </DialogTrigger>
+    <DialogPortal>
+      <DialogOverlay v-if="overlay" v-bind="overlayProps" />
+      <DialogContent
+        v-bind="contentProps"
+        @escape-key-down="onEscapeKeyDown"
+        @pointer-down-outside="onPointerDownOutside"
+        @focus-outside="onFocusOutside"
+        @animationend="onContentAnimationEnd"
+        @open-auto-focus="onOpenAutoFocus"
+      >
+        <template v-if="$slots.content">
+          <!-- The content slot replaces our own header entirely, so a
+          consumer's `title`/`description` would otherwise go nowhere -
+          keep registering them with Reka (satisfies its own a11y
+          warning and gives screen readers a name/description) without
+          showing a second, visible title the consumer's own content
+          didn't ask for. -->
+          <VisuallyHidden v-if="title" as-child>
+            <DialogTitle v-bind="titleProps">
+              {{ title }}
+            </DialogTitle>
+          </VisuallyHidden>
+          <VisuallyHidden v-if="description" as-child>
+            <DialogDescription v-bind="descriptionProps">
+              {{ description }}
+            </DialogDescription>
+          </VisuallyHidden>
+          <slot name="content" />
+        </template>
+        <template v-else>
+          <div v-if="title || description || $slots.header || close || maximizable" v-bind="headerProps">
+            <div>
+              <slot name="header">
+                <DialogTitle v-if="title" v-bind="titleProps">
+                  {{ title }}
+                </DialogTitle>
+                <DialogDescription v-if="description" v-bind="descriptionProps">
+                  {{ description }}
+                </DialogDescription>
+              </slot>
+            </div>
+            <div v-bind="headerActionsProps">
+              <Button
+                v-if="maximizable"
+                size="sm"
+                variant="ghost"
+                color="neutral"
+                :aria-label="internalFullscreen ? messages.minimize : messages.maximize"
+                v-bind="maximizeProps"
+                @click="toggleFullscreen"
+              >
+                <template #icon="{ class: iconClass }">
+                  <slot :name="internalFullscreen ? 'minimize-icon' : 'maximize-icon'">
+                    <Icon :name="internalFullscreen ? icons.minimize : icons.maximize" :class="iconClass" />
+                  </slot>
+                </template>
+              </Button>
+              <DialogClose v-if="close" as-child>
+                <Button size="sm" variant="ghost" color="neutral" :aria-label="messages.close" v-bind="closeProps">
+                  <template #icon="{ class: iconClass }">
+                    <slot name="close-icon">
+                      <Icon :name="icons.close" :class="iconClass" />
+                    </slot>
+                  </template>
+                </Button>
+              </DialogClose>
+            </div>
+          </div>
+          <div v-bind="bodyProps">
+            <slot name="body" />
+          </div>
+          <div v-if="$slots.footer" v-bind="footerProps">
+            <slot name="footer" />
+          </div>
+        </template>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,72 @@
+import type { ModalThemeSlots } from '../theme/modal.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ModalProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** Full-viewport layout instead of the default centered card. Still the initial state when `maximizable` is set - the toggle button takes over from there, optionally controllable via `v-model:fullscreen`. */
+    fullscreen?: boolean;
+    /** Shows a header button that toggles `fullscreen` at runtime, matching a comparable reference's own dialog maximize toggle - distinct from `fullscreen` alone, which only sets the initial/fixed layout with no way for the user to change it. */
+    maximizable?: boolean;
+    /** When `false`, Escape and an outside click (or, for a non-modal dialog, an outside element merely receiving focus) no longer close the dialog - the `escapeKeyDown`/`pointerDownOutside`/`focusOutside` events still fire, so a consumer can still react (e.g. a shake animation), but none of them close it on their own anymore. */
+    dismissible?: boolean;
+    /** Set `false` to render no close button at all - usually paired with `dismissible={false}` for a dialog that only closes via an explicit footer action. */
+    close?: boolean;
+    /** Forwarded to Reka UI's own DialogRoot `modal` prop - set `false` for a non-modal dialog that doesn't block interaction with the rest of the page (no focus trap, outside elements stay reachable). `overlay` below is independent of this - a non-modal dialog can still show a backdrop, and a modal one can hide it. */
+    modal?: boolean;
+    /** Set `false` to render no backdrop behind the dialog at all. */
+    overlay?: boolean;
+    /** Set `false` to skip the open/close animation entirely - this library's animation is CSS-only, so this just omits those classes rather than toggling a JS transition system. */
+    transition?: boolean;
+    /** When `false`, opening the dialog never moves keyboard focus into it - for a trigger that's meant to stay focused and interactive the whole time the dialog is open (e.g. a search input whose own typing keeps filtering the dialog's contents), rather than a one-off tap/click that hands off to the dialog's own content. Defaults to `true`, matching Reka's own out-of-the-box behavior. */
+    autoFocus?: boolean;
+    ui?: UiProp<ModalThemeSlots>;
+}
+export interface ModalEmits {
+    'update:open': [value: boolean];
+    'update:fullscreen': [value: boolean];
+    'escapeKeyDown': [event: KeyboardEvent];
+    'pointerDownOutside': [event: Event];
+    'focusOutside': [event: Event];
+    /** Fires once the close transition has actually finished (or immediately, if `transition` is off) - the signal a programmatic caller needs before it's safe to unmount this instance without cutting its exit animation short. */
+    'afterLeave': [];
+}
+declare var __VLS_16: {}, __VLS_65: {}, __VLS_67: {}, __VLS_91: "minimize-icon" | "maximize-icon", __VLS_92: {}, __VLS_112: {}, __VLS_119: {}, __VLS_121: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_91>]?: (props: typeof __VLS_92) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    content?: (props: typeof __VLS_65) => any;
+} & {
+    header?: (props: typeof __VLS_67) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_112) => any;
+} & {
+    body?: (props: typeof __VLS_119) => any;
+} & {
+    footer?: (props: typeof __VLS_121) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: Event) => any;
+    afterLeave: () => any;
+    focusOutside: (event: Event) => any;
+    "update:fullscreen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: Event) => any) | undefined;
+    onAfterLeave?: (() => any) | undefined;
+    onFocusOutside?: ((event: Event) => any) | undefined;
+    "onUpdate:fullscreen"?: ((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;
+    };
+};

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ModalRenderer.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useModal } from "../composables/use-modal";
+import Modal from "./Modal.vue";
+const { modals, close, remove } = useModal();
+</script>
+
+<template>
+  <Modal
+    v-for="instance in modals"
+    :key="instance.id"
+    :open="instance.isOpen"
+    :title="instance.title"
+    :description="instance.description"
+    :dismissible="instance.dismissible"
+    :modal="instance.modal"
+    :overlay="instance.overlay"
+    :transition="instance.transition"
+    @update:open="(open) => !open && close(instance.id)"
+    @after-leave="remove(instance.id)"
+  >
+    <template #content>
+      <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
+    </template>
+  </Modal>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NavigationMenu.d.vue.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;
+    };
+};