@aerogel/core 0.0.0-next.b656a964404fbde17d9cce7668722596098e47fd → 0.0.0-next.b9379d15fd4f40346d655134b49c9015ead9c536

package/src/components/headless/HeadlessModalContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogContent>
+    <DialogContent ref="$contentRef">
         <slot />
 
         <ModalContext v-if="childModal" :child-index="childIndex + 1" :modal="childModal" />
@@ -7,18 +7,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, useTemplateRef, watchEffect } from 'vue';
 import { DialogContent } from 'reka-ui';
+import type { Ref } from 'vue';
 
 import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
 import UI from '@aerogel/core/ui/UI';
-import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI.state';
+import { injectOrFail, injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { UIModalContext } from '@aerogel/core/ui/UI';
+import type { ModalContentInstance } from '@aerogel/core/components/contracts/Modal';
 
 const { childIndex = 0 } = injectReactiveOrFail<UIModalContext>(
     'modal',
     'could not obtain modal reference from <HeadlessModalContent>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
+        'did you render this component manually? Show it using $ui.modal() instead',
 );
+const $modalContentRef = injectOrFail<Ref<ModalContentInstance>>('$modalContentRef');
+const $content = useTemplateRef('$contentRef');
 const childModal = computed(() => UI.modals[childIndex] ?? null);
+
+watchEffect(() => ($modalContentRef.value = $content.value));
 </script>

package/src/components/headless/HeadlessModalDescription.vue

@@ -0,0 +1,12 @@
+<template>
+    <DialogDescription v-bind="$props">
+        <slot />
+    </DialogDescription>
+</template>
+
+<script setup lang="ts">
+import { DialogDescription } from 'reka-ui';
+import type { DialogDescriptionProps } from 'reka-ui';
+
+defineProps<DialogDescriptionProps>();
+</script>

package/src/components/headless/HeadlessSelect.vue

@@ -1,5 +1,10 @@
 <template>
-    <SelectRoot v-slot="{ open }" :model-value="acceptableValue" @update:model-value="update($event)">
+    <SelectRoot
+        v-slot="{ open }"
+        :model-value="acceptableValue"
+        :by="compareOptions as Closure<[AcceptableValue, AcceptableValue], boolean>"
+        @update:model-value="update($event)"
+    >
         <component :is="as" v-bind="$attrs">
             <slot :model-value :open>
                 <HeadlessSelectTrigger />
@@ -9,11 +14,12 @@
     </SelectRoot>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
 import { computed, inject, provide, readonly } from 'vue';
 import { value as evaluate, toString, uuid } from '@noeldemartin/utils';
 import { SelectRoot } from 'reka-ui';
 import type { AcceptableValue } from 'reka-ui';
+import type { Closure, Nullable } from '@noeldemartin/utils';
 
 import { translateWithDefault } from '@aerogel/core/lang';
 import { hasSelectOptionLabel } from '@aerogel/core/components/contracts/Select';
@@ -28,17 +34,29 @@ defineOptions({ inheritAttrs: false });
 
 const {
     name,
-    as = 'template',
+    as = 'div',
     label,
     options,
+    labelClass,
+    optionsClass,
     renderOption,
+    compareOptions = (a, b) => a === b,
     description,
     placeholder,
     modelValue,
-} = defineProps<SelectProps>();
-const emit = defineEmits<SelectEmits>();
+    align,
+    side,
+} = defineProps<SelectProps<T>>();
+const emit = defineEmits<SelectEmits<T>>();
 const form = inject<FormController | null>('form', null);
-const acceptableValue = computed(() => modelValue as AcceptableValue);
+const computedValue = computed(() => {
+    if (form && name) {
+        return form.getFieldValue(name) as T;
+    }
+
+    return modelValue as T;
+});
+const acceptableValue = computed(() => computedValue.value as AcceptableValue);
 const errors = computed(() => {
     if (!form || !name) {
         return null;
@@ -61,7 +79,12 @@ const computedOptions = computed(() => {
         value: option as AcceptableValue,
     }));
 });
-const context = {
+const expose = {
+    labelClass,
+    optionsClass,
+    align,
+    side,
+    value: computedValue,
     id: `select-${uuid()}`,
     name: computed(() => name),
     label: computed(() => label),
@@ -69,13 +92,6 @@ const context = {
     placeholder: computed(() => placeholder ?? translateWithDefault('ui.select', 'Select an option')),
     options: computedOptions,
     selectedOption: computed(() => computedOptions.value?.find((option) => option.value === modelValue)),
-    value: computed(() => {
-        if (form && name) {
-            return form.getFieldValue(name);
-        }
-
-        return modelValue;
-    }),
     errors: readonly(errors),
     required: computed(() => {
         if (!name || !form) {
@@ -93,12 +109,12 @@ const context = {
 
         emit('update:modelValue', value);
     },
-} satisfies SelectExpose;
+} satisfies SelectExpose<T>;
 
 function update(value: AcceptableValue) {
-    context.update(value as FormFieldValue);
+    expose.update(value as T);
 }
 
-provide('select', context);
-defineExpose(context);
+provide('select', expose);
+defineExpose(expose);
 </script>

package/src/components/headless/HeadlessSelectOption.vue

@@ -1,6 +1,6 @@
 <template>
     <SelectItem v-bind="$props">
-        <SelectItemText class="the-text">
+        <SelectItemText>
             <slot>
                 {{ renderedLabel }}
             </slot>

package/src/components/headless/HeadlessSelectOptions.vue

@@ -1,7 +1,13 @@
 <template>
     <SelectPortal>
-        <SelectContent :class="classes">
-            <SelectViewport>
+        <SelectContent
+            position="popper"
+            :class="renderedClasses"
+            :align="select.align"
+            :side="select.side"
+            :side-offset="4"
+        >
+            <SelectViewport :class="innerClass">
                 <slot>
                     <HeadlessSelectOption
                         v-for="option in select.options ?? []"
@@ -16,15 +22,21 @@
 
 <script setup lang="ts">
 import { SelectContent, SelectPortal, SelectViewport } from 'reka-ui';
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
 
-import { injectReactiveOrFail } from '@aerogel/core/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { classes } from '@aerogel/core/utils/classes';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
 import HeadlessSelectOption from './HeadlessSelectOption.vue';
 
-const { class: classes } = defineProps<{ class?: string }>();
+const { class: rootClass } = defineProps<{ class?: HTMLAttributes['class']; innerClass?: HTMLAttributes['class'] }>();
+
 const select = injectReactiveOrFail<SelectExpose>(
     'select',
     '<HeadlessSelectOptions> must be a child of a <HeadlessSelect>',
 );
+const renderedClasses = computed(() =>
+    classes('min-w-(--reka-select-trigger-width) max-h-(--reka-select-content-available-height)', rootClass));
 </script>

package/src/components/headless/HeadlessSelectValue.vue

@@ -1,5 +1,8 @@
 <template>
-    <SelectValue :placeholder="select.placeholder" />
+    <SelectValue v-if="$slots.default" :placeholder="select.placeholder">
+        <slot />
+    </SelectValue>
+    <SelectValue v-else :placeholder="select.placeholder" />
 </template>
 
 <script setup lang="ts">

package/src/components/headless/HeadlessSwitch.vue

@@ -0,0 +1,96 @@
+<template>
+    <div :class="rootClass">
+        <label v-if="label" :for="expose.id" :class="labelClass">
+            {{ label }}
+        </label>
+        <SwitchRoot
+            :id="expose.id"
+            :name
+            :model-value="expose.value.value"
+            v-bind="$attrs"
+            :class="inputClass"
+            @update:model-value="$emit('update:modelValue', $event)"
+        >
+            <SwitchThumb :class="thumbClass" />
+        </SwitchRoot>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T extends boolean = boolean">
+import { SwitchRoot, SwitchThumb } from 'reka-ui';
+import { computed, inject, readonly, watchEffect } from 'vue';
+import { uuid } from '@noeldemartin/utils';
+import type { HTMLAttributes } from 'vue';
+
+import type FormController from '@aerogel/core/forms/FormController';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+    name,
+    label,
+    description,
+    modelValue,
+    class: rootClass,
+} = defineProps<
+    InputProps<T> & {
+        class?: HTMLAttributes['class'];
+        labelClass?: HTMLAttributes['class'];
+        inputClass?: HTMLAttributes['class'];
+        thumbClass?: HTMLAttributes['class'];
+    }
+>();
+const emit = defineEmits<InputEmits>();
+const form = inject<FormController | null>('form', null);
+const errors = computed(() => {
+    if (!form || !name) {
+        return null;
+    }
+
+    return form.errors[name] ?? null;
+});
+
+const expose = {
+    id: `switch-${uuid()}`,
+    name: computed(() => name),
+    label: computed(() => label),
+    description: computed(() => description),
+    value: computed(() => {
+        if (form && name) {
+            return form.getFieldValue(name) as boolean;
+        }
+
+        return modelValue;
+    }),
+    errors: readonly(errors),
+    required: computed(() => {
+        if (!name || !form) {
+            return;
+        }
+
+        return form.getFieldRules(name).includes('required');
+    }),
+    update(value) {
+        if (form && name) {
+            form.setFieldValue(name, value as FormFieldValue);
+
+            return;
+        }
+
+        emit('update:modelValue', value);
+    },
+} satisfies InputExpose;
+
+defineExpose(expose);
+
+watchEffect(() => {
+    if (!description && !errors.value) {
+        return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.warn('Errors and description not implemented in <HeadlessSwitch>');
+});
+</script>

package/src/components/headless/index.ts

@@ -7,6 +7,7 @@ export { default as HeadlessInputLabel } from './HeadlessInputLabel.vue';
 export { default as HeadlessInputTextArea } from './HeadlessInputTextArea.vue';
 export { default as HeadlessModal } from './HeadlessModal.vue';
 export { default as HeadlessModalContent } from './HeadlessModalContent.vue';
+export { default as HeadlessModalDescription } from './HeadlessModalDescription.vue';
 export { default as HeadlessModalOverlay } from './HeadlessModalOverlay.vue';
 export { default as HeadlessModalTitle } from './HeadlessModalTitle.vue';
 export { default as HeadlessSelect } from './HeadlessSelect.vue';
@@ -15,4 +16,5 @@ export { default as HeadlessSelectOption } from './HeadlessSelectOption.vue';
 export { default as HeadlessSelectOptions } from './HeadlessSelectOptions.vue';
 export { default as HeadlessSelectTrigger } from './HeadlessSelectTrigger.vue';
 export { default as HeadlessSelectValue } from './HeadlessSelectValue.vue';
+export { default as HeadlessSwitch } from './HeadlessSwitch.vue';
 export { default as HeadlessToast } from './HeadlessToast.vue';

package/src/components/ui/AdvancedOptions.vue

@@ -1,7 +1,7 @@
 <template>
     <details class="group">
         <summary
-            class="-ml-2 flex w-[max-content] cursor-pointer items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
+            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
         >
             <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
             <span>{{ $td('ui.advancedOptions', 'Advanced options') }}</span>

package/src/components/ui/AlertModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :title>
+    <Modal :title="renderedTitle" :title-hidden="titleHidden">
         <Markdown :text="message" />
     </Modal>
 </template>
@@ -7,7 +7,11 @@
 <script setup lang="ts">
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
-import type { AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
+import { useAlertModal } from '@aerogel/core/components/contracts/AlertModal';
+import type { AlertModalExpose, AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
 
-defineProps<AlertModalProps>();
+const props = defineProps<AlertModalProps>();
+const { renderedTitle, titleHidden } = useAlertModal(props);
+
+defineExpose<AlertModalExpose>();
 </script>

package/src/components/ui/Button.vue

@@ -5,8 +5,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import HeadlessButton from '@aerogel/core/components/headless/HeadlessButton.vue';
-import { computedVariantClasses } from '@aerogel/core/utils/classes';
+import { variantClasses } from '@aerogel/core/utils/classes';
 import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
 import type { Variants } from '@aerogel/core/utils/classes';
 
@@ -14,23 +16,23 @@ const { class: baseClasses, size, variant, disabled, ...props } = defineProps<Bu
 
 /* eslint-disable vue/max-len */
 // prettier-ignore
-const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size' | 'variant' | 'disabled'>>>(
+const renderedClasses = computed(() => variantClasses<Variants<Pick<ButtonProps, 'size' | 'variant' | 'disabled'>>>(
     { baseClasses, variant, size, disabled },
     {
-        baseClasses: 'flex items-center justify-center gap-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+        baseClasses: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
         variants: {
             variant: {
-                default: 'bg-primary text-white focus-visible:outline-primary',
+                default: 'bg-primary-600 text-white focus-visible:outline-primary-600',
                 secondary: 'bg-background text-gray-900 ring-gray-300',
-                danger: 'bg-danger text-white focus-visible:outline-danger',
+                danger: 'bg-red-600 text-white focus-visible:outline-red-600',
                 ghost: 'bg-transparent',
-                outline: 'bg-transparent text-primary ring-primary',
-                link: 'text-primary',
+                outline: 'bg-transparent text-primary-600 ring-primary-600',
+                link: 'text-links',
             },
             size: {
-                small: 'text-xs',
-                default: 'text-sm',
-                large: 'text-base',
+                small: 'text-xs min-h-6',
+                default: 'text-sm min-h-8',
+                large: 'text-base min-h-10',
                 icon: 'rounded-full p-2.5',
             },
             disabled: {
@@ -41,7 +43,7 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
         compoundVariants: [
             {
                 variant: ['default', 'secondary', 'danger', 'ghost', 'outline'],
-                class: 'font-medium',
+                class: 'flex items-center justify-center gap-1 font-medium',
             },
             {
                 variant: ['default', 'danger'],
@@ -69,17 +71,17 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
             {
                 variant: 'default',
                 disabled: false,
-                class: 'hover:bg-primary/90',
+                class: 'hover:bg-primary-500',
             },
             {
                 variant: ['secondary', 'ghost', 'outline'],
                 disabled: false,
-                class: 'hover:bg-accent',
+                class: 'hover:bg-gray-50',
             },
             {
                 variant: 'danger',
                 disabled: false,
-                class: 'hover:bg-danger/80',
+                class: 'hover:bg-red-500',
             },
             {
                 variant: 'link',
@@ -93,6 +95,6 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
             disabled: false,
         },
     },
-);
+));
 /* eslint-enable vue/max-len */
 </script>

package/src/components/ui/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
     <HeadlessInput
-        ref="$input"
+        ref="$inputRef"
         :class="renderedClasses"
         v-bind="props"
         @update:model-value="$emit('update:modelValue', $event)"
@@ -40,14 +40,14 @@ const { inputClass, labelClass, ...props } = defineProps<
     InputProps & { inputClass?: HTMLAttributes['class']; labelClass?: HTMLAttributes['class'] }
 >();
 
-const $input = useTemplateRef('$input');
+const $input = useTemplateRef('$inputRef');
 const [inputAttrs, rootClasses] = useInputAttrs();
 const renderedClasses = computed(() => classes('relative flex items-start', rootClasses.value));
 const renderedInputClasses = computed(() =>
     classes(
-        'size-4 rounded text-primary hover:bg-gray-200 checked:hover:bg-primary/80 checked:border-0',
+        'size-4 rounded text-primary-600 not-checked:hover:bg-gray-200 checked:hover:text-primary-500 checked:border-0',
         {
-            'border-gray-300 focus:ring-primary': !$input.value?.errors,
+            'border-gray-300 focus:ring-primary-600': !$input.value?.errors,
             'border-red-400 border-2 focus:ring-red-600': $input.value?.errors,
         },
         inputClass,

package/src/components/ui/ConfirmModal.vue

@@ -1,5 +1,11 @@
 <template>
-    <Modal v-slot="{ close }" :title persistent>
+    <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<ConfirmModalExpose>} -->
+    <Modal
+        v-slot="{ close }"
+        :title="renderedTitle"
+        :title-hidden="titleHidden"
+        persistent
+    >
         <Form :form @submit="close([true, form.data()])">
             <Markdown :text="message" :actions />
 
@@ -10,7 +16,7 @@
                             v-model="form[name]"
                             type="checkbox"
                             :required="checkbox.required"
-                            class="border-primary text-primary hover:bg-primary/10 hover:checked:bg-primary/80 focus:ring-primary focus-visible:ring-primary rounded border-2"
+                            class="border-primary-600 text-primary-600 hover:bg-primary-50 hover:checked:bg-primary-500 focus:ring-primary-600 focus-visible:ring-primary-600 rounded border-2"
                         >
                         <span class="ml-1.5">{{ checkbox.label }}</span>
                     </label>
@@ -35,8 +41,10 @@ import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import Button from '@aerogel/core/components/ui/Button.vue';
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import { useConfirmModal } from '@aerogel/core/components/contracts/ConfirmModal';
-import type { ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
+import type { ConfirmModalExpose, ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<ConfirmModalProps>();
-const { form, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
+const { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
+
+defineExpose<ConfirmModalExpose>();
 </script>

package/src/components/ui/DropdownMenu.vue

@@ -4,30 +4,29 @@
             <slot />
         </DropdownMenuTrigger>
         <DropdownMenuPortal>
-            <DropdownMenuContent class="gap-y-0.5 rounded-lg bg-white p-1.5 shadow-lg ring-1 ring-black/5" :align>
-                <DropdownMenuItem
-                    v-for="(option, key) in options"
-                    :key
-                    class="flex w-full items-center rounded-lg px-2 py-2 text-sm text-gray-900 data-[highlighted]:bg-gray-100"
-                    @select="option.click"
-                >
-                    {{ option.label }}
-                </DropdownMenuItem>
-            </DropdownMenuContent>
+            <slot name="options">
+                <DropdownMenuOptions />
+            </slot>
         </DropdownMenuPortal>
     </DropdownMenuRoot>
 </template>
 
 <script setup lang="ts">
-import {
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuPortal,
-    DropdownMenuRoot,
-    DropdownMenuTrigger,
-} from 'reka-ui';
+import { DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui';
+import { computed, provide } from 'vue';
+import type { AcceptRefs } from '@aerogel/core/utils';
 
-import type { DropdownMenuProps } from '@aerogel/core/components/contracts/DropdownMenu';
+import type { DropdownMenuExpose, DropdownMenuProps } from '@aerogel/core/components/contracts/DropdownMenu';
 
-defineProps<DropdownMenuProps>();
+import DropdownMenuOptions from './DropdownMenuOptions.vue';
+
+const { align, side, options } = defineProps<DropdownMenuProps>();
+const expose = {
+    align,
+    side,
+    options: computed(() => options?.filter(Boolean)),
+} satisfies AcceptRefs<DropdownMenuExpose>;
+
+provide('dropdown-menu', expose);
+defineExpose(expose);
 </script>

package/src/components/ui/DropdownMenuOption.vue

@@ -0,0 +1,22 @@
+<template>
+    <DropdownMenuItem :class="renderedClasses" v-bind="props" @select="$emit('select')">
+        <slot />
+    </DropdownMenuItem>
+</template>
+
+<script setup lang="ts">
+import { classes } from '@aerogel/core/utils';
+import { computed } from 'vue';
+import { DropdownMenuItem } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { PrimitiveProps } from 'reka-ui';
+
+defineEmits<{ select: [] }>();
+
+const { class: rootClass, ...props } = defineProps<{ class?: HTMLAttributes['class'] } & PrimitiveProps>();
+const renderedClasses = computed(() =>
+    classes(
+        'flex w-full items-center gap-2 rounded-lg px-2 py-2 text-sm text-gray-900 data-[highlighted]:bg-gray-100',
+        rootClass,
+    ));
+</script>

package/src/components/ui/DropdownMenuOptions.vue

@@ -0,0 +1,44 @@
+<template>
+    <DropdownMenuContent
+        class="gap-y-0.5 rounded-lg bg-white p-1.5 shadow-lg ring-1 ring-black/5"
+        :align="dropdownMenu.align"
+        :side="dropdownMenu.side"
+    >
+        <slot>
+            <DropdownMenuOption
+                v-for="(option, key) in dropdownMenu.options"
+                :key
+                :as="option.route || option.href ? HeadlessButton : undefined"
+                :class="option.class"
+                v-bind="
+                    option.route || option.href
+                        ? {
+                            href: option.href,
+                            route: option.route,
+                            routeParams: option.routeParams,
+                            routeQuery: option.routeQuery,
+                        }
+                        : {}
+                "
+                @select="option.click?.()"
+            >
+                {{ option.label }}
+            </DropdownMenuOption>
+        </slot>
+    </DropdownMenuContent>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuContent } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { DropdownMenuExpose } from '@aerogel/core/components/contracts/DropdownMenu';
+
+import DropdownMenuOption from './DropdownMenuOption.vue';
+import HeadlessButton from '../headless/HeadlessButton.vue';
+
+const dropdownMenu = injectReactiveOrFail<DropdownMenuExpose>(
+    'dropdown-menu',
+    '<DropdownMenuOptions> must be a child of a <DropdownMenu>',
+);
+</script>

package/src/components/ui/EditableContent.vue

@@ -9,7 +9,7 @@
         <span v-if="type === 'number'" class="inline-block transition-[width]" :class="editing ? 'w-5' : 'w-0'" />
         <form class="w-full" :aria-hidden="formAriaHidden" @submit.prevent="$input?.blur()">
             <input
-                ref="$input"
+                ref="$inputRef"
                 v-model="draft"
                 :tabindex="tabindex ?? undefined"
                 :aria-label="ariaLabel ?? undefined"
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
+import { computed, ref, useTemplateRef, watchEffect } from 'vue';
 import type { HTMLAttributes } from 'vue';
 
 import { classes } from '@aerogel/core/utils/classes';
@@ -50,7 +50,7 @@ const {
     text: string;
     disabled?: boolean;
 }>();
-const $input = ref<HTMLElement>();
+const $input = useTemplateRef('$inputRef');
 const editing = ref<string | null>(null);
 const draft = ref(text);
 const renderedContentClass = computed(() => classes('inline whitespace-pre', contentClass));