@sewadah/selaras 0.3.0 → 0.3.2

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

@@ -0,0 +1,69 @@
+import type { DateValue } from '@internationalized/date';
+import type { CalendarThemeSlots } from '../theme/calendar.js';
+import type { ColorRole } from '../utils/color-registry.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = {
+    'day'?: (props: CalendarDaySlotProps) => any;
+    /** Renders beside the date trigger within its grid cell. Safe for event links/buttons. */
+    'day-details'?: (props: {
+        date: DateValue;
+        month: DateValue;
+    }) => any;
+    'footer'?: () => any;
+};
+export interface CalendarProps {
+    modelValue?: DateValue;
+    defaultValue?: DateValue;
+    /** The displayed month when controlled independently of the selected date. */
+    placeholder?: DateValue;
+    defaultPlaceholder?: DateValue;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateDisabled?: (date: DateValue) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    locale?: string;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    fixedWeeks?: boolean;
+    disableDaysOutsideCurrentView?: boolean;
+    preventDeselect?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    initialFocus?: boolean;
+    calendarLabel?: string;
+    color?: ColorRole;
+    activeColor?: ColorRole;
+    ui?: UiProp<CalendarThemeSlots>;
+}
+export interface CalendarEmits {
+    'update:modelValue': [value: DateValue | undefined];
+    'update:placeholder': [value: DateValue];
+}
+export interface CalendarDaySlotProps {
+    date: DateValue;
+    month: DateValue;
+    dayValue: string;
+    selected: boolean;
+    today: boolean;
+    disabled: boolean;
+    unavailable: boolean;
+    outsideView: boolean;
+    outsideVisibleView: boolean;
+}
+declare const __VLS_base: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | undefined) => any;
+    "update:placeholder": (value: DateValue) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | undefined) => any) | undefined;
+    "onUpdate:placeholder"?: ((value: DateValue) => 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/Callout.vue

@@ -24,6 +24,13 @@ const iconName = computed(() => {
     return void 0;
   return props.icon ?? icons.value[DEFAULT_ICON[props.type ?? "note"]];
 });
+const colorForType = {
+  note: "info",
+  tip: "success",
+  warning: "warning",
+  danger: "danger"
+};
+const effectiveColor = computed(() => colorForType[props.type ?? "note"]);
 const theme = useComponentTheme("callout", calloutTheme);
 const ui = computed(() => theme.value({ type: props.type }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
@@ -33,7 +40,7 @@ const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
 </script>
 
 <template>
-  <div v-bind="rootProps" role="note">
+  <div v-bind="rootProps" data-selaras-callout :data-selaras-color="effectiveColor" role="note">
     <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
     <div v-bind="contentProps">
       <p v-if="title || $slots.title" v-bind="titleProps">
@@ -45,3 +52,7 @@ const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
     </div>
   </div>
 </template>
+
+<style scoped>
+[data-selaras-callout]:before{-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
+</style>

package/dist/runtime/components/CodeGroup.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { cloneVNode, Comment, computed, Fragment, ref, Text, useSlots } from "vue";
 import { useMessages } from "../composables/use-messages";
+import { resolveFileIcon } from "../utils/file-icons";
+import ProsePre from "./ProsePre.vue";
 import Tabs from "./Tabs.vue";
 const slots = useSlots();
 const messages = useMessages();
@@ -22,15 +24,23 @@ function labelFor(child, index) {
   const props = child.props ?? {};
   return props.filename || props.language || messages.value.codeTabFallback(index + 1);
 }
+function iconFor(child) {
+  const props = child.props ?? {};
+  return props.icon ?? resolveFileIcon(props.language, props.filename);
+}
+function cloneForTab(child) {
+  return cloneVNode(child, child.type === ProsePre ? { showHeader: false } : void 0);
+}
 const tabItems = computed(() => children.value.map((child, index) => ({
   label: labelFor(child, index),
-  value: String(index)
+  value: String(index),
+  icon: iconFor(child)
 })));
 const activeTab = ref("0");
 </script>
 
 <template>
-  <Tabs v-model="activeTab" :items="tabItems">
+  <Tabs v-model="activeTab" :items="tabItems" variant="pill">
     <template v-for="(child, index) in children" :key="index" #[String(index)]>
       <!--
         cloneVNode is required, not optional: this vnode was captured from
@@ -40,7 +50,7 @@ const activeTab = ref("0");
         hydration-shape mismatch (Fragment vs text) the first time this
         panel mounts. Cloning gives it a fresh identity for its new spot.
       -->
-      <component :is="() => cloneVNode(child)" />
+      <component :is="() => cloneForTab(child)" />
     </template>
   </Tabs>
 </template>

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

@@ -4,6 +4,8 @@ import type { FileTreeNode } from './FileTree.vue.js';
 export interface CodeTreeFile extends FileTreeNode {
     /** The file's content - read for a leaf node once selected, ignored for a directory. */
     code?: string;
+    /** Overrides the language inferred from the filename. */
+    language?: string;
     children?: CodeTreeFile[];
 }
 export interface CodeTreeProps {

package/dist/runtime/components/CodeTree.vue

@@ -21,6 +21,56 @@ function findFirstFile(nodes) {
   return void 0;
 }
 const selected = ref(findFirstFile(props.items));
+const highlightedCode = ref("");
+const languageByExtension = {
+  bash: "bash",
+  cjs: "javascript",
+  css: "css",
+  htm: "html",
+  html: "html",
+  js: "javascript",
+  jsx: "jsx",
+  json: "json",
+  jsonc: "jsonc",
+  md: "markdown",
+  mjs: "javascript",
+  mts: "typescript",
+  sh: "bash",
+  ts: "typescript",
+  tsx: "tsx",
+  vue: "vue",
+  yaml: "yaml",
+  yml: "yaml"
+};
+function languageFor(file) {
+  if (file.language)
+    return file.language;
+  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+  return languageByExtension[extension] ?? "text";
+}
+watch(selected, async (file, _previous, onCleanup) => {
+  let stale = false;
+  onCleanup(() => {
+    stale = true;
+  });
+  highlightedCode.value = "";
+  if (!file?.code)
+    return;
+  try {
+    const { codeToHtml } = await import("shiki");
+    const html = await codeToHtml(file.code, {
+      lang: languageFor(file),
+      themes: { light: "github-light", dark: "github-dark" },
+      defaultColor: false
+    });
+    if (stale)
+      return;
+    highlightedCode.value = html.match(/<code(?:\s[^>]*)?>([\s\S]*?)<\/code>/)?.[1] ?? "";
+  } catch {
+    if (!stale)
+      highlightedCode.value = "";
+  }
+}, { immediate: true });
 watch(() => props.items, () => {
   selected.value = findFirstFile(props.items);
 });
@@ -28,6 +78,7 @@ const messages = useMessages();
 const theme = useComponentTheme("codeTree", codeTreeTheme);
 const ui = computed(() => theme.value());
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const codeMode = computed(() => rootProps.value["data-selaras-mode"]);
 const treeProps = computed(() => resolveSlot(ui.value.tree, props.ui?.tree));
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const preProps = computed(() => resolveSlot(ui.value.pre, props.ui?.pre));
@@ -47,7 +98,7 @@ const fileTreeUi = { root: "rounded-none border-0 bg-transparent p-0" };
       />
     </div>
     <div v-if="selected" v-bind="contentProps">
-      <pre v-bind="preProps">{{ selected.code }}</pre>
+      <pre v-bind="preProps"><code v-if="highlightedCode" class="selaras-code-tree-code" :data-selaras-code-mode="codeMode" v-html="highlightedCode" /><code v-else>{{ selected.code }}</code></pre>
     </div>
     <div v-else v-bind="emptyProps">
       {{ messages.selectFile }}

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

@@ -4,6 +4,8 @@ import type { FileTreeNode } from './FileTree.vue.js';
 export interface CodeTreeFile extends FileTreeNode {
     /** The file's content - read for a leaf node once selected, ignored for a directory. */
     code?: string;
+    /** Overrides the language inferred from the filename. */
+    language?: string;
     children?: CodeTreeFile[];
 }
 export interface CodeTreeProps {

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/ColorPicker.d.vue.ts

@@ -1,6 +1,8 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ColorPickerThemeSlots } from '../theme/color-picker.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 import { colorPickerTheme } from '../theme/color-picker.js';
 type ColorPickerVariants = VariantProps<typeof colorPickerTheme>;
@@ -21,6 +23,12 @@ export interface ColorPickerProps {
     placeholder?: string;
     /** Opts into the picker's accessible small-screen modal presentation. */
     adaptive?: boolean;
+    /** Shows a pointer on the anchored picker; the adaptive modal has no arrow. */
+    arrow?: boolean | RoundedArrowConfig;
+    /** Positioning of the anchored picker (the adaptive modal uses its own layout). */
+    positioning?: OverlayPositioning;
+    /** Teleport target for the anchored picker, or `false` to render it inline. */
+    portal?: OverlayPortal;
     size?: ColorPickerVariants['size'];
     color?: ColorRole;
     ui?: UiProp<ColorPickerThemeSlots>;

package/dist/runtime/components/ColorPicker.vue

@@ -1,14 +1,17 @@
 <script setup>
-import { ColorSwatch } from "reka-ui";
+import { ColorSwatch, PopoverArrow, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui";
 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
+import { useFormField } from "../composables/use-form-field";
 import { useIsMobile } from "../composables/use-media-query";
 import { useMessages } from "../composables/use-messages";
 import ColorPickerBody from "../internal/ColorPickerBody.vue";
 import { colorPickerTheme } from "../theme/color-picker";
+import { popoverTheme } from "../theme/popover";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { overlayPortalProps } from "../utils/overlay";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Modal from "./Modal.vue";
-import Popover from "./Popover.vue";
 const props = defineProps({
   name: { type: String, required: false },
   form: { type: String, required: false },
@@ -21,12 +24,17 @@ const props = defineProps({
   swatches: { type: Array, required: false },
   placeholder: { type: String, required: false },
   adaptive: { type: Boolean, required: false },
+  arrow: { type: [Boolean, Object], required: false },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   size: { type: null, required: false },
   color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:open", "update:modelValue"]);
 const messages = useMessages();
+const field = useFormField();
+const formName = computed(() => props.name ?? field?.name);
 const instance = getCurrentInstance();
 const formAnchor = ref();
 const initialColor = props.defaultValue ?? "#000000";
@@ -104,55 +112,68 @@ const bodyProps = computed(() => ({
   swatchIndicatorProps: swatchIndicatorProps.value,
   colorRoleMarker: colorRoleMarker.value
 }));
-const popoverUi = computed(() => ({ content: resolveSlot(ui.value.content, props.ui?.content) }));
+const popoverThemeFn = useComponentTheme("popover", popoverTheme);
+const popoverUi = computed(() => popoverThemeFn.value());
+const popoverContentProps = computed(() => ({
+  ...resolveSlot(popoverUi.value.content, resolveSlot(ui.value.content, props.ui?.content)),
+  ...arrowContentProps(props.arrow),
+  ...props.positioning
+}));
+const popoverArrowProps = computed(() => ({ ...resolveSlot(popoverUi.value.arrow, void 0), ...arrowElementProps(props.arrow) }));
+const popoverPortalProps = computed(() => overlayPortalProps(props.portal));
 const adaptiveUi = computed(() => ({ content: "rounded-[var(--selaras-resolved-radius-md)]" }));
 const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, props.ui?.mobileContent));
 </script>
 
 <template>
-  <Popover v-if="!showMobileModal" :open="open" :ui="popoverUi" @update:open="onUpdateOpen">
-    <button
-      type="button"
-      :disabled="disabled"
-      :aria-label="messages.colorPicker"
-      :data-selaras-color="colorRoleMarker"
-      :data-selaras-theme="themeBindings['data-selaras-theme']"
-      :data-selaras-mode="themeBindings['data-selaras-mode']"
-      :style="themeBindings.style"
-      v-bind="triggerProps"
-    >
-      <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
-      <span v-bind="triggerValueProps">{{ internalColor }}</span>
-    </button>
+  <!--
+    The root and trigger stay mounted for both presentations. Only the
+    content switches: the anchored panel is removed outright while the
+    adaptive Modal is showing, and the Modal returns focus to this same
+    trigger on close.
+  -->
+  <PopoverRoot :open="open" @update:open="onUpdateOpen">
+    <PopoverTrigger as-child>
+      <button
+        type="button"
+        :disabled="disabled"
+        :aria-label="messages.colorPicker"
+        :data-selaras-color="colorRoleMarker"
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
+        v-bind="triggerProps"
+      >
+        <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
+        <span v-bind="triggerValueProps">{{ internalColor }}</span>
+      </button>
+    </PopoverTrigger>
 
-    <template #content>
-      <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
-    </template>
-  </Popover>
+    <PopoverPortal v-if="!showMobileModal" v-bind="popoverPortalProps">
+      <PopoverContent
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
+        side="bottom"
+        align="start"
+        :side-offset="8"
+        v-bind="popoverContentProps"
+      >
+        <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
+        <PopoverArrow v-if="arrow" v-bind="popoverArrowProps" />
+      </PopoverContent>
+    </PopoverPortal>
 
-  <Modal
-    v-else :open="open" :title="messages.colorPicker" :description="messages.colorPickerDescription"
-    :ui="adaptiveUi" @update:open="onUpdateOpen"
-  >
-    <button
-      type="button"
-      :disabled="disabled"
-      :aria-label="messages.colorPicker"
-      :data-selaras-color="colorRoleMarker"
-      :data-selaras-theme="themeBindings['data-selaras-theme']"
-      :data-selaras-mode="themeBindings['data-selaras-mode']"
-      :style="themeBindings.style"
-      v-bind="triggerProps"
+    <Modal
+      v-else :open="open" :title="messages.colorPicker" :description="messages.colorPickerDescription"
+      :ui="adaptiveUi" @update:open="onUpdateOpen"
     >
-      <ColorSwatch :color="internalColor" v-bind="triggerSwatchProps" />
-      <span v-bind="triggerValueProps">{{ internalColor }}</span>
-    </button>
-
-    <template #content>
-      <div v-bind="mobileContentProps">
-        <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
-      </div>
-    </template>
-  </Modal>
-  <input ref="formAnchor" type="hidden" :name="name" :form="form" :value="internalColor">
+      <template #content>
+        <div v-bind="mobileContentProps">
+          <ColorPickerBody v-bind="bodyProps" @update:model-value="onUpdateColor" />
+        </div>
+      </template>
+    </Modal>
+  </PopoverRoot>
+  <input ref="formAnchor" type="hidden" :name="formName" :form="form" :value="internalColor" :disabled="disabled">
 </template>

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

@@ -1,6 +1,8 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ColorPickerThemeSlots } from '../theme/color-picker.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 import { colorPickerTheme } from '../theme/color-picker.js';
 type ColorPickerVariants = VariantProps<typeof colorPickerTheme>;
@@ -21,6 +23,12 @@ export interface ColorPickerProps {
     placeholder?: string;
     /** Opts into the picker's accessible small-screen modal presentation. */
     adaptive?: boolean;
+    /** Shows a pointer on the anchored picker; the adaptive modal has no arrow. */
+    arrow?: boolean | RoundedArrowConfig;
+    /** Positioning of the anchored picker (the adaptive modal uses its own layout). */
+    positioning?: OverlayPositioning;
+    /** Teleport target for the anchored picker, or `false` to render it inline. */
+    portal?: OverlayPortal;
     size?: ColorPickerVariants['size'];
     color?: ColorRole;
     ui?: UiProp<ColorPickerThemeSlots>;

package/dist/runtime/components/Column.js

@@ -16,7 +16,7 @@ export default defineComponent({
     },
     sortable: {
       type: Boolean,
-      default: true
+      default: false
     },
     filterable: {
       type: Boolean,

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

@@ -3,8 +3,10 @@ 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. */
+    /** Displayed via Kbd. */
     shortcut?: string;
+    /** Bind `shortcut` while this palette is open; activation uses this item's normal selection behavior. */
+    hotkey?: boolean;
     disabled?: boolean;
     onSelect?: () => void;
 }

package/dist/runtime/components/CommandPalette.vue

@@ -4,6 +4,7 @@ import { computed, onMounted, onUnmounted, ref, useId, watch } from "vue";
 import { useCommandPalette } from "../composables/use-command-palette";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
+import { vHotkey } from "../directives/hotkey";
 import { commandPaletteTheme } from "../theme/command-palette";
 import { fuzzyScore } from "../utils/fuzzy-match";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
@@ -40,6 +41,9 @@ const query = ref("");
 const highlightedIndex = ref(0);
 const inputRef = ref();
 const listboxId = `selaras-command-palette-list-${useId()}`;
+function hotkeyFor(item) {
+  return item.hotkey && item.shortcut && !item.disabled ? { keys: item.shortcut, when: () => isOpen.value, allowInEditable: true } : void 0;
+}
 watch(isOpen, (open) => {
   if (!open) {
     query.value = "";
@@ -178,6 +182,7 @@ function itemId(index) {
                 v-for="item in group.items"
                 :id="itemId(allItems.indexOf(item))"
                 :key="item.label"
+                v-hotkey="hotkeyFor(item)"
                 role="option"
                 :aria-selected="isHighlighted(item)"
                 :aria-disabled="item.disabled"

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

@@ -3,8 +3,10 @@ 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. */
+    /** Displayed via Kbd. */
     shortcut?: string;
+    /** Bind `shortcut` while this palette is open; activation uses this item's normal selection behavior. */
+    hotkey?: boolean;
     disabled?: boolean;
     onSelect?: () => void;
 }

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;