@aerogel/core 0.0.0-next.c29ffcd25bffdbed37ecce3aac1ba14cde3e9d39 → 0.0.0-next.c33ad773d3eb977461630ff22012d99eeedf46cb

package/src/components/headless/{forms/AGHeadlessInputDescription.vue → HeadlessInputDescription.vue}

@@ -1,10 +1,10 @@
 <template>
     <slot :id="`${input.id}-description`">
-        <AGMarkdown
+        <Markdown
             v-if="show"
             v-bind="$attrs"
             :id="`${input.id}-description`"
-            :text="text"
+            :text
         />
     </slot>
 </template>
@@ -12,16 +12,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-
-import AGMarkdown from '../../lib/AGMarkdown.vue';
-import type { IAGHeadlessInput } from './AGHeadlessInput';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
 defineOptions({ inheritAttrs: false });
 
-const input = injectReactiveOrFail<IAGHeadlessInput>(
+const input = injectReactiveOrFail<InputExpose>(
     'input',
-    '<AGHeadlessInputDescription> must be a child of a <AGHeadlessInput>',
+    '<HeadlessInputDescription> must be a child of a <HeadlessInput>',
 );
 const text = computed(() => (typeof input.description === 'string' ? input.description : ''));
 const show = computed(() => !!input.description);

package/src/components/headless/{forms/AGHeadlessInputError.vue → HeadlessInputError.vue}

@@ -7,15 +7,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputError> must be a child of a <AGHeadlessInput>',
-);
+const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputError> must be a child of a <HeadlessInput>');
 const errorMessage = computed(() => {
     if (!input.errors) {
         return null;

package/src/components/headless/{forms/AGHeadlessInputInput.vue → HeadlessInputInput.vue}

@@ -2,14 +2,14 @@
     <input
         :id="input.id"
         ref="$input"
-        :name="name"
-        :type="type"
+        :name
+        :type
+        :checked
         :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
             input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
         "
-        :checked="checked"
         @input="update"
     >
 </template>
@@ -17,26 +17,18 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
-import { injectReactiveOrFail, stringProp } from '@/utils/vue';
-import type { __SetsElement } from '@/components/interfaces';
-import type { FormFieldValue } from '@/forms/Form';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-
-import { onFormFocus } from './composition';
-
-const props = defineProps({
-    type: stringProp('text'),
-});
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { onFormFocus } from '@aerogel/core/components/utils';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
+const { type = 'text' } = defineProps<{ type?: string }>();
 const $input = ref<HTMLInputElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
-);
+const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputInput> must be a child of a <HeadlessInput>');
 const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value);
 const checked = computed(() => {
-    if (props.type !== 'checkbox') {
+    if (type !== 'checkbox') {
         return;
     }
 
@@ -56,7 +48,7 @@ function getValue(): FormFieldValue | null {
         return null;
     }
 
-    switch (props.type) {
+    switch (type) {
         case 'checkbox':
             return $input.value.checked;
         case 'date':
@@ -67,18 +59,17 @@ function getValue(): FormFieldValue | null {
 }
 
 onFormFocus(input, () => $input.value?.focus());
-watchEffect(() => (input as unknown as __SetsElement).__setElement($input.value));
 watchEffect(() => {
     if (!$input.value) {
         return;
     }
 
-    if (props.type === 'date') {
+    if (type === 'date') {
         $input.value.valueAsDate = value.value as Date;
 
         return;
     }
 
-    $input.value.value = value.value as string;
+    $input.value.value = (value.value as string) ?? null;
 });
 </script>

package/src/components/headless/{forms/AGHeadlessInputLabel.vue → HeadlessInputLabel.vue}

@@ -9,14 +9,10 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>',
-);
+const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputLabel> must be a child of a <HeadlessInput>');
 const slots = useSlots();
 const show = computed(() => !!(input.label || slots.default));
 </script>

package/src/components/headless/{forms/AGHeadlessInputTextArea.vue → HeadlessInputTextArea.vue}

@@ -2,9 +2,9 @@
     <textarea
         :id="input.id"
         ref="$textArea"
-        :name="name"
+        :name
+        :value
         :required="input.required ?? undefined"
-        :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
             input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
@@ -14,18 +14,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
+import { computed, ref } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-import type { __SetsElement } from '@/components/interfaces';
-
-import { onFormFocus } from './composition';
+import { onFormFocus } from '@aerogel/core/components/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
 const $textArea = ref<HTMLTextAreaElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>(
+const input = injectReactiveOrFail<InputExpose>(
     'input',
-    '<AGHeadlessInputTextArea> must be a child of a <AGHeadlessInput>',
+    '<HeadlessInputTextArea> must be a child of a <HeadlessInput>',
 );
 const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value as string);
@@ -38,6 +36,5 @@ function update() {
     input.update($textArea.value.value);
 }
 
-watchEffect(() => (input as unknown as __SetsElement).__setElement($textArea.value));
 onFormFocus(input, () => $textArea.value?.focus());
 </script>

package/src/components/headless/{modals/AGHeadlessModal.vue → HeadlessModal.vue}

@@ -1,37 +1,32 @@
 <template>
-    <component
-        :is="rootComponent"
-        ref="$root"
-        :open="true"
-        @close="cancellable && close()"
-    >
-        <slot :close="close" />
-    </component>
+    <DialogRoot ref="$root" open @update:open="persistent || close()">
+        <DialogPortal>
+            <slot :close="close" />
+        </DialogPortal>
+    </DialogRoot>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, toRef } from 'vue';
-import { Dialog } from '@headlessui/vue';
-import type { VNode } from 'vue';
+import { ref } from 'vue';
+import { DialogPortal, DialogRoot } from 'reka-ui';
 
-import Events from '@/services/Events';
-import { useEvent } from '@/utils/composition/events';
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
+import Events from '@aerogel/core/services/Events';
+import { useEvent } from '@aerogel/core/utils/composition/events';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
-import { useModalProps } from './AGHeadlessModal';
-import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
+defineProps<ModalProps>();
+defineSlots<ModalSlots>();
 
-const props = defineProps(useModalProps());
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);
-const { modal } = injectReactiveOrFail<IAGModalContext>(
+const { modal } = injectReactiveOrFail<UIModalContext>(
     'modal',
-    'could not obtain modal reference from <AGHeadlessModal>, ' +
+    'could not obtain modal reference from <HeadlessModal>, ' +
         'did you render this component manually? Show it using $ui.openModal() instead',
 );
-const rootComponent = computed(() => (modal.properties.inline ? 'div' : Dialog));
 
 async function hide(): Promise<void> {
     if (!$root.value?.$el) {
@@ -87,6 +82,5 @@ useEvent('show-modal', async ({ id }) => {
     await show();
 });
 
-defineSlots<{ default(props: IAGHeadlessModalDefaultSlotProps): VNode[] }>();
-defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable'), inline: toRef(props, 'inline') });
+defineExpose<ModalExpose>({ close });
 </script>

package/src/components/headless/HeadlessModalContent.vue

@@ -0,0 +1,24 @@
+<template>
+    <DialogContent>
+        <slot />
+
+        <ModalContext v-if="childModal" :child-index="childIndex + 1" :modal="childModal" />
+    </DialogContent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DialogContent } from 'reka-ui';
+
+import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
+import UI from '@aerogel/core/ui/UI';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { UIModalContext } from '@aerogel/core/ui/UI.state';
+
+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',
+);
+const childModal = computed(() => UI.modals[childIndex] ?? null);
+</script>

package/src/components/headless/HeadlessModalOverlay.vue

@@ -0,0 +1,12 @@
+<template>
+    <DialogOverlay v-bind="$props">
+        <slot />
+    </DialogOverlay>
+</template>
+
+<script setup lang="ts">
+import { DialogOverlay } from 'reka-ui';
+import type { DialogOverlayProps } from 'reka-ui';
+
+defineProps<DialogOverlayProps>();
+</script>

package/src/components/headless/HeadlessModalTitle.vue

@@ -0,0 +1,12 @@
+<template>
+    <DialogTitle v-bind="$props">
+        <slot />
+    </DialogTitle>
+</template>
+
+<script setup lang="ts">
+import { DialogTitle } from 'reka-ui';
+import type { DialogTitleProps } from 'reka-ui';
+
+defineProps<DialogTitleProps>();
+</script>

package/src/components/headless/HeadlessSelect.vue

@@ -0,0 +1,92 @@
+<template>
+    <SelectRoot v-slot="{ open }: ComponentProps" :model-value="acceptableValue" @update:model-value="update($event)">
+        <slot :model-value :open>
+            <HeadlessSelectTrigger />
+            <HeadlessSelectOptions />
+        </slot>
+    </SelectRoot>
+</template>
+
+<script setup lang="ts">
+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 { translateWithDefault } from '@aerogel/core/lang';
+import { hasSelectOptionLabel } from '@aerogel/core/components/contracts/Select';
+import type FormController from '@aerogel/core/forms/FormController';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
+import type { SelectEmits, SelectExpose, SelectProps } from '@aerogel/core/components/contracts/Select';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+
+import HeadlessSelectTrigger from './HeadlessSelectTrigger.vue';
+import HeadlessSelectOptions from './HeadlessSelectOptions.vue';
+
+const { name, label, options, renderOption, description, placeholder, modelValue } = defineProps<SelectProps>();
+const emit = defineEmits<SelectEmits>();
+const form = inject<FormController | null>('form', null);
+const acceptableValue = computed(() => modelValue 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 context = {
+    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)),
+    value: computed(() => {
+        if (form && name) {
+            return form.getFieldValue(name);
+        }
+
+        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 SelectExpose;
+
+function update(value: AcceptableValue) {
+    context.update(value as FormFieldValue);
+}
+
+provide('select', context);
+defineExpose(context);
+</script>

package/src/components/headless/{forms/AGHeadlessSelectError.vue → HeadlessSelectError.vue}

@@ -7,14 +7,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
+const select = injectReactiveOrFail<SelectExpose>(
     'select',
-    '<AGHeadlessSelectError> must be a child of a <AGHeadlessSelect>',
+    '<HeadlessSelectError> must be a child of a <HeadlessSelect>',
 );
 const errorMessage = computed(() => {
     if (!select.errors) {

package/src/components/headless/HeadlessSelectLabel.vue

@@ -0,0 +1,25 @@
+<template>
+    <Label v-if="show" :for="select.id" v-bind="$props">
+        <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',
+    '<HeadlessSelectLabel> must be a child of a <HeadlessSelect>',
+);
+const slots = useSlots();
+const show = computed(() => !!(select.label || slots.default));
+</script>

package/src/components/headless/HeadlessSelectOption.vue

@@ -0,0 +1,34 @@
+<template>
+    <SelectItem v-bind="$props">
+        <SelectItemText class="the-text">
+            <slot>
+                {{ renderedLabel }}
+            </slot>
+        </SelectItemText>
+    </SelectItem>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { SelectItem, SelectItemText } from 'reka-ui';
+import { toString } from '@noeldemartin/utils';
+import type { SelectItemProps } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const { value } = defineProps<SelectItemProps>();
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectOption> must be a child of a <HeadlessSelect>',
+);
+const renderedLabel = computed(() => {
+    const itemOption = select.options?.find((option) => option.value === value);
+
+    if (itemOption) {
+        return itemOption.label;
+    }
+
+    return toString(value);
+});
+</script>

package/src/components/headless/HeadlessSelectOptions.vue

@@ -0,0 +1,30 @@
+<template>
+    <SelectPortal>
+        <SelectContent :class="classes">
+            <SelectViewport>
+                <slot>
+                    <HeadlessSelectOption
+                        v-for="option in select.options ?? []"
+                        :key="option.key"
+                        :value="option.value"
+                    />
+                </slot>
+            </SelectViewport>
+        </SelectContent>
+    </SelectPortal>
+</template>
+
+<script setup lang="ts">
+import { SelectContent, SelectPortal, SelectViewport } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+import HeadlessSelectOption from './HeadlessSelectOption.vue';
+
+const { class: classes } = defineProps<{ class?: string }>();
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectOptions> must be a child of a <HeadlessSelect>',
+);
+</script>

package/src/components/headless/HeadlessSelectTrigger.vue

@@ -0,0 +1,22 @@
+<template>
+    <SelectTrigger :id="select.id">
+        <slot>
+            <HeadlessSelectValue :placeholder="select.placeholder" />
+            <SelectIcon />
+        </slot>
+    </SelectTrigger>
+</template>
+
+<script setup lang="ts">
+import { SelectIcon, SelectTrigger } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+import HeadlessSelectValue from './HeadlessSelectValue.vue';
+
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectTrigger> must be a child of a <HeadlessSelect>',
+);
+</script>

package/src/components/headless/HeadlessSelectValue.vue

@@ -0,0 +1,15 @@
+<template>
+    <SelectValue :placeholder="select.placeholder" />
+</template>
+
+<script setup lang="ts">
+import { SelectValue } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const select = injectReactiveOrFail<SelectExpose>(
+    'select',
+    '<HeadlessSelectValue> must be a child of a <HeadlessSelect>',
+);
+</script>

package/src/components/headless/HeadlessToast.vue

@@ -0,0 +1,18 @@
+<template>
+    <ToastRoot>
+        <slot>
+            <span v-if="message">{{ message }}</span>
+            <HeadlessToastAction v-for="(action, key) of actions" :key :action />
+        </slot>
+    </ToastRoot>
+</template>
+
+<script setup lang="ts">
+import { ToastRoot } from 'reka-ui';
+
+import type { ToastProps } from '@aerogel/core/components/contracts/Toast';
+
+import HeadlessToastAction from './HeadlessToastAction.vue';
+
+defineProps<ToastProps>();
+</script>

package/src/components/headless/HeadlessToastAction.vue

@@ -0,0 +1,13 @@
+<template>
+    <component :is="action.dismiss ? ToastClose : 'button'" type="button" @click="action.click">
+        {{ action.label }}
+    </component>
+</template>
+
+<script setup lang="ts">
+import { ToastClose } from 'reka-ui';
+
+import type { ToastAction as IToastAction } from '@aerogel/core/components/contracts/Toast';
+
+defineProps<{ action: IToastAction }>();
+</script>

package/src/components/headless/index.ts

@@ -1,3 +1,18 @@
-export * from './forms';
-export * from './modals';
-export * from './snackbars';
+export { default as HeadlessButton } from './HeadlessButton.vue';
+export { default as HeadlessInput } from './HeadlessInput.vue';
+export { default as HeadlessInputDescription } from './HeadlessInputDescription.vue';
+export { default as HeadlessInputError } from './HeadlessInputError.vue';
+export { default as HeadlessInputInput } from './HeadlessInputInput.vue';
+export { default as HeadlessInputLabel } from './HeadlessInputLabel.vue';
+export { default as HeadlessInputTextArea } from './HeadlessInputTextArea.vue';
+export { default as HeadlessModal } from './HeadlessModal.vue';
+export { default as HeadlessModalContent } from './HeadlessModalContent.vue';
+export { default as HeadlessModalOverlay } from './HeadlessModalOverlay.vue';
+export { default as HeadlessModalTitle } from './HeadlessModalTitle.vue';
+export { default as HeadlessSelect } from './HeadlessSelect.vue';
+export { default as HeadlessSelectLabel } from './HeadlessSelectLabel.vue';
+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 HeadlessToast } from './HeadlessToast.vue';

package/src/components/index.ts

@@ -1,13 +1,7 @@
-import AGAppLayout from './AGAppLayout.vue';
-import AGAppOverlays from './AGAppOverlays.vue';
-
-export { AGAppLayout, AGAppOverlays };
+export { default as AppLayout } from './AppLayout.vue';
+export { default as AppOverlays } from './AppOverlays.vue';
 
 export * from './composition';
-export * from './constants';
-export * from './forms';
+export * from './contracts';
 export * from './headless';
-export * from './interfaces';
-export * from './lib';
-export * from './modals';
-export * from './snackbars';
+export * from './ui';

package/src/components/ui/AdvancedOptions.vue

@@ -0,0 +1,18 @@
+<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"
+        >
+            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
+            <span>{{ $td('ui.advancedOptions', 'Advanced options') }}</span>
+        </summary>
+
+        <div class="pt-2 pl-4">
+            <slot />
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+</script>