@stacksjs/components 0.2.176 → 0.2.177

package/dist/{Accordion-pt8j917s.stx → Accordion-8tv78bh9.stx}

@@ -11,10 +11,10 @@ export const allowMultiple = $props.allowMultiple || false
 export const defaultOpen = $props.defaultOpen || []
 export const className = $props.className || ''
 
-export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
-export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
-export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
-export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
+export const accordionClasses = `divide-y divide-line border border-line rounded-lg ${className}`.trim()
+export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-fg hover:bg-surface transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const iconClasses = `w-5 h-5 text-fg-soft transition-transform duration-200`.trim()
+export const contentClasses = `px-4 py-3 text-fg-strong`.trim()
 export const hasPropItems = Array.isArray(items) && items.length > 0
 </script>
 

package/dist/{AccordionItem-hbhzx63p.stx → AccordionItem-7bd3ga36.stx}

@@ -7,9 +7,9 @@
 export const title = $props.title || ''
 export const className = $props.className || ''
 
-const headerClasses = 'w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
-const iconClasses = 'w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200'
-const contentClasses = 'px-4 py-3 text-gray-700 dark:text-gray-300'
+const headerClasses = 'w-full flex items-center justify-between px-4 py-3 text-left font-medium text-fg hover:bg-surface transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
+const iconClasses = 'w-5 h-5 text-fg-soft transition-transform duration-200'
+const contentClasses = 'px-4 py-3 text-fg-strong'
 </script>
 
 <div data-stx-accordion-item data-title="{{ title }}" class="{{ className }}">

package/dist/{Audio-hjywk3qc.stx → Audio-y0sgq50z.stx}

@@ -10,13 +10,13 @@ export const showWaveform = $props.showWaveform || false
 export const title = $props.title || ''
 
 export const containerClasses = `relative w-full ${className}`.trim()
-export const audioClasses = 'w-full rounded-md bg-gray-100 dark:bg-gray-800'
+export const audioClasses = 'w-full rounded-md bg-surface-raised'
 </script>
 
 <div class="{{ containerClasses }}">
   @if(title)
     <div class="mb-2 px-1">
-      <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
+      <h3 class="text-sm font-medium text-fg">
         {{ title }}
       </h3>
     </div>
@@ -35,7 +35,7 @@ export const audioClasses = 'w-full rounded-md bg-gray-100 dark:bg-gray-800'
   </audio>
 
   @if(showWaveform)
-    <div class="mt-2 h-16 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center">
+    <div class="mt-2 h-16 bg-surface-raised rounded-md flex items-center justify-center">
       <svg class="w-full h-full px-4" viewBox="0 0 100 40" preserveAspectRatio="none">
         <path
           d="M 0,20 L 10,15 L 20,10 L 30,5 L 40,15 L 50,20 L 60,25 L 70,30 L 80,20 L 90,15 L 100,20"

package/dist/{Avatar-h3jmwcq0.stx → Avatar-rjvwnskf.stx}

@@ -35,9 +35,9 @@ const statusColorClasses = {
 }
 
 export const containerClasses = `relative inline-block ${className}`.trim()
-export const avatarClasses = `flex items-center justify-center overflow-hidden bg-gray-200 dark:bg-gray-700 ${sizeClasses[size]} ${shapeClasses[shape]}`.trim()
+export const avatarClasses = `flex items-center justify-center overflow-hidden bg-surface-sunken ${sizeClasses[size]} ${shapeClasses[shape]}`.trim()
 export const imageClasses = `w-full h-full object-cover`.trim()
-export const initialsClasses = `font-medium text-gray-600 dark:text-gray-300 uppercase select-none`.trim()
+export const initialsClasses = `font-medium text-fg-muted uppercase select-none`.trim()
 export const statusClasses = status ? `absolute bottom-0 right-0 ${statusSizeClasses[size]} ${statusColorClasses[status]} ${shapeClasses[shape]} border-white dark:border-gray-900`.trim() : ''
 export const displayInitials = initials || (alt ? alt.split(' ').map(n => n[0]).join('').substring(0, 2) : '?')
 </script>

package/dist/{Badge-k8dy3d53.stx → Badge-k52qmxcm.stx}

@@ -6,7 +6,7 @@ export const removable = $props.removable || false
 export const className = $props.className || ''
 
 const variantClasses = {
-  default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+  default: 'bg-surface-raised text-gray-800 dark:text-gray-300',
   primary: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
   secondary: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
   success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',

package/dist/{Breadcrumb-7f7s4d02.stx → Breadcrumb-sy5taqsn.stx}

@@ -19,10 +19,10 @@ const separatorElement = separator === '/' ? '/' :
   separator
 
 export const breadcrumbClasses = `flex items-center flex-wrap gap-2 text-sm ${className}`.trim()
-export const itemClasses = `text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-150`.trim()
-export const activeItemClasses = `text-gray-900 dark:text-gray-100 font-medium`.trim()
-export const separatorClasses = `text-gray-400 dark:text-gray-600 select-none`.trim()
-export const collapsedClasses = `text-gray-400 dark:text-gray-600 cursor-default`.trim()
+export const itemClasses = `text-fg-muted hover:text-fg transition-colors duration-150`.trim()
+export const activeItemClasses = `text-fg font-medium`.trim()
+export const separatorClasses = `text-fg-subtle select-none`.trim()
+export const collapsedClasses = `text-fg-subtle cursor-default`.trim()
 </script>
 
 <nav class="{{ breadcrumbClasses }}" aria-label="Breadcrumb">
@@ -47,8 +47,8 @@ export const collapsedClasses = `text-gray-400 dark:text-gray-600 cursor-default
             </span>
           @else
             <!-- Link item -->
-            <a
-              href="{{ item.href }}"
+            <StxLink
+              to="{{ item.href }}"
               class="{{ itemClasses }}"
             >
               @if(item.icon)
@@ -59,7 +59,7 @@ export const collapsedClasses = `text-gray-400 dark:text-gray-600 cursor-default
               @else
                 {{ item.label }}
               @endif
-            </a>
+            </StxLink>
           @endif
         @endif
 

package/dist/{Button-1vknasy3.stx → Button-wrwmnfpf.stx}

@@ -11,9 +11,9 @@ export const className = $props.className || ''
 
 const variantClasses = {
   primary: 'bg-blue-500 hover:bg-blue-600 text-white shadow-md hover:shadow-lg dark:bg-blue-600 dark:hover:bg-blue-700',
-  secondary: 'bg-neutral-200 hover:bg-neutral-300 text-neutral-900 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-white',
+  secondary: 'bg-surface-sunken hover:bg-neutral-300 text-neutral-900 dark:hover:bg-neutral-600 dark:text-white',
   outline: 'border-2 border-blue-500 text-blue-500 hover:bg-blue-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-950',
-  ghost: 'hover:bg-neutral-100 text-neutral-700 dark:hover:bg-neutral-800 dark:text-neutral-300',
+  ghost: 'hover:bg-surface-raised text-fg-strong',
   danger: 'bg-red-500 hover:bg-red-600 text-white shadow-md hover:shadow-lg dark:bg-red-600 dark:hover:bg-red-700',
 }
 

package/dist/{Calendar-reny0et7.stx → Calendar-gjjhhfnt.stx}

@@ -12,10 +12,10 @@ export const highlightToday = $props.highlightToday !== false
 const baseClasses = 'bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-sm'
 export const calendarClasses = `${baseClasses} ${className}`.trim()
 export const headerClasses = 'flex items-center justify-between mb-4'
-export const monthYearClasses = 'text-lg font-semibold text-gray-900 dark:text-gray-100'
-export const buttonClasses = 'p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors'
+export const monthYearClasses = 'text-lg font-semibold text-fg'
+export const buttonClasses = 'p-2 hover:bg-surface-raised rounded-md transition-colors'
 export const weekdaysClasses = 'grid grid-cols-7 gap-1 mb-2'
-export const weekdayClasses = 'text-center text-xs font-medium text-gray-600 dark:text-gray-400 py-2'
+export const weekdayClasses = 'text-center text-xs font-medium text-fg-muted py-2'
 export const daysGridClasses = 'grid grid-cols-7 gap-1'
 
 const valueIso = value ? new Date(value).toISOString() : null
@@ -121,10 +121,10 @@ function dayClasses(day) {
   const isTodayDate = isToday(day.date)
   const disabled = isDisabled(day.date)
   let cls = base
-  cls += day.isCurrentMonth ? ' text-gray-900 dark:text-gray-100' : ' text-gray-400 dark:text-gray-600'
-  cls += disabled ? ' opacity-50 cursor-not-allowed' : ' cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700'
-  if (isSelected) cls += ' bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
-  if (isTodayDate && highlightToday && !isSelected) cls += ' border-2 border-blue-600 dark:border-blue-400'
+  cls += day.isCurrentMonth ? 'text-fg' : 'text-fg-subtle'
+  cls += disabled ? ' opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-surface-raised'
+  if (isSelected) cls += 'bg-info-solid text-white hover:bg-blue-700 dark:hover:bg-blue-600'
+  if (isTodayDate && highlightToday && !isSelected) cls += 'border-2 border-info'
   return cls
 }
 
@@ -179,7 +179,7 @@ defineExpose({ selectedDate, currentMonth, selectDate })
     <div class="mt-4 flex justify-center">
       <button
         type="button"
-        class="px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-gray-700 rounded-md transition-colors"
+        class="px-4 py-2 text-sm font-medium text-info hover:bg-blue-50 dark:hover:bg-gray-700 rounded-md transition-colors"
         @click="goToToday()"
       >
         Today

package/dist/{Card-c1g1fd1w.stx → Card-473a02fy.stx}

@@ -8,10 +8,10 @@ export const imageAlt = $props.imageAlt || ''
 export const className = $props.className || ''
 
 const variantClasses = {
-  default: 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
-  outlined: 'bg-transparent border-2 border-gray-300 dark:border-gray-600',
+  default: 'bg-white dark:bg-gray-800 border border-line',
+  outlined: 'bg-transparent border-2 border-line-strong',
   elevated: 'bg-white dark:bg-gray-800 shadow-lg border-0',
-  flat: 'bg-gray-50 dark:bg-gray-900 border-0',
+  flat: 'bg-surface border-0',
 }
 
 const paddingClasses = { none: 'p-0', sm: 'p-3', default: 'p-6', lg: 'p-8' }

package/dist/{Checkbox-aqmq4cqv.stx → Checkbox-2s2a7n4h.stx}

@@ -12,13 +12,13 @@ export const name = $props.name || ''
 export const className = $props.className || ''
 
 const sizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
-const baseClasses = 'rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-600 dark:focus:ring-indigo-500 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors'
-const stateClasses = error ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400' : ''
+const baseClasses = 'rounded border-line-strong text-accent focus:ring-accent focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors'
+const stateClasses = error ? 'border-red-300 dark:border-red-600 text-danger focus:ring-red-500 dark:focus:ring-red-400' : ''
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 
 export const checkboxClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses}`.trim()
-export const labelClasses = `text-sm font-medium ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`.trim()
-export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const labelClasses = `text-sm font-medium ${error ? 'text-danger' : 'text-fg'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`.trim()
+export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red-400' : 'text-fg-soft'}`.trim()
 export const inputId = `checkbox-${value || label}`
 </script>
 

package/dist/{Checkout-agt0ngpw.stx → Checkout-22wh3s22.stx}

@@ -24,7 +24,7 @@ export const isOneTime = mode === 'one-time'
 
 @if(isOneTime)
   <div class="p-8 text-center">
-    <p class="text-gray-600 dark:text-gray-400">
+    <p class="text-fg-muted">
       One-time payment mode is not yet implemented.
     </p>
   </div>

package/dist/{ComboboxOption-hmxt3gte.stx → ComboboxOption-6yh7xk7q.stx}

@@ -4,7 +4,7 @@ export const disabled = $props.disabled || false
 export const className = $props.className || ''
 export const as = $props.as || 'li'
 
-const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-neutral-900 dark:text-neutral-100 hover:bg-blue-100 dark:hover:bg-blue-900'
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-fg hover:bg-blue-100 dark:hover:bg-blue-900'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
 export const optionClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
 export const valueJson = JSON.stringify(value === undefined ? null : value)
@@ -32,7 +32,7 @@ function onClick(event) {
   @if(disabled)aria-disabled="true"@endif
   @click="onClick($event)"
 >
-  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400" data-stx-combobox-check>
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-info" data-stx-combobox-check>
     <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
       <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
     </svg>

package/dist/{CommandPaletteItem-mvk6q7a2.stx → CommandPaletteItem-chdw0070.stx}

@@ -2,7 +2,7 @@
 export const className = $props.className || ''
 export const value = $props.value
 
-const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2 text-neutral-900 dark:text-neutral-100 hover:bg-blue-600 hover:text-white'
+const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2 text-fg hover:bg-blue-600 hover:text-white'
 export const itemClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/dist/{DefaultPaymentMethod-shhf6aap.stx → DefaultPaymentMethod-6qrem3sg.stx}

@@ -15,33 +15,33 @@ export const containerClasses = `mt-16 w-2/3 bg-white dark:bg-blue-gray-800 px-8
 </script>
 
 <div class="{{ containerClasses }}">
-  <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+  <h2 class="text-lg text-fg font-medium">
     Payment Info
   </h2>
 
   @if(isLoading)
     <!-- Loading skeleton -->
     <div class="mt-8 animate-pulse">
-      <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+      <div class="h-20 bg-surface-sunken rounded-lg"></div>
     </div>
   @else
     @if(paymentMethod)
-      <div class="col-span-1 mt-8 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+      <div class="col-span-1 mt-8 border border-line rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-line">
         <div class="w-full p-3">
           <div class="flex items-center justify-between">
             <div class="flex items-center space-x-4">
               <!-- Card Brand Icon -->
-              <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-md">
+              <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-surface-raised rounded-md">
                 <span class="text-2xl">{{ brandIcons[paymentMethod.brand.toLowerCase()] || brandIcons.default }}</span>
               </div>
 
               <!-- Card Details -->
               <div>
-                <h2 class="text-sm text-gray-600 dark:text-gray-300">
+                <h2 class="text-sm text-fg-muted">
                   {{ paymentMethod.brand }} •••• {{ paymentMethod.last_four }}
                   <span class="ml-4 inline-flex items-center rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 text-xs text-indigo-700 dark:text-indigo-300 font-medium ring-1 ring-indigo-700/10 dark:ring-indigo-300/20 ring-inset">Default</span>
                   <br>
-                  <span class="text-xs text-gray-500 dark:text-gray-400 italic">Expires {{ paymentMethod.exp_month }} / {{ paymentMethod.exp_year }}</span>
+                  <span class="text-xs text-fg-soft italic">Expires {{ paymentMethod.exp_month }} / {{ paymentMethod.exp_year }}</span>
                 </h2>
               </div>
             </div>
@@ -50,9 +50,9 @@ export const containerClasses = `mt-16 w-2/3 bg-white dark:bg-blue-gray-800 px-8
       </div>
     @else
       <!-- Empty state -->
-      <div class="col-span-1 mt-8 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+      <div class="col-span-1 mt-8 border border-line rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-line">
         <div class="w-full px-4 py-5">
-          <h2 class="text-center text-sm text-gray-600 dark:text-gray-300">
+          <h2 class="text-center text-sm text-fg-muted">
             You haven't added any payment methods yet.
           </h2>
         </div>

package/dist/{DialogDescription-76prd1m2.stx → DialogDescription-gth4c2kx.stx}

@@ -2,7 +2,7 @@
 export const className = $props.className || ''
 export const as = $props.as || 'p'
 
-const baseClasses = 'mt-2 text-sm text-neutral-500 dark:text-neutral-400'
+const baseClasses = 'mt-2 text-sm text-fg-soft'
 const descriptionClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/dist/{Drawer-hrz7qcyp.stx → Drawer-jgepqr9j.stx}

@@ -88,7 +88,7 @@ defineExpose({
           <div class="relative flex h-full flex-col overflow-y-auto bg-white dark:bg-blue-gray-800 py-6 shadow-xl">
             @if(title)
               <div class="px-4 sm:px-6">
-                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                <h2 class="text-base font-semibold text-fg">
                   {{ title }}
                 </h2>
               </div>

package/dist/{DropdownItem-c7rz08e5.stx → DropdownItem-d8ht2bp5.stx}

@@ -4,7 +4,7 @@ export const as = $props.as || 'div'
 export const disabled = $props.disabled || false
 export const value = $props.value
 
-const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors text-neutral-900 dark:text-neutral-100 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600'
+const baseClasses = 'group flex w-full items-center px-2 py-2 text-sm transition-colors text-fg hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 export const itemClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
 </script>

package/dist/{Form-bpnpbymb.stx → Form-vbag14t1.stx}

@@ -10,7 +10,7 @@ export const validateOnChange = $props.validateOnChange === true
 export const validateOnBlur = $props.validateOnBlur === true
 
 export const formClasses = `space-y-6 ${className}`.trim()
-export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
+export const errorClasses = `mt-1 text-sm text-danger`.trim()
 </script>
 
 <script client>

package/dist/{ListboxOption-e0dtv1gc.stx → ListboxOption-4j070101.stx}

@@ -4,7 +4,7 @@ export const disabled = $props.disabled || false
 export const className = $props.className || ''
 export const as = $props.as || 'li'
 
-const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-neutral-900 dark:text-neutral-100 hover:bg-blue-100 dark:hover:bg-blue-900'
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-fg hover:bg-blue-100 dark:hover:bg-blue-900'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
 export const optionClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
 export const valueJson = JSON.stringify(value === undefined ? null : value)
@@ -32,7 +32,7 @@ function onClick(event) {
   @if(disabled)aria-disabled="true"@endif
   @click="onClick($event)"
 >
-  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400" data-stx-listbox-check>
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-info" data-stx-listbox-check>
     <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
       <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
     </svg>

package/dist/{Login-gepemsth.stx → Login-2cp65d41.stx}

@@ -8,12 +8,28 @@ export const showSignup = $props.showSignup ?? true
 export const signupText = $props.signupText || 'Start a 14 day free trial'
 export const className = $props.className || ''
 
+// These two used to be `href="#"`, which is not a link an app can wire — so
+// adopting <Login> meant a form with two dead ends and no prop to fix them
+// (#1930). They are real navigation, so they route through <StxLink>: an app on
+// the SPA router gets a client-side transition, and an absolute URL still gets a
+// native one because the router excludes those.
+export const forgotPasswordHref = $props.forgotPasswordHref || '/forgot-password'
+export const signupHref = $props.signupHref || '/register'
+
 export const containerClasses = `min-h-full flex flex-col justify-center py-12 lg:px-8 sm:px-6 dark:bg-blue-gray-900 ${className}`.trim()
 </script>
 
 <script client>
 const emit = defineEmits()
 
+// The social buttons used to be `<a href="#">` — a link that navigates
+// nowhere and that a host app had no way to wire (#1930). They are not
+// navigation, so they are real buttons now, and the provider is emitted so
+// the app can start its own OAuth flow.
+function onSocial(provider) {
+  emit('social', { provider })
+}
+
 function onSubmit(event) {
   event.preventDefault()
   const formData = new FormData(event.target)
@@ -32,7 +48,7 @@ function onSubmit(event) {
     @if(showLogo)
       <img src="/logo.svg" alt="Logo" class="mx-auto h-11 w-auto" />
     @endif
-    <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
+    <h2 class="mt-6 text-center text-2xl text-fg font-bold leading-9 tracking-tight">
       {{ headingText }}
     </h2>
   </div>
@@ -42,7 +58,7 @@ function onSubmit(event) {
       <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
         <div class="space-y-6">
           <div>
-            <label for="email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            <label for="email" class="block text-sm text-fg font-medium leading-6">
               Email address
             </label>
             <div class="mt-2">
@@ -52,13 +68,13 @@ function onSubmit(event) {
                 type="email"
                 autocomplete="email"
                 required
-                class="block w-full border-0 rounded-md py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
+                class="block w-full border-0 rounded-md py-1.5 text-fg shadow-sm ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
               />
             </div>
           </div>
 
           <div>
-            <label for="password" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            <label for="password" class="block text-sm text-fg font-medium leading-6">
               Password
             </label>
             <div class="mt-2">
@@ -68,7 +84,7 @@ function onSubmit(event) {
                 type="password"
                 autocomplete="current-password"
                 required
-                class="block w-full border-0 rounded-md py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
+                class="block w-full border-0 rounded-md py-1.5 text-fg shadow-sm ring-1 ring-line-strong ring-inset sm:text-sm placeholder:text-fg-subtle sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
               />
             </div>
           </div>
@@ -80,9 +96,9 @@ function onSubmit(event) {
                   id="remember-me"
                   name="remember-me"
                   type="checkbox"
-                  class="h-4 w-4 border-gray-300 dark:border-gray-600 rounded text-indigo-600 focus:ring-indigo-600 dark:bg-blue-gray-700"
+                  class="h-4 w-4 border-line-strong rounded text-indigo-600 focus:ring-indigo-600 dark:bg-blue-gray-700"
                 />
-                <label for="remember-me" class="ml-3 block text-sm text-gray-900 dark:text-gray-100 leading-6">
+                <label for="remember-me" class="ml-3 block text-sm text-fg leading-6">
                   Remember me
                 </label>
               </div>
@@ -90,9 +106,9 @@ function onSubmit(event) {
 
             @if(showForgotPassword)
               <div class="text-sm leading-6">
-                <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold hover:text-indigo-500 dark:hover:text-indigo-300">
+                <StxLink to="{{ forgotPasswordHref }}" class="text-accent font-semibold hover:text-indigo-500 dark:hover:text-indigo-300">
                   Forgot password?
-                </a>
+                </StxLink>
               </div>
             @endif
           </div>
@@ -111,19 +127,20 @@ function onSubmit(event) {
           <div>
             <div class="relative mt-10">
               <div class="absolute inset-0 flex items-center" aria-hidden="true">
-                <div class="w-full border-t border-gray-200 dark:border-gray-600"></div>
+                <div class="w-full border-t border-line"></div>
               </div>
               <div class="relative flex justify-center text-sm font-medium leading-6">
-                <span class="bg-white dark:bg-blue-gray-800 px-6 text-gray-900 dark:text-gray-100">
+                <span class="bg-white dark:bg-blue-gray-800 px-6 text-fg">
                   Or continue with
                 </span>
               </div>
             </div>
 
             <div class="grid grid-cols-2 mt-6 gap-4">
-              <a
-                href="#"
-                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
+              <button
+                type="button"
+                @click="onSocial('google')"
+                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-fg font-semibold shadow-sm ring-1 ring-line-strong ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
               >
                 <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
                   <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36002 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86002 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
@@ -132,28 +149,29 @@ function onSubmit(event) {
                   <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.2654 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
                 </svg>
                 <span class="text-sm font-semibold leading-6">Google</span>
-              </a>
+              </button>
 
-              <a
-                href="#"
-                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
+              <button
+                type="button"
+                @click="onSocial('github')"
+                class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-fg font-semibold shadow-sm ring-1 ring-line-strong ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
               >
                 <svg class="h-5 w-5 fill-[#24292F]" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                   <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
                 </svg>
                 <span class="text-sm font-semibold leading-6">GitHub</span>
-              </a>
+              </button>
             </div>
           </div>
         @endif
       </div>
 
       @if(showSignup)
-        <p class="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
+        <p class="mt-10 text-center text-sm text-fg-soft">
           Not a member?
-          <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold leading-6 hover:text-indigo-500 dark:hover:text-indigo-300">
+          <StxLink to="{{ signupHref }}" class="text-accent font-semibold leading-6 hover:text-indigo-500 dark:hover:text-indigo-300">
             {{ signupText }}
-          </a>
+          </StxLink>
         </p>
       @endif
     </div>

package/dist/{Navigator-rk2a5wvk.stx → Navigator-smpa7my4.stx}

@@ -35,23 +35,23 @@ function getItemClasses(item) {
   let cls = sizeClasses[size] || sizeClasses.md
   if (variant === 'default') {
     cls += isActiveItem
-      ? ' text-gray-900 dark:text-gray-100 font-medium'
-      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+      ? 'text-fg font-medium'
+      : 'text-fg-muted hover:text-fg'
   }
   else if (variant === 'pills') {
     cls += isActiveItem
       ? ' bg-blue-600 text-white font-medium rounded-full'
-      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full'
+      : 'text-fg-strong hover:bg-surface-raised rounded-full'
   }
   else if (variant === 'underline') {
     cls += isActiveItem
-      ? ' text-blue-600 dark:text-blue-400 font-medium border-b-2 border-blue-600 dark:border-blue-400'
-      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-b-2 border-transparent'
+      ? 'text-info font-medium border-b-2 border-info'
+      : 'text-fg-muted hover:text-fg border-b-2 border-transparent'
   }
   else if (variant === 'sidebar') {
     cls += isActiveItem
-      ? ' bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium border-l-4 border-blue-600 dark:border-blue-400'
-      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-l-4 border-transparent'
+      ? 'bg-blue-50 dark:bg-blue-900/20 text-info font-medium border-l-4 border-info'
+      : 'text-fg-strong hover:bg-surface-raised border-l-4 border-transparent'
   }
   cls += ' transition-all duration-200 cursor-pointer flex items-center gap-2'
   if (item.disabled) cls += ' opacity-50 cursor-not-allowed pointer-events-none'
@@ -74,8 +74,8 @@ defineExpose({ activeKey })
 <nav class="{{ containerClasses }} {{ gapClasses }}" role="navigation" aria-label="Main navigation">
   @foreach(item in items)
     @if(item.href)
-      <a
-        href="{{ item.href }}"
+      <StxLink
+        to="{{ item.href }}"
         :class="getItemClasses({{ JSON.stringify(item) }})"
         @click="onClickItem({{ JSON.stringify(item) }}, $event)"
         :aria-current="isActive({{ JSON.stringify(item) }}) ? 'page' : null"
@@ -86,11 +86,11 @@ defineExpose({ activeKey })
         @endif
         <span>{{ item.label }}</span>
         @if(item.badge)
-          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-surface-sunken text-fg-strong">
             {{ item.badge }}
           </span>
         @endif
-      </a>
+      </StxLink>
     @else
       <button
         type="button"
@@ -103,7 +103,7 @@ defineExpose({ activeKey })
         @endif
         <span>{{ item.label }}</span>
         @if(item.badge)
-          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-surface-sunken text-fg-strong">
             {{ item.badge }}
           </span>
         @endif