rip-lang 3.15.4 → 3.16.1

package/docs/ui/table.rip

@@ -1,27 +0,0 @@
-# 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:: string := ""
-  @striped:: boolean := false
-
-  render
-    div $striped: @striped?!
-      table
-        if @caption
-          caption @caption
-        slot

package/docs/ui/tabs.rip

@@ -1,113 +0,0 @@
-# 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:: any := null
-  @orientation:: "horizontal" | "vertical" := "horizontal"
-  @activation:: "automatic" | "manual" := "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
-    move = (nextId) =>
-      return unless nextId
-      tabs.find((t) -> t.dataset.tab is nextId)?.focus()
-      @select(nextId) if @activation is 'automatic'
-    ARIA.rovingNav e, {
-      next:   => move(@_nextEnabled(ids, idx,              1))
-      prev:   => move(@_nextEnabled(ids, idx,             -1))
-      first:  => move(@_nextEnabled(ids, ids.length - 1,   1))
-      last:   => move(@_nextEnabled(ids, 0,               -1))
-      select: => @select(ids[idx]) if @activation is 'manual'
-    }, @orientation
-
-  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/docs/ui/textarea.rip

@@ -1,48 +0,0 @@
-# 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:: string := ""
-  @placeholder:: string := ""
-  @disabled:: boolean := false
-  @required:: boolean := false
-  @rows:: number := 3
-  @autoResize:: boolean := 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/docs/ui/toast.rip

@@ -1,87 +0,0 @@
-# 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:: any[] := []
-  @placement:: "top-left" | "top-right" | "bottom-left" | "bottom-right" := "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:: Record<string, any> := {}
-
-  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/docs/ui/toggle-group.rip

@@ -1,71 +0,0 @@
-# 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:: any := null
-  @disabled:: boolean := false
-  @multiple:: boolean := false
-  @orientation:: "horizontal" | "vertical" := "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
-    ARIA.rovingNav e, {
-      next:  => opts[(focused + 1) %% len]?.focus()
-      prev:  => opts[(focused - 1) %% len]?.focus()
-      first: => opts[0]?.focus()
-      last:  => opts[len - 1]?.focus()
-    }, 'both'
-
-  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/docs/ui/toggle.rip

@@ -1,24 +0,0 @@
-# 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:: boolean := false
-  @disabled:: boolean := 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/docs/ui/toolbar.rip

@@ -1,38 +0,0 @@
-# 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" | "vertical" := "horizontal"
-  @label:: string := ""
-
-  _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
-    ARIA.rovingNav e, {
-      next:  => els[(focused + 1) %% len]?.focus()
-      prev:  => els[(focused - 1) %% len]?.focus()
-      first: => els[0]?.focus()
-      last:  => els[len - 1]?.focus()
-    }, @orientation
-
-  render
-    div role: "toolbar", aria-label: @label or undefined, aria-orientation: @orientation
-      $orientation: @orientation
-      slot

package/docs/ui/tooltip.rip

@@ -1,85 +0,0 @@
-# Tooltip — accessible headless tooltip with delay and positioning
-#
-# Shows on hover/focus with configurable delay. Uses aria-describedby and
-# native `popover="hint"` for top-layer behavior.
-# Exposes $open, $entering, $exiting. Ships zero CSS.
-#
-# Usage:
-#   Tooltip text: "Helpful info", placement: "top"
-#     button "Hover me"
-
-lastCloseTime = 0
-GROUP_TIMEOUT = 400
-
-export Tooltip = component
-  @text:: string := ""
-  @placement:: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right" := "top"
-  @delay:: number := 300
-  @offset:: number := 6
-  @hoverable:: boolean := false
-
-  open := false
-  entering := false
-  exiting := false
-  _showTimer := null
-  _hideTimer := null
-  _id =! "tip-#{Math.random().toString(36).slice(2, 8)}"
-
-  _applyPlacement: ->
-    [side, align] = @placement.split('-')
-    align ??= 'center'
-    ARIA.position @_trigger, @_tip, placement: "#{side} #{align}", offset: @offset
-
-  show: ->
-    clearTimeout _hideTimer if _hideTimer
-    delay = if (Date.now() - lastCloseTime) < GROUP_TIMEOUT then 0 else @delay
-    _showTimer = setTimeout =>
-      open = true
-      entering = true
-      setTimeout =>
-        entering = false
-      , 0
-    , delay
-
-  hide: ->
-    clearTimeout _showTimer if _showTimer
-    exiting = true
-    _hideTimer = setTimeout =>
-      open = false
-      exiting = false
-      lastCloseTime = Date.now()
-    , 150
-
-  _cancelHide: ->
-    clearTimeout _hideTimer if _hideTimer
-    exiting = false
-
-  beforeUnmount: ->
-    clearTimeout _showTimer if _showTimer
-    clearTimeout _hideTimer if _hideTimer
-
-  ~>
-    if @_tip
-      @_tip.setAttribute 'popover', 'hint'
-      @_applyPlacement()
-      if open then @_tip.setAttribute('data-open', '') else @_tip.removeAttribute('data-open')
-      ARIA.bindPopover open, (=> @_tip), ((isOpen) => open = isOpen), (=> @_trigger)
-
-  render
-    .
-      div ref: "_trigger"
-        aria-describedby: open ? _id : undefined
-        @mouseenter: @show
-        @mouseleave: @hide
-        @focusin: @show
-        @focusout: @hide
-        slot
-
-      div ref: "_tip", id: _id, role: "tooltip", style: "position:fixed;margin:0;inset:auto"
-        $open: open?!
-        $entering: entering?!
-        $exiting: exiting?!
-        $placement: @placement
-        @mouseenter: (=> @_cancelHide() if @hoverable)
-        @mouseleave: (=> @hide() if @hoverable)
-        @text