@rip-lang/ui 0.1.3 → 0.3.1

package/accordion.rip

@@ -0,0 +1,113 @@
+# 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/autocomplete.rip

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

package/checkbox-group.rip

@@ -0,0 +1,65 @@
+# 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 := []
+  @disabled := false
+  @orientation := 'vertical'
+  @label := ''
+
+  _options ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-value]') or [])
+
+  _isChecked: (val) ->
+    Array.isArray(@value) and val in @value
+
+  _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
+    switch e.key
+      when 'ArrowDown', 'ArrowRight'
+        e.preventDefault()
+        boxes[(focused + 1) %% len]?.focus()
+      when 'ArrowUp', 'ArrowLeft'
+        e.preventDefault()
+        boxes[(focused - 1) %% len]?.focus()
+
+  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: !!@_isChecked(opt.dataset.value)
+          $checked: @_isChecked(opt.dataset.value)?!
+          $disabled: @disabled?!
+          $value: opt.dataset.value
+          @click: (=> @_toggle(opt.dataset.value))
+          opt.textContent

package/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 := false
+  @disabled := false
+  @indeterminate := false
+  @switch := 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

package/combobox.rip

@@ -0,0 +1,153 @@
+# Combobox — accessible headless combobox (input + filterable listbox)
+#
+# Keyboard: ArrowDown/Up to navigate, Enter to select, Escape to close,
+#           typing filters the list via the @filter callback.
+#
+# Exposes $open on the wrapper, $highlighted on options.
+# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
+#
+# Usage:
+#   Combobox query <=> searchText, items: fruits, @select: handleSelect, @filter: filterFn
+
+export Combobox = component
+  @query := ''
+  @items := []
+  @placeholder := 'Search...'
+  @disabled := false
+  @autoHighlight := true
+
+  open := false
+  highlightedIndex := -1
+  _listId =! "cb-#{Math.random().toString(36).slice(2, 8)}"
+
+  getItems: ->
+    return [] unless @_list
+    Array.from(@_list.querySelectorAll('[role="option"]'))
+
+  _scrollToItem: ->
+    @getItems()[highlightedIndex]?.scrollIntoView({ block: 'nearest' })
+
+  clear: ->
+    @query = ''
+    highlightedIndex = -1
+    @emit 'filter', ''
+
+  onInput: (e) ->
+    @query = e.target.value
+    open = true
+    highlightedIndex = if @autoHighlight and @items.length > 0 then 0 else -1
+    @emit 'filter', @query
+
+  onFocusin: -> @openMenu()
+
+  onFocusout: (e) ->
+    unless @_content?.contains(e.relatedTarget)
+      @close()
+
+  openMenu: ->
+    open = true
+    highlightedIndex = -1
+    setTimeout => @_position(), 0
+
+  close: ->
+    open = false
+    highlightedIndex = -1
+
+  _position: ->
+    return unless @_input and @_list
+    tr = @_input.getBoundingClientRect()
+    @_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"
+
+  isDisabled: (item) -> item?.hasAttribute?('data-disabled')
+
+  selectIndex: (idx) ->
+    item = @getItems()[idx]
+    return unless item
+    return if @isDisabled(item)
+    val = item.dataset.value ?? item.textContent.trim()
+    @emit 'select', val
+    @close()
+
+  _nextEnabled: (from, dir) ->
+    opts = @getItems()
+    len = opts.length
+    i = from
+    loop len
+      i = (i + dir) %% len
+      return i unless @isDisabled(opts[i])
+    from
+
+  _onKeydown: (e) ->
+    len = @getItems().length
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        @openMenu() unless open
+        highlightedIndex = @_nextEnabled(highlightedIndex, 1)
+        @_scrollToItem()
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = @_nextEnabled(highlightedIndex, -1)
+        @_scrollToItem()
+      when 'Enter'
+        e.preventDefault()
+        if highlightedIndex >= 0
+          @selectIndex(highlightedIndex)
+        else if len is 1
+          @selectIndex(0)
+      when 'Escape'
+        e.preventDefault()
+        if open then @close() else @query = ''
+      when 'Tab'
+        @close()
+
+  ~>
+    if open
+      onDown = (e) =>
+        root = @_content
+        unless root?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    . ref: "_content", $open: open?!
+
+      # Text input
+      . style: "position:relative;display:inline-flex;align-items:center"
+        input ref: "_input", role: "combobox"
+          type: "text"
+          autocomplete: "off"
+          aria-expanded: !!open
+          aria-haspopup: "listbox"
+          aria-autocomplete: "list"
+          aria-controls: if open then _listId else undefined
+          aria-activedescendant: if highlightedIndex >= 0 then "#{_listId}-#{highlightedIndex}" else undefined
+          $disabled: @disabled?!
+          disabled: @disabled
+          placeholder: @placeholder
+          value: @query
+          @keydown: @_onKeydown
+        if @query
+          button aria-label: "Clear", $clear: true, @click: @clear
+            "✕"
+
+      # Listbox — conditionally rendered (like Select)
+      if open and @items.length > 0
+        div ref: "_list", id: _listId, role: "listbox", $open: true
+          style: "position:fixed"
+          for item, idx in @items
+            div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
+              $value: item
+              $highlighted: (idx is highlightedIndex)?!
+              @click: (=> @selectIndex(idx))
+              @mouseenter: (=> highlightedIndex = idx)
+              "#{item}"
+      if open and @items.length is 0 and @query
+        div role: "status", aria-live: "polite", $empty: true
+          "No results"

package/context-menu.rip

@@ -0,0 +1,98 @@
+# ContextMenu — accessible headless right-click menu
+#
+# Opens on contextmenu event (right-click) over the trigger area.
+# Keyboard navigation matches Menu. Ships zero CSS.
+#
+# Usage:
+#   ContextMenu @select: handleAction
+#     div $trigger: true
+#       p "Right-click this area"
+#     div $item: "cut", "Cut"
+#     div $item: "copy", "Copy"
+#     div $item: "paste", "Paste"
+
+export ContextMenu = component
+  @disabled := false
+
+  open := false
+  highlightedIndex := -1
+  posX := 0
+  posY := 0
+
+  _menuItems ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-item]') or [])
+
+  _onContextMenu: (e) ->
+    return if @disabled
+    e.preventDefault()
+    posX = e.clientX
+    posY = e.clientY
+    open = true
+    highlightedIndex = 0
+    requestAnimationFrame =>
+      @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
+
+  close: ->
+    open = false
+    highlightedIndex = -1
+
+  selectIndex: (idx) ->
+    item = _menuItems[idx]
+    return unless item
+    return if item.dataset.disabled?
+    @emit 'select', item.dataset.item
+    @close()
+
+  _onKeydown: (e) ->
+    len = _menuItems.length
+    return unless len
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex + 1) %% len
+        @_list?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex - 1) %% len
+        @_list?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
+      when 'Home'
+        e.preventDefault()
+        highlightedIndex = 0
+        @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
+      when 'End'
+        e.preventDefault()
+        highlightedIndex = len - 1
+        @_list?.querySelectorAll('[role="menuitem"]')[len - 1]?.focus()
+      when 'Enter', ' '
+        e.preventDefault()
+        @selectIndex(highlightedIndex)
+      when 'Escape', 'Tab'
+        e.preventDefault() if e.key is 'Escape'
+        @close()
+
+  ~>
+    if open
+      onDown = (e) =>
+        unless @_list?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    . @contextmenu: @_onContextMenu
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      if open
+        div ref: "_list", role: "menu", $open: true, @keydown: @_onKeydown
+          style: "position:fixed;left:#{posX}px;top:#{posY}px;z-index:50"
+          for item, idx in _menuItems
+            div role: "menuitem", tabindex: "-1"
+              $highlighted: (idx is highlightedIndex)?!
+              $disabled: item.dataset.disabled?!
+              $value: item.dataset.item
+              @click: (=> @selectIndex(idx))
+              @mouseenter: (=> highlightedIndex = idx)
+              item.textContent