@stacksjs/components 0.2.63 → 0.2.66

package/dist/ui/accordion/Accordion.stx

@@ -1,3 +1,10 @@
+// Two modes (see stacksjs/stx#1703):
+//   1. Legacy prop API — pass `items={[{title, content}, …]}` for simple
+//      string-content accordions (kept for backward compatibility with
+//      existing visual snapshots and consumers).
+//   2. Slot API — drop `<AccordionItem title="…">` children for arbitrary
+//      content. Each AccordionItem renders its own header + content panel;
+//      this parent attaches click handlers and toggles content visibility.
 export declare const items: unknown;
 export declare const allowMultiple: unknown;
 export declare const defaultOpen: unknown;
@@ -5,4 +12,5 @@ export declare const className: unknown;
 export declare const accordionClasses: unknown;
 export declare const headerClasses: unknown;
 export declare const iconClasses: unknown;
-export declare const contentClasses: () => unknown;
+export declare const contentClasses: unknown;
+export declare const hasPropItems: (...args: any[]) => any;

package/dist/ui/accordion/AccordionItem.stx

@@ -0,0 +1,7 @@
+// Slot wrapper that the parent <Accordion> discovers and wires up on mount.
+// Renders its own header button + content panel; the parent attaches click
+// handlers and toggles the content panel's `hidden` attribute as openItems
+// changes. Hard-coded styling here matches the legacy prop-mode markup so
+// snapshots compare cleanly in both modes. See stacksjs/stx#1703.
+export declare const title: unknown;
+export declare const className: unknown;

package/dist/ui/accordion/index.d.ts

@@ -1,12 +1,41 @@
+/**
+ * Legacy prop API — pass `items` as an array of `{ title, content }` where
+ * `content` is a HTML string. Kept for backward compatibility; prefer the
+ * slot API below for any accordion whose content needs to be a component tree.
+ *
+ * See stacksjs/stx#1703.
+ */
 export declare interface AccordionItem {
   title: string
   content: string
 }
 export declare interface AccordionProps {
-  items: AccordionItem[]
+  items?: AccordionItem[]
   allowMultiple?: boolean
   defaultOpen?: number[]
   onChange?: (openItems: number[]) => void
   className?: string
 }
+/**
+ * Slot API — wrap each section's content in `<AccordionItem title="…">`.
+ * Each `<AccordionItem>` renders its own header + content panel; the parent
+ * `<Accordion>` attaches click handlers and toggles the content visibility.
+ *
+ * @example
+ * ```html
+ * <Accordion allowMultiple>
+ *   <AccordionItem title="Profile">
+ *     <ProfileEditor :user="user()" />
+ *   </AccordionItem>
+ *   <AccordionItem title="Zones">
+ *     <ZonesEditor />
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare interface AccordionItemProps {
+  title: string
+  className?: string
+}
 export { default as Accordion } from './Accordion.stx';
+export { default as AccordionItem } from './AccordionItem.stx';

package/dist/ui/input/NumberInput.stx

@@ -15,4 +15,4 @@ export declare const className: unknown;
 export declare const inputClassName: unknown;
 export declare const inputClasses: unknown;
 export declare const labelClasses: unknown;
-export declare const helperClasses: unknown;
+export declare const helperClasses: () => unknown;

package/dist/ui/input/TextInput.stx

@@ -18,4 +18,4 @@ export declare const inputClasses: unknown;
 export declare const labelClasses: unknown;
 export declare const helperClasses: unknown;
 export declare const iconClasses: unknown;
-export declare const inputId: () => unknown;
+export declare const inputId: (...args: any[]) => any;

package/dist/ui/notification/Notification.stx

@@ -1,8 +1,10 @@
-export declare const show: unknown;
-export declare const title: unknown;
-export declare const message: unknown;
-export declare const type: unknown;
-export declare const position: unknown;
-export declare const duration: unknown;
-export declare const className: unknown;
-export declare const notificationClasses: () => unknown;
+// Initial defaults captured at render time. The client script wraps these
+// in signals so consumers can mutate them after mount (fetch-then-toast,
+// auto-dismiss, etc.). See stacksjs/stx#1692.
+export declare const initialShow: unknown;
+export declare const initialTitle: unknown;
+export declare const initialMessage: unknown;
+export declare const initialType: unknown;
+export declare const initialPosition: unknown;
+export declare const initialDuration: unknown;
+export declare const className: (...args: any[]) => any;

package/dist/ui/select/Select.stx

@@ -11,4 +11,4 @@ export declare const className: unknown;
 export declare const selectClasses: unknown;
 export declare const labelClasses: unknown;
 export declare const helperClasses: unknown;
-export declare const selectId: unknown;
+export declare const selectId: () => unknown;

package/dist/ui/tabs/TabPanel.stx

@@ -0,0 +1,9 @@
+// Slot wrapper that the parent <Tabs> discovers via DOM walk. The parent
+// reads `data-label` (and optional `data-icon`) to build the tab list and
+// toggles the `hidden` attribute as the active tab changes. Hidden by
+// default — the parent flips the active one visible after mount. See
+// stacksjs/stx#1703.
+export declare const label: unknown;
+export declare const icon: unknown;
+export declare const className: unknown;
+export declare const panelClasses: unknown;

package/dist/ui/tabs/Tabs.stx

@@ -1,3 +1,11 @@
+// Two modes (see stacksjs/stx#1703):
+//   1. Legacy prop API — pass `tabs={[{label, content, icon}, …]}` for
+//      simple string-content tabs (kept for backward compatibility with
+//      existing visual snapshots and consumers).
+//   2. Slot API — drop `<TabPanel label="…">` children for arbitrary
+//      content (components, forms, tables, etc.). The parent enumerates
+//      [data-stx-tab-panel] descendants on mount and builds the tab list
+//      dynamically.
 export declare const tabs: unknown;
 export declare const defaultTab: unknown;
 export declare const orientation: unknown;
@@ -6,3 +14,135 @@ export declare const className: unknown;
 export declare const containerClasses: unknown;
 export declare const tabListClasses: unknown;
 export declare const tabPanelClasses: unknown;
+// True when the parent passes a non-empty `tabs` array — switches to the
+// legacy render path so existing snapshots stay byte-identical.
+export declare const hasPropTabs: activeTab changes.
+// Prop mode is handled inline by the @foreach loop's :show binding below.
+effect(() => {
+  if (hasPropTabs) return
+  const panels = findOwnPanels()
+  const idx = activeTab()
+  panels.forEach((p, i) => {
+    if (i === idx) p.removeAttribute('hidden')
+    else p.setAttribute('hidden', '')
+  })
+})
+
+function selectTab(index) {
+  activeTab.set(index)
+  const list = discoveredTabs()
+  emit('change', { index, tab: list[index] })
+}
+
+function isActive(index) {
+  return activeTab() === index
+}
+
+function getTabClasses(index) {
+  const isActiveTab = isActive(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'}`
+  }
+  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'}`
+  }
+  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
+}
+
+function onTabKey(event, index) {
+  const tabCount = discoveredTabs().length
+  let next = index
+  if (orientation === 'horizontal') {
+    if (event.key === 'ArrowRight') { event.preventDefault(); next = (index + 1) % tabCount }
+    else if (event.key === 'ArrowLeft') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
+  }
+  else {
+    if (event.key === 'ArrowDown') { event.preventDefault(); next = (index + 1) % tabCount }
+    else if (event.key === 'ArrowUp') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
+  }
+  if (event.key === 'Home') { event.preventDefault(); next = 0 }
+  else if (event.key === 'End') { event.preventDefault(); next = tabCount - 1 }
+  if (next !== index) {
+    selectTab(next)
+    document.getElementById(`tab-${next}`)?.focus()
+  }
+}
+
+defineExpose({ activeTab, selectTab })
+</script>
+
+<div x-ref="containerRef" data-stx-tabs class="{{ containerClasses }}">
+  <div
+    class="{{ tabListClasses }}"
+    role="tablist"
+    aria-orientation="{{ orientation }}"
+  >
+    @if(hasPropTabs)
+      {{-- Legacy mode: server-side iterate the prop tabs array. Buttons --}}
+      {{-- get static class names so existing visual snapshots stay      --}}
+      {{-- byte-identical.                                                 --}}
+      @foreach(tab in tabs)
+        <button
+          type="button"
+          :class="getTabClasses({{ $loop.index }})"
+          role="tab"
+          :aria-selected="isActive({{ $loop.index }}) ? 'true' : 'false'"
+          aria-controls="tab-panel-{{ $loop.index }}"
+          id="tab-{{ $loop.index }}"
+          :tabindex="isActive({{ $loop.index }}) ? '0' : '-1'"
+          @click="selectTab({{ $loop.index }})"
+          @keydown="onTabKey($event, {{ $loop.index }})"
+        >
+          @if(tab.icon)
+            <span class="inline-flex items-center gap-2">
+              <span x-html="{!! JSON.stringify(tab.icon) !!}"></span>
+              <span>{{ tab.label }}</span>
+            </span>
+          @else
+            {{ tab.label }}
+          @endif
+        </button>
+      @endforeach
+    @else
+      {{-- Slot mode: render the tab list dynamically from --}}
+      {{-- discoveredTabs() which is populated in onMount. --}}
+      <button
+        :for="(tab, idx) in discoveredTabs()"
+        :key="idx"
+        type="button"
+        x-class="getTabClasses(idx)"
+        role="tab"
+        :aria-selected="isActive(idx) ? 'true' : 'false'"
+        :tabindex="isActive(idx) ? 0 : -1"
+        @click="selectTab(idx)"
+        @keydown="onTabKey($event, idx)"
+      >
+        <span :if="tab.icon" class="inline-flex items-center gap-2" x-html="tab.icon"></span>
+        <span :text="tab.label"></span>
+      </button>
+    @endif
+  </div>
+
+  @if(hasPropTabs)
+    @foreach(tab in tabs)
+      <div
+        :show="isActive({{ $loop.index }})"
+        id="tab-panel-{{ $loop.index }}"
+        class="{{ tabPanelClasses }}"
+        role="tabpanel"
+        aria-labelledby="tab-{{ $loop.index }}"
+        tabindex="0"
+      >
+        {!! tab.content !!}
+      </div>
+    @endforeach
+  @else
+    <slot />
+  @endif
+</div>;

package/dist/ui/tabs/index.d.ts

@@ -1,14 +1,45 @@
+/**
+ * Legacy prop API — pass `tabs` as an array of `{ label, content, icon? }`
+ * where `content` is a HTML string. Kept for backward compatibility; prefer
+ * the slot API below for any tab whose content needs to be a component tree.
+ *
+ * See stacksjs/stx#1703.
+ */
 export declare interface Tab {
   label: string
   content: string
   icon?: string
 }
 export declare interface TabsProps {
-  tabs: Tab[]
+  tabs?: Tab[]
   defaultTab?: number
   orientation?: 'horizontal' | 'vertical'
   variant?: 'line' | 'pills' | 'enclosed'
   onChange?: (index: number, tab: Tab) => void
   className?: string
 }
+/**
+ * Slot API — wrap each tab's content in a `<TabPanel label="…">`. The parent
+ * `<Tabs>` discovers panels on mount via `[data-stx-tab-panel]` data
+ * attributes, builds the tab list dynamically, and toggles each panel's
+ * `hidden` attribute as the active tab changes.
+ *
+ * @example
+ * ```html
+ * <Tabs defaultTab="0" variant="pills">
+ *   <TabPanel label="Drivers">
+ *     <DriversTable :drivers="drivers()" />
+ *   </TabPanel>
+ *   <TabPanel label="Notifications" icon="bell">
+ *     <NotificationsTable />
+ *   </TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare interface TabPanelProps {
+  label: string
+  icon?: string
+  className?: string
+}
+export { default as TabPanel } from './TabPanel.stx';
 export { default as Tabs } from './Tabs.stx';

package/dist/ui/textarea/Textarea.stx

@@ -15,4 +15,4 @@ export declare const resize: unknown;
 export declare const className: unknown;
 export declare const textareaClasses: unknown;
 export declare const labelClasses: unknown;
-export declare const helperClasses: () => unknown;
+export declare const helperClasses: (...args: any[]) => any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.63",
+  "version": "0.2.66",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -58,8 +58,8 @@
   },
   "dependencies": {
     "@cwcss/crosswind": "^0.2.0",
-    "@stacksjs/stx": "0.2.63",
-    "bun-plugin-stx": "0.2.63",
+    "@stacksjs/stx": "0.2.66",
+    "bun-plugin-stx": "0.2.66",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {

package/src/ui/accordion/Accordion.stx

@@ -1,4 +1,11 @@
 <script server>
+// Two modes (see stacksjs/stx#1703):
+//   1. Legacy prop API — pass `items={[{title, content}, …]}` for simple
+//      string-content accordions (kept for backward compatibility with
+//      existing visual snapshots and consumers).
+//   2. Slot API — drop `<AccordionItem title="…">` children for arbitrary
+//      content. Each AccordionItem renders its own header + content panel;
+//      this parent attaches click handlers and toggles content visibility.
 export const items = $props.items || []
 export const allowMultiple = $props.allowMultiple || false
 export const defaultOpen = $props.defaultOpen || []
@@ -8,13 +15,56 @@ export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 b
 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 hasPropItems = Array.isArray(items) && items.length > 0
 </script>
 
 <script client>
 const emit = defineEmits()
 const allowMultiple = {{ allowMultiple }}
+const hasPropItems = {{ hasPropItems }}
+const containerRef = useRef()
 const openItems = state({{ defaultOpen }})
 
+function findOwnItems() {
+  const root = containerRef.value
+  if (!root) return []
+  return Array.from(root.querySelectorAll('[data-stx-accordion-item]'))
+    .filter(item => item.closest('[data-stx-accordion]') === root)
+}
+
+onMount(() => {
+  if (hasPropItems) return  // legacy mode: server-rendered, no wiring needed
+  const items = findOwnItems()
+  items.forEach((item, idx) => {
+    const header = item.querySelector(':scope > [data-stx-accordion-header]')
+    if (header && !header.__stx_wired) {
+      header.__stx_wired = true
+      header.addEventListener('click', () => toggleItem(idx))
+      header.addEventListener('keydown', (e) => onHeaderKey(e, idx))
+    }
+  })
+})
+
+// Sync the open state into the DOM: show/hide content panels, update
+// aria-expanded on headers, rotate chevrons.
+effect(() => {
+  if (hasPropItems) return
+  const items = findOwnItems()
+  const open = openItems()
+  items.forEach((item, idx) => {
+    const isOpenItem = open.includes(idx)
+    const header = item.querySelector(':scope > [data-stx-accordion-header]')
+    const content = item.querySelector(':scope > [data-stx-accordion-content]')
+    const chevron = item.querySelector(':scope > [data-stx-accordion-header] [data-stx-accordion-chevron]')
+    if (header) header.setAttribute('aria-expanded', isOpenItem ? 'true' : 'false')
+    if (content) {
+      if (isOpenItem) content.removeAttribute('hidden')
+      else content.setAttribute('hidden', '')
+    }
+    if (chevron) chevron.style.transform = `rotate(${isOpenItem ? 180 : 0}deg)`
+  })
+})
+
 function toggleItem(index) {
   const cur = openItems()
   if (allowMultiple) {
@@ -31,7 +81,9 @@ function isOpen(index) {
 }
 
 function onHeaderKey(event, index) {
-  const buttons = event.currentTarget.closest('[role="region"]').querySelectorAll('button[data-accordion-header]')
+  const root = containerRef.value
+  if (!root) return
+  const buttons = root.querySelectorAll('button[data-stx-accordion-header], button[data-accordion-header]')
   if (event.key === 'ArrowDown') {
     event.preventDefault()
     buttons[index + 1]?.focus()
@@ -49,40 +101,46 @@ function onHeaderKey(event, index) {
     buttons[buttons.length - 1]?.focus()
   }
 }
+
+defineExpose({ openItems, toggleItem })
 </script>
 
-<div class="{{ accordionClasses }}" role="region">
-  @foreach(item in items)
-    <div>
-      <button
-        type="button"
-        data-accordion-header
-        class="{{ headerClasses }}"
-        @click="toggleItem({{ $loop.index }})"
-        @keydown="onHeaderKey($event, {{ $loop.index }})"
-        :aria-expanded="isOpen({{ $loop.index }}) ? 'true' : 'false'"
-        aria-controls="accordion-content-{{ $loop.index }}"
-      >
-        <span>{{ item.title }}</span>
-        <svg
-          class="{{ iconClasses }}"
-          :style="`transform: rotate(${isOpen({{ $loop.index }}) ? 180 : 0}deg)`"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
+<div x-ref="containerRef" data-stx-accordion class="{{ accordionClasses }}" role="region">
+  @if(hasPropItems)
+    @foreach(item in items)
+      <div>
+        <button
+          type="button"
+          data-accordion-header
+          class="{{ headerClasses }}"
+          @click="toggleItem({{ $loop.index }})"
+          @keydown="onHeaderKey($event, {{ $loop.index }})"
+          :aria-expanded="isOpen({{ $loop.index }}) ? 'true' : 'false'"
+          aria-controls="accordion-content-{{ $loop.index }}"
         >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-        </svg>
-      </button>
+          <span>{{ item.title }}</span>
+          <svg
+            class="{{ iconClasses }}"
+            :style="`transform: rotate(${isOpen({{ $loop.index }}) ? 180 : 0}deg)`"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
 
-      <div
-        :show="isOpen({{ $loop.index }})"
-        id="accordion-content-{{ $loop.index }}"
-        class="{{ contentClasses }}"
-        role="region"
-      >
-        {!! item.content !!}
+        <div
+          :show="isOpen({{ $loop.index }})"
+          id="accordion-content-{{ $loop.index }}"
+          class="{{ contentClasses }}"
+          role="region"
+        >
+          {!! item.content !!}
+        </div>
       </div>
-    </div>
-  @endforeach
+    @endforeach
+  @else
+    <slot />
+  @endif
 </div>

package/src/ui/accordion/AccordionItem.stx

@@ -0,0 +1,37 @@
+<script server>
+// Slot wrapper that the parent <Accordion> discovers and wires up on mount.
+// Renders its own header button + content panel; the parent attaches click
+// handlers and toggles the content panel's `hidden` attribute as openItems
+// changes. Hard-coded styling here matches the legacy prop-mode markup so
+// snapshots compare cleanly in both modes. See stacksjs/stx#1703.
+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'
+</script>
+
+<div data-stx-accordion-item data-title="{{ title }}" class="{{ className }}">
+  <button
+    type="button"
+    data-stx-accordion-header
+    data-accordion-header
+    class="{{ headerClasses }}"
+    aria-expanded="false"
+  >
+    <span>{{ title }}</span>
+    <svg
+      data-stx-accordion-chevron
+      class="{{ iconClasses }}"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+    </svg>
+  </button>
+  <div data-stx-accordion-content class="{{ contentClasses }}" role="region" hidden>
+    <slot />
+  </div>
+</div>

package/src/ui/accordion/index.ts

@@ -1,14 +1,45 @@
 export { default as Accordion } from './Accordion.stx'
+export { default as AccordionItem } from './AccordionItem.stx'
 
+/**
+ * Legacy prop API — pass `items` as an array of `{ title, content }` where
+ * `content` is a HTML string. Kept for backward compatibility; prefer the
+ * slot API below for any accordion whose content needs to be a component tree.
+ *
+ * See stacksjs/stx#1703.
+ */
 export interface AccordionItem {
   title: string
   content: string
 }
 
 export interface AccordionProps {
-  items: AccordionItem[]
+  /** Legacy: array of item definitions with string content. */
+  items?: AccordionItem[]
   allowMultiple?: boolean
   defaultOpen?: number[]
   onChange?: (openItems: number[]) => void
   className?: string
 }
+
+/**
+ * Slot API — wrap each section's content in `<AccordionItem title="…">`.
+ * Each `<AccordionItem>` renders its own header + content panel; the parent
+ * `<Accordion>` attaches click handlers and toggles the content visibility.
+ *
+ * @example
+ * ```html
+ * <Accordion allowMultiple>
+ *   <AccordionItem title="Profile">
+ *     <ProfileEditor :user="user()" />
+ *   </AccordionItem>
+ *   <AccordionItem title="Zones">
+ *     <ZonesEditor />
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export interface AccordionItemProps {
+  title: string
+  className?: string
+}

package/src/ui/checkbox/Checkbox.stx

@@ -26,7 +26,9 @@ export const inputId = `checkbox-${value || label}`
 const emit = defineEmits()
 const isDisabled = {{ disabled }}
 const isIndeterminate = {{ indeterminate }}
-const isChecked = state({{ checked }})
+// Reactive prop binding so the parent can drive `checked` via signals.
+// See stacksjs/stx#1704.
+const isChecked = useReactiveProp('checked', {{ checked }})
 
 function onInputChange(event) {
   if (isDisabled) {

package/src/ui/dialog/Dialog.stx

@@ -8,7 +8,11 @@ export const dialogClasses = `${baseClasses} ${className}`.trim()
 
 <script client>
 const emit = defineEmits()
-const isOpen = state({{ open }})
+// useReactiveProp wires `:open="parentSignal()"` from the parent into our
+// local `isOpen` signal — when the parent's signal changes, bindAttr
+// updates the root's `open` attribute, our MutationObserver picks it up,
+// and isOpen flips. See stacksjs/stx#1704.
+const isOpen = useReactiveProp('open', {{ open }})
 
 function close() {
   isOpen.set(false)

package/src/ui/drawer/Drawer.stx

@@ -32,7 +32,10 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
 
 <script client>
 const emit = defineEmits()
-const isOpen = state({{ open }})
+// useReactiveProp lets the parent drive `open` via signals
+// (`:open="drawerOpen()"`) instead of the prop being captured once.
+// See stacksjs/stx#1704.
+const isOpen = useReactiveProp('open', {{ open }})
 
 function close() {
   isOpen.set(false)

package/src/ui/input/NumberInput.stx

@@ -37,7 +37,8 @@ const emit = defineEmits()
 const stepSize = {{ step }}
 const minVal = {{ min === undefined ? 'undefined' : min }}
 const maxVal = {{ max === undefined ? 'undefined' : max }}
-const inputValue = state({{ value }})
+// Reactive prop binding — parent can drive value via signals. See #1704.
+const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null || v === '' ? '' : String(v) })
 
 function onInput(event) {
   inputValue.set(event.target.value)

package/src/ui/input/PasswordInput.stx

@@ -34,7 +34,8 @@ export const iconClasses = iconSizeClasses[size]
 <script client>
 const emit = defineEmits()
 const showPassword = state(false)
-const inputValue = state({{ value }})
+// Reactive prop binding — parent can drive value via signals. See #1704.
+const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
 
 function onInput(event) {
   inputValue.set(event.target.value)

package/src/ui/input/TextInput.stx

@@ -39,7 +39,10 @@ export const inputId = `input-${label}`
 
 <script client>
 const emit = defineEmits()
-const inputValue = state({{ value }})
+// Reactive prop binding so the parent can drive `value` via signals.
+// Parent listens to @input to push user changes back into its signal.
+// See stacksjs/stx#1704.
+const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
 
 function onInput(event) {
   inputValue.set(event.target.value)