@rip-lang/ui 0.3.19 → 0.3.21

package/nav-menu.rip

@@ -0,0 +1,129 @@
+# NavigationMenu — accessible headless site navigation
+#
+# Horizontal navigation with optional dropdown sub-menus. Triggers show
+# content on hover or click. Ships zero CSS.
+#
+# Usage:
+#   NavigationMenu
+#     a $link: true, href: "/", "Home"
+#     div $trigger: "products"
+#       div $panel: true
+#         a href: "/ui", "ui"
+#         a href: "/tools", "Tools"
+#     a $link: true, href: "/about", "About"
+
+export NavigationMenu = component
+  @orientation := 'horizontal'
+  @hoverDelay := 200
+  @hoverCloseDelay := 300
+
+  activePanel := null
+  _ready := false
+  _hoverTimer := null
+  _closeTimer := null
+
+  _navItems ~=
+    return [] unless @_slot
+    Array.from(@_slot.children).filter (el) ->
+      el.dataset?.link? or el.dataset?.trigger?
+
+  mounted: -> _ready = true
+
+  beforeUnmount: ->
+    clearTimeout _hoverTimer if _hoverTimer
+    clearTimeout _closeTimer if _closeTimer
+
+  _openPanel: (id) ->
+    clearTimeout _closeTimer if _closeTimer
+    activePanel = id
+    requestAnimationFrame => @_position(id)
+
+  _closePanel: ->
+    activePanel = null
+
+  _scheduleOpen: (id) ->
+    clearTimeout _closeTimer if _closeTimer
+    _hoverTimer = setTimeout (=> @_openPanel(id)), @hoverDelay
+
+  _scheduleClose: ->
+    clearTimeout _hoverTimer if _hoverTimer
+    _closeTimer = setTimeout (=> @_closePanel()), @hoverCloseDelay
+
+  _cancelClose: ->
+    clearTimeout _closeTimer if _closeTimer
+
+  _position: (id) ->
+    trigger = @_root?.querySelector("[data-nav-trigger=\"#{id}\"]")
+    panel = @_root?.querySelector("[data-nav-panel=\"#{id}\"]")
+    return unless trigger and panel
+    tr = trigger.getBoundingClientRect()
+    panel.style.position = 'fixed'
+    panel.style.left = "#{tr.left}px"
+    panel.style.top = "#{tr.bottom + 2}px"
+
+  _onKeydown: (e) ->
+    navBtns = @_root?.querySelectorAll('[data-nav-trigger], [data-nav-link]')
+    return unless navBtns?.length
+    focused = Array.from(navBtns).indexOf(document.activeElement)
+    return if focused < 0
+    len = navBtns.length
+    switch e.key
+      when 'ArrowRight'
+        e.preventDefault()
+        navBtns[(focused + 1) %% len]?.focus()
+      when 'ArrowLeft'
+        e.preventDefault()
+        navBtns[(focused - 1) %% len]?.focus()
+      when 'ArrowDown'
+        triggerId = document.activeElement?.dataset?.navTrigger
+        if triggerId
+          e.preventDefault()
+          @_openPanel(triggerId)
+          @_root?.querySelector("[data-nav-panel=\"#{triggerId}\"] a, [data-nav-panel=\"#{triggerId}\"] button")?.focus()
+      when 'Escape'
+        @_closePanel()
+
+  ~>
+    return unless _ready
+    if activePanel
+      onDown = (e) =>
+        unless @_root?.contains(e.target)
+          @_closePanel()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    nav ref: "_root", role: "navigation", aria-orientation: @orientation
+      $orientation: @orientation
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      for navItem, nIdx in _navItems
+        if navItem.dataset.link?
+          a $nav-link: true, href: navItem.getAttribute('href') or '#', tabindex: "0"
+            @keydown: @_onKeydown
+            = navItem.textContent
+        else if navItem.dataset.trigger?
+          . style: "display:inline-block;position:relative"
+            button $nav-trigger: navItem.dataset.trigger, tabindex: "0"
+              aria-expanded: activePanel is navItem.dataset.trigger
+              $open: (activePanel is navItem.dataset.trigger)?!
+              @click: (=> if activePanel is navItem.dataset.trigger then @_closePanel() else @_openPanel(navItem.dataset.trigger))
+              @mouseenter: (=> @_scheduleOpen(navItem.dataset.trigger))
+              @mouseleave: (=> @_scheduleClose())
+              @keydown: @_onKeydown
+              = navItem.dataset.trigger
+
+            if activePanel is navItem.dataset.trigger
+              div $nav-panel: navItem.dataset.trigger, $open: true
+                style: "position:fixed;z-index:50"
+                @mouseenter: (=> @_cancelClose())
+                @mouseleave: (=> @_scheduleClose())
+                for link, lIdx in Array.from(navItem.querySelectorAll('a, [data-link]'))
+                  a href: link.getAttribute('href') or '#', tabindex: "0"
+                    @keydown: (e) =>
+                      if e.key is 'Escape'
+                        @_closePanel()
+                        @_root?.querySelector("[data-nav-trigger=\"#{navItem.dataset.trigger}\"]")?.focus()
+                    = link.textContent

package/number-field.rip

@@ -0,0 +1,162 @@
+# NumberField — accessible headless number input with stepper buttons
+#
+# Increment/decrement with click, hold-to-repeat, and keyboard.
+# Supports min/max/step clamping and Shift/Alt step modifiers.
+# Ships zero CSS.
+#
+# Usage:
+#   NumberField value <=> quantity
+#   NumberField value <=> price, min: 0, max: 1000, step: 0.01
+
+START_DELAY = 400
+TICK_DELAY  = 60
+
+export NumberField = component
+  @value := 0
+  @min := null
+  @max := null
+  @step := 1
+  @smallStep := 0.1
+  @largeStep := 10
+  @disabled := false
+  @readOnly := false
+  @name := null
+
+  _timer = null
+  _interval = null
+  _id =! "nf-#{Math.random().toString(36).slice(2, 8)}"
+
+  _clamp: (v) ->
+    v = Math.max(@min, v) if @min?
+    v = Math.min(@max, v) if @max?
+    v
+
+  _roundToStep: (v) ->
+    base = @min ?? 0
+    rounded = Math.round((v - base) / @step) * @step + base
+    precision = String(@step).split('.')[1]?.length or 0
+    parseFloat rounded.toFixed(precision)
+
+  _stepAmount: (e) ->
+    if e?.altKey then @smallStep
+    else if e?.shiftKey then @largeStep
+    else @step
+
+  increment: (amount) ->
+    return if @disabled or @readOnly
+    @value = @_clamp(@_roundToStep(+@value + amount))
+    @emit 'input', @value
+
+  decrement: (amount) ->
+    return if @disabled or @readOnly
+    @value = @_clamp(@_roundToStep(+@value - amount))
+    @emit 'input', @value
+
+  _startRepeat: (dir, e) ->
+    amount = @_stepAmount(e)
+    tick = => if dir > 0 then @increment(amount) else @decrement(amount)
+    tick()
+    _timer = setTimeout =>
+      _interval = setInterval tick, TICK_DELAY
+    , START_DELAY
+
+  _stopRepeat: ->
+    clearTimeout _timer if _timer
+    clearInterval _interval if _interval
+    _timer = null
+    _interval = null
+    @emit 'change', @value
+
+  _onIncDown: (e) ->
+    return if @disabled or @readOnly or e.button isnt 0
+    e.preventDefault()
+    @_input?.focus()
+    @_startRepeat 1, e
+    onUp = =>
+      @_stopRepeat()
+      document.removeEventListener 'pointerup', onUp
+    document.addEventListener 'pointerup', onUp
+
+  _onDecDown: (e) ->
+    return if @disabled or @readOnly or e.button isnt 0
+    e.preventDefault()
+    @_input?.focus()
+    @_startRepeat -1, e
+    onUp = =>
+      @_stopRepeat()
+      document.removeEventListener 'pointerup', onUp
+    document.addEventListener 'pointerup', onUp
+
+  onKeydown: (e) ->
+    return if @disabled or @readOnly
+    amount = @_stepAmount(e)
+    switch e.key
+      when 'ArrowUp'
+        e.preventDefault()
+        @increment(amount)
+        @emit 'change', @value
+      when 'ArrowDown'
+        e.preventDefault()
+        @decrement(amount)
+        @emit 'change', @value
+      when 'PageUp'
+        e.preventDefault()
+        @increment(@largeStep)
+        @emit 'change', @value
+      when 'PageDown'
+        e.preventDefault()
+        @decrement(@largeStep)
+        @emit 'change', @value
+      when 'Home'
+        if @min?
+          e.preventDefault()
+          @value = @min
+          @emit 'change', @value
+      when 'End'
+        if @max?
+          e.preventDefault()
+          @value = @max
+          @emit 'change', @value
+
+  _onBlur: ->
+    val = parseFloat @_input?.value
+    unless isNaN(val)
+      @value = @_clamp(@_roundToStep(val))
+    @emit 'change', @value
+
+  _ready := false
+
+  mounted: -> _ready = true
+
+  ~>
+    return unless _ready
+    @_input?.value = String(@value)
+
+  beforeUnmount: -> @_stopRepeat()
+
+  render
+    div role: "group", $disabled: @disabled?!, $readonly: @readOnly?!
+      button aria-label: "Decrease", tabindex: "-1"
+        $decrement: true
+        aria-controls: _id
+        disabled: @disabled or (@min? and @value <= @min)
+        @pointerdown: @_onDecDown
+
+      input ref: "_input", id: _id, type: "text", inputmode: "numeric"
+        name: @name?!
+        aria-roledescription: "Number field"
+        aria-valuenow: @value
+        aria-valuemin: @min?!
+        aria-valuemax: @max?!
+        aria-disabled: @disabled?!
+        aria-readonly: @readOnly?!
+        disabled: @disabled
+        readonly: @readOnly
+        @keydown: @onKeydown
+        @blur: @_onBlur
+
+      button aria-label: "Increase", tabindex: "-1"
+        $increment: true
+        aria-controls: _id
+        disabled: @disabled or (@max? and @value >= @max)
+        @pointerdown: @_onIncDown

package/otp-field.rip

@@ -0,0 +1,89 @@
+# OTPField — accessible headless one-time password input
+#
+# Multi-digit code input with auto-advance, backspace navigation, and
+# paste support. Each digit gets its own input box. Ships zero CSS.
+#
+# Usage:
+#   OTPField length: 6, value <=> code, @complete: handleVerify
+
+export OTPField = component
+  @length := 6
+  @value := ''
+  @disabled := false
+  @mask := false
+
+  _id =! "otp-#{Math.random().toString(36).slice(2, 8)}"
+
+  _getInputs: ->
+    return [] unless @_root
+    Array.from(@_root.querySelectorAll('input'))
+
+  _focusAt: (idx) ->
+    inputs = @_getInputs()
+    inputs[idx]?.focus()
+    inputs[idx]?.select()
+
+  _updateValue: ->
+    inputs = @_getInputs()
+    digits = inputs.map (el) -> el.value
+    @value = digits.join('')
+    @emit 'input', @value
+    if @value.length is @length and digits.every (d) -> d.length is 1
+      @emit 'complete', @value
+
+  _onInput: (e, idx) ->
+    ch = e.target.value.slice(-1)
+    e.target.value = ch
+    @_updateValue()
+    @_focusAt(idx + 1) if ch and idx < @length - 1
+
+  _onKeydown: (e, idx) ->
+    switch e.key
+      when 'Backspace'
+        if not e.target.value and idx > 0
+          @_focusAt(idx - 1)
+          inputs = @_getInputs()
+          inputs[idx - 1]?.value = ''
+          @_updateValue()
+      when 'ArrowLeft'
+        e.preventDefault()
+        @_focusAt(idx - 1) if idx > 0
+      when 'ArrowRight'
+        e.preventDefault()
+        @_focusAt(idx + 1) if idx < @length - 1
+      when 'Home'
+        e.preventDefault()
+        @_focusAt(0)
+      when 'End'
+        e.preventDefault()
+        @_focusAt(@length - 1)
+
+  _onPaste: (e) ->
+    e.preventDefault()
+    text = (e.clipboardData?.getData('text') or '').replace(/\D/g, '').slice(0, @length)
+    return unless text
+    inputs = @_getInputs()
+    for ch, idx in text.split('')
+      inputs[idx]?.value = ch
+    @_updateValue()
+    @_focusAt(Math.min(text.length, @length - 1))
+
+  _onFocus: (e) -> e.target.select()
+
+  render
+    div ref: "_root", role: "group", aria-label: "One-time password"
+      $disabled: @disabled?!
+      $complete: (@value.length is @length)?!
+      for idx in [0...@length]
+        input id: "#{_id}-#{idx}"
+          type: if @mask then "password" else "text"
+          inputmode: "numeric"
+          autocomplete: "one-time-code"
+          maxlength: "1"
+          aria-label: "Digit #{idx + 1} of #{@length}"
+          disabled: @disabled
+          $filled: (@value[idx])?!
+          @input: (e) => @_onInput(e, idx)
+          @keydown: (e) => @_onKeydown(e, idx)
+          @paste: @_onPaste
+          @focus: @_onFocus

package/package.json

@@ -1,22 +1,21 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.3.19",
-  "description": "Zero-build reactive web framework — rip.js + ui.rip + launch(url)",
+  "version": "0.3.21",
+  "description": "Headless, accessible UI components written in Rip — zero CSS, zero dependencies",
   "type": "module",
-  "main": "ui.rip",
-  "exports": {
-    ".": "./ui.rip",
-    "./serve": "./serve.rip"
-  },
-  "scripts": {
-    "test": "echo \"Tests coming soon\" && exit 0"
-  },
   "keywords": [
     "ui",
-    "framework",
-    "reactive",
-    "signals",
-    "no-build",
+    "headless",
+    "accessible",
+    "components",
+    "widgets",
+    "aria",
+    "wai-aria",
+    "select",
+    "dialog",
+    "grid",
+    "combobox",
+    "tabs",
     "rip",
     "rip-lang"
   ],
@@ -31,19 +30,11 @@
   },
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
+  "dependencies": {
+    "rip-lang": ">=3.13.76"
+  },
   "files": [
-    "ui.rip",
-    "serve.rip",
-    "dist/rip-ui.min.js",
-    "dist/rip-ui.min.js.br",
+    "*.rip",
     "README.md"
-  ],
-  "peerDependencies": {
-    "@rip-lang/api": ">=1.1.10"
-  },
-  "peerDependenciesMeta": {
-    "@rip-lang/api": {
-      "optional": true
-    }
-  }
+  ]
 }

package/pagination.rip

@@ -0,0 +1,123 @@
+# Pagination — accessible headless page navigation
+#
+# Renders page buttons with prev/next and ellipsis gaps.
+# Ships zero CSS.
+#
+# Usage:
+#   Pagination page <=> currentPage, total: 100, perPage: 10
+#   Pagination page <=> currentPage, total: 500, perPage: 20, siblingCount: 2
+
+export Pagination = component
+  @page := 1
+  @total := 0
+  @perPage := 10
+  @siblingCount := 1
+
+  totalPages ~= Math.max(1, Math.ceil(@total / @perPage))
+  _ready := false
+
+  _range: (start, fin) ->
+    len = fin - start + 1
+    Array.from {length: len}, (_, i) -> start + i
+
+  visiblePages ~=
+    tp = totalPages
+    sibs = @siblingCount
+    current = @page
+
+    totalNumbers = sibs * 2 + 5
+    return @_range(1, tp) if tp <= totalNumbers
+
+    leftSib  = Math.max(current - sibs, 1)
+    rightSib = Math.min(current + sibs, tp)
+
+    showLeftDots  = leftSib > 2
+    showRightDots = rightSib < tp - 1
+
+    if not showLeftDots and showRightDots
+      leftCount = 3 + 2 * sibs
+      leftRange = @_range(1, leftCount)
+      return [...leftRange, -1, tp]
+
+    if showLeftDots and not showRightDots
+      rightCount = 3 + 2 * sibs
+      rightRange = @_range(tp - rightCount + 1, tp)
+      return [1, -2, ...rightRange]
+
+    midRange = @_range(leftSib, rightSib)
+    [1, -2, ...midRange, -1, tp]
+
+  goto: (pg) ->
+    pg = Math.max(1, Math.min(pg, totalPages))
+    return if pg is @page
+    @page = pg
+    @emit 'change', @page
+
+  onKeydown: (e) ->
+    switch e.key
+      when 'ArrowLeft'
+        e.preventDefault()
+        @goto(@page - 1)
+      when 'ArrowRight'
+        e.preventDefault()
+        @goto(@page + 1)
+      when 'Home'
+        e.preventDefault()
+        @goto(1)
+      when 'End'
+        e.preventDefault()
+        @goto(totalPages)
+
+  mounted: ->
+    _ready = true
+
+  _prevPages = null
+
+  _rebuild: (inner) ->
+    frag = document.createDocumentFragment()
+    for pg in visiblePages
+      if pg < 0
+        el = document.createElement 'span'
+        el.setAttribute 'data-ellipsis', ''
+        el.textContent = '...'
+      else
+        el = document.createElement 'button'
+        el.setAttribute 'aria-label', "Page #{pg}"
+        el.setAttribute 'data-page', ''
+        el.textContent = "#{pg}"
+        el.addEventListener 'click', => @goto(pg)
+      frag.appendChild el
+    inner.replaceChildren frag
+    _prevPages = visiblePages.join ','
+
+  _syncActive: (inner) ->
+    for btn in inner.querySelectorAll('[data-page]')
+      pg = parseInt btn.textContent
+      if pg is @page
+        btn.setAttribute 'aria-current', 'page'
+        btn.setAttribute 'data-active', ''
+      else
+        btn.removeAttribute 'aria-current'
+        btn.removeAttribute 'data-active'
+
+  ~>
+    return unless _ready
+    inner = @_nav?.querySelector('[data-pages]')
+    return unless inner
+
+    key = visiblePages.join ','
+    if key isnt _prevPages
+      @_rebuild inner
+    @_syncActive inner
+
+  render
+    nav ref: "_nav", aria-label: "Pagination", @keydown: @onKeydown
+      button $prev: true, aria-label: "Previous page"
+        disabled: @page <= 1
+        $disabled: (@page <= 1)?!
+        @click: (=> @goto(@page - 1))
+      . $pages: true
+      button $next: true, aria-label: "Next page"
+        disabled: @page >= totalPages
+        $disabled: (@page >= totalPages)?!
+        @click: (=> @goto(@page + 1))

package/popover.rip

@@ -0,0 +1,143 @@
+# Popover — accessible headless popover with anchor positioning
+#
+# Positions itself relative to the trigger. Dismisses on Escape or click outside.
+# Exposes $open, $placement on content. Ships zero CSS.
+#
+# Usage:
+#   Popover placement: "bottom-start"
+#     button $trigger: true, "Click me"
+#     div $content: true
+#       p "Popover content"
+
+export Popover = component
+  @placement := 'bottom-start'
+  @offset := 4
+  @disabled := false
+  @openOnHover := false
+  @hoverDelay := 300
+  @hoverCloseDelay := 200
+
+  open := false
+  _ready := false
+  _hoverTimer := null
+  _hoverCloseTimer := null
+  _id =! "pop-#{Math.random().toString(36).slice(2, 8)}"
+
+  mounted: ->
+    _ready = true
+    trigger = @_content?.querySelector('[data-trigger]')
+    if trigger
+      trigger.setAttribute 'aria-expanded', false
+      trigger.setAttribute 'aria-haspopup', 'dialog'
+      trigger.addEventListener 'click', => @toggle()
+      trigger.addEventListener 'keydown', (e) =>
+        if e.key in ['Enter', ' ', 'ArrowDown']
+          e.preventDefault()
+          @toggle()
+      if @openOnHover
+        trigger.addEventListener 'mouseenter', =>
+          clearTimeout _hoverCloseTimer if _hoverCloseTimer
+          _hoverTimer = setTimeout (=> @openPopover()), @hoverDelay
+        trigger.addEventListener 'mouseleave', =>
+          clearTimeout _hoverTimer if _hoverTimer
+          _hoverCloseTimer = setTimeout (=> @close()), @hoverCloseDelay
+
+  toggle: ->
+    return if @disabled
+    if open then @close() else @openPopover()
+
+  openPopover: ->
+    open = true
+    setTimeout => @_position(), 0
+
+  close: ->
+    open = false
+    @_content?.querySelector('[data-trigger]')?.focus()
+
+  _position: ->
+    trigger = @_content?.querySelector('[data-trigger]')
+    floating = @_content?.querySelector('[data-content]')
+    return unless trigger and floating
+    @_content.style.position = 'relative'
+    tr = trigger.getBoundingClientRect()
+    cr = @_content.getBoundingClientRect()
+    fl = floating.getBoundingClientRect()
+    [side, align] = @placement.split('-')
+    align ?= 'center'
+    gap = @offset
+
+    x = switch side
+      when 'bottom', 'top'
+        switch align
+          when 'start' then tr.left - cr.left
+          when 'end' then tr.right - cr.left - fl.width
+          else tr.left - cr.left + (tr.width - fl.width) / 2
+      when 'right' then tr.right - cr.left + gap
+      when 'left' then tr.left - cr.left - fl.width - gap
+
+    y = switch side
+      when 'bottom' then tr.bottom - cr.top + gap
+      when 'top' then tr.top - cr.top - fl.height - gap
+      when 'left', 'right'
+        switch align
+          when 'start' then tr.top - cr.top
+          when 'end' then tr.bottom - cr.top - fl.height
+          else tr.top - cr.top + (tr.height - fl.height) / 2
+
+    if side is 'bottom' and tr.bottom + gap + fl.height > window.innerHeight
+      y = tr.top - cr.top - fl.height - gap
+    if side is 'top' and tr.top - fl.height - gap < 0
+      y = tr.bottom - cr.top + gap
+    if side is 'right' and tr.right + gap + fl.width > window.innerWidth
+      x = tr.left - cr.left - fl.width - gap
+    if side is 'left' and tr.left - fl.width - gap < 0
+      x = tr.right - cr.left + gap
+
+    x = Math.max(4 - cr.left, Math.min(x, window.innerWidth - cr.left - fl.width - 4))
+
+    floating.style.position = 'absolute'
+    floating.style.left = "#{x}px"
+    floating.style.top = "#{y}px"
+    floating.style.zIndex = '50'
+
+  ~>
+    return unless _ready
+    trigger = @_content?.querySelector('[data-trigger]')
+    floating = @_content?.querySelector('[data-content]')
+    if trigger
+      trigger.setAttribute 'aria-expanded', !!open
+    if floating
+      floating.hidden = not open
+      if open
+        floating.setAttribute 'data-open', ''
+        floating.setAttribute 'data-placement', @placement
+        heading = floating.querySelector('h1,h2,h3,h4,h5,h6')
+        if heading
+          heading.id ?= "#{_id}-title"
+          floating.setAttribute 'aria-labelledby', heading.id
+        desc = floating.querySelector('p')
+        if desc
+          desc.id ?= "#{_id}-desc"
+          floating.setAttribute 'aria-describedby', desc.id
+      else
+        floating.removeAttribute 'data-open'
+
+  ~>
+    return unless _ready
+    if open
+      onDown = (e) =>
+        trigger = @_content?.querySelector('[data-trigger]')
+        floating = @_content?.querySelector('[data-content]')
+        unless trigger?.contains(e.target) or floating?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  onKeydown: (e) ->
+    if e.key is 'Escape' and open
+      e.preventDefault()
+      @close()
+
+  render
+    div ref: "_content"
+      slot