@stacksjs/defaults 0.70.362 → 0.70.363

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"

package/resources/components/Marketing/Feature.stx

@@ -1,18 +1,23 @@
 <script>
 interface FeatureProps {
   className?: string
-  feature?: string
+  feature?: {
+    name: string
+    summary: string
+    description: string
+    image: string
+    icon: string
+  }
   isActive?: boolean
 }
 
-const { className = '', feature = {, isActive = false } = defineProps<FeatureProps>()
-
-name: '',
+const { className = '', feature = {
+  name: '',
   summary: '',
   description: '',
   image: '',
-  icon: ''
-}
+  icon: '',
+}, isActive = false } = defineProps<FeatureProps>()
 </script>
 <div class="{{ className }} {{ !isActive ? 'opacity-75 hover:opacity-100' : '' }}">
   <div class="w-9 rounded-lg {{ isActive ? 'bg-blue-600' : 'bg-slate-500' }}">

package/resources/components/Marketing/Layout.stx

@@ -1,20 +1,24 @@
 <script>
-interface LayoutProps {
-  inter?: string
-  lexend?: string
+interface FontConfig {
+  subsets: string[]
+  display: string
+  variable: string
 }
 
-const { inter = {, lexend = { } = defineProps<LayoutProps>()
+interface LayoutProps {
+  inter?: FontConfig
+  lexend?: FontConfig
+}
 
-subsets: ['latin'],
+const { inter = {
+  subsets: ['latin'],
   display: 'swap',
   variable: '--font-inter',
-}
-
+}, lexend = {
   subsets: ['latin'],
   display: 'swap',
   variable: '--font-lexend',
-}
+} } = defineProps<LayoutProps>()
 </script>
 <html
   lang="en"

package/resources/components/Marketing/Pricing.stx

@@ -1,11 +1,17 @@
 <script>
 interface PricingProps {
-  plans?: string
+  plans?: Array<{
+    name: string
+    price: string
+    description: string
+    href: string
+    features: string[]
+    featured: boolean
+  }>
 }
 
-const { plans = [ } = defineProps<PricingProps>()
-
-{
+const { plans = [
+  {
     name: 'Hobby (Early Bird Pricing)',
     price: '$19',
     description: 'Get a lifetime access with all upgrades included in the future.',
@@ -49,7 +55,7 @@ const { plans = [ } = defineProps<PricingProps>()
     ],
     featured: false,
   },
-]
+] } = defineProps<PricingProps>()
 </script>
 <section
   id="pricing"

package/resources/components/Marketing/PrimaryFeatures.stx

@@ -1,12 +1,11 @@
 <script>
 interface PrimaryFeaturesProps {
-  features?: string
+  features?: Array<{ title: string, description: string, image: string }>
   selectedIndex?: number
 }
 
-const { features = [, selectedIndex = 0 } = defineProps<PrimaryFeaturesProps>()
-
-{
+const { features = [
+  {
     title: 'Frontend',
     description: 'Powered by a progressive UI Engine, building application interfaces has never been easier.',
     image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75',
@@ -26,7 +25,7 @@ const { features = [, selectedIndex = 0 } = defineProps<PrimaryFeaturesProps>()
     description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora in cum blanditiis? Qui omnis unde.',
     image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75',
   },
-]
+], selectedIndex = 0 } = defineProps<PrimaryFeaturesProps>()
 </script>
 <section id="features" aria-label="Features for running your books" class="overflow-hidden relative pb-28 pt-20 sm:py-32 bg-blue-600">
   <Container class="relative">

package/resources/components/Marketing/PrimaryFeatures2.stx

@@ -2,14 +2,15 @@
 interface PrimaryFeatures2Props {
   backgroundImage?: string
   screenshotPayroll?: string
-  features?: string
+  features?: Array<{ title: string, description: string, image: string }>
   selectedIndex?: number
   tabOrientation?: string
 }
 
-const { backgroundImage = '/images/screenshots/background-features.jpg', screenshotPayroll = '/images/screenshots/payroll.webp', features = [, selectedIndex = 0, tabOrientation = 'vertical' } = defineProps<PrimaryFeatures2Props>()
-
-{
+// `features` defaults reference `screenshotPayroll`, which is bound earlier in
+// the same pattern — destructuring initializes left to right, so that is legal.
+const { backgroundImage = '/images/screenshots/background-features.jpg', screenshotPayroll = '/images/screenshots/payroll.webp', features = [
+  {
     title: 'Payroll',
     description: "Keep track of everyone's salaries and whether or not they've been paid. Direct deposit not supported.",
     image: screenshotPayroll,
@@ -29,7 +30,7 @@ const { backgroundImage = '/images/screenshots/background-features.jpg', screens
     description: 'Easily export your data into an Excel spreadsheet where you can do whatever the hell you want with it.',
     image: '',
   },
-]
+], selectedIndex = 0, tabOrientation = 'vertical' } = defineProps<PrimaryFeatures2Props>()
 </script>
 <section
   id="features"

package/resources/components/Marketing/SecondaryFeatures.stx

@@ -1,12 +1,17 @@
 <script>
 interface SecondaryFeaturesProps {
-  features?: string
+  features?: Array<{
+    name: string
+    summary: string
+    description: string
+    image: string
+    icon: string
+  }>
   selectedIndex?: number
 }
 
-const { features = [, selectedIndex = 0 } = defineProps<SecondaryFeaturesProps>()
-
-{
+const { features = [
+  {
     name: 'Dashboard',
     summary: 'The UI to your application.',
     description: 'Whether you are a developer or a client, The Dashboard visualizes your data. Easily extend your admin panel.',
@@ -27,7 +32,7 @@ const { features = [, selectedIndex = 0 } = defineProps<SecondaryFeaturesProps>(
     image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fprofit-loss.2a2f85d5.png&w=1200&q=75',
     icon: '',
   },
-]
+], selectedIndex = 0 } = defineProps<SecondaryFeaturesProps>()
 </script>
 <section id="secondary-features" aria-label="Features for simplifying everyday business tasks" class="pb-14 pt-20 sm:pb-20 sm:pt-32 lg:pb-32">
   <Container>

package/resources/components/Marketing/Testimonials.stx

@@ -1,11 +1,14 @@
 <script>
 interface TestimonialsProps {
-  testimonials?: string
+  /** One inner array per rendered column. */
+  testimonials?: Array<Array<{
+    content: string
+    author: { name: string, role: string, image: string }
+  }>>
 }
 
-const { testimonials = [ } = defineProps<TestimonialsProps>()
-
-[
+const { testimonials = [
+  [
     {
       content: 'Stacks is a rapid development framework that has helped me create and maintain frontends, backends, and clouds without worrying about the boilerplate.',
       author: {
@@ -59,7 +62,7 @@ const { testimonials = [ } = defineProps<TestimonialsProps>()
       },
     },
   ],
-]
+] } = defineProps<TestimonialsProps>()
 </script>
 <section
   id="testimonials"

package/resources/views/index.stx

@@ -2636,22 +2636,22 @@ export default {
       </button>
       <div class="taskbar-divider"></div>
       <div class="quick-launch">
-        <a href="https://stacksjs.com/docs" target="_blank" class="quick-launch-icon" title="Documentation">
+        <a href="https://stacksjs.com/docs" target="_blank" class="quick-launch-icon" x-tooltip="Documentation" title="Documentation">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/>
           </svg>
         </a>
-        <a href="https://github.com/stacksjs/stacks" target="_blank" class="quick-launch-icon" title="GitHub Repository">
+        <a href="https://github.com/stacksjs/stacks" target="_blank" class="quick-launch-icon" x-tooltip="GitHub Repository" title="GitHub Repository">
           <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
             <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
           </svg>
         </a>
-        <a href="https://github.com/sponsors/chrisbbreuer" target="_blank" class="quick-launch-icon" title="Sponsor">
+        <a href="https://github.com/sponsors/chrisbbreuer" target="_blank" class="quick-launch-icon" x-tooltip="Sponsor" title="Sponsor">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
             <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
           </svg>
         </a>
-        <a href="https://stacksjs.com/discord" target="_blank" class="quick-launch-icon" title="Discord">
+        <a href="https://stacksjs.com/discord" target="_blank" class="quick-launch-icon" x-tooltip="Discord" title="Discord">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
             <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
           </svg>

package/views/system-tray/index.stx

@@ -83,7 +83,7 @@ void loadProjects()
         <p class="text-neutral-500 text-xs dark:text-neutral-400">Project shortcuts</p>
       </div>
     </div>
-    <button type="button" class="flex items-center justify-center h-9 w-9 text-neutral-500 hover:text-neutral-900 dark:hover:text-white bg-white dark:bg-white/5 border border-black/5 rounded-lg dark:border-white/10" @click="run('refresh')" title="Refresh">
+    <button type="button" class="flex items-center justify-center h-9 w-9 text-neutral-500 hover:text-neutral-900 dark:hover:text-white bg-white dark:bg-white/5 border border-black/5 rounded-lg dark:border-white/10" @click="run('refresh')" x-tooltip="Refresh" title="Refresh">
       <span :class="running() === 'refresh' ? 'h-4 w-4 animate-spin i-hugeicons-loading-03' : 'h-4 w-4 i-hugeicons-refresh'"></span>
     </button>
   </header>