rip-lang 3.13.92 → 3.13.94

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

package/docs/ui/carousel.rip

@@ -1,110 +0,0 @@
-# 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())

package/docs/ui/checkbox-group.rip

@@ -1,65 +0,0 @@
-# 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/docs/ui/checkbox.rip

@@ -1,33 +0,0 @@
-# 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/docs/ui/collapsible.rip

@@ -1,50 +0,0 @@
-# Collapsible — accessible headless expand/collapse section
-#
-# Single open/close section. Simpler than Accordion (no item IDs,
-# no single/multiple mode). Exposes content dimensions as CSS
-# custom properties for animated expand/collapse. Ships zero CSS.
-#
-# Usage:
-#   Collapsible open <=> isOpen
-#     button $trigger: true, "Show details"
-#     div $content: true
-#       p "Hidden content here"
-
-export Collapsible = component
-  @open := false
-  @disabled := false
-
-  _ready := false
-
-  mounted: ->
-    _ready = true
-    trigger = @_root?.querySelector('[data-trigger]')
-    return unless trigger
-    trigger.addEventListener 'click', => @toggle() unless @disabled
-    trigger.addEventListener 'keydown', (e) =>
-      if e.key in ['Enter', ' '] and not @disabled
-        e.preventDefault()
-        @toggle()
-
-  toggle: ->
-    @open = not @open
-    @emit 'change', @open
-
-  ~>
-    return unless _ready
-    trigger = @_root?.querySelector('[data-trigger]')
-    content = @_root?.querySelector('[data-content]')
-    if trigger
-      trigger.setAttribute 'aria-expanded', !!@open
-      trigger.setAttribute 'aria-disabled', true if @disabled
-      trigger.tabIndex = if @disabled then -1 else 0
-    if content
-      content.hidden = not @open
-      if @open
-        rect = content.getBoundingClientRect()
-        content.style.setProperty '--collapsible-height', "#{rect.height}px"
-        content.style.setProperty '--collapsible-width', "#{rect.width}px"
-
-  render
-    div ref: "_root", $open: @open?!, $disabled: @disabled?!
-      slot