@aerogel/core 0.0.0-next.8ae083000611b11799d37033e9a5250d0d07c324 → 0.0.0-next.8bd66d5f5e264650120ea3cc37519f2409c6cc39

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.8ae083000611b11799d37033e9a5250d0d07c324",
+    "version": "0.0.0-next.8bd66d5f5e264650120ea3cc37519f2409c6cc39",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -33,6 +33,7 @@
         "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",

package/src/components/contracts/AlertModal.ts

@@ -1,3 +1,6 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
 import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export interface AlertModalProps {
@@ -6,3 +9,11 @@ export interface AlertModalProps {
 }
 
 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

@@ -39,8 +39,10 @@ export function useConfirmModal(props: ConfirmModalProps) {
         ),
     );
 
+    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,7 +4,12 @@ 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 {

package/src/components/contracts/ErrorReportModal.ts

@@ -5,6 +5,7 @@ import type { ErrorReport } from '@aerogel/core/errors';
 import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export interface ErrorReportModalProps {
+    report: ErrorReport;
     reports: ErrorReport[];
 }
 
@@ -12,11 +13,11 @@ 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');
@@ -27,6 +28,6 @@ export function useErrorReportModal(props: ErrorReportModalProps) {
         details,
         nextReportText,
         previousReportText,
-        report,
+        activeReport,
     };
 }

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/HeadlessSwitch.vue

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

package/src/components/headless/index.ts

@@ -16,4 +16,5 @@ export { default as HeadlessSelectOption } from './HeadlessSelectOption.vue';
 export { default as HeadlessSelectOptions } from './HeadlessSelectOptions.vue';
 export { default as HeadlessSelectTrigger } from './HeadlessSelectTrigger.vue';
 export { default as HeadlessSelectValue } from './HeadlessSelectValue.vue';
+export { default as HeadlessSwitch } from './HeadlessSwitch.vue';
 export { default as HeadlessToast } from './HeadlessToast.vue';

package/src/components/ui/AdvancedOptions.vue

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

package/src/components/ui/AlertModal.vue

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

package/src/components/ui/Button.vue

@@ -5,8 +5,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import HeadlessButton from '@aerogel/core/components/headless/HeadlessButton.vue';
-import { computedVariantClasses } from '@aerogel/core/utils/classes';
+import { variantClasses } from '@aerogel/core/utils/classes';
 import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
 import type { Variants } from '@aerogel/core/utils/classes';
 
@@ -14,7 +16,7 @@ const { class: baseClasses, size, variant, disabled, ...props } = defineProps<Bu
 
 /* eslint-disable vue/max-len */
 // prettier-ignore
-const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size' | 'variant' | 'disabled'>>>(
+const renderedClasses = computed(() => variantClasses<Variants<Pick<ButtonProps, 'size' | 'variant' | 'disabled'>>>(
     { baseClasses, variant, size, disabled },
     {
         baseClasses: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
@@ -28,9 +30,9 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
                 link: 'text-links',
             },
             size: {
-                small: 'text-xs',
-                default: 'text-sm',
-                large: 'text-base',
+                small: 'text-xs min-h-6',
+                default: 'text-sm min-h-8',
+                large: 'text-base min-h-10',
                 icon: 'rounded-full p-2.5',
             },
             disabled: {
@@ -86,6 +88,21 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
                 disabled: false,
                 class: 'hover:underline',
             },
+            {
+                variant: 'link',
+                size: 'small',
+                class: 'leading-6',
+            },
+            {
+                variant: 'link',
+                size: 'default',
+                class: 'leading-8',
+            },
+            {
+                variant: 'link',
+                size: 'large',
+                class: 'leading-10',
+            },
         ],
         defaultVariants: {
             variant: 'default',
@@ -93,6 +110,6 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
             disabled: false,
         },
     },
-);
+));
 /* eslint-enable vue/max-len */
 </script>

package/src/components/ui/ConfirmModal.vue

@@ -1,6 +1,11 @@
 <template>
     <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<ConfirmModalExpose>} -->
-    <Modal v-slot="{ close }" :title persistent>
+    <Modal
+        v-slot="{ close }"
+        :title="renderedTitle"
+        :title-hidden="titleHidden"
+        persistent
+    >
         <Form :form @submit="close([true, form.data()])">
             <Markdown :text="message" :actions />
 
@@ -39,7 +44,7 @@ import { useConfirmModal } from '@aerogel/core/components/contracts/ConfirmModal
 import type { ConfirmModalExpose, ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<ConfirmModalProps>();
-const { form, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
+const { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
 
 defineExpose<ConfirmModalExpose>();
 </script>

package/src/components/ui/DropdownMenuOption.vue

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

package/src/components/ui/DropdownMenuOptions.vue

@@ -5,7 +5,23 @@
         :side="dropdownMenu.side"
     >
         <slot>
-            <DropdownMenuOption v-for="(option, key) in dropdownMenu.options" :key @select="option.click">
+            <DropdownMenuOption
+                v-for="(option, key) in dropdownMenu.options"
+                :key
+                :as="option.route || option.href ? HeadlessButton : undefined"
+                :class="option.class"
+                v-bind="
+                    option.route || option.href
+                        ? {
+                            href: option.href,
+                            route: option.route,
+                            routeParams: option.routeParams,
+                            routeQuery: option.routeQuery,
+                        }
+                        : {}
+                "
+                @select="option.click?.()"
+            >
                 {{ option.label }}
             </DropdownMenuOption>
         </slot>
@@ -19,6 +35,7 @@ import { injectReactiveOrFail } from '@aerogel/core/utils';
 import type { DropdownMenuExpose } from '@aerogel/core/components/contracts/DropdownMenu';
 
 import DropdownMenuOption from './DropdownMenuOption.vue';
+import HeadlessButton from '../headless/HeadlessButton.vue';
 
 const dropdownMenu = injectReactiveOrFail<DropdownMenuExpose>(
     'dropdown-menu',

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>
@@ -61,7 +67,7 @@ import type {
 
 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

@@ -48,8 +48,8 @@ const renderedInputClasses = computed(() =>
         '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,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
         },
         inputClass,
     ));

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,6 +65,18 @@ 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>
 

package/src/components/ui/Modal.vue

@@ -14,7 +14,7 @@
             }"
         />
         <HeadlessModalContent v-bind="contentProps" :class="renderedWrapperClass">
-            <div v-if="!persistent && dismissable" 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 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"
@@ -27,14 +27,22 @@
 
             <HeadlessModalTitle
                 v-if="title"
-                class="text-base font-semibold text-gray-900"
-                :class="{ 'sr-only': titleHidden }"
+                class="px-4 pt-5 text-base font-semibold text-gray-900"
+                :class="{
+                    'sr-only': titleHidden,
+                    'pb-0': description && !descriptionHidden,
+                    'pb-2': !description || descriptionHidden,
+                }"
             >
                 <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
+                v-if="description"
+                class="px-4 pt-1 pb-2"
+                :class="{ 'sr-only': descriptionHidden }"
+            >
+                <Markdown :text="description" class="text-sm leading-6 text-gray-500" />
             </HeadlessModalDescription>
 
             <div :class="renderedContentClass">
@@ -71,18 +79,18 @@ 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;
     }
 >();
 
@@ -97,11 +105,12 @@ 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({ 'mt-2': title && !titleHidden }, contentClass));
+const renderedContentClass = computed(() =>
+    classes('max-h-[90vh] overflow-auto px-4 pb-4', { 'pt-4': !title || titleHidden }, contentClass));
 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 px-4 pt-5 pb-4 text-left shadow-xl sm:max-w-lg',
+        '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',
         {