@aerogel/core 0.1.1-next.7f33b133934b479bdeee0808001759d92e987cf9 → 0.1.1-next.83b702b110078faef3926d147f4746121b64a2d5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.7f33b133934b479bdeee0808001759d92e987cf9",
+    "version": "0.1.1-next.83b702b110078faef3926d147f4746121b64a2d5",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -35,6 +35,7 @@
         "clsx": "^2.1.1",
         "dompurify": "^3.2.4",
         "eruda": "^3.4.1",
+        "eruda-indexeddb": "^0.1.1",
         "marked": "^15.0.7",
         "pinia": "^2.1.6",
         "reka-ui": "^2.2.0",

package/src/components/AppLayout.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex min-h-full flex-col text-base leading-tight font-normal text-gray-900 antialiased">
+    <div class="text-primary-text flex min-h-full flex-col text-base leading-tight font-normal antialiased">
         <slot v-if="$errors.hasStartupErrors" name="startup-crash">
             <component :is="$ui.requireComponent('startup-crash')" />
         </slot>

package/src/components/contracts/Modal.ts

@@ -5,6 +5,8 @@ export type ModalContentInstance = Nullable<InstanceType<typeof DialogContent>>;
 
 export interface ModalProps {
     persistent?: boolean;
+    fullscreen?: boolean;
+    fullscreenOnMobile?: boolean;
     title?: string;
     titleHidden?: boolean;
     description?: string;

package/src/components/contracts/Select.ts

@@ -1,8 +1,11 @@
+import { computed, inject, provide, readonly } from 'vue';
+import { evaluate, toString, uuid } from '@noeldemartin/utils';
 import type { AcceptableValue, AsTag, SelectContentProps } from 'reka-ui';
-import type { Component, ComputedRef, HTMLAttributes } from 'vue';
+import type { Component, ComputedRef, EmitFn, HTMLAttributes } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 
-import type { FormFieldValue } from '@aerogel/core/forms';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { FormController, FormFieldValue } from '@aerogel/core/forms';
 
 import type { InputEmits, InputExpose, InputProps } from './Input';
 
@@ -43,3 +46,78 @@ export interface SelectExpose<T extends Nullable<FormFieldValue> = Nullable<Form
 export function hasSelectOptionLabel(option: unknown): option is HasSelectOptionLabel {
     return typeof option === 'object' && option !== null && 'label' in option;
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useSelect<T extends Nullable<FormFieldValue>>(props: SelectProps<T>, emit: EmitFn<SelectEmits<T>>) {
+    const form = inject<FormController | null>('form', null);
+    const computedValue = computed(() => {
+        if (form && props.name) {
+            return form.getFieldValue(props.name) as T;
+        }
+
+        return props.modelValue as T;
+    });
+    const acceptableValue = computed(() => computedValue.value as AcceptableValue);
+    const errors = computed(() => {
+        if (!form || !props.name) {
+            return null;
+        }
+
+        return form.errors[props.name] ?? null;
+    });
+    const computedOptions = computed(() => {
+        if (!props.options) {
+            return null;
+        }
+
+        return props.options.map((option) => ({
+            key: uuid(),
+            label: props.renderOption
+                ? props.renderOption(option)
+                : hasSelectOptionLabel(option)
+                    ? evaluate(option.label as string)
+                    : toString(option),
+            value: option as AcceptableValue,
+        }));
+    });
+
+    const expose = {
+        labelClass: props.labelClass,
+        optionsClass: props.optionsClass,
+        align: props.align,
+        side: props.side,
+        value: computedValue,
+        id: `select-${uuid()}`,
+        name: computed(() => props.name),
+        label: computed(() => props.label),
+        description: computed(() => props.description),
+        placeholder: computed(() => props.placeholder ?? translateWithDefault('ui.select', 'Select an option')),
+        options: computedOptions,
+        selectedOption: computed(() => computedOptions.value?.find((option) => option.value === props.modelValue)),
+        errors: readonly(errors),
+        required: computed(() => {
+            if (!props.name || !form) {
+                return;
+            }
+
+            return form.getFieldRules(props.name).includes('required');
+        }),
+        update(value) {
+            if (form && props.name) {
+                form.setFieldValue(props.name, value as FormFieldValue);
+
+                return;
+            }
+
+            emit('update:modelValue', value);
+        },
+    } satisfies SelectExpose<T>;
+
+    function update(value: AcceptableValue) {
+        expose.update(value as T);
+    }
+
+    provide('select', expose);
+
+    return { expose, update, acceptableValue };
+}

package/src/components/headless/HeadlessInputInput.vue

@@ -19,6 +19,7 @@ import { computed, inject, useTemplateRef, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { onFormFocus } from '@aerogel/core/utils/composition/forms';
+import { LOCAL_TIMEZONE_OFFSET } from '@aerogel/core/utils';
 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';
@@ -63,7 +64,9 @@ function getValue(): FormFieldValue | null {
         case 'checkbox':
             return $input.value.checked;
         case 'date':
-            return $input.value.valueAsDate;
+        case 'time':
+        case 'datetime-local':
+            return new Date(Math.round($input.value.valueAsNumber / 60000) * 60000 + LOCAL_TIMEZONE_OFFSET);
         case 'number':
             return $input.value.valueAsNumber;
         default:
@@ -77,8 +80,11 @@ watchEffect(() => {
         return;
     }
 
-    if (renderedType.value === 'date' && value.value instanceof Date) {
-        $input.value.valueAsDate = value.value;
+    if (['date', 'time', 'datetime-local'].includes(renderedType.value) && value.value instanceof Date) {
+        const roundedValue = Math.round(value.value.getTime() / 60000) * 60000;
+
+        $input.value.valueAsNumber = roundedValue - LOCAL_TIMEZONE_OFFSET;
+        input.update(new Date(roundedValue));
 
         return;
     }

package/src/components/headless/HeadlessSelect.vue

@@ -2,7 +2,7 @@
     <SelectRoot
         v-slot="{ open }"
         :model-value="acceptableValue"
-        :by="compareOptions as Closure<[AcceptableValue, AcceptableValue], boolean>"
+        :by="compareOptions"
         @update:model-value="update($event)"
     >
         <component :is="as" v-bind="$attrs">
@@ -15,16 +15,11 @@
 </template>
 
 <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 type { Nullable } from '@noeldemartin/utils';
 
-import { translateWithDefault } from '@aerogel/core/lang';
-import { hasSelectOptionLabel } from '@aerogel/core/components/contracts/Select';
-import type FormController from '@aerogel/core/forms/FormController';
-import type { SelectEmits, SelectExpose, SelectProps } from '@aerogel/core/components/contracts/Select';
+import { useSelect } from '@aerogel/core/components/contracts/Select';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 
 import HeadlessSelectTrigger from './HeadlessSelectTrigger.vue';
@@ -32,89 +27,9 @@ import HeadlessSelectOptions from './HeadlessSelectOptions.vue';
 
 defineOptions({ inheritAttrs: false });
 
-const {
-    name,
-    as = 'div',
-    label,
-    options,
-    labelClass,
-    optionsClass,
-    renderOption,
-    compareOptions = (a, b) => a === b,
-    description,
-    placeholder,
-    modelValue,
-    align,
-    side,
-} = 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) as T;
-    }
+const { as = 'div', compareOptions = (a, b) => a === b, ...props } = defineProps<SelectProps<T>>();
+const { expose, acceptableValue, update } = useSelect({ as, compareOptions, ...props }, emit);
 
-    return modelValue as T;
-});
-const acceptableValue = computed(() => computedValue.value as AcceptableValue);
-const errors = computed(() => {
-    if (!form || !name) {
-        return null;
-    }
-
-    return form.errors[name] ?? null;
-});
-const computedOptions = computed(() => {
-    if (!options) {
-        return null;
-    }
-
-    return options.map((option) => ({
-        key: uuid(),
-        label: renderOption
-            ? renderOption(option)
-            : hasSelectOptionLabel(option)
-                ? evaluate(option.label as string)
-                : toString(option),
-        value: option as AcceptableValue,
-    }));
-});
-const expose = {
-    labelClass,
-    optionsClass,
-    align,
-    side,
-    value: computedValue,
-    id: `select-${uuid()}`,
-    name: computed(() => name),
-    label: computed(() => label),
-    description: computed(() => description),
-    placeholder: computed(() => placeholder ?? translateWithDefault('ui.select', 'Select an option')),
-    options: computedOptions,
-    selectedOption: computed(() => computedOptions.value?.find((option) => option.value === 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 SelectExpose<T>;
-
-function update(value: AcceptableValue) {
-    expose.update(value as T);
-}
-
-provide('select', expose);
 defineExpose(expose);
 </script>

package/src/components/ui/Combobox.vue

@@ -0,0 +1,30 @@
+<template>
+    <ComboboxRoot
+        open-on-focus
+        :model-value="acceptableValue"
+        :by="compareOptions"
+        @update:model-value="update($event)"
+    >
+        <ComboboxLabel />
+        <ComboboxTrigger />
+        <ComboboxOptions />
+    </ComboboxRoot>
+</template>
+
+<script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
+import { ComboboxRoot } from 'reka-ui';
+import { useSelect } from '@aerogel/core/components/contracts/Select';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
+import type { FormFieldValue } from '@aerogel/core/forms';
+import type { Nullable } from '@noeldemartin/utils';
+
+import ComboboxOptions from './ComboboxOptions.vue';
+import ComboboxTrigger from './ComboboxTrigger.vue';
+import ComboboxLabel from './ComboboxLabel.vue';
+
+const emit = defineEmits<SelectEmits<T>>();
+const { as = 'div', compareOptions = (a, b) => a === b, ...props } = defineProps<SelectProps<T>>();
+const { expose, acceptableValue, update } = useSelect({ as, compareOptions, ...props }, emit);
+
+defineExpose(expose);
+</script>

package/src/components/ui/ComboboxLabel.vue

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

package/src/components/ui/ComboboxOption.vue

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

package/src/components/ui/ComboboxOptions.vue

@@ -0,0 +1,40 @@
+<template>
+    <ComboboxPortal>
+        <ComboboxContent
+            position="popper"
+            :align="select.align"
+            :side="select.side"
+            :side-offset="4"
+            :class="renderedClasses"
+        >
+            <ComboboxViewport>
+                <ComboboxEmpty class="group p-1 outline-none">
+                    <div
+                        class="relative flex max-w-[calc(100vw-2rem)] items-center gap-2 truncate rounded-md px-2 py-1 text-sm select-none *:truncate"
+                    >
+                        {{ $td('ui.comboboxEmpty', 'No options found') }}
+                    </div>
+                </ComboboxEmpty>
+
+                <ComboboxGroup>
+                    <ComboboxOption v-for="option in select.options ?? []" :key="option.key" :value="option.value" />
+                </ComboboxGroup>
+            </ComboboxViewport>
+        </ComboboxContent>
+    </ComboboxPortal>
+</template>
+
+<script setup lang="ts">
+import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxPortal, ComboboxViewport } from 'reka-ui';
+
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+import ComboboxOption from './ComboboxOption.vue';
+
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxOptions> must be a child of a <Combobox>');
+const renderedClasses = classes(
+    'max-h-(--reka-combobox-content-available-height) min-w-(--reka-combobox-trigger-width)',
+    'z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden',
+);
+</script>

package/src/components/ui/ComboboxTrigger.vue

@@ -0,0 +1,26 @@
+<template>
+    <ComboboxAnchor>
+        <ComboboxInput :id="select.id" :placeholder="select.placeholder" :class="renderedRootClasses" />
+    </ComboboxAnchor>
+</template>
+
+<script setup lang="ts">
+import { ComboboxAnchor, ComboboxInput } from 'reka-ui';
+
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+import { computed } from 'vue';
+
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxTrigger> must be a child of a <Combobox>');
+const renderedRootClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
+        {
+            'mt-1': select.label,
+            'focus:ring-primary-600': !select.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !select.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': select.errors,
+        },
+    ));
+</script>

package/src/components/ui/Details.vue

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

package/src/components/ui/Input.vue

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

package/src/components/ui/LoadingModal.vue

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

package/src/components/ui/Modal.vue

@@ -12,10 +12,15 @@
                 'animate-[fade-in_var(--tw-duration)_ease-in-out]': !hasRenderedModals,
                 'bg-black/30': firstVisibleModal?.id === id || (!firstVisibleModal && modals[0]?.id === id),
                 'opacity-0': !firstVisibleModal,
+                hidden: renderFullscreen,
             }"
         />
         <HeadlessModalContent v-bind="contentProps" :class="renderedWrapperClass">
-            <div v-if="!persistent && !closeHidden" class="absolute top-0 right-0 hidden pt-3.5 pr-2.5 sm:block">
+            <div
+                v-if="!persistent && !closeHidden"
+                class="absolute top-0 right-0 pt-3.5 pr-2.5"
+                :class="{ 'hidden sm:block': !renderFullscreen }"
+            >
                 <button
                     type="button"
                     class="clickable z-10 rounded-full p-2.5 text-gray-400 hover:text-gray-500"
@@ -67,6 +72,7 @@ import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModa
 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 { reactiveSet } from '@aerogel/core/utils';
 import { injectModal, modals, useModal } from '@aerogel/core/ui/modals';
@@ -88,6 +94,8 @@ const {
     description,
     persistent,
     closeHidden,
+    fullscreen,
+    fullscreenOnMobile,
     ...props
 } = defineProps<
     ModalProps & {
@@ -113,18 +121,29 @@ const firstVisibleModal = computed(() => modals.value.find((modal) => modal.visi
 const hasRenderedModals = computed(() => modals.value.some((modal) => renderedModals.has(modal)));
 const contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
 const renderedContentClass = computed(() =>
-    classes('max-h-[90vh] overflow-auto px-4 pb-4', { 'pt-4': !title || titleHidden }, contentClass));
+    classes(
+        'overflow-auto px-4 pb-4 flex flex-col flex-1',
+        { 'pt-4': !title || titleHidden, 'max-h-[90vh]': !renderFullscreen.value },
+        contentClass,
+    ));
+const renderFullscreen = computed(() => fullscreen || (fullscreenOnMobile && UI.mobile));
 const renderedWrapperClass = computed(() =>
     classes(
-        'isolate fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-lg bg-white text-left shadow-xl sm:max-w-lg',
-        renderedModals.has(modal.value) ||
-            'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
-        'transition-[scale,opacity] will-change-[scale,opacity] duration-300',
-        {
-            'scale-50 opacity-0': !inForeground.value,
-            'scale-100 opacity-100': inForeground.value,
-        },
+        'isolate fixed z-50 flex flex-col overflow-hidden bg-white text-left duration-300',
+        renderFullscreen.value
+            ? [
+                'inset-0 transition-[transform,translate] will-change-[transform,translate]',
+                renderedModals.has(modal.value) || 'animate-[slide-in_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'translate-y-0' : 'translate-y-full',
+            ]
+            : [
+                'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full',
+                'max-w-[calc(100%-2rem)] rounded-lg shadow-xl sm:max-w-lg',
+                'transition-[scale,opacity] will-change-[scale,opacity]',
+                renderedModals.has(modal.value) ||
+                      'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'scale-100 opacity-100' : 'scale-50 opacity-0',
+            ],
         wrapperClass,
     ));
 

package/src/components/ui/ProgressBar.vue

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

package/src/components/ui/SettingsModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :title="$td('settings.title', 'Settings')">
+    <Modal :title="$td('settings.title', 'Settings')" :fullscreen-on-mobile="$app.settingsFullscreenOnMobile">
         <component :is="setting.component" v-for="(setting, key) in settings" :key />
     </Modal>
 </template>