@nuxt/ui 3.1.2 → 3.1.3

package/.nuxt/ui/checkbox-group.ts

@@ -127,7 +127,7 @@ export default {
       "orientation": "horizontal" as typeof orientation[number],
       "variant": "table" as typeof variant[number],
       "class": {
-        "item": "first-of-type:rounded-l-lg last-of-type:rounded-r-lg",
+        "item": "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
         "fieldset": "gap-0 -space-x-px"
       }
     },

package/.nuxt/ui/context-menu.ts

@@ -18,7 +18,8 @@ const size = [
 
 export default {
   "slots": {
-    "content": "min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin)",
+    "content": "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-context-menu-content-transform-origin) flex flex-col",
+    "viewport": "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     "group": "p-1 isolate",
     "label": "w-full flex items-center font-semibold text-highlighted",
     "separator": "-mx-1 my-1 h-px bg-border",

package/.nuxt/ui/dropdown-menu.ts

@@ -18,7 +18,8 @@ const size = [
 
 export default {
   "slots": {
-    "content": "min-w-32 bg-default shadow-lg rounded-md ring ring-default divide-y divide-default overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin)",
+    "content": "min-w-32 bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col",
+    "viewport": "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     "arrow": "fill-default",
     "group": "p-1 isolate",
     "label": "w-full flex items-center font-semibold text-highlighted",

package/.nuxt/ui/input-menu.ts

@@ -38,8 +38,8 @@ export default {
     "trailing": "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
     "trailingIcon": "shrink-0 text-dimmed",
     "arrow": "fill-default",
-    "content": "max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto",
-    "viewport": "divide-y divide-default scroll-py-1",
+    "content": "max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col",
+    "viewport": "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     "group": "p-1 isolate",
     "empty": "py-2 text-center text-sm text-muted",
     "label": "font-semibold text-highlighted",

package/.nuxt/ui/navigation-menu.ts

@@ -43,24 +43,25 @@ export default {
     "linkLeadingIcon": "shrink-0 size-5",
     "linkLeadingAvatar": "shrink-0",
     "linkLeadingAvatarSize": "2xs",
-    "linkTrailing": "ms-auto inline-flex gap-1.5 items-center",
+    "linkTrailing": "group ms-auto inline-flex gap-1.5 items-center",
     "linkTrailingBadge": "shrink-0",
     "linkTrailingBadgeSize": "sm",
     "linkTrailingIcon": "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
     "linkLabel": "truncate",
     "linkLabelExternalIcon": "inline-block size-3 align-top text-dimmed",
-    "childList": "",
+    "childList": "isolate",
+    "childLabel": "text-xs text-highlighted",
     "childItem": "",
-    "childLink": "group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start",
-    "childLinkWrapper": "flex flex-col items-start",
+    "childLink": "group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
+    "childLinkWrapper": "min-w-0",
     "childLinkIcon": "size-5 shrink-0",
-    "childLinkLabel": "font-semibold text-sm relative inline-flex",
+    "childLinkLabel": "truncate",
     "childLinkLabelExternalIcon": "inline-block size-3 align-top text-dimmed",
-    "childLinkDescription": "text-sm text-muted",
+    "childLinkDescription": "text-muted",
     "separator": "px-2 h-px bg-border",
     "viewportWrapper": "absolute top-full left-0 flex w-full",
     "viewport": "relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]",
-    "content": "absolute top-0 left-0 w-full",
+    "content": "",
     "indicator": "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[2] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
     "arrow": "relative top-[50%] size-2.5 rotate-45 border border-default bg-default z-[1] rounded-xs"
   },
@@ -68,31 +69,31 @@ export default {
     "color": {
       "primary": {
         "link": "focus-visible:before:ring-primary",
-        "childLink": "focus-visible:outline-primary"
+        "childLink": "focus-visible:before:ring-primary"
       },
       "secondary": {
         "link": "focus-visible:before:ring-secondary",
-        "childLink": "focus-visible:outline-secondary"
+        "childLink": "focus-visible:before:ring-secondary"
       },
       "success": {
         "link": "focus-visible:before:ring-success",
-        "childLink": "focus-visible:outline-success"
+        "childLink": "focus-visible:before:ring-success"
       },
       "info": {
         "link": "focus-visible:before:ring-info",
-        "childLink": "focus-visible:outline-info"
+        "childLink": "focus-visible:before:ring-info"
       },
       "warning": {
         "link": "focus-visible:before:ring-warning",
-        "childLink": "focus-visible:outline-warning"
+        "childLink": "focus-visible:before:ring-warning"
       },
       "error": {
         "link": "focus-visible:before:ring-error",
-        "childLink": "focus-visible:outline-error"
+        "childLink": "focus-visible:before:ring-error"
       },
       "neutral": {
         "link": "focus-visible:before:ring-inverted",
-        "childLink": "focus-visible:outline-inverted"
+        "childLink": "focus-visible:before:ring-inverted"
       }
     },
     "highlightColor": {
@@ -114,11 +115,16 @@ export default {
         "list": "flex items-center",
         "item": "py-2",
         "link": "px-2.5 py-1.5 before:inset-x-px before:inset-y-0",
-        "childList": "grid p-2"
+        "childList": "grid p-2",
+        "childLink": "px-3 py-2 gap-2 before:inset-x-px before:inset-y-0",
+        "childLinkLabel": "font-medium",
+        "content": "absolute top-0 left-0 w-full"
       },
       "vertical": {
         "root": "flex-col",
-        "link": "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
+        "link": "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0",
+        "childLabel": "px-1.5 py-0.5",
+        "childLink": "p-1.5 gap-1.5 before:inset-y-px before:inset-x-0"
       }
     },
     "contentOrientation": {
@@ -132,15 +138,15 @@ export default {
     },
     "active": {
       "true": {
-        "childLink": "bg-elevated text-highlighted",
+        "childLink": "before:bg-elevated text-highlighted",
         "childLinkIcon": "text-default"
       },
       "false": {
         "link": "text-muted",
         "linkLeadingIcon": "text-dimmed",
         "childLink": [
-          "hover:bg-elevated/50 text-default hover:text-highlighted",
-          "transition-colors"
+          "hover:before:bg-elevated/50 text-default hover:text-highlighted",
+          "transition-colors before:transition-colors"
         ],
         "childLinkIcon": [
           "text-dimmed group-hover:text-default",
@@ -179,6 +185,23 @@ export default {
         "content": "w-60"
       }
     },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "collapsed": false,
+      "class": {
+        "childList": "ms-5 border-s border-default",
+        "childItem": "ps-1.5 -ms-px",
+        "content": "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "collapsed": true,
+      "class": {
+        "link": "px-1.5",
+        "content": "shadow-sm rounded-sm min-h-6 p-1"
+      }
+    },
     {
       "orientation": "horizontal" as typeof orientation[number],
       "highlight": true,
@@ -319,6 +342,7 @@ export default {
       "variant": "pill" as typeof variant[number],
       "active": true,
       "highlight": true,
+      "disabled": false,
       "class": {
         "link": [
           "hover:before:bg-elevated/50",
@@ -476,21 +500,6 @@ export default {
       "class": {
         "link": "after:bg-inverted"
       }
-    },
-    {
-      "orientation": "vertical" as typeof orientation[number],
-      "collapsed": false,
-      "class": {
-        "childList": "ms-5 border-s border-default",
-        "childItem": "ps-1.5 -ms-px"
-      }
-    },
-    {
-      "orientation": "vertical" as typeof orientation[number],
-      "collapsed": true,
-      "class": {
-        "link": "px-1.5"
-      }
     }
   ],
   "defaultVariants": {

package/.nuxt/ui/radio-group.ts

@@ -219,7 +219,7 @@ export default {
       "orientation": "horizontal" as typeof orientation[number],
       "variant": "table" as typeof variant[number],
       "class": {
-        "item": "first-of-type:rounded-l-lg last-of-type:rounded-r-lg",
+        "item": "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
         "fieldset": "gap-0 -space-x-px"
       }
     },

package/.nuxt/ui/select-menu.ts

@@ -40,10 +40,10 @@ export default {
     "placeholder": "truncate text-dimmed",
     "arrow": "fill-default",
     "content": [
-      "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto",
+      "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
       "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"
     ],
-    "viewport": "divide-y divide-default scroll-py-1",
+    "viewport": "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     "group": "p-1 isolate",
     "empty": "py-2 text-center text-sm text-muted",
     "label": "font-semibold text-highlighted",

package/.nuxt/ui/select.ts

@@ -39,8 +39,8 @@ export default {
     "value": "truncate pointer-events-none",
     "placeholder": "truncate text-dimmed",
     "arrow": "fill-default",
-    "content": "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto",
-    "viewport": "divide-y divide-default scroll-py-1",
+    "content": "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto flex flex-col",
+    "viewport": "relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1",
     "group": "p-1 isolate",
     "empty": "py-2 text-center text-sm text-muted",
     "label": "font-semibold text-highlighted",

package/.nuxt/ui/tooltip.ts

@@ -1,6 +1,6 @@
 export default {
   "slots": {
-    "content": "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
+    "content": "flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
     "arrow": "fill-default",
     "text": "truncate",
     "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5",

package/.nuxt/ui.css

@@ -1,6 +1,6 @@
 @source "./ui";
 
-@theme default inline {
+@theme static {
   --color-old-neutral-50: oklch(98.5% 0 0);
   --color-old-neutral-100: oklch(97% 0 0);
   --color-old-neutral-200: oklch(92.2% 0 0);
@@ -12,6 +12,9 @@
   --color-old-neutral-800: oklch(26.9% 0 0);
   --color-old-neutral-900: oklch(20.5% 0 0);
   --color-old-neutral-950: oklch(14.5% 0 0);
+}
+
+@theme default inline {
   --color-primary-50: var(--ui-color-primary-50);
 	--color-primary-100: var(--ui-color-primary-100);
 	--color-primary-200: var(--ui-color-primary-200);

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "docs": "https://ui.nuxt.com/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.BvUP-pSb.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultUiConfig, b as addTemplates } from './shared/ui.Bix4DSU4.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -8,7 +8,7 @@ import 'tailwindcss/colors';
 import 'knitwork';
 
 const name = "@nuxt/ui";
-const version = "3.1.2";
+const version = "3.1.3";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/CommandPalette.vue

@@ -141,7 +141,7 @@ const groups = computed(() => {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="groups?.length" :class="ui.viewport({ class: props.ui?.viewport })">
+      <div v-if="groups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
         <ListboxGroup v-for="group in groups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
           <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey) }}

package/dist/runtime/components/ContextMenuContent.vue

@@ -91,68 +91,70 @@ const groups = computed(
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
-        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-          <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
-            <ReuseItemTemplate :item="item" :index="index" />
-          </ContextMenu.Label>
-          <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-          <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-            <ContextMenu.SubTrigger
-              as="button"
-              type="button"
+      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </ContextMenu.Label>
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <ContextMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </ContextMenu.SubTrigger>
+
+              <UContextMenuContent
+                sub
+                :class="props.class"
+                :ui="ui"
+                :ui-override="uiOverride"
+                :portal="portal"
+                :items="item.children"
+                :align-offset="-4"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :loading-icon="loadingIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="name" v-bind="slotData" />
+                </template>
+              </UContextMenuContent>
+            </ContextMenu.Sub>
+            <ContextMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
             >
               <ReuseItemTemplate :item="item" :index="index" />
-            </ContextMenu.SubTrigger>
-
-            <UContextMenuContent
-              sub
-              :class="props.class"
-              :ui="ui"
-              :ui-override="uiOverride"
-              :portal="portal"
-              :items="item.children"
-              :align-offset="-4"
-              :label-key="labelKey"
-              :checked-icon="checkedIcon"
-              :loading-icon="loadingIcon"
-              :external-icon="externalIcon"
-              v-bind="item.content"
+            </ContextMenu.CheckboxItem>
+            <ContextMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              @select="item.onSelect"
             >
-              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-              </template>
-            </UContextMenuContent>
-          </ContextMenu.Sub>
-          <ContextMenu.CheckboxItem
-            v-else-if="item.type === 'checkbox'"
-            :model-value="item.checked"
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey)"
-            :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-            @update:model-value="item.onUpdateChecked"
-            @select="item.onSelect"
-          >
-            <ReuseItemTemplate :item="item" :index="index" />
-          </ContextMenu.CheckboxItem>
-          <ContextMenu.Item
-            v-else
-            as-child
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey)"
-            @select="item.onSelect"
-          >
-            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
-                <ReuseItemTemplate :item="item" :active="active" :index="index" />
-              </ULinkBase>
-            </ULink>
-          </ContextMenu.Item>
-        </template>
-      </ContextMenu.Group>
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </ULinkBase>
+              </ULink>
+            </ContextMenu.Item>
+          </template>
+        </ContextMenu.Group>
+      </div>
 
       <slot />
 

package/dist/runtime/components/Drawer.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/drawer";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { useForwardPropsEmits } from "reka-ui";
+import { VisuallyHidden, useForwardPropsEmits } from "reka-ui";
 import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -65,6 +65,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
       <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
         <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
 
+        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+          <DrawerTitle v-if="title || !!slots.title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </DrawerTitle>
+
+          <DrawerDescription v-if="description || !!slots.description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </DrawerDescription>
+        </VisuallyHidden>
+
         <slot name="content">
           <div :class="ui.container({ class: props.ui?.container })">
             <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">

package/dist/runtime/components/DropdownMenuContent.vue

@@ -96,70 +96,72 @@ const groups = computed(
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
-        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-          <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
-            <ReuseItemTemplate :item="item" :index="index" />
-          </DropdownMenu.Label>
-          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
-          <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-            <DropdownMenu.SubTrigger
-              as="button"
-              type="button"
+      <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.Label>
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <DropdownMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="get(item, props.labelKey)"
+                :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </DropdownMenu.SubTrigger>
+
+              <UDropdownMenuContent
+                sub
+                :class="props.class"
+                :ui="ui"
+                :ui-override="uiOverride"
+                :portal="portal"
+                :items="item.children"
+                align="start"
+                :align-offset="-4"
+                :side-offset="3"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :loading-icon="loadingIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="name" v-bind="slotData" />
+                </template>
+              </UDropdownMenuContent>
+            </DropdownMenu.Sub>
+            <DropdownMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
             >
               <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.SubTrigger>
-
-            <UDropdownMenuContent
-              sub
-              :class="props.class"
-              :ui="ui"
-              :ui-override="uiOverride"
-              :portal="portal"
-              :items="item.children"
-              align="start"
-              :align-offset="-4"
-              :side-offset="3"
-              :label-key="labelKey"
-              :checked-icon="checkedIcon"
-              :loading-icon="loadingIcon"
-              :external-icon="externalIcon"
-              v-bind="item.content"
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey)"
+              @select="item.onSelect"
             >
-              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-              </template>
-            </UDropdownMenuContent>
-          </DropdownMenu.Sub>
-          <DropdownMenu.CheckboxItem
-            v-else-if="item.type === 'checkbox'"
-            :model-value="item.checked"
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey)"
-            :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
-            @update:model-value="item.onUpdateChecked"
-            @select="item.onSelect"
-          >
-            <ReuseItemTemplate :item="item" :index="index" />
-          </DropdownMenu.CheckboxItem>
-          <DropdownMenu.Item
-            v-else
-            as-child
-            :disabled="item.disabled"
-            :text-value="get(item, props.labelKey)"
-            @select="item.onSelect"
-          >
-            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
-                <ReuseItemTemplate :item="item" :active="active" :index="index" />
-              </ULinkBase>
-            </ULink>
-          </DropdownMenu.Item>
-        </template>
-      </DropdownMenu.Group>
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color, active })">
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </ULinkBase>
+              </ULink>
+            </DropdownMenu.Item>
+          </template>
+        </DropdownMenu.Group>
+      </div>
 
       <slot />
 

package/dist/runtime/components/Input.vue

@@ -29,6 +29,7 @@ const props = defineProps({
   autofocusDelay: { type: Number, required: false, default: 0 },
   disabled: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   icon: { type: String, required: false },

package/dist/runtime/components/Input.vue.d.ts

@@ -34,6 +34,13 @@ export interface InputProps extends UseComponentIconsProps {
     disabled?: boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    modelModifiers?: {
+        string?: boolean;
+        number?: boolean;
+        trim?: boolean;
+        lazy?: boolean;
+        nullify?: boolean;
+    };
     class?: any;
     ui?: Input['slots'];
 }