@stacksjs/defaults 0.70.358 → 0.70.363

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

@@ -8,6 +8,9 @@ const confirmLabel = useReactiveProp('confirmLabel', 'Delete')
 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()
 
 function close(): void {
@@ -16,7 +19,7 @@ function close(): void {
 }
 
 function confirm(): void {
-  if (!busy())
+  if (!busy() && !disabled())
     emit('confirm')
 }
 
@@ -32,57 +35,56 @@ function iconName(): string {
 
 </script>
 
-<template :if="open()">
-  <div class="fixed inset-0 overflow-y-auto z-[55] dashboard-modal-layer" @keydown.escape="close">
-    <button type="button" class="fixed inset-0 w-full bg-black/50 backdrop-blur-sm cursor-default" aria-label="Close confirmation dialog" @click="close"></button>
-
-    <div class="flex relative items-center justify-center p-4 min-h-full">
-      <section
-        role="alertdialog"
-        aria-modal="true"
-        :aria-label="title()"
-        class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl"
-      >
-        <div class="flex gap-4 items-start">
-          <div class="shrink-0 p-2.5 rounded-lg" :class="iconClass()">
-            <span class="block h-5 w-5" :class="iconName()"></span>
-          </div>
-          <div class="flex-1 min-w-0">
-            <h3 class="font-semibold text-lg text-neutral-900 dark:text-white">
-              {{ title() }}
-            </h3>
-            <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
-              {{ description() }}
-            </p>
-          </div>
-        </div>
+<Modal
+  :isOpen="open()"
+  :title="title()"
+  :description="description()"
+  :closable="!busy()"
+  role="alertdialog"
+  size="sm"
+  @close="close"
+>
+  <template #header-leading>
+    <div class="shrink-0 p-2.5 rounded-lg" :class="iconClass()">
+      <span class="block h-5 w-5" :class="iconName()"></span>
+    </div>
+  </template>
 
-        <div class="flex gap-2 items-center justify-end mt-6">
-          <Button
-            variant="secondary"
-            :disabled="busy()"
-            @click="close"
-          >
-            {{ cancelLabel() }}
-          </Button>
-          <Button
-            :if="variant() === 'warning'"
-            variant="warning"
-            :loading="busy()"
-            @click="confirm"
-          >
-            {{ confirmLabel() }}
-          </Button>
-          <Button
-            :if="variant() !== 'warning'"
-            variant="danger"
-            :loading="busy()"
-            @click="confirm"
-          >
-            {{ confirmLabel() }}
-          </Button>
-        </div>
-      </section>
+  <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>
+      <div class="flex gap-2 items-center justify-end">
+        <Button
+          variant="secondary"
+          :disabled="busy()"
+          @click="close"
+        >
+          {{ cancelLabel() }}
+        </Button>
+        <Button
+          :if="variant() === 'warning'"
+          variant="warning"
+          :loading="busy()"
+          :disabled="disabled()"
+          @click="confirm"
+        >
+          {{ confirmLabel() }}
+        </Button>
+        <Button
+          :if="variant() !== 'warning'"
+          variant="danger"
+          :loading="busy()"
+          :disabled="disabled()"
+          @click="confirm"
+        >
+          {{ confirmLabel() }}
+        </Button>
+      </div>
     </div>
-  </div>
-</template>
+  </template>
+</Modal>

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

@@ -5,9 +5,10 @@ interface ModalProps {
   description?: string
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
   closable?: boolean
+  role?: 'dialog' | 'alertdialog'
 }
 
-const { isOpen = false, title = '', description = '', size = 'md', closable = true } = defineProps<ModalProps>()
+const { isOpen = false, title = '', description = '', size = 'md', closable = true, role = 'dialog' } = defineProps<ModalProps>()
 
 const sizeClasses = {
   sm: 'max-w-sm',
@@ -22,6 +23,7 @@ const open = useReactiveProp('isOpen', false)
 const liveClosable = useReactiveProp('closable', true)
 const liveTitle = useReactiveProp('title', '')
 const liveDescription = useReactiveProp('description', '')
+const liveRole = useReactiveProp('role', 'dialog')
 const dialog = useRef<HTMLDialogElement>('dashboardModalDialog')
 const activeElement = useActiveElement()
 const scrollLocked = useScrollLock()
@@ -56,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
   }
@@ -72,10 +78,10 @@ effect(() => {
   <dialog
     :if="open()"
     ref="dashboardModalDialog"
-    role="dialog"
+    :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 -->
@@ -84,8 +90,9 @@ effect(() => {
         class="relative w-full rounded-xl bg-white dark:bg-neutral-900 shadow-2xl {{ sizeClasses[size] }}"
       >
         <!-- Header -->
-        @if(title || closable)
-          <div class="flex gap-4 items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
+        <div :if="liveTitle() || liveClosable()" class="flex gap-4 items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
+          <div class="flex gap-3 items-start min-w-0">
+            <slot name="header-leading" />
             <div class="min-w-0">
                 <h3 :if="liveTitle()" class="font-semibold text-lg text-neutral-900 dark:text-white">
                   {{ liveTitle() }}
@@ -94,25 +101,29 @@ effect(() => {
                   {{ liveDescription() }}
                 </p>
             </div>
+          </div>
 
-            @if(closable)
-              <Button
-                variant="ghost"
-                size="sm"
-                iconOnly
-                ariaLabel="Close modal"
-                @click="closeModal"
-              >
-                <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
-              </Button>
-            @endif
+          <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>
-        @endif
+        </div>
 
         <!-- Body -->
-        <div class="p-6">
-          <slot />
-        </div>
+        @if($slots.default)
+          <div class="p-6">
+            <slot />
+          </div>
+        @endif
 
         @if($slots.footer)
           <div class="flex items-center justify-end px-6 py-4 border-neutral-200 border-t dark:border-neutral-700">

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()))

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

@@ -1,19 +1,26 @@
 <script>
+interface DropdownMenuItem {
+  icon?: string
+  label?: string
+  variant?: string
+  /** A separator rather than a real entry — getMenuSections splits on these. */
+  divider?: boolean
+}
+
 interface DropdownDemoProps {
-  menuItems?: string
+  menuItems?: DropdownMenuItem[]
   isOpen?: boolean
 }
 
-const { menuItems = [, isOpen = false } = defineProps<DropdownDemoProps>()
-
-{ icon: 'i-hugeicons-pencil-20-solid', label: 'Edit' },
+const { menuItems = [
+  { icon: 'i-hugeicons-pencil-20-solid', label: 'Edit' },
   { icon: 'i-hugeicons-document-duplicate-20-solid', label: 'Duplicate' },
   { divider: true },
   { icon: 'i-hugeicons-archive-box-20-solid', label: 'Archive' },
   { icon: 'i-hugeicons-arrow-path-20-solid', label: 'Move' },
   { divider: true },
   { icon: 'i-hugeicons-trash-20-solid', label: 'Delete', variant: 'danger' },
-]
+], isOpen = false } = defineProps<DropdownDemoProps>()
 function getMenuSections(items) {
   const sections = []
   let currentSection = []

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

@@ -1,18 +1,26 @@
 <script>
+interface Person {
+  id: number
+  name: string
+  unavailable: boolean
+}
+
 interface ListboxDemoProps {
-  people?: string
-  selectedPerson?: boolean
+  people?: Person[]
+  selectedPerson?: Person
   isOpen?: boolean
 }
 
-const { people = [, selectedPerson = people[0], isOpen = false } = defineProps<ListboxDemoProps>()
-
-{ id: 1, name: 'Chris Breuer', unavailable: false },
+// `selectedPerson` defaults off `people`, which is legal here because
+// destructuring binds left to right — `people` is in scope by the time the
+// default for `selectedPerson` is evaluated.
+const { people = [
+  { id: 1, name: 'Chris Breuer', unavailable: false },
   { id: 2, name: 'Avery Hill', unavailable: false },
   { id: 3, name: 'Glenn Michael', unavailable: false },
   { id: 4, name: 'Michael Vincent', unavailable: true },
   { id: 5, name: 'Blake Ayer', unavailable: false },
-]
+], selectedPerson = people[0], isOpen = false } = defineProps<ListboxDemoProps>()
 </script>
 <div class="max-w-4xl">
   <DocsPlayground>

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

@@ -1,12 +1,17 @@
 <script>
 interface PopoverDemoProps {
-  solutions?: string
+  solutions?: Array<{
+    name: string
+    description: string
+    href: string
+    iconBg: string
+    iconStroke: string
+  }>
   isOpen?: boolean
 }
 
-const { solutions = [, isOpen = false } = defineProps<PopoverDemoProps>()
-
-{
+const { solutions = [
+  {
     name: 'Insights',
     description: 'Measure actions your users take',
     href: '##',
@@ -27,7 +32,7 @@ const { solutions = [, isOpen = false } = defineProps<PopoverDemoProps>()
     iconBg: '#FFEDD5',
     iconStroke: '#FB923C',
   },
-]
+], isOpen = false } = defineProps<PopoverDemoProps>()
 </script>
 <div class="max-w-4xl">
   <DocsPlayground>

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

@@ -1,15 +1,23 @@
 <script>
-interface RadioGroupDemoProps {
-  plans?: string
-  selected?: boolean
+interface Plan {
+  name: string
+  ram: string
+  cpus: string
+  disk: string
 }
 
-const { plans = [, selected = plans[0] } = defineProps<RadioGroupDemoProps>()
+interface RadioGroupDemoProps {
+  plans?: Plan[]
+  selected?: Plan
+}
 
-{ name: 'Startup', ram: '12GB', cpus: '6 CPUs', disk: '160 GB SSD disk' },
+// `selected` defaults off `plans`; destructuring binds left to right, so `plans`
+// is already in scope when this default is evaluated.
+const { plans = [
+  { name: 'Startup', ram: '12GB', cpus: '6 CPUs', disk: '160 GB SSD disk' },
   { name: 'Business', ram: '16GB', cpus: '8 CPUs', disk: '512 GB SSD disk' },
   { name: 'Enterprise', ram: '32GB', cpus: '12 CPUs', disk: '1024 GB SSD disk' },
-]
+], selected = plans[0] } = defineProps<RadioGroupDemoProps>()
 </script>
 <div class="max-w-4xl">
     <DocsPlayground>

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

@@ -1,15 +1,14 @@
 <script>
 interface StepperDemoProps {
   currentStep?: number
-  steps?: string
+  steps?: Array<{ title: string, description: string, icon: string }>
 }
 
-const { currentStep = 0, steps = [ } = defineProps<StepperDemoProps>()
-
-{ title: 'Step 1', description: 'First step', icon: 'i-heroicons-check' },
+const { currentStep = 0, steps = [
+  { title: 'Step 1', description: 'First step', icon: 'i-heroicons-check' },
   { title: 'Step 2', description: 'Second step', icon: 'i-heroicons-check' },
   { title: 'Step 3', description: 'Third step', icon: 'i-heroicons-check' },
-]
+] } = defineProps<StepperDemoProps>()
 
 function getStepContent(step) {
   switch (step) {

package/resources/components/Docs/TeamMember.stx

@@ -1,18 +1,25 @@
 <script>
 interface TeamMemberProps {
-  data?: string
+  data?: {
+    name: string
+    avatar: string
+    description: string
+    github: string
+    sponsors: boolean
+    functions: string[]
+    packages: string[]
+  }
 }
 
-const { data = { } = defineProps<TeamMemberProps>()
-
-name: '',
+const { data = {
+  name: '',
   avatar: '',
   description: '',
   github: '',
   sponsors: false,
   functions: [],
-  packages: []
-}
+  packages: [],
+} } = defineProps<TeamMemberProps>()
 </script>
 <div class="text-center">
     <img
@@ -45,7 +52,7 @@ name: '',
           href="https://github.com/sponsors/{{ data.github }}"
           target="_blank"
           rel="noopener noreferrer"
-          title="Sponsor {{ data.name }}"
+          x-tooltip="Sponsor {{ data.name }}" title="Sponsor {{ data.name }}"
           aria-label="Sponsor {{ data.name }}"
         ></a>
       @endif
@@ -54,7 +61,7 @@ name: '',
     @if(data.functions.length > 0 || data.packages.length > 0)
       <div class="grid gap-x-1 gap-y-2 grid-cols-[20px_1fr] items-start mb-2 mx-auto p-3 w-5/6 bg-gray-100 rounded">
         @if(data.functions.length > 0)
-          <div class="ma op50 i-carbon:function-math" title="Functions"></div>
+          <div class="ma op50 i-carbon:function-math" x-tooltip="Functions" title="Functions"></div>
           <div class="flex flex-row flex-wrap gap-2 text-left text-sm">
             @foreach(data.functions as func)
               <a href="/{{ func }}" target="_blank">
@@ -65,7 +72,7 @@ name: '',
         @endif
 
         @if(data.packages.length > 0)
-          <div class="i-carbon-cube ma op50" title="Packages"></div>
+          <div class="i-carbon-cube ma op50" x-tooltip="Packages" title="Packages"></div>
           <div class="flex flex-row flex-wrap gap-2 text-left text-sm">
             @foreach(data.packages as pkg)
               <a href="/add-ons">

package/resources/components/Forum/ForumReplyForm.stx

@@ -18,21 +18,21 @@ function canSubmit(content) {
     <div class="p-4">
       <div class="mb-4">
         <div class="flex gap-2 mb-2">
-          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Bold" data-action="format" data-format="bold">B</button>
-          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Italic" data-action="format" data-format="italic">I</button>
-          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Link" data-action="format" data-format="link">
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" x-tooltip="Bold" title="Bold" data-action="format" data-format="bold">B</button>
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" x-tooltip="Italic" title="Italic" data-action="format" data-format="italic">I</button>
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" x-tooltip="Link" title="Link" data-action="format" data-format="link">
             <span class="i-hugeicons-link"></span>
           </button>
-          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Code" data-action="format" data-format="code">
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" x-tooltip="Code" title="Code" data-action="format" data-format="code">
             <span class="i-hugeicons-code"></span>
           </button>
-          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Image" data-action="format" data-format="image">
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" x-tooltip="Image" title="Image" data-action="format" data-format="image">
             <span class="i-hugeicons-image"></span>
           </button>
-          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="Quote" data-action="format" data-format="quote">
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" x-tooltip="Quote" title="Quote" data-action="format" data-format="quote">
             <span class="i-hugeicons-quote"></span>
           </button>
-          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" title="List" data-action="format" data-format="list">
+          <button class="px-2 py-1 text-sm hover:bg-gray-100 border rounded" x-tooltip="List" title="List" data-action="format" data-format="list">
             <span class="i-hugeicons-list"></span>
           </button>
         </div>

package/resources/components/Forum/ForumSidebar.stx

@@ -1,17 +1,21 @@
 <script>
 interface ForumSidebarProps {
-  stats?: string
+  stats?: {
+    topics: number
+    posts: number
+    members: number
+    newestMember: string
+  }
   popularTopics?: any[]
   onlineUsers?: any[]
 }
 
-const { stats = {, popularTopics = [], onlineUsers = [] } = defineProps<ForumSidebarProps>()
-
-topics: 0,
+const { stats = {
+  topics: 0,
   posts: 0,
   members: 0,
-  newestMember: ''
-}
+  newestMember: '',
+}, popularTopics = [], onlineUsers = [] } = defineProps<ForumSidebarProps>()
 </script>
 <div class="space-y-6">
     <!-- Search -->

package/resources/components/Marketing/Faqs.stx

@@ -1,12 +1,12 @@
 <script>
 interface FaqsProps {
   backgroundImage?: string
-  faqs?: string
+  /** One inner array per rendered column. */
+  faqs?: Array<Array<{ question: string, answer: string }>>
 }
 
-const { backgroundImage = '/images/background-faqs.jpg', faqs = [ } = defineProps<FaqsProps>()
-
-[
+const { backgroundImage = '/images/background-faqs.jpg', faqs = [
+  [
     {
       question: 'What is the goal of the Stacks framework?',
       answer: 'The goal of the Stacks framework is to help you create and maintain frontends, backends, and clouds—without having to worry about the boilerplate. It is a rapid development framework, meeting all your full stack needs.',
@@ -48,7 +48,7 @@ const { backgroundImage = '/images/background-faqs.jpg', faqs = [ } = defineProp
       answer: 'The roadmap for Stacks includes first-party supported stacks like Table, Calendar, Command Palette, Date Picker, File Manager, Image, Video, Audio, Identity, Digital Ownership, Payments, and Governance. More information can be found in the detailed roadmap.',
     },
   ],
-]
+] } = defineProps<FaqsProps>()
 </script>
 <section
   id="faq"