@rip-lang/ui 0.3.38 → 0.3.39

package/{accordion.rip → components/accordion.rip}

@@ -73,24 +73,14 @@ export Accordion = component
     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)
+    disabled = e.currentTarget.closest('[data-item]')?.hasAttribute('data-disabled')
+    ARIA.rovingNav e, {
+      next:   => @_focusNext(1)
+      prev:   => @_focusNext(-1)
+      first:  => @_focusTrigger(0)
+      last:   => @_focusTrigger(-1)
+      select: => @toggle(id) unless disabled
+    }
 
   _triggers: ->
     return [] unless @_content

package/{autocomplete.rip → components/autocomplete.rip}

@@ -84,35 +84,17 @@ export Autocomplete = component
 
   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()
+    ARIA.listNav e,
+      next:    => @openMenu() unless open; if len then @_hlIdx = (@_hlIdx + 1) %% len;                         @_updateHighlight()
+      prev:    => @openMenu() unless open; if len then @_hlIdx = if @_hlIdx <= 0 then len - 1 else @_hlIdx - 1; @_updateHighlight()
+      first:   => if len then @_hlIdx = 0;       @_updateHighlight()
+      last:    => if len then @_hlIdx = len - 1; @_updateHighlight()
+      select:  => @selectIndex(@_hlIdx) if @_hlIdx >= 0
+      dismiss: => @close()
+      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
+    ARIA.popupDismiss open, @_list, (=> @close()), [@_input]
 
   mounted: ->
     @_hlIdx = -1

package/{checkbox-group.rip → components/checkbox-group.rip}

@@ -20,9 +20,6 @@ export CheckboxGroup = component
     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 []
@@ -39,13 +36,12 @@ export CheckboxGroup = component
     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()
+    ARIA.rovingNav e, {
+      next:  => boxes[(focused + 1) %% len]?.focus()
+      prev:  => boxes[(focused - 1) %% len]?.focus()
+      first: => boxes[0]?.focus()
+      last:  => boxes[len - 1]?.focus()
+    }, 'both'
 
   render
     div ref: "_root", role: "group", aria-label: @label or undefined, aria-orientation: @orientation
@@ -57,8 +53,8 @@ export CheckboxGroup = component
 
       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)?!
+          aria-checked: opt.dataset.value in @value
+          $checked: (opt.dataset.value in @value)?!
           $disabled: @disabled?!
           $value: opt.dataset.value
           @click: (=> @_toggle(opt.dataset.value))

package/{combobox.rip → components/combobox.rip}

@@ -86,36 +86,17 @@ export Combobox = component
 
   _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()
+    ARIA.listNav e,
+      next:    => @openMenu() unless open; highlightedIndex = @_nextEnabled(highlightedIndex,  1); @_scrollToItem()
+      prev:    => highlightedIndex = @_nextEnabled(highlightedIndex, -1); @_scrollToItem()
+      first:   => highlightedIndex = 0;       @_scrollToItem()
+      last:    => highlightedIndex = len - 1; @_scrollToItem()
+      select:  => if highlightedIndex >= 0 then @selectIndex(highlightedIndex) else if len is 1 then @selectIndex(0)
+      dismiss: => if open then @close() else @query = ''
+      tab:     => @close()
 
   ~>
-    if open
-      onDown = (e) =>
-        root = @_content
-        unless root?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
+    ARIA.popupDismiss open, @_list, (=> @close()), [@_content]
 
   render
     . ref: "_content", $open: open?!

package/{context-menu.rip → components/context-menu.rip}

@@ -48,40 +48,24 @@ export ContextMenu = component
     @emit 'select', item.dataset.item
     @close()
 
+  _focusItem: (idx) ->
+    highlightedIndex = idx
+    @_list?.querySelectorAll('[role="menuitem"]')[idx]?.focus()
+
   _onKeydown: (e) ->
+    return unless _menuItems.length
     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()
+    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()
 
   ~>
-    if open
-      onDown = (e) =>
-        unless @_list?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
+    ARIA.popupDismiss open, @_list, (=> @close())
 
   render
     . @contextmenu: @_onContextMenu

package/{menu.rip → components/menu.rip}

@@ -93,46 +93,25 @@ export Menu = component
       e.preventDefault()
       @openMenu()
 
+  _focusItem: (idx) ->
+    highlightedIndex = idx
+    @_list?.querySelectorAll('[role="menuitem"]')[idx]?.focus()
+
   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)
+    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 open
-      onDown = (e) =>
-        unless @_trigger?.contains(e.target) or @_list?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
+    ARIA.popupDismiss open, @_list, (=> @close()), [@_trigger]
 
   render
     .

package/{radio-group.rip → components/radio-group.rip}

@@ -30,23 +30,13 @@ export RadioGroup = component
     focused = Array.from(radios).indexOf(document.activeElement)
     return if focused < 0
     len = radios.length
-    next = focused
-    switch e.key
-      when 'ArrowRight', 'ArrowDown'
-        e.preventDefault()
-        next = (focused + 1) %% len
-      when 'ArrowLeft', 'ArrowUp'
-        e.preventDefault()
-        next = (focused - 1) %% len
-      when 'Home'
-        e.preventDefault()
-        next = 0
-      when 'End'
-        e.preventDefault()
-        next = len - 1
-      else return
-    radios[next]?.focus()
-    @_select(_options[next]?.dataset.value)
+    move = (idx) => radios[idx]?.focus(); @_select(_options[idx]?.dataset.value)
+    ARIA.rovingNav e, {
+      next:  => move((focused + 1) %% len)
+      prev:  => move((focused - 1) %% len)
+      first: => move(0)
+      last:  => move(len - 1)
+    }, 'both'
 
   render
     div ref: "_root", role: "radiogroup", aria-orientation: @orientation

package/{select.rip → components/select.rip}

@@ -80,37 +80,16 @@ export Select = component
     from
 
   onListKeydown: (e) ->
-    len = options.length
-    return unless len
-
-    switch e.key
-      when 'ArrowDown'
-        e.preventDefault()
-        highlightedIndex = @_nextEnabled(highlightedIndex, 1)
-        @_focusHighlighted()
-      when 'ArrowUp'
-        e.preventDefault()
-        highlightedIndex = @_nextEnabled(highlightedIndex, -1)
-        @_focusHighlighted()
-      when 'Home'
-        e.preventDefault()
-        highlightedIndex = 0
-        @_focusHighlighted()
-      when 'End'
-        e.preventDefault()
-        highlightedIndex = len - 1
-        @_focusHighlighted()
-      when 'Enter', ' '
-        e.preventDefault()
-        @selectIndex(highlightedIndex)
-      when 'Escape'
-        e.preventDefault()
-        @close()
-      when 'Tab'
-        @close()
-      else
-        if e.key.length is 1
-          @_typeahead(e.key)
+    return unless options.length
+    ARIA.listNav e,
+      next:    => highlightedIndex = @_nextEnabled(highlightedIndex,  1); @_focusHighlighted()
+      prev:    => highlightedIndex = @_nextEnabled(highlightedIndex, -1); @_focusHighlighted()
+      first:   => highlightedIndex = 0;                  @_focusHighlighted()
+      last:    => highlightedIndex = options.length - 1; @_focusHighlighted()
+      select:  => @selectIndex(highlightedIndex)
+      dismiss: => @close()
+      tab:     => @close()
+      char:    => @_typeahead(e.key)
 
   _typeahead: (char) ->
     clearTimeout typeaheadTimer if typeaheadTimer
@@ -122,8 +101,9 @@ export Select = component
       @_focusHighlighted()
 
   _focusHighlighted: ->
-    opt = options[highlightedIndex]
-    opt?.focus()
+    el = @_list?.querySelectorAll('[role="option"]')?.[highlightedIndex]
+    el?.focus()
+    el?.scrollIntoView { block: 'nearest' }
 
   _position: ->
     return unless @_trigger and @_list
@@ -138,12 +118,7 @@ export Select = component
     @_list.style.visibility = 'visible'
 
   ~>
-    if open
-      onDown = (e) =>
-        unless @_trigger?.contains(e.target) or @_list?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
+    ARIA.popupDismiss open, @_list, (=> @close()), [@_trigger]
 
   render
     .

package/{tabs.rip → components/tabs.rip}

@@ -82,28 +82,17 @@ export Tabs = component
     ids = tabs.map (t) -> t.dataset.tab
     idx = ids.indexOf @active
     return if idx is -1
-
-    horiz = @orientation is 'horizontal'
-    prevKey = if horiz then 'ArrowLeft' else 'ArrowUp'
-    nextKey = if horiz then 'ArrowRight' else 'ArrowDown'
-
-    next = switch e.key
-      when nextKey then @_nextEnabled(ids, idx, 1)
-      when prevKey then @_nextEnabled(ids, idx, -1)
-      when 'Home'  then @_nextEnabled(ids, ids.length - 1, 1)
-      when 'End'   then @_nextEnabled(ids, 0, -1)
-      when 'Enter', ' '
-        if @activation is 'manual'
-          e.preventDefault()
-          @select(ids[idx])
-        null
-      else null
-
-    if next
-      e.preventDefault()
-      tab = tabs.find (t) -> t.dataset.tab is next
-      tab?.focus()
-      @select(next) if @activation is 'automatic'
+    move = (nextId) =>
+      return unless nextId
+      tabs.find((t) -> t.dataset.tab is nextId)?.focus()
+      @select(nextId) if @activation is 'automatic'
+    ARIA.rovingNav e, {
+      next:   => move(@_nextEnabled(ids, idx,              1))
+      prev:   => move(@_nextEnabled(ids, idx,             -1))
+      first:  => move(@_nextEnabled(ids, ids.length - 1,   1))
+      last:   => move(@_nextEnabled(ids, 0,               -1))
+      select: => @select(ids[idx]) if @activation is 'manual'
+    }, @orientation
 
   render
     .

package/{toggle-group.rip → components/toggle-group.rip}

@@ -46,19 +46,12 @@ export ToggleGroup = component
     focused = Array.from(opts).indexOf(document.activeElement)
     return if focused < 0
     len = opts.length
-    switch e.key
-      when 'ArrowRight', 'ArrowDown'
-        e.preventDefault()
-        opts[(focused + 1) %% len]?.focus()
-      when 'ArrowLeft', 'ArrowUp'
-        e.preventDefault()
-        opts[(focused - 1) %% len]?.focus()
-      when 'Home'
-        e.preventDefault()
-        opts[0]?.focus()
-      when 'End'
-        e.preventDefault()
-        opts[len - 1]?.focus()
+    ARIA.rovingNav e, {
+      next:  => opts[(focused + 1) %% len]?.focus()
+      prev:  => opts[(focused - 1) %% len]?.focus()
+      first: => opts[0]?.focus()
+      last:  => opts[len - 1]?.focus()
+    }, 'both'
 
   render
     div ref: "_root", role: "group", aria-orientation: @orientation

package/{toolbar.rip → components/toolbar.rip}

@@ -25,20 +25,12 @@ export Toolbar = component
     focused = els.indexOf(document.activeElement)
     return if focused < 0
     len = els.length
-    horiz = @orientation is 'horizontal'
-    switch e.key
-      when (if horiz then 'ArrowRight' else 'ArrowDown')
-        e.preventDefault()
-        els[(focused + 1) %% len]?.focus()
-      when (if horiz then 'ArrowLeft' else 'ArrowUp')
-        e.preventDefault()
-        els[(focused - 1) %% len]?.focus()
-      when 'Home'
-        e.preventDefault()
-        els[0]?.focus()
-      when 'End'
-        e.preventDefault()
-        els[len - 1]?.focus()
+    ARIA.rovingNav e, {
+      next:  => els[(focused + 1) %% len]?.focus()
+      prev:  => els[(focused - 1) %% len]?.focus()
+      first: => els[0]?.focus()
+      last:  => els[len - 1]?.focus()
+    }, @orientation
 
   render
     div role: "toolbar", aria-label: @label or undefined, aria-orientation: @orientation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.3.38",
+  "version": "0.3.39",
   "description": "Headless, accessible UI components written in Rip — zero CSS, zero dependencies",
   "type": "module",
   "keywords": [
@@ -31,10 +31,10 @@
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "rip-lang": ">=3.13.93"
+    "rip-lang": ">=3.13.94"
   },
   "files": [
-    "*.rip",
+    "components/",
     "README.md"
   ]
 }

package/index.rip

@@ -1,16 +0,0 @@
-# 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, bundle: ['.'], 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