From e408eabd8b841cdf8c71ce27c35c9675f2db8625 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 30 Nov 2023 16:31:48 +0100
Subject: [PATCH] fix(components): move remaining classes to config (#1039)

---
 docs/content/3.forms/1.input.md               | 15 +++++++++++
 docs/content/3.forms/2.textarea.md            | 15 +++++++++++
 docs/content/3.forms/3.select.md              | 19 ++++++++++++++
 src/runtime/components/elements/Alert.vue     |  2 +-
 .../components/elements/AvatarGroup.ts        |  2 +-
 src/runtime/components/elements/Button.vue    | 10 ++++---
 .../components/elements/ButtonGroup.ts        | 17 ++----------
 src/runtime/components/elements/Dropdown.vue  |  6 ++---
 src/runtime/components/elements/MeterGroup.ts | 22 +++-------------
 src/runtime/components/forms/Checkbox.vue     |  6 ++---
 src/runtime/components/forms/Input.vue        |  6 ++---
 src/runtime/components/forms/Radio.vue        |  6 ++---
 src/runtime/components/forms/RadioGroup.vue   |  2 +-
 src/runtime/components/forms/Select.vue       |  6 ++---
 src/runtime/components/forms/SelectMenu.vue   | 26 +++++++++----------
 src/runtime/components/forms/Textarea.vue     |  2 +-
 src/runtime/components/layout/Divider.vue     |  8 +-----
 .../components/navigation/CommandPalette.vue  |  2 +-
 .../components/overlays/ContextMenu.vue       |  3 ++-
 src/runtime/components/overlays/Modal.vue     |  5 +---
 .../components/overlays/Notification.vue      |  2 +-
 src/runtime/components/overlays/Popover.vue   |  5 ++--
 src/runtime/components/overlays/Slideover.vue |  8 +++---
 src/runtime/components/overlays/Tooltip.vue   |  5 ++--
 src/runtime/ui.config/elements/alert.ts       |  1 +
 src/runtime/ui.config/elements/button.ts      |  6 ++++-
 src/runtime/ui.config/elements/buttonGroup.ts | 15 +++++++++--
 src/runtime/ui.config/elements/dropdown.ts    |  6 +++--
 src/runtime/ui.config/elements/meterGroup.ts  | 17 ++++++++++--
 src/runtime/ui.config/forms/checkbox.ts       |  5 +++-
 src/runtime/ui.config/forms/input.ts          |  4 ++-
 src/runtime/ui.config/forms/radio.ts          |  5 +++-
 src/runtime/ui.config/forms/select.ts         |  3 ++-
 src/runtime/ui.config/forms/selectMenu.ts     |  9 +++++--
 src/runtime/ui.config/forms/textarea.ts       |  3 ++-
 src/runtime/ui.config/layout/divider.ts       |  5 ++++
 .../ui.config/navigation/commandPalette.ts    |  1 +
 src/runtime/ui.config/overlays/contextMenu.ts |  4 +--
 src/runtime/ui.config/overlays/modal.ts       |  7 ++---
 .../ui.config/overlays/notification.ts        |  1 +
 src/runtime/ui.config/overlays/popover.ts     |  3 ++-
 src/runtime/ui.config/overlays/slideover.ts   |  7 ++++-
 src/runtime/ui.config/overlays/tooltip.ts     |  5 ++--
 .../ui.config/{_popperArrow.ts => popper.ts}  |  6 ++---
 44 files changed, 196 insertions(+), 117 deletions(-)
 rename src/runtime/ui.config/{_popperArrow.ts => popper.ts} (75%)

diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md
index f2b29e27..b06ba702 100644
--- a/docs/content/3.forms/1.input.md
+++ b/docs/content/3.forms/1.input.md
@@ -148,6 +148,21 @@ excludedProps:
 ---
 ::
 
+### Padded
+
+Use the `padded` prop to remove the padding of the Input.
+
+::component-card
+---
+props:
+  padded: false
+baseProps:
+  placeholder: 'Search...'
+  variant: 'none'
+  class: 'w-full'
+---
+::
+
 ## Slots
 
 ### `leading`
diff --git a/docs/content/3.forms/2.textarea.md b/docs/content/3.forms/2.textarea.md
index f84871e8..fa0af370 100644
--- a/docs/content/3.forms/2.textarea.md
+++ b/docs/content/3.forms/2.textarea.md
@@ -132,6 +132,21 @@ props:
 ---
 ::
 
+### Padded
+
+Use the `padded` prop to remove the padding of the Textarea.
+
+::component-card
+---
+props:
+  padded: false
+baseProps:
+  placeholder: 'Search...'
+  variant: 'none'
+  class: 'w-full'
+---
+::
+
 ## Props
 
 :component-props
diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md
index ade77cfb..9acffba3 100644
--- a/docs/content/3.forms/3.select.md
+++ b/docs/content/3.forms/3.select.md
@@ -175,6 +175,25 @@ excludedProps:
 ---
 ::
 
+### Padded
+
+Use the `padded` prop to remove the padding of the Select.
+
+::component-card
+---
+props:
+  padded: false
+baseProps:
+  placeholder: 'Search...'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  variant: 'none'
+  class: 'w-full'
+---
+::
+
 ## Slots
 
 ### `leading`
diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index e5809b3c..07d20ccc 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -4,7 +4,7 @@
       <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
       <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
-      <div class="w-0 flex-1">
+      <div :class="ui.inner">
         <p :class="ui.title">
           <slot name="title" :title="title">
             {{ title }}
diff --git a/src/runtime/components/elements/AvatarGroup.ts b/src/runtime/components/elements/AvatarGroup.ts
index 5c6d1728..dc87e34f 100644
--- a/src/runtime/components/elements/AvatarGroup.ts
+++ b/src/runtime/components/elements/AvatarGroup.ts
@@ -32,7 +32,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof avatarGroupConfig> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 1c04c889..ba0d55cd 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -5,7 +5,7 @@
     </slot>
 
     <slot>
-      <span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
+      <span v-if="label" :class="[truncate ? ui.truncate : '']">
         {{ label }}
       </span>
     </slot>
@@ -154,7 +154,7 @@ export default defineComponent({
         ui.value.gap[size.value],
         props.padded && ui.value[isSquare.value ? 'square' : 'padding'][size.value],
         variant?.replaceAll('{color}', props.color),
-        props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
+        props.block ? ui.value.block : ui.value.inline
       ), props.class)
     })
 
@@ -178,7 +178,7 @@ export default defineComponent({
       return twJoin(
         ui.value.icon.base,
         ui.value.icon.size[size.value],
-        props.loading && 'animate-spin'
+        props.loading && ui.value.icon.loading
       )
     })
 
@@ -186,11 +186,13 @@ export default defineComponent({
       return twJoin(
         ui.value.icon.base,
         ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && 'animate-spin'
+        props.loading && !isLeading.value && ui.value.icon.loading
       )
     })
 
     return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
       attrs,
       isLeading,
       isTrailing,
diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts
index 4bf226f0..0d91d134 100644
--- a/src/runtime/components/elements/ButtonGroup.ts
+++ b/src/runtime/components/elements/ButtonGroup.ts
@@ -35,7 +35,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof buttonGroupConfig> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -52,20 +52,7 @@ export default defineComponent({
       ), props.class)
     })
 
-    const rounded = computed(() => {
-      const roundedMap = {
-        'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
-        'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
-        rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
-        'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
-        'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
-        'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
-        'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
-        'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
-        'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
-      }
-      return roundedMap[ui.value.rounded][props.orientation]
-    })
+    const rounded = computed(() => ui.value.orientation[ui.value.rounded][props.orientation])
 
     useProvideButtonGroup({ orientation: toRef(props, 'orientation'), size: toRef(props, 'size'), ui, rounded })
 
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index d76df5d4..eda24938 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -4,7 +4,7 @@
       ref="trigger"
       as="div"
       :disabled="disabled"
-      class="inline-flex w-full"
+      :class="ui.trigger"
       role="button"
       @mouseover="onMouseOver"
     >
@@ -18,7 +18,7 @@
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
               <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
@@ -35,7 +35,7 @@
                       <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
                       <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
-                      <span class="truncate">{{ item.label }}</span>
+                      <span :class="ui.item.label">{{ item.label }}</span>
 
                       <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
                         <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
diff --git a/src/runtime/components/elements/MeterGroup.ts b/src/runtime/components/elements/MeterGroup.ts
index 7e87df01..ae0bf764 100644
--- a/src/runtime/components/elements/MeterGroup.ts
+++ b/src/runtime/components/elements/MeterGroup.ts
@@ -44,14 +44,14 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: 'i-heroicons-minus'
+      default: () => meterGroupConfig.default.icon
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof meterGroupConfig & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof meterGroupConfig> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -70,21 +70,7 @@ export default defineComponent({
 
     const children = computed(() => getSlotsChildren(slots))
 
-    const rounded = computed(() => {
-      const roundedMap = {
-        'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
-        'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
-        rounded: { left: 'rounded-s', right: 'rounded-e' },
-        'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
-        'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
-        'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
-        'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
-        'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
-        'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
-      }
-
-      return roundedMap[ui.value.rounded]
-    })
+    const rounded = computed(() => ui.value.orientation[ui.value.rounded])
 
     function clampPercent (value: number, min: number, max: number): number {
       if (min == max) {
@@ -198,7 +184,7 @@ export default defineComponent({
         vNodeSlots[0] = slots.indicator({ percent: percent.value })
       }
 
-      vNodeSlots[2] = h('ol', { class: 'list-disc list-inside' }, labels.value.map((label, key) => {
+      vNodeSlots[2] = h('ol', { class: ui.value.list }, labels.value.map((label, key) => {
         const labelClass = computed(() => {
           return twJoin(
             uiMeter.value.label.base,
diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue
index a3e8f62c..8002806c 100644
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.wrapper">
-    <div class="flex items-center h-5">
+    <div :class="ui.container">
       <input
         :id="inputId"
         v-model="toggle"
@@ -11,13 +11,12 @@
         :checked="checked"
         :indeterminate="indeterminate"
         type="checkbox"
-        class="form-checkbox"
         :class="inputClass"
         v-bind="attrs"
         @change="onChange"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
+    <div v-if="label || $slots.label" :class="ui.inner">
       <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
@@ -130,6 +129,7 @@ export default defineComponent({
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         ui.value.rounded,
         ui.value.background,
         ui.value.border,
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index 6d5b575b..95a883cd 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -9,7 +9,6 @@
       :required="required"
       :placeholder="placeholder"
       :disabled="disabled || loading"
-      class="form-input"
       :class="inputClass"
       v-bind="attrs"
       @input="onInput"
@@ -234,6 +233,7 @@ export default defineComponent({
 
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         rounded.value,
         ui.value.placeholder,
         ui.value.size[size.value],
@@ -281,7 +281,7 @@ export default defineComponent({
         ui.value.icon.base,
         color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
-        props.loading && 'animate-spin'
+        props.loading && ui.value.icon.loading
       )
     })
 
@@ -298,7 +298,7 @@ export default defineComponent({
         ui.value.icon.base,
         color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && 'animate-spin'
+        props.loading && !isLeading.value && ui.value.icon.loading
       )
     })
 
diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index 1a05a695..6a61cd3a 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.wrapper">
-    <div class="flex items-center h-5">
+    <div :class="ui.container">
       <input
         :id="inputId"
         v-model="pick"
@@ -9,12 +9,11 @@
         :value="value"
         :disabled="disabled"
         type="radio"
-        class="form-radio"
         :class="inputClass"
         v-bind="attrs"
       >
     </div>
-    <div v-if="label || $slots.label" class="ms-3 flex flex-col">
+    <div v-if="label || $slots.label" :class="ui.inner">
       <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
@@ -128,6 +127,7 @@ export default defineComponent({
     const inputClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         ui.value.background,
         ui.value.border,
         color.value && ui.value.ring.replaceAll('{color}', color.value),
diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index b3b1e7da..fd20f4dd 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -90,7 +90,7 @@ export default defineComponent({
       default: () => ({})
     },
     uiRadio: {
-      type: Object as PropType<Partial<typeof configRadio & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof configRadio> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index 922add45..29bf5257 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -6,7 +6,6 @@
       :value="modelValue"
       :required="required"
       :disabled="disabled || loading"
-      class="form-select"
       :class="selectClass"
       v-bind="attrs"
       @input="onInput"
@@ -256,6 +255,7 @@ export default defineComponent({
 
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         rounded.value,
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : 'p-0',
@@ -302,7 +302,7 @@ export default defineComponent({
         ui.value.icon.base,
         color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
-        props.loading && 'animate-spin'
+        props.loading && ui.value.icon.loading
       )
     })
 
@@ -319,7 +319,7 @@ export default defineComponent({
         ui.value.icon.base,
         color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && 'animate-spin'
+        props.loading && !isLeading.value && ui.value.icon.loading
       )
     })
 
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index a1230b24..1cc1c472 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -15,7 +15,7 @@
       v-if="required"
       :value="modelValue"
       :required="required"
-      class="absolute inset-0 w-px opacity-0 cursor-default"
+      :class="uiMenu.required"
       tabindex="-1"
       aria-hidden="true"
     >
@@ -25,7 +25,7 @@
       ref="trigger"
       as="div"
       role="button"
-      class="inline-flex w-full"
+      :class="uiMenu.trigger"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
         <button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
@@ -36,9 +36,9 @@
           </span>
 
           <slot name="label">
-            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
-            <span v-else-if="!multiple && modelValue" class="block truncate">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
-            <span v-else class="block truncate">{{ placeholder || '&nbsp;' }}</span>
+            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
+            <span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
+            <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
           <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
@@ -53,7 +53,8 @@
     <div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
       <Transition appear v-bind="uiMenu.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(uiMenu.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" />
+
           <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
             <HComboboxInput
               v-if="searchable"
@@ -101,7 +102,7 @@
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                 <div :class="uiMenu.option.container">
                   <slot name="option-create" :option="queryOption" :active="active" :selected="selected">
-                    <span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
+                    <span :class="uiMenu.option.create">Create "{{ queryOption[optionAttribute] }}"</span>
                   </slot>
                 </div>
               </li>
@@ -312,7 +313,7 @@ export default defineComponent({
       default: () => ({})
     },
     uiMenu: {
-      type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof configMenu> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -339,15 +340,14 @@ export default defineComponent({
 
       return twMerge(twJoin(
         ui.value.base,
+        uiMenu.value.select,
         rounded.value,
-        'text-left cursor-default',
         ui.value.size[size.value],
         ui.value.gap[size.value],
         props.padded ? ui.value.padding[size.value] : 'p-0',
         variant?.replaceAll('{color}', color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value],
-        'inline-flex items-center'
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
       ), props.selectClass)
     })
 
@@ -388,7 +388,7 @@ export default defineComponent({
         ui.value.icon.base,
         color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
-        props.loading && 'animate-spin'
+        props.loading && ui.value.icon.loading
       )
     })
 
@@ -405,7 +405,7 @@ export default defineComponent({
         ui.value.icon.base,
         color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
         ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && 'animate-spin'
+        props.loading && !isLeading.value && ui.value.icon.loading
       )
     })
 
diff --git a/src/runtime/components/forms/Textarea.vue b/src/runtime/components/forms/Textarea.vue
index 1d20e9ed..0d30b357 100644
--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -9,7 +9,6 @@
       :required="required"
       :disabled="disabled"
       :placeholder="placeholder"
-      class="form-textarea"
       :class="textareaClass"
       v-bind="attrs"
       @input="onInput"
@@ -227,6 +226,7 @@ export default defineComponent({
 
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         ui.value.rounded,
         ui.value.placeholder,
         ui.value.size[size.value],
diff --git a/src/runtime/components/layout/Divider.vue b/src/runtime/components/layout/Divider.vue
index 956af82a..4c65ba63 100644
--- a/src/runtime/components/layout/Divider.vue
+++ b/src/runtime/components/layout/Divider.vue
@@ -91,17 +91,11 @@ export default defineComponent({
     })
 
     const borderClass = computed(() => {
-      const typeClass = ({
-        solid: 'border-solid',
-        dotted: 'border-dotted',
-        dashed: 'border-dashed'
-      })[props.type]
-
       return twJoin(
         ui.value.border.base,
         isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
         isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
-        typeClass
+        ui.value.border.type[props.type]
       )
     })
 
diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index 14d515b3..97b39381 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -311,7 +311,7 @@ export default defineComponent({
       return twJoin(
         ui.value.input.icon.base,
         ui.value.input.icon.size,
-        ((props.loading || isLoading.value) && props.loadingIcon) && 'animate-spin'
+        ((props.loading || isLoading.value) && props.loadingIcon) && ui.value.input.icon.loading
       )
     })
 
diff --git a/src/runtime/components/overlays/ContextMenu.vue b/src/runtime/components/overlays/ContextMenu.vue
index 786c4bf0..28d1a4f9 100644
--- a/src/runtime/components/overlays/ContextMenu.vue
+++ b/src/runtime/components/overlays/ContextMenu.vue
@@ -2,7 +2,8 @@
   <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
     <Transition appear v-bind="ui.transition">
       <div>
-        <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+        <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
+
         <div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
           <slot />
         </div>
diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 40430ead..5b726619 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -14,10 +14,7 @@
                 ui.background,
                 ui.ring,
                 ui.shadow,
-                fullscreen ? 'w-screen' : ui.width,
-                fullscreen ? 'h-screen' : ui.height,
-                fullscreen ? 'rounded-none' : ui.rounded,
-                fullscreen ? 'm-0' : ui.margin
+                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
               ]"
             >
               <slot />
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index 8ab2ae84..3ca9a156 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -12,7 +12,7 @@
           <UIcon v-if="icon" :name="icon" :class="iconClass" />
           <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
-          <div class="w-0 flex-1">
+          <div :class="ui.inner">
             <p :class="ui.title">
               <slot name="title" :title="title">
                 {{ title }}
diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index 56fca93c..3e78f5f3 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -4,7 +4,7 @@
       ref="trigger"
       as="div"
       :disabled="disabled"
-      class="inline-flex w-full"
+      :class="ui.trigger"
       role="button"
       @mouseover="onMouseOver"
     >
@@ -22,7 +22,8 @@
     <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
+
           <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
             <slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
           </HPopoverPanel>
diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index 909820eb..a53e1a5b 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -90,10 +90,10 @@ export default defineComponent({
 
       return {
         ...ui.value.transition,
-        enterFrom: props.side === 'left' ? '-translate-x-full' : 'translate-x-full',
-        enterTo: 'translate-x-0',
-        leaveFrom: 'translate-x-0',
-        leaveTo: props.side === 'left' ? '-translate-x-full' : 'translate-x-full'
+        enterFrom: props.side === 'left' ? ui.value.translate.left : ui.value.translate.right,
+        enterTo: ui.value.translate.base,
+        leaveFrom: ui.value.translate.base,
+        leaveTo: props.side === 'left' ? ui.value.translate.left : ui.value.translate.right
       }
     })
 
diff --git a/src/runtime/components/overlays/Tooltip.vue b/src/runtime/components/overlays/Tooltip.vue
index a7662d6b..73d65eef 100644
--- a/src/runtime/components/overlays/Tooltip.vue
+++ b/src/runtime/components/overlays/Tooltip.vue
@@ -7,7 +7,7 @@
     <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
       <Transition appear v-bind="ui.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
 
           <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
             <slot name="text">
@@ -15,7 +15,8 @@
             </slot>
 
             <span v-if="shortcuts?.length" :class="ui.shortcuts">
-              <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
+              <span :class="ui.middot">&middot;</span>
+
               <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
                 {{ shortcut }}
               </Ukbd>
diff --git a/src/runtime/ui.config/elements/alert.ts b/src/runtime/ui.config/elements/alert.ts
index 6987c302..2a503ece 100644
--- a/src/runtime/ui.config/elements/alert.ts
+++ b/src/runtime/ui.config/elements/alert.ts
@@ -1,5 +1,6 @@
 export default {
   wrapper: 'w-full relative overflow-hidden',
+  inner: 'w-0 flex-1',
   title: 'text-sm font-medium',
   description: 'mt-1 text-sm leading-4 opacity-90',
   actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
diff --git a/src/runtime/ui.config/elements/button.ts b/src/runtime/ui.config/elements/button.ts
index fa284e39..2bde090f 100644
--- a/src/runtime/ui.config/elements/button.ts
+++ b/src/runtime/ui.config/elements/button.ts
@@ -2,6 +2,9 @@ export default {
   base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
   font: 'font-medium',
   rounded: 'rounded-md',
+  truncate: 'text-left break-all line-clamp-1',
+  block: 'w-full flex justify-center items-center',
+  inline: 'inline-flex items-center',
   size: {
     '2xs': 'text-xs',
     xs: 'text-xs',
@@ -58,6 +61,7 @@ export default {
   },
   icon: {
     base: 'flex-shrink-0',
+    loading: 'animate-spin',
     size: {
       '2xs': 'h-4 w-4',
       xs: 'h-4 w-4',
@@ -73,4 +77,4 @@ export default {
     color: 'primary',
     loadingIcon: 'i-heroicons-arrow-path-20-solid'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/elements/buttonGroup.ts b/src/runtime/ui.config/elements/buttonGroup.ts
index 7fe87768..bf5ef5ed 100644
--- a/src/runtime/ui.config/elements/buttonGroup.ts
+++ b/src/runtime/ui.config/elements/buttonGroup.ts
@@ -4,5 +4,16 @@ export default {
     vertical: 'inline-flex flex-col -space-y-px'
   },
   rounded: 'rounded-md',
-  shadow: 'shadow-sm'
-}
\ No newline at end of file
+  shadow: 'shadow-sm',
+  orientation: {
+    'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
+    'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
+    rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
+    'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
+    'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
+    'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
+    'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
+    'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
+    'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
+  }
+}
diff --git a/src/runtime/ui.config/elements/dropdown.ts b/src/runtime/ui.config/elements/dropdown.ts
index 608f5afb..380c9854 100644
--- a/src/runtime/ui.config/elements/dropdown.ts
+++ b/src/runtime/ui.config/elements/dropdown.ts
@@ -1,8 +1,9 @@
-import _popperArrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   wrapper: 'relative inline-flex text-left rtl:text-right',
   container: 'z-20 group',
+  trigger: 'inline-flex w-full',
   width: 'w-48',
   height: '',
   background: 'bg-white dark:bg-gray-800',
@@ -29,6 +30,7 @@ export default {
       base: 'flex-shrink-0',
       size: '3xs' as const
     },
+    label: 'truncate',
     shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
   },
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
@@ -45,7 +47,7 @@ export default {
     strategy: 'fixed'
   },
   arrow: {
-    ..._popperArrow,
+    ...arrow,
     ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
     background: 'before:bg-white dark:before:bg-gray-700'
   }
diff --git a/src/runtime/ui.config/elements/meterGroup.ts b/src/runtime/ui.config/elements/meterGroup.ts
index 4260aeb0..f402f869 100644
--- a/src/runtime/ui.config/elements/meterGroup.ts
+++ b/src/runtime/ui.config/elements/meterGroup.ts
@@ -5,7 +5,20 @@ export default {
   transition: 'transition-all',
   rounded: 'rounded-full',
   shadow: '',
+  list: 'list-disc list-inside',
+  orientation: {
+    'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
+    'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
+    rounded: { left: 'rounded-s', right: 'rounded-e' },
+    'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
+    'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
+    'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
+    'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
+    'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
+    'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
+  },
   default: {
-    size: 'md'
+    size: 'md',
+    icon: 'i-heroicons-minus-20-solid'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/forms/checkbox.ts b/src/runtime/ui.config/forms/checkbox.ts
index 88707404..52c24b91 100644
--- a/src/runtime/ui.config/forms/checkbox.ts
+++ b/src/runtime/ui.config/forms/checkbox.ts
@@ -1,15 +1,18 @@
 export default {
   wrapper: 'relative flex items-start',
+  container: 'flex items-center h-5',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  form: 'form-checkbox',
   rounded: 'rounded',
   color: 'text-{color}-500 dark:text-{color}-400',
   background: 'bg-white dark:bg-gray-900',
   border: 'border border-gray-300 dark:border-gray-700',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  inner: 'ms-3 flex flex-col',
   label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
   required: 'text-sm text-red-500 dark:text-red-400',
   help: 'text-sm text-gray-500 dark:text-gray-400',
   default: {
     color: 'primary'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/forms/input.ts b/src/runtime/ui.config/forms/input.ts
index 725030ee..bcbf5abb 100644
--- a/src/runtime/ui.config/forms/input.ts
+++ b/src/runtime/ui.config/forms/input.ts
@@ -1,6 +1,7 @@
 export default {
   wrapper: 'relative',
   base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
+  form: 'form-input',
   rounded: 'rounded-md',
   placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
   size: {
@@ -62,6 +63,7 @@ export default {
   icon: {
     base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
     color: 'text-{color}-500 dark:text-{color}-400',
+    loading: 'animate-spin',
     size: {
       '2xs': 'h-4 w-4',
       xs: 'h-4 w-4',
@@ -101,4 +103,4 @@ export default {
     variant: 'outline',
     loadingIcon: 'i-heroicons-arrow-path-20-solid'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/forms/radio.ts b/src/runtime/ui.config/forms/radio.ts
index 1b78c34e..5b76a02e 100644
--- a/src/runtime/ui.config/forms/radio.ts
+++ b/src/runtime/ui.config/forms/radio.ts
@@ -1,14 +1,17 @@
 export default {
   wrapper: 'relative flex items-start',
+  container: 'flex items-center h-5',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  form: 'form-radio',
   color: 'text-{color}-500 dark:text-{color}-400',
   background: 'bg-white dark:bg-gray-900',
   border: 'border border-gray-300 dark:border-gray-700',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  inner: 'ms-3 flex flex-col',
   label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
   required: 'text-sm text-red-500 dark:text-red-400',
   help: 'text-sm text-gray-500 dark:text-gray-400',
   default: {
     color: 'primary'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/forms/select.ts b/src/runtime/ui.config/forms/select.ts
index 222deb42..1016c79a 100644
--- a/src/runtime/ui.config/forms/select.ts
+++ b/src/runtime/ui.config/forms/select.ts
@@ -2,6 +2,7 @@ import input from './input'
 
 export default {
   ...input,
+  form: 'form-select',
   placeholder: 'text-gray-900 dark:text-white',
   default: {
     size: 'sm',
@@ -10,4 +11,4 @@ export default {
     loadingIcon: 'i-heroicons-arrow-path-20-solid',
     trailingIcon: 'i-heroicons-chevron-down-20-solid'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/forms/selectMenu.ts b/src/runtime/ui.config/forms/selectMenu.ts
index 301e30fc..b2e436b7 100644
--- a/src/runtime/ui.config/forms/selectMenu.ts
+++ b/src/runtime/ui.config/forms/selectMenu.ts
@@ -1,7 +1,9 @@
-import _popperArrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   container: 'z-20 group',
+  trigger: 'inline-flex w-full',
+  select: 'inline-flex items-center text-left cursor-default',
   width: 'w-full',
   height: 'max-h-60',
   base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
@@ -11,6 +13,8 @@ export default {
   padding: 'p-1',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
   input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
+  required: 'absolute inset-0 w-px opacity-0 cursor-default',
+  label: 'block truncate',
   option: {
     base: 'cursor-default select-none relative flex items-center justify-between gap-1',
     rounded: 'rounded-md',
@@ -23,6 +27,7 @@ export default {
     selected: 'pe-7',
     disabled: 'cursor-not-allowed opacity-50',
     empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
+    create: 'block truncate',
     icon: {
       base: 'flex-shrink-0 h-4 w-4',
       active: 'text-gray-900 dark:text-white',
@@ -55,7 +60,7 @@ export default {
     clearOnClose: false
   },
   arrow: {
-    ..._popperArrow,
+    ...arrow,
     ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
     background: 'before:bg-white dark:before:bg-gray-700'
   }
diff --git a/src/runtime/ui.config/forms/textarea.ts b/src/runtime/ui.config/forms/textarea.ts
index 560758f1..8c26b0e9 100644
--- a/src/runtime/ui.config/forms/textarea.ts
+++ b/src/runtime/ui.config/forms/textarea.ts
@@ -2,9 +2,10 @@ import input from './input'
 
 export default {
   ...input,
+  form: 'form-textarea',
   default: {
     size: 'sm',
     color: 'white',
     variant: 'outline'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/layout/divider.ts b/src/runtime/ui.config/layout/divider.ts
index 04ce4362..4c75a9e3 100644
--- a/src/runtime/ui.config/layout/divider.ts
+++ b/src/runtime/ui.config/layout/divider.ts
@@ -16,6 +16,11 @@ export default {
     size: {
       horizontal: 'border-t',
       vertical: 'border-s'
+    },
+    type: {
+      solid: 'border-solid',
+      dotted: 'border-dotted',
+      dashed: 'border-dashed'
     }
   },
   icon: {
diff --git a/src/runtime/ui.config/navigation/commandPalette.ts b/src/runtime/ui.config/navigation/commandPalette.ts
index 899a5434..9fc068ec 100644
--- a/src/runtime/ui.config/navigation/commandPalette.ts
+++ b/src/runtime/ui.config/navigation/commandPalette.ts
@@ -9,6 +9,7 @@ export default {
     size: 'sm:text-sm',
     icon: {
       base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
+      loading: 'animate-spin',
       size: 'h-4 w-4',
       padding: 'ps-10'
     },
diff --git a/src/runtime/ui.config/overlays/contextMenu.ts b/src/runtime/ui.config/overlays/contextMenu.ts
index 3711be26..ace024e0 100644
--- a/src/runtime/ui.config/overlays/contextMenu.ts
+++ b/src/runtime/ui.config/overlays/contextMenu.ts
@@ -1,4 +1,4 @@
-import arrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   wrapper: 'relative',
@@ -23,4 +23,4 @@ export default {
     scroll: false
   },
   arrow
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/overlays/modal.ts b/src/runtime/ui.config/overlays/modal.ts
index c6b5c70f..be640b2a 100644
--- a/src/runtime/ui.config/overlays/modal.ts
+++ b/src/runtime/ui.config/overlays/modal.ts
@@ -4,7 +4,7 @@ export default {
   container: 'flex min-h-full items-end sm:items-center justify-center text-center',
   padding: 'p-4 sm:p-0',
   margin: 'sm:my-8',
-  base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
+  base: 'relative text-left rtl:text-right overflow-hidden flex flex-col',
   overlay: {
     base: 'fixed inset-0 transition-opacity',
     background: 'bg-gray-200/75 dark:bg-gray-800/75',
@@ -22,8 +22,9 @@ export default {
   ring: '',
   rounded: 'rounded-lg',
   shadow: 'shadow-xl',
-  width: 'sm:max-w-lg',
+  width: 'w-full sm:max-w-lg',
   height: '',
+  fullscreen: 'w-screen h-screen',
   // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {
     enter: 'ease-out duration-300',
@@ -33,4 +34,4 @@ export default {
     leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
     leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/overlays/notification.ts b/src/runtime/ui.config/overlays/notification.ts
index e18c8d3b..789abc35 100644
--- a/src/runtime/ui.config/overlays/notification.ts
+++ b/src/runtime/ui.config/overlays/notification.ts
@@ -1,6 +1,7 @@
 export default {
   wrapper: 'w-full pointer-events-auto',
   container: 'relative overflow-hidden',
+  inner: 'w-0 flex-1',
   title: 'text-sm font-medium text-gray-900 dark:text-white',
   description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
   actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
diff --git a/src/runtime/ui.config/overlays/popover.ts b/src/runtime/ui.config/overlays/popover.ts
index 822130c5..29dc5e3b 100644
--- a/src/runtime/ui.config/overlays/popover.ts
+++ b/src/runtime/ui.config/overlays/popover.ts
@@ -1,8 +1,9 @@
-import arrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   wrapper: 'relative',
   container: 'z-50 group',
+  trigger: 'inline-flex w-full',
   width: '',
   background: 'bg-white dark:bg-gray-900',
   shadow: 'shadow-lg',
diff --git a/src/runtime/ui.config/overlays/slideover.ts b/src/runtime/ui.config/overlays/slideover.ts
index ae5e88d6..c8d3b731 100644
--- a/src/runtime/ui.config/overlays/slideover.ts
+++ b/src/runtime/ui.config/overlays/slideover.ts
@@ -20,9 +20,14 @@ export default {
   padding: '',
   shadow: 'shadow-xl',
   width: 'w-screen max-w-md',
+  translate: {
+    base: 'translate-x-0',
+    left: '-translate-x-full',
+    right: 'translate-x-full'
+  },
   // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {
     enter: 'transform transition ease-in-out duration-300',
     leave: 'transform transition ease-in-out duration-200'
   }
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/overlays/tooltip.ts b/src/runtime/ui.config/overlays/tooltip.ts
index b329fdfb..56849a70 100644
--- a/src/runtime/ui.config/overlays/tooltip.ts
+++ b/src/runtime/ui.config/overlays/tooltip.ts
@@ -1,4 +1,4 @@
-import arrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   wrapper: 'relative inline-flex',
@@ -11,6 +11,7 @@ export default {
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
   shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
+  middot: 'mx-1 text-gray-700 dark:text-gray-200',
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: 'transition ease-out duration-200',
@@ -24,4 +25,4 @@ export default {
     strategy: 'fixed'
   },
   arrow
-}
\ No newline at end of file
+}
diff --git a/src/runtime/ui.config/_popperArrow.ts b/src/runtime/ui.config/popper.ts
similarity index 75%
rename from src/runtime/ui.config/_popperArrow.ts
rename to src/runtime/ui.config/popper.ts
index c136506d..1fd4a713 100644
--- a/src/runtime/ui.config/_popperArrow.ts
+++ b/src/runtime/ui.config/popper.ts
@@ -1,8 +1,8 @@
-export default {
-	base: 'before:w-2 before:h-2',
+export const arrow = {
+	base: 'invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2',
 	ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
 	rounded: 'before:rounded-sm',
 	background: 'before:bg-gray-200 dark:before:bg-gray-800',
 	shadow: 'before:shadow',
 	placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
-}
\ No newline at end of file
+}