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

package/src/components/ui/ErrorLogs.vue

@@ -0,0 +1,19 @@
+<template>
+    <Button
+        v-if="$errors.logs.length > 0"
+        size="icon"
+        variant="ghost"
+        :title="$td('errors.viewLogs', 'View error logs')"
+        :aria-label="$td('errors.viewLogs', 'View error logs')"
+        @click="$ui.modal(ErrorLogsModal)"
+    >
+        <IconWarning class="size-6 text-red-500" />
+    </Button>
+</template>
+
+<script setup lang="ts">
+import IconWarning from '~icons/ion/warning';
+
+import Button from '@aerogel/core/components/ui/Button.vue';
+import ErrorLogsModal from '@aerogel/core/components/ui/ErrorLogsModal.vue';
+</script>

package/src/components/ui/ErrorLogsModal.vue

@@ -0,0 +1,48 @@
+<template>
+    <Modal :title="$td('errors.report', 'Errors ({count})', { count: $errors.logs.length })">
+        <ol>
+            <li
+                v-for="(log, index) of $errors.logs"
+                :key="index"
+                class="mb-2 flex max-w-prose min-w-56 justify-between py-2 last:mb-0"
+            >
+                <div>
+                    <h3 class="font-medium">
+                        {{ log.report.title }}
+                    </h3>
+                    <time :datetime="log.date.toISOString()" class="text-xs text-gray-700">
+                        {{ log.date.toLocaleTimeString() }}
+                    </time>
+                    <Markdown
+                        class="text-sm text-gray-500"
+                        :text="log.report.description ?? getErrorMessage(log.report)"
+                    />
+                </div>
+                <Button
+                    size="icon"
+                    variant="ghost"
+                    :aria-label="$td('errors.viewDetails', 'View details')"
+                    :title="$td('errors.viewDetails', 'View details')"
+                    class="self-center"
+                    @click="
+                        $errors.inspect(
+                            log.report,
+                            $errors.logs.map(({ report }) => report)
+                        )
+                    "
+                >
+                    <IconViewShow class="size-4" aria-hidden="true" />
+                </Button>
+            </li>
+        </ol>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconViewShow from '~icons/zondicons/view-show';
+
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import { getErrorMessage } from '@aerogel/core/errors';
+</script>

package/src/components/ui/ErrorReportModal.vue

@@ -1,12 +1,18 @@
 <template>
-    <Modal wrapper-class="p-0 sm:w-auto sm:min-w-lg sm:max-w-[80vw]">
+    <Modal
+        :title="$td('errors.report', 'Error report')"
+        title-hidden
+        close-hidden
+        class="p-0"
+        wrapper-class="sm:w-auto sm:min-w-lg sm:max-w-[80vw]"
+    >
         <div class="px-4 pt-5 pb-4">
             <h2 class="flex justify-between gap-4">
                 <div class="flex items-center gap-2">
                     <IconExclamationSolid class="size-5 text-red-600" />
                     <ErrorReportModalTitle
                         class="text-lg leading-6 font-semibold text-gray-900"
-                        :report="report"
+                        :report="activeReport"
                         :current-report="activeReportIndex + 1"
                         :total-reports="reports.length"
                     />
@@ -33,11 +39,11 @@
                         </Button>
                     </span>
                 </div>
-                <ErrorReportModalButtons :report class="gap-0.5" />
+                <ErrorReportModalButtons :report="activeReport" class="gap-0.5" />
             </h2>
-            <Markdown v-if="report.description" :text="report.description" class="text-gray-600" />
+            <Markdown v-if="activeReport.description" :text="activeReport.description" class="text-gray-600" />
         </div>
-        <div class="-mt-2 max-h-[80vh] overflow-auto bg-red-800/10">
+        <div class="-mt-2 max-h-[75vh] overflow-auto bg-red-800/10">
             <pre class="p-4 text-xs text-red-800" v-text="details" />
         </div>
     </Modal>
@@ -54,9 +60,14 @@ import ErrorReportModalButtons from '@aerogel/core/components/ui/ErrorReportModa
 import ErrorReportModalTitle from '@aerogel/core/components/ui/ErrorReportModalTitle.vue';
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import { useErrorReportModal } from '@aerogel/core/components/contracts/ErrorReportModal';
-import type { ErrorReportModalProps } from '@aerogel/core/components/contracts/ErrorReportModal';
+import type {
+    ErrorReportModalExpose,
+    ErrorReportModalProps,
+} from '@aerogel/core/components/contracts/ErrorReportModal';
 
 const props = defineProps<ErrorReportModalProps>();
 
-const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
+const { activeReportIndex, details, nextReportText, previousReportText, activeReport } = useErrorReportModal(props);
+
+defineExpose<ErrorReportModalExpose>();
 </script>

package/src/components/ui/Input.vue

@@ -1,6 +1,6 @@
 <template>
     <HeadlessInput
-        ref="$input"
+        ref="$inputRef"
         :label="label"
         :class="rootClasses"
         v-bind="props"
@@ -38,7 +38,7 @@ defineEmits<InputEmits>();
 const { label, inputClass, wrapperClass, ...props } = defineProps<
     InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
 >();
-const $input = useTemplateRef('$input');
+const $input = useTemplateRef('$inputRef');
 const [inputAttrs, rootClasses] = useInputAttrs();
 const renderedWrapperClasses = computed(() =>
     classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
@@ -47,8 +47,8 @@ const renderedInputClasses = computed(() =>
         // 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',
         {
+            'focus:ring-primary-600': !$input.value?.errors,
             'text-gray-900 shadow-2xs ring-gray-300 placeholder:text-gray-400': !$input.value?.errors,
-            'hover:ring-1 hover:ring-primary/80 hover:ring-inset focus:ring-primary': !$input.value?.errors,
             'pr-10 text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
         },
         inputClass,

package/src/components/ui/LoadingModal.vue

@@ -3,7 +3,8 @@
         persistent
         class="flex"
         wrapper-class="w-auto"
-        :title
+        :title="renderedTitle"
+        :title-hidden
         :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
     >
         <ProgressBar
@@ -12,7 +13,7 @@
             :job
             class="min-w-[min(400px,80vw)]"
         />
-        <IconSpinner v-else class="text-primary mr-1 size-6" />
+        <IconSpinner v-else class="text-primary-600 mr-1 size-6" />
         <Markdown :text="renderedMessage" />
     </Modal>
 </template>
@@ -24,9 +25,10 @@ import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import ProgressBar from '@aerogel/core/components/ui/ProgressBar.vue';
 import { useLoadingModal } from '@aerogel/core/components/contracts/LoadingModal';
-import type { LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+import type { LoadingModalExpose, LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
 
 const props = defineProps<LoadingModalProps>();
+const { renderedTitle, renderedMessage, titleHidden, showProgress } = useLoadingModal(props);
 
-const { renderedMessage, showProgress } = useLoadingModal(props);
+defineExpose<LoadingModalExpose>();
 </script>

package/src/components/ui/Markdown.vue

@@ -7,7 +7,7 @@ import { computed, h, useAttrs } from 'vue';
 import { isInstanceOf } from '@noeldemartin/utils';
 import type { VNode } from 'vue';
 
-import { renderMarkdown } from '@aerogel/core/utils/markdown';
+import { getMarkdownRouter, renderMarkdown } from '@aerogel/core/utils/markdown';
 import { translate, translateWithDefault } from '@aerogel/core/lang';
 import { renderVNode } from '@aerogel/core/utils/vue';
 
@@ -65,5 +65,33 @@ async function onClick(event: Event) {
 
         return;
     }
+
+    if (isInstanceOf(target, HTMLAnchorElement) && target.dataset.markdownRoute) {
+        const router = getMarkdownRouter();
+
+        if (router) {
+            event.preventDefault();
+
+            router.visit(target.dataset.markdownRoute);
+        }
+
+        return;
+    }
 }
 </script>
+
+<style scoped>
+/* @apply .text-links .font-normal .no-underline .hover:underline; */
+* :deep(a) {
+    --tw-font-weight: var(--font-weight-normal);
+    text-decoration-line: none;
+    color: var(--color-links);
+    font-weight: var(--font-weight-normal);
+}
+
+@media (hover: hover) {
+    * :deep(a:hover) {
+        text-decoration-line: underline;
+    }
+}
+</style>

package/src/components/ui/Modal.vue

@@ -1,24 +1,42 @@
 <template>
+    <!-- @vue-generic {T} -->
     <HeadlessModal
         v-slot="{ close }"
         v-bind="props"
-        ref="$modal"
+        :ref="($modal) => forwardRef($modal as HeadlessModalInstance)"
         :persistent
     >
-        <HeadlessModalOverlay class="fixed inset-0 bg-gray-500/75" />
-
-        <HeadlessModalContent :class="renderedWrapperClass">
-            <div v-if="!persistent && dismissable" class="absolute top-0 right-0 hidden pt-1.5 pr-1.5 sm:block">
-                <Button variant="ghost" size="icon" @click="close()">
+        <HeadlessModalOverlay
+            class="fixed inset-0 animate-[fade-in_var(--tw-duration)_ease-in-out] transition-opacity duration-300 will-change-[opacity]"
+            :class="{
+                'bg-black/30': context.childIndex === 1,
+                'opacity-0': context.childIndex === 1 && context.modal.closing,
+            }"
+        />
+        <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">
+                <button
+                    type="button"
+                    class="clickable z-10 rounded-full p-2.5 text-gray-400 hover:text-gray-500"
+                    @click="close()"
+                >
                     <span class="sr-only">{{ $td('ui.close', 'Close') }}</span>
-                    <IconClose class="size-3 text-gray-400" />
-                </Button>
+                    <IconClose class="size-4" />
+                </button>
             </div>
 
-            <HeadlessModalTitle v-if="title" class="text-base font-semibold text-gray-900">
+            <HeadlessModalTitle
+                v-if="title"
+                class="px-4 pt-5 pb-2 text-base font-semibold text-gray-900"
+                :class="{ 'sr-only': titleHidden }"
+            >
                 <Markdown :text="title" inline />
             </HeadlessModalTitle>
 
+            <HeadlessModalDescription v-if="description" :class="{ 'sr-only': descriptionHidden }">
+                <Markdown :text="description" class="mt-1 text-sm leading-6 text-gray-500" />
+            </HeadlessModalDescription>
+
             <div :class="renderedContentClass">
                 <slot :close />
             </div>
@@ -26,45 +44,80 @@
     </HeadlessModal>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T = void">
 import IconClose from '~icons/zondicons/close';
 
-import { computed, useTemplateRef } from 'vue';
-import type { HTMLAttributes } from 'vue';
+import { after } from '@noeldemartin/utils';
+import { computed } from 'vue';
+import { useForwardExpose } from 'reka-ui';
+import type { ComponentPublicInstance, HTMLAttributes, Ref } from 'vue';
+import type { Nullable } from '@noeldemartin/utils';
 
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
-import Button from '@aerogel/core/components/ui/Button.vue';
 import HeadlessModal from '@aerogel/core/components/headless/HeadlessModal.vue';
 import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModalContent.vue';
+import HeadlessModalDescription from '@aerogel/core/components/headless/HeadlessModalDescription.vue';
 import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModalOverlay.vue';
 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 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 {
     class: contentClass = '',
-    dismissable = true,
     wrapperClass = '',
     title,
+    titleHidden,
+    description,
     persistent,
+    closeHidden,
     ...props
 } = defineProps<
     ModalProps & {
-        dismissable?: boolean;
         wrapperClass?: HTMLAttributes['class'];
         class?: HTMLAttributes['class'];
+        closeHidden?: boolean;
     }
 >();
 
-const $modal = useTemplateRef('$modal');
-const renderedContentClass = computed(() => classes({ 'mt-2': title }, contentClass));
+defineSlots<ModalSlots<T>>();
+defineExpose<AcceptRefs<ModalExpose<T>>>({
+    close: async (result) => $modal.value?.close(result),
+    $content: computed(() => $modal.value?.$content),
+});
+
+const { forwardRef, currentRef } = useForwardExpose<HeadlessModalInstance>();
+const $modal = currentRef as Ref<Nullable<HeadlessModalInstance>>;
+const context = injectReactiveOrFail<UIModalContext>('modal');
+const inForeground = computed(() => !context.modal.closing && context.childIndex === UI.openModals.length);
+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));
 const renderedWrapperClass = computed(() =>
     classes(
-        // eslint-disable-next-line vue/max-len
-        '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 px-4 pt-5 pb-4 text-left shadow-xl sm:max-w-lg',
+        '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,
+        },
         wrapperClass,
     ));
 
-defineSlots<ModalSlots>();
-defineExpose<ModalExpose>({ close: async () => $modal.value?.close() });
+useEvent('modal-will-close', async ({ modal: { id } }) => {
+    if (id !== context.modal.id) {
+        return;
+    }
+
+    // Wait for transitions to finish
+    await after({ ms: 300 });
+});
 </script>

package/src/components/ui/ModalContext.vue

@@ -5,7 +5,8 @@
 <script setup lang="ts">
 import { computed, provide, toRef, unref } from 'vue';
 
-import type { UIModal, UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { UIModal } from '@aerogel/core/ui/UI.state';
+import type { UIModalContext } from '@aerogel/core/ui/UI';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
 
 const props = defineProps<{

package/src/components/ui/ProgressBar.vue

@@ -16,17 +16,18 @@ import { computed, onUnmounted, ref, watch } from 'vue';
 
 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<{
     filledClass?: string;
     progress?: number;
-    job?: Job;
+    job?: Falsifiable<Job>;
 }>();
 
-let cleanup: Function | undefined;
+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', filledClass));
+    classes('size-full transition-transform duration-500 rounded-r-full ease-linear bg-primary-600', filledClass));
 const renderedProgress = computed(() => {
     if (typeof progress === 'number') {
         return progress;
@@ -38,13 +39,13 @@ const renderedProgress = computed(() => {
 watch(
     () => job,
     () => {
-        cleanup?.();
+        cleanup && cleanup();
 
-        jobProgress.value = job?.progress ?? 0;
-        cleanup = job?.listeners.add({ onUpdated: (value) => (jobProgress.value = value) });
+        jobProgress.value = job ? job.progress : 0;
+        cleanup = job && job.listeners.add({ onUpdated: (value) => (jobProgress.value = value) });
     },
     { immediate: true },
 );
 
-onUnmounted(() => cleanup?.());
+onUnmounted(() => cleanup && cleanup());
 </script>

package/src/components/ui/PromptModal.vue

@@ -1,7 +1,8 @@
 <template>
-    <Modal v-slot="{ close }" :title persistent>
+    <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<PromptModalExpose>} -->
+    <Modal v-slot="{ close }" :title="renderedTitle" persistent>
         <Form :form @submit="close(form.draft)">
-            <Markdown :text="message" />
+            <Markdown v-if="renderedMessage" :text="renderedMessage" />
             <Input
                 name="draft"
                 class="mt-2"
@@ -13,7 +14,7 @@
                 <Button :variant="acceptVariant" submit>
                     {{ renderedAcceptText }}
                 </Button>
-                <Button :variant="cancelVariant" @click="close(false)">
+                <Button :variant="cancelVariant" @click="close()">
                     {{ renderedCancelText }}
                 </Button>
             </div>
@@ -28,8 +29,10 @@ 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 { PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type { PromptModalExpose, PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<PromptModalProps>();
-const { form, renderedAcceptText, renderedCancelText } = usePromptModal(props);
+const { form, renderedTitle, renderedMessage, renderedAcceptText, renderedCancelText } = usePromptModal(props);
+
+defineExpose<PromptModalExpose>();
 </script>

package/src/components/ui/Select.vue

@@ -1,5 +1,5 @@
 <template>
-    <HeadlessSelect v-bind="$props" @update:model-value="$emit('update:modelValue', $event)">
+    <HeadlessSelect :ref="forwardRef" v-bind="$props" @update:model-value="$emit('update:modelValue', $event)">
         <SelectLabel />
         <slot>
             <SelectTrigger />
@@ -8,14 +8,20 @@
     </HeadlessSelect>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
+import { useForwardExpose } from 'reka-ui';
+import type { Nullable } from '@noeldemartin/utils';
+
 import HeadlessSelect from '@aerogel/core/components/headless/HeadlessSelect.vue';
 import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
+import type { FormFieldValue } from '@aerogel/core/forms';
 
 import SelectLabel from './SelectLabel.vue';
 import SelectOptions from './SelectOptions.vue';
 import SelectTrigger from './SelectTrigger.vue';
 
-defineProps<SelectProps>();
-defineEmits<SelectEmits>();
+defineProps<SelectProps<T>>();
+defineEmits<SelectEmits<T>>();
+
+const { forwardRef } = useForwardExpose();
 </script>

package/src/components/ui/SelectLabel.vue

@@ -1,10 +1,21 @@
 <template>
-    <HeadlessSelectLabel v-if="$slots.default" class="block text-sm leading-6 font-medium text-gray-900">
+    <HeadlessSelectLabel v-if="$slots.default" :class="renderedClasses">
         <slot />
     </HeadlessSelectLabel>
-    <HeadlessSelectLabel v-else class="block text-sm leading-6 font-medium text-gray-900" />
+    <HeadlessSelectLabel v-else :class="renderedClasses" />
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
 import HeadlessSelectLabel from '@aerogel/core/components/headless/HeadlessSelectLabel.vue';
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+
+const select = injectReactiveOrFail<SelectExpose>('select', '<SelectLabel> must be a child of a <Select>');
+const renderedClasses = computed(() =>
+    classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass, rootClasses));
 </script>

package/src/components/ui/SelectOption.vue

@@ -0,0 +1,29 @@
+<template>
+    <HeadlessSelectOption :class="renderedOuterClasses" :value>
+        <div :class="renderedInnerClasses">
+            <slot />
+        </div>
+    </HeadlessSelectOption>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AcceptableValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessSelectOption from '@aerogel/core/components/headless/HeadlessSelectOption.vue';
+import { classes } from '@aerogel/core/utils';
+
+const { class: outerClass, innerClass } = defineProps<{
+    value: AcceptableValue;
+    class?: HTMLAttributes['class'];
+    innerClass?: HTMLAttributes['class'];
+}>();
+const renderedOuterClasses = computed(() => classes('group p-1 outline-none', outerClass));
+const renderedInnerClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center truncate rounded-md gap-2 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',
+        innerClass,
+    ));
+</script>

package/src/components/ui/SelectOptions.vue

@@ -1,31 +1,35 @@
 <template>
-    <HeadlessSelectOptions
-        class="z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden"
-    >
-        <slot>
-            <HeadlessSelectOption
-                v-for="option of select?.options ?? []"
-                :key="option.key"
-                :value="option.value"
-                class="group p-1 outline-none"
-            >
-                <div
-                    class="relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center truncate rounded-md px-2 py-1 select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50"
-                >
-                    <span class="text-sm">
-                        {{ option.label }}
-                    </span>
-                </div>
-            </HeadlessSelectOption>
+    <HeadlessSelectOptions :class="renderedClasses">
+        <slot v-if="select.options?.length">
+            <SelectOption v-for="option of select?.options ?? []" :key="option.key" :value="option.value">
+                {{ option.label }}
+            </SelectOption>
+        </slot>
+        <slot v-else>
+            <SelectOption disabled :value="null">
+                {{ $td('ui.selectEmpty', 'No options available') }}
+            </SelectOption>
         </slot>
     </HeadlessSelectOptions>
 </template>
 
 <script setup lang="ts">
-import HeadlessSelectOption from '@aerogel/core/components/headless/HeadlessSelectOption.vue';
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
 import HeadlessSelectOptions from '@aerogel/core/components/headless/HeadlessSelectOptions.vue';
-import { injectReactiveOrFail } from '@aerogel/core/utils';
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
+import SelectOption from './SelectOption.vue';
+
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+
 const select = injectReactiveOrFail<SelectExpose>('select', '<SelectOptions> must be a child of a <Select>');
+const renderedClasses = computed(() =>
+    classes(
+        'z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden',
+        select.optionsClass,
+        rootClasses,
+    ));
 </script>

package/src/components/ui/SelectTrigger.vue

@@ -1,6 +1,6 @@
 <template>
     <HeadlessSelectTrigger :class="renderedClasses">
-        <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-2" />
+        <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-6" />
         <IconCheveronDown class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4" />
     </HeadlessSelectTrigger>
 </template>
@@ -22,7 +22,7 @@ const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> mus
 const renderedClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len
-        'focus:outline-primary grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
+        'focus:outline-primary-600 data-[state=open]:outline-primary-600 grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
         { 'mt-1': select.label },
         rootClasses,
     ));

package/src/components/ui/Switch.vue

@@ -0,0 +1,11 @@
+<template>
+    <HeadlessSwitch
+        class="flex flex-row items-center gap-1"
+        input-class="disabled:opacity-50 disabled:cursor-not-allowed data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-gray-200 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focusdisabled:opacity-50 disabled:cursor-not-allowed :ring-2 focus:ring-primary-600 focus:ring-offset-2 focus:outline-hidden"
+        thumb-class="data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
+    />
+</template>
+
+<script setup lang="ts">
+import HeadlessSwitch from '@aerogel/core/components/headless/HeadlessSwitch.vue';
+</script>