@stacksjs/defaults 0.70.358 → 0.70.363

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

@@ -0,0 +1,81 @@
+<script client>
+interface EditField {
+  name: string
+  label: string
+  value: string
+  readonly: boolean
+}
+
+const open = useReactiveProp('open', false)
+const modelName = useReactiveProp('modelName', 'Record')
+const fields = useReactiveProp('fields', [] as EditField[])
+const busy = useReactiveProp('busy', false)
+const values = state<Record<string, string>>({})
+const emit = defineEmits()
+let hydrationKey = ''
+
+effect(() => {
+  if (!open()) {
+    hydrationKey = ''
+    return
+  }
+
+  const key = fields().map(field => `${field.name}:${field.value}`).join('|')
+  if (key === hydrationKey)
+    return
+
+  hydrationKey = key
+  values.set(Object.fromEntries(fields().map(field => [field.name, field.value])))
+})
+
+function updateValue(field: string, event: Event): void {
+  values.set({ ...values(), [field]: (event.target as HTMLInputElement).value })
+}
+
+function submit(): void {
+  emit('submit', Object.fromEntries(
+    fields()
+      .filter(field => !field.readonly)
+      .map(field => [field.name, values()[field.name]]),
+  ))
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  :title="'Edit ' + modelName()"
+  description="Only changed writable fields will be sent through the model API."
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="model-edit-form" class="overflow-y-auto space-y-3 max-h-[65vh]" @submit.prevent="submit">
+    <template :for="field in fields()">
+      <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"
+          :name="field.readonly ? undefined : field.name"
+          type="text"
+          :value="values()[field.name] ?? field.value"
+          :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"
+          @input="updateValue(field.name, $event)"
+        >
+      </div>
+    </template>
+  </form>
+
+  <template #footer>
+    <div class="flex gap-2 items-center justify-end w-full">
+      <Button :disabled="busy()" variant="secondary" @click="close">Cancel</Button>
+      <Button type="submit" form="model-edit-form" :loading="busy()">
+        {{ busy() ? 'Saving' : 'Save changes' }}
+      </Button>
+    </div>
+  </template>
+</Modal>

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

@@ -0,0 +1,30 @@
+<script client>
+const record = useReactiveProp('record', {} as Record<string, unknown>)
+const modelName = useReactiveProp('modelName', 'Record')
+const canUpdate = useReactiveProp('canUpdate', false)
+const canDestroy = useReactiveProp('canDestroy', false)
+const emit = defineEmits()
+</script>
+
+<div class="flex gap-1 items-center justify-end">
+  <Button
+    :if="canUpdate()"
+    variant="ghost"
+    size="sm"
+    iconOnly
+    :ariaLabel="'Edit ' + modelName() + ' ' + record().id"
+    @click="emit('edit', record())"
+  >
+    <span class="h-4 w-4 i-hugeicons-edit-02"></span>
+  </Button>
+  <Button
+    :if="canDestroy()"
+    variant="ghost"
+    size="sm"
+    iconOnly
+    :ariaLabel="'Delete ' + modelName() + ' ' + record().id"
+    @click="emit('delete', record())"
+  >
+    <span class="h-4 w-4 text-red-500 i-hugeicons-delete-02"></span>
+  </Button>
+</div>

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'"