@aerogel/core 0.0.0-next.fcfbfdc3428c34c4d1c0e781b61d244f13232fc9 → 0.1.0-next.c4b24f52d8b652bd5c14c2d12e1b38b779ab7682

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.fcfbfdc3428c34c4d1c0e781b61d244f13232fc9",
+    "version": "0.1.0-next.c4b24f52d8b652bd5c14c2d12e1b38b779ab7682",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -25,18 +25,20 @@
     "peerDependencies": {
         "@tailwindcss/forms": "^0.5.10",
         "@tailwindcss/typography": "^0.5.16",
-        "vue": "^3.5.0",
-        "tailwindcss": "^4.1.1"
+        "tailwindcss": "^4.1.4",
+        "vue": "^3.5.0"
     },
     "dependencies": {
-        "@noeldemartin/utils": "0.7.0-next.31cf84b4b57092d146528f27579439783aca71bb",
+        "@noeldemartin/utils": "^0.7.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.2.4",
+        "eruda": "^3.4.1",
         "marked": "^15.0.7",
         "pinia": "^2.1.6",
         "reka-ui": "^2.2.0",
-        "tailwind-merge": "^3.1.0"
+        "tailwind-merge": "^3.1.0",
+        "vue-component-type-helpers": "^2.2.8"
     },
     "devDependencies": {
         "@aerogel/vite": "*"

package/src/components/AppLayout.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex min-h-full flex-col text-base leading-tight font-normal text-gray-900 antialiased">
         <slot v-if="$errors.hasStartupErrors" name="startup-crash">
-            <component :is="$ui.requireComponent(UIComponents.StartupCrash)" />
+            <component :is="$ui.requireComponent('startup-crash')" />
         </slot>
         <slot v-else />
 
@@ -10,7 +10,5 @@
 </template>
 
 <script setup lang="ts">
-import { UIComponents } from '@aerogel/core/ui/UI';
-
 import AppOverlays from './AppOverlays.vue';
 </script>

package/src/components/AppOverlays.vue

@@ -4,33 +4,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
-import { useEvent } from '@aerogel/core/utils/composition/events';
-
 import AppModals from './AppModals.vue';
 import AppToasts from './AppToasts.vue';
-
-const $backdrop = ref<HTMLElement | null>(null);
-const backdropHidden = ref(true);
-
-useEvent('show-overlays-backdrop', async () => {
-    if (!$backdrop.value || !backdropHidden.value) {
-        return;
-    }
-
-    backdropHidden.value = false;
-
-    $backdrop.value.classList.remove('opacity-0');
-});
-
-useEvent('hide-overlays-backdrop', async () => {
-    if (!$backdrop.value || backdropHidden.value) {
-        return;
-    }
-
-    backdropHidden.value = true;
-
-    $backdrop.value.classList.add('opacity-0');
-});
 </script>

package/src/components/contracts/AlertModal.ts

@@ -1,4 +1,19 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
 export interface AlertModalProps {
     title?: string;
     message: string;
 }
+
+export interface AlertModalExpose extends ModalExpose<void> {}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useAlertModal(props: AlertModalProps) {
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.alert', 'Alert'));
+    const titleHidden = computed(() => !props.title);
+
+    return { renderedTitle, titleHidden };
+}

package/src/components/contracts/ConfirmModal.ts

@@ -1,9 +1,11 @@
 import { computed } from 'vue';
 
 import { translateWithDefault } from '@aerogel/core/lang';
-import { FormFieldTypes, useForm } from '@aerogel/core/forms';
+import { useForm } from '@aerogel/core/utils/composition/forms';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
-import type { FormFieldDefinition } from '@aerogel/core/forms';
+import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+import type { Nullable } from '@noeldemartin/utils';
 
 export type ConfirmModalCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
 
@@ -19,23 +21,28 @@ export interface ConfirmModalProps {
     required?: boolean;
 }
 
+export interface ConfirmModalExpose extends ModalExpose<boolean | [boolean, Record<string, Nullable<boolean>>]> {}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useConfirmModal(props: ConfirmModalProps) {
     const form = useForm(
         Object.entries(props.checkboxes ?? {}).reduce(
             (values, [name, checkbox]) => ({
                 [name]: {
-                    type: FormFieldTypes.Boolean,
+                    type: 'boolean',
                     default: checkbox.default,
                     required: checkbox.required ? 'required' : undefined,
                 },
                 ...values,
             }),
-            {} as Record<string, FormFieldDefinition>,
+            {} as Record<string, FormFieldDefinition<'boolean'>>,
         ),
     );
+
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.confirm', 'Confirm'));
+    const titleHidden = computed(() => !props.title);
     const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
     const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
 
-    return { form, renderedAcceptText, renderedCancelText };
+    return { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText };
 }

package/src/components/contracts/DropdownMenu.ts

@@ -4,17 +4,22 @@ import type { Falsifiable } from '@aerogel/core/utils/types';
 
 export type DropdownMenuOptionData = {
     label: string;
-    click: () => unknown;
+    href?: string;
+    route?: string;
+    routeParams?: object;
+    routeQuery?: object;
+    click?: () => unknown;
+    class?: string;
 };
 
 export interface DropdownMenuProps {
     align?: DropdownMenuContentProps['align'];
     side?: DropdownMenuContentProps['side'];
-    options?: Falsifiable<DropdownMenuOptionData>[];
+    options?: readonly Falsifiable<DropdownMenuOptionData>[];
 }
 
 export interface DropdownMenuExpose {
     align?: DropdownMenuContentProps['align'];
     side?: DropdownMenuContentProps['side'];
-    options?: DropdownMenuOptionData[];
+    options?: readonly DropdownMenuOptionData[];
 }

package/src/components/contracts/ErrorReportModal.ts

@@ -2,18 +2,22 @@ import { computed, ref } from 'vue';
 
 import { translateWithDefault } from '@aerogel/core/lang';
 import type { ErrorReport } from '@aerogel/core/errors';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export interface ErrorReportModalProps {
+    report: ErrorReport;
     reports: ErrorReport[];
 }
 
+export interface ErrorReportModalExpose extends ModalExpose {}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useErrorReportModal(props: ErrorReportModalProps) {
-    const activeReportIndex = ref(0);
-    const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
+    const activeReportIndex = ref(props.reports.includes(props.report) ? props.reports.indexOf(props.report) : 0);
+    const activeReport = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
     const details = computed(
         () =>
-            report.value.details?.trim() ||
+            activeReport.value.details?.trim() ||
             translateWithDefault('errors.detailsEmpty', 'This error is missing a stacktrace.'),
     );
     const previousReportText = translateWithDefault('errors.previousReport', 'Show previous report');
@@ -24,6 +28,6 @@ export function useErrorReportModal(props: ErrorReportModalProps) {
         details,
         nextReportText,
         previousReportText,
-        report,
+        activeReport,
     };
 }

package/src/components/contracts/Input.ts

@@ -3,24 +3,24 @@ import type { Nullable } from '@noeldemartin/utils';
 
 import type { FormFieldValue } from '@aerogel/core/forms';
 
-export interface InputProps {
+export interface InputProps<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
     name?: string;
     label?: string;
     description?: string;
-    modelValue?: Nullable<FormFieldValue>;
+    modelValue?: T;
 }
 
-export interface InputEmits {
-    'update:modelValue': [value: Nullable<FormFieldValue>];
+export interface InputEmits<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
+    'update:modelValue': [value: T];
 }
 
-export interface InputExpose {
+export interface InputExpose<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
     id: string;
     name: ComputedRef<Nullable<string>>;
     label: ComputedRef<Nullable<string>>;
     description: ComputedRef<Nullable<string | boolean>>;
-    value: ComputedRef<Nullable<FormFieldValue>>;
+    value: ComputedRef<T>;
     required: ComputedRef<Nullable<boolean>>;
     errors: DeepReadonly<Ref<Nullable<string[]>>>;
-    update(value: Nullable<FormFieldValue>): void;
+    update(value: T): void;
 }

package/src/components/contracts/LoadingModal.ts

@@ -1,7 +1,9 @@
-import type { Job } from '@aerogel/core/jobs';
-import { translateWithDefault } from '@aerogel/core/lang';
 import { computed } from 'vue';
 
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { Job } from '@aerogel/core/jobs';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
 export interface LoadingModalProps {
     title?: string;
     message?: string;
@@ -9,6 +11,8 @@ export interface LoadingModalProps {
     job?: Job;
 }
 
+export interface LoadingModalExpose extends ModalExpose {}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useLoadingModal(props: LoadingModalProps) {
     const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.loading', 'Loading'));

package/src/components/contracts/Modal.ts

@@ -11,11 +11,11 @@ export interface ModalProps {
     descriptionHidden?: boolean;
 }
 
-export interface ModalSlots {
-    default(props: { close(result?: unknown): Promise<void> }): unknown;
+export interface ModalSlots<Result = void> {
+    default(props: { close(result?: Result): Promise<void> }): unknown;
 }
 
-export interface ModalExpose {
-    close(result?: unknown): Promise<void>;
+export interface ModalExpose<Result = void> {
+    close(result?: Result): Promise<void>;
     $content: ModalContentInstance;
 }

package/src/components/contracts/PromptModal.ts

@@ -1,8 +1,10 @@
 import { computed } from 'vue';
 
-import { requiredStringInput, useForm } from '@aerogel/core/forms';
+import { useForm } from '@aerogel/core/utils/composition/forms';
+import { requiredStringInput } from '@aerogel/core/forms/utils';
 import { translateWithDefault } from '@aerogel/core/lang';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export interface PromptModalProps {
     title?: string;
@@ -16,6 +18,8 @@ export interface PromptModalProps {
     cancelVariant?: ButtonVariant;
 }
 
+export interface PromptModalExpose extends ModalExpose<string> {}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function usePromptModal(props: PromptModalProps) {
     const form = useForm({

package/src/components/contracts/Select.ts

@@ -2,6 +2,8 @@ import type { AcceptableValue, AsTag, SelectContentProps } from 'reka-ui';
 import type { Component, ComputedRef, HTMLAttributes } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 
+import type { FormFieldValue } from '@aerogel/core/forms';
+
 import type { InputEmits, InputExpose, InputProps } from './Input';
 
 export type SelectOptionData = {
@@ -14,23 +16,22 @@ export interface HasSelectOptionLabel {
     label: string | (() => string);
 }
 
-export interface SelectProps extends InputProps {
+export interface SelectProps<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputProps<T> {
     as?: AsTag | Component;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    options?: any[];
+    options?: readonly T[];
     placeholder?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    renderOption?: (option: any) => string;
+    renderOption?: (option: T) => string;
+    compareOptions?: (a: T, b: T) => boolean;
     labelClass?: HTMLAttributes['class'];
     optionsClass?: HTMLAttributes['class'];
     align?: SelectContentProps['align'];
     side?: SelectContentProps['side'];
 }
 
-export interface SelectEmits extends InputEmits {}
+export interface SelectEmits<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputEmits<T> {}
 
-export interface SelectExpose extends InputExpose {
-    options: ComputedRef<Nullable<SelectOptionData[]>>;
+export interface SelectExpose<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputExpose<T> {
+    options: ComputedRef<Nullable<readonly SelectOptionData[]>>;
     selectedOption: ComputedRef<Nullable<SelectOptionData>>;
     placeholder: ComputedRef<string>;
     labelClass?: HTMLAttributes['class'];

package/src/components/contracts/Toast.ts

@@ -1,13 +1,15 @@
+export type ToastVariant = 'secondary' | 'danger';
+
 export interface ToastAction {
     label: string;
     dismiss?: boolean;
     click?(): unknown;
 }
 
-export type ToastVariant = 'secondary' | 'danger';
-
 export interface ToastProps {
     message?: string;
     actions?: ToastAction[];
     variant?: ToastVariant;
 }
+
+export interface ToastExpose {}

package/src/components/headless/HeadlessButton.vue

@@ -14,7 +14,7 @@ import { computed } from 'vue';
 import { Primitive } from 'reka-ui';
 import { objectWithoutEmpty } from '@noeldemartin/utils';
 
-import UI, { UIComponents } from '@aerogel/core/ui/UI';
+import UI from '@aerogel/core/ui/UI';
 import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
 
 const { as, href, route, routeParams, routeQuery, submit, disabled, class: classes } = defineProps<ButtonProps>();
@@ -26,7 +26,7 @@ const props = computed(() => {
 
     if (route) {
         return {
-            as: UI.resolveComponent(UIComponents.RouterLink) ?? 'a',
+            as: UI.resolveComponent('router-link') ?? 'a',
             to: objectWithoutEmpty({
                 name: route,
                 params: routeParams,

package/src/components/headless/HeadlessInputInput.vue

@@ -3,8 +3,8 @@
         :id="input.id"
         ref="$inputRef"
         :name
-        :type
         :checked
+        :type="renderedType"
         :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
@@ -15,18 +15,29 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef, watchEffect } from 'vue';
+import { computed, inject, useTemplateRef, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { onFormFocus } from '@aerogel/core/utils/composition/forms';
+import type FormController from '@aerogel/core/forms/FormController';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-const { type = 'text' } = defineProps<{ type?: string }>();
+const { type } = defineProps<{ type?: string }>();
 const $input = useTemplateRef('$inputRef');
 const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputInput> must be a child of a <HeadlessInput>');
+const form = inject<FormController | null>('form', null);
 const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value);
+const renderedType = computed(() => {
+    if (type) {
+        return type;
+    }
+
+    const fieldType = (name.value && form?.getFieldType(name.value)) ?? '';
+
+    return ['text', 'email', 'number', 'tel', 'url'].includes(fieldType) ? fieldType : 'text';
+});
 const checked = computed(() => {
     if (type !== 'checkbox') {
         return;
@@ -64,8 +75,8 @@ watchEffect(() => {
         return;
     }
 
-    if (type === 'date') {
-        $input.value.valueAsDate = value.value as Date;
+    if (type === 'date' && value.value instanceof Date) {
+        $input.value.valueAsDate = value.value;
 
         return;
     }

package/src/components/headless/HeadlessModal.vue

@@ -6,7 +6,7 @@
     </DialogRoot>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T = void">
 import { provide, ref } from 'vue';
 import { DialogPortal, DialogRoot, useForwardExpose } from 'reka-ui';
 import type { DialogContent } from 'reka-ui';
@@ -16,22 +16,21 @@ import Events from '@aerogel/core/services/Events';
 import { useEvent } from '@aerogel/core/utils/composition/events';
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { UIModalContext } from '@aerogel/core/ui/UI';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
 const $content = ref<Nullable<InstanceType<typeof DialogContent>>>(null);
 const { modal } = injectReactiveOrFail<UIModalContext>(
     'modal',
     'could not obtain modal reference from <HeadlessModal>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
+        'did you render this component manually? Show it using $ui.modal() instead',
 );
 
 defineProps<ModalProps>();
-defineSlots<ModalSlots>();
-defineExpose<AcceptRefs<ModalExpose>>({ close, $content });
+defineSlots<ModalSlots<T>>();
+defineExpose<AcceptRefs<ModalExpose<T>>>({ close, $content });
 
-const { forwardRef, currentElement } = useForwardExpose();
-const hidden = ref(true);
+const { forwardRef } = useForwardExpose();
 const closed = ref(false);
 
 provide('$modalContentRef', $content);
@@ -44,49 +43,15 @@ useEvent('close-modal', async ({ id, result }) => {
     await close(result);
 });
 
-useEvent('hide-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await hide();
-});
-
-useEvent('show-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await show();
-});
-
-async function hide(): Promise<void> {
-    if (!currentElement.value) {
-        return;
-    }
-
-    hidden.value = true;
-}
-
-async function show(): Promise<void> {
-    if (!currentElement.value) {
-        return;
-    }
-
-    hidden.value = false;
-}
-
 async function close(result?: unknown) {
     if (closed.value) {
         return;
     }
 
-    Events.emit('modal-will-close', { modal, result });
-
-    await hide();
+    await Events.emit('modal-will-close', { modal, result });
 
     closed.value = true;
 
-    Events.emit('modal-closed', { modal, result });
+    await Events.emit('modal-has-closed', { modal, result });
 }
 </script>

package/src/components/headless/HeadlessModalContent.vue

@@ -14,13 +14,13 @@ import type { Ref } from 'vue';
 import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
 import UI from '@aerogel/core/ui/UI';
 import { injectOrFail, injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI.state';
+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');

package/src/components/headless/HeadlessSelect.vue

@@ -2,7 +2,7 @@
     <SelectRoot
         v-slot="{ open }"
         :model-value="acceptableValue"
-        :by="(a, b) => a === b"
+        :by="compareOptions as Closure<[AcceptableValue, AcceptableValue], boolean>"
         @update:model-value="update($event)"
     >
         <component :is="as" v-bind="$attrs">
@@ -14,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';
@@ -39,20 +40,21 @@ const {
     labelClass,
     optionsClass,
     renderOption,
+    compareOptions = (a, b) => a === b,
     description,
     placeholder,
     modelValue,
     align,
     side,
-} = defineProps<SelectProps>();
-const emit = defineEmits<SelectEmits>();
+} = defineProps<SelectProps<T>>();
+const emit = defineEmits<SelectEmits<T>>();
 const form = inject<FormController | null>('form', null);
 const computedValue = computed(() => {
     if (form && name) {
-        return form.getFieldValue(name);
+        return form.getFieldValue(name) as T;
     }
 
-    return modelValue;
+    return modelValue as T;
 });
 const acceptableValue = computed(() => computedValue.value as AcceptableValue);
 const errors = computed(() => {
@@ -107,10 +109,10 @@ const expose = {
 
         emit('update:modelValue', value);
     },
-} satisfies SelectExpose;
+} satisfies SelectExpose<T>;
 
 function update(value: AcceptableValue) {
-    expose.update(value as FormFieldValue);
+    expose.update(value as T);
 }
 
 provide('select', expose);

package/src/components/headless/HeadlessSelectOptions.vue

@@ -2,9 +2,10 @@
     <SelectPortal>
         <SelectContent
             position="popper"
-            :class="$props.class"
+            :class="renderedClasses"
             :align="select.align"
             :side="select.side"
+            :side-offset="4"
         >
             <SelectViewport :class="innerClass">
                 <slot>
@@ -21,17 +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';
 
-defineProps<{ class?: HTMLAttributes['class']; innerClass?: HTMLAttributes['class'] }>();
+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>