@stacksjs/components 0.2.176 → 0.2.177

package/src/ui/radio-group/RadioGroup.stx

@@ -3,6 +3,30 @@ 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)}`
@@ -40,11 +64,42 @@ function onSelect(event) {
   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>
 
@@ -56,5 +111,28 @@ defineExpose({ selected, selectValue })
   role="radiogroup"
   @stx:radio-select="onSelect($event)"
 >
-  <slot />
+  @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/src/ui/radio-group/RadioGroupDescription.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/src/ui/radio-group/RadioGroupOption.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/src/ui/select/Select.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/src/ui/sidebar/SidebarItem.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/src/ui/sidebar/SidebarPinned.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/src/ui/skeleton/Skeleton.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>
 

package/src/ui/spinner/Spinner.stx

@@ -16,19 +16,19 @@ const sizeClasses = {
 
 // Color classes
 const colorClasses = {
-  primary: 'text-blue-600 dark:text-blue-500',
+  primary: 'text-info',
   secondary: 'text-purple-600 dark:text-purple-500',
-  success: 'text-green-600 dark:text-green-500',
+  success: 'text-success',
   warning: 'text-yellow-600 dark:text-yellow-500',
-  danger: 'text-red-600 dark:text-red-500',
+  danger: 'text-danger',
   info: 'text-cyan-600 dark:text-cyan-500',
   white: 'text-white',
-  gray: 'text-gray-600 dark:text-gray-400',
+  gray: 'text-fg-muted',
 }
 
 export const containerClasses = `inline-flex flex-col items-center gap-2 ${className}`.trim()
 export const spinnerClasses = `${sizeClasses[size]} ${colorClasses[color]} animate-spin`.trim()
-export const labelClasses = `text-sm font-medium text-gray-700 dark:text-gray-300`.trim()
+export const labelClasses = `text-sm font-medium text-fg-strong`.trim()
 
 // Dots size classes
 const dotsSizeClasses = {
@@ -40,11 +40,11 @@ const dotsSizeClasses = {
 }
 
 const dotsColorClasses = {
-  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',
   white: 'bg-white',
   gray: 'bg-gray-600 dark:bg-gray-400',

package/src/ui/stepper/StepperStep.stx

@@ -29,7 +29,7 @@ function onClick() {
     @click="onClick()"
     class="flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg p-2"
   >
-    <div class="{{ isComplete ? 'bg-blue-600 dark:bg-blue-500' : isCurrent ? 'bg-blue-600 dark:bg-blue-500 ring-4 ring-blue-200 dark:ring-blue-800' : 'bg-neutral-300 dark:bg-neutral-600' }} w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold transition-all">
+    <div class="{{ isComplete ? 'bg-info-solid' : isCurrent ? 'bg-info-solid ring-4 ring-blue-200 dark:ring-blue-800' : 'bg-neutral-300 dark:bg-neutral-600' }} w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold transition-all">
       @if(isComplete)
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
@@ -41,11 +41,11 @@ function onClick() {
 
     @if(label)
       <div class="text-left">
-        <div class="text-sm font-medium {{ isCurrent ? 'text-blue-600 dark:text-blue-400' : 'text-neutral-900 dark:text-white' }}">
+        <div class="text-sm font-medium {{ isCurrent ? 'text-info' : 'text-neutral-900 dark:text-white' }}">
           {{ label }}
         </div>
         @if(description)
-          <div class="text-xs text-neutral-500 dark:text-neutral-400">
+          <div class="text-xs text-fg-soft">
             {{ description }}
           </div>
         @endif

package/src/ui/switch/Switch.stx

@@ -53,7 +53,7 @@ defineExpose({ isChecked, toggle })
 
 <label class="inline-flex items-center gap-3 cursor-pointer">
   @if(label)
-    <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+    <span class="text-sm font-medium text-fg-strong">
       {{ label }}
     </span>
   @endif

package/src/ui/table/Table.stx

@@ -3,7 +3,7 @@ export const className = $props.className || ''
 export const striped = $props.striped || false
 export const hoverable = $props.hoverable !== false
 
-const baseClasses = 'min-w-full divide-y divide-neutral-200 dark:divide-neutral-700'
+const baseClasses = 'min-w-full divide-y divide-line'
 const tableClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/src/ui/table/TableBody.stx

@@ -1,7 +1,7 @@
 <script server>
 export const className = $props.className || ''
 
-const baseClasses = 'bg-white divide-y divide-neutral-200 dark:bg-neutral-900 dark:divide-neutral-700'
+const baseClasses = 'bg-white divide-y divide-line dark:bg-neutral-900'
 const bodyClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/src/ui/table/TableCell.stx

@@ -1,7 +1,7 @@
 <script server>
 export const className = $props.className || ''
 
-const baseClasses = 'px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100'
+const baseClasses = 'px-6 py-4 whitespace-nowrap text-sm text-fg'
 const cellClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/src/ui/table/TableHead.stx

@@ -1,7 +1,7 @@
 <script server>
 export const className = $props.className || ''
 
-const baseClasses = 'bg-neutral-50 dark:bg-neutral-800'
+const baseClasses = 'bg-surface'
 const headClasses = `${baseClasses} ${className}`.trim()
 </script>
 

package/src/ui/table/TableHeader.stx

@@ -2,8 +2,8 @@
 export const className = $props.className || ''
 export const sortable = $props.sortable || false
 
-const baseClasses = 'px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider dark:text-neutral-400'
-const sortableClasses = sortable ? 'cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-200' : ''
+const baseClasses = 'px-6 py-3 text-left text-xs font-medium text-fg-soft uppercase tracking-wider'
+const sortableClasses = sortable ? 'cursor-pointer hover:text-fg-strong' : ''
 export const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
 </script>
 

package/src/ui/table/TableRow.stx

@@ -2,7 +2,7 @@
 export const className = $props.className || ''
 export const hoverable = $props.hoverable !== false
 
-const hoverClasses = hoverable ? 'hover:bg-neutral-50 dark:hover:bg-neutral-800' : ''
+const hoverClasses = hoverable ? 'hover:bg-surface' : ''
 const rowClasses = `${hoverClasses} ${className}`.trim()
 </script>
 

package/src/ui/tabs/Tabs.stx

@@ -24,9 +24,9 @@ const tabListOrientationClasses = {
 }
 
 const variantClasses = {
-  line: 'border-gray-200 dark:border-gray-700',
-  pills: 'gap-2 border-0 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg',
-  enclosed: 'border-gray-200 dark:border-gray-700',
+  line: 'border-line',
+  pills: 'gap-2 border-0 bg-surface-raised p-1 rounded-lg',
+  enclosed: 'border-line',
 }
 
 export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
@@ -97,14 +97,14 @@ function getTabClasses(index) {
   const base = 'px-4 py-2 font-medium text-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
   if (variant === 'line') {
     const border = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
-    return `${base} ${border} ${isActiveTab ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'}`
+    return `${base} ${border} ${isActiveTab ? 'border-blue-500 text-info' : 'border-transparent text-fg-muted hover:text-fg hover:border-line-strong'}`
   }
   if (variant === 'pills') {
-    return `${base} rounded-md ${isActiveTab ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'}`
+    return `${base} rounded-md ${isActiveTab ? 'bg-white dark:bg-gray-700 text-fg shadow-sm' : 'text-fg-muted hover:text-fg'}`
   }
   if (variant === 'enclosed') {
     const borders = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
-    return `${base} ${borders} ${isActiveTab ? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 -mb-px' : 'bg-gray-50 dark:bg-gray-900 border-transparent hover:border-gray-200 dark:hover:border-gray-700'}`
+    return `${base} ${borders} ${isActiveTab ? 'bg-white dark:bg-gray-800 border-line -mb-px' : 'bg-surface border-transparent hover:border-line'}`
   }
   return base
 }

package/src/ui/textarea/Textarea.stx

@@ -19,16 +19,16 @@ const resizeClasses = { none: 'resize-none', vertical: 'resize-y', horizontal: '
 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 px-4 py-2 text-base 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'
 
 export const textareaClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${resizeClasses[resize]} ${className}`.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>
@@ -101,7 +101,7 @@ defineExpose({ value: inputValue })
       @endif
 
       @if(showCount && maxLength)
-        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="charCount()"></p>
+        <p class="text-sm text-fg-soft" x-text="charCount()"></p>
       @endif
     </div>
   @endif

package/src/ui/video/Video.stx

@@ -20,7 +20,7 @@ export const aspectRatioClass = aspectRatio === '16/9' ? 'aspect-video' : aspect
 <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>

package/src/ui/virtual-table/VirtualTable.stx

@@ -10,12 +10,12 @@ export const hoverable = $props.hoverable ?? true
 export const className = $props.className || ''
 
 export const totalHeight = data.length * rowHeight
-export const containerClasses = `border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`.trim()
-export const headerClasses = `bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex`.trim()
-export const headerCellClasses = `px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider`.trim()
+export const containerClasses = `border border-line rounded-lg overflow-hidden ${className}`.trim()
+export const headerClasses = `bg-surface border-b border-line flex`.trim()
+export const headerCellClasses = `px-6 py-3 text-left text-xs font-medium text-fg-soft uppercase tracking-wider`.trim()
 export const bodyClasses = `overflow-auto bg-white dark:bg-gray-900`.trim()
-export const rowClasses = `absolute left-0 right-0 flex border-b border-gray-200 dark:border-gray-700 ${hoverable ? 'hover:bg-gray-50 dark:hover:bg-gray-800' : ''}`.trim()
-export const cellClasses = `px-6 py-4 text-sm text-gray-900 dark:text-gray-100`.trim()
+export const rowClasses = `absolute left-0 right-0 flex border-b border-line ${hoverable ? 'hover:bg-surface' : ''}`.trim()
+export const cellClasses = `px-6 py-4 text-sm text-fg`.trim()
 </script>
 
 <script client>
@@ -86,7 +86,7 @@ defineExpose({ scrollTop })
       <div
         :for="entry in visibleRows()"
         :key="entry.index"
-        :class="entry.striped ? '{{ rowClasses }} bg-gray-50 dark:bg-gray-800' : '{{ rowClasses }}'"
+        :class="entry.striped ? '{{ rowClasses }} bg-surface' : '{{ rowClasses }}'"
         :style="`top: ${entry.top}px; height: {{ rowHeight }}px`"
         :data-index="entry.index"
       >

package/dist/RadioGroup-qxmnm3xm.stx

@@ -1,60 +0,0 @@
-<script server>
-export const value = $props.value
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-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)
-}
-
-onMount(() => {
-  rootEl = document.querySelector(`[data-radio-group-id="${radioGroupInstanceId}"]`)
-  syncOptionStates()
-})
-
-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)"
->
-  <slot />
-</component>