rip-lang 3.13.93 → 3.13.95

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

package/docs/ui/combobox.rip

@@ -1,155 +0,0 @@
-# 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()
-    @query = val
-    @emit 'select', val
-    @close()
-    @_input?.blur()
-
-  _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/docs/ui/context-menu.rip

@@ -1,105 +0,0 @@
-# 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 [])
-
-  _triggerEl ~=
-    return null unless @_slot
-    @_slot.querySelector('[data-trigger]')
-
-  _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 _triggerEl
-        . innerHTML: _triggerEl.innerHTML
-
-      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