@stacksjs/components 0.2.54 → 0.2.66

package/dist/{SidebarHeader-7v174a9c.stx → SidebarHeader-ywpmx14d.stx}

@@ -8,6 +8,8 @@ export const searchPlaceholder = $props.searchPlaceholder || 'Search...'
 export const searchValue = $props.searchValue || ''
 export const collapsed = $props.collapsed ?? false
 export const variant = $props.variant || 'tahoe'
+export const showWindowControls = $props.showWindowControls ?? (variant === 'desktop' ? 'auto' : false)
+export const showNavigationControls = $props.showNavigationControls ?? variant === 'desktop'
 
 const headerVariants = {
   workspace: {
@@ -19,10 +21,13 @@ const headerVariants = {
     searchInput: 'w-full rounded-[16px] border border-zinc-200/70 bg-white/70 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-300/80 dark:border-white/10 dark:bg-white/10 dark:text-white',
   },
   desktop: {
-    titlebar: 'h-16 flex items-center justify-between px-4',
+    titlebar: 'h-14 flex items-center gap-5 px-5 border-b border-black/5 dark:border-white/10',
+    chrome: 'flex shrink-0 items-center justify-start gap-5 min-h-7',
+    trafficLight: 'h-3.5 w-3.5 rounded-full shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]',
+    navButton: 'inline-flex h-7 w-7 items-center justify-center rounded-full text-zinc-500/80 transition-colors hover:bg-white/35 hover:text-zinc-900 disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-zinc-500/80 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white',
     logo: 'w-9 h-9 rounded-[12px] bg-black/80 text-white flex items-center justify-center font-semibold text-sm shadow-sm dark:bg-white/14',
-    title: 'text-[17px] font-semibold text-zinc-950 dark:text-white truncate',
-    subtitle: 'text-sm text-zinc-500 dark:text-zinc-400 truncate',
+    title: 'text-[15px] leading-[22px] font-medium text-zinc-950 dark:text-white truncate',
+    subtitle: 'text-xs text-zinc-500 dark:text-zinc-400 truncate',
     searchWrap: 'px-4 pb-4',
     searchInput: 'w-full rounded-[16px] border border-white/40 bg-white/45 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-500 shadow-sm focus:outline-none focus:ring-2 focus:ring-white/70 dark:border-white/10 dark:bg-white/10 dark:text-white',
   },
@@ -38,24 +43,96 @@ const headerVariants = {
 
 const headerStyle = headerVariants[variant] || headerVariants.default
 export const titlebarClasses = headerStyle.titlebar
+export const chromeClasses = headerStyle.chrome || ''
+export const trafficLightClasses = headerStyle.trafficLight || ''
+export const navButtonClasses = headerStyle.navButton || ''
 export const logoClasses = headerStyle.logo
 export const titleClasses = headerStyle.title
 export const subtitleClasses = headerStyle.subtitle
 export const searchWrapClasses = headerStyle.searchWrap
 export const searchInputClasses = headerStyle.searchInput
+export const hasDesktopChrome = variant === 'desktop' && (showWindowControls || showNavigationControls)
+export const windowControlsClasses = showWindowControls === 'auto' ? 'hidden items-center gap-2' : 'flex items-center gap-2'
 </script>
 
 <script client>
 const emit = defineEmits()
 
+function isCraftRuntime() {
+  return window.__craftNativeSidebar === true
+    || window.craft?.__craft_bridge_loaded === true
+    || !!window.craft?.window
+    || !!window.webkit?.messageHandlers?.craft
+}
+
+function usesCustomWindowControls() {
+  return window.__craftCustomWindowControls === true
+    || document.documentElement.classList.contains('has-custom-window-controls')
+    || document.body?.dataset?.customWindowControls === 'true'
+}
+
+function syncWindowControls() {
+  document.querySelectorAll('[data-stx-native-window-controls]').forEach((element) => {
+    const show = element.dataset.stxNativeWindowControls === 'auto'
+      ? isCraftRuntime() && usesCustomWindowControls()
+      : true
+    element.classList.toggle('hidden', !show)
+    element.classList.toggle('flex', show)
+  })
+}
+
 function onSearchInput(event) {
   emit('search', event.target.value)
 }
+
+function goBack() {
+  window.history.back()
+  emit('back')
+}
+
+function goForward() {
+  window.history.forward()
+  emit('forward')
+}
+
+onMount(() => {
+  syncWindowControls()
+  window.addEventListener('craft:ready', syncWindowControls)
+  window.addEventListener('stx:load', syncWindowControls)
+
+  return () => {
+    window.removeEventListener('craft:ready', syncWindowControls)
+    window.removeEventListener('stx:load', syncWindowControls)
+  }
+})
 </script>
 
 <div class="flex-shrink-0">
   <!-- Title bar area -->
   <div class="{{ titlebarClasses }}">
+    @if(hasDesktopChrome)
+      <div class="{{ chromeClasses }}" data-stx-sidebar-web-chrome>
+        @if(showWindowControls)
+          <div class="{{ windowControlsClasses }}" aria-hidden="true" data-stx-native-window-controls="{{ showWindowControls === 'auto' ? 'auto' : 'always' }}">
+            <span class="{{ trafficLightClasses }} bg-[#ff5f57]"></span>
+            <span class="{{ trafficLightClasses }} bg-[#ffbd2e]"></span>
+            <span class="{{ trafficLightClasses }} bg-[#28c840]"></span>
+          </div>
+        @endif
+
+        @if(showNavigationControls)
+          <div class="flex items-center gap-2">
+            <button type="button" class="{{ navButtonClasses }}" @click="goBack()" aria-label="Go back">
+              <span class="h-5 w-5 i-hugeicons-arrow-left-02" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="{{ navButtonClasses }}" @click="goForward()" aria-label="Go forward">
+              <span class="h-5 w-5 i-hugeicons-arrow-right-02" aria-hidden="true"></span>
+            </button>
+          </div>
+        @endif
+      </div>
+    @endif
+
     @if(!collapsed)
       <div class="flex items-center gap-3 min-w-0">
         <!-- Logo -->

package/dist/{SidebarItem-3y3e8g2t.stx → SidebarItem-h53sgqzz.stx}

@@ -11,20 +11,20 @@ export const variant = $props.variant || 'tahoe'
 
 const itemVariants = {
   workspace: {
-    base: 'flex w-full items-center gap-3 rounded-[18px] px-4 py-3 text-[17px] leading-tight transition-colors duration-150',
+    base: 'flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2 text-[14px] leading-tight transition-colors duration-150',
     indent: '',
     active: 'bg-[#e7e7e5] text-zinc-950',
     inactive: 'text-zinc-700 hover:bg-[#ececea] hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
     icon: active ? 'text-zinc-900 dark:text-zinc-100' : 'text-zinc-500 dark:text-zinc-500',
-    badge: 'ml-auto rounded-full bg-white/70 px-2.5 py-0.5 text-[13px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
+    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/70 px-1.5 text-[11px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
   },
   desktop: {
-    base: 'flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2.5 text-[15px] leading-tight transition-colors duration-150',
+    base: 'flex w-full items-center gap-3 rounded-[14px] px-3 py-1.5 text-[13.5px] leading-tight transition-colors duration-150',
     indent: '',
-    active: 'bg-white/55 text-zinc-950 shadow-sm ring-1 ring-white/50 dark:bg-white/12 dark:text-white dark:ring-white/10',
-    inactive: 'text-zinc-700 hover:bg-white/34 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
-    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400',
-    badge: 'ml-auto rounded-full bg-white/55 px-2.5 py-0.5 text-xs font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
+    active: 'bg-[#e8e8e6]/90 text-zinc-950 dark:bg-white/12 dark:text-white',
+    inactive: 'text-zinc-700 hover:bg-white/38 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400',
+    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/72 px-1.5 text-[11px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
   },
   default: {
     base: 'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px] transition-all duration-150',
@@ -41,7 +41,7 @@ const baseItemList = [itemStyle.base, itemStyle.indent]
 const stateClasses = disabled ? 'opacity-50 cursor-not-allowed' : active ? itemStyle.active : itemStyle.inactive
 
 export const itemClasses = [...baseItemList, stateClasses].filter(Boolean).join(' ')
-export const iconClasses = `${icon} w-5 h-5 flex-shrink-0 ${itemStyle.icon}`
+export const iconClasses = `${icon} h-[18px] w-[18px] flex-shrink-0 ${itemStyle.icon}`
 export const badgeClasses = itemStyle.badge
 </script>
 

package/dist/{SidebarSection-z5ey6awe.stx → SidebarSection-g195cb4f.stx}

@@ -14,7 +14,7 @@ const headerVariants = {
     hover: 'hover:text-zinc-600 dark:hover:text-zinc-300 cursor-pointer',
   },
   desktop: {
-    base: 'w-full flex items-center gap-2.5 px-3.5 pb-2 pt-4 rounded-[14px] text-left transition-colors duration-150 text-[12px] font-semibold uppercase tracking-[0.10em] text-zinc-500/80 dark:text-zinc-400/80',
+    base: 'w-full flex items-center gap-2.5 px-3 pb-1.5 pt-3 rounded-[14px] text-left transition-colors duration-150 text-[12px] font-semibold uppercase tracking-[0.10em] text-zinc-500/80 dark:text-zinc-400/80',
     hover: 'hover:bg-white/25 dark:hover:bg-white/10 cursor-pointer',
   },
   default: {
@@ -26,7 +26,7 @@ const headerVariants = {
 const headerStyle = headerVariants[variant] || headerVariants.default
 const headerClasses = [headerStyle.base, collapsible ? headerStyle.hover : ''].filter(Boolean).join(' ')
 export const headerClassesValue = headerClasses
-export const sectionClasses = variant === 'workspace' || variant === 'desktop' ? 'py-1.5' : 'py-1'
+export const sectionClasses = variant === 'workspace' ? 'py-1.5' : variant === 'desktop' ? 'py-1' : 'py-1'
 export const groupClasses = variant === 'workspace' || variant === 'desktop' ? 'space-y-1 overflow-hidden' : 'mt-1 space-y-0.5 overflow-hidden'
 export const labelClasses = variant === 'workspace' || variant === 'desktop'
   ? 'flex-1 truncate'
@@ -37,7 +37,8 @@ export const labelClasses = variant === 'workspace' || variant === 'desktop'
 const emit = defineEmits()
 const sectionId = {{ id }}
 const collapsibleProp = {{ collapsible }}
-const isExpanded = state({{ expanded }})
+// Reactive prop binding — parent can drive `expanded` via signals. See #1704.
+const isExpanded = useReactiveProp('expanded', {{ expanded }})
 
 function onHeaderClick() {
   if (!collapsibleProp) return

package/dist/{Switch-r5t5w04w.stx → Switch-p1bcr9ks.stx}

@@ -26,7 +26,9 @@ const trackBase = {{ trackBaseClasses }}
 const trackDisabled = {{ trackDisabledClasses }}
 const thumbBase = {{ thumbBaseClasses }}
 const extraClass = {{ className }}
-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 toggle() {
   if (isDisabled) return

package/dist/TabPanel-5htevsq6.stx

@@ -0,0 +1,25 @@
+<script server>
+// 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 const label = $props.label || ''
+export const icon = $props.icon || ''
+export const className = $props.className || ''
+
+const baseClasses = 'p-4 focus:outline-none'
+export const panelClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<div
+  data-stx-tab-panel
+  data-label="{{ label }}"
+  data-icon="{{ icon }}"
+  class="{{ panelClasses }}"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <slot />
+</div>

package/dist/Tabs-79brys99.stx

@@ -0,0 +1,202 @@
+<script server>
+// 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 const tabs = $props.tabs || []
+export const defaultTab = $props.defaultTab || 0
+export const orientation = $props.orientation || 'horizontal'
+export const variant = $props.variant || 'line'
+export const className = $props.className || ''
+
+const orientationClasses = {
+  horizontal: 'flex-col',
+  vertical: 'flex-row',
+}
+
+const tabListOrientationClasses = {
+  horizontal: 'flex-row border-b',
+  vertical: 'flex-col border-r',
+}
+
+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',
+}
+
+export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
+export const tabListClasses = `flex ${tabListOrientationClasses[orientation]} ${variantClasses[variant]}`.trim()
+export const tabPanelClasses = `p-4 focus:outline-none`.trim()
+// True when the parent passes a non-empty `tabs` array — switches to the
+// legacy render path so existing snapshots stay byte-identical.
+export const hasPropTabs = Array.isArray(tabs) && tabs.length > 0
+</script>
+
+<script client>
+const emit = defineEmits()
+const tabs = {{ tabs }}
+const variant = {{ variant }}
+const orientation = {{ orientation }}
+const hasPropTabs = {{ hasPropTabs }}
+const containerRef = useRef()
+// In slot mode, `discoveredTabs` is populated from child <TabPanel> data
+// attributes on mount. In prop mode, it mirrors the `tabs` prop so the
+// rendering loop works the same in both modes.
+const discoveredTabs = state(hasPropTabs ? tabs : [])
+const activeTab = state({{ defaultTab }})
+
+// Walk only direct descendants of THIS container (not nested Tabs').
+function findOwnPanels() {
+  const root = containerRef.value
+  if (!root) return []
+  // Closest ancestor with data-stx-tabs must be this container's root —
+  // protects against nested <Tabs> contamination.
+  return Array.from(root.querySelectorAll('[data-stx-tab-panel]'))
+    .filter(p => p.closest('[data-stx-tabs]') === root)
+}
+
+onMount(() => {
+  if (hasPropTabs) return  // legacy mode: prop array already in discoveredTabs
+  const panels = findOwnPanels()
+  const list = panels.map(p => ({
+    label: p.dataset.label || '',
+    icon: p.dataset.icon || '',
+  }))
+  discoveredTabs.set(list)
+})
+
+// In slot mode, toggle each panel's `hidden` attribute as 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/{TextInput-kf084763.stx → TextInput-g0vaz0pe.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)

package/dist/{Textarea-xg4rr2xz.stx → Textarea-96kawv5c.stx}

@@ -35,7 +35,8 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
 const emit = defineEmits()
 const autoResize = {{ autoResize }}
 const maxRows = {{ maxRows }}
-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 resizeTextarea(el) {
   if (!autoResize) return

package/dist/{Tooltip-m0tqd72e.stx → Tooltip-y61h04gp.stx}

@@ -27,7 +27,8 @@ export const arrowClass = `absolute w-0 h-0 border-4 border-transparent ${arrowC
 <script client>
 const delay = {{ delay }}
 const isDisabled = {{ disabled }}
-const isVisible = state({{ show }})
+// Reactive prop binding — parent can drive `show` via signals. See #1704.
+const isVisible = useReactiveProp('show', {{ show }})
 let timeoutId = null
 
 function showTooltip() {