@rip-lang/ui 0.3.20 → 0.3.21

package/slider.rip

@@ -0,0 +1,165 @@
+# 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 := 0
+  @min := 0
+  @max := 100
+  @step := 1
+  @largeStep := 10
+  @orientation := 'horizontal'
+  @disabled := false
+  @name := null
+  @valueText := 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/spinner.rip

@@ -0,0 +1,17 @@
+# 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 := 'Loading'
+  @size := null
+
+  render
+    div role: "status", aria-label: @label
+      style: if @size then "--spinner-size: #{@size}" else undefined

package/table.rip

@@ -0,0 +1,27 @@
+# Table — accessible headless semantic table wrapper
+#
+# Lightweight wrapper for HTML tables with optional caption and
+# striped rows. For data-heavy tables with virtual scrolling, use Grid.
+# Ships zero CSS.
+#
+# Usage:
+#   Table caption: "Team members", striped: true
+#     thead
+#       tr
+#         th "Name"
+#         th "Role"
+#     tbody
+#       tr
+#         td "Alice"
+#         td "Engineer"
+
+export Table = component
+  @caption := ''
+  @striped := false
+
+  render
+    div $striped: @striped?!
+      table
+        if @caption
+          caption @caption
+        slot

package/tabs.rip

@@ -0,0 +1,124 @@
+# Tabs — accessible headless tab widget
+#
+# Keyboard: ArrowLeft/Right (horizontal) or ArrowUp/Down (vertical) to navigate,
+# Home/End for first/last. Manages focus via roving tabindex.
+# Exposes $active on tabs and panels. Ships zero CSS.
+#
+# Props:
+#   active       — currently active tab id (two-way bindable)
+#   orientation  — 'horizontal' (default) or 'vertical'
+#   activation   — 'automatic' (default, selects on focus) or 'manual' (Enter/Space to select)
+#
+# Usage:
+#   Tabs active <=> currentTab
+#     div $tab: "one", "Tab One"
+#     div $tab: "two", "Tab Two"
+#     div $panel: "one"
+#       p "Content for tab one"
+#     div $panel: "two"
+#       p "Content for tab two"
+
+export Tabs = component
+  @active      := null
+  @orientation := 'horizontal'
+  @activation  := 'automatic'
+  _ready       := false
+  _id =! "tabs-#{Math.random().toString(36).slice(2, 8)}"
+  activationDirection := 'none'
+
+  tabs ~=
+    return [] unless _ready
+    Array.from(@_content?.querySelectorAll('[data-tab]') or [])
+
+  panels ~=
+    return [] unless _ready
+    Array.from(@_content?.querySelectorAll('[data-panel]') or [])
+
+  mounted: ->
+    _ready = true
+    unless @active
+      @active = tabs[0]?.dataset.tab
+
+  ~>
+    return unless _ready
+    tabs.forEach (el) -> el.hidden = true
+    panels.forEach (el) =>
+      id = el.dataset.panel
+      isActive = id is @active
+      el.id = "#{_id}-panel-#{id}"
+      el.setAttribute 'role', 'tabpanel'
+      el.setAttribute 'aria-labelledby', "#{_id}-tab-#{id}"
+      el.toggleAttribute 'hidden', not isActive
+      el.toggleAttribute 'data-active', isActive
+
+  _isDisabled: (el) -> el?.hasAttribute('data-disabled')
+
+  select: (id) ->
+    prev = @active
+    horiz = @orientation is 'horizontal'
+    if prev and id isnt prev
+      oldTab = tabs.find (t) -> t.dataset.tab is prev
+      newTab = tabs.find (t) -> t.dataset.tab is id
+      if oldTab and newTab
+        oldRect = oldTab.getBoundingClientRect()
+        newRect = newTab.getBoundingClientRect()
+        activationDirection = if horiz
+          if newRect.left > oldRect.left then 'right' else 'left'
+        else
+          if newRect.top > oldRect.top then 'down' else 'up'
+    @active = id
+    @emit 'change', id
+
+  _nextEnabled: (ids, from, dir) ->
+    len = ids.length
+    i = from
+    loop len
+      i = (i + dir) %% len
+      tab = tabs.find (t) -> t.dataset.tab is ids[i]
+      return ids[i] unless @_isDisabled(tab)
+    ids[from]
+
+  onKeydown: (e) ->
+    ids = tabs.map (t) -> t.dataset.tab
+    idx = ids.indexOf @active
+    return if idx is -1
+
+    horiz = @orientation is 'horizontal'
+    prevKey = if horiz then 'ArrowLeft' else 'ArrowUp'
+    nextKey = if horiz then 'ArrowRight' else 'ArrowDown'
+
+    next = switch e.key
+      when nextKey then @_nextEnabled(ids, idx, 1)
+      when prevKey then @_nextEnabled(ids, idx, -1)
+      when 'Home'  then @_nextEnabled(ids, ids.length - 1, 1)
+      when 'End'   then @_nextEnabled(ids, 0, -1)
+      when 'Enter', ' '
+        if @activation is 'manual'
+          e.preventDefault()
+          @select(ids[idx])
+        null
+      else null
+
+    if next
+      e.preventDefault()
+      tab = tabs.find (t) -> t.dataset.tab is next
+      tab?.focus()
+      @select(next) if @activation is 'automatic'
+
+  render
+    .
+      div role: "tablist", aria-orientation: @orientation, data-activation-direction: activationDirection, @keydown: @onKeydown
+        for tab in tabs
+          button role: "tab"
+            id: "#{_id}-tab-#{tab.dataset.tab}"
+            aria-selected: tab.dataset.tab is @active
+            aria-controls: "#{_id}-panel-#{tab.dataset.tab}"
+            aria-disabled: @_isDisabled(tab)?!
+            tabindex: if @_isDisabled(tab) then '-1' else (tab.dataset.tab is @active ? '0' : '-1')
+            $active: (tab.dataset.tab is @active)?!
+            $disabled: @_isDisabled(tab)?!
+            @click: (=> @select(tab.dataset.tab) unless @_isDisabled(tab))
+            = tab.textContent
+
+      . ref: "_content"
+        slot

package/textarea.rip

@@ -0,0 +1,48 @@
+# Textarea — accessible headless auto-resizing text area
+#
+# Tracks focus, validation, and disabled state via data attributes.
+# Optional auto-resize adjusts height to fit content. Ships zero CSS.
+#
+# Usage:
+#   Textarea value <=> bio, placeholder: "Tell us about yourself"
+#   Textarea value <=> notes, autoResize: true, rows: 3
+
+export Textarea = component
+  @value := ''
+  @placeholder := ''
+  @disabled := false
+  @required := false
+  @rows := 3
+  @autoResize := false
+
+  focused := false
+  touched := false
+
+  onInput: (e) ->
+    @value = e.target.value
+    @_resize(e.target) if @autoResize
+
+  onFocus: -> focused = true
+  onBlur: ->
+    focused = false
+    touched = true
+
+  _resize: (el) ->
+    el.style.height = 'auto'
+    el.style.height = "#{el.scrollHeight}px"
+
+  mounted: ->
+    @_resize(@_root) if @autoResize and @value
+
+  render
+    textarea ref: "_root", value: @value, placeholder: @placeholder, rows: @rows
+      disabled: @disabled
+      required: @required
+      aria-disabled: @disabled?!
+      aria-required: @required?!
+      $disabled: @disabled?!
+      $focused: focused?!
+      $touched: touched?!
+      @input: @onInput
+      @focusin: @onFocus
+      @focusout: @onBlur

package/toast.rip

@@ -0,0 +1,87 @@
+# Toast — accessible headless toast notification system
+#
+# Managed toast system with stacking, timer pause on hover, and promise support.
+# Uses ARIA live region for screen reader announcements. Ships zero CSS.
+#
+# Usage:
+#   toasts := []
+#
+#   # Add a toast — reactive assignment is the API
+#   toasts = [...toasts, { message: "Saved!", type: "success" }]
+#
+#   # Dismiss — filter it out
+#   toasts = toasts.filter (t) -> t isnt target
+#
+#   # Clear all
+#   toasts = []
+#
+#   # In render block
+#   ToastViewport toasts <=> toasts
+
+export ToastViewport = component
+  @toasts := []
+  @placement := 'bottom-right'
+
+  _onDismiss: (toast) ->
+    @toasts = @toasts.filter (t) -> t isnt toast
+
+  render
+    div role: "region", aria-label: "Notifications", $placement: @placement
+      for toast in @toasts
+        Toast toast: toast, @dismiss: (e) => @_onDismiss(e.detail)
+
+export Toast = component
+  @toast := {}
+
+  leaving := false
+  _timer := null
+  _remaining = 0
+  _started = 0
+
+  _startTimer: ->
+    dur = @toast.duration ?? 4000
+    return unless dur > 0
+    _remaining = dur
+    _started = Date.now()
+    _timer = setTimeout => @dismiss(), dur
+
+  _pauseTimer: ->
+    return unless _timer
+    clearTimeout _timer
+    _remaining -= Date.now() - _started
+    _timer = null
+
+  _resumeTimer: ->
+    return if _timer or _remaining <= 0
+    _started = Date.now()
+    _timer = setTimeout => @dismiss(), _remaining
+
+  mounted: -> @_startTimer()
+
+  beforeUnmount: ->
+    clearTimeout _timer if _timer
+
+  dismiss: ->
+    leaving = true
+    setTimeout =>
+      @emit 'dismiss', @toast
+    , 200
+
+  render
+    div role: (if @toast.type is 'error' then 'alert' else 'status'),
+      aria-live: (if @toast.type is 'error' then 'assertive' else 'polite'),
+      $type: @toast.type ?? 'info',
+      $leaving: leaving?!,
+      @mouseenter: @_pauseTimer,
+      @mouseleave: @_resumeTimer,
+      @focusin: @_pauseTimer,
+      @focusout: @_resumeTimer
+      .
+        if @toast.title
+          strong @toast.title
+        span @toast.message
+        if @toast.action
+          button @click: @toast.action.onClick
+            @toast.action.label or 'Action'
+        button aria-label: "Dismiss", @click: @dismiss
+          "✕"

package/toggle-group.rip

@@ -0,0 +1,78 @@
+# ToggleGroup — accessible headless toggle group
+#
+# A set of two-state buttons where one or more can be pressed.
+# Set @multiple to false for single-select (radio-like) behavior.
+# Ships zero CSS.
+#
+# Usage:
+#   ToggleGroup value <=> alignment
+#     div $value: "left", "Left"
+#     div $value: "center", "Center"
+#     div $value: "right", "Right"
+
+export ToggleGroup = component
+  @value := null
+  @disabled := false
+  @multiple := false
+  @orientation := 'horizontal'
+
+  _items ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-value]') or [])
+
+  _isPressed: (item) ->
+    val = item.dataset.value
+    if @multiple
+      Array.isArray(@value) and val in @value
+    else
+      val is @value
+
+  _toggle: (val) ->
+    return if @disabled
+    if @multiple
+      arr = if Array.isArray(@value) then [...@value] else []
+      if val in arr
+        arr = arr.filter (v) -> v isnt val
+      else
+        arr.push val
+      @value = arr
+    else
+      @value = if val is @value then null else val
+    @emit 'change', @value
+
+  onKeydown: (e) ->
+    opts = @_root?.querySelectorAll('[data-value]')
+    return unless opts?.length
+    focused = Array.from(opts).indexOf(document.activeElement)
+    return if focused < 0
+    len = opts.length
+    switch e.key
+      when 'ArrowRight', 'ArrowDown'
+        e.preventDefault()
+        opts[(focused + 1) %% len]?.focus()
+      when 'ArrowLeft', 'ArrowUp'
+        e.preventDefault()
+        opts[(focused - 1) %% len]?.focus()
+      when 'Home'
+        e.preventDefault()
+        opts[0]?.focus()
+      when 'End'
+        e.preventDefault()
+        opts[len - 1]?.focus()
+
+  render
+    div ref: "_root", role: "group", aria-orientation: @orientation
+      $orientation: @orientation
+      $disabled: @disabled?!
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      for item, idx in _items
+        button tabindex: (if idx is 0 then "0" else "-1")
+          aria-pressed: !!@_isPressed(item)
+          $pressed: @_isPressed(item)?!
+          $disabled: @disabled?!
+          $value: item.dataset.value
+          @click: (=> @_toggle(item.dataset.value))
+          = item.textContent

package/toggle.rip

@@ -0,0 +1,24 @@
+# Toggle — accessible headless toggle button
+#
+# Stateful button that toggles pressed state on click.
+# Ships zero CSS.
+#
+# Usage:
+#   Toggle pressed <=> isBold
+#     "Bold"
+
+export Toggle = component
+  @pressed := false
+  @disabled := false
+
+  onClick: ->
+    return if @disabled
+    @pressed = not @pressed
+    @emit 'change', @pressed
+
+  render
+    button aria-pressed: !!@pressed
+      aria-disabled: @disabled?!
+      $pressed: @pressed?!
+      $disabled: @disabled?!
+      slot

package/toolbar.rip

@@ -0,0 +1,46 @@
+# Toolbar — accessible headless toolbar
+#
+# Groups interactive controls with roving tabindex keyboard navigation.
+# Arrow keys move focus between focusable children. Ships zero CSS.
+#
+# Usage:
+#   Toolbar
+#     Button @click: save, "Save"
+#     Button @click: undo, "Undo"
+#     Separator orientation: "vertical"
+#     Toggle pressed <=> isBold, "Bold"
+
+export Toolbar = component
+  @orientation := 'horizontal'
+  @label := ''
+
+  _getFocusable: ->
+    return [] unless @_root
+    Array.from(@_root.querySelectorAll('button, [tabindex], input, select, textarea')).filter (el) ->
+      not el.disabled and el.offsetParent isnt null
+
+  onKeydown: (e) ->
+    els = @_getFocusable()
+    return unless els.length
+    focused = els.indexOf(document.activeElement)
+    return if focused < 0
+    len = els.length
+    horiz = @orientation is 'horizontal'
+    switch e.key
+      when (if horiz then 'ArrowRight' else 'ArrowDown')
+        e.preventDefault()
+        els[(focused + 1) %% len]?.focus()
+      when (if horiz then 'ArrowLeft' else 'ArrowUp')
+        e.preventDefault()
+        els[(focused - 1) %% len]?.focus()
+      when 'Home'
+        e.preventDefault()
+        els[0]?.focus()
+      when 'End'
+        e.preventDefault()
+        els[len - 1]?.focus()
+
+  render
+    div role: "toolbar", aria-label: @label or undefined, aria-orientation: @orientation
+      $orientation: @orientation
+      slot