rip-lang 3.15.4 → 3.16.1

package/docs/ui/nav-menu.rip

@@ -1,126 +0,0 @@
-# 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" | "vertical" := "horizontal"
-  @hoverDelay:: number := 200
-  @hoverCloseDelay:: number := 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) ->
-    ARIA.positionBelow @_root?.querySelector("[data-nav-trigger=\"#{id}\"]"),
-                       @_root?.querySelector("[data-nav-panel=\"#{id}\"]"), 2, false
-
-  _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) => @_closePanel() unless @_root?.contains(e.target)
-      onScroll = => @_position(activePanel)
-      document.addEventListener 'mousedown', onDown
-      window.addEventListener   'scroll',    onScroll, true
-      return ->
-        document.removeEventListener 'mousedown', onDown
-        window.removeEventListener   'scroll',    onScroll, true
-
-  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/docs/ui/number-field.rip

@@ -1,162 +0,0 @@
-# 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:: number := 0
-  @min:: any := null
-  @max:: any := null
-  @step:: number := 1
-  @smallStep:: number := 0.1
-  @largeStep:: number := 10
-  @disabled:: boolean := false
-  @readOnly:: boolean := false
-  @name:: any := 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/docs/ui/otp-field.rip

@@ -1,89 +0,0 @@
-# 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:: number := 6
-  @value:: string := ""
-  @disabled:: boolean := false
-  @mask:: boolean := 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/docs/ui/pagination.rip

@@ -1,123 +0,0 @@
-# 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:: number := 1
-  @total:: number := 0
-  @perPage:: number := 10
-  @siblingCount:: number := 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/docs/ui/popover.rip

@@ -1,93 +0,0 @@
-# Popover — accessible headless popover with anchor positioning
-#
-# Uses the native Popover API (top-layer + light-dismiss) and CSS anchor
-# positioning. 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:: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right" := "bottom-start"
-  @offset:: number := 4
-  @disabled:: boolean := false
-  @openOnHover:: boolean := false
-  @hoverDelay:: number := 300
-  @hoverCloseDelay:: number := 200
-
-  open := false
-  _ready := false
-  _hoverTimer := null
-  _hoverCloseTimer := null
-  _id =! "pop-#{Math.random().toString(36).slice(2, 8)}"
-
-  _applyPlacement: ->
-    trigger = @_content?.querySelector('[data-trigger]')
-    floating = @_content?.querySelector('[data-content]')
-    [side, align] = @placement.split('-')
-    align ??= 'center'
-    ARIA.position trigger, floating, placement: "#{side} #{align}", offset: @offset
-
-  mounted: ->
-    _ready = true
-    trigger = @_content?.querySelector('[data-trigger]')
-    floating = @_content?.querySelector('[data-content]')
-    if trigger and floating
-      floating.id = _id
-      floating.setAttribute 'popover', 'auto'
-      trigger.setAttribute 'aria-expanded', false
-      trigger.setAttribute 'aria-haspopup', 'dialog'
-      trigger.setAttribute 'aria-controls', _id
-      trigger.addEventListener 'click', =>
-        return if @disabled
-        open = not open
-      trigger.addEventListener 'keydown', (e) =>
-        if e.key in ['Enter', ' ', 'ArrowDown']
-          e.preventDefault()
-          return if @disabled
-          open = not open
-      if @openOnHover
-        trigger.addEventListener 'mouseenter', =>
-          clearTimeout _hoverCloseTimer if _hoverCloseTimer
-          _hoverTimer = setTimeout (=> open = true), @hoverDelay
-        trigger.addEventListener 'mouseleave', =>
-          clearTimeout _hoverTimer if _hoverTimer
-          _hoverCloseTimer = setTimeout (=> open = false), @hoverCloseDelay
-      @_applyPlacement()
-
-  toggle: ->
-    return if @disabled
-    open = not open
-
-  openPopover: ->
-    open = true
-
-  close: ->
-    open = false
-
-  ~>
-    return unless _ready
-    trigger = @_content?.querySelector('[data-trigger]')
-    floating = @_content?.querySelector('[data-content]')
-    if trigger
-      trigger.setAttribute 'aria-expanded', !!open
-    if floating
-      floating.setAttribute 'data-placement', @placement
-      if open then floating.setAttribute 'data-open', '' else floating.removeAttribute 'data-open'
-      ARIA.wireAria floating, _id
-      @_applyPlacement()
-
-  ~>
-    return unless _ready
-    ARIA.bindPopover open, (=> @_content?.querySelector('[data-content]')), ((isOpen) => open = isOpen), (=> @_content?.querySelector('[data-trigger]'))
-
-  onKeydown: (e) ->
-    if e.key is 'Escape' and open
-      e.preventDefault()
-      @close()
-
-  render
-    div ref: "_content"
-      slot

package/docs/ui/preview-card.rip

@@ -1,75 +0,0 @@
-# PreviewCard — accessible headless hover preview card
-#
-# Shows a floating card on hover/focus of a trigger element. Dismisses
-# on mouse leave or blur. Uses native `popover="hint"` for top-layer behavior.
-# 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:: number := 400
-  @closeDelay:: number := 200
-
-  open := false
-  _ready := false
-  _openTimer := null
-  _closeTimer := null
-  _id =! "pc-#{Math.random().toString(36).slice(2, 8)}"
-
-  beforeUnmount: ->
-    clearTimeout _openTimer if _openTimer
-    clearTimeout _closeTimer if _closeTimer
-
-  mounted: ->
-    _ready = true
-    trigger = @_root?.querySelector('[data-trigger]')
-    floating = @_root?.querySelector('[data-content]')
-    return unless trigger and floating
-    floating.id = _id
-    floating.setAttribute 'popover', 'hint'
-    trigger.setAttribute 'aria-controls', _id
-    trigger.setAttribute 'aria-expanded', false
-    trigger.addEventListener 'mouseenter', =>
-      clearTimeout _closeTimer if _closeTimer
-      _openTimer = setTimeout (=> open = true), @delay
-    trigger.addEventListener 'mouseleave', =>
-      clearTimeout _openTimer if _openTimer
-      _closeTimer = setTimeout (=> open = false), @closeDelay
-    @_applyPlacement()
-    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
-
-  _applyPlacement: ->
-    trigger = @_root?.querySelector('[data-trigger]')
-    floating = @_root?.querySelector('[data-content]')
-    ARIA.position trigger, floating, placement: 'bottom start', offset: 4
-
-  ~>
-    return unless _ready
-    trigger = @_root?.querySelector('[data-trigger]')
-    floating = @_root?.querySelector('[data-content]')
-    return unless floating and trigger
-    trigger.setAttribute 'aria-expanded', !!open
-    @_applyPlacement()
-    if open then floating.setAttribute('data-open', '') else floating.removeAttribute('data-open')
-    ARIA.bindPopover open, (=> floating), ((isOpen) => open = isOpen), (=> trigger)
-    if 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
-
-  render
-    div ref: "_root"
-      slot

package/docs/ui/progress.rip

@@ -1,25 +0,0 @@
-# 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:: number := 0
-  @max:: number := 1
-  @label:: any := 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