@rip-lang/ui 0.3.20 → 0.3.21

package/preview-card.rip

@@ -0,0 +1,73 @@
+# PreviewCard — accessible headless hover preview card
+#
+# Shows a floating card on hover/focus of a trigger element. Dismisses
+# on mouse leave or blur. Ships zero CSS.
+#
+# Usage:
+#   PreviewCard delay: 400
+#     a $trigger: true, href: "/user/42", "View Profile"
+#     div $content: true
+#       p "User details here..."
+
+export PreviewCard = component
+  @delay := 400
+  @closeDelay := 200
+
+  open := false
+  _ready := false
+  _openTimer := null
+  _closeTimer := null
+
+  beforeUnmount: ->
+    clearTimeout _openTimer if _openTimer
+    clearTimeout _closeTimer if _closeTimer
+
+  mounted: ->
+    _ready = true
+    trigger = @_root?.querySelector('[data-trigger]')
+    return unless trigger
+    trigger.addEventListener 'mouseenter', =>
+      clearTimeout _closeTimer if _closeTimer
+      _openTimer = setTimeout (=> open = true; @_position()), @delay
+    trigger.addEventListener 'mouseleave', =>
+      clearTimeout _openTimer if _openTimer
+      _closeTimer = setTimeout (=> open = false), @closeDelay
+    trigger.addEventListener 'focus', =>
+      clearTimeout _closeTimer if _closeTimer
+      _openTimer = setTimeout (=> open = true; @_position()), @delay
+    trigger.addEventListener 'blur', =>
+      clearTimeout _openTimer if _openTimer
+      _closeTimer = setTimeout (=> open = false), @closeDelay
+
+  _position: ->
+    trigger = @_root?.querySelector('[data-trigger]')
+    floating = @_root?.querySelector('[data-content]')
+    return unless trigger and floating
+    @_root.style.position = 'relative'
+    tr = trigger.getBoundingClientRect()
+    cr = @_root.getBoundingClientRect()
+    floating.style.position = 'absolute'
+    floating.style.left = "0px"
+    floating.style.top = "#{tr.bottom - cr.top + 4}px"
+    floating.style.zIndex = '50'
+
+  ~>
+    return unless _ready
+    floating = @_root?.querySelector('[data-content]')
+    return unless floating
+    floating.hidden = not open
+    if open
+      floating.setAttribute 'data-open', ''
+      onEnter = => clearTimeout _closeTimer if _closeTimer
+      onLeave = => _closeTimer = setTimeout (=> open = false), @closeDelay
+      floating.addEventListener 'mouseenter', onEnter
+      floating.addEventListener 'mouseleave', onLeave
+      return ->
+        floating.removeEventListener 'mouseenter', onEnter
+        floating.removeEventListener 'mouseleave', onLeave
+    else
+      floating.removeAttribute 'data-open'
+
+  render
+    div ref: "_root"
+      slot

package/progress.rip

@@ -0,0 +1,25 @@
+# Progress — accessible headless progress bar
+#
+# Exposes progress value as CSS custom property for styling.
+# Ships zero CSS.
+#
+# Usage:
+#   Progress value: 0.65
+#   Progress value: 42, max: 100
+
+export Progress = component
+  @value := 0
+  @max := 1
+  @label := null
+
+  percent ~= Math.min(100, Math.max(0, (@value / @max) * 100))
+
+  render
+    div role: "progressbar"
+      aria-valuenow: @value
+      aria-valuemin: 0
+      aria-valuemax: @max
+      aria-label: @label?!
+      style: "--progress-value: #{@value}; --progress-percent: #{percent}%"
+      $complete: (percent >= 100)?!
+      slot

package/radio-group.rip

@@ -0,0 +1,67 @@
+# 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 := null
+  @disabled := false
+  @orientation := 'vertical'
+  @name := ''
+
+  _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
+    next = focused
+    switch e.key
+      when 'ArrowRight', 'ArrowDown'
+        e.preventDefault()
+        next = (focused + 1) %% len
+      when 'ArrowLeft', 'ArrowUp'
+        e.preventDefault()
+        next = (focused - 1) %% len
+      when 'Home'
+        e.preventDefault()
+        next = 0
+      when 'End'
+        e.preventDefault()
+        next = len - 1
+      else return
+    radios[next]?.focus()
+    @_select(_options[next]?.dataset.value)
+
+  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/resizable.rip

@@ -0,0 +1,123 @@
+# 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'
+  @minSize := 10
+  @maxSize := 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/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/skeleton.rip

@@ -0,0 +1,22 @@
+# 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 := null
+  @height := null
+  @circle := false
+  @label := '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