@rip-lang/ui 0.3.19 → 0.3.21

package/index.rip

@@ -0,0 +1,16 @@
+# Widget Gallery — dev server for testing all widgets
+
+import { get, use, start, notFound } from '@rip-lang/server'
+import { serve } from '@rip-lang/server/middleware'
+
+dir = import.meta.dir
+
+use serve dir: dir, components: ['.'], watch: true
+
+get '/*.rip', -> @send "#{dir}/#{@req.path.slice(1)}"
+get '/*.css', -> @send "#{dir}/#{@req.path.slice(1)}", 'text/css; charset=UTF-8'
+get '/hljs-rip.js', -> @send "#{dir}/../print/hljs-rip.js", 'text/javascript; charset=UTF-8'
+
+notFound -> @send "#{dir}/index.html", 'text/html; charset=UTF-8'
+
+start port: 3005

package/input-group.rip

@@ -0,0 +1,28 @@
+# 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 := 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/input.rip

@@ -0,0 +1,36 @@
+# 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 := ''
+  @placeholder := ''
+  @type := 'text'
+  @disabled := false
+  @required := 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/label.rip

@@ -0,0 +1,16 @@
+# 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 := null
+  @required := false
+
+  render
+    label for: @for?!, $required: @required?!
+      slot

package/menu.rip

@@ -0,0 +1,162 @@
+# 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.
+# Ships zero CSS.
+#
+# Usage:
+#   Menu
+#     span "Actions"
+#     div $item: "edit", "Edit"
+#     div $item: "delete", "Delete"
+#     div $item: "archive", "Archive"
+
+export Menu = component
+  @disabled := false
+
+  open := false
+  highlightedIndex := -1
+  typeaheadBuffer := ''
+  typeaheadTimer := null
+
+  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 =>
+      @_position()
+      @_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()
+
+  _position: ->
+    return unless @_trigger and @_list
+    tr = @_trigger.getBoundingClientRect()
+    @_list.style.position = 'fixed'
+    @_list.style.left = "#{tr.left}px"
+    @_list.style.top = "#{tr.bottom + 4}px"
+    @_list.style.minWidth = "#{tr.width}px"
+    fl = @_list.getBoundingClientRect()
+    if fl.bottom > window.innerHeight
+      @_list.style.top = "#{tr.top - fl.height - 4}px"
+    if fl.right > window.innerWidth
+      @_list.style.left = "#{window.innerWidth - fl.width - 4}px"
+    @_list.style.visibility = 'visible'
+
+  onTriggerKeydown: (e) ->
+    return if @disabled
+    if e.key in ['ArrowDown', 'Enter', ' ']
+      e.preventDefault()
+      @openMenu()
+
+  onMenuKeydown: (e) ->
+    len = items.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'
+        e.preventDefault()
+        @close()
+      when 'Tab'
+        @close()
+      else
+        if e.key.length is 1
+          @_typeahead(e.key)
+
+  ~>
+    if open
+      onDown = (e) =>
+        unless @_trigger?.contains(e.target) or @_list?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  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
+
+      if open
+        div ref: "_list", role: "menu", $open: true, style: "position:fixed;visibility:hidden", @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/menubar.rip

@@ -0,0 +1,155 @@
+# 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 := 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) ->
+    trigger = @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]")
+    list = @_root?.querySelector("[data-menu-list=\"#{menuId}\"]")
+    return unless trigger and list
+    tr = trigger.getBoundingClientRect()
+    list.style.position = 'fixed'
+    list.style.left = "#{tr.left}px"
+    list.style.top = "#{tr.bottom + 2}px"
+    list.style.minWidth = "#{tr.width}px"
+
+  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) =>
+        unless @_root?.contains(e.target)
+          @_closeMenu()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  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/meter.rip

@@ -0,0 +1,36 @@
+# 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 := 0
+  @min := 0
+  @max := 1
+  @low := null
+  @high := null
+  @optimum := null
+  @label := 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/multi-select.rip

@@ -0,0 +1,158 @@
+# 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 := []
+  @items := []
+  @placeholder := 'Select...'
+  @disabled := false
+
+  open := false
+  query := ''
+  highlightedIndex := -1
+  _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)
+
+  _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
+
+  clearAll: ->
+    return if @disabled
+    @value = []
+    query = ''
+    @emit 'change', @value
+
+  _onInput: (e) ->
+    query = e.target.value
+    open = true
+    highlightedIndex = if filtered.length > 0 then 0 else -1
+
+  onFocusin: -> open = true
+
+  onFocusout: (e) ->
+    unless @_content?.contains(e.relatedTarget)
+      open = false
+      query = ''
+      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"
+
+  _onKeydown: (e) ->
+    len = filtered.length
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        open = true
+        highlightedIndex = (highlightedIndex + 1) %% len if len
+        setTimeout (=> @_position()), 0
+      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()
+        open = false
+        query = ''
+      when 'Backspace'
+        if not query and @value.length > 0
+          @value = @value.slice(0, -1)
+          @emit 'change', @value
+      when 'Tab'
+        open = false
+        query = ''
+
+  ~>
+    if open
+      setTimeout (=> @_position()), 0
+      onDown = (e) =>
+        unless @_content?.contains(e.target)
+          open = false
+          query = ''
+          highlightedIndex = -1
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    . ref: "_content", $open: open?!, $disabled: @disabled?!
+
+      # Chip area + input
+      . $chips: true, @click: (=> @_input?.focus())
+        for chip in @value
+          span $chip: true
+            "#{chip}"
+            button $remove: true, aria-label: "Remove #{chip}", @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
+          @input: @_onInput
+          @keydown: @_onKeydown
+        if @value.length > 0
+          button $clear: true, aria-label: "Clear all", @click: @clearAll
+            "✕"
+
+      # Dropdown
+      if open and filtered.length > 0
+        div ref: "_list", id: _listId, role: "listbox", $open: true, aria-multiselectable: "true"
+          style: "position:fixed"
+          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)

package/native-select.rip

@@ -0,0 +1,32 @@
+# 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 := ''
+  @disabled := false
+  @required := false
+
+  focused := false
+
+  onChange: (e) ->
+    @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