@aerogel/core 0.0.0-next.f8cdd39997c56dcd46e07c26af8a84d04d610fce → 0.0.0-next.fcfbfdc3428c34c4d1c0e781b61d244f13232fc9

package/src/components/{modals/AGErrorReportModalButtons.vue → ui/ErrorReportModalButtons.vue}

@@ -1,15 +1,17 @@
 <template>
     <div class="flex">
-        <slot v-for="(button, i) of buttons" v-bind="(button as unknown as ComponentProps)" :key="i">
-            <AGButton
-                color="clear"
-                :url="button.url"
+        <slot v-for="button of buttons" v-bind="button">
+            <Button
+                size="icon"
+                variant="ghost"
+                class="group whitespace-nowrap"
+                :href="button.url"
                 :title="$td(`errors.report_${button.id}`, button.description)"
-                :aria-label="$td(`errors.report_${button.id}`, button.description)"
-                @click="button.handler"
+                @click="button.click"
             >
-                <component :is="button.iconComponent" class="h-4 w-4" aria-hidden="true" />
-            </AGButton>
+                <span class="sr-only">{{ $td(`errors.report_${button.id}`, button.description) }}</span>
+                <component :is="button.iconComponent" class="size-4" aria-hidden="true" />
+            </Button>
         </slot>
     </div>
 </template>
@@ -21,20 +23,27 @@ import IconGitHub from '~icons/mdi/github';
 
 import { computed } from 'vue';
 import { stringExcerpt, tap } from '@noeldemartin/utils';
+import type { Component } from 'vue';
 
-import App from '@/services/App';
-import UI from '@/ui/UI';
-import { requiredObjectProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-import type { ComponentProps } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
+import App from '@aerogel/core/services/App';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import UI from '@aerogel/core/ui/UI';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { ErrorReport } from '@aerogel/core/errors';
 
-import AGButton from '../forms/AGButton.vue';
-import type { IAGErrorReportModalButtonsDefaultSlotProps } from './AGErrorReportModal';
+interface ErrorReportModalButtonsDefaultSlotProps {
+    id: string;
+    description: string;
+    iconComponent: Component;
+    url?: string;
+    click?(): void;
+}
 
-const props = defineProps({
-    report: requiredObjectProp<ErrorReport>(),
-});
+defineSlots<{
+    default(props: ErrorReportModalButtonsDefaultSlotProps): unknown;
+}>();
+
+const props = defineProps<{ report: ErrorReport }>();
 const summary = computed(() =>
     props.report.description ? `${props.report.title}: ${props.report.description}` : props.report.title);
 const githubReportUrl = computed(() => {
@@ -66,25 +75,25 @@ const buttons = computed(() =>
                 id: 'clipboard',
                 description: 'Copy to clipboard',
                 iconComponent: IconCopy,
-                async handler() {
+                async click() {
                     await navigator.clipboard.writeText(`${summary.value}\n\n${props.report.details}`);
 
-                    UI.showSnackbar(
-                        translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'),
-                    );
+                    UI.toast(translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'));
                 },
             },
             {
                 id: 'console',
                 description: 'Log to console',
                 iconComponent: IconConsole,
-                handler() {
-                    (window as { error?: unknown }).error = props.report.error;
+                click() {
+                    const error = props.report.error ?? props.report;
+
+                    (window as { error?: unknown }).error = error;
 
                     // eslint-disable-next-line no-console
-                    console.error(props.report.error);
+                    console.error(error);
 
-                    UI.showSnackbar(
+                    UI.toast(
                         translateWithDefault(
                             'errors.addedToConsole',
                             'You can now use the **error** variable in the console',
@@ -92,8 +101,8 @@ const buttons = computed(() =>
                     );
                 },
             },
-        ],
-        (reportButtons: IAGErrorReportModalButtonsDefaultSlotProps[]) => {
+        ] as ErrorReportModalButtonsDefaultSlotProps[],
+        (reportButtons) => {
             if (!githubReportUrl.value) {
                 return;
             }

package/src/components/ui/ErrorReportModalTitle.vue

@@ -0,0 +1,24 @@
+<template>
+    <Markdown :text inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import type { ErrorReport } from '@aerogel/core/errors';
+
+const { totalReports, currentReport, report } = defineProps<{
+    report: ErrorReport;
+    currentReport?: number;
+    totalReports?: number;
+}>();
+
+const text = computed(() => {
+    if (!totalReports || totalReports <= 1) {
+        return report.title;
+    }
+
+    return `${report.title} (${currentReport}/${totalReports})`;
+});
+</script>

package/src/components/ui/Form.vue

@@ -0,0 +1,24 @@
+<template>
+    <form @submit.prevent="form?.submit()">
+        <slot />
+    </form>
+</template>
+
+<script setup lang="ts">
+import { provide, watchEffect } from 'vue';
+
+import type FormController from '@aerogel/core/forms/FormController';
+
+let offSubmit: (() => void) | undefined;
+const { form } = defineProps<{ form?: FormController }>();
+const emit = defineEmits<{ submit: [] }>();
+
+watchEffect((onCleanup) => {
+    offSubmit?.();
+    offSubmit = form?.on('submit', () => emit('submit'));
+
+    onCleanup(() => offSubmit?.());
+});
+
+provide('form', form);
+</script>

package/src/components/ui/Input.vue

@@ -0,0 +1,56 @@
+<template>
+    <HeadlessInput
+        ref="$inputRef"
+        :label="label"
+        :class="rootClasses"
+        v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <HeadlessInputLabel class="block text-sm leading-6 font-medium text-gray-900" />
+        <div :class="renderedWrapperClasses">
+            <HeadlessInputInput v-bind="inputAttrs" :class="renderedInputClasses" />
+            <div v-if="$input?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <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" />
+    </HeadlessInput>
+</template>
+
+<script setup lang="ts">
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import { computed, useTemplateRef } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessInput from '@aerogel/core/components/headless/HeadlessInput.vue';
+import HeadlessInputLabel from '@aerogel/core/components/headless/HeadlessInputLabel.vue';
+import HeadlessInputInput from '@aerogel/core/components/headless/HeadlessInputInput.vue';
+import HeadlessInputDescription from '@aerogel/core/components/headless/HeadlessInputDescription.vue';
+import HeadlessInputError from '@aerogel/core/components/headless/HeadlessInputError.vue';
+import { classes } from '@aerogel/core/utils/classes';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+defineEmits<InputEmits>();
+const { label, inputClass, wrapperClass, ...props } = defineProps<
+    InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
+>();
+const $input = useTemplateRef('$inputRef');
+const [inputAttrs, rootClasses] = useInputAttrs();
+const renderedWrapperClasses = computed(() =>
+    classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
+const renderedInputClasses = 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',
+        {
+            'focus:ring-primary-600': !$input.value?.errors,
+            'text-gray-900 shadow-2xs ring-gray-300 placeholder:text-gray-400': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
+        },
+        inputClass,
+    ));
+</script>

package/src/components/ui/Link.vue

@@ -0,0 +1,12 @@
+<template>
+    <Button variant="link" v-bind="$props">
+        <slot />
+    </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '@aerogel/core/components/ui/Button.vue';
+import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
+
+defineProps<Omit<ButtonProps, 'variant'>>();
+</script>

package/src/components/ui/LoadingModal.vue

@@ -0,0 +1,32 @@
+<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 }"
+    >
+        <ProgressBar
+            v-if="showProgress"
+            :progress
+            :job
+            class="min-w-[min(400px,80vw)]"
+        />
+        <IconSpinner v-else class="text-primary-600 mr-1 size-6" />
+        <Markdown :text="renderedMessage" />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconSpinner from '~icons/svg-spinners/90-ring-with-bg';
+
+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';
+
+const props = defineProps<LoadingModalProps>();
+const { renderedTitle, renderedMessage, titleHidden, showProgress } = useLoadingModal(props);
+</script>

package/src/components/ui/Markdown.vue

@@ -0,0 +1,69 @@
+<template>
+    <root />
+</template>
+
+<script setup lang="ts">
+import { computed, h, useAttrs } from 'vue';
+import { isInstanceOf } from '@noeldemartin/utils';
+import type { VNode } from 'vue';
+
+import { renderMarkdown } from '@aerogel/core/utils/markdown';
+import { translate, translateWithDefault } from '@aerogel/core/lang';
+import { renderVNode } from '@aerogel/core/utils/vue';
+
+const { as, inline, langKey, langParams, langDefault, text, actions } = defineProps<{
+    as?: string;
+    inline?: boolean;
+    langKey?: string;
+    langParams?: number | Record<string, unknown>;
+    langDefault?: string;
+    text?: string;
+    actions?: Record<string, () => unknown>;
+}>();
+
+const attrs = useAttrs();
+const slots = defineSlots<{ default?(): VNode[] }>();
+const markdown = computed(() => {
+    if (slots.default) {
+        return slots.default().map(renderVNode).join('');
+    }
+
+    return (
+        text ??
+        (langKey &&
+            (langDefault
+                ? translateWithDefault(langKey, langDefault, langParams ?? {})
+                : translate(langKey, langParams ?? {})))
+    );
+});
+const html = computed(() => {
+    if (!markdown.value) {
+        return null;
+    }
+
+    let renderedHtml = renderMarkdown(markdown.value);
+
+    if (inline) {
+        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
+    }
+
+    return renderedHtml;
+});
+const root = () =>
+    h(as ?? (inline ? 'span' : 'div'), {
+        innerHTML: html.value,
+        onClick,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${inline ? '' : 'prose'}`,
+    });
+
+async function onClick(event: Event) {
+    const { target } = event;
+
+    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
+        actions?.[target.dataset.markdownAction]?.();
+
+        return;
+    }
+}
+</script>

package/src/components/ui/Modal.vue

@@ -0,0 +1,91 @@
+<template>
+    <HeadlessModal
+        v-slot="{ close }"
+        v-bind="props"
+        :ref="($modal) => forwardRef($modal as HeadlessModalInstance)"
+        :persistent
+    >
+        <HeadlessModalOverlay class="fixed inset-0 bg-black/30" />
+        <HeadlessModalContent v-bind="contentProps" :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()">
+                    <span class="sr-only">{{ $td('ui.close', 'Close') }}</span>
+                    <IconClose class="size-3 text-gray-400" />
+                </Button>
+            </div>
+
+            <HeadlessModalTitle
+                v-if="title"
+                class="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>
+        </HeadlessModalContent>
+    </HeadlessModal>
+</template>
+
+<script setup lang="ts">
+import IconClose from '~icons/zondicons/close';
+
+import { computed } from 'vue';
+import { useForwardExpose } from 'reka-ui';
+import type { 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 { classes } from '@aerogel/core/utils/classes';
+import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
+import type { AcceptRefs } from '@aerogel/core/utils';
+
+type HeadlessModalInstance = InstanceType<typeof HeadlessModal>;
+
+const {
+    class: contentClass = '',
+    dismissable = true,
+    wrapperClass = '',
+    title,
+    titleHidden,
+    description,
+    persistent,
+    ...props
+} = defineProps<
+    ModalProps & {
+        dismissable?: boolean;
+        wrapperClass?: HTMLAttributes['class'];
+        class?: HTMLAttributes['class'];
+    }
+>();
+
+defineExpose<AcceptRefs<ModalExpose>>({
+    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 contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
+const renderedContentClass = computed(() => classes({ 'mt-2': 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',
+        wrapperClass,
+    ));
+
+defineSlots<ModalSlots>();
+</script>

package/src/components/ui/ModalContext.vue

@@ -0,0 +1,30 @@
+<template>
+    <component :is="modal.component" v-bind="modalProperties" />
+</template>
+
+<script setup lang="ts">
+import { computed, provide, toRef, unref } from 'vue';
+
+import type { UIModal, UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { AcceptRefs } from '@aerogel/core/utils/vue';
+
+const props = defineProps<{
+    modal: UIModal;
+    childIndex?: number;
+}>();
+
+const modalProperties = computed(() => {
+    const properties = {} as typeof props.modal.properties;
+
+    for (const property in props.modal.properties) {
+        properties[property] = unref(props.modal.properties[property]);
+    }
+
+    return properties;
+});
+
+provide<AcceptRefs<UIModalContext>>('modal', {
+    modal: toRef(props, 'modal'),
+    childIndex: toRef(props, 'childIndex'),
+});
+</script>

package/src/components/ui/ProgressBar.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+        <div :class="filledClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
+        <span class="sr-only">
+            {{
+                $td('ui.progress', '{progress}% complete', {
+                    progress: renderedProgress * 100,
+                })
+            }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+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?: Falsifiable<Job>;
+}>();
+
+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 renderedProgress = computed(() => {
+    if (typeof progress === 'number') {
+        return progress;
+    }
+
+    return jobProgress.value;
+});
+
+watch(
+    () => job,
+    () => {
+        cleanup && cleanup();
+
+        jobProgress.value = job ? job.progress : 0;
+        cleanup = job && job.listeners.add({ onUpdated: (value) => (jobProgress.value = value) });
+    },
+    { immediate: true },
+);
+
+onUnmounted(() => cleanup && cleanup());
+</script>

package/src/components/ui/PromptModal.vue

@@ -0,0 +1,35 @@
+<template>
+    <Modal v-slot="{ close }" :title="renderedTitle" persistent>
+        <Form :form @submit="close(form.draft)">
+            <Markdown v-if="renderedMessage" :text="renderedMessage" />
+            <Input
+                name="draft"
+                class="mt-2"
+                :placeholder
+                :label
+            />
+
+            <div class="mt-4 flex flex-row-reverse gap-2">
+                <Button :variant="acceptVariant" submit>
+                    {{ renderedAcceptText }}
+                </Button>
+                <Button :variant="cancelVariant" @click="close(false)">
+                    {{ renderedCancelText }}
+                </Button>
+            </div>
+        </Form>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+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';
+
+const { cancelVariant = 'secondary', ...props } = defineProps<PromptModalProps>();
+const { form, renderedTitle, renderedMessage, renderedAcceptText, renderedCancelText } = usePromptModal(props);
+</script>

package/src/components/ui/Select.vue

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

package/src/components/ui/SelectLabel.vue

@@ -0,0 +1,17 @@
+<template>
+    <HeadlessSelectLabel v-if="$slots.default" :class="renderedClasses">
+        <slot />
+    </HeadlessSelectLabel>
+    <HeadlessSelectLabel v-else :class="renderedClasses" />
+</template>
+
+<script setup lang="ts">
+import { computed } 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 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));
+</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

@@ -0,0 +1,30 @@
+<template>
+    <HeadlessSelectOptions :class="renderedClasses">
+        <slot>
+            <SelectOption v-for="option of select?.options ?? []" :key="option.key" :value="option.value">
+                {{ option.label }}
+            </SelectOption>
+        </slot>
+    </HeadlessSelectOptions>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessSelectOptions from '@aerogel/core/components/headless/HeadlessSelectOptions.vue';
+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>