@rip-lang/ui 0.3.19 → 0.3.21

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/alert-dialog.rip

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

package/breadcrumb.rip

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

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

package/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'
+  @loop := false
+  @autoplay := false
+  @interval := 4000
+  @label := '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())