@stacksjs/components 0.2.54 → 0.2.66

package/dist/Accordion-pt8j917s.stx

@@ -0,0 +1,146 @@
+<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 || []
+export const className = $props.className || ''
+
+export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
+export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
+export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
+export const 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) {
+    openItems.set(cur.includes(index) ? cur.filter(i => i !== index) : [...cur, index])
+  }
+  else {
+    openItems.set(cur.includes(index) ? [] : [index])
+  }
+  emit('change', openItems())
+}
+
+function isOpen(index) {
+  return openItems().includes(index)
+}
+
+function onHeaderKey(event, index) {
+  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()
+  }
+  else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    buttons[index - 1]?.focus()
+  }
+  else if (event.key === 'Home') {
+    event.preventDefault()
+    buttons[0]?.focus()
+  }
+  else if (event.key === 'End') {
+    event.preventDefault()
+    buttons[buttons.length - 1]?.focus()
+  }
+}
+
+defineExpose({ openItems, toggleItem })
+</script>
+
+<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 }}"
+        >
+          <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>
+      </div>
+    @endforeach
+  @else
+    <slot />
+  @endif
+</div>

package/dist/AccordionItem-hbhzx63p.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/dist/{Checkbox-zgdmy3p5.stx → Checkbox-aqmq4cqv.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/dist/{Dialog-hczpexs4.stx → Dialog-y5rz2vrq.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/dist/{Drawer-xhevp5cw.stx → Drawer-hrz7qcyp.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/dist/Notification-03vfh3k6.stx

@@ -0,0 +1,117 @@
+<script server>
+// 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 const initialShow = $props.show !== false
+export const initialTitle = $props.title || ''
+export const initialMessage = $props.message || ''
+export const initialType = $props.type || 'info'
+export const initialPosition = $props.position || 'top-right'
+export const initialDuration = Number($props.duration ?? 5000)
+export const className = $props.className || ''
+</script>
+
+<script client>
+const emit = defineEmits()
+
+const isVisible = state({{ initialShow }})
+const title = state({{ initialTitle }})
+const message = state({{ initialMessage }})
+const type = state({{ initialType }})
+const position = state({{ initialPosition }})
+const duration = state({{ initialDuration }})
+
+const typeColors = {
+  info: 'bg-blue-50 text-blue-900 dark:bg-blue-900 dark:text-blue-100',
+  success: 'bg-green-50 text-green-900 dark:bg-green-900 dark:text-green-100',
+  warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100',
+  error: 'bg-red-50 text-red-900 dark:bg-red-900 dark:text-red-100',
+}
+
+const positions = {
+  'top-left': 'top-0 left-0',
+  'top-right': 'top-0 right-0',
+  'top-center': 'top-0 left-1/2 -translate-x-1/2',
+  'bottom-left': 'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+}
+
+const baseClasses = 'fixed z-50 m-4 max-w-md w-full pointer-events-auto rounded-lg p-4 shadow-lg ring-1 ring-black ring-opacity-5 transition-all'
+const extraClassName = {{ JSON.stringify(className) }}
+
+const notificationClasses = derived(() => {
+  const color = typeColors[type()] || typeColors.info
+  const pos = positions[position()] || positions['top-right']
+  return `${baseClasses} ${color} ${pos} ${extraClassName}`.trim()
+})
+
+let autoHideTimer = null
+function clearAutoHide() {
+  if (autoHideTimer) {
+    clearTimeout(autoHideTimer)
+    autoHideTimer = null
+  }
+}
+function scheduleAutoHide() {
+  clearAutoHide()
+  const d = duration()
+  if (d > 0 && isVisible()) {
+    autoHideTimer = setTimeout(() => close(), d)
+  }
+}
+
+function close() {
+  isVisible.set(false)
+  clearAutoHide()
+  emit('close')
+}
+
+function open(opts) {
+  if (opts && typeof opts === 'object') {
+    if (opts.title !== undefined) title.set(opts.title)
+    if (opts.message !== undefined) message.set(opts.message)
+    if (opts.type !== undefined) type.set(opts.type)
+    if (opts.position !== undefined) position.set(opts.position)
+    if (opts.duration !== undefined) duration.set(Number(opts.duration))
+  }
+  isVisible.set(true)
+  scheduleAutoHide()
+}
+
+onMount(() => {
+  if (isVisible()) scheduleAutoHide()
+})
+
+defineExpose({
+  open,
+  close,
+  isVisible,
+  title,
+  message,
+  type,
+  position,
+  duration,
+})
+</script>
+
+<div :if="isVisible()" :class="notificationClasses()" role="alert">
+  <div class="flex items-start">
+    <div class="flex-1">
+      <p :if="title()" class="text-sm font-medium" :text="title()"></p>
+      <p :if="message()" class="mt-1 text-sm" :class="title() ? 'opacity-90' : ''" :text="message()"></p>
+      <slot :if="!title() && !message()" />
+    </div>
+
+    <button
+      type="button"
+      @click="close()"
+      class="ml-4 inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+    >
+      <span class="sr-only">Close</span>
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+      </svg>
+    </button>
+  </div>
+</div>

package/dist/{NumberInput-drnvtqej.stx → NumberInput-g41gmd2c.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/dist/{Pagination-n3d31cns.stx → Pagination-wtgxmzey.stx}

@@ -17,7 +17,9 @@ export const iconClasses = `w-5 h-5`.trim()
 const emit = defineEmits()
 const totalPages = {{ totalPages }}
 const siblingCount = {{ siblingCount }}
-const page = state({{ currentPage }})
+// Reactive prop binding — parent can drive `current-page` via signals
+// (useful for URL-driven pagination via useSearchParams). See #1704.
+const page = useReactiveProp('current-page', {{ currentPage }})
 
 function goToPage(target) {
   if (target >= 1 && target <= totalPages && target !== page()) {

package/dist/{PasswordInput-n02x6053.stx → PasswordInput-4rsq1gwb.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/dist/{Progress-yxcntr4x.stx → Progress-9dhakbh4.stx}

@@ -45,7 +45,8 @@ export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stro
 const max = {{ max }}
 const indeterminate = {{ indeterminate }}
 const circumference = {{ circumference }}
-const value = state({{ value }})
+// Reactive prop binding — parent can drive `value` via signals. See #1704.
+const value = useReactiveProp('value', {{ value }})
 
 const percentage = derived(() => Math.min(Math.max((value() / max) * 100, 0), 100))
 const percentLabel = derived(() => `${Math.round(percentage())}%`)

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

@@ -25,7 +25,8 @@ export const inputId = `radio-${value || label}`
 const emit = defineEmits()
 const isDisabled = {{ disabled }}
 const radioValue = {{ value }}
-const isChecked = state({{ checked }})
+// Reactive prop binding — parent can drive `checked` via signals. See #1704.
+const isChecked = useReactiveProp('checked', {{ checked }})
 
 function onInputChange(event) {
   if (isDisabled) {

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

@@ -27,7 +27,8 @@ export const selectId = `select-${value}`
 
 <script client>
 const emit = defineEmits()
-const selectedValue = state({{ value }})
+// Reactive prop binding — parent can drive `value` via signals. See #1704.
+const selectedValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
 
 function onChange(event) {
   selectedValue.set(event.target.value)

package/dist/{Sidebar-73vc78as.stx → Sidebar-0jzasrmt.stx}

@@ -4,10 +4,19 @@ export const collapsed = $props.collapsed ?? false
 export const collapsible = $props.collapsible ?? true
 export const width = $props.width || 240
 export const minWidth = $props.minWidth || 64
+export const collapseMode = $props.collapseMode || 'rail'
 export const variant = $props.variant || 'tahoe'
 export const position = $props.position || 'left'
 export const placement = $props.placement || 'fixed'
 export const bordered = $props.bordered ?? true
+export const materialOpacity = $props.materialOpacity ?? (variant === 'desktop' ? 0.78 : 0.7)
+export const materialDarkOpacity = $props.materialDarkOpacity ?? (variant === 'desktop' ? 0.8 : materialOpacity)
+export const materialScheme = $props.materialScheme || 'system'
+export const persistKey = $props.persistKey || ''
+export const shellSelector = $props.shellSelector || ''
+export const widthVar = $props.widthVar || '--stx-sidebar-width'
+export const collapsedClass = $props.collapsedClass || ''
+export const nativeMaterialCollapse = $props.nativeMaterialCollapse ?? (variant === 'desktop' && collapseMode === 'hidden')
 export const className = $props.className || ''
 
 const variantStyles = {
@@ -44,13 +53,13 @@ const variantStyles = {
     slot: 'px-5 py-5',
   },
   desktop: {
-    bg: 'bg-white/42 dark:bg-black/32',
-    border: 'border-white/30 dark:border-white/10',
-    backdrop: 'backdrop-blur-3xl backdrop-saturate-200',
+    bg: 'bg-[#f3f3f1]/48 dark:bg-neutral-950/32',
+    border: 'border-white/15 dark:border-white/10',
+    backdrop: 'backdrop-blur-3xl backdrop-saturate-150',
     tint: false,
     shimmer: true,
-    nav: 'px-4 py-4 space-y-1',
-    slot: 'px-4 py-4',
+    nav: 'px-5 py-2 space-y-1',
+    slot: 'px-5 py-2',
   },
 }
 
@@ -77,7 +86,9 @@ export const containerClasses = [
   className,
 ].filter(Boolean).join(' ')
 
-export const collapseBtnPosition = position === 'left' ? 'right-2' : 'left-2'
+export const collapseBtnPosition = variant === 'desktop'
+  ? (position === 'left' ? 'left-[166px]' : 'right-[166px]')
+  : (position === 'left' ? 'right-2' : 'left-2')
 export const navClasses = style.nav || 'px-3 py-2 space-y-1'
 export const slotClasses = style.slot || 'px-3 py-2'
 </script>
@@ -88,9 +99,18 @@ const collapsedProp = {{ collapsed }}
 const collapsibleProp = {{ collapsible }}
 const widthProp = {{ width }}
 const minWidthProp = {{ minWidth }}
+const collapseModeProp = {{ collapseMode }}
 const sectionsProp = {{ sections }}
 const positionProp = {{ position }}
 const variantProp = {{ variant }}
+const materialOpacityProp = {{ materialOpacity }}
+const materialDarkOpacityProp = {{ materialDarkOpacity }}
+const materialSchemeProp = {{ materialScheme }}
+const persistKeyProp = {{ persistKey }}
+const shellSelectorProp = {{ shellSelector }}
+const widthVarProp = {{ widthVar }}
+const collapsedClassProp = {{ collapsedClass }}
+const nativeMaterialCollapseProp = {{ nativeMaterialCollapse }}
 
 const collapsed = state(collapsedProp)
 const isHovered = state(false)
@@ -98,14 +118,45 @@ const hasNativeSidebar = state(false)
 
 const showExpanded = derived(() => !collapsed() || isHovered())
 const sidebarWidth = derived(() => {
+  if (collapsed() && collapseModeProp === 'hidden') return '0px'
   if (collapsed() && !isHovered()) return `${minWidthProp}px`
   return `${widthProp}px`
 })
 const collapseAriaLabel = derived(() => collapsed() ? 'Expand sidebar' : 'Collapse sidebar')
-const collapseIconClass = derived(() => collapsed() ? 'i-hugeicons-sidebar-right' : 'i-hugeicons-sidebar-left')
+
+function applyCollapseEffects(nextCollapsed) {
+  if (persistKeyProp) {
+    try {
+      window.localStorage?.setItem(persistKeyProp, nextCollapsed ? 'true' : 'false')
+    }
+    catch {}
+  }
+
+  if (shellSelectorProp) {
+    document.querySelectorAll(shellSelectorProp).forEach((shell) => {
+      shell.style?.setProperty?.(widthVarProp, nextCollapsed && collapseModeProp === 'hidden' ? '0px' : `${widthProp}px`)
+      if (shell.dataset) shell.dataset.sidebarCollapsed = nextCollapsed ? 'true' : 'false'
+    })
+  }
+
+  document.documentElement.dataset.stxSidebarCollapsed = nextCollapsed ? 'true' : 'false'
+  if (collapsedClassProp) {
+    document.documentElement.classList.toggle(collapsedClassProp, nextCollapsed)
+  }
+
+  if (nativeMaterialCollapseProp) {
+    window.craft?.window?.setWebSidebarCollapsed?.(nextCollapsed).catch?.(() => {})
+  }
+}
+
+function setCollapsed(nextCollapsed, shouldEmit = true) {
+  collapsed.set(nextCollapsed)
+  applyCollapseEffects(nextCollapsed)
+  if (shouldEmit) emit('collapse', nextCollapsed)
+}
 
 function onMouseEnter() {
-  if (collapsed() && collapsibleProp) isHovered.set(true)
+  if (collapsed() && collapsibleProp && collapseModeProp !== 'hidden') isHovered.set(true)
 }
 
 function onMouseLeave() {
@@ -113,8 +164,7 @@ function onMouseLeave() {
 }
 
 function toggleCollapse() {
-  collapsed.set(!collapsed())
-  emit('collapse', collapsed())
+  setCollapsed(!collapsed())
 }
 
 function onSectionToggle(sectionId) {
@@ -125,22 +175,46 @@ function onItemClick(event) {
   emit('itemClick', event.detail)
 }
 
+function isCraftRuntime() {
+  return window.__craftNativeSidebar === true
+    || window.craft?.__craft_bridge_loaded === true
+    || !!window.craft?.window
+    || !!window.webkit?.messageHandlers?.craft
+}
+
 onMount(async () => {
-  hasNativeSidebar.set(
-    window.__craftNativeSidebar === true
-    || window.craft?.hasNativeSidebar?.()
-    || (window.webkit?.messageHandlers?.craft && document.body?.dataset?.nativeSidebar === 'true'),
-  )
-  if (window.craft?.isCraft?.() && window.craft?.components?.createSidebar) {
+  if (persistKeyProp) {
+    try {
+      const saved = window.localStorage?.getItem(persistKeyProp)
+      if (saved === 'true' || saved === 'false') collapsed.set(saved === 'true')
+    }
+    catch {}
+  }
+
+  applyCollapseEffects(collapsed())
+
+  if (variantProp === 'desktop' && isCraftRuntime()) {
+    document.documentElement.classList.add('has-stx-sidebar-material')
+    if (document.body?.dataset) document.body.dataset.sidebarMaterial = 'desktop'
+  }
+
+  hasNativeSidebar.set(isCraftRuntime() && window.craft?.hasNativeSidebar?.() === true)
+
+  const nativeSidebarApi = window.craft?.nativeUI || window.craft?.components
+  if (isCraftRuntime() && nativeSidebarApi?.createSidebar) {
     try {
-      await window.craft.components.createSidebar({
+      const sidebar = await nativeSidebarApi.createSidebar({
         position: positionProp,
         width: widthProp,
         minWidth: minWidthProp,
+        collapseMode: collapseModeProp,
         collapsible: collapsibleProp,
         variant: variantProp,
         material: variantProp === 'desktop' ? 'sidebar' : undefined,
-        backgroundEffect: variantProp === 'desktop' ? 'shimmer' : undefined,
+        backgroundEffect: variantProp === 'desktop' ? 'vibrancy' : undefined,
+        materialOpacity: materialOpacityProp,
+        materialDarkOpacity: materialDarkOpacityProp,
+        materialScheme: materialSchemeProp,
         allowsVibrancy: variantProp === 'desktop' || variantProp === 'vibrancy' || variantProp === 'tahoe',
         sections: sectionsProp.map(s => ({
           id: s.id,
@@ -148,6 +222,7 @@ onMount(async () => {
           items: s.items?.map(i => ({ id: i.id, label: i.label, icon: i.icon, href: i.href, badge: i.badge })),
         })),
       })
+      if (sidebar) hasNativeSidebar.set(true)
     }
     catch (err) {
       console.warn('[Sidebar] Failed to create native sidebar, using web fallback:', err)
@@ -161,7 +236,10 @@ defineExpose({ collapsed, toggle: toggleCollapse })
 <aside
   :show="!hasNativeSidebar()"
   class="{{ containerClasses }} sidebar-container"
-  :style="`width: ${sidebarWidth()}`"
+  data-sidebar-variant="{{ variant }}"
+  data-sidebar-material-scheme="{{ materialScheme }}"
+  :aria-hidden="String(collapsed() && collapseModeProp === 'hidden')"
+  :style="`width: ${sidebarWidth()}; --stx-sidebar-material-opacity: ${materialOpacityProp}; --stx-sidebar-material-dark-opacity: ${materialDarkOpacityProp}`"
   @mouseenter="onMouseEnter()"
   @mouseleave="onMouseLeave()"
   role="navigation"
@@ -171,7 +249,7 @@ defineExpose({ collapsed, toggle: toggleCollapse })
     <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-amber-50/30 via-orange-50/20 to-stone-100/30 dark:from-neutral-800/20 dark:via-neutral-900/10 dark:to-neutral-800/20 mix-blend-overlay"></div>
   @endif
   @if(variantShimmer)
-    <div class="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_18%_12%,rgba(255,255,255,0.46),transparent_28%),linear-gradient(120deg,rgba(255,255,255,0.22),rgba(255,255,255,0.04)_42%,rgba(255,255,255,0.18))] dark:bg-[radial-gradient(circle_at_18%_12%,rgba(255,255,255,0.12),transparent_30%),linear-gradient(120deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02)_45%,rgba(255,255,255,0.08))]"></div>
+    <div class="absolute inset-0 pointer-events-none bg-[linear-gradient(112deg,rgba(255,255,255,0.20)_0%,rgba(255,255,255,0.04)_45%,rgba(226,226,222,0.16)_100%)] dark:bg-[linear-gradient(112deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0.02)_46%,rgba(255,255,255,0.06)_100%)]"></div>
   @endif
 
   @if($slots.header)
@@ -213,13 +291,15 @@ defineExpose({ collapsed, toggle: toggleCollapse })
 
   @if(collapsible)
     <button
-      :show="showExpanded()"
       type="button"
       class="absolute top-4 {{ collapseBtnPosition }} p-1.5 rounded-lg text-stone-400 hover:text-stone-600 hover:bg-black/5 dark:hover:text-neutral-300 dark:hover:bg-white/10 transition-colors z-20"
       @click="toggleCollapse()"
       :aria-label="collapseAriaLabel()"
+      data-sidebar-collapse
+      data-stx-sidebar-collapse-button
     >
-      <div :class="`${collapseIconClass()} w-5 h-5`"></div>
+      <div :show="!collapsed()" class="i-hugeicons-sidebar-left w-5 h-5"></div>
+      <div :show="collapsed()" class="i-hugeicons-sidebar-right w-5 h-5"></div>
     </button>
   @endif
 </aside>
@@ -229,7 +309,21 @@ defineExpose({ collapsed, toggle: toggleCollapse })
 .overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
 .overflow-y-auto::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 3px; }
 .overflow-y-auto::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.25); }
+.sidebar-container[data-sidebar-variant="desktop"] {
+  background-color: rgba(246, 246, 244, var(--stx-sidebar-material-opacity, 0.78));
+  backdrop-filter: blur(24px) saturate(1.08);
+  -webkit-backdrop-filter: blur(24px) saturate(1.08);
+}
+html.has-native-sidebar [data-stx-native-window-controls] {
+  display: none;
+}
+html.has-native-sidebar [data-stx-sidebar-web-chrome] {
+  margin-left: 202px;
+}
 @media (prefers-color-scheme: dark) {
+  .sidebar-container[data-sidebar-variant="desktop"]:not([data-sidebar-material-scheme="light"]) {
+    background-color: rgba(24, 24, 23, var(--stx-sidebar-material-dark-opacity, 0.8));
+  }
   .overflow-y-auto::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); }
   .overflow-y-auto::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.25); }
 }