@stacksjs/components 0.2.176 → 0.2.177

package/dist/{NumberInput-g41gmd2c.stx → NumberInput-j9p5bm5y.stx}

@@ -19,17 +19,17 @@ const sizeClasses = { sm: 'px-3 py-1.5 text-sm h-8', md: 'px-4 py-2 text-base h-
 const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset dark:bg-blue-gray-700 dark:text-gray-100'
 const stateClasses = error
   ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
-  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
+  : 'ring-line-strong text-fg placeholder-fg-subtle focus:ring-accent'
 const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
+  ? 'opacity-50 cursor-not-allowed bg-surface'
   : readonly
-    ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
+    ? 'bg-surface cursor-default'
     : 'bg-white dark:bg-blue-gray-700'
 const paddingClasses = showControls ? 'pr-10' : ''
 
 export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${paddingClasses} ${inputClassName}`.trim()
-export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
-export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-danger' : 'text-fg'}`.trim()
+export const helperClasses = `mt-2 text-sm ${error ? 'text-danger' : 'text-fg-soft'}`.trim()
 </script>
 
 <script client>
@@ -97,7 +97,7 @@ defineExpose({ value: inputValue, increment, decrement })
         <button
           type="button"
           @click="increment()"
-          class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none border-b border-gray-300 dark:border-gray-600"
+          class="flex items-center justify-center w-8 h-1/2 text-fg-subtle hover:text-fg-muted focus:outline-none border-b border-line-strong"
           aria-label="Increment"
         >
           <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -107,7 +107,7 @@ defineExpose({ value: inputValue, increment, decrement })
         <button
           type="button"
           @click="decrement()"
-          class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+          class="flex items-center justify-center w-8 h-1/2 text-fg-subtle hover:text-fg-muted focus:outline-none"
           aria-label="Decrement"
         >
           <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">

package/dist/{Pagination-wtgxmzey.stx → Pagination-jbcjrfcs.stx}

@@ -7,9 +7,9 @@ export const showPrevNext = $props.showPrevNext ?? true
 export const className = $props.className || ''
 
 export const paginationClasses = `flex items-center gap-1 ${className}`.trim()
-export const buttonClasses = `px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 transition-colors duration-150`.trim()
-export const activeButtonClasses = `px-3 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 border border-blue-600 dark:border-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
-export const ellipsisClasses = `px-3 py-2 text-sm font-medium text-gray-400 dark:text-gray-600`.trim()
+export const buttonClasses = `px-3 py-2 text-sm font-medium text-fg-strong bg-white dark:bg-gray-800 border border-line-strong rounded-md hover:bg-surface focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 transition-colors duration-150`.trim()
+export const activeButtonClasses = `px-3 py-2 text-sm font-medium text-white bg-info-solid border border-info rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const ellipsisClasses = `px-3 py-2 text-sm font-medium text-fg-subtle`.trim()
 export const iconClasses = `w-5 h-5`.trim()
 </script>
 

package/dist/{PasswordInput-4rsq1gwb.stx → PasswordInput-4qykq1dz.stx}

@@ -18,16 +18,16 @@ const iconSizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
 const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset dark:bg-blue-gray-700 dark:text-gray-100 pr-10'
 const stateClasses = error
   ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
-  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
+  : 'ring-line-strong text-fg placeholder-fg-subtle focus:ring-accent'
 const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
+  ? 'opacity-50 cursor-not-allowed bg-surface'
   : readonly
-    ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
+    ? 'bg-surface cursor-default'
     : 'bg-white dark:bg-blue-gray-700'
 
 export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${inputClassName}`.trim()
-export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
-export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-danger' : 'text-fg'}`.trim()
+export const helperClasses = `mt-2 text-sm ${error ? 'text-danger' : 'text-fg-soft'}`.trim()
 export const iconClasses = iconSizeClasses[size]
 </script>
 
@@ -105,7 +105,7 @@ defineExpose({ value: inputValue })
       <button
         type="button"
         @click="toggleVisibility()"
-        class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+        class="text-fg-subtle hover:text-fg-muted focus:outline-none"
         :aria-label="toggleAriaLabel()"
       >
         <svg :show="showPassword()" class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -122,10 +122,10 @@ defineExpose({ value: inputValue })
   @if(showStrength)
     <div :show="inputValue().length > 0" class="mt-2">
       <div class="flex items-center justify-between mb-1">
-        <span class="text-xs text-gray-600 dark:text-gray-400">Password strength</span>
+        <span class="text-xs text-fg-muted">Password strength</span>
         <span class="text-xs font-medium" :class="strengthLabelColor()" x-text="strengthText()"></span>
       </div>
-      <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+      <div class="w-full h-1.5 bg-surface-sunken rounded-full overflow-hidden">
         <div
           class="h-full transition-all duration-300 rounded-full"
           :class="strengthColor()"

package/dist/{PaymentMethods-x4vrx9yb.stx → PaymentMethods-2xy66bwk.stx}

@@ -33,25 +33,25 @@ function onDelete(methodId) {
 <div class="{{ containerClasses }}">
   @if(isLoading)
     <div class="animate-pulse">
-      <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+      <div class="h-24 bg-surface-sunken rounded-lg"></div>
     </div>
   @else
     @if(paymentMethods.length > 0)
       <ul role="list" class="grid grid-cols-1 gap-6 lg:grid-cols-1 sm:grid-cols-1">
         @foreach(method in paymentMethods)
-          <li class="col-span-1 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">
+          <li class="col-span-1 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">
-                  <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[method.brand.toLowerCase()] || brandIcons.default }}</span>
                   </div>
 
                   <div>
-                    <h2 class="text-sm text-gray-600 dark:text-gray-300">
+                    <h2 class="text-sm text-fg-muted">
                       {{ method.brand }} •••• {{ method.last_four }}
                     </h2>
-                    <span class="text-xs text-gray-500 dark:text-gray-400 italic">
+                    <span class="text-xs text-fg-soft italic">
                       Expires {{ method.exp_month }} / {{ method.exp_year }}
                     </span>
                   </div>
@@ -61,7 +61,7 @@ function onDelete(methodId) {
                   @if(showMakeDefault)
                     <button
                       type="button"
-                      class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 font-semibold shadow-sm hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                      class="border border-line-strong rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-fg-strong font-semibold shadow-sm hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                       @click="onMakeDefault('{{ method.id }}')"
                       title="Make default"
                     >
@@ -74,7 +74,7 @@ function onDelete(methodId) {
                   @if(showDelete)
                     <button
                       type="button"
-                      class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-red-600 dark:text-red-400 font-semibold shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 focus-visible:outline-2 focus-visible:outline-red-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                      class="border border-line-strong rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-danger font-semibold shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 focus-visible:outline-2 focus-visible:outline-red-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                       @click="onDelete('{{ method.id }}')"
                       title="Delete payment method"
                     >
@@ -90,12 +90,12 @@ function onDelete(methodId) {
         @endforeach
       </ul>
     @else
-      <div class="text-center py-12 bg-white dark:bg-blue-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-        <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <div class="text-center py-12 bg-white dark:bg-blue-gray-800 rounded-lg border border-line">
+        <svg class="mx-auto h-12 w-12 text-fg-subtle" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
         </svg>
-        <h3 class="mt-2 text-sm text-gray-900 dark:text-gray-100 font-medium">No payment methods</h3>
-        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        <h3 class="mt-2 text-sm text-fg font-medium">No payment methods</h3>
+        <p class="mt-1 text-sm text-fg-soft">
           You haven't added any payment methods yet.
         </p>
       </div>

package/dist/{Progress-9dhakbh4.stx → Progress-4h7dytq5.stx}

@@ -11,11 +11,11 @@ export const className = $props.className || ''
 const linearSizeClasses = { sm: 'h-1', md: 'h-2', lg: 'h-3' }
 const circularSizeClasses = { sm: 'w-12 h-12', md: 'w-16 h-16', lg: 'w-24 h-24' }
 const colorClasses = {
-  primary: 'bg-blue-600 dark:bg-blue-500',
+  primary: 'bg-info-solid',
   secondary: 'bg-purple-600 dark:bg-purple-500',
-  success: 'bg-green-600 dark:bg-green-500',
+  success: 'bg-success-solid',
   warning: 'bg-yellow-600 dark:bg-yellow-500',
-  danger: 'bg-red-600 dark:bg-red-500',
+  danger: 'bg-danger-solid',
   info: 'bg-cyan-600 dark:bg-cyan-500',
 }
 
@@ -28,16 +28,16 @@ export const containerClasses = variant === 'linear'
   ? `w-full ${className}`.trim()
   : `inline-flex items-center justify-center ${className}`.trim()
 
-export const linearTrackClasses = `w-full ${linearSizeClasses[size]} bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden`.trim()
+export const linearTrackClasses = `w-full ${linearSizeClasses[size]} bg-surface-sunken rounded-full overflow-hidden`.trim()
 export const linearBarClasses = `h-full ${colorClasses[color]} transition-all duration-300 ease-in-out ${indeterminate ? 'animate-progress-indeterminate' : ''}`.trim()
 export const circularSizeClass = circularSizeClasses[size]
-export const labelClasses = `text-sm font-medium text-gray-700 dark:text-gray-300 mb-2`.trim()
+export const labelClasses = `text-sm font-medium text-fg-strong mb-2`.trim()
 export const circularTrackColor = 'stroke-gray-200 dark:stroke-gray-700'
-export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stroke-blue-500'
+export const circularBarColor = color === 'primary' ? 'stroke-info'
   : color === 'secondary' ? 'stroke-purple-600 dark:stroke-purple-500'
-  : color === 'success' ? 'stroke-green-600 dark:stroke-green-500'
+  : color === 'success' ? 'stroke-success'
   : color === 'warning' ? 'stroke-yellow-600 dark:stroke-yellow-500'
-  : color === 'danger' ? 'stroke-red-600 dark:stroke-red-500'
+  : color === 'danger' ? 'stroke-danger'
   : 'stroke-cyan-600 dark:stroke-cyan-500'
 </script>
 
@@ -112,7 +112,7 @@ defineExpose({ value, setValue: (v) => value.set(v) })
 
       @if(showLabel)
         <div class="absolute inset-0 flex items-center justify-center">
-          <span class="text-sm font-semibold text-gray-700 dark:text-gray-300" x-text="percentLabel()"></span>
+          <span class="text-sm font-semibold text-fg-strong" x-text="percentLabel()"></span>
         </div>
       @endif
     </div>

package/dist/{Radio-djtb5dpc.stx → Radio-ccm07b2m.stx}

@@ -11,13 +11,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 = '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 = '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 radioClasses = `${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 = `radio-${value || label}`
 </script>
 

package/dist/RadioGroup-eerw9gq7.stx

@@ -0,0 +1,138 @@
+<script server>
+export const value = $props.value
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+/*
+ * Prop-array mode, alongside the slot API (stacksjs/stx#1930).
+ *
+ * `<RadioGroup :options="[{ label: 'A', value: 'a' }]" />` used to emit a
+ * hydration shell and nothing else: the labels reached the page only inside
+ * `data-stx-props`, so the choices were invisible without JavaScript and to a
+ * crawler. Every comparable component here — Tabs, Accordion, Select, Navigator,
+ * Breadcrumb — server-renders its content from a prop array, so this was the
+ * odd one out rather than a deliberate choice.
+ *
+ * The options are rendered here rather than delegated to <RadioGroupOption>
+ * because a loop variable cannot cross a component boundary as a `:` binding.
+ * Interpolating it would stringify the value — `1` and `"1"` would stop being
+ * distinguishable — and the group compares values by identity. Emitting the
+ * option markup directly keeps `data-option-value` exact JSON, which is what
+ * `syncOptionStates` already reads.
+ */
+export const options = Array.isArray($props.options) ? $props.options : []
+export const hasPropOptions = options.length > 0
+
+const optionBaseClasses = 'relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none transition-all bg-white dark:bg-neutral-800 text-fg focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-60 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 dark:focus-visible:ring-offset-blue-700'
+export const optionClasses = optionBaseClasses
+export const optionDisabledClasses = `${optionBaseClasses} opacity-50 cursor-not-allowed`
+
+const baseClasses = 'w-full'
+export const groupClasses = `${baseClasses} ${className}`.trim()
+export const radioGroupInstanceId = `stx-rg-${Math.random().toString(36).slice(2, 11)}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const radioGroupInstanceId = {{ radioGroupInstanceId }}
+const initialValue = {{ value === undefined ? 'null' : value }}
+const selected = state(initialValue)
+let rootEl = null
+
+function selectValue(v) {
+  selected.set(v)
+  syncOptionStates()
+  emit('change', v)
+}
+
+function syncOptionStates() {
+  if (!rootEl) return
+  const options = rootEl.querySelectorAll('[data-stx-radio-option]')
+  for (const opt of options) {
+    const raw = opt.dataset.optionValue
+    let v
+    try { v = JSON.parse(raw ?? 'null') }
+    catch { v = raw }
+    const checked = selected() === v
+    opt.setAttribute('aria-checked', checked ? 'true' : 'false')
+    opt.setAttribute('data-checked', checked ? 'true' : 'false')
+  }
+}
+
+function onSelect(event) {
+  event.stopPropagation()
+  selectValue(event.detail)
+}
+
+// Options rendered from the `options` prop have no <RadioGroupOption> behind
+// them to dispatch stx:radio-select, so the group claims them by delegation.
+// One listener on the root rather than a handler per option, which also means
+// options added later are picked up with no re-binding.
+function optionValueOf(el) {
+  try { return JSON.parse(el.dataset.optionValue ?? 'null') }
+  catch { return el.dataset.optionValue }
+}
+
+function onDelegatedActivate(event) {
+  const option = event.target.closest?.('[data-stx-radio-option]')
+  if (!option || !rootEl || !rootEl.contains(option)) return
+  if (option.getAttribute('aria-disabled') === 'true') return
+  // A <RadioGroupOption> dispatches its own event; claiming its click too would
+  // select twice and emit two change events.
+  if (option.dataset.stxRadioDelegated !== 'true') return
+  if (event.type === 'keydown' && event.key !== ' ' && event.key !== 'Enter') return
+  event.preventDefault()
+  selectValue(optionValueOf(option))
+}
+
+onMount(() => {
+  rootEl = document.querySelector(`[data-radio-group-id="${radioGroupInstanceId}"]`)
+  if (rootEl) {
+    rootEl.addEventListener('click', onDelegatedActivate)
+    rootEl.addEventListener('keydown', onDelegatedActivate)
+  }
+  syncOptionStates()
+})
+
+onDestroy(() => {
+  if (!rootEl) return
+  rootEl.removeEventListener('click', onDelegatedActivate)
+  rootEl.removeEventListener('keydown', onDelegatedActivate)
+})
+
+defineExpose({ selected, selectValue })
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ groupClasses }}"
+  data-stx-radio-group
+  data-radio-group-id="{{ radioGroupInstanceId }}"
+  role="radiogroup"
+  @stx:radio-select="onSelect($event)"
+>
+  @if(hasPropOptions)
+    @foreach(option in options)
+      <div
+        data-stx-radio-option
+        data-stx-radio-delegated="true"
+        data-option-value="{{ JSON.stringify(option.value === undefined ? null : option.value) }}"
+        role="radio"
+        aria-checked="{{ option.value === value ? 'true' : 'false' }}"
+        data-checked="{{ option.value === value ? 'true' : 'false' }}"
+        aria-disabled="{{ option.disabled ? 'true' : 'false' }}"
+        tabindex="{{ option.disabled ? '-1' : '0' }}"
+        class="{{ option.disabled ? optionDisabledClasses : optionClasses }}"
+      >
+        <span class="flex flex-col">
+          <span class="text-sm font-medium">{{ option.label }}</span>
+          @if(option.description)
+            <span class="text-sm opacity-70">{{ option.description }}</span>
+          @endif
+        </span>
+      </div>
+    @endforeach
+  @else
+    <slot />
+  @endif
+</component>

package/dist/{RadioGroupDescription-yej78fak.stx → RadioGroupDescription-z34r9avr.stx}

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

package/dist/{RadioGroupOption-s1d6r221.stx → RadioGroupOption-7pq7rw84.stx}

@@ -4,7 +4,7 @@ export const disabled = $props.disabled || false
 export const className = $props.className || ''
 export const as = $props.as || 'div'
 
-const baseClasses = 'relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none transition-all bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-60 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 dark:focus-visible:ring-offset-blue-700'
+const baseClasses = 'relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none transition-all bg-white dark:bg-neutral-800 text-fg focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-60 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 dark:focus-visible:ring-offset-blue-700'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
 export const optionClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
 export const valueJson = JSON.stringify(value === undefined ? null : value)

package/dist/{Select-1vnd0brz.stx → Select-zt72gg1e.stx}

@@ -14,14 +14,14 @@ const sizeClasses = { sm: 'px-3 py-1.5 text-sm h-8', md: 'px-4 py-2 text-base h-
 const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset dark:bg-blue-gray-700 dark:text-gray-100'
 const stateClasses = error
   ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
-  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
+  : 'ring-line-strong text-fg placeholder-fg-subtle focus:ring-accent'
 const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
+  ? 'opacity-50 cursor-not-allowed bg-surface'
   : 'bg-white dark:bg-blue-gray-700 cursor-pointer hover:ring-gray-400 dark:hover:ring-gray-500'
 
 export const selectClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${className}`.trim()
-export const labelClasses = `block text-sm font-medium leading-6 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
-export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const labelClasses = `block text-sm font-medium leading-6 ${error ? 'text-danger' : 'text-fg'}`.trim()
+export const helperClasses = `mt-2 text-sm ${error ? 'text-danger' : 'text-fg-soft'}`.trim()
 export const selectId = `select-${value}`
 </script>
 

package/dist/{SidebarItem-2a6n0be3.stx → SidebarItem-5v8atp7p.stx}

@@ -53,7 +53,7 @@ export const isLink = Boolean(href) && !disabled
   @if(indentStyle)style="{{ indentStyle }}"@endif
 >
   @if(isLink)
-    <a href="{{ href }}" data-sidebar-item data-label="{{ label }}" class="{{ rowClasses }}" @if(active)data-active="true" aria-current="page"@endif>
+    <StxLink to="{{ href }}" data-sidebar-item data-label="{{ label }}" class="{{ rowClasses }}" :data-active="active ? 'true' : null" :aria-current="active ? 'page' : null">
       <span class="{{ disclosureClasses }}" @if(expandable)data-sidebar-disclosure role="button" aria-label="Toggle {{ label }}"@endif>
         @if(expandable)
           <span data-sidebar-chevron class="{{ chevronClasses }}" aria-hidden="true"></span>
@@ -68,7 +68,7 @@ export const isLink = Boolean(href) && !disabled
       @if(count !== '' && count !== null && count !== undefined)
         <span data-sidebar-count class="{{ countClasses }}">{{ count }}</span>
       @endif
-    </a>
+    </StxLink>
   @else
     <button type="button" data-sidebar-item data-label="{{ label }}" class="{{ rowClasses }}" @if(active)data-active="true" aria-current="page"@endif @if(disabled)data-disabled disabled aria-disabled="true"@endif>
       <span class="{{ disclosureClasses }}" @if(expandable)data-sidebar-disclosure role="button" aria-label="Toggle {{ label }}"@endif>

package/dist/{SidebarPinned-tvj28bm0.stx → SidebarPinned-rq05nrtd.stx}

@@ -51,8 +51,8 @@ function onPinnedClick(event) {
   >
     @foreach(items as item)
       @if(item.href)
-        <a
-          href="{{ item.href }}"
+        <StxLink
+          to="{{ item.href }}"
           data-space-pinned-item
           data-pinned-id="{{ item.id }}"
           class="{{ tileClasses }}"
@@ -65,7 +65,7 @@ function onPinnedClick(event) {
           @else
             <span class="{{ item.icon }} h-[20px] w-[20px]" @if(item.iconStyle)style="{{ item.iconStyle }}"@endif aria-hidden="true"></span>
           @endif
-        </a>
+        </StxLink>
       @else
         <button
           type="button"

package/dist/{Signup-hxm5hwkr.stx → Signup-cbncrtvd.stx}

@@ -9,6 +9,14 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
 <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)
@@ -33,7 +41,7 @@ function onSubmit(event) {
 
 <div class="{{ containerClasses }}">
   <div class="sm:mx-auto sm:max-w-md sm:w-full">
-    <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 +50,7 @@ function onSubmit(event) {
     <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
       <form class="space-y-6" @submit="onSubmit($event)">
         <div>
-          <label for="name" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+          <label for="name" class="block text-sm text-fg font-medium leading-6">
             Full Name
           </label>
           <div class="mt-2">
@@ -52,13 +60,13 @@ function onSubmit(event) {
               type="text"
               autocomplete="name"
               required
-              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
             />
           </div>
         </div>
 
         <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">
@@ -68,13 +76,13 @@ function onSubmit(event) {
               type="email"
               autocomplete="email"
               required
-              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
             />
           </div>
         </div>
 
         <div>
-          <label for="confirm_email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+          <label for="confirm_email" class="block text-sm text-fg font-medium leading-6">
             Confirm Email
           </label>
           <div class="mt-2">
@@ -84,13 +92,13 @@ function onSubmit(event) {
               type="email"
               autocomplete="email"
               required
-              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+              class="block w-full border-0 rounded-md p-2 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-teal-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">
@@ -100,7 +108,7 @@ function onSubmit(event) {
               type="password"
               autocomplete="new-password"
               required
-              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+              class="block w-full border-0 rounded-md p-2 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-teal-600 focus:ring-inset dark:bg-blue-gray-700"
             />
           </div>
         </div>
@@ -119,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 signup 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" />
@@ -140,17 +149,18 @@ 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] dark:fill-white" 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

package/dist/{Skeleton-v1pwa8nr.stx → Skeleton-wtwb97xd.stx}

@@ -33,7 +33,7 @@ if (height) {
   styleString += `height: ${typeof height === 'number' ? height + 'px' : height};`
 }
 
-export const skeletonClasses = `bg-gray-200 dark:bg-gray-700 ${baseClasses} ${animationClasses} ${className}`.trim()
+export const skeletonClasses = `bg-surface-sunken ${baseClasses} ${animationClasses} ${className}`.trim()
 export const containerClasses = count > 1 ? 'space-y-3' : ''
 </script>