@sewadah/selaras 0.1.1

package/dist/runtime/components/Column.js

@@ -0,0 +1,34 @@
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "SColumn",
+  props: {
+    field: {
+      type: String,
+      required: true
+    },
+    header: {
+      type: String,
+      default: void 0
+    },
+    footer: {
+      type: String,
+      default: void 0
+    },
+    sortable: {
+      type: Boolean,
+      default: true
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    /** Sticks this column to the left/right edge during horizontal scroll. */
+    pinned: {
+      type: String,
+      default: void 0
+    }
+  },
+  render() {
+    return null;
+  }
+});

package/dist/runtime/components/ColumnGroup.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Never renders real DOM - see Column.ts. Always maps to a TanStack
+ * "group" column def ({ header, columns: [...] }); SColumn always maps to
+ * a leaf def. Two components mirror TanStack's own ColumnDef union directly,
+ * rather than one component guessing its role from slot content.
+ *
+ * `default` holds the group's child `<SColumn>`/`<SColumnGroup>` tags;
+ * `header`/`footer` (scoped with `{ column }`) customize the group's own
+ * header/footer cell, falling back to the plain string props when unset.
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    header: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    footer: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    header: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    footer: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    header: string;
+    footer: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/ColumnGroup.js

@@ -0,0 +1,17 @@
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "SColumnGroup",
+  props: {
+    header: {
+      type: String,
+      default: void 0
+    },
+    footer: {
+      type: String,
+      default: void 0
+    }
+  },
+  render() {
+    return null;
+  }
+});

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

@@ -0,0 +1,41 @@
+import type { CommandPaletteThemeSlots } from '../theme/command-palette.js';
+import type { UiProp } from '../utils/ui.js';
+export interface CommandPaletteItem {
+    label: string;
+    icon?: string;
+    /** Rendered via Kbd - a display hint only, this component doesn't bind the key itself. */
+    shortcut?: string;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface CommandPaletteGroup {
+    label?: string;
+    items: CommandPaletteItem[];
+}
+export interface CommandPaletteProps {
+    groups: CommandPaletteGroup[];
+    /**
+     * Controls this instance locally instead of the shared `useCommandPalette()`
+     * singleton - pass this (with `v-model:open`) for a self-contained
+     * instance that doesn't affect (or get affected by) any other
+     * `SCommandPalette` mounted elsewhere in the app, e.g. a second, scoped
+     * palette. Omit it (the default) to stay wired to the one shared
+     * instance, matching `useModal()`/`useSlideover()`'s own pattern - the
+     * right choice for the single app-wide palette this component is meant
+     * for.
+     */
+    open?: boolean;
+    /** Binds Cmd/Ctrl+K to open this instance. @default true */
+    shortcut?: boolean;
+    ui?: UiProp<CommandPaletteThemeSlots>;
+}
+export interface CommandPaletteEmits {
+    'update:open': [value: boolean];
+}
+declare const __VLS_export: import("vue").DefineComponent<CommandPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CommandPaletteProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/CommandPalette.vue

@@ -0,0 +1,208 @@
+<script setup>
+import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "reka-ui";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useCommandPalette } from "../composables/use-command-palette";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { commandPaletteTheme } from "../theme/command-palette";
+import { fuzzyScore } from "../utils/fuzzy-match";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+import Kbd from "./Kbd.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  groups: { type: Array, required: true },
+  open: { type: Boolean, required: false, default: void 0 },
+  shortcut: { type: Boolean, required: false, default: true },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:open"]);
+const shared = useCommandPalette();
+const isControlled = computed(() => props.open !== void 0);
+const internalOpen = ref(props.open ?? false);
+watch(() => props.open, (value) => {
+  if (value !== void 0)
+    internalOpen.value = value;
+});
+const isOpen = computed(() => isControlled.value ? internalOpen.value : shared.isOpen.value);
+function close() {
+  if (isControlled.value) {
+    internalOpen.value = false;
+    emit("update:open", false);
+  } else {
+    shared.close();
+  }
+}
+function toggle() {
+  if (isControlled.value) {
+    internalOpen.value = !internalOpen.value;
+    emit("update:open", internalOpen.value);
+  } else {
+    shared.toggle();
+  }
+}
+const icons = useIcons();
+const messages = useMessages();
+const query = ref("");
+const highlightedIndex = ref(0);
+const inputRef = ref();
+watch(isOpen, (open) => {
+  if (!open) {
+    query.value = "";
+    highlightedIndex.value = 0;
+  }
+});
+function onOpenAutoFocus(event) {
+  event.preventDefault();
+  inputRef.value?.focus();
+}
+const filteredGroups = computed(() => {
+  return props.groups.map((group) => ({
+    label: group.label,
+    items: group.items.map((item) => ({ item, score: fuzzyScore(query.value, item.label) })).filter((entry) => entry.score !== null).sort((a, b) => query.value ? b.score - a.score : 0).map((entry) => entry.item)
+  })).filter((group) => group.items.length > 0);
+});
+const allItems = computed(() => filteredGroups.value.flatMap((group) => group.items));
+const flatItems = computed(() => allItems.value.filter((item) => !item.disabled));
+watch(flatItems, () => {
+  highlightedIndex.value = 0;
+});
+const highlightedItemId = computed(() => {
+  const item = flatItems.value[highlightedIndex.value];
+  return item ? itemId(allItems.value.indexOf(item)) : void 0;
+});
+function isHighlighted(item) {
+  return flatItems.value[highlightedIndex.value] === item;
+}
+function highlight(item) {
+  if (item.disabled)
+    return;
+  const index = flatItems.value.indexOf(item);
+  if (index !== -1)
+    highlightedIndex.value = index;
+}
+function selectHighlighted() {
+  const item = flatItems.value[highlightedIndex.value];
+  if (!item)
+    return;
+  item.onSelect?.();
+  close();
+}
+function selectItem(item) {
+  if (item.disabled)
+    return;
+  item.onSelect?.();
+  close();
+}
+function onInputKeydown(event) {
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    if (flatItems.value.length)
+      highlightedIndex.value = (highlightedIndex.value + 1) % flatItems.value.length;
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    if (flatItems.value.length)
+      highlightedIndex.value = (highlightedIndex.value - 1 + flatItems.value.length) % flatItems.value.length;
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    selectHighlighted();
+  }
+}
+function onGlobalKeydown(event) {
+  if (!props.shortcut)
+    return;
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+    event.preventDefault();
+    toggle();
+  }
+}
+onMounted(() => window.addEventListener("keydown", onGlobalKeydown));
+onUnmounted(() => window.removeEventListener("keydown", onGlobalKeydown));
+const theme = useComponentTheme("commandPalette", commandPaletteTheme);
+const ui = computed(() => theme.value());
+const overlayProps = useRootProps(() => 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 searchIconProps = computed(() => resolveSlot(ui.value.searchIcon, props.ui?.searchIcon));
+const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
+const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
+const groupProps = computed(() => resolveSlot(ui.value.group, props.ui?.group));
+const groupLabelProps = computed(() => resolveSlot(ui.value.groupLabel, props.ui?.groupLabel));
+const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
+const itemIconProps = computed(() => resolveSlot(ui.value.itemIcon, props.ui?.itemIcon));
+const itemLabelProps = computed(() => resolveSlot(ui.value.itemLabel, props.ui?.itemLabel));
+const itemShortcutProps = computed(() => resolveSlot(ui.value.itemShortcut, props.ui?.itemShortcut));
+const emptyProps = computed(() => resolveSlot(ui.value.empty, props.ui?.empty));
+const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
+const footerKeyProps = computed(() => resolveSlot(ui.value.footerKey, props.ui?.footerKey));
+function itemId(index) {
+  return `command-palette-item-${index}`;
+}
+</script>
+
+<template>
+  <DialogRoot :open="isOpen" @update:open="(value) => value ? void 0 : close()">
+    <DialogPortal>
+      <DialogOverlay v-bind="overlayProps" />
+      <DialogContent v-bind="contentProps" @open-auto-focus="onOpenAutoFocus">
+        <DialogTitle :class="applyClassPrefix('sr-only')">
+          {{ messages.commandPalette }}
+        </DialogTitle>
+        <DialogDescription :class="applyClassPrefix('sr-only')">
+          {{ messages.commandPaletteDescription }}
+        </DialogDescription>
+        <div v-bind="headerProps">
+          <Icon :name="icons.search" v-bind="searchIconProps" />
+          <input
+            ref="inputRef"
+            v-model="query"
+            type="text"
+            role="combobox"
+            aria-expanded="true"
+            aria-controls="command-palette-list"
+            :aria-activedescendant="highlightedItemId"
+            :placeholder="messages.search"
+            v-bind="inputProps"
+            @keydown="onInputKeydown"
+          >
+        </div>
+        <div id="command-palette-list" v-bind="listProps" role="listbox">
+          <template v-if="filteredGroups.length">
+            <div v-for="(group, groupIndex) in filteredGroups" :key="group.label ?? groupIndex" v-bind="groupProps">
+              <p v-if="group.label" v-bind="groupLabelProps">
+                {{ group.label }}
+              </p>
+              <div
+                v-for="item in group.items"
+                :id="itemId(allItems.indexOf(item))"
+                :key="item.label"
+                role="option"
+                :aria-selected="isHighlighted(item)"
+                :aria-disabled="item.disabled"
+                :data-highlighted="isHighlighted(item) ? '' : void 0"
+                :data-disabled="item.disabled ? '' : void 0"
+                v-bind="itemProps"
+                @mousemove="highlight(item)"
+                @click="selectItem(item)"
+              >
+                <Icon v-if="item.icon" :name="item.icon" v-bind="itemIconProps" />
+                <span v-bind="itemLabelProps">{{ item.label }}</span>
+                <span v-if="item.shortcut" v-bind="itemShortcutProps">
+                  <Kbd v-for="key in item.shortcut.split('+')" :key="key" :value="key" size="sm" />
+                </span>
+              </div>
+            </div>
+          </template>
+          <p v-else v-bind="emptyProps">
+            {{ messages.noResultsFound }}
+          </p>
+        </div>
+        <div v-bind="footerProps">
+          <span v-bind="footerKeyProps"><Kbd value="up" size="sm" /><Kbd value="down" size="sm" /> {{ messages.navigate }}</span>
+          <span v-bind="footerKeyProps"><Kbd value="enter" size="sm" /> {{ messages.select }}</span>
+          <span v-bind="footerKeyProps"><Kbd value="escape" size="sm" /> {{ messages.close }}</span>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,41 @@
+import type { CommandPaletteThemeSlots } from '../theme/command-palette.js';
+import type { UiProp } from '../utils/ui.js';
+export interface CommandPaletteItem {
+    label: string;
+    icon?: string;
+    /** Rendered via Kbd - a display hint only, this component doesn't bind the key itself. */
+    shortcut?: string;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface CommandPaletteGroup {
+    label?: string;
+    items: CommandPaletteItem[];
+}
+export interface CommandPaletteProps {
+    groups: CommandPaletteGroup[];
+    /**
+     * Controls this instance locally instead of the shared `useCommandPalette()`
+     * singleton - pass this (with `v-model:open`) for a self-contained
+     * instance that doesn't affect (or get affected by) any other
+     * `SCommandPalette` mounted elsewhere in the app, e.g. a second, scoped
+     * palette. Omit it (the default) to stay wired to the one shared
+     * instance, matching `useModal()`/`useSlideover()`'s own pattern - the
+     * right choice for the single app-wide palette this component is meant
+     * for.
+     */
+    open?: boolean;
+    /** Binds Cmd/Ctrl+K to open this instance. @default true */
+    shortcut?: boolean;
+    ui?: UiProp<CommandPaletteThemeSlots>;
+}
+export interface CommandPaletteEmits {
+    'update:open': [value: boolean];
+}
+declare const __VLS_export: import("vue").DefineComponent<CommandPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CommandPaletteProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ContainerThemeSlots } from '../theme/container.js';
+import type { UiProp } from '../utils/ui.js';
+import { containerTheme } from '../theme/container.js';
+type ContainerVariants = VariantProps<typeof containerTheme>;
+export interface ContainerProps {
+    size?: ContainerVariants['size'];
+    ui?: UiProp<ContainerThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & 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/Container.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from "vue";
+import { containerTheme } from "../theme/container";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  size: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("container", containerTheme);
+const ui = computed(() => theme.value({
+  size: props.size
+}));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { ContainerThemeSlots } from '../theme/container.js';
+import type { UiProp } from '../utils/ui.js';
+import { containerTheme } from '../theme/container.js';
+type ContainerVariants = VariantProps<typeof containerTheme>;
+export interface ContainerProps {
+    size?: ContainerVariants['size'];
+    ui?: UiProp<ContainerThemeSlots>;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & 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/ContentNavigation.d.vue.ts

@@ -0,0 +1,31 @@
+import type { ContentNavigationThemeSlots } from '../theme/content-navigation.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ContentNavigationLink {
+    title: string;
+    path: string;
+    icon?: string;
+    children?: ContentNavigationLink[];
+}
+type __VLS_Slots = ContentNavigationSlots;
+export interface ContentNavigationProps {
+    navigation: ContentNavigationLink[];
+    /** Set only by this component's own recursive self-call, one level down for each nested group - gates the tree-connector rail (see `content-navigation.ts`'s own `isNested` variant), since a root-level entry has no parent trunk to its left to branch off of. */
+    isNested?: boolean;
+    ui?: UiProp<ContentNavigationThemeSlots>;
+}
+export interface ContentNavigationSlots {
+    /** Replaces a link's (or a group header's) title content - `active` is always false for a group header, since that only ever describes a leaf link's own exact path. */
+    link?: (props: {
+        link: ContentNavigationLink;
+        active: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ContentNavigationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentNavigationProps> & 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/ContentNavigation.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from "vue";
+import { useRoute } from "#imports";
+import { contentNavigationTheme } from "../theme/content-navigation";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Accordion from "./Accordion.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  navigation: { type: Array, required: true },
+  isNested: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const route = useRoute();
+function isActive(link) {
+  return route.path === link.path;
+}
+const theme = useComponentTheme("contentNavigation", contentNavigationTheme);
+const ui = computed(() => theme.value({ isNested: props.isNested }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const groupUi = computed(() => ({
+  item: "",
+  trigger: ui.value.trigger(),
+  label: "inline-flex items-center gap-2",
+  chevron: ui.value.chevron(),
+  content: ui.value.content()
+}));
+</script>
+
+<template>
+  <ul v-bind="rootProps">
+    <li v-for="link in navigation" :key="link.path" v-bind="resolveSlot(ui.item, props.ui?.item)">
+      <Accordion
+        v-if="link.children?.length"
+        :items="[{ value: link.path, label: link.title }]"
+        :default-value="[link.path]"
+        :ui="groupUi"
+      >
+        <template #label>
+          <slot name="link" :link="link" :active="false">
+            <Icon v-if="link.icon" :name="link.icon" v-bind="resolveSlot(ui.icon, props.ui?.icon)" />
+            {{ link.title }}
+          </slot>
+        </template>
+        <template #[link.path]>
+          <!-- Vue's SFC self-recursion resolves by this file's own bare name -
+               keep it unprefixed even though the public component is SContentNavigation. -->
+          <ContentNavigation :navigation="link.children" is-nested :ui="props.ui">
+            <template #link="scope">
+              <slot name="link" v-bind="scope" />
+            </template>
+          </ContentNavigation>
+        </template>
+      </Accordion>
+      <NuxtLink v-else :to="link.path" v-bind="resolveSlot(isActive(link) ? ui.linkActive : ui.link, props.ui?.link)">
+        <slot name="link" :link="link" :active="isActive(link)">
+          <Icon v-if="link.icon" :name="link.icon" v-bind="resolveSlot(ui.icon, props.ui?.icon)" />
+          {{ link.title }}
+        </slot>
+      </NuxtLink>
+    </li>
+  </ul>
+</template>

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

@@ -0,0 +1,31 @@
+import type { ContentNavigationThemeSlots } from '../theme/content-navigation.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ContentNavigationLink {
+    title: string;
+    path: string;
+    icon?: string;
+    children?: ContentNavigationLink[];
+}
+type __VLS_Slots = ContentNavigationSlots;
+export interface ContentNavigationProps {
+    navigation: ContentNavigationLink[];
+    /** Set only by this component's own recursive self-call, one level down for each nested group - gates the tree-connector rail (see `content-navigation.ts`'s own `isNested` variant), since a root-level entry has no parent trunk to its left to branch off of. */
+    isNested?: boolean;
+    ui?: UiProp<ContentNavigationThemeSlots>;
+}
+export interface ContentNavigationSlots {
+    /** Replaces a link's (or a group header's) title content - `active` is always false for a group header, since that only ever describes a leaf link's own exact path. */
+    link?: (props: {
+        link: ContentNavigationLink;
+        active: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<ContentNavigationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentNavigationProps> & 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/ContentSurround.d.vue.ts

@@ -0,0 +1,16 @@
+import type { ContentSurroundThemeSlots } from '../theme/content-surround.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ContentSurroundLink {
+    title: string;
+    path: string;
+}
+export interface ContentSurroundProps {
+    /** The previous page in reading order. Omit (along with `next`) to render nothing. */
+    prev?: ContentSurroundLink;
+    /** The next page in reading order. */
+    next?: ContentSurroundLink;
+    ui?: UiProp<ContentSurroundThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ContentSurroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSurroundProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ContentSurround.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { contentSurroundTheme } from "../theme/content-surround";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  prev: { type: Object, required: false },
+  next: { type: Object, required: false },
+  ui: { type: Object, required: false }
+});
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("contentSurround", contentSurroundTheme);
+const startUi = computed(() => theme.value({ align: "start" }));
+const endUi = computed(() => theme.value({ align: "end" }));
+const rootProps = useRootProps(() => theme.value().root, () => props.ui?.root);
+const prevLinkProps = computed(() => resolveSlot(startUi.value.link, props.ui?.link));
+const nextLinkProps = computed(() => resolveSlot(endUi.value.link, props.ui?.link));
+const prevLabelProps = computed(() => resolveSlot(startUi.value.label, props.ui?.label));
+const nextLabelProps = computed(() => resolveSlot(endUi.value.label, props.ui?.label));
+const iconProps = computed(() => resolveSlot(startUi.value.icon, props.ui?.icon));
+const titleProps = computed(() => resolveSlot(startUi.value.title, props.ui?.title));
+</script>
+
+<template>
+  <nav v-if="prev || next" v-bind="rootProps" :aria-label="`${messages.previous} / ${messages.next}`">
+    <NuxtLink v-if="prev" :to="prev.path" v-bind="prevLinkProps">
+      <span v-bind="prevLabelProps">
+        <Icon :name="icons.chevronLeft" v-bind="iconProps" />
+        {{ messages.previous }}
+      </span>
+      <span v-bind="titleProps">{{ prev.title }}</span>
+    </NuxtLink>
+    <div v-else />
+    <NuxtLink v-if="next" :to="next.path" v-bind="nextLinkProps">
+      <span v-bind="nextLabelProps">
+        {{ messages.next }}
+        <Icon :name="icons.chevronRight" v-bind="iconProps" />
+      </span>
+      <span v-bind="titleProps">{{ next.title }}</span>
+    </NuxtLink>
+  </nav>
+</template>

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

@@ -0,0 +1,16 @@
+import type { ContentSurroundThemeSlots } from '../theme/content-surround.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ContentSurroundLink {
+    title: string;
+    path: string;
+}
+export interface ContentSurroundProps {
+    /** The previous page in reading order. Omit (along with `next`) to render nothing. */
+    prev?: ContentSurroundLink;
+    /** The next page in reading order. */
+    next?: ContentSurroundLink;
+    ui?: UiProp<ContentSurroundThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ContentSurroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContentSurroundProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;