@rip-lang/ui 0.3.0 → 0.3.1

package/scroll-area.rip

@@ -0,0 +1,145 @@
+# 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 := '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/select.rip

@@ -0,0 +1,184 @@
+# 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.
+# 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 := null
+  @placeholder := 'Select...'
+  @disabled := 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 =>
+      @_position()
+      @_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) ->
+    len = options.length
+    return unless len
+
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        highlightedIndex = @_nextEnabled(highlightedIndex, 1)
+        @_focusHighlighted()
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = @_nextEnabled(highlightedIndex, -1)
+        @_focusHighlighted()
+      when 'Home'
+        e.preventDefault()
+        highlightedIndex = 0
+        @_focusHighlighted()
+      when 'End'
+        e.preventDefault()
+        highlightedIndex = len - 1
+        @_focusHighlighted()
+      when 'Enter', ' '
+        e.preventDefault()
+        @selectIndex(highlightedIndex)
+      when 'Escape'
+        e.preventDefault()
+        @close()
+      when 'Tab'
+        @close()
+      else
+        if e.key.length is 1
+          @_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: ->
+    opt = options[highlightedIndex]
+    opt?.focus()
+
+  _position: ->
+    return unless @_trigger and @_list
+    tr = @_trigger.getBoundingClientRect()
+    @_list.style.position = 'fixed'
+    @_list.style.left = "#{tr.left}px"
+    @_list.style.top = "#{tr.bottom + 4}px"
+    @_list.style.minWidth = "#{tr.width}px"
+    fl = @_list.getBoundingClientRect()
+    if fl.bottom > window.innerHeight
+      @_list.style.top = "#{tr.top - fl.height - 4}px"
+    @_list.style.visibility = 'visible'
+
+  ~>
+    if open
+      onDown = (e) =>
+        unless @_trigger?.contains(e.target) or @_list?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  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
+      if open
+        div ref: "_list", id: _listId, role: "listbox", style: "position:fixed;visibility:hidden"
+          $open: true
+          @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/separator.rip

@@ -0,0 +1,17 @@
+# 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'
+  @decorative := true
+
+  render
+    div role: (if @decorative then 'none' else 'separator')
+      aria-orientation: (if @orientation is 'vertical' then 'vertical' else undefined)
+      $orientation: @orientation

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/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