rip-lang 3.13.93 → 3.13.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.13.93",
+  "version": "3.13.95",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",

package/src/ui.rip

@@ -1013,3 +1013,68 @@ export launch = (appBase = '', opts = {}) ->
       version: '0.3.0'
 
   { app, components: appComponents, router, renderer }
+
+# ==============================================================================
+# ARIA — keyboard navigation and popup lifecycle utilities for UI components
+#
+# Provides the WAI-ARIA keyboard interaction patterns used by headless widgets.
+# Registered on globalThis so any component can use them without explicit imports.
+#
+#   ARIA.listNav(e, handlers)              — popup lists (listbox, menu, combobox)
+#   ARIA.rovingNav(e, handlers, orient)    — inline composites (radiogroup, tabs, toolbar)
+#   ARIA.popupDismiss(open, popup, close, els) — close on outside click or scroll
+#
+# Both nav handlers:
+#   - Guard against IME composition events (e.which === 229, CJK input)
+#   - Call e.preventDefault() + e.stopPropagation() for handled keys
+#   - Only invoke a handler if it is provided (all keys are optional)
+#   - Alias PageUp/PageDown to first/last (fn+Up/Down on macOS)
+#
+# ARIA: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
+# ==============================================================================
+
+_ariaNAV = (e, fn) ->
+  return unless fn
+  e.preventDefault()
+  e.stopPropagation()
+  fn()
+
+_ariaListNav = (e, h) ->
+  return if e.which is 229              # IME guard: suppress CJK composition events
+  switch e.key
+    when 'ArrowDown'          then _ariaNAV e, h.next
+    when 'ArrowUp'            then _ariaNAV e, h.prev
+    when 'Home', 'PageUp'     then _ariaNAV e, h.first
+    when 'End',  'PageDown'   then _ariaNAV e, h.last
+    when 'Enter', ' '         then _ariaNAV e, h.select
+    when 'Escape'             then _ariaNAV e, h.dismiss
+    when 'Tab'                then h.tab?()           # no preventDefault: allow natural focus movement
+    else h.char?(e.key) if e.key.length is 1          # printable chars: typeahead
+
+_ariaPopupDismiss = (open, popup, close, els = []) ->
+  return unless open
+  inside   = [popup, ...els]
+  onDown   = (e) => close() unless inside.some (el) -> el?.contains(e.target)
+  onScroll = (e) => close() unless popup?.contains(e.target)
+  document.addEventListener 'mousedown', onDown
+  window.addEventListener   'scroll',    onScroll, true
+  ->
+    document.removeEventListener 'mousedown', onDown
+    window.removeEventListener   'scroll',    onScroll, true
+
+_ariaRovingNav = (e, h, orientation = 'vertical') ->
+  return if e.which is 229              # IME guard
+  vert = orientation isnt 'horizontal'
+  horz = orientation isnt 'vertical'
+  switch e.key
+    when 'ArrowDown'          then _ariaNAV e, h.next   if vert
+    when 'ArrowUp'            then _ariaNAV e, h.prev   if vert
+    when 'ArrowRight'         then _ariaNAV e, h.next   if horz
+    when 'ArrowLeft'          then _ariaNAV e, h.prev   if horz
+    when 'Home', 'PageUp'     then _ariaNAV e, h.first
+    when 'End',  'PageDown'   then _ariaNAV e, h.last
+    when 'Enter', ' '         then _ariaNAV e, h.select
+    when 'Escape'             then _ariaNAV e, h.dismiss
+
+globalThis.__aria ??= { listNav: _ariaListNav, rovingNav: _ariaRovingNav, popupDismiss: _ariaPopupDismiss }
+globalThis.ARIA   ??= globalThis.__aria

package/docs/ui/accordion.rip

@@ -1,113 +0,0 @@
-# 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 := 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
-        trigger.setAttribute 'aria-disabled', isDisabled if isDisabled
-        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) ->
-    item = e.currentTarget.closest('[data-item]')
-    return if item?.hasAttribute('data-disabled') and e.key in ['Enter', ' ']
-    switch e.key
-      when 'Enter', ' '
-        e.preventDefault()
-        @toggle(id)
-      when 'ArrowDown'
-        e.preventDefault()
-        @_focusNext(1)
-      when 'ArrowUp'
-        e.preventDefault()
-        @_focusNext(-1)
-      when 'Home'
-        e.preventDefault()
-        @_focusTrigger(0)
-      when 'End'
-        e.preventDefault()
-        @_focusTrigger(-1)
-
-  _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

@@ -1,96 +0,0 @@
-# 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"
-
-alertDialogStack = []
-
-export AlertDialog = component
-  @open := false
-  @initialFocus := null
-
-  _prevFocus = null
-  _cleanupTrap = null
-  _scrollY = 0
-  _id =! "adlg-#{Math.random().toString(36).slice(2, 8)}"
-
-  _wireAria: ->
-    panel = @_panel
-    return unless panel
-    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
-    if heading
-      heading.id ?= "#{_id}-title"
-      panel.setAttribute 'aria-labelledby', heading.id
-    desc = panel.querySelector('p')
-    if desc
-      desc.id ?= "#{_id}-desc"
-      panel.setAttribute 'aria-describedby', desc.id
-
-  ~>
-    if @open
-      _prevFocus = document.activeElement
-      _scrollY = window.scrollY
-      alertDialogStack.push this
-      document.body.style.position = 'fixed'
-      document.body.style.top = "-#{_scrollY}px"
-      document.body.style.width = '100%'
-
-      setTimeout =>
-        panel = @_panel
-        if panel
-          @_wireAria()
-          if @initialFocus
-            target = if typeof @initialFocus is 'string' then panel.querySelector(@initialFocus) else @initialFocus
-            target?.focus()
-          else
-            focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
-            focusable[0]?.focus()
-          _cleanupTrap = (e) ->
-            return unless e.key is 'Tab'
-            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
-            return unless list.length
-            first = list[0]
-            last = list[list.length - 1]
-            if e.shiftKey
-              if document.activeElement is first then (e.preventDefault(); last.focus())
-            else
-              if document.activeElement is last then (e.preventDefault(); first.focus())
-          panel.addEventListener 'keydown', _cleanupTrap
-      , 0
-
-      return ->
-        idx = alertDialogStack.indexOf this
-        alertDialogStack.splice(idx, 1) if idx >= 0
-        document.body.style.position = '' unless alertDialogStack.length
-        document.body.style.top = '' unless alertDialogStack.length
-        document.body.style.width = '' unless alertDialogStack.length
-        window.scrollTo 0, _scrollY unless alertDialogStack.length
-        _prevFocus?.focus()
-    else
-      idx = alertDialogStack.indexOf this
-      alertDialogStack.splice(idx, 1) if idx >= 0
-      unless alertDialogStack.length
-        document.body.style.position = ''
-        document.body.style.top = ''
-        document.body.style.width = ''
-        window.scrollTo 0, _scrollY
-      _prevFocus?.focus()
-
-  close: ->
-    @open = false
-    @emit 'close'
-
-  render
-    if @open
-      div ref: "_backdrop", $open: true
-        div ref: "_panel", role: "alertdialog", aria-modal: "true", tabindex: "-1"
-          slot

package/docs/ui/autocomplete.rip

@@ -1,141 +0,0 @@
-# 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 := ''
-  @items := []
-  @placeholder := 'Type to search...'
-  @disabled := 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
-    setTimeout => @_position(), 0
-
-  close: ->
-    open = false
-    @_hlIdx = -1
-
-  _position: ->
-    return unless @_input and @_list
-    tr = @_input.getBoundingClientRect()
-    @_list.style.position = 'fixed'
-    @_list.style.left = "#{tr.left}px"
-    @_list.style.top = "#{tr.bottom + 2}px"
-    @_list.style.minWidth = "#{tr.width}px"
-    fl = @_list.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_list.style.top = "#{tr.top - fl.height - 2}px"
-
-  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 =>
-      @_position()
-      @_updateHighlight()
-    , 0
-
-  onKeydown: (e) ->
-    len = filteredItems.length
-    switch e.key
-      when 'ArrowDown'
-        e.preventDefault()
-        @openMenu() unless open
-        if len
-          @_hlIdx = (@_hlIdx + 1) %% len
-          @_updateHighlight()
-      when 'ArrowUp'
-        e.preventDefault()
-        @openMenu() unless open
-        if len
-          @_hlIdx = if @_hlIdx <= 0 then len - 1 else @_hlIdx - 1
-          @_updateHighlight()
-      when 'Enter'
-        e.preventDefault()
-        @selectIndex(@_hlIdx) if @_hlIdx >= 0
-      when 'Escape'
-        e.preventDefault()
-        @close()
-      when 'Tab'
-        @close()
-
-  ~>
-    if open
-      onDown = (e) =>
-        unless @_input?.contains(e.target) or @_list?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
-
-  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
-
-      if open and filteredItems.length > 0
-        div ref: "_list", id: _listId, role: "listbox", $open: true, style: "position:fixed"
-          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

@@ -1,37 +0,0 @@
-# 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 := ''
-  @alt := ''
-  @fallback := ''
-
-  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

@@ -1,15 +0,0 @@
-# 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'
-
-  render
-    span $variant: @variant
-      slot

package/docs/ui/breadcrumb.rip

@@ -1,46 +0,0 @@
-# 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 := '/'
-  @label := '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
-    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

@@ -1,26 +0,0 @@
-# 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'
-  @disabled := false
-  @label := ''
-
-  render
-    div role: "group"
-      aria-label: @label?!
-      aria-orientation: @orientation
-      $orientation: @orientation
-      $disabled: @disabled?!
-      slot

package/docs/ui/button.rip

@@ -1,23 +0,0 @@
-# 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 := false
-
-  onClick: ->
-    return if @disabled
-    @emit 'press'
-
-  render
-    button disabled: @disabled
-      aria-disabled: @disabled?!
-      $disabled: @disabled?!
-      slot

package/docs/ui/card.rip

@@ -1,25 +0,0 @@
-# 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 := false
-
-  render
-    div tabindex: (if @interactive then "0" else undefined)
-      $interactive: @interactive?!
-      slot