rip-lang 3.13.119 → 3.13.121

package/docs/ui/accordion.rip

@@ -0,0 +1,103 @@
+# Accordion — accessible headless expand/collapse widget
+#
+# Supports single or multiple expanded sections. Keyboard: Enter/Space to
+# toggle, ArrowDown/Up to move between triggers. Exposes $open on items.
+# Ships zero CSS.
+#
+# Usage:
+#   Accordion multiple: false
+#     div $item: "a"
+#       button $trigger: true, "Section A"
+#       div $content: true
+#         p "Content A"
+#     div $item: "b"
+#       button $trigger: true, "Section B"
+#       div $content: true
+#         p "Content B"
+
+export Accordion = component
+  @multiple:: boolean := false
+
+  openItems := new Set()
+  _ready    := false
+  _id =! "acc-#{Math.random().toString(36).slice(2, 8)}"
+
+  mounted: ->
+    _ready = true
+    @_content?.querySelectorAll('[data-trigger]').forEach (trigger) =>
+      item = trigger.closest('[data-item]')
+      return unless item
+      id = item.dataset.item
+      trigger.addEventListener 'click', =>
+        return if item.hasAttribute('data-disabled')
+        @toggle(id)
+      trigger.addEventListener 'keydown', (e) => @onTriggerKeydown(e, id)
+
+  ~>
+    return unless _ready
+    @_content?.querySelectorAll('[data-item]').forEach (item) =>
+      id = item.dataset.item
+      isOpen = openItems.has(id)
+      item.toggleAttribute 'data-open', isOpen
+      trigger = item.querySelector('[data-trigger]')
+      content = item.querySelector('[data-content]')
+      triggerId = "#{_id}-trigger-#{id}"
+      panelId   = "#{_id}-panel-#{id}"
+      if trigger
+        isDisabled = item.hasAttribute('data-disabled')
+        trigger.id = triggerId
+        trigger.setAttribute 'aria-expanded', isOpen
+        trigger.setAttribute 'aria-controls', panelId
+        if isDisabled then trigger.setAttribute 'aria-disabled', true else trigger.removeAttribute 'aria-disabled'
+        trigger.tabIndex = if isDisabled then -1 else 0
+      if content
+        content.id = panelId
+        content.hidden = if isOpen then false else 'until-found'
+        content.setAttribute 'role', 'region'
+        content.setAttribute 'aria-labelledby', triggerId
+        if isOpen
+          rect = content.getBoundingClientRect()
+          content.style.setProperty '--accordion-panel-height', "#{rect.height}px"
+          content.style.setProperty '--accordion-panel-width', "#{rect.width}px"
+
+  toggle: (id) ->
+    if openItems.has(id)
+      openItems.delete(id)
+    else
+      openItems.clear() unless @multiple
+      openItems.add(id)
+    openItems = new Set(openItems)
+    @emit 'change', Array.from(openItems)
+
+  isOpen: (id) ->
+    openItems.has(id)
+
+  onTriggerKeydown: (e, id) ->
+    disabled = e.currentTarget.closest('[data-item]')?.hasAttribute('data-disabled')
+    ARIA.rovingNav e, {
+      next:   => @_focusNext(1)
+      prev:   => @_focusNext(-1)
+      first:  => @_focusTrigger(0)
+      last:   => @_focusTrigger(-1)
+      select: => @toggle(id) unless disabled
+    }, 'vertical'
+
+  _triggers: ->
+    return [] unless @_content
+    Array.from(@_content.querySelectorAll('[data-trigger]'))
+
+  _focusNext: (dir) ->
+    triggers = @_triggers()
+    idx = triggers.indexOf(document.activeElement)
+    return if idx is -1
+    next = (idx + dir) %% triggers.length
+    triggers[next]?.focus()
+
+  _focusTrigger: (idx) ->
+    triggers = @_triggers()
+    target = if idx < 0 then triggers[triggers.length - 1] else triggers[idx]
+    target?.focus()
+
+  render
+    div ref: "_content"
+      slot

package/docs/ui/alert-dialog.rip

@@ -0,0 +1,53 @@
+# AlertDialog — accessible headless non-dismissable modal
+#
+# A Dialog variant that requires explicit user action to close.
+# Cannot be dismissed by clicking outside or pressing Escape.
+# Use for destructive confirmations, unsaved changes, etc.
+# Ships zero CSS.
+#
+# Usage:
+#   AlertDialog open <=> showConfirm
+#     h2 "Delete account?"
+#     p "This action cannot be undone."
+#     button @click: (=> showConfirm = false), "Cancel"
+#     button @click: handleDelete, "Delete"
+
+export AlertDialog = component
+  @open:: boolean := false
+  @initialFocus:: any := null
+
+  _prevFocus = null
+  _id =! "adlg-#{Math.random().toString(36).slice(2, 8)}"
+
+  ~>
+    ARIA.bindDialog @open, (=> @_dialog), ((isOpen) =>
+      if not isOpen and @open
+        @open = false
+        @emit 'close'
+    ), false
+
+  ~>
+    if @open
+      _prevFocus = document.activeElement
+      ARIA.lockScroll(this)
+      requestAnimationFrame =>
+        panel = @_dialog
+        if panel
+          ARIA.wireAria panel, _id
+          panel.setAttribute 'role', 'alertdialog'
+          if @initialFocus
+            target = if typeof @initialFocus is 'string' then panel.querySelector(@initialFocus) else @initialFocus
+            target?.focus()
+          else
+            panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')?[0]?.focus()
+      return ->
+        ARIA.unlockScroll(this)
+        _prevFocus?.focus()
+
+  close: ->
+    @open = false
+    @emit 'close'
+
+  render
+    dialog ref: "_dialog", $open: @open?!
+      slot

package/docs/ui/autocomplete.rip

@@ -0,0 +1,115 @@
+# Autocomplete — accessible headless suggestion input
+#
+# Like Combobox but the input value IS the value (no selection from a list).
+# Suggestions are shown as the user types; selecting a suggestion fills the input.
+# Ships zero CSS.
+#
+# Usage:
+#   Autocomplete value <=> city, items: cities, @filter: filterCities
+
+acCollator = new Intl.Collator(undefined, { sensitivity: 'base' })
+
+export Autocomplete = component
+  @value:: string := ""
+  @items:: any[] := []
+  @placeholder:: string := "Type to search..."
+  @disabled:: boolean := false
+
+  open := false
+
+  filteredItems ~=
+    q = @value.trim()
+    return @items unless q
+    @items.filter (item) ->
+      label = if typeof item is 'string' then item else (item.label or item.name or String(item))
+      acCollator.compare(label.slice(0, q.length), q) is 0
+
+  _listId =! "ac-list-#{Math.random().toString(36).slice(2, 8)}"
+
+  _getItems: ->
+    return [] unless @_list
+    Array.from(@_list.querySelectorAll('[role="option"]'))
+
+  _updateHighlight: ->
+    idx = @_hlIdx
+    opts = @_getItems()
+    opts.forEach (el, ndx) ->
+      el.id = "#{@_listId}-opt-#{ndx}" unless el.id
+      el.toggleAttribute 'data-highlighted', ndx is idx
+    activeId = if idx >= 0 and opts[idx] then opts[idx].id else undefined
+    if @_input
+      if activeId then @_input.setAttribute 'aria-activedescendant', activeId
+      else @_input.removeAttribute 'aria-activedescendant'
+    opts[idx]?.scrollIntoView({ block: 'nearest' })
+
+  openMenu: ->
+    open = true
+    @_hlIdx = -1
+    @_input?.focus()
+
+  close: ->
+    open = false
+    @_hlIdx = -1
+    @_input?.focus()
+
+  _applyPlacement: ->
+    ARIA.position @_input, @_list, placement: 'bottom start', offset: 2, matchWidth: true
+
+  selectIndex: (idx) ->
+    item = filteredItems[idx]
+    return unless item
+    label = if typeof item is 'string' then item else (item.label or item.name or String(item))
+    @value = label
+    @_input?.value = label
+    @emit 'select', item
+    @close()
+
+  onInput: (e) ->
+    newVal = e.target.value
+    return if newVal is @value
+    @value = newVal
+    open = true
+    @_hlIdx = if filteredItems.length > 0 then 0 else -1
+    setTimeout (=> @_updateHighlight()), 0
+
+  onKeydown: (e) ->
+    len = filteredItems.length
+    ARIA.listNav e,
+      next:    => @openMenu() unless open; if len then @_hlIdx = (@_hlIdx + 1) %% len;                         @_updateHighlight()
+      prev:    => @openMenu() unless open; if len then @_hlIdx = if @_hlIdx <= 0 then len - 1 else @_hlIdx - 1; @_updateHighlight()
+      first:   => if len then @_hlIdx = 0;       @_updateHighlight()
+      last:    => if len then @_hlIdx = len - 1; @_updateHighlight()
+      select:  => @selectIndex(@_hlIdx) if @_hlIdx >= 0
+      dismiss: => @close()
+      tab:     => @close()
+
+  ~>
+    if @_list
+      @_list.setAttribute 'popover', 'auto'
+      @_applyPlacement()
+    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_input)
+
+  mounted: ->
+    @_hlIdx = -1
+    @_input.value = @value if @_input and @value
+
+  render
+    . $open: open?!
+
+      input ref: "_input", role: "combobox", type: "text"
+        autocomplete: "off"
+        aria-expanded: !!open
+        aria-haspopup: "listbox"
+        aria-autocomplete: "list"
+        aria-controls: open ? _listId : undefined
+        $disabled: @disabled?!
+        disabled: @disabled
+        placeholder: @placeholder
+        @input: @onInput
+
+      div ref: "_list", id: _listId, role: "listbox", $open: open?!, style: "position:fixed;margin:0;inset:auto"
+        for item, idx in filteredItems
+          div role: "option", tabindex: "-1"
+            @click: (=> @selectIndex(idx))
+            @mouseenter: (=> @_hlIdx = idx; @_updateHighlight())
+            "#{if typeof item is 'string' then item else (item.label or item.name or String(item))}"

package/docs/ui/avatar.rip

@@ -0,0 +1,37 @@
+# Avatar — accessible headless avatar
+#
+# Shows an image, falls back to initials or a generic icon placeholder.
+# Ships zero CSS.
+#
+# Usage:
+#   Avatar src: user.photoUrl, alt: user.name, fallback: "AC"
+#   Avatar fallback: "JD"
+#   Avatar
+
+export Avatar = component
+  @src:: string := ""
+  @alt:: string := ""
+  @fallback:: string := ""
+
+  imgError := false
+
+  _onError: -> imgError = true
+
+  _initials ~=
+    return @fallback if @fallback
+    return '' unless @alt
+    parts = @alt.trim().split(/\s+/)
+    chars = parts.map (p) -> p[0]?.toUpperCase() or ''
+    chars.slice(0, 2).join('')
+
+  render
+    span role: "img", aria-label: @alt or 'Avatar'
+      $status: if @src and not imgError then 'image' else if _initials then 'fallback' else 'placeholder'
+      if @src and not imgError
+        img src: @src, alt: @alt, @error: @_onError
+      else if _initials
+        span $initials: true
+          _initials
+      else
+        span $placeholder: true
+          "?"

package/docs/ui/badge.rip

@@ -0,0 +1,15 @@
+# Badge — accessible headless inline label
+#
+# Decorative label for status, counts, or categories.
+# Ships zero CSS.
+#
+# Usage:
+#   Badge "New"
+#   Badge variant: "outline", "Beta"
+
+export Badge = component
+  @variant:: "solid" | "outline" | "subtle" := "solid"
+
+  render
+    span $variant: @variant
+      slot

package/docs/ui/breadcrumb.rip

@@ -0,0 +1,47 @@
+# Breadcrumb — accessible headless navigation breadcrumb
+#
+# Renders a navigation trail with separator between items.
+# The last item is automatically marked as the current page.
+# Ships zero CSS.
+#
+# Usage:
+#   Breadcrumb
+#     a $item: true, href: "/", "Home"
+#     a $item: true, href: "/products", "Products"
+#     span $item: true, "Widget Pro"
+#
+#   Breadcrumb separator: ">"
+#     a $item: true, href: "/", "Home"
+#     span $item: true, "Settings"
+
+export Breadcrumb = component
+  @separator:: string := "/"
+  @label:: string := "Breadcrumb"
+
+  _ready := false
+
+  mounted: -> _ready = true
+
+  _items ~=
+    return [] unless _ready
+    return [] unless @_content
+    Array.from(@_content.querySelectorAll('[data-item]') or [])
+
+  ~>
+    return unless _ready
+    items = _items
+    return unless items.length
+    @_content?.style.setProperty '--breadcrumb-separator', JSON.stringify(@separator)
+    items.forEach (el, idx) =>
+      isLast = idx is items.length - 1
+      if isLast
+        el.setAttribute 'aria-current', 'page'
+        el.toggleAttribute 'data-current', true
+      else
+        el.removeAttribute 'aria-current'
+        el.removeAttribute 'data-current'
+
+  render
+    nav aria-label: @label
+      ol ref: "_content"
+        slot

package/docs/ui/button-group.rip

@@ -0,0 +1,26 @@
+# ButtonGroup — accessible headless button group
+#
+# Groups related buttons with proper ARIA semantics.
+# Ships zero CSS.
+#
+# Usage:
+#   ButtonGroup
+#     Button "Cut"
+#     Button "Copy"
+#     Button "Paste"
+#   ButtonGroup orientation: "vertical", label: "Text formatting"
+#     Toggle pressed <=> isBold, "Bold"
+#     Toggle pressed <=> isItalic, "Italic"
+
+export ButtonGroup = component
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @disabled:: boolean := false
+  @label:: string := ""
+
+  render
+    div role: "group"
+      aria-label: @label?!
+      aria-orientation: @orientation
+      $orientation: @orientation
+      $disabled: @disabled?!
+      slot

package/docs/ui/button.rip

@@ -0,0 +1,23 @@
+# Button — accessible headless button
+#
+# Handles disabled-but-focusable pattern and pressed state.
+# Ships zero CSS.
+#
+# Usage:
+#   Button @click: handleClick
+#     "Save"
+#   Button disabled: true
+#     "Unavailable"
+
+export Button = component
+  @disabled:: boolean := false
+
+  onClick: ->
+    return if @disabled
+    @emit 'press'
+
+  render
+    button disabled: @disabled
+      aria-disabled: @disabled?!
+      $disabled: @disabled?!
+      slot

package/docs/ui/card.rip

@@ -0,0 +1,25 @@
+# Card — accessible headless content container
+#
+# Structured container with optional header, content, and footer sections.
+# Use $header, $content, $footer on children to mark sections.
+# Ships zero CSS.
+#
+# Usage:
+#   Card
+#     div $header: true
+#       h3 "Title"
+#     div $content: true
+#       p "Body text"
+#     div $footer: true
+#       Button "Action"
+#
+#   Card interactive: true, @click: handleClick
+#     p "Clickable card"
+
+export Card = component
+  @interactive:: boolean := false
+
+  render
+    div tabindex: (if @interactive then "0" else undefined)
+      $interactive: @interactive?!
+      slot

package/docs/ui/carousel.rip

@@ -0,0 +1,110 @@
+# Carousel — accessible headless slide carousel
+#
+# Displays one slide at a time with arrow key navigation, optional
+# autoplay, and loop mode. Discovers slides from [data-slide] children.
+# Ships zero CSS.
+#
+# Usage:
+#   Carousel loop: true
+#     div $slide: true
+#       img src: "slide1.jpg"
+#     div $slide: true
+#       img src: "slide2.jpg"
+#     div $slide: true
+#       img src: "slide3.jpg"
+#
+#   Carousel autoplay: true, interval: 5000, @change: handleSlide
+#     div $slide: true, "Slide A"
+#     div $slide: true, "Slide B"
+
+export Carousel = component
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @loop:: boolean := false
+  @autoplay:: boolean := false
+  @interval:: number := 4000
+  @label:: string := "Carousel"
+
+  activeIndex := 0
+  _ready := false
+  _timer = null
+
+  _slides ~=
+    return [] unless _ready
+    return [] unless @_content
+    Array.from(@_content.querySelectorAll('[data-slide]') or [])
+
+  totalSlides ~= _slides.length
+
+  mounted: ->
+    _ready = true
+    @_startAutoplay() if @autoplay
+
+  beforeUnmount: ->
+    @_stopAutoplay()
+
+  _startAutoplay: ->
+    @_stopAutoplay()
+    _timer = setInterval (=> @next()), @interval
+
+  _stopAutoplay: ->
+    clearInterval _timer if _timer
+    _timer = null
+
+  goto: (idx) ->
+    count = totalSlides
+    return unless count
+    if @loop
+      idx = idx %% count
+    else
+      idx = Math.max(0, Math.min(idx, count - 1))
+    activeIndex = idx
+    @emit 'change', activeIndex
+
+  next: -> @goto(activeIndex + 1)
+  prev: -> @goto(activeIndex - 1)
+
+  onKeydown: (e) ->
+    horiz = @orientation is 'horizontal'
+    switch e.key
+      when (if horiz then 'ArrowRight' else 'ArrowDown')
+        e.preventDefault()
+        @next()
+      when (if horiz then 'ArrowLeft' else 'ArrowUp')
+        e.preventDefault()
+        @prev()
+      when 'Home'
+        e.preventDefault()
+        @goto(0)
+      when 'End'
+        e.preventDefault()
+        @goto(totalSlides - 1)
+
+  ~>
+    return unless _ready
+    _slides.forEach (el, idx) =>
+      isActive = idx is activeIndex
+      el.hidden = not isActive
+      el.toggleAttribute 'data-active', isActive
+      el.setAttribute 'role', 'tabpanel'
+      el.setAttribute 'aria-roledescription', 'slide'
+      el.setAttribute 'aria-label', "Slide #{idx + 1} of #{totalSlides}"
+
+  onMouseenter: -> @_stopAutoplay() if @autoplay
+  onMouseleave: -> @_startAutoplay() if @autoplay
+
+  render
+    div role: "region", aria-roledescription: "carousel", aria-label: @label, tabindex: "0"
+      $orientation: @orientation
+      @keydown: @onKeydown
+      @mouseenter: @onMouseenter
+      @mouseleave: @onMouseleave
+      button $prev: true, aria-label: "Previous slide"
+        disabled: not @loop and activeIndex <= 0
+        $disabled: (not @loop and activeIndex <= 0)?!
+        @click: (=> @prev())
+      div ref: "_content"
+        slot
+      button $next: true, aria-label: "Next slide"
+        disabled: not @loop and activeIndex >= totalSlides - 1
+        $disabled: (not @loop and activeIndex >= totalSlides - 1)?!
+        @click: (=> @next())

package/docs/ui/checkbox-group.rip

@@ -0,0 +1,61 @@
+# CheckboxGroup — accessible headless checkbox group
+#
+# Multiple options can be checked independently. Wraps individual checkboxes
+# with group semantics. Value is an array of checked option values.
+# Ships zero CSS.
+#
+# Usage:
+#   CheckboxGroup value <=> selectedToppings
+#     div $value: "cheese", "Cheese"
+#     div $value: "bacon", "Bacon"
+#     div $value: "lettuce", "Lettuce"
+
+export CheckboxGroup = component
+  @value:: any[] := []
+  @disabled:: boolean := false
+  @orientation:: "horizontal" | "vertical" := "vertical"
+  @label:: string := ""
+
+  _options ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-value]') or [])
+
+  _toggle: (val) ->
+    return if @disabled
+    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
+    @emit 'change', @value
+
+  onKeydown: (e) ->
+    boxes = @_root?.querySelectorAll('[role="checkbox"]')
+    return unless boxes?.length
+    focused = Array.from(boxes).indexOf(document.activeElement)
+    return if focused < 0
+    len = boxes.length
+    ARIA.rovingNav e, {
+      next:  => boxes[(focused + 1) %% len]?.focus()
+      prev:  => boxes[(focused - 1) %% len]?.focus()
+      first: => boxes[0]?.focus()
+      last:  => boxes[len - 1]?.focus()
+    }, 'both'
+
+  render
+    div ref: "_root", role: "group", aria-label: @label or undefined, aria-orientation: @orientation
+      $orientation: @orientation
+      $disabled: @disabled?!
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      for opt, idx in _options
+        button role: "checkbox", tabindex: (if idx is 0 then "0" else "-1")
+          aria-checked: opt.dataset.value in @value
+          $checked: (opt.dataset.value in @value)?!
+          $disabled: @disabled?!
+          $value: opt.dataset.value
+          @click: (=> @_toggle(opt.dataset.value))
+          = opt.textContent

package/docs/ui/checkbox.rip

@@ -0,0 +1,33 @@
+# Checkbox — accessible headless checkbox/switch widget
+#
+# Toggles on click, Enter, or Space. Supports indeterminate state.
+# Exposes $checked, $indeterminate, $disabled. Ships zero CSS.
+# Set @switch to true for switch semantics (role="switch").
+#
+# Usage:
+#   Checkbox checked <=> isActive, @change: handleChange
+#     span "Enable notifications"
+#
+#   Checkbox checked <=> isDark, switch: true
+#     span "Dark mode"
+
+export Checkbox = component
+  @checked:: boolean := false
+  @disabled:: boolean := false
+  @indeterminate:: boolean := false
+  @switch:: boolean := false
+
+  onClick: ->
+    return if @disabled
+    @indeterminate = false
+    @checked = not @checked
+    @emit 'change', @checked
+
+  render
+    button role: @switch ? 'switch' : 'checkbox'
+      aria-checked: @indeterminate ? 'mixed' : !!@checked
+      aria-disabled: @disabled?!
+      $checked: @checked?!
+      $indeterminate: @indeterminate?!
+      $disabled: @disabled?!
+      slot