rip-lang 3.15.4 → 3.16.1

package/docs/ui/input-group.rip

@@ -1,28 +0,0 @@
-# InputGroup — accessible headless input with prefix/suffix
-#
-# Wraps a form control with optional prefix and suffix elements.
-# Use $prefix and $suffix on children to mark addon positions.
-# Tracks child input focus for styling. Ships zero CSS.
-#
-# Usage:
-#   InputGroup
-#     span $prefix: true, "$"
-#     Input value <=> amount, type: "number"
-#   InputGroup
-#     Input value <=> search, placeholder: "Search..."
-#     button $suffix: true, @click: doSearch, "Go"
-
-export InputGroup = component
-  @disabled:: boolean := false
-
-  focused := false
-
-  mounted: ->
-    ctrl = @_root?.querySelector('input, select, textarea')
-    return unless ctrl
-    ctrl.addEventListener 'focusin', => focused = true
-    ctrl.addEventListener 'focusout', => focused = false
-
-  render
-    div ref: "_root", $disabled: @disabled?!, $focused: focused?!
-      slot

package/docs/ui/input.rip

@@ -1,36 +0,0 @@
-# Input — accessible headless input wrapper
-#
-# Tracks focus, validation, and disabled state via data attributes.
-# Ships zero CSS.
-#
-# Usage:
-#   Input value <=> name, placeholder: "Enter name"
-#   Input value <=> email, type: "email", required: true
-
-export Input = component
-  @value:: string := ""
-  @placeholder:: string := ""
-  @type:: string := "text"
-  @disabled:: boolean := false
-  @required:: boolean := false
-
-  focused := false
-  touched := false
-
-  onInput: (e) -> @value = e.target.value
-  onFocus: -> focused = true
-  onBlur: ->
-    focused = false
-    touched = true
-
-  render
-    input type: @type, value: @value, placeholder: @placeholder
-      disabled: @disabled
-      required: @required
-      aria-disabled: @disabled?!
-      aria-required: @required?!
-      $disabled: @disabled?!
-      $focused: focused?!
-      $touched: touched?!
-      @focusin: @onFocus
-      @focusout: @onBlur

package/docs/ui/label.rip

@@ -1,16 +0,0 @@
-# Label — accessible headless form label
-#
-# Standalone label element that associates with a form control via @for.
-# Companions Field but works independently. Ships zero CSS.
-#
-# Usage:
-#   Label for: "email-input", "Email address"
-#   Label required: true, "Username"
-
-export Label = component
-  @for:: any := null
-  @required:: boolean := false
-
-  render
-    label for: @for?!, $required: @required?!
-      slot

package/docs/ui/menu.rip

@@ -1,134 +0,0 @@
-# Menu — accessible headless dropdown menu
-#
-# Keyboard: ArrowDown/Up to navigate, Enter/Space to select, Escape to close,
-# Home/End for first/last. Exposes $open on menu, $highlighted on items.
-# Uses native `popover="auto"` + anchor positioning. Ships zero CSS.
-#
-# Usage:
-#   Menu
-#     span "Actions"
-#     div $item: "edit", "Edit"
-#     div $item: "delete", "Delete"
-#     div $item: "archive", "Archive"
-
-export Menu = component
-  @disabled:: boolean := false
-
-  open := false
-  highlightedIndex := -1
-  typeaheadBuffer := ''
-  typeaheadTimer := null
-  _id =! "menu-#{Math.random().toString(36).slice(2, 8)}"
-
-  items ~=
-    return [] unless @_slot
-    Array.from(@_slot.querySelectorAll('[data-item]') or [])
-
-  triggerLabel ~=
-    return '' unless @_slot
-    el = @_slot.querySelector(':not([data-item])')
-    el?.textContent?.trim() or ''
-
-  toggle: ->
-    return if @disabled
-    if open then @close() else @openMenu()
-
-  openMenu: ->
-    open = true
-    highlightedIndex = 0
-    requestAnimationFrame => @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
-
-  close: ->
-    open = false
-    highlightedIndex = -1
-    @_trigger?.focus()
-
-  selectIndex: (idx) ->
-    item = items[idx]
-    return unless item
-    return if item.dataset.disabled?
-    role = item.getAttribute('role')
-    if role is 'menuitemcheckbox'
-      checked = item.getAttribute('aria-checked') is 'true'
-      item.setAttribute 'aria-checked', not checked
-      @emit 'select', { id: item.dataset.item, checked: not checked }
-    else if role is 'menuitemradio'
-      group = item.closest('[data-radio-group]')
-      if group
-        group.querySelectorAll('[role="menuitemradio"]').forEach (r) ->
-          r.setAttribute 'aria-checked', false
-      item.setAttribute 'aria-checked', true
-      @emit 'select', { id: item.dataset.item, value: item.dataset.item }
-    else
-      @emit 'select', item.dataset.item
-      @close()
-
-  _typeahead: (char) ->
-    clearTimeout typeaheadTimer if typeaheadTimer
-    typeaheadBuffer += char.toLowerCase()
-    typeaheadTimer = setTimeout (-> typeaheadBuffer = ''), 500
-    idx = items.findIndex (o) -> o.textContent.trim().toLowerCase().startsWith(typeaheadBuffer)
-    if idx >= 0
-      highlightedIndex = idx
-      @_list?.querySelectorAll('[role="menuitem"]')[idx]?.focus()
-
-  _applyPlacement: ->
-    ARIA.position @_trigger, @_list, placement: 'bottom start', offset: 4
-
-  onTriggerKeydown: (e) ->
-    return if @disabled
-    if e.key in ['ArrowDown', 'Enter', ' ']
-      e.preventDefault()
-      @openMenu()
-
-  _focusItem: (idx) ->
-    highlightedIndex = idx
-    @_list?.querySelectorAll('[role="menuitem"]')[idx]?.focus()
-
-  onMenuKeydown: (e) ->
-    len = items.length
-    return unless len
-    ARIA.listNav e,
-      next:    => @_focusItem((highlightedIndex + 1) %% len)
-      prev:    => @_focusItem((highlightedIndex - 1) %% len)
-      first:   => @_focusItem(0)
-      last:    => @_focusItem(len - 1)
-      select:  => @selectIndex(highlightedIndex)
-      dismiss: => @close()
-      tab:     => @close()
-      char:    => @_typeahead(e.key)
-
-  ~>
-    if @_list
-      @_list.id = _id
-      @_list.setAttribute 'popover', 'auto'
-      @_applyPlacement()
-    if @_trigger
-      @_trigger.setAttribute 'aria-controls', _id
-    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_trigger)
-
-  render
-    .
-      button ref: "_trigger"
-        aria-haspopup: "menu"
-        aria-expanded: !!open
-        $open: open?!
-        $disabled: @disabled?!
-        disabled: @disabled
-        @click: @toggle
-        @keydown: @onTriggerKeydown
-        triggerLabel
-
-      . ref: "_slot", style: "display:none"
-        slot
-
-      div ref: "_list", role: "menu", $open: open?!, style: "position:fixed;margin:0;inset:auto", @keydown: @onMenuKeydown
-        for item, idx in items
-          div role: item.getAttribute('role') or 'menuitem'
-            tabindex: "-1"
-            aria-checked: item.getAttribute('aria-checked')?!
-            $highlighted: (idx is highlightedIndex)?!
-            $disabled: item.dataset.disabled?!
-            @click: (=> @selectIndex(idx))
-            @mouseenter: (=> highlightedIndex = idx)
-            = item.textContent

package/docs/ui/menubar.rip

@@ -1,151 +0,0 @@
-# Menubar — accessible headless horizontal menu bar
-#
-# A horizontal bar of menu triggers. Each trigger opens a dropdown menu.
-# Arrow keys navigate between triggers; open menus close when moving
-# to the next trigger. Ships zero CSS.
-#
-# Usage:
-#   Menubar
-#     div $menu: "file"
-#       div $item: "new", "New"
-#       div $item: "open", "Open"
-#       div $item: "save", "Save"
-#     div $menu: "edit"
-#       div $item: "undo", "Undo"
-#       div $item: "redo", "Redo"
-
-export Menubar = component
-  @disabled:: boolean := false
-
-  activeMenu := null
-  highlightedIndex := -1
-
-  _menus ~=
-    return [] unless @_slot
-    Array.from(@_slot.querySelectorAll('[data-menu]') or [])
-
-  _menuItemsFor: (menu) ->
-    return [] unless menu
-    Array.from(menu.querySelectorAll('[data-item]') or [])
-
-  _openMenu: (menuId) ->
-    return if @disabled
-    activeMenu = menuId
-    highlightedIndex = 0
-    requestAnimationFrame =>
-      @_position(menuId)
-      @_root?.querySelector("[data-menu-list=\"#{menuId}\"] [role=\"menuitem\"]")?.focus()
-
-  _closeMenu: ->
-    activeMenu = null
-    highlightedIndex = -1
-
-  _position: (menuId) ->
-    ARIA.positionBelow @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]"),
-                       @_root?.querySelector("[data-menu-list=\"#{menuId}\"]"), 2, false
-
-  selectItem: (menuId, itemId) ->
-    @emit 'select', { menu: menuId, item: itemId }
-    @_closeMenu()
-    @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]")?.focus()
-
-  _onBarKeydown: (e) ->
-    triggers = @_root?.querySelectorAll('[data-menu-trigger]')
-    return unless triggers?.length
-    focused = Array.from(triggers).indexOf(document.activeElement)
-    return if focused < 0
-    len = triggers.length
-    switch e.key
-      when 'ArrowRight'
-        e.preventDefault()
-        next = (focused + 1) %% len
-        triggers[next]?.focus()
-        if activeMenu
-          @_openMenu(triggers[next]?.dataset.menuTrigger)
-      when 'ArrowLeft'
-        e.preventDefault()
-        prev = (focused - 1) %% len
-        triggers[prev]?.focus()
-        if activeMenu
-          @_openMenu(triggers[prev]?.dataset.menuTrigger)
-      when 'ArrowDown', 'Enter', ' '
-        e.preventDefault()
-        menuId = triggers[focused]?.dataset.menuTrigger
-        @_openMenu(menuId) if menuId
-      when 'Escape'
-        @_closeMenu()
-
-  _onMenuKeydown: (e, menuId, menuItems) ->
-    len = menuItems.length
-    return unless len
-    switch e.key
-      when 'ArrowDown'
-        e.preventDefault()
-        highlightedIndex = (highlightedIndex + 1) %% len
-        @_root?.querySelector("[data-menu-list=\"#{menuId}\"]")?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
-      when 'ArrowUp'
-        e.preventDefault()
-        highlightedIndex = (highlightedIndex - 1) %% len
-        @_root?.querySelector("[data-menu-list=\"#{menuId}\"]")?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
-      when 'Enter', ' '
-        e.preventDefault()
-        item = menuItems[highlightedIndex]
-        @selectItem(menuId, item?.dataset.item) if item
-      when 'Escape', 'Tab'
-        e.preventDefault() if e.key is 'Escape'
-        @_closeMenu()
-        @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]")?.focus()
-      when 'ArrowRight'
-        e.preventDefault()
-        @_closeMenu()
-        triggers = @_root?.querySelectorAll('[data-menu-trigger]')
-        focused = Array.from(triggers).findIndex (t) -> t.dataset.menuTrigger is menuId
-        next = (focused + 1) %% triggers.length
-        triggers[next]?.focus()
-        @_openMenu(triggers[next]?.dataset.menuTrigger)
-      when 'ArrowLeft'
-        e.preventDefault()
-        @_closeMenu()
-        triggers = @_root?.querySelectorAll('[data-menu-trigger]')
-        focused = Array.from(triggers).findIndex (t) -> t.dataset.menuTrigger is menuId
-        prev = (focused - 1) %% triggers.length
-        triggers[prev]?.focus()
-        @_openMenu(triggers[prev]?.dataset.menuTrigger)
-
-  ~>
-    if activeMenu
-      onDown   = (e) => @_closeMenu() unless @_root?.contains(e.target)
-      onScroll = => @_position(activeMenu)
-      document.addEventListener 'mousedown', onDown
-      window.addEventListener   'scroll',    onScroll, true
-      return ->
-        document.removeEventListener 'mousedown', onDown
-        window.removeEventListener   'scroll',    onScroll, true
-
-  render
-    div ref: "_root", role: "menubar", $disabled: @disabled?!
-
-      . ref: "_slot", style: "display:none"
-        slot
-
-      for menu in _menus
-        button role: "menuitem", tabindex: "0"
-          "data-menu-trigger": menu.dataset.menu
-          aria-haspopup: "menu"
-          aria-expanded: activeMenu is menu.dataset.menu
-          $open: (activeMenu is menu.dataset.menu)?!
-          @click: (=> if activeMenu is menu.dataset.menu then @_closeMenu() else @_openMenu(menu.dataset.menu))
-          @keydown: @_onBarKeydown
-          = menu.dataset.menu
-
-        if activeMenu is menu.dataset.menu
-          div role: "menu", $open: true, style: "position:fixed"
-            "data-menu-list": menu.dataset.menu
-            @keydown: (e) => @_onMenuKeydown(e, menu.dataset.menu, @_menuItemsFor(menu))
-            for item, idx in @_menuItemsFor(menu)
-              div role: "menuitem", tabindex: "-1"
-                $highlighted: (idx is highlightedIndex)?!
-                $value: item.dataset.item
-                @click: (=> @selectItem(menu.dataset.menu, item.dataset.item))
-                @mouseenter: (=> highlightedIndex = idx)
-                = item.textContent

package/docs/ui/meter.rip

@@ -1,36 +0,0 @@
-# Meter — accessible headless meter (gauge)
-#
-# For known-range measurements (disk usage, password strength, etc.).
-# Exposes value and thresholds as CSS custom properties.
-# Ships zero CSS.
-#
-# Usage:
-#   Meter value: 0.7, low: 0.3, high: 0.8, optimum: 0.5
-#   Meter value: 75, min: 0, max: 100
-
-export Meter = component
-  @value:: number := 0
-  @min:: number := 0
-  @max:: number := 1
-  @low:: any := null
-  @high:: any := null
-  @optimum:: any := null
-  @label:: any := null
-
-  percent ~= Math.min(100, Math.max(0, ((@value - @min) / (@max - @min)) * 100))
-
-  level ~=
-    return 'optimum' unless @low? and @high?
-    if @value <= @low then 'low'
-    else if @value >= @high then 'high'
-    else 'optimum'
-
-  render
-    div role: "meter"
-      aria-valuenow: @value
-      aria-valuemin: @min
-      aria-valuemax: @max
-      aria-label: @label?!
-      style: "--meter-value: #{@value}; --meter-percent: #{percent}%"
-      $level: level
-      slot

package/docs/ui/multi-select.rip

@@ -1,203 +0,0 @@
-# MultiSelect — accessible headless multi-select with chips
-#
-# Filterable dropdown where multiple items can be selected. Selected items
-# appear as removable chips. Type to filter, click or arrow+Enter to toggle.
-# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
-#
-# Usage:
-#   MultiSelect value <=> selectedColors, items: colors, placeholder: "Choose colors..."
-
-export MultiSelect = component
-  @value:: any[] := []
-  @items:: any[] := []
-  @placeholder:: string := "Select..."
-  @disabled:: boolean := false
-
-  open := false
-  query := ''
-  highlightedIndex := -1
-  _ready := false
-  _ignoreInputClickOnce := false
-  _popupGuard =! ARIA.popupGuard()
-  _listId =! "ms-#{Math.random().toString(36).slice(2, 8)}"
-
-  filtered ~=
-    q = query.trim().toLowerCase()
-    return @items unless q
-    @items.filter (item) ->
-      label = if typeof item is 'string' then item else (item.label or item.name or String(item))
-      label.toLowerCase().includes(q)
-
-  # Block reopen briefly so the same pointer gesture that closed the popup
-  # cannot immediately reopen it via focus/click side effects.
-  _blockOpenBriefly: ->
-    _popupGuard.block()
-
-  _canOpen: ->
-    _popupGuard.canOpen()
-
-  _label: (item) ->
-    if typeof item is 'string' then item else (item.label or item.name or String(item))
-
-  _val: (item) ->
-    if typeof item is 'string' then item else (item.value or item.id or String(item))
-
-  _isSelected: (item) ->
-    v = @_val(item)
-    Array.isArray(@value) and v in @value
-
-  _toggleItem: (item) ->
-    return if @disabled
-    v = @_val(item)
-    arr = if Array.isArray(@value) then [...@value] else []
-    if v in arr
-      arr = arr.filter (x) -> x isnt v
-    else
-      arr.push v
-    @value = arr
-    @emit 'change', @value
-
-  _removeChip: (v) ->
-    return if @disabled
-    @value = @value.filter (x) -> x isnt v
-    @emit 'change', @value
-
-  _onRemoveMousedown: (e) ->
-    e.preventDefault()
-    e.stopPropagation()
-    @_blockOpenBriefly()
-
-  _onInput: (e) ->
-    query = e.target.value
-    open = true
-    highlightedIndex = if filtered.length > 0 then 0 else -1
-
-  _openMenu: ->
-    return if @disabled
-    return unless @_canOpen()
-    open = true
-    highlightedIndex = if filtered.length > 0 then Math.max(highlightedIndex, 0) else -1
-
-  _close: (restoreFocus = false, blockOpen = false) ->
-    open = false
-    query = ''
-    highlightedIndex = -1
-    @_blockOpenBriefly() if blockOpen
-    @_input?.focus() if restoreFocus
-
-  onFocusin: ->
-    return unless @_canOpen()
-    @_openMenu()
-
-  _onInputMousedown: (e) ->
-    return unless open and not query
-    e.preventDefault()
-    _ignoreInputClickOnce = true
-    @_close(false, true)
-
-  _onInputClick: ->
-    if _ignoreInputClickOnce
-      _ignoreInputClickOnce = false
-      return
-    return unless @_canOpen()
-    @_openMenu()
-
-  _onChipsClick: (e) ->
-    return unless e.target is e.currentTarget
-    if open and not query
-      @_close(false, true)
-      return
-    return unless @_canOpen()
-    @_input?.focus()
-    @_openMenu() if document.activeElement is @_input
-
-  onFocusout: ->
-    setTimeout =>
-      return if @_content?.contains(document.activeElement)
-      @_close(false, true)
-    , 0
-
-  mounted: ->
-    _ready = true
-
-  _applyPlacement: ->
-    ARIA.position @_content, @_list, placement: 'bottom start', offset: 2, matchWidth: true
-
-  _onKeydown: (e) ->
-    len = filtered.length
-    switch e.key
-      when 'ArrowDown'
-        e.preventDefault()
-        open = true
-        highlightedIndex = (highlightedIndex + 1) %% len if len
-      when 'ArrowUp'
-        e.preventDefault()
-        highlightedIndex = (highlightedIndex - 1) %% len if len
-      when 'Enter'
-        e.preventDefault()
-        if highlightedIndex >= 0 and highlightedIndex < len
-          @_toggleItem(filtered[highlightedIndex])
-      when 'Escape'
-        e.preventDefault()
-        @_close()
-      when 'Backspace'
-        if not query and @value.length > 0
-          @value = @value.slice(0, -1)
-          @emit 'change', @value
-      when 'Tab'
-        @_close(false, true)
-
-  ~>
-    return unless _ready
-    if @_list
-      @_list.setAttribute 'popover', 'manual'
-      @_applyPlacement()
-    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_input)
-    ARIA.popupDismiss open, (=> @_list), (=> @_close(false, true)), [=> @_input, => @_content]
-
-  render
-    . ref: "_content", $open: open?!, $disabled: @disabled?!
-
-      # Chip area + input
-      . $chips: true, @click: @_onChipsClick
-        for chip in @value
-          span $chip: true
-            "#{chip}"
-            button $remove: true, aria-label: "Remove #{chip}", @mousedown: @_onRemoveMousedown, @click: (=> @_removeChip(chip))
-              "✕"
-        input ref: "_input", type: "text", autocomplete: "off"
-          role: "combobox"
-          aria-expanded: !!open
-          aria-haspopup: "listbox"
-          aria-controls: if open then _listId else undefined
-          $disabled: @disabled?!
-          disabled: @disabled
-          placeholder: if @value.length is 0 then @placeholder else ''
-          value: query
-          @mousedown: @_onInputMousedown
-          @input: @_onInput
-          @click: @_onInputClick
-          @keydown: @_onKeydown
-
-      # Dropdown
-      div ref: "_list"
-        id: _listId
-        role: "listbox"
-        popover: "manual"
-        hidden: not open
-        aria-hidden: (open ? undefined : "true")
-        $open: open?!
-        aria-multiselectable: "true"
-        style: "position:fixed;margin:0;inset:auto"
-        for item, idx in filtered
-          div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
-            $value: @_val(item)
-            $selected: @_isSelected(item)?!
-            $highlighted: (idx is highlightedIndex)?!
-            aria-selected: !!@_isSelected(item)
-            @click: (=> @_toggleItem(item))
-            @mouseenter: (=> highlightedIndex = idx)
-            @_label(item)
-        if filtered.length is 0 and query
-          div role: "status", aria-live: "polite", $empty: true
-            "No results"

package/docs/ui/native-select.rip

@@ -1,33 +0,0 @@
-# NativeSelect — accessible headless native select wrapper
-#
-# Wraps a native <select> element with state tracking via data attributes.
-# Use when the browser's built-in dropdown is preferred. Ships zero CSS.
-#
-# Usage:
-#   NativeSelect value <=> role, @change: handleChange
-#     option value: "", "Choose a role..."
-#     option value: "admin", "Admin"
-#     option value: "user", "User"
-
-export NativeSelect = component
-  @value:: string := ""
-  @disabled:: boolean := false
-  @required:: boolean := false
-
-  focused := false
-
-  onChange: (e) ->
-    e.isTrusted or return
-    @value = e.target.value
-    @emit 'change', @value
-
-  render
-    select value: @value, disabled: @disabled, required: @required
-      aria-disabled: @disabled?!
-      aria-required: @required?!
-      $disabled: @disabled?!
-      $focused: focused?!
-      @change: @onChange
-      @focusin: (=> focused = true)
-      @focusout: (=> focused = false)
-      slot