rip-lang 3.15.4 → 3.16.1

package/docs/ui/radio-group.rip

@@ -1,57 +0,0 @@
-# RadioGroup — accessible headless radio group
-#
-# Exactly one option can be selected. Arrow keys move focus and selection.
-# Ships zero CSS.
-#
-# Usage:
-#   RadioGroup value <=> size
-#     div $value: "sm", "Small"
-#     div $value: "md", "Medium"
-#     div $value: "lg", "Large"
-
-export RadioGroup = component
-  @value:: any := null
-  @disabled:: boolean := false
-  @orientation:: "horizontal" | "vertical" := "vertical"
-  @name:: string := ""
-
-  _options ~=
-    return [] unless @_slot
-    Array.from(@_slot.querySelectorAll('[data-value]') or [])
-
-  _select: (val) ->
-    return if @disabled
-    @value = val
-    @emit 'change', @value
-
-  onKeydown: (e) ->
-    radios = @_root?.querySelectorAll('[role="radio"]')
-    return unless radios?.length
-    focused = Array.from(radios).indexOf(document.activeElement)
-    return if focused < 0
-    len = radios.length
-    move = (idx) => radios[idx]?.focus(); @_select(_options[idx]?.dataset.value)
-    ARIA.rovingNav e, {
-      next:  => move((focused + 1) %% len)
-      prev:  => move((focused - 1) %% len)
-      first: => move(0)
-      last:  => move(len - 1)
-    }, 'both'
-
-  render
-    div ref: "_root", role: "radiogroup", aria-orientation: @orientation
-      $orientation: @orientation
-      $disabled: @disabled?!
-
-      . ref: "_slot", style: "display:none"
-        slot
-
-      for opt, idx in _options
-        button role: "radio"
-          tabindex: (if (opt.dataset.value is @value) or (@value is null and idx is 0) then "0" else "-1")
-          aria-checked: opt.dataset.value is @value
-          $checked: (opt.dataset.value is @value)?!
-          $disabled: @disabled?!
-          $value: opt.dataset.value
-          @click: (=> @_select(opt.dataset.value))
-          = opt.textContent

package/docs/ui/resizable.rip

@@ -1,123 +0,0 @@
-# Resizable — accessible headless resizable panels
-#
-# Container with draggable handles between panels for resizing.
-# Panel sizes are stored as percentages and exposed via CSS
-# custom properties. Place [data-handle] elements between [data-panel]
-# elements. Ships zero CSS.
-#
-# Usage:
-#   Resizable
-#     div $panel: true
-#       p "Left panel"
-#     div $handle: true
-#     div $panel: true
-#       p "Right panel"
-#
-#   Resizable orientation: "vertical", minSize: 20
-#     div $panel: true, "Top"
-#     div $handle: true
-#     div $panel: true, "Bottom"
-
-export Resizable = component
-  @orientation:: "horizontal" | "vertical" := "horizontal"
-  @minSize:: number := 10
-  @maxSize:: number := 90
-
-  _ready := false
-  _dragging = null
-  _startPos = 0
-  _startSizes = []
-  sizes := []
-
-  _panels: ->
-    return [] unless @_root
-    Array.from(@_root.querySelectorAll(':scope > [data-panel]') or [])
-
-  _handles: ->
-    return [] unless @_root
-    Array.from(@_root.querySelectorAll(':scope > [data-handle]') or [])
-
-  mounted: ->
-    _ready = true
-    panels = @_panels()
-    count = panels.length
-    if count and not sizes.length
-      even = 100 / count
-      sizes = Array.from {length: count}, -> even
-
-    @_handles().forEach (handle, idx) =>
-      handle.setAttribute 'role', 'separator'
-      handle.setAttribute 'tabindex', '0'
-      handle.addEventListener 'pointerdown', (e) => @_onPointerDown(idx, e)
-      handle.addEventListener 'keydown', (e) => @_onKeydown(idx, e)
-
-  _getPos: (e) ->
-    if @orientation is 'horizontal' then e.clientX else e.clientY
-
-  _getContainerSize: ->
-    rect = @_root?.getBoundingClientRect()
-    return 0 unless rect
-    if @orientation is 'horizontal' then rect.width else rect.height
-
-  _onPointerDown: (handleIdx, e) ->
-    e.preventDefault()
-    _dragging = handleIdx
-    _startPos = @_getPos(e)
-    _startSizes = [...sizes]
-    e.target.setPointerCapture(e.pointerId)
-    e.target.toggleAttribute 'data-dragging', true
-
-  _onPointerMove: (e) ->
-    return unless _dragging?
-    total = @_getContainerSize()
-    return unless total
-    delta = @_getPos(e) - _startPos
-    pctDelta = (delta / total) * 100
-    @_applyResize(_dragging, _startSizes[_dragging] + pctDelta, _startSizes[_dragging + 1] - pctDelta)
-
-  _onPointerUp: (e) ->
-    return unless _dragging?
-    handle = @_handles()[_dragging]
-    handle?.removeAttribute 'data-dragging'
-    _dragging = null
-    @emit 'resize', sizes
-
-  _applyResize: (idx, newLeft, newRight) ->
-    newLeft  = Math.max(@minSize, Math.min(@maxSize, newLeft))
-    newRight = Math.max(@minSize, Math.min(@maxSize, newRight))
-    combined = sizes[idx] + sizes[idx + 1]
-    newRight = combined - newLeft
-    return if newRight < @minSize or newRight > @maxSize
-    updated = [...sizes]
-    updated[idx] = newLeft
-    updated[idx + 1] = newRight
-    sizes = updated
-
-  _onKeydown: (handleIdx, e) ->
-    step = 10
-    horiz = @orientation is 'horizontal'
-    delta = switch e.key
-      when (if horiz then 'ArrowRight' else 'ArrowDown') then step
-      when (if horiz then 'ArrowLeft' else 'ArrowUp') then -step
-      else null
-    return unless delta?
-    e.preventDefault()
-    @_applyResize(handleIdx, sizes[handleIdx] + delta, sizes[handleIdx + 1] - delta)
-    @emit 'resize', sizes
-
-  ~>
-    return unless _ready
-    @_panels().forEach (el, idx) =>
-      pct = sizes[idx] or 0
-      el.style.setProperty '--panel-size', "#{pct}%"
-      el.style.flexBasis = "#{pct}%"
-    @_handles().forEach (handle, idx) =>
-      handle.setAttribute 'aria-valuenow', Math.round(sizes[idx] or 0)
-      handle.setAttribute 'aria-orientation', @orientation
-
-  render
-    div ref: "_root", $orientation: @orientation
-      @pointermove: @_onPointerMove
-      @pointerup: @_onPointerUp
-      style: "display:flex; flex-direction:#{if @orientation is 'horizontal' then 'row' else 'column'}"
-      slot

package/docs/ui/scroll-area.rip

@@ -1,145 +0,0 @@
-# ScrollArea — accessible headless custom scrollbar
-#
-# Renders custom scrollbar thumb that tracks scroll position. Thumb is
-# draggable and the track is clickable. Auto-hides when not scrolling.
-# Ships zero CSS.
-#
-# Usage:
-#   ScrollArea
-#     div "Long scrollable content..."
-
-MIN_THUMB = 20
-
-export ScrollArea = component
-  @orientation:: "horizontal" | "vertical" := "vertical"
-
-  hovering := false
-  scrolling := false
-  _scrollTimer = null
-  _dragStart = 0
-  _dragScrollStart = 0
-  _dragging = false
-  _ready := false
-
-  _updateThumb: ->
-    vp = @_viewport
-    sb = @_scrollbar
-    th = @_thumb
-    return unless vp and sb and th
-    vert = @orientation is 'vertical'
-
-    vpSize = if vert then vp.clientHeight else vp.clientWidth
-    scSize = if vert then vp.scrollHeight else vp.scrollWidth
-    sbSize = if vert then sb.clientHeight else sb.clientWidth
-    scrollPos = if vert then vp.scrollTop else vp.scrollLeft
-
-    ratio = vpSize / (scSize or 1)
-    if ratio >= 1
-      th.style.display = 'none'
-      return
-    th.style.display = ''
-
-    thumbPx = Math.max(MIN_THUMB, sbSize * ratio)
-    scrollRange = scSize - vpSize
-    maxOffset = sbSize - thumbPx
-    posPx = if scrollRange > 0 then Math.min(maxOffset, Math.max(0, (scrollPos / scrollRange) * maxOffset)) else 0
-
-    if vert
-      th.style.height = "#{thumbPx}px"
-      th.style.transform = "translate3d(0,#{posPx}px,0)"
-    else
-      th.style.width = "#{thumbPx}px"
-      th.style.transform = "translate3d(#{posPx}px,0,0)"
-
-  _onScroll: ->
-    scrolling = true
-    clearTimeout _scrollTimer if _scrollTimer
-    _scrollTimer = setTimeout (-> scrolling = false), 800
-    @_updateThumb()
-
-  _onTrackClick: (e) ->
-    return if e.target is @_thumb
-    vp = @_viewport
-    sb = @_scrollbar
-    th = @_thumb
-    return unless vp and sb and th
-    vert = @orientation is 'vertical'
-    rect = sb.getBoundingClientRect()
-    thumbPx = if vert then th.offsetHeight else th.offsetWidth
-
-    if vert
-      clickPos = e.clientY - rect.top - thumbPx / 2
-      maxOffset = rect.height - thumbPx
-      ratio = Math.max(0, Math.min(1, clickPos / maxOffset))
-      vp.scrollTop = ratio * (vp.scrollHeight - vp.clientHeight)
-    else
-      clickPos = e.clientX - rect.left - thumbPx / 2
-      maxOffset = rect.width - thumbPx
-      ratio = Math.max(0, Math.min(1, clickPos / maxOffset))
-      vp.scrollLeft = ratio * (vp.scrollWidth - vp.clientWidth)
-
-  _onThumbDown: (e) ->
-    return if e.button isnt 0
-    e.preventDefault()
-    e.stopPropagation()
-    _dragging = true
-    if @orientation is 'vertical'
-      _dragStart = e.clientY
-      _dragScrollStart = @_viewport.scrollTop
-    else
-      _dragStart = e.clientX
-      _dragScrollStart = @_viewport.scrollLeft
-    @_thumb.setPointerCapture e.pointerId
-
-  _onThumbMove: (e) ->
-    return unless _dragging
-    vp = @_viewport
-    sb = @_scrollbar
-    th = @_thumb
-    return unless vp and sb and th
-    vert = @orientation is 'vertical'
-    thumbPx = if vert then th.offsetHeight else th.offsetWidth
-    sbSize = if vert then sb.clientHeight else sb.clientWidth
-    maxOffset = sbSize - thumbPx
-    return if maxOffset <= 0
-
-    delta = if vert then e.clientY - _dragStart else e.clientX - _dragStart
-    scrollRange = if vert then vp.scrollHeight - vp.clientHeight else vp.scrollWidth - vp.clientWidth
-    newPos = _dragScrollStart + (delta / maxOffset) * scrollRange
-
-    if vert then vp.scrollTop = newPos else vp.scrollLeft = newPos
-
-  _onThumbUp: (e) ->
-    _dragging = false
-    @_thumb.releasePointerCapture e.pointerId
-
-  mounted: ->
-    _ready = true
-    requestAnimationFrame => @_updateThumb()
-    if @_viewport
-      @_resizeObs = new ResizeObserver => @_updateThumb()
-      @_resizeObs.observe @_viewport
-      @_resizeObs.observe @_viewport.firstElementChild if @_viewport.firstElementChild
-
-  beforeUnmount: ->
-    @_resizeObs?.disconnect()
-
-  render
-    div $orientation: @orientation
-      $hovering: hovering?!
-      $scrolling: scrolling?!
-      $dragging: _dragging?!
-      @mouseenter: (=> hovering = true)
-      @mouseleave: (=> hovering = false)
-
-      div ref: "_viewport", $viewport: true
-        style: "overflow:scroll;scrollbar-width:none"
-        @scroll: @_onScroll
-        slot
-
-      div ref: "_scrollbar", $scrollbar: true
-        @click: @_onTrackClick
-        div ref: "_thumb", $thumb: true
-          @pointerdown: @_onThumbDown
-          @pointermove: @_onThumbMove
-          @pointerup: @_onThumbUp

package/docs/ui/select.rip

@@ -1,151 +0,0 @@
-# Select — accessible headless select widget
-#
-# Keyboard: ArrowDown/Up to navigate, Enter/Space to select, Escape to close,
-#           Home/End for first/last, typeahead to jump by character.
-#
-# Exposes $open and $placeholder on button, $highlighted and $selected on options.
-# Uses native `popover="auto"` + anchor positioning.
-# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
-#
-# Usage:
-#   Select value <=> selectedValue, @change: (=> handle(event.detail))
-#     option value: "a", "Option A"
-#     option value: "b", "Option B"
-
-export Select = component
-  @value:: any := null
-  @placeholder:: string := "Select..."
-  @disabled:: boolean := false
-
-  open := false
-  highlightedIndex := -1
-  typeaheadBuffer := ''
-  typeaheadTimer := null
-  _listId =! "sel-#{Math.random().toString(36).slice(2, 8)}"
-
-  getOpt: (o) -> o.dataset.value ?? o.value
-
-  options ~=
-    return [] unless @_slot
-    Array.from(@_slot.querySelectorAll('[data-value], option[value]') or [])
-
-  selectedLabel ~=
-    if @value?
-      el = options.find (o) -> @getOpt(o) is String(@value)
-      el?.textContent?.trim() or String(@value)
-    else
-      @placeholder
-
-  toggle: ->
-    return if @disabled
-    if open then @close() else @openMenu()
-
-  openMenu: ->
-    open = true
-    highlightedIndex = Math.max(0, options.findIndex (o) -> @getOpt(o) is String(@value))
-    requestAnimationFrame => @_focusHighlighted()
-
-  close: ->
-    open = false
-    highlightedIndex = -1
-    @_trigger?.focus()
-
-  isDisabled: (opt) -> opt?.hasAttribute?('data-disabled') or opt?.disabled
-
-  selectIndex: (idx) ->
-    opt = options[idx]
-    return unless opt
-    return if @isDisabled(opt)
-    @value = @getOpt(opt)
-    @emit 'change', @value
-    @close()
-
-  onTriggerKeydown: (e) ->
-    return if @disabled
-    switch e.key
-      when 'ArrowDown', 'ArrowUp', 'Enter', ' '
-        e.preventDefault()
-        @openMenu()
-      when 'Escape'
-        e.preventDefault()
-        @close() if open
-
-  _nextEnabled: (from, dir) ->
-    len = options.length
-    i = from
-    loop len
-      i = (i + dir) %% len
-      return i unless @isDisabled(options[i])
-    from
-
-  onListKeydown: (e) ->
-    return unless options.length
-    ARIA.listNav e,
-      next:    => highlightedIndex = @_nextEnabled(highlightedIndex,  1); @_focusHighlighted()
-      prev:    => highlightedIndex = @_nextEnabled(highlightedIndex, -1); @_focusHighlighted()
-      first:   => highlightedIndex = 0;                  @_focusHighlighted()
-      last:    => highlightedIndex = options.length - 1; @_focusHighlighted()
-      select:  => @selectIndex(highlightedIndex)
-      dismiss: => @close()
-      tab:     => @close()
-      char:    => @_typeahead(e.key)
-
-  _typeahead: (char) ->
-    clearTimeout typeaheadTimer if typeaheadTimer
-    typeaheadBuffer += char.toLowerCase()
-    typeaheadTimer = setTimeout (-> typeaheadBuffer = ''), 500
-    idx = options.findIndex (o) -> o.textContent.trim().toLowerCase().startsWith(typeaheadBuffer)
-    if idx >= 0
-      highlightedIndex = idx
-      @_focusHighlighted()
-
-  _focusHighlighted: ->
-    el = @_list?.querySelectorAll('[role="option"]')?.[highlightedIndex]
-    el?.focus()
-    el?.scrollIntoView { block: 'nearest' }
-
-  _applyPlacement: ->
-    ARIA.position @_trigger, @_list, placement: 'bottom start', offset: 4, matchWidth: true
-
-  ~>
-    if @_list
-      @_list.setAttribute 'popover', 'auto'
-      @_applyPlacement()
-    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_trigger)
-
-  render
-    .
-
-      # Button
-      button ref: "_trigger", role: "combobox"
-        aria-expanded: !!open
-        aria-haspopup: "listbox"
-        aria-controls: open ? _listId : undefined
-        $open: open?!
-        $placeholder: (!@value)?!
-        $disabled: @disabled?!
-        disabled: @disabled
-        @click: @toggle
-        @keydown: @onTriggerKeydown
-        span selectedLabel
-
-      # Hidden slot for reading option definitions
-      . ref: "_slot", style: "display:none"
-        slot
-
-      # Dropdown listbox
-      div ref: "_list", id: _listId, role: "listbox", style: "position:fixed;margin:0;inset:auto"
-        $open: open?!
-        @keydown: @onListKeydown
-        for opt, idx in options
-          div role: "option"
-            tabindex: "-1"
-            $value: @getOpt(opt)
-            $highlighted: (idx is highlightedIndex)?!
-            $selected: (@getOpt(opt) is String(@value))?!
-            $disabled: @isDisabled(opt)?!
-            aria-selected: @getOpt(opt) is String(@value)
-            aria-disabled: @isDisabled(opt)?!
-            @click: (=> @selectIndex(idx))
-            @mouseenter: (=> highlightedIndex = idx)
-            = opt.textContent

package/docs/ui/separator.rip

@@ -1,17 +0,0 @@
-# Separator — accessible headless visual divider
-#
-# Decorative or semantic separator between content sections.
-# Ships zero CSS.
-#
-# Usage:
-#   Separator
-#   Separator orientation: "vertical"
-
-export Separator = component
-  @orientation:: "horizontal" | "vertical" := "horizontal"
-  @decorative:: boolean := true
-
-  render
-    div role: (if @decorative then 'none' else 'separator')
-      aria-orientation: (if @orientation is 'vertical' then 'vertical' else undefined)
-      $orientation: @orientation

package/docs/ui/skeleton.rip

@@ -1,22 +0,0 @@
-# Skeleton — accessible headless loading placeholder
-#
-# Placeholder element shown while content is loading.
-# Exposes dimensions as CSS custom properties for styling.
-# Ships zero CSS.
-#
-# Usage:
-#   Skeleton
-#   Skeleton width: "200px", height: "1em"
-#   Skeleton circle: true, width: "48px"
-
-export Skeleton = component
-  @width:: any := null
-  @height:: any := null
-  @circle:: boolean := false
-  @label:: string := "Loading"
-
-  render
-    div role: "status", aria-busy: "true", aria-label: @label
-      style: "--skeleton-width: #{@width or 'auto'}; --skeleton-height: #{@height or 'auto'}"
-      $circle: @circle?!
-      slot

package/docs/ui/slider.rip

@@ -1,165 +0,0 @@
-# Slider — accessible headless range slider
-#
-# Supports single and range (multi-thumb) modes, pointer drag with capture,
-# keyboard stepping, and CSS custom properties for thumb/indicator positioning.
-# Ships zero CSS.
-#
-# Usage:
-#   Slider value <=> volume
-#   Slider value <=> volume, min: 0, max: 100, step: 5
-#   Slider value <=> range, min: 0, max: 100   (pass array for range mode)
-
-export Slider = component
-  @value:: number := 0
-  @min:: number := 0
-  @max:: number := 100
-  @step:: number := 1
-  @largeStep:: number := 10
-  @orientation:: "horizontal" | "vertical" := "horizontal"
-  @disabled:: boolean := false
-  @name:: any := null
-  @valueText:: any := null
-
-  dragging := false
-  activeThumb := -1
-  _thumbOffset = 0
-  _id =! "sld-#{Math.random().toString(36).slice(2, 8)}"
-
-  isRange ~= Array.isArray(@value)
-  values  ~= if isRange then @value else [@value]
-  horiz   ~= @orientation is 'horizontal'
-
-  _clamp: (v) -> Math.min(@max, Math.max(@min, v))
-
-  _roundToStep: (v) ->
-    rounded = Math.round((v - @min) / @step) * @step + @min
-    precision = String(@step).split('.')[1]?.length or 0
-    parseFloat rounded.toFixed(precision)
-
-  _percentOf: (v) -> ((@_clamp(v) - @min) / (@max - @min)) * 100
-
-  _valueFromPointer: (e) ->
-    rect = @_track.getBoundingClientRect()
-    if horiz
-      ratio = (e.clientX - _thumbOffset - rect.left) / rect.width
-    else
-      ratio = 1 - (e.clientY - _thumbOffset - rect.top) / rect.height
-    ratio = Math.max(0, Math.min(1, ratio))
-    @_roundToStep(@min + ratio * (@max - @min))
-
-  _closestThumb: (e) ->
-    return 0 unless isRange
-    rect = @_track.getBoundingClientRect()
-    pos = if horiz then (e.clientX - rect.left) / rect.width else 1 - (e.clientY - rect.top) / rect.height
-    best = 0
-    bestDist = Infinity
-    for v, i in values
-      pct = @_percentOf(v) / 100
-      dist = Math.abs(pos - pct)
-      if dist < bestDist
-        bestDist = dist
-        best = i
-    best
-
-  _setValue: (idx, val) ->
-    val = @_clamp(@_roundToStep(val))
-    if isRange
-      arr = [...values]
-      arr[idx] = val
-      arr.sort (a, b) -> a - b
-      @value = arr
-    else
-      @value = val
-    @emit 'input', @value
-
-  _commitValue: ->
-    @emit 'change', @value
-
-  _onPointerDown: (e) ->
-    return if @disabled or e.button isnt 0
-    e.preventDefault()
-    idx = @_closestThumb(e)
-    activeThumb = idx
-    dragging = true
-
-    thumb = @_track.querySelectorAll('[data-thumb]')[idx]
-    if thumb
-      tr = thumb.getBoundingClientRect()
-      if horiz
-        _thumbOffset = e.clientX - (tr.left + tr.width / 2)
-      else
-        _thumbOffset = e.clientY - (tr.top + tr.height / 2)
-    else
-      _thumbOffset = 0
-
-    newVal = @_valueFromPointer(e)
-    @_setValue idx, newVal
-
-    @_track.setPointerCapture e.pointerId
-
-  _onPointerMove: (e) ->
-    return unless dragging
-    newVal = @_valueFromPointer(e)
-    @_setValue activeThumb, newVal
-
-  _onPointerUp: (e) ->
-    return unless dragging
-    dragging = false
-    activeThumb = -1
-    _thumbOffset = 0
-    @_track.releasePointerCapture e.pointerId
-    @_commitValue()
-
-  _onKeydown: (e, idx) ->
-    s = if e.shiftKey then @largeStep else @step
-    v = values[idx]
-    newVal = switch e.key
-      when 'ArrowRight', 'ArrowUp' then v + s
-      when 'ArrowLeft', 'ArrowDown' then v - s
-      when 'PageUp' then v + @largeStep
-      when 'PageDown' then v - @largeStep
-      when 'Home' then @min
-      when 'End' then @max
-      else null
-    if newVal?
-      e.preventDefault()
-      @_setValue idx, newVal
-      @_commitValue()
-
-  render
-    div role: "group", $orientation: @orientation, $disabled: @disabled?!, $dragging: dragging?!
-      style: "--slider-min: #{@min}; --slider-max: #{@max}"
-
-      # Track
-      div ref: "_track", $track: true
-        style: "position:relative"
-        @pointerdown: @_onPointerDown
-        @pointermove: @_onPointerMove
-        @pointerup: @_onPointerUp
-
-        # Indicator (filled portion)
-        if isRange
-          div $indicator: true
-            style: "position:absolute; #{if horiz then 'left' else 'bottom'}: #{@_percentOf(values[0])}%; #{if horiz then 'width' else 'height'}: #{@_percentOf(values[1]) - @_percentOf(values[0])}%"
-        else
-          div $indicator: true
-            style: "position:absolute; #{if horiz then 'left: 0; width' else 'bottom: 0; height'}: #{@_percentOf(values[0])}%"
-
-        # Thumbs
-        for val, idx in values
-          div $thumb: true, $active: (idx is activeThumb)?!
-            style: "position:absolute; #{if horiz then 'left' else 'bottom'}: #{@_percentOf(val)}%; z-index: #{if idx is activeThumb then 2 else 1}"
-            @keydown: (e) => @_onKeydown(e, idx)
-            input type: "range", style: "position:absolute;opacity:0;width:0;height:0;pointer-events:none"
-              id: "#{_id}-thumb-#{idx}"
-              name: @name?!
-              min: @min, max: @max, step: @step
-              value: val
-              aria-valuenow: val
-              aria-valuemin: @min
-              aria-valuemax: @max
-              aria-valuetext: if @valueText then @valueText(val, idx) else undefined
-              aria-orientation: @orientation
-              aria-disabled: @disabled?!
-
-      slot

package/docs/ui/spinner.rip

@@ -1,17 +0,0 @@
-# Spinner — accessible headless loading indicator
-#
-# Announces loading state to screen readers via role="status".
-# Exposes size as a CSS custom property for styling.
-# Ships zero CSS.
-#
-# Usage:
-#   Spinner
-#   Spinner label: "Saving...", size: "24px"
-
-export Spinner = component
-  @label:: string := "Loading"
-  @size:: any := null
-
-  render
-    div role: "status", aria-label: @label
-      style: if @size then "--spinner-size: #{@size}" else undefined