@orvui/vue 0.0.0-stage → 0.1.0

package/src/motion/color-selector/src/ColorSelectorItem.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import type { ColorSelectorContext } from "./context";
+const props = defineProps<{ value: string; color: string; label: string; disabled?: boolean }>();
+const group = inject<ColorSelectorContext>("orvui-color-selector");
+if (!group) throw new Error("ColorSelectorItem must be inside ColorSelector");
+const surface = ref<HTMLElement | null>(null), reduced = useReducedMotion();
+const selected = computed(() => group.value.value === props.value);
+const disabled = computed(() => props.disabled || group.disabled.value);
+let disposed = false;
+function register() { if (!disposed && surface.value) group!.register(props.value, { element: surface.value, color: props.color }); }
+function choose(event: Event) { if (!disabled.value && !event.defaultPrevented) group!.select(props.value); }
+onMounted(register);
+watch(() => [props.value, props.color] as const, (_, previous) => { group.unregister(previous[0]); void nextTick(register); });
+onBeforeUnmount(() => { disposed = true; group.unregister(props.value); });
+</script>
+<template>
+  <motion.label :tabindex="-1" :while-press="reduced || disabled ? undefined : { scale: 0.94 }" :transition="SPRING_PRESS"
+    :class="cn('relative inline-flex shrink-0 rounded-full', disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer')">
+    <input v-bind="$attrs" type="radio" :name="group.name.value" :value="value" :checked="selected" :disabled="disabled"
+      :required="group.required.value" :form="group.form.value" :aria-label="label" @change="choose" class="peer sr-only" />
+    <span ref="surface" aria-hidden="true" :style="$attrs.style as any"
+      :class="cn('relative flex size-11 items-center justify-center rounded-full border border-foreground/10 bg-muted/60 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-foreground', $attrs.class as string)">
+      <span v-if="selected && !group.placed.value" class="pointer-events-none absolute -inset-1 rounded-full border-2" :style="{ borderColor: `color-mix(in srgb, ${color} 85%, transparent)` }" />
+      <span class="size-5 rounded-full border border-black/5" :style="{ backgroundColor: color }" />
+    </span>
+  </motion.label>
+</template>

package/src/motion/color-selector/src/ColorSelectorLabel.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { defineComponent, h } from "vue";
+const Surface = defineComponent({ name: "ColorSelectorLabel", setup(_, { slots }) {
+  return () => h("legend", { class: "mb-3 p-0 text-sm font-medium text-muted-foreground" }, slots.default?.());
+} });
+defineSlots<{ default?: () => any }>();
+</script>
+<template><Surface><slot /></Surface></template>

package/src/motion/color-selector/src/ColorSelectorList.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { defineComponent, h } from "vue";
+const Surface = defineComponent({ name: "ColorSelectorList", setup(_, { slots }) {
+  return () => h("div", { class: "flex flex-wrap items-center gap-3 p-1" }, slots.default?.());
+} });
+defineSlots<{ default?: () => any }>();
+</script>
+<template><Surface><slot /></Surface></template>

package/src/motion/color-selector/src/api-types.ts

@@ -0,0 +1,13 @@
+// Vue public prop types, derived from the actual components.
+export type ColorSelectorItemProps = InstanceType<
+  (typeof import("./ColorSelectorItem.vue"))["default"]
+>["$props"];
+export type ColorSelectorLabelProps = InstanceType<
+  (typeof import("./ColorSelectorLabel.vue"))["default"]
+>["$props"];
+export type ColorSelectorListProps = InstanceType<
+  (typeof import("./ColorSelectorList.vue"))["default"]
+>["$props"];
+export type ColorSelectorProps = InstanceType<
+  (typeof import("./ColorSelector.vue"))["default"]
+>["$props"];

package/src/motion/color-selector/src/context.ts

@@ -0,0 +1,8 @@
+import type { ComputedRef, Ref, WritableComputedRef } from "vue";
+export interface ColorSelectorContext {
+  value: WritableComputedRef<string>; name: ComputedRef<string>; form: ComputedRef<string | undefined>;
+  disabled: ComputedRef<boolean | undefined>; required: ComputedRef<boolean | undefined>; placed: Ref<boolean>;
+  register(value: string, item: { element: HTMLElement; color: string }): void;
+  unregister(value: string): void;
+  select(value: string): void;
+}

package/src/motion/combobox/index.ts

@@ -0,0 +1,15 @@
+export { default as Combobox } from "./src/Combobox.vue";
+export { default as ComboboxTrigger } from "./src/ComboboxTrigger.vue";
+export { default as ComboboxValue } from "./src/ComboboxValue.vue";
+export { default as ComboboxContent } from "./src/ComboboxContent.vue";
+export { default as ComboboxItem } from "./src/ComboboxItem.vue";
+export { default as ComboboxInput } from "./src/ComboboxInput.vue";
+export { default as ComboboxEmpty } from "./src/ComboboxEmpty.vue";
+export { default as ComboboxList } from "./src/ComboboxList.vue";
+export { default as ComboboxGroup } from "./src/ComboboxGroup.vue";
+export { default as ComboboxLabel } from "./src/ComboboxLabel.vue";
+export { default as ComboboxSeparator } from "./src/ComboboxSeparator.vue";
+
+export type * from "./src/api-types";
+
+export type * from "./src/public-types";

package/src/motion/combobox/src/Combobox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createSearchController,
+  ComboboxContext,
+} from "../../_combobox/controller";
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    defaultValue?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    query?: string;
+    defaultQuery?: string;
+    disabled?: boolean;
+    filter?: (value: string, query: string, keywords: string[]) => boolean;
+  }>(),
+  { open: undefined, defaultOpen: false, defaultQuery: "" },
+);
+const emit = defineEmits([
+  "update:modelValue",
+  "change",
+  "update:open",
+  "update:query",
+]);
+const state = createSearchController(props, emit, false);
+provide(ComboboxContext, state);
+</script>
+<template>
+  <div class="relative">
+    <slot
+      :value="state.value.value"
+      :open="state.open.value"
+      :query="state.query.value"
+    />
+  </div>
+</template>

package/src/motion/combobox/src/ComboboxContent.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import SearchSurface from "../../_combobox/SearchSurface.vue";
+import { useSearchContext } from "../../_combobox/controller";
+const props = withDefaults(
+  defineProps<{
+    side?: "top" | "bottom";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    avoidCollisions?: boolean;
+  }>(),
+  { side: "bottom", align: "start", sideOffset: 6, avoidCollisions: true },
+);
+const surface = useSearchContext(false, "ComboboxContent");
+</script>
+<template>
+  <SearchSurface :context="surface" v-bind="props" data-combobox-content=""
+    ><slot
+  /></SearchSurface>
+</template>

package/src/motion/combobox/src/ComboboxEmpty.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useSearchContext } from "../../_combobox/controller";
+const state = useSearchContext(false, "ComboboxEmpty");
+const empty = computed(() => state.visibleCount.value === 0);
+</script>
+<template>
+  <div
+    v-if="empty"
+    role="status"
+    class="px-3 py-8 text-center text-sm text-muted-foreground"
+  >
+    <slot>No options found.</slot>
+  </div>
+</template>

package/src/motion/combobox/src/ComboboxGroup.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed, provide, useId } from "vue";
+import {
+  useSearchContext,
+  ComboboxGroupContext,
+} from "../../_combobox/controller";
+const id = useId();
+const state = useSearchContext(false, "ComboboxGroup");
+provide(ComboboxGroupContext, id);
+const hidden = computed(() => !state.hasVisibleItems(id));
+</script>
+<template>
+  <fieldset :hidden="hidden" class="m-0 min-w-0 border-0 p-0 py-0.5">
+    <slot />
+  </fieldset>
+</template>

package/src/motion/combobox/src/ComboboxInput.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+import { Search } from "lucide-vue-next";
+import { computed } from "vue";
+import { cn } from "../../../lib/utils";
+import { useSearchContext } from "../../_combobox/controller";
+withDefaults(
+  defineProps<{
+    placeholder?: string;
+    wrapperClassName?: string;
+    showIcon?: boolean;
+  }>(),
+  { placeholder: "Search…", showIcon: true },
+);
+const state = useSearchContext(false, "ComboboxInput");
+const displayed = computed(() =>
+  state.open.value
+    ? state.query.value
+    : (state.labelFor(state.value.value as string) ?? ""),
+);
+let composing = false;
+function beginComposition() {
+  composing = true;
+}
+function endComposition() {
+  composing = false;
+}
+function input(event: Event) {
+  state.setOpen(true);
+  state.setQuery((event.target as HTMLInputElement).value);
+}
+function key(event: KeyboardEvent) {
+  if (!composing && !event.isComposing) state.keydown(event);
+}
+function pointer(event: PointerEvent) {
+  if (event.defaultPrevented || state.disabled.value || state.open.value)
+    return;
+  event.preventDefault();
+  state.focusInput();
+  state.setOpen(true);
+}
+</script>
+<template>
+  <div :class="cn('flex min-w-0 flex-1 items-center gap-2', wrapperClassName)">
+    <Search
+      v-if="showIcon"
+      aria-hidden="true"
+      class="size-4 shrink-0 text-muted-foreground"
+    />
+    <input
+      v-bind="$attrs"
+      :ref="(el) => (state.inputRef.value = el as HTMLInputElement)"
+      :id="state.inputId"
+      role="combobox"
+      :aria-label="($attrs['aria-label'] as string) ?? 'Search options'"
+      aria-autocomplete="list"
+      :aria-expanded="state.open.value"
+      :aria-controls="state.listId"
+      :aria-activedescendant="
+        state.open.value ? state.activeItemId.value : undefined
+      "
+      autocomplete="off"
+      :disabled="state.disabled.value"
+      :value="displayed"
+      :placeholder="placeholder"
+      @pointerdown="pointer"
+      @focus="state.setOpen(true)"
+      @click="state.setOpen(true)"
+      @input="input"
+      @keydown="key"
+      @compositionstart="beginComposition"
+      @compositionend="endComposition"
+      :class="
+        cn(
+          'h-10 min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+          $attrs.class as string,
+        )
+      "
+    />
+  </div>
+</template>

package/src/motion/combobox/src/ComboboxItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import SearchOption from "./SearchOption.vue";
+withDefaults(
+  defineProps<{
+    value: string;
+    textValue?: string;
+    label?: string;
+    keywords?: string[];
+    disabled?: boolean;
+  }>(),
+  { keywords: () => [] },
+);
+const emit = defineEmits<{ select: [value: string] }>();
+</script>
+<template>
+  <SearchOption
+    :multiple="false"
+    :value="value"
+    :text-value="textValue"
+    :label="label"
+    :keywords="keywords"
+    :disabled="disabled"
+    @select="emit('select', $event)"
+    ><slot>{ textValue ?? label ?? value }</slot></SearchOption
+  >
+</template>

package/src/motion/combobox/src/ComboboxLabel.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { ComboboxGroupContext } from "../../_combobox/controller";
+const group = inject(ComboboxGroupContext, undefined);
+</script>
+<template>
+  <legend
+    v-if="group"
+    class="w-full px-2 py-1.5 text-[0.68rem] font-medium uppercase tracking-[0.12em] text-muted-foreground"
+  >
+    <slot />
+  </legend>
+  <div
+    v-else
+    class="w-full px-2 py-1.5 text-[0.68rem] font-medium uppercase tracking-[0.12em] text-muted-foreground"
+  >
+    <slot />
+  </div>
+</template>

package/src/motion/combobox/src/ComboboxList.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useSearchContext } from "../../_combobox/controller";
+const props = withDefaults(defineProps<{ ariaLabel?: string }>(), {
+  ariaLabel: "Options",
+});
+const state = useSearchContext(false, "ComboboxList");
+</script>
+<template>
+  <div
+    :id="state.listId"
+    role="listbox"
+    :aria-label="props.ariaLabel"
+    class="relative isolate max-h-64 overflow-y-auto overscroll-contain p-1.5 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden"
+  >
+    <slot />
+  </div>
+</template>

package/src/motion/combobox/src/ComboboxSeparator.vue

@@ -0,0 +1,3 @@
+<template>
+  <div aria-hidden="true" class="-mx-1 my-1 h-px bg-border"></div>
+</template>

package/src/motion/combobox/src/ComboboxTrigger.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ChevronsUpDown } from "lucide-vue-next";
+import { cn } from "../../../lib/utils";
+import { useSearchContext } from "../../_combobox/controller";
+const state = useSearchContext(false, "ComboboxTrigger");
+function activate(event: PointerEvent) {
+  const target = event.target instanceof Element ? event.target : null;
+  if (
+    event.defaultPrevented ||
+    state.disabled.value ||
+    target === state.inputRef.value
+  )
+    return;
+  event.preventDefault();
+  state.setOpen(true);
+  state.focusInput();
+}
+</script>
+<template>
+  <div
+    :ref="(el) => (state.triggerRef.value = el as HTMLElement)"
+    :id="state.triggerId"
+    :data-state="state.open.value ? 'open' : 'closed'"
+    @pointerdown="activate"
+    :class="
+      cn(
+        'relative z-20 flex h-10 w-full min-w-52 cursor-text items-center justify-between gap-3 px-3 rounded-xl border border-border bg-transparent text-sm text-foreground transition-[border-color] hover:border-(--color-border-strong) focus-within:ring-2 focus-within:ring-foreground/20',
+        state.disabled.value && 'pointer-events-none opacity-50',
+      )
+    "
+  >
+    <span class="min-w-0 flex-1 text-left"><slot /></span
+    ><ChevronsUpDown
+      :stroke-width="2.5"
+      aria-hidden="true"
+      class="size-4 shrink-0 text-muted-foreground"
+    />
+  </div>
+</template>

package/src/motion/combobox/src/ComboboxValue.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useSearchContext } from "../../_combobox/controller";
+withDefaults(defineProps<{ placeholder?: string }>(), {
+  placeholder: "Select an option",
+});
+defineSlots<{
+  default?: (props: {
+    value: string | string[] | undefined;
+    label: string | undefined;
+  }) => any;
+}>();
+const state = useSearchContext(false, "ComboboxValue");
+const value = computed(() => state.value.value as string | undefined);
+const label = computed(() => state.labelFor(value.value));
+</script>
+<template>
+  <span
+    :class="[
+      'block truncate',
+      value === undefined ? 'text-muted-foreground' : 'text-foreground',
+    ]"
+    ><slot :value="value" :label="label">{{ label ?? placeholder }}</slot></span
+  >
+</template>

package/src/motion/combobox/src/SearchOption.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  useId,
+} from "vue";
+import { motion } from "motion-v";
+import { Check } from "lucide-vue-next";
+import { EASE_OUT, SPRING_LAYOUT } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import {
+  ComboboxGroupContext,
+  MultiSelectGroupContext,
+  useSearchContext,
+} from "../../_combobox/controller";
+const props = withDefaults(
+  defineProps<{
+    multiple: boolean;
+    value: string;
+    textValue?: string;
+    label?: string;
+    keywords?: string[];
+    disabled?: boolean;
+  }>(),
+  { keywords: () => [] },
+);
+const emit = defineEmits<{ select: [value: string] }>();
+const state = useSearchContext(
+  props.multiple,
+  props.multiple ? "MultiSelectItem" : "ComboboxItem",
+);
+const groupId = inject(
+  props.multiple ? MultiSelectGroupContext : ComboboxGroupContext,
+  undefined,
+);
+const element = ref<HTMLButtonElement | null>(null);
+const id = useId();
+let registered: string | undefined;
+const selected = computed(() =>
+  props.multiple
+    ? state.values.value.includes(props.value)
+    : state.value.value === props.value,
+);
+const disabled = computed(() => !!props.disabled || state.disabled.value);
+function synchronize() {
+  if (registered !== undefined && registered !== props.value)
+    state.unregisterItem(registered);
+  state.registerItem({
+    value: props.value,
+    label:
+      props.textValue ??
+      props.label ??
+      element.value?.textContent?.trim() ??
+      props.value,
+    keywords: [...props.keywords],
+    disabled: disabled.value,
+    groupId,
+    id,
+    element: element.value,
+  });
+  registered = props.value;
+}
+onMounted(synchronize);
+onUpdated(synchronize);
+onBeforeUnmount(() => {
+  if (registered !== undefined) state.unregisterItem(registered);
+});
+function choose() {
+  if (!disabled.value) {
+    emit("select", props.value);
+    state.select(props.value);
+  }
+}
+const active = computed(() => state.activeValue.value === props.value);
+const feedback = computed(() => ({
+  opacity: selected.value ? 1 : 0,
+  scale: selected.value ? 1 : 0.82,
+}));
+</script>
+<template>
+  <button
+    v-show="state.isVisible(value)"
+    ref="element"
+    :id="id"
+    type="button"
+    role="option"
+    :aria-selected="selected"
+    :disabled="disabled"
+    :tabindex="-1"
+    :data-combobox-item="multiple ? undefined : ''"
+    :data-multi-select-item="multiple ? '' : undefined"
+    :data-active="active || undefined"
+    :data-selected="selected || undefined"
+    @pointermove="!disabled && state.setActiveValue(value)"
+    @pointerdown.prevent
+    @click="choose"
+    :class="
+      cn(
+        'relative flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm outline-none transition-colors duration-150',
+        active ? 'text-foreground' : 'text-muted-foreground',
+        'disabled:pointer-events-none disabled:opacity-45',
+      )
+    "
+  >
+    <motion.span
+      v-if="active"
+      aria-hidden="true"
+      :layout-id="state.activeLayoutId"
+      class="absolute inset-0 -z-10 rounded-lg bg-muted"
+      :transition="state.reduce.value ? { duration: 0 } : SPRING_LAYOUT"
+    />
+    <span class="min-w-0 flex-1"
+      ><slot>{{ textValue ?? label ?? value }}</slot></span
+    >
+    <motion.span
+      aria-hidden="true"
+      :initial="false"
+      :animate="feedback"
+      :transition="
+        state.reduce.value
+          ? { duration: 0 }
+          : { duration: 0.14, ease: EASE_OUT }
+      "
+      class="grid size-5 shrink-0 place-items-center text-foreground"
+      ><Check class="size-4"
+    /></motion.span>
+  </button>
+</template>

package/src/motion/combobox/src/api-types.ts

@@ -0,0 +1,34 @@
+// Vue public prop types, derived from the actual components.
+export type ComboboxContentProps = InstanceType<
+  (typeof import("./ComboboxContent.vue"))["default"]
+>["$props"];
+export type ComboboxEmptyProps = InstanceType<
+  (typeof import("./ComboboxEmpty.vue"))["default"]
+>["$props"];
+export type ComboboxGroupProps = InstanceType<
+  (typeof import("./ComboboxGroup.vue"))["default"]
+>["$props"];
+export type ComboboxInputProps = InstanceType<
+  (typeof import("./ComboboxInput.vue"))["default"]
+>["$props"];
+export type ComboboxItemProps = InstanceType<
+  (typeof import("./ComboboxItem.vue"))["default"]
+>["$props"];
+export type ComboboxLabelProps = InstanceType<
+  (typeof import("./ComboboxLabel.vue"))["default"]
+>["$props"];
+export type ComboboxListProps = InstanceType<
+  (typeof import("./ComboboxList.vue"))["default"]
+>["$props"];
+export type ComboboxProps = InstanceType<
+  (typeof import("./Combobox.vue"))["default"]
+>["$props"];
+export type ComboboxSeparatorProps = InstanceType<
+  (typeof import("./ComboboxSeparator.vue"))["default"]
+>["$props"];
+export type ComboboxTriggerProps = InstanceType<
+  (typeof import("./ComboboxTrigger.vue"))["default"]
+>["$props"];
+export type ComboboxValueProps = InstanceType<
+  (typeof import("./ComboboxValue.vue"))["default"]
+>["$props"];

package/src/motion/combobox/src/public-types.ts

@@ -0,0 +1,2 @@
+import type { ComboboxProps } from "./api-types";
+export type ComboboxFilter = NonNullable<ComboboxProps["filter"]>;

package/src/motion/context-menu/index.ts

@@ -0,0 +1,12 @@
+export { default as ContextMenu } from "./src/ContextMenu.vue";
+export { default as ContextMenuTrigger } from "./src/ContextMenuTrigger.vue";
+export { default as ContextMenuContent } from "./src/ContextMenuContent.vue";
+export { default as ContextMenuItem } from "./src/ContextMenuItem.vue";
+export { default as ContextMenuCheckboxItem } from "./src/ContextMenuCheckboxItem.vue";
+export { default as ContextMenuRadioGroup } from "./src/ContextMenuRadioGroup.vue";
+export { default as ContextMenuRadioItem } from "./src/ContextMenuRadioItem.vue";
+export { default as ContextMenuLabel } from "./src/ContextMenuLabel.vue";
+export { default as ContextMenuSeparator } from "./src/ContextMenuSeparator.vue";
+export { default as ContextMenuShortcut } from "./src/ContextMenuShortcut.vue";
+
+export type * from "./src/api-types";

package/src/motion/context-menu/src/ContextMenu.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { provideMenu } from "./menu-state";
+const props = withDefaults(defineProps<{ open?: boolean; defaultOpen?: boolean }>(), { open: undefined, defaultOpen: false });
+const emit = defineEmits(["update:open"]);
+defineSlots<{ default(): unknown }>();
+provideMenu(props, emit);
+</script>
+<template>
+  <div class="contents"><slot /></div>
+</template>

package/src/motion/context-menu/src/ContextMenuCheckboxItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Check } from "lucide-vue-next";
+import { useMotionState } from "../../state";
+import ContextMenuItemBase from "./ContextMenuItemBase.vue";
+const props = withDefaults(defineProps<{
+  modelValue?: boolean; checked?: boolean; disabled?: boolean; closeOnSelect?: boolean;
+  tone?: "default" | "destructive"; inset?: boolean; textValue?: string;
+}>(), { modelValue: undefined, checked: undefined, closeOnSelect: true });
+const emit = defineEmits(["update:modelValue", "update:checked", "change"]);
+defineSlots<{ default(): unknown }>();
+const checked = useMotionState(props, emit, "modelValue", props.checked ?? false);
+function select() { const next = !checked.value; checked.value = next; emit("update:checked", checked.value); }
+</script>
+<template>
+  <ContextMenuItemBase
+    v-bind="{ disabled, closeOnSelect, tone, inset, textValue }"
+    role="menuitemcheckbox"
+    :aria-checked="checked"
+    @select="select"
+    ><span class="flex h-4 w-4 shrink-0 items-center justify-center"
+      ><Check v-if="checked" class="size-3.5" /></span
+    ><slot
+  /></ContextMenuItemBase>
+</template>