@sewadah/selaras 0.1.1

package/dist/runtime/components/ScrollArea.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
+import { computed } from "vue";
+import { scrollAreaTheme } from "../theme/scroll-area";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  orientation: { type: String, required: false, default: "vertical" },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("scrollArea", scrollAreaTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="rootProps">
+    <ScrollAreaViewport v-bind="resolveSlot(ui.viewport, props.ui?.viewport)">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollAreaScrollbar
+      v-if="orientation !== 'horizontal'"
+      orientation="vertical"
+      v-bind="resolveSlot(ui.scrollbar, props.ui?.scrollbar)"
+    >
+      <ScrollAreaThumb v-bind="resolveSlot(ui.thumb, props.ui?.thumb)" />
+    </ScrollAreaScrollbar>
+    <ScrollAreaScrollbar
+      v-if="orientation !== 'vertical'"
+      orientation="horizontal"
+      v-bind="resolveSlot(ui.scrollbar, props.ui?.scrollbar)"
+    >
+      <ScrollAreaThumb v-bind="resolveSlot(ui.thumb, props.ui?.thumb)" />
+    </ScrollAreaScrollbar>
+    <ScrollAreaCorner v-if="orientation === 'both'" v-bind="resolveSlot(ui.corner, props.ui?.corner)" />
+  </ScrollAreaRoot>
+</template>

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

@@ -0,0 +1,19 @@
+import type { ScrollAreaThemeSlots } from '../theme/scroll-area.js';
+import type { UiProp } from '../utils/ui.js';
+export interface ScrollAreaProps {
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    ui?: UiProp<ScrollAreaThemeSlots>;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ScrollAreaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollAreaProps> & 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/Select.d.vue.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SelectItems } from '../composables/use-combobox-select.js';
+import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
+import type { UiProp } from '../utils/ui.js';
+type SelectVariants = VariantProps<typeof selectTheme>;
+export interface SelectProps {
+    id?: string;
+    name?: string;
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    modelValue?: string | string[];
+    multiple?: boolean;
+    searchable?: boolean;
+    virtualize?: boolean | {
+        estimateSize?: number;
+        overscan?: number;
+    };
+    displayMode?: 'comma' | 'chip';
+    maxChips?: number;
+    loading?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: SelectVariants['size'];
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: SelectVariants['color'];
+    clearable?: boolean;
+    searchTerm?: string;
+    resetSearchTermOnBlur?: boolean;
+    resetSearchTermOnSelect?: boolean;
+    /** Shows a small pointer triangle connecting the panel to its trigger. */
+    arrow?: boolean;
+    /** Below 768px viewport width, presents the dropdown as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`) rather than automatic, so an existing usage's look never changes without asking for it. */
+    mobileModal?: boolean;
+    ui?: UiProp<SelectThemeSlots>;
+}
+export interface SelectEmits {
+    'update:modelValue': [value: string | string[] | undefined];
+    'update:searchTerm': [value: string];
+}
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => 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/Select.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useForwardPropsEmits } from "reka-ui";
+import ComboboxSelectBase from "../internal/ComboboxSelectBase.vue";
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  items: { type: Array, required: true },
+  valueKey: { type: String, required: false },
+  labelKey: { type: String, required: false },
+  modelValue: { type: [String, Array], required: false },
+  multiple: { type: Boolean, required: false },
+  searchable: { type: Boolean, required: false },
+  virtualize: { type: [Boolean, Object], required: false },
+  displayMode: { type: String, required: false },
+  maxChips: { type: Number, required: false },
+  loading: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  invalid: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  clearable: { type: Boolean, required: false },
+  searchTerm: { type: String, required: false },
+  resetSearchTermOnBlur: { type: Boolean, required: false },
+  resetSearchTermOnSelect: { type: Boolean, required: false },
+  arrow: { type: Boolean, required: false },
+  mobileModal: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:searchTerm"]);
+const forwarded = useForwardPropsEmits(props, emit);
+</script>
+
+<template>
+  <ComboboxSelectBase v-bind="forwarded" :creatable="false">
+    <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps ?? {}" />
+    </template>
+  </ComboboxSelectBase>
+</template>

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

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SelectItems } from '../composables/use-combobox-select.js';
+import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
+import type { UiProp } from '../utils/ui.js';
+type SelectVariants = VariantProps<typeof selectTheme>;
+export interface SelectProps {
+    id?: string;
+    name?: string;
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    modelValue?: string | string[];
+    multiple?: boolean;
+    searchable?: boolean;
+    virtualize?: boolean | {
+        estimateSize?: number;
+        overscan?: number;
+    };
+    displayMode?: 'comma' | 'chip';
+    maxChips?: number;
+    loading?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: SelectVariants['size'];
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: SelectVariants['color'];
+    clearable?: boolean;
+    searchTerm?: string;
+    resetSearchTermOnBlur?: boolean;
+    resetSearchTermOnSelect?: boolean;
+    /** Shows a small pointer triangle connecting the panel to its trigger. */
+    arrow?: boolean;
+    /** Below 768px viewport width, presents the dropdown as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`) rather than automatic, so an existing usage's look never changes without asking for it. */
+    mobileModal?: boolean;
+    ui?: UiProp<SelectThemeSlots>;
+}
+export interface SelectEmits {
+    'update:modelValue': [value: string | string[] | undefined];
+    'update:searchTerm': [value: string];
+}
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => 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/Separator.d.vue.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SeparatorThemeSlots } from '../theme/separator.js';
+import type { UiProp } from '../utils/ui.js';
+import { separatorTheme } from '../theme/separator.js';
+type SeparatorVariants = VariantProps<typeof separatorTheme>;
+type __VLS_Slots = SeparatorSlots;
+export interface SeparatorProps {
+    orientation?: SeparatorVariants['orientation'];
+    variant?: SeparatorVariants['variant'];
+    color?: SeparatorVariants['color'];
+    /** Purely visual, not announced to assistive tech (role="none" instead of role="separator"). */
+    decorative?: boolean;
+    ui?: UiProp<SeparatorThemeSlots>;
+}
+export interface SeparatorSlots {
+    /** A label centered in the line (e.g. "Or continue with") - renders a second line segment after it, splitting the available space evenly on both sides. */
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & 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/Separator.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { Separator } from "reka-ui";
+import { computed } from "vue";
+import { separatorTheme } from "../theme/separator";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  orientation: { type: null, required: false },
+  variant: { type: null, required: false },
+  color: { type: null, required: false },
+  decorative: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const theme = useComponentTheme("separator", separatorTheme);
+const ui = computed(() => theme.value({
+  orientation: props.orientation,
+  variant: props.variant,
+  color: props.color
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const lineProps = computed(() => resolveSlot(ui.value.line, props.ui?.line));
+const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
+</script>
+
+<template>
+  <Separator :orientation="orientation" :decorative="decorative" v-bind="rootProps">
+    <span v-bind="lineProps" />
+    <template v-if="$slots.default">
+      <span v-bind="labelProps">
+        <slot />
+      </span>
+      <span v-bind="lineProps" />
+    </template>
+  </Separator>
+</template>

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

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SeparatorThemeSlots } from '../theme/separator.js';
+import type { UiProp } from '../utils/ui.js';
+import { separatorTheme } from '../theme/separator.js';
+type SeparatorVariants = VariantProps<typeof separatorTheme>;
+type __VLS_Slots = SeparatorSlots;
+export interface SeparatorProps {
+    orientation?: SeparatorVariants['orientation'];
+    variant?: SeparatorVariants['variant'];
+    color?: SeparatorVariants['color'];
+    /** Purely visual, not announced to assistive tech (role="none" instead of role="separator"). */
+    decorative?: boolean;
+    ui?: UiProp<SeparatorThemeSlots>;
+}
+export interface SeparatorSlots {
+    /** A label centered in the line (e.g. "Or continue with") - renders a second line segment after it, splitting the available space evenly on both sides. */
+    default?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & 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/Skeleton.d.vue.ts

@@ -0,0 +1,13 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SkeletonThemeSlots } from '../theme/skeleton.js';
+import type { UiProp } from '../utils/ui.js';
+import { skeletonTheme } from '../theme/skeleton.js';
+type SkeletonVariants = VariantProps<typeof skeletonTheme>;
+export interface SkeletonProps {
+    /** @default 'pulse' */
+    animation?: SkeletonVariants['animation'];
+    ui?: UiProp<SkeletonThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Skeleton.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { computed } from "vue";
+import { skeletonTheme } from "../theme/skeleton";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  animation: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("skeleton", skeletonTheme);
+const ui = computed(() => theme.value({ animation: props.animation }));
+const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+</script>
+
+<template>
+  <div v-bind="rootProps" aria-hidden="true" />
+</template>

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

@@ -0,0 +1,13 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SkeletonThemeSlots } from '../theme/skeleton.js';
+import type { UiProp } from '../utils/ui.js';
+import { skeletonTheme } from '../theme/skeleton.js';
+type SkeletonVariants = VariantProps<typeof skeletonTheme>;
+export interface SkeletonProps {
+    /** @default 'pulse' */
+    animation?: SkeletonVariants['animation'];
+    ui?: UiProp<SkeletonThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,65 @@
+import type { SlideoverThemeSlots } from '../theme/slideover.js';
+import type { UiProp } from '../utils/ui.js';
+export interface SlideoverProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** Which edge the panel slides in from. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Floats the panel with a margin and rounded corners instead of sitting flush against the edge. */
+    inset?: 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;
+    ui?: UiProp<SlideoverThemeSlots>;
+}
+export interface SlideoverEmits {
+    'update:open': [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_64: {}, __VLS_66: {}, __VLS_93: {}, __VLS_100: {}, __VLS_102: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    content?: (props: typeof __VLS_64) => any;
+} & {
+    header?: (props: typeof __VLS_66) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_93) => any;
+} & {
+    body?: (props: typeof __VLS_100) => any;
+} & {
+    footer?: (props: typeof __VLS_102) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, 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;
+}, string, import("vue").PublicProps, Readonly<SlideoverProps> & 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;
+}>, {}, {}, {}, {}, 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/Slideover.vue

@@ -0,0 +1,140 @@
+<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 { slideoverTheme } from "../theme/slideover";
+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 },
+  side: { type: String, required: false, default: "right" },
+  inset: { type: Boolean, required: false, default: 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 },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:open", "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 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 slots = useSlots();
+if (import.meta.dev) {
+  watchEffect(() => {
+    if (!props.title && !slots.header && !slots.content)
+      console.warn("[SSlideover] 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("slideover", slideoverTheme);
+const ui = computed(() => theme.value({ side: props.side, inset: props.inset, 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 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 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"
+      >
+        <template v-if="$slots.content">
+          <!-- See Modal.vue for why this stays registered with Reka even
+          though the content slot replaces our own header entirely. -->
+          <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" 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>
+            <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 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/Slideover.vue.d.ts

@@ -0,0 +1,65 @@
+import type { SlideoverThemeSlots } from '../theme/slideover.js';
+import type { UiProp } from '../utils/ui.js';
+export interface SlideoverProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** Which edge the panel slides in from. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Floats the panel with a margin and rounded corners instead of sitting flush against the edge. */
+    inset?: 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;
+    ui?: UiProp<SlideoverThemeSlots>;
+}
+export interface SlideoverEmits {
+    'update:open': [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_64: {}, __VLS_66: {}, __VLS_93: {}, __VLS_100: {}, __VLS_102: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    content?: (props: typeof __VLS_64) => any;
+} & {
+    header?: (props: typeof __VLS_66) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_93) => any;
+} & {
+    body?: (props: typeof __VLS_100) => any;
+} & {
+    footer?: (props: typeof __VLS_102) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, 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;
+}, string, import("vue").PublicProps, Readonly<SlideoverProps> & 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;
+}>, {}, {}, {}, {}, 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/SlideoverRenderer.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;