@sewadah/selaras 0.3.1 → 0.4.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -86,10 +86,11 @@ const module$1 = defineNuxtModule({
       path: resolver.resolve("./runtime/components"),
       prefix: options.prefix,
       pathPrefix: false,
-      // SColumn/SColumnGroup are plain .ts files (never render real DOM), not
-      // .vue SFCs - addComponentsDir only scans .vue by default.
-      extensions: ["vue", "ts"],
-      // ModalRenderer is App.vue's own internal render loop for useModal(),
+      // SColumn/SColumnGroup are plain render-function modules (never render
+      // real DOM). Source uses .ts; the published build emits .js.
+      extensions: ["vue", "ts", "js"],
+      // ModalRenderer/ConfirmRenderer are App.vue's internal render loops for
+      // useModal()/useConfirm(),
       // mirroring the same un-exported overlay-provider pattern other Nuxt
       // component libraries commonly use internally - not meant to be
       // placed by a consumer (App.vue already mounts one; a second copy
@@ -102,7 +103,7 @@ const module$1 = defineNuxtModule({
       // meant to be placed directly either. SlideoverRenderer/DrawerRenderer
       // are useSlideover()'s/useDrawer()'s own render loops, same reasoning
       // as ModalRenderer.
-      ignore: ["**/ModalRenderer.vue", "**/NavigationMenuAccordionItem.vue", "**/NavigationMenuFlyoutList.vue", "**/NavigationMenuFlyoutTrigger.vue", "**/SlideoverRenderer.vue", "**/DrawerRenderer.vue"]
+      ignore: ["**/ModalRenderer.vue", "**/ConfirmRenderer.vue", "**/NavigationMenuAccordionItem.vue", "**/NavigationMenuFlyoutList.vue", "**/NavigationMenuFlyoutTrigger.vue", "**/SlideoverRenderer.vue", "**/DrawerRenderer.vue"]
     });
     const hasContentModule = nuxt.options.modules.some((m) => {
       const name = typeof m === "string" ? m : Array.isArray(m) && typeof m[0] === "string" ? m[0] : void 0;
@@ -120,6 +121,7 @@ const module$1 = defineNuxtModule({
     }
     addImports([
       { name: "useCommandPalette", from: resolver.resolve("./runtime/composables/use-command-palette") },
+      { name: "useConfirm", from: resolver.resolve("./runtime/composables/use-confirm") },
       { name: "useDrawer", from: resolver.resolve("./runtime/composables/use-drawer") },
       { name: "useIcons", from: resolver.resolve("./runtime/composables/use-icons") },
       { name: "useLocale", from: resolver.resolve("./runtime/composables/use-locale") },

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

@@ -7,6 +7,8 @@ export interface AlertDialogProps {
     defaultOpen?: boolean;
     title?: string;
     description?: string;
+    /** Optional icon shown beside the dialog heading. */
+    icon?: string;
     /** Label for the default Cancel button - only rendered when no `footer` slot is given. @default 'Cancel' */
     cancelLabel?: string;
     /** Label for the default action button - only rendered when no `footer` slot is given. @default 'Continue' */
@@ -33,15 +35,15 @@ export interface AlertDialogEmits {
     /** 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_39: {}, __VLS_53: {}, __VLS_55: {};
+declare var __VLS_16: {}, __VLS_39: {}, __VLS_58: {}, __VLS_60: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_16) => any;
 } & {
     header?: (props: typeof __VLS_39) => any;
 } & {
-    body?: (props: typeof __VLS_53) => any;
+    body?: (props: typeof __VLS_58) => any;
 } & {
-    footer?: (props: typeof __VLS_55) => any;
+    footer?: (props: typeof __VLS_60) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<AlertDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/runtime/components/AlertDialog.vue

@@ -3,13 +3,16 @@ import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDe
 import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from "vue";
 import { useMessages } from "../composables/use-messages";
 import { alertDialogTheme } from "../theme/alert-dialog";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
+  icon: { type: String, required: false },
   cancelLabel: { type: String, required: false },
   actionLabel: { type: String, required: false },
   actionColor: { type: null, required: false },
@@ -65,8 +68,8 @@ const messages = useMessages();
 const theme = useComponentTheme("alertDialog", alertDialogTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ transition: props.transition }));
+const contentProps = useRootProps(() => ui.value.content, () => props.ui?.content);
 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));
@@ -96,14 +99,19 @@ const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer
         @pointer-down-outside="onPointerDownOutside"
         @animationend="onContentAnimationEnd"
       >
-        <div v-if="title || description || $slots.header" v-bind="headerProps">
+        <div v-if="title || description || icon || $slots.header" v-bind="headerProps">
           <slot name="header">
-            <AlertDialogTitle v-if="title" v-bind="titleProps">
-              {{ title }}
-            </AlertDialogTitle>
-            <AlertDialogDescription v-if="description" v-bind="descriptionProps">
-              {{ description }}
-            </AlertDialogDescription>
+            <div class="flex items-start gap-3">
+              <Icon v-if="icon" :name="icon" class="mt-0.5 size-5 shrink-0" aria-hidden="true" />
+              <div class="min-w-0">
+                <AlertDialogTitle v-if="title" v-bind="titleProps">
+                  {{ title }}
+                </AlertDialogTitle>
+                <AlertDialogDescription v-if="description" v-bind="descriptionProps">
+                  {{ description }}
+                </AlertDialogDescription>
+              </div>
+            </div>
           </slot>
         </div>
         <div v-if="$slots.body" v-bind="bodyProps">

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

@@ -7,6 +7,8 @@ export interface AlertDialogProps {
     defaultOpen?: boolean;
     title?: string;
     description?: string;
+    /** Optional icon shown beside the dialog heading. */
+    icon?: string;
     /** Label for the default Cancel button - only rendered when no `footer` slot is given. @default 'Cancel' */
     cancelLabel?: string;
     /** Label for the default action button - only rendered when no `footer` slot is given. @default 'Continue' */
@@ -33,15 +35,15 @@ export interface AlertDialogEmits {
     /** 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_39: {}, __VLS_53: {}, __VLS_55: {};
+declare var __VLS_16: {}, __VLS_39: {}, __VLS_58: {}, __VLS_60: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_16) => any;
 } & {
     header?: (props: typeof __VLS_39) => any;
 } & {
-    body?: (props: typeof __VLS_53) => any;
+    body?: (props: typeof __VLS_58) => any;
 } & {
-    footer?: (props: typeof __VLS_55) => any;
+    footer?: (props: typeof __VLS_60) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<AlertDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/runtime/components/App.vue

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { useAppConfig, useHead } from "#imports";
 import { useLocale } from "../composables/use-locale";
 import { generateRuntimeTokenOverrideCss } from "../utils/color-registry";
+import ConfirmRenderer from "./ConfirmRenderer.vue";
 import DrawerRenderer from "./DrawerRenderer.vue";
 import ModalRenderer from "./ModalRenderer.vue";
 import SlideoverRenderer from "./SlideoverRenderer.vue";
@@ -29,5 +30,6 @@ useHead({
     <ModalRenderer />
     <SlideoverRenderer />
     <DrawerRenderer />
+    <ConfirmRenderer />
   </ConfigProvider>
 </template>

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

@@ -1,7 +1,7 @@
 import type { AutocompleteProps, AutocompleteSlots, AutocompleteValue } from '../utils/autocomplete-contracts.js';
-import type { SelectModel } from '../utils/select-contracts.js';
+import type { SelectEntry, SelectModel } from '../utils/select-contracts.js';
 export type { AutocompleteEmits, AutocompleteProps, AutocompleteSlots } from '../utils/autocomplete-contracts.js';
-declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AutocompleteProps<Entry, Key, Multiple, Forced> & {
         "onUpdate:modelValue"?: ((value: SelectModel<AutocompleteValue<Entry, Key, Forced>, Multiple>) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/runtime/components/Autocomplete.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   name: { type: String, required: false },
   form: { type: String, required: false },
   items: { type: Array, required: true },
-  valueKey: { type: String, required: false },
+  valueKey: { type: void 0, required: false },
   labelKey: { type: String, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },

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

@@ -1,7 +1,7 @@
 import type { AutocompleteProps, AutocompleteSlots, AutocompleteValue } from '../utils/autocomplete-contracts.js';
-import type { SelectModel } from '../utils/select-contracts.js';
+import type { SelectEntry, SelectModel } from '../utils/select-contracts.js';
 export type { AutocompleteEmits, AutocompleteProps, AutocompleteSlots } from '../utils/autocomplete-contracts.js';
-declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AutocompleteProps<Entry, Key, Multiple, Forced> & {
         "onUpdate:modelValue"?: ((value: SelectModel<AutocompleteValue<Entry, Key, Forced>, Multiple>) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;

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

@@ -8,6 +8,8 @@ type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface ButtonProps {
     /** A tag name ('a', 'span', ...) or a component reference (e.g. NuxtLink, via resolveComponent) - Primitive renders whichever is given. */
     as?: string | Component;
+    /** Nuxt route or URL. Renders NuxtLink unless an explicit `as` overrides it. */
+    to?: string;
     /** Native button type when `as="button"`. Defaults to `button` so actions inside forms do not submit accidentally. */
     type?: 'button' | 'submit' | 'reset';
     color?: ColorRole;
@@ -25,17 +27,17 @@ export interface ButtonProps {
     square?: boolean;
     ui?: UiProp<ButtonThemeSlots>;
 }
-declare var __VLS_13: {
+declare var __VLS_15: {
     class: unknown;
-}, __VLS_20: {}, __VLS_22: {
+}, __VLS_22: {}, __VLS_24: {
     class: unknown;
 };
 type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_13) => any;
+    icon?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_22) => any;
 } & {
-    'trailing-icon'?: (props: typeof __VLS_22) => any;
+    'trailing-icon'?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/Button.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { Primitive } from "reka-ui";
-import { computed, useSlots } from "vue";
+import { computed, getCurrentInstance, useSlots } from "vue";
+import { NuxtLink } from "#components";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { useRippleEnabled } from "../composables/use-ripple";
@@ -12,6 +13,7 @@ import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
+  to: { type: String, required: false },
   type: { type: String, required: false, default: "button" },
   color: { type: null, required: false },
   variant: { type: null, required: false },
@@ -26,11 +28,20 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = useSlots();
+const hasExplicitAs = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "as");
+const resolvedAs = computed(() => hasExplicitAs ? props.as : props.to ? NuxtLink : props.as);
+const isNativeButton = computed(() => resolvedAs.value === "button");
+function onClick(event) {
+  if (props.disabled && !isNativeButton.value) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
 const iconOnly = computed(() => !slots.default);
 const icons = useIcons();
 const messages = useMessages();
 const rippleEnabledSetting = useRippleEnabled();
-const rippleEnabled = computed(() => rippleEnabledSetting.value && props.variant !== "text");
+const rippleEnabled = computed(() => rippleEnabledSetting.value && props.variant !== "text" && props.variant !== "link");
 const theme = useComponentTheme("button", buttonTheme);
 const themeProps = useThemeProps("button");
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "primary", "primary"));
@@ -46,7 +57,7 @@ const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
 </script>
 
 <template>
-  <Primitive v-ripple="rippleEnabled" :as="as" :type="as === 'button' ? type : void 0" :disabled="disabled" :aria-busy="loading || void 0" :data-selaras-color="effectiveColor" v-bind="rootProps">
+  <Primitive v-ripple="rippleEnabled" :as="resolvedAs" :to="resolvedAs === NuxtLink || typeof resolvedAs !== 'string' ? to : void 0" :type="isNativeButton ? type : void 0" :disabled="isNativeButton ? disabled : void 0" :aria-disabled="!isNativeButton && disabled ? 'true' : void 0" :tabindex="!isNativeButton && disabled ? -1 : void 0" :aria-busy="loading || void 0" :data-selaras-color="effectiveColor" v-bind="rootProps" @click="onClick">
     <Icon v-if="loading" :name="icons.loading" :class="applyClassPrefix('animate-spin')" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <!--
       A named slot (not just the `icon` prop) so a consumer building a

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

@@ -8,6 +8,8 @@ type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface ButtonProps {
     /** A tag name ('a', 'span', ...) or a component reference (e.g. NuxtLink, via resolveComponent) - Primitive renders whichever is given. */
     as?: string | Component;
+    /** Nuxt route or URL. Renders NuxtLink unless an explicit `as` overrides it. */
+    to?: string;
     /** Native button type when `as="button"`. Defaults to `button` so actions inside forms do not submit accidentally. */
     type?: 'button' | 'submit' | 'reset';
     color?: ColorRole;
@@ -25,17 +27,17 @@ export interface ButtonProps {
     square?: boolean;
     ui?: UiProp<ButtonThemeSlots>;
 }
-declare var __VLS_13: {
+declare var __VLS_15: {
     class: unknown;
-}, __VLS_20: {}, __VLS_22: {
+}, __VLS_22: {}, __VLS_24: {
     class: unknown;
 };
 type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_13) => any;
+    icon?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_22) => any;
 } & {
-    'trailing-icon'?: (props: typeof __VLS_22) => any;
+    'trailing-icon'?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,18 @@
+import type { SwitchProps } from './Switch.vue.js';
+export interface ColorModeSwitchProps extends Pick<SwitchProps, 'id' | 'label' | 'description' | 'size' | 'color' | 'disabled' | 'checkedIcon' | 'uncheckedIcon' | 'ui'> {
+}
+declare var __VLS_11: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    description?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & 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/ColorModeSwitch.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed, useAttrs, useSlots } from "vue";
+import { useColorMode } from "#imports";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import Switch from "./Switch.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  checkedIcon: { type: String, required: false },
+  uncheckedIcon: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const attrs = useAttrs();
+const slots = useSlots();
+const colorMode = useColorMode();
+const icons = useIcons();
+const messages = useMessages();
+const isDark = computed(() => colorMode.value === "dark");
+const switchUi = computed(() => {
+  const track = typeof props.ui?.track === "string" ? { class: props.ui.track } : props.ui?.track;
+  return {
+    ...props.ui,
+    track: {
+      "aria-label": attrs["aria-label"] ?? (props.label || slots.default ? void 0 : messages.value.colorModeToggle),
+      "aria-labelledby": attrs["aria-labelledby"],
+      "aria-describedby": attrs["aria-describedby"],
+      ...track
+    }
+  };
+});
+function updateMode(dark) {
+  colorMode.preference = dark ? "dark" : "light";
+}
+</script>
+
+<template>
+  <Switch
+    v-bind="{ ...attrs, ...props }"
+    :model-value="isDark"
+    :disabled="disabled || colorMode.forced"
+    :checked-icon="checkedIcon ?? icons.darkMode"
+    :unchecked-icon="uncheckedIcon ?? icons.lightMode"
+    :ui="switchUi"
+    @update:model-value="updateMode"
+  >
+    <template v-if="$slots.default" #default>
+      <slot />
+    </template>
+    <template v-if="$slots.description" #description>
+      <slot name="description" />
+    </template>
+  </Switch>
+</template>

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

@@ -0,0 +1,18 @@
+import type { SwitchProps } from './Switch.vue.js';
+export interface ColorModeSwitchProps extends Pick<SwitchProps, 'id' | 'label' | 'description' | 'size' | 'color' | 'disabled' | 'checkedIcon' | 'uncheckedIcon' | 'ui'> {
+}
+declare var __VLS_11: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    description?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & 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/ConfirmRenderer.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/ConfirmRenderer.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { onUnmounted } from "vue";
+import { useConfirmService } from "../internal/programmatic-services";
+import ProgrammaticTheme from "../internal/ProgrammaticTheme.vue";
+import AlertDialog from "./AlertDialog.vue";
+const { instances, close, remove, dispose } = useConfirmService();
+onUnmounted(dispose);
+function onUpdateOpen(id, open) {
+  if (open)
+    return;
+  queueMicrotask(() => {
+    const instance = instances.value.find((item) => item.id === id);
+    if (instance && !instance._settled)
+      close(id, false);
+  });
+}
+</script>
+
+<template>
+  <ProgrammaticTheme
+    v-for="instance in instances"
+    :key="instance.id"
+    :snapshot="instance._theme"
+  >
+    <AlertDialog
+      :open="instance.isOpen"
+      :title="instance.title"
+      :description="instance.description"
+      :action-label="instance.confirmLabel"
+      :cancel-label="instance.cancelLabel"
+      :action-color="instance.confirmColor"
+      :icon="instance.icon"
+      @update:open="(open) => onUpdateOpen(instance.id, open)"
+      @cancel="close(instance.id, false)"
+      @confirm="close(instance.id, true)"
+      @after-leave="remove(instance.id)"
+    />
+  </ProgrammaticTheme>
+</template>

package/dist/runtime/components/ConfirmRenderer.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/ContextMenu.vue

@@ -5,8 +5,9 @@ import { vHotkey } from "../directives/hotkey";
 import ShortcutHint from "../internal/ShortcutHint.vue";
 import { contextMenuTheme } from "../theme/context-menu";
 import { overlayPortalProps } from "../utils/overlay";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useFallthroughProps, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   items: { type: Array, required: true },
   positioning: { type: Object, required: false },
@@ -18,6 +19,7 @@ const theme = useComponentTheme("contextMenu", contextMenuTheme);
 const open = ref(false);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
+const triggerProps = useFallthroughProps();
 const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...props.positioning }));
 const portalProps = computed(() => overlayPortalProps(props.portal));
 function itemPropsFor(item) {
@@ -34,7 +36,7 @@ function hotkeyFor(item) {
 
 <template>
   <ContextMenuRoot :open="open" @update:open="open = $event">
-    <ContextMenuTrigger as-child>
+    <ContextMenuTrigger as-child v-bind="triggerProps">
       <slot />
     </ContextMenuTrigger>
     <ContextMenuPortal v-bind="portalProps">

package/dist/runtime/components/Drawer.vue

@@ -4,9 +4,10 @@ import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { drawerTheme } from "../theme/drawer";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
@@ -76,8 +77,8 @@ const messages = useMessages();
 const theme = useComponentTheme("drawer", drawerTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ side: props.side, transition: props.transition }));
+const contentProps = useRootProps(() => ui.value.content, () => props.ui?.content);
 const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const handleProps = computed(() => resolveSlot(ui.value.handle, props.ui?.handle));
 const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
 const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));

package/dist/runtime/components/Dropdown.vue

@@ -9,9 +9,10 @@ import ShortcutHint from "../internal/ShortcutHint.vue";
 import { dropdownTheme } from "../theme/dropdown";
 import { arrowContentProps, arrowElementProps } from "../utils/arrow";
 import { overlayPortalProps } from "../utils/overlay";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useFallthroughProps, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
 import Modal from "./Modal.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   items: { type: Array, required: true },
   open: { type: Boolean, required: false, default: void 0 },
@@ -41,6 +42,7 @@ const isMobile = useIsMobile();
 const modalId = `selaras-dropdown-modal-${useId()}`;
 const triggerElement = ref();
 const ui = computed(() => theme.value());
+const triggerProps = useFallthroughProps();
 const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...arrowContentProps(props.arrow), ...props.positioning }));
 const portalProps = computed(() => overlayPortalProps(props.portal));
 const arrowProps = computed(() => ({ ...resolveSlot(ui.value.arrow, props.ui?.arrow), ...arrowElementProps(props.arrow) }));
@@ -106,7 +108,7 @@ function onModalAfterLeave() {
 
 <template>
   <DropdownMenuRoot :open="desktopOpen" @update:open="onUpdateMenuOpen">
-    <DropdownMenuTrigger ref="triggerElement" as-child>
+    <DropdownMenuTrigger ref="triggerElement" as-child v-bind="triggerProps">
       <slot />
     </DropdownMenuTrigger>
     <DropdownMenuPortal v-if="!mobilePresentation" v-bind="portalProps">

package/dist/runtime/components/Modal.vue

@@ -4,9 +4,10 @@ import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { modalTheme } from "../theme/modal";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
@@ -84,8 +85,8 @@ const messages = useMessages();
 const theme = useComponentTheme("modal", modalTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ fullscreen: internalFullscreen.value, transition: props.transition }));
+const contentProps = useRootProps(() => ui.value.content, () => props.ui?.content);
 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));

package/dist/runtime/components/Popover.vue

@@ -4,7 +4,8 @@ import { computed, getCurrentInstance, ref, watch } from "vue";
 import { popoverTheme } from "../theme/popover";
 import { arrowContentProps, arrowElementProps } from "../utils/arrow";
 import { overlayPortalProps } from "../utils/overlay";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useFallthroughProps, useThemeBindings } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
@@ -45,6 +46,7 @@ function onOpenAutoFocus(event) {
 const theme = useComponentTheme("popover", popoverTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
+const triggerProps = useFallthroughProps();
 const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...arrowContentProps(props.arrow), ...props.positioning }));
 const portalProps = computed(() => overlayPortalProps(props.portal));
 const arrowProps = computed(() => ({ ...resolveSlot(ui.value.arrow, props.ui?.arrow), ...arrowElementProps(props.arrow) }));
@@ -63,7 +65,7 @@ function onUpdateOpen(value) {
 
 <template>
   <PopoverRoot :open="internalOpen" :modal="modal" @update:open="onUpdateOpen">
-    <PopoverTrigger v-if="$slots.default" as-child>
+    <PopoverTrigger v-if="$slots.default" as-child v-bind="triggerProps">
       <slot />
     </PopoverTrigger>
     <PopoverPortal v-bind="portalProps">