@aerogel/core 0.1.1 → 0.1.2-next.0532ffc3845be5e86d770e8e823f5216ef34dfbf

package/src/components/ui/Combobox.vue

@@ -0,0 +1,94 @@
+<template>
+    <ComboboxRoot
+        ignore-filter
+        :open
+        :reset-search-term-on-blur="false"
+        :reset-search-term-on-select="false"
+        :model-value="acceptableValue"
+        :by="compareOptions"
+        @update:model-value="update($event)"
+    >
+        <Provide name="combobox" :value="combobox">
+            <ComboboxLabel />
+            <ComboboxTrigger @focus="open = true" @change="open = true" @blur="open = false" />
+            <HeadlessSelectError class="mt-2 text-sm text-red-600" />
+            <ComboboxOptions :new-input-value @select="open = false" />
+        </Provide>
+    </ComboboxRoot>
+</template>
+
+<script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
+import { ComboboxRoot } from 'reka-ui';
+import { computed, ref, watch } from 'vue';
+import type { AcceptableValue } from 'reka-ui';
+import type { Nullable } from '@noeldemartin/utils';
+
+import Provide from '@aerogel/core/components/vue/Provide.vue';
+import { useSelect } from '@aerogel/core/components/contracts/Select';
+import type { AcceptRefs } from '@aerogel/core/utils';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
+import type { FormFieldValue } from '@aerogel/core/forms';
+
+import ComboboxOptions from './ComboboxOptions.vue';
+import ComboboxTrigger from './ComboboxTrigger.vue';
+import ComboboxLabel from './ComboboxLabel.vue';
+import HeadlessSelectError from '../headless/HeadlessSelectError.vue';
+
+const emit = defineEmits<SelectEmits<T>>();
+const {
+    as = 'div',
+    compareOptions = (a, b) => a === b,
+    newInputValue,
+    ...props
+} = defineProps<SelectProps<T> & { newInputValue?: (value: string) => T }>();
+const {
+    expose,
+    acceptableValue,
+    update: baseUpdate,
+    renderOption,
+} = useSelect(
+    computed(() => ({ as, compareOptions, ...props })),
+    emit,
+);
+const open = ref(false);
+const optionsByLabel = computed(() =>
+    Object.fromEntries(expose.options.value?.map((option) => [option.label, option.value]) ?? []));
+const combobox = {
+    input: ref(acceptableValue.value ? renderOption(acceptableValue.value as T) : ''),
+    preventChange: ref(false),
+    $group: ref(null),
+} satisfies AcceptRefs<ComboboxContext>;
+
+function update(value: AcceptableValue) {
+    combobox.input.value = renderOption(value as T);
+
+    baseUpdate(value);
+}
+
+watch(expose.value, (value) => {
+    const newOptionLabel = renderOption(value as T);
+
+    if (combobox.input.value === newOptionLabel) {
+        return;
+    }
+
+    combobox.preventChange.value = true;
+    combobox.input.value = newOptionLabel;
+});
+
+watch(combobox.input, (value) => {
+    const newInputOption = newInputValue ? (newInputValue(value) as AcceptableValue) : value;
+    const newInputOptionLabel = renderOption(newInputOption as T);
+
+    if (newInputOptionLabel in optionsByLabel.value) {
+        update(optionsByLabel.value[newInputOptionLabel] as AcceptableValue);
+
+        return;
+    }
+
+    update(newInputOption);
+});
+
+defineExpose(expose);
+</script>

package/src/components/ui/ComboboxLabel.vue

@@ -0,0 +1,29 @@
+<template>
+    <Label
+        v-if="show"
+        :for="select.id"
+        :class="renderedClasses"
+        v-bind="$props"
+    >
+        <slot>
+            {{ select.label }}
+        </slot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { Label } from 'reka-ui';
+import type { LabelProps } from 'reka-ui';
+
+import { classes } from '@aerogel/core/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+defineProps<Omit<LabelProps, 'for'>>();
+
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxLabel> must be a child of a <Combobox>');
+const slots = useSlots();
+const show = computed(() => !!(select.label || slots.default));
+const renderedClasses = computed(() => classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass));
+</script>

package/src/components/ui/ComboboxOption.vue

@@ -0,0 +1,46 @@
+<template>
+    <ComboboxItem v-bind="$props" class="group p-1 outline-none" @select="onSelect($event)">
+        <div
+            class="relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center gap-2 truncate rounded-md px-2 py-1 text-sm select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50"
+        >
+            <slot>
+                {{ renderedLabel }}
+            </slot>
+        </div>
+    </ComboboxItem>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ComboboxItem, injectComboboxRootContext } from 'reka-ui';
+import { toString } from '@noeldemartin/utils';
+import type { ComboboxItemProps, SelectItemSelectEvent } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const emit = defineEmits<{ select: [] }>();
+
+const { value } = defineProps<ComboboxItemProps>();
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxOption> must be a child of a <Combobox>');
+const rootContext = injectComboboxRootContext();
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const renderedLabel = computed(() => {
+    const itemOption = select.options?.find((option) => option.value === value);
+
+    return itemOption ? select.renderOption(itemOption.value) : toString(value);
+});
+
+function onSelect(event: SelectItemSelectEvent<unknown>) {
+    if (rootContext.multiple.value || rootContext.disabled.value) {
+        return;
+    }
+
+    event.preventDefault();
+    combobox.preventChange = true;
+    rootContext.modelValue.value = value;
+
+    emit('select');
+}
+</script>

package/src/components/ui/ComboboxOptions.vue

@@ -0,0 +1,71 @@
+<template>
+    <ComboboxPortal>
+        <ComboboxContent
+            position="popper"
+            :align="select.align"
+            :side="select.side"
+            :side-offset="4"
+            :class="renderedClasses"
+        >
+            <ComboboxViewport>
+                <ComboboxEmpty class="group p-1 outline-none">
+                    <div
+                        class="relative flex max-w-[calc(100vw-2rem)] items-center gap-2 truncate rounded-md px-2 py-1 text-sm select-none *:truncate"
+                    >
+                        {{ $td('ui.comboboxEmpty', 'No options found') }}
+                    </div>
+                </ComboboxEmpty>
+
+                <ComboboxGroup ref="$group">
+                    <ComboboxOption
+                        v-if="showInputOption"
+                        :value="newInputValue?.(combobox.input) ?? (combobox.input as AcceptableValue)"
+                        @select="$emit('select')"
+                    >
+                        {{ combobox.input }}
+                    </ComboboxOption>
+                    <ComboboxOption
+                        v-for="option in filteredOptions"
+                        :key="option.key"
+                        :value="option.value"
+                        @select="$emit('select')"
+                    />
+                </ComboboxGroup>
+            </ComboboxViewport>
+        </ComboboxContent>
+    </ComboboxPortal>
+</template>
+
+<script setup lang="ts">
+import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxPortal, ComboboxViewport, useFilter } from 'reka-ui';
+import { computed, useTemplateRef, watch } from 'vue';
+import type { Nullable } from '@noeldemartin/utils';
+import type { AcceptableValue } from 'reka-ui';
+
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { FormFieldValue } from '@aerogel/core/forms';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+
+import ComboboxOption from './ComboboxOption.vue';
+
+defineEmits<{ select: [] }>();
+
+const { newInputValue } = defineProps<{ newInputValue?: (value: string) => Nullable<FormFieldValue> }>();
+const { contains } = useFilter({ sensitivity: 'base' });
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxOptions> must be a child of a <Combobox>');
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const $group = useTemplateRef('$group');
+const filteredOptions = computed(
+    () => select.options?.filter((option) => contains(option.label, combobox.input)) ?? [],
+);
+const showInputOption = computed(
+    () => combobox.input && !filteredOptions.value.some((option) => option.label === combobox.input),
+);
+const renderedClasses = classes(
+    'max-h-(--reka-combobox-content-available-height) min-w-(--reka-combobox-trigger-width)',
+    'z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden',
+);
+
+watch($group, () => (combobox.$group = $group.value?.$el ?? null));
+</script>

package/src/components/ui/ComboboxTrigger.vue

@@ -0,0 +1,67 @@
+<template>
+    <ComboboxAnchor class="relative">
+        <ComboboxInput
+            :id="select.id"
+            v-model="combobox.input"
+            :placeholder="select.placeholder"
+            :class="renderedRootClasses"
+            :display-value="select.renderOption"
+            :name="select.name"
+            @focus="$emit('focus')"
+            @blur="onBlur()"
+            @keydown.esc="$emit('blur')"
+        />
+        <div v-if="select?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <IconExclamationSolid class="size-5 text-red-500" />
+        </div>
+    </ComboboxAnchor>
+</template>
+
+<script setup lang="ts">
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import { ComboboxAnchor, ComboboxInput } from 'reka-ui';
+import { computed, watch } from 'vue';
+
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+
+const emit = defineEmits<{ focus: []; change: []; blur: [] }>();
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxTrigger> must be a child of a <Combobox>');
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const renderedRootClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
+        {
+            'mt-1': select.label,
+            'focus:ring-primary-600': !select.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !select.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': select.errors,
+        },
+    ));
+
+function onBlur() {
+    const elements = Array.from(document.querySelectorAll(':hover'));
+
+    if (elements.some((element) => combobox.$group?.contains(element))) {
+        return;
+    }
+
+    emit('blur');
+}
+
+watch(
+    () => combobox.input,
+    () => {
+        if (combobox.preventChange) {
+            combobox.preventChange = false;
+
+            return;
+        }
+
+        emit('change');
+    },
+);
+</script>

package/src/components/ui/ConfirmModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<ConfirmModalExpose>} -->
+    <!-- @vue-generic {import('@aerogel/core/components/contracts/ConfirmModal').ConfirmModalResult} -->
     <Modal
         v-slot="{ close }"
         :title="renderedTitle"
@@ -41,10 +41,15 @@ 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 { ConfirmModalExpose, ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
+import type {
+    ConfirmModalEmits,
+    ConfirmModalExpose,
+    ConfirmModalProps,
+} from '@aerogel/core/components/contracts/ConfirmModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<ConfirmModalProps>();
 const { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
 
+defineEmits<ConfirmModalEmits>();
 defineExpose<ConfirmModalExpose>();
 </script>

package/src/components/ui/Details.vue

@@ -0,0 +1,33 @@
+<template>
+    <details class="group">
+        <summary :class="renderedSummaryClasses">
+            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
+            <slot name="label">
+                <span>{{ label ?? $td('ui.details', 'Details') }}</span>
+            </slot>
+        </summary>
+
+        <div :class="renderedContentClasses">
+            <slot />
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import { classes } from '@aerogel/core/utils';
+import { type HTMLAttributes, computed } from 'vue';
+
+const {
+    label = undefined,
+    contentClass,
+    summaryClass,
+} = defineProps<{ label?: string; contentClass?: HTMLAttributes['class']; summaryClass?: HTMLAttributes['class'] }>();
+const renderedContentClasses = computed(() => classes('pt-2 pl-4', contentClass));
+const renderedSummaryClasses = computed(() =>
+    classes(
+        '-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 max-w-full',
+        'hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700',
+        summaryClass,
+    ));
+</script>

package/src/components/ui/Form.vue

@@ -1,5 +1,5 @@
 <template>
-    <form @submit.prevent="form?.submit()">
+    <form @submit.prevent="form ? form.submit() : $emit('submit')">
         <slot />
     </form>
 </template>

package/src/components/ui/Input.vue

@@ -13,8 +13,8 @@
                 <IconExclamationSolid class="size-5 text-red-500" />
             </div>
         </div>
-        <HeadlessInputDescription class="mt-2 text-sm text-gray-600" />
-        <HeadlessInputError class="mt-2 text-sm text-red-600" />
+        <HeadlessInputDescription :class="renderedDescriptionClasses" />
+        <HeadlessInputError :class="renderedErrorClasses" />
     </HeadlessInput>
 </template>
 
@@ -35,13 +35,21 @@ import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/
 
 defineOptions({ inheritAttrs: false });
 defineEmits<InputEmits>();
-const { label, inputClass, wrapperClass, ...props } = defineProps<
-    InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
+
+const { label, inputClass, wrapperClass, descriptionClass, errorClass, ...props } = defineProps<
+    InputProps & {
+        inputClass?: HTMLAttributes['class'];
+        wrapperClass?: HTMLAttributes['class'];
+        descriptionClass?: HTMLAttributes['class'];
+        errorClass?: HTMLAttributes['class'];
+    }
 >();
 const $input = useTemplateRef('$inputRef');
 const [inputAttrs, rootClasses] = useInputAttrs();
 const renderedWrapperClasses = computed(() =>
     classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
+const renderedDescriptionClasses = computed(() => classes('mt-2 text-sm text-gray-600', descriptionClass));
+const renderedErrorClasses = computed(() => classes('mt-2 text-sm text-red-600', errorClass));
 const renderedInputClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len

package/src/components/ui/LoadingModal.vue

@@ -1,11 +1,10 @@
 <template>
     <Modal
         persistent
-        class="flex"
         wrapper-class="w-auto"
         :title="renderedTitle"
         :title-hidden
-        :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
+        :class="{ 'flex-col-reverse': showProgress, 'flex-row items-center justify-center gap-2': !showProgress }"
     >
         <ProgressBar
             v-if="showProgress"

package/src/components/ui/Modal.vue

@@ -7,14 +7,20 @@
         :persistent
     >
         <HeadlessModalOverlay
-            class="fixed inset-0 animate-[fade-in_var(--tw-duration)_ease-in-out] transition-opacity duration-300 will-change-[opacity]"
+            class="fixed inset-0 transition-opacity duration-300 will-change-[opacity]"
             :class="{
-                'bg-black/30': context.childIndex === 1,
-                'opacity-0': context.childIndex === 1 && context.modal.closing,
+                'animate-[fade-in_var(--tw-duration)_ease-in-out]': !hasRenderedModals,
+                'bg-black/30': firstVisibleModal?.id === id || (!firstVisibleModal && modals[0]?.id === id),
+                'opacity-0': !firstVisibleModal,
+                hidden: renderFullscreen,
             }"
         />
         <HeadlessModalContent v-bind="contentProps" :class="renderedWrapperClass">
-            <div v-if="!persistent && !closeHidden" class="absolute top-0 right-0 hidden pt-3.5 pr-2.5 sm:block">
+            <div
+                v-if="!persistent && !closeHidden"
+                class="absolute top-0 right-0 pt-3.5 pr-2.5"
+                :class="{ 'hidden sm:block': !renderFullscreen }"
+            >
                 <button
                     type="button"
                     class="clickable z-10 rounded-full p-2.5 text-gray-400 hover:text-gray-500"
@@ -52,14 +58,13 @@
     </HeadlessModal>
 </template>
 
-<script setup lang="ts" generic="T = void">
+<script lang="ts">
 import IconClose from '~icons/zondicons/close';
 
-import { after } from '@noeldemartin/utils';
-import { computed } from 'vue';
 import { useForwardExpose } from 'reka-ui';
+import { computed, onMounted } from 'vue';
 import type { ComponentPublicInstance, HTMLAttributes, Ref } from 'vue';
-import type { Nullable } from '@noeldemartin/utils';
+import { type Nullable, after } from '@noeldemartin/utils';
 
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import HeadlessModal from '@aerogel/core/components/headless/HeadlessModal.vue';
@@ -69,13 +74,17 @@ import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModa
 import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
 import UI from '@aerogel/core/ui/UI';
 import { classes } from '@aerogel/core/utils/classes';
-import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import { useEvent } from '@aerogel/core/utils/composition/events';
+import { reactiveSet } from '@aerogel/core/utils';
+import { injectModal, modals, useModal } from '@aerogel/core/ui/modals';
+import type { ModalController } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
-import type { UIModalContext } from '@aerogel/core/ui/UI';
 
-type HeadlessModalInstance = ComponentPublicInstance & ModalExpose<T>;
+const renderedModals = reactiveSet<ModalController>();
+</script>
+
+<script setup lang="ts" generic="T = void">
+type HeadlessModalInstance = ComponentPublicInstance & ModalExpose;
 
 const {
     class: contentClass = '',
@@ -85,6 +94,8 @@ const {
     description,
     persistent,
     closeHidden,
+    fullscreen,
+    fullscreenOnMobile,
     ...props
 } = defineProps<
     ModalProps & {
@@ -95,37 +106,46 @@ const {
 >();
 
 defineSlots<ModalSlots<T>>();
-defineExpose<AcceptRefs<ModalExpose<T>>>({
-    close: async (result) => $modal.value?.close(result),
+defineExpose<AcceptRefs<ModalExpose>>({
     $content: computed(() => $modal.value?.$content),
 });
 
 const { forwardRef, currentRef } = useForwardExpose<HeadlessModalInstance>();
+const { id, visible } = useModal();
 const $modal = currentRef as Ref<Nullable<HeadlessModalInstance>>;
-const context = injectReactiveOrFail<UIModalContext>('modal');
-const inForeground = computed(() => !context.modal.closing && context.childIndex === UI.openModals.length);
+const modal = injectModal();
+const inForeground = computed(
+    () => visible.value && modals.value.toReversed().find((modal) => modal.visible.value)?.id === id.value,
+);
+const firstVisibleModal = computed(() => modals.value.find((modal) => modal.visible.value));
+const hasRenderedModals = computed(() => modals.value.some((modal) => renderedModals.has(modal)));
 const contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
 const renderedContentClass = computed(() =>
-    classes('max-h-[90vh] overflow-auto px-4 pb-4', { 'pt-4': !title || titleHidden }, contentClass));
+    classes(
+        'overflow-auto px-4 pb-4 flex flex-col flex-1',
+        { 'pt-4': !title || titleHidden, 'max-h-[90vh]': !renderFullscreen.value },
+        contentClass,
+    ));
+const renderFullscreen = computed(() => fullscreen || (fullscreenOnMobile && UI.mobile));
 const renderedWrapperClass = computed(() =>
     classes(
-        'isolate fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-lg bg-white text-left shadow-xl sm:max-w-lg',
-        'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
-        'transition-[scale,opacity] will-change-[scale,opacity] duration-300',
-        {
-            'scale-50 opacity-0': !inForeground.value,
-            'scale-100 opacity-100': inForeground.value,
-        },
+        'isolate fixed z-50 flex flex-col overflow-hidden bg-white text-left duration-300',
+        renderFullscreen.value
+            ? [
+                'inset-0 transition-[transform,translate] will-change-[transform,translate]',
+                renderedModals.has(modal.value) || 'animate-[slide-in_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'translate-y-0' : 'translate-y-full',
+            ]
+            : [
+                'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full',
+                'max-w-[calc(100%-2rem)] rounded-lg shadow-xl sm:max-w-lg',
+                'transition-[scale,opacity] will-change-[scale,opacity]',
+                renderedModals.has(modal.value) ||
+                      'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'scale-100 opacity-100' : 'scale-50 opacity-0',
+            ],
         wrapperClass,
     ));
 
-useEvent('modal-will-close', async ({ modal: { id } }) => {
-    if (id !== context.modal.id) {
-        return;
-    }
-
-    // Wait for transitions to finish
-    await after({ ms: 300 });
-});
+onMounted(() => after(500).then(() => renderedModals.add(modal.value)));
 </script>

package/src/components/ui/ProgressBar.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+    <div class="relative mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
         <div :class="filledClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
+        <div
+            v-if="overflowWidthPercentage"
+            :class="overflowClasses"
+            :style="{ width: `${overflowWidthPercentage}%` }"
+        />
         <span class="sr-only">
             {{
                 $td('ui.progress', '{progress}% complete', {
@@ -18,8 +23,9 @@ import { classes } from '@aerogel/core/utils/classes';
 import type Job from '@aerogel/core/jobs/Job';
 import type { Falsifiable } from '@aerogel/core/utils';
 
-const { filledClass, progress, job } = defineProps<{
+const { filledClass, overflowClass, progress, job } = defineProps<{
     filledClass?: string;
+    overflowClass?: string;
     progress?: number;
     job?: Falsifiable<Job>;
 }>();
@@ -28,6 +34,12 @@ let cleanup: Falsifiable<Function>;
 const jobProgress = ref(0);
 const filledClasses = computed(() =>
     classes('size-full transition-transform duration-500 rounded-r-full ease-linear bg-primary-600', filledClass));
+const overflowClasses = computed(() =>
+    classes(
+        'absolute inset-y-0 right-0 size-full rounded-r-full',
+        'bg-primary-900 transition-[width] duration-500 ease-linear',
+        overflowClass,
+    ));
 const renderedProgress = computed(() => {
     if (typeof progress === 'number') {
         return progress;
@@ -35,6 +47,8 @@ const renderedProgress = computed(() => {
 
     return jobProgress.value;
 });
+const overflowWidthPercentage = computed(() =>
+    renderedProgress.value > 1 ? 100 * ((renderedProgress.value - 1) / renderedProgress.value) : null);
 
 watch(
     () => job,

package/src/components/ui/PromptModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<PromptModalExpose>} -->
+    <!-- @vue-generic {import('@aerogel/core/components/contracts/PromptModal').PromptModalResult} -->
     <Modal v-slot="{ close }" :title="renderedTitle" persistent>
         <Form :form @submit="close(form.draft)">
             <Markdown v-if="renderedMessage" :text="renderedMessage" />
@@ -29,10 +29,15 @@ import Form from '@aerogel/core/components/ui/Form.vue';
 import Input from '@aerogel/core/components/ui/Input.vue';
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import { usePromptModal } from '@aerogel/core/components/contracts/PromptModal';
-import type { PromptModalExpose, PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type {
+    PromptModalEmits,
+    PromptModalExpose,
+    PromptModalProps,
+} from '@aerogel/core/components/contracts/PromptModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<PromptModalProps>();
 const { form, renderedTitle, renderedMessage, renderedAcceptText, renderedCancelText } = usePromptModal(props);
 
+defineEmits<PromptModalEmits>();
 defineExpose<PromptModalExpose>();
 </script>

package/src/components/ui/Select.vue

@@ -3,6 +3,7 @@
         <SelectLabel />
         <slot>
             <SelectTrigger />
+            <HeadlessSelectError class="mt-2 text-sm text-red-600" />
             <SelectOptions />
         </slot>
     </HeadlessSelect>
@@ -19,6 +20,7 @@ import type { FormFieldValue } from '@aerogel/core/forms';
 import SelectLabel from './SelectLabel.vue';
 import SelectOptions from './SelectOptions.vue';
 import SelectTrigger from './SelectTrigger.vue';
+import HeadlessSelectError from '../headless/HeadlessSelectError.vue';
 
 defineProps<SelectProps<T>>();
 defineEmits<SelectEmits<T>>();