@stacksjs/defaults 0.70.362 → 0.70.365

package/resources/components/Dashboard/Models/ModelRecordsDashboard.stx

@@ -46,6 +46,7 @@ interface ResponseShape {
   writable: boolean
   writeCapabilities: WriteCapabilities
   createFields: CreateField[]
+  updateColumns: string[]
   error: string | null
 }
 
@@ -66,15 +67,14 @@ const search = state(navigation.urlQuery('q') || '')
 const filters = state<Record<string, string>>({})
 const writeCapabilities = state<WriteCapabilities>({ create: false, update: false, destroy: false })
 const createFields = state<CreateField[]>([])
+const updateColumns = state<string[]>([])
 const error = state<string | null>(null)
 const loading = state(true)
 const showFilters = state(false)
 
-// Row being edited, plus the working copy of its values. `null` closes the
-// editor; the copy is kept separate so cancelling leaves the table row as
-// it was and a failed save does not desync the two.
+// The row being edited. `null` closes the editor; EditRecordModal owns the
+// working copy so cancelling leaves the table row unchanged.
 const editing = state<Record<string, unknown> | null>(null)
-const editValues = state<Record<string, string>>({})
 const saving = state(false)
 const confirmingDelete = state<Record<string, unknown> | null>(null)
 const showCreate = state(false)
@@ -113,9 +113,9 @@ const deleteDescription = derived(() => {
   return `Row ${row.id} will be removed through the model, so soft deletes and observers apply.`
 })
 
-// Fields for the edit sheet, carrying their starting value. Derived from the
-// row being edited rather than from `editValues`, so the list changes exactly
-// once per open: deriving it from the working copy instead would rebuild
+// Fields for the edit modal, carrying their starting value. Derived from the
+// row being edited rather than from its mutable draft, so the list changes
+// exactly once per open: deriving it from the working copy would rebuild
 // every input on each keystroke and steal focus mid-word.
 const editFields = derived(() => {
   const row = editing()
@@ -124,10 +124,9 @@ const editFields = derived(() => {
     name: column.name,
     label: column.label,
     value: row[column.name] === null || row[column.name] === undefined ? '' : String(row[column.name]),
-    // The primary key, the uuid and the timestamps are shown for context but
-    // the API refuses to write them, so the input says so rather than
-    // accepting an edit that will be silently dropped.
-    readonly: column.name === 'id' || column.name === 'uuid' || column.name.endsWith('_at'),
+    // The model API accepts only fillable attributes and declared belongs-to
+    // keys. Every other database column stays visible as read-only context.
+    readonly: !updateColumns().includes(column.name),
   }))
 })
 
@@ -213,6 +212,7 @@ async function load() {
     sort.set(data.sort ?? '')
     writeCapabilities.set(data.writeCapabilities ?? { create: false, update: false, destroy: false })
     createFields.set(data.createFields ?? [])
+    updateColumns.set(data.updateColumns ?? [])
     error.set(data.error ?? null)
   }
   catch (e) {
@@ -230,26 +230,17 @@ function toggleSort(column: ColumnMeta) {
   void load()
 }
 
-// Debounced so a query is not fired per keystroke. The timer id is module
-// scope rather than signal state: it is bookkeeping, not something the
-// template renders.
-let searchTimer: ReturnType<typeof setTimeout> | undefined
-
-function onSearchInput() {
-  clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => {
-    page.set(1)
-    void load()
-  }, 250)
-}
+// Debounced so a query is not fired per keystroke. Search and the per-column
+// filters deliberately share one debounce, the way they shared one timer id
+// before: typing in either should schedule a single reload, not two.
+const onSearchInput = useDebounce(() => {
+  page.set(1)
+  void load()
+}, 250)
 
 function onFilterInput(column: string, event: Event) {
   filters.set({ ...filters(), [column]: (event.target as HTMLInputElement).value })
-  clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => {
-    page.set(1)
-    void load()
-  }, 250)
+  onSearchInput()
 }
 
 function clearFilters() {
@@ -272,12 +263,6 @@ function onPerPageChange() {
 }
 
 function startEdit(row: Record<string, unknown>) {
-  const values: Record<string, string> = {}
-  for (const column of columnMeta()) {
-    const raw = row[column.name]
-    values[column.name] = raw === null || raw === undefined ? '' : String(raw)
-  }
-  editValues.set(values)
   editing.set(row)
 }
 
@@ -319,17 +304,13 @@ async function createRecord(fields: Record<string, unknown>): Promise<void> {
   }
 }
 
-function onEditInput(column: string, event: Event) {
-  editValues.set({ ...editValues(), [column]: (event.target as HTMLInputElement).value })
-}
-
-async function saveEdit() {
+async function saveEdit(values: Record<string, string>) {
   const row = editing()
   if (!row) return
   // Send only what actually changed, so a save never rewrites columns the
   // editor merely displayed.
   const fields: Record<string, unknown> = {}
-  for (const [column, value] of Object.entries(editValues())) {
+  for (const [column, value] of Object.entries(values)) {
     const original = row[column]
     const originalText = original === null || original === undefined ? '' : String(original)
     if (value !== originalText) fields[column] = value === '' ? null : value
@@ -492,7 +473,7 @@ void load()
                 </button>
               </th>
             </template>
-            <th :if="canManageRows()" scope="col" class="px-3 py-2 w-24 font-medium text-[11px] text-neutral-500 text-right tracking-wide uppercase dark:text-neutral-400">Actions</th>
+            <th :if="canManageRows()" scope="col" class="right-0 sticky z-20 px-3 py-2 w-24 font-medium text-[11px] text-neutral-500 text-right tracking-wide uppercase dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800 border-black/5 border-l dark:border-white/10">Actions</th>
           </tr>
 
           <!-- Per-column filter row -->
@@ -508,7 +489,7 @@ void load()
                 >
               </th>
             </template>
-            <th :if="canManageRows()"></th>
+            <th :if="canManageRows()" class="right-0 sticky z-20 bg-white dark:bg-neutral-900 border-black/5 border-l dark:border-white/10"></th>
           </tr>
         </thead>
 
@@ -524,7 +505,7 @@ void load()
                   <div class="h-3 bg-neutral-200 dark:bg-white/10 rounded animate-pulse"></div>
                 </td>
               </template>
-              <td :if="canManageRows()" class="px-3 py-2">
+              <td :if="canManageRows()" class="right-0 sticky z-10 px-3 py-2 bg-white dark:bg-neutral-900 border-black/5 border-l dark:border-white/10">
                 <div class="ml-auto h-3 w-16 bg-neutral-200 dark:bg-white/10 rounded animate-pulse"></div>
               </td>
             </tr>
@@ -533,19 +514,19 @@ void load()
 
         <tbody :if="!loading()" class="divide-black/5 divide-y dark:divide-white/8">
           <template :for="row in rows()">
-            <tr class="hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
+            <tr class="hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors group">
               <template :for="column in columnMeta()">
                 <td :class="cellClass(column)" :title="cellValue(row, column)">{{ cellValue(row, column) }}</td>
               </template>
-              <td :if="canManageRows()" class="px-3 py-2 text-right">
-                <div class="flex gap-1 items-center justify-end">
-                  <Button :if="writeCapabilities().update" variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + modelName() + ' ' + row.id" @click="startEdit(row)">
-                    <span class="h-4 w-4 i-hugeicons-edit-02"></span>
-                  </Button>
-                  <Button :if="writeCapabilities().destroy" variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + modelName() + ' ' + row.id" @click="confirmingDelete.set(row)">
-                    <span class="h-4 w-4 text-red-500 i-hugeicons-delete-02"></span>
-                  </Button>
-                </div>
+              <td :if="canManageRows()" class="right-0 sticky z-10 px-3 py-2 text-right bg-white dark:bg-neutral-900 group-hover:bg-neutral-50 dark:group-hover:bg-white/5 border-black/5 border-l dark:border-white/10 transition-colors">
+                <ModelRecordActions
+                  :record="row"
+                  :modelName="modelName()"
+                  :canUpdate="writeCapabilities().update"
+                  :canDestroy="writeCapabilities().destroy"
+                  @edit="startEdit"
+                  @delete="confirmingDelete.set($event)"
+                />
               </td>
             </tr>
           </template>
@@ -565,47 +546,14 @@ void load()
     </div>
   </div>
 
-  <!-- Edit sheet -->
-<div :if="editing()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/30 dashboard-modal-layer" @click="editing.set(null)">
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="model-edit-title"
-      class="flex overflow-hidden flex-col max-h-[85vh] max-w-lg w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl"
-      @click.stop
-    >
-      <div class="flex items-center justify-between px-4 py-3 border-b border-black/5 dark:border-white/10">
-        <h2 id="model-edit-title" class="font-semibold text-[14px] text-neutral-900 dark:text-white">Edit <span :text="modelName()"></span></h2>
-        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close record editor" @click="editing.set(null)">
-          <span class="h-4 w-4 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-
-      <div class="overflow-y-auto flex-1 p-4 space-y-3">
-        <template :for="field in editFields()">
-          <div class="flex flex-col gap-1.5">
-            <label :for="'model-edit-' + field.name" class="font-medium text-[12px] text-neutral-600 dark:text-neutral-300">{{ field.label }}</label>
-            <input
-              :id="'model-edit-' + field.name"
-              type="text"
-              :value="field.value"
-              @input="onEditInput(field.name, $event)"
-              :readonly="field.readonly"
-              class="px-2.5 py-1.5 text-[13px] text-neutral-900 dark:text-neutral-100 read-only:text-neutral-500 dark:read-only:text-neutral-400 bg-white dark:bg-white/10 read-only:bg-neutral-50 dark:read-only:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
-            >
-          </div>
-        </template>
-      </div>
-
-      <div class="flex gap-2 items-center justify-end px-4 py-3 bg-neutral-50 dark:bg-white/5 border-black/5 border-t dark:border-white/10">
-        <Button :disabled="saving()" variant="secondary" @click="editing.set(null)">Cancel</Button>
-        <Button :loading="saving()" @click="saveEdit()">
-          <span :if="!saving()">Save changes</span>
-          <span :if="saving()">Saving</span>
-        </Button>
-      </div>
-    </div>
-  </div>
+  <EditRecordModal
+    :open="Boolean(editing())"
+    :modelName="modelName()"
+    :fields="editFields()"
+    :busy="saving()"
+    @close="editing.set(null)"
+    @submit="saveEdit($event)"
+  />
 
   <ConfirmDialog
     :isOpen="Boolean(confirmingDelete())"

package/resources/components/Dashboard/Navbar.stx

@@ -69,27 +69,27 @@ useClickOutside(userMenu, () => setDropdownOpen(false))
     </StxLink>
 
     <nav class="flex gap-x-4 items-center lg:gap-x-6" aria-label="Dashboard utilities">
-      <a href="/errors" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/errors') ? 'active-header-link' : '' }}" title="View errors">
+      <a href="/errors" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/errors') ? 'active-header-link' : '' }}" x-tooltip="View errors" title="View errors">
         <span class="sr-only">View errors</span>
         <span aria-hidden="true" class="h-6 w-6 duration-150 ease-in-out transition i-hugeicons-alert-01"></span>
       </a>
 
-      <a href="/health" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/health') ? 'active-header-link' : '' }}" title="View health">
+      <a href="/health" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/health') ? 'active-header-link' : '' }}" x-tooltip="View health" title="View health">
         <span class="sr-only">View health</span>
         <span aria-hidden="true" class="h-6 w-6 duration-150 ease-in-out transition i-hugeicons-health"></span>
       </a>
 
-      <a href="/insights" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/insights') ? 'active-header-link' : '' }}" title="View cloud insights">
+      <a href="/insights" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/insights') ? 'active-header-link' : '' }}" x-tooltip="View cloud insights" title="View cloud insights">
         <span class="sr-only">View cloud insights</span>
         <span aria-hidden="true" class="h-6 w-6 duration-150 ease-in-out transition i-hugeicons-pulse-01"></span>
       </a>
 
-      <a href="/inbox" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/inbox') ? 'active-header-link' : '' }}" title="View inbox">
+      <a href="/inbox" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/inbox') ? 'active-header-link' : '' }}" x-tooltip="View inbox" title="View inbox">
         <span class="sr-only">View inbox</span>
         <span aria-hidden="true" class="h-6 w-6 duration-150 ease-in-out transition i-hugeicons-mail-02"></span>
       </a>
 
-      <a href="/notifications/dashboard" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/notifications/dashboard') ? 'active-header-link' : '' }}" title="View notifications">
+      <a href="/notifications/dashboard" data-stx-link class="header-icon-button header-link {{ isActiveRoute('/notifications/dashboard') ? 'active-header-link' : '' }}" x-tooltip="View notifications" title="View notifications">
         <span class="sr-only">View notifications</span>
         <span aria-hidden="true" class="h-6 w-6 i-hugeicons-notification-02"></span>
       </a>

package/resources/components/Dashboard/Notifications/NotificationDeliveryDialog.stx

@@ -21,64 +21,44 @@ function metadataText(): string {
 }
 </script>
 
-<div
-  :show="open"
-  role="dialog"
-  aria-modal="true"
-  aria-label="Notification delivery details"
-  class="fixed inset-0 overflow-y-auto z-30 dashboard-modal-layer"
+<Modal
+  :isOpen="open()"
+  :title="`Delivery attempt #${delivery()?.id || 'not recorded'}`"
+  :description="delivery()?.channel || 'Notification'"
+  size="lg"
+  @close="emit('close')"
 >
-  <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
-    <button
-      type="button"
-      aria-label="Close notification delivery details"
-      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-      @click="emit('close')"
-    ></button>
-
-    <section class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-2xl sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
-      <div class="flex gap-4 items-start justify-between">
-        <div>
-          <p class="font-medium text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">{{ delivery?.channel || 'notification' }}</p>
-          <h3 class="mt-1 font-semibold leading-6 text-gray-900 text-lg dark:text-white">Delivery attempt #{{ delivery?.id || '' }}</h3>
-        </div>
-        <Button variant="ghost" iconOnly ariaLabel="Close notification delivery details" @click="emit('close')">
-          <span class="block h-5 w-5 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-
-      <dl class="grid gap-x-6 gap-y-4 grid-cols-1 sm:grid-cols-2 mt-6">
-        <div>
-          <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Recipient</dt>
-          <dd class="mt-1 break-all text-gray-900 text-sm dark:text-neutral-100">{{ delivery?.recipient || 'Not recorded' }}</dd>
-        </div>
-        <div>
-          <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Attempted</dt>
-          <dd class="mt-1 text-gray-900 text-sm dark:text-neutral-100">{{ formatDate(delivery?.sent_at) }}</dd>
-        </div>
-        <div class="sm:col-span-2">
-          <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Subject</dt>
-          <dd class="mt-1 text-gray-900 text-sm dark:text-neutral-100">{{ delivery?.subject || 'No subject' }}</dd>
-        </div>
-        <div class="sm:col-span-2">
-          <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Body</dt>
-          <dd class="mt-1 p-3 text-gray-800 text-sm whitespace-pre-wrap dark:text-neutral-200 bg-gray-50 dark:bg-neutral-900 rounded-md">{{ delivery?.body || 'No body was recorded.' }}</dd>
-        </div>
-        <div :if="delivery?.error" class="sm:col-span-2">
-          <dt class="font-medium text-red-600 text-xs uppercase dark:text-red-400">Error</dt>
-          <dd class="mt-1 p-3 text-red-800 text-sm whitespace-pre-wrap dark:text-red-200 bg-red-50 dark:bg-red-950/40 rounded-md">{{ delivery?.error }}</dd>
-        </div>
-        <div class="sm:col-span-2">
-          <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Metadata</dt>
-          <dd class="overflow-x-auto mt-1 p-3 font-mono text-gray-700 text-xs whitespace-pre dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900 rounded-md">{{ metadataText() }}</dd>
-        </div>
-      </dl>
-
-      <div class="flex justify-end mt-6">
-        <Button variant="secondary" @click="emit('close')">
-          Close
-        </Button>
-      </div>
-    </section>
-  </div>
-</div>
+  <dl class="grid gap-x-6 gap-y-4 grid-cols-1 sm:grid-cols-2">
+    <div>
+      <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Recipient</dt>
+      <dd class="mt-1 break-all text-gray-900 text-sm dark:text-neutral-100">{{ delivery()?.recipient || 'Not recorded' }}</dd>
+    </div>
+    <div>
+      <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Attempted</dt>
+      <dd class="mt-1 text-gray-900 text-sm dark:text-neutral-100">{{ formatDate(delivery()?.sent_at) }}</dd>
+    </div>
+    <div class="sm:col-span-2">
+      <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Subject</dt>
+      <dd class="mt-1 text-gray-900 text-sm dark:text-neutral-100">{{ delivery()?.subject || 'No subject' }}</dd>
+    </div>
+    <div class="sm:col-span-2">
+      <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Body</dt>
+      <dd class="mt-1 p-3 text-gray-800 text-sm whitespace-pre-wrap dark:text-neutral-200 bg-gray-50 dark:bg-neutral-900 rounded-md">{{ delivery()?.body || 'No body was recorded.' }}</dd>
+    </div>
+    <div :if="delivery()?.error" class="sm:col-span-2">
+      <dt class="font-medium text-red-600 text-xs uppercase dark:text-red-400">Error</dt>
+      <dd class="mt-1 p-3 text-red-800 text-sm whitespace-pre-wrap dark:text-red-200 bg-red-50 dark:bg-red-950/40 rounded-md">{{ delivery()?.error }}</dd>
+    </div>
+    <div class="sm:col-span-2">
+      <dt class="font-medium text-gray-500 text-xs uppercase dark:text-neutral-400">Metadata</dt>
+      <dd class="overflow-x-auto mt-1 p-3 font-mono text-gray-700 text-xs whitespace-pre dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900 rounded-md">{{ metadataText() }}</dd>
+    </div>
+  </dl>
+  <template #footer>
+    <div class="flex justify-end w-full">
+      <Button variant="secondary" @click="emit('close')">
+        Close
+      </Button>
+    </div>
+  </template>
+</Modal>

package/resources/components/Dashboard/UI/Button.stx

@@ -15,6 +15,7 @@ interface ButtonProps {
   rel?: string
   ariaLabel?: string
   type?: string
+  form?: string
   class?: string
 }
 
@@ -83,6 +84,7 @@ const liveDownload = useReactiveProp('download', '')
 const liveTarget = useReactiveProp('target', '')
 const liveRel = useReactiveProp('rel', '')
 const liveType = useReactiveProp('type', 'button')
+const liveForm = useReactiveProp('form', '')
 const liveAriaLabel = useReactiveProp('ariaLabel', '')
 </script>
 @if(tag === 'a' || (href && href.length > 0))
@@ -106,6 +108,7 @@ const liveAriaLabel = useReactiveProp('ariaLabel', '')
     @if(interaction === 'toggle')
       <button
         :type="liveType()"
+        :form="liveForm() || undefined"
         class="{{ buttonClass }}"
         :aria-label="liveAriaLabel() || undefined"
         :aria-busy="liveLoading() ? 'true' : 'false'"
@@ -120,6 +123,7 @@ const liveAriaLabel = useReactiveProp('ariaLabel', '')
     @else
       <button
         :type="liveType()"
+        :form="liveForm() || undefined"
         class="{{ buttonClass }}"
         :aria-label="liveAriaLabel() || undefined"
         :aria-busy="liveLoading() ? 'true' : 'false'"

package/resources/components/Dashboard/UI/ConfirmDialog.stx

@@ -9,6 +9,7 @@ const cancelLabel = useReactiveProp('cancelLabel', 'Cancel')
 const variant = useReactiveProp('variant', 'danger' as ConfirmVariant)
 const busy = useReactiveProp('busy', false)
 const disabled = useReactiveProp('disabled', false)
+const warning = useReactiveProp('warning', '')
 const error = useReactiveProp('error', '')
 const emit = defineEmits()
 
@@ -51,6 +52,9 @@ function iconName(): string {
 
   <template #footer>
     <div class="w-full">
+      <div :if="warning()" role="note" class="mb-4 p-3 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">
+        {{ warning() }}
+      </div>
       <div :if="error()" role="alert" class="mb-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
         {{ error() }}
       </div>

package/resources/components/Dashboard/UI/Drawer.stx

@@ -0,0 +1,114 @@
+<script server>
+interface DrawerProps {
+  isOpen?: boolean
+  title?: string
+  description?: string
+  size?: 'sm' | 'md' | 'lg'
+  closable?: boolean
+}
+
+const { isOpen = false, title = '', description = '', size = 'md', closable = true } = defineProps<DrawerProps>()
+
+const sizeClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+}
+</script>
+
+<script client>
+const open = useReactiveProp('isOpen', false)
+const liveClosable = useReactiveProp('closable', true)
+const liveTitle = useReactiveProp('title', '')
+const liveDescription = useReactiveProp('description', '')
+const dialog = useRef<HTMLDialogElement>('dashboardDrawerDialog')
+const activeElement = useActiveElement()
+const scrollLocked = useScrollLock()
+const emit = defineEmits()
+let restoreFocus: HTMLElement | null = null
+
+function close(): void {
+  if (liveClosable())
+    emit('close')
+}
+
+function handleCancel(event: Event): void {
+  event.preventDefault()
+  close()
+}
+
+function handleBackdropClick(event: MouseEvent): void {
+  if (event.target === event.currentTarget)
+    close()
+}
+
+effect(() => {
+  const isOpen = open()
+  scrollLocked.value = isOpen
+
+  if (isOpen) {
+    const focused = peek(() => activeElement.value)
+    if (focused instanceof HTMLElement)
+      restoreFocus = focused
+    void nextTick(() => {
+      const element = dialog.current
+      if (!element)
+        return
+      if (!element.open)
+        element.showModal()
+      element.focus()
+    })
+    return
+  }
+
+  if (dialog.current?.open)
+    dialog.current.close()
+  const target = restoreFocus
+  restoreFocus = null
+  if (target)
+    void nextTick(() => target.focus())
+})
+</script>
+
+<dialog
+  :if="open()"
+  ref="dashboardDrawerDialog"
+  role="dialog"
+  aria-modal="true"
+  :aria-label="liveTitle() || 'Drawer'"
+  class="fixed inset-0 z-[55] m-0 p-0 h-dvh max-h-none max-w-none w-screen bg-transparent dashboard-drawer-dialog dashboard-modal-layer"
+  @cancel="handleCancel"
+>
+  <div class="flex justify-end min-h-full" @click="handleBackdropClick">
+    <section class="flex relative flex-col h-dvh w-full bg-white dark:bg-neutral-950 border-neutral-200 border-l dark:border-neutral-800 shadow-2xl {{ sizeClasses[size] }}" @click.stop>
+      <header class="flex gap-4 items-start px-5 py-4 border-b border-neutral-200 dark:border-neutral-800">
+        <slot name="header-leading" />
+        <div class="flex-1 min-w-0">
+          <h2 :if="liveTitle()" class="font-semibold text-lg text-neutral-900 truncate dark:text-white">{{ liveTitle() }}</h2>
+          <p :if="liveDescription()" class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ liveDescription() }}</p>
+        </div>
+        <slot name="header-trailing" />
+        <Button :if="liveClosable()" variant="ghost" size="sm" iconOnly ariaLabel="Close drawer" @click="close">
+          <span aria-hidden="true" class="h-5 w-5 i-hugeicons-cancel-01"></span>
+        </Button>
+      </header>
+
+      <div class="overflow-y-auto flex-1 min-h-0">
+        <slot />
+      </div>
+
+      @if($slots.footer)
+        <footer class="px-5 py-4 border-neutral-200 border-t dark:border-neutral-800">
+          <slot name="footer" />
+        </footer>
+      @endif
+    </section>
+  </div>
+</dialog>
+
+<style>
+.dashboard-drawer-dialog::backdrop {
+  background: rgb(0 0 0 / 45%);
+  backdrop-filter: blur(2px);
+}
+</style>

package/resources/components/Dashboard/UI/Modal.stx

@@ -58,7 +58,11 @@ effect(() => {
       if (!element) return
       if (!element.open)
         element.showModal()
-      element.focus()
+      const autofocusTarget = element.querySelector<HTMLElement>('[autofocus]:not([disabled])')
+      if (autofocusTarget)
+        autofocusTarget.focus()
+      else
+        element.focus()
     })
     return
   }
@@ -77,7 +81,7 @@ effect(() => {
     :role="liveRole()"
     aria-modal="true"
     :aria-label="liveTitle() || 'Dialog'"
-    class="fixed inset-0 m-0 p-0 h-dvh max-h-none w-screen max-w-none overflow-y-auto z-[55] bg-transparent dashboard-modal-layer dashboard-modal-dialog"
+    class="fixed inset-0 overflow-y-auto z-[55] m-0 p-0 h-dvh max-h-none max-w-none w-screen bg-transparent dashboard-modal-dialog dashboard-modal-layer"
     @cancel="handleCancel"
   >
     <!-- Modal container -->
@@ -99,16 +103,19 @@ effect(() => {
             </div>
           </div>
 
-          <Button
-            :if="liveClosable()"
-            variant="ghost"
-            size="sm"
-            iconOnly
-            ariaLabel="Close modal"
-            @click="closeModal"
-          >
-            <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
-          </Button>
+          <div class="flex flex-shrink-0 gap-2 items-center">
+            <slot name="header-trailing" />
+            <Button
+              :if="liveClosable()"
+              variant="ghost"
+              size="sm"
+              iconOnly
+              ariaLabel="Close modal"
+              @click="closeModal"
+            >
+              <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
+            </Button>
+          </div>
         </div>
 
         <!-- Body -->

package/resources/components/Docs/Demo/ComboboxDemo.stx

@@ -1,19 +1,18 @@
 <script>
 interface ComboboxDemoProps {
-  listItems?: string
+  listItems?: Array<{ id: number, name: string }>
   selected?: any
   query?: string
   isOpen?: boolean
 }
 
-const { listItems = [, selected = null, query = '', isOpen = false } = defineProps<ComboboxDemoProps>()
-
-{ id: 1, name: 'Chris Breuer' },
+const { listItems = [
+  { id: 1, name: 'Chris Breuer' },
   { id: 2, name: 'Avery Hill' },
   { id: 3, name: 'Glenn Michael' },
   { id: 4, name: 'Michael Vincent' },
   { id: 5, name: 'Blake Ayer' },
-]
+], selected = null, query = '', isOpen = false } = defineProps<ComboboxDemoProps>()
 function filterItems(items, query) {
   if (query === '') return items
   return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()))