@rip-lang/ui 0.3.67 → 0.4.1

package/browser/browser.rip

@@ -0,0 +1,56 @@
+# Browser domain barrel for @rip-lang/ui/browser
+
+export * from './components/accordion.rip'
+export * from './components/alert-dialog.rip'
+export * from './components/autocomplete.rip'
+export * from './components/avatar.rip'
+export * from './components/badge.rip'
+export * from './components/breadcrumb.rip'
+export * from './components/button-group.rip'
+export * from './components/button.rip'
+export * from './components/card.rip'
+export * from './components/carousel.rip'
+export * from './components/checkbox-group.rip'
+export * from './components/checkbox.rip'
+export * from './components/collapsible.rip'
+export * from './components/combobox.rip'
+export * from './components/context-menu.rip'
+export * from './components/date-picker.rip'
+export * from './components/dialog.rip'
+export * from './components/drawer.rip'
+export * from './components/editable-value.rip'
+export * from './components/field.rip'
+export * from './components/fieldset.rip'
+export * from './components/form.rip'
+export * from './components/grid.rip'
+export * from './components/input-group.rip'
+export * from './components/input.rip'
+export * from './components/label.rip'
+export * from './components/menu.rip'
+export * from './components/menubar.rip'
+export * from './components/meter.rip'
+export * from './components/multi-select.rip'
+export * from './components/native-select.rip'
+export * from './components/nav-menu.rip'
+export * from './components/number-field.rip'
+export * from './components/otp-field.rip'
+export * from './components/pagination.rip'
+export * from './components/popover.rip'
+export * from './components/preview-card.rip'
+export * from './components/progress.rip'
+export * from './components/radio-group.rip'
+export * from './components/resizable.rip'
+export * from './components/scroll-area.rip'
+export * from './components/select.rip'
+export * from './components/separator.rip'
+export * from './components/skeleton.rip'
+export * from './components/slider.rip'
+export * from './components/spinner.rip'
+export * from './components/table.rip'
+export * from './components/tabs.rip'
+export * from './components/textarea.rip'
+export * from './components/toast.rip'
+export * from './components/toggle-group.rip'
+export * from './components/toggle.rip'
+export * from './components/toolbar.rip'
+export * from './components/tooltip.rip'

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

@@ -16,7 +16,7 @@
 #         p "Content B"
 
 export Accordion = component
-  @multiple := false
+  @multiple:: boolean := false
 
   openItems := new Set()
   _ready    := false

package/{components → browser/components}/alert-dialog.rip

@@ -13,8 +13,8 @@
 #     button @click: handleDelete, "Delete"
 
 export AlertDialog = component
-  @open := false
-  @initialFocus := null
+  @open:: boolean := false
+  @initialFocus:: any := null
 
   _prevFocus = null
   _id =! "adlg-#{Math.random().toString(36).slice(2, 8)}"
@@ -49,5 +49,8 @@ export AlertDialog = component
     @emit 'close'
 
   render
-    dialog ref: "_dialog", $open: @open?!
+    dialog ref: "_dialog"
+      hidden: not @open
+      aria-hidden: (@open ? undefined : "true")
+      $open: @open?!
       slot

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

@@ -10,12 +10,14 @@
 acCollator = new Intl.Collator(undefined, { sensitivity: 'base' })
 
 export Autocomplete = component
-  @value := ''
-  @items := []
-  @placeholder := 'Type to search...'
-  @disabled := false
+  @value:: string := ""
+  @items:: any[] := []
+  @placeholder:: string := "Type to search..."
+  @disabled:: boolean := false
 
   open := false
+  _ready := false
+  _popupGuard =! ARIA.popupGuard()
 
   filteredItems ~=
     q = @value.trim()
@@ -43,26 +45,20 @@ export Autocomplete = component
     opts[idx]?.scrollIntoView({ block: 'nearest' })
 
   openMenu: ->
+    return unless _popupGuard.canOpen()
     open = true
     @_hlIdx = -1
     @_input?.focus()
 
-  close: ->
+  close: (restoreFocus = true, blockOpen = false) ->
     open = false
     @_hlIdx = -1
-    @_input?.focus()
+    @_input?.removeAttribute 'aria-activedescendant'
+    _popupGuard.block() if blockOpen
+    @_input?.focus() if restoreFocus
 
   _applyPlacement: ->
-    return unless @_list
-    *>@_list.style =
-      position: 'fixed'
-      inset: 'auto'
-      margin: '0'
-      positionArea: 'bottom start'
-      positionTry: 'flip-block, flip-inline, flip-block flip-inline'
-      positionVisibility: 'anchors-visible'
-      marginTop: '2px'
-      minWidth: 'anchor-size(width)'
+    ARIA.position @_input, @_list, placement: 'bottom start', offset: 2, matchWidth: true
 
   selectIndex: (idx) ->
     item = filteredItems[idx]
@@ -71,7 +67,7 @@ export Autocomplete = component
     @value = label
     @_input?.value = label
     @emit 'select', item
-    @close()
+    @close(true, true)
 
   onInput: (e) ->
     newVal = e.target.value
@@ -90,15 +86,17 @@ export Autocomplete = component
       last:    => if len then @_hlIdx = len - 1; @_updateHighlight()
       select:  => @selectIndex(@_hlIdx) if @_hlIdx >= 0
       dismiss: => @close()
-      tab:     => @close()
+      tab:     => @close(false, true)
 
   ~>
+    return unless _ready
     if @_list
-      @_list.setAttribute 'popover', 'auto'
       @_applyPlacement()
     ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_input)
+    ARIA.popupDismiss open, (=> @_list), (=> @close(false, true)), [=> @_input]
 
   mounted: ->
+    _ready = true
     @_hlIdx = -1
     @_input.value = @value if @_input and @value
 
@@ -115,8 +113,16 @@ export Autocomplete = component
         disabled: @disabled
         placeholder: @placeholder
         @input: @onInput
-
-      div ref: "_list", id: _listId, role: "listbox", $open: open?!, style: "position:fixed;margin:0;inset:auto"
+        @keydown: @onKeydown
+
+      div ref: "_list"
+        id: _listId
+        role: "listbox"
+        popover: "auto"
+        hidden: not open
+        aria-hidden: (open ? undefined : "true")
+        $open: open?!
+        style: "position:fixed;margin:0;inset:auto"
         for item, idx in filteredItems
           div role: "option", tabindex: "-1"
             @click: (=> @selectIndex(idx))

package/{components → browser/components}/avatar.rip

@@ -9,9 +9,9 @@
 #   Avatar
 
 export Avatar = component
-  @src := ''
-  @alt := ''
-  @fallback := ''
+  @src:: string := ""
+  @alt:: string := ""
+  @fallback:: string := ""
 
   imgError := false
 

package/{components → browser/components}/badge.rip

@@ -8,7 +8,7 @@
 #   Badge variant: "outline", "Beta"
 
 export Badge = component
-  @variant := 'solid'
+  @variant:: "solid" | "outline" | "subtle" := "solid"
 
   render
     span $variant: @variant

package/{components → browser/components}/breadcrumb.rip

@@ -15,8 +15,8 @@
 #     span $item: true, "Settings"
 
 export Breadcrumb = component
-  @separator := '/'
-  @label := 'Breadcrumb'
+  @separator:: string := "/"
+  @label:: string := "Breadcrumb"
 
   _ready := false
 

package/{components → browser/components}/button-group.rip

@@ -13,9 +13,9 @@
 #     Toggle pressed <=> isItalic, "Italic"
 
 export ButtonGroup = component
-  @orientation := 'horizontal'
-  @disabled := false
-  @label := ''
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @disabled:: boolean := false
+  @label:: string := ""
 
   render
     div role: "group"

package/{components → browser/components}/button.rip

@@ -9,8 +9,8 @@
 #   Button disabled: true
 #     "Unavailable"
 
-export Button = component
-  @disabled := false
+export Button = component extends button
+  @disabled:: boolean := false
 
   onClick: ->
     return if @disabled

package/{components → browser/components}/card.rip

@@ -17,7 +17,7 @@
 #     p "Clickable card"
 
 export Card = component
-  @interactive := false
+  @interactive:: boolean := false
 
   render
     div tabindex: (if @interactive then "0" else undefined)

package/{components → browser/components}/carousel.rip

@@ -18,11 +18,11 @@
 #     div $slide: true, "Slide B"
 
 export Carousel = component
-  @orientation := 'horizontal'
-  @loop := false
-  @autoplay := false
-  @interval := 4000
-  @label := 'Carousel'
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @loop:: boolean := false
+  @autoplay:: boolean := false
+  @interval:: number := 4000
+  @label:: string := "Carousel"
 
   activeIndex := 0
   _ready := false

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

@@ -11,10 +11,10 @@
 #     div $value: "lettuce", "Lettuce"
 
 export CheckboxGroup = component
-  @value := []
-  @disabled := false
-  @orientation := 'vertical'
-  @label := ''
+  @value:: any[] := []
+  @disabled:: boolean := false
+  @orientation:: "horizontal" | "vertical" := "vertical"
+  @label:: string := ""
 
   _options ~=
     return [] unless @_slot
@@ -30,18 +30,47 @@ export CheckboxGroup = component
     @value = arr
     @emit 'change', @value
 
+  _boxes: ->
+    Array.from(@_root?.querySelectorAll('[role="checkbox"]') or [])
+
+  _syncTabStops: (focusIdx = null) ->
+    boxes = @_boxes()
+    return unless boxes.length
+    idx = focusIdx
+    if idx is null
+      idx = boxes.indexOf(document.activeElement)
+    idx = 0 if idx < 0
+    boxes.forEach (box, i) -> box.tabIndex = if i is idx then 0 else -1
+
+  _focusIndex: (idx) ->
+    boxes = @_boxes()
+    return unless boxes.length
+    idx = Math.max(0, Math.min(idx, boxes.length - 1))
+    @_syncTabStops(idx)
+    boxes[idx]?.focus()
+
   onKeydown: (e) ->
-    boxes = @_root?.querySelectorAll('[role="checkbox"]')
+    boxes = @_boxes()
     return unless boxes?.length
     focused = Array.from(boxes).indexOf(document.activeElement)
     return if focused < 0
     len = boxes.length
     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'
+      next:  => @_focusIndex((focused + 1) %% len)
+      prev:  => @_focusIndex((focused - 1) %% len)
+      first: => @_focusIndex(0)
+      last:  => @_focusIndex(len - 1)
+    }, @orientation
+
+  onFocusin: (e) ->
+    boxes = @_boxes()
+    idx = boxes.indexOf(e.target)
+    @_syncTabStops(idx) if idx >= 0
+
+  mounted: ->
+    requestAnimationFrame => @_syncTabStops()
+
+  ~> @_syncTabStops()
 
   render
     div ref: "_root", role: "group", aria-label: @label or undefined, aria-orientation: @orientation
@@ -52,7 +81,7 @@ export CheckboxGroup = component
         slot
 
       for opt, idx in _options
-        button role: "checkbox", tabindex: (if idx is 0 then "0" else "-1")
+        button role: "checkbox", tabindex: "-1"
           aria-checked: opt.dataset.value in @value
           $checked: (opt.dataset.value in @value)?!
           $disabled: @disabled?!

package/{components → browser/components}/checkbox.rip

@@ -12,10 +12,10 @@
 #     span "Dark mode"
 
 export Checkbox = component
-  @checked := false
-  @disabled := false
-  @indeterminate := false
-  @switch := false
+  @checked:: boolean := false
+  @disabled:: boolean := false
+  @indeterminate:: boolean := false
+  @switch:: boolean := false
 
   onClick: ->
     return if @disabled

package/{components → browser/components}/collapsible.rip

@@ -11,8 +11,8 @@
 #       p "Hidden content here"
 
 export Collapsible = component
-  @open := false
-  @disabled := false
+  @open:: boolean := false
+  @disabled:: boolean := false
 
   _ready := false
 

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

@@ -10,14 +10,16 @@
 #   Combobox query <=> searchText, items: fruits, @select: handleSelect, @filter: filterFn
 
 export Combobox = component
-  @query := ''
-  @items := []
-  @placeholder := 'Search...'
-  @disabled := false
-  @autoHighlight := true
+  @query:: string := ""
+  @items:: any[] := []
+  @placeholder:: string := "Search..."
+  @disabled:: boolean := false
+  @autoHighlight:: boolean := true
 
   open := false
   highlightedIndex := -1
+  _ready := false
+  _popupGuard =! ARIA.popupGuard()
   _listId =! "cb-#{Math.random().toString(36).slice(2, 8)}"
 
   getItems: ->
@@ -38,31 +40,34 @@ export Combobox = component
     highlightedIndex = if @autoHighlight and @items.length > 0 then 0 else -1
     @emit 'filter', @query
 
-  onFocusin: -> @openMenu()
+  onFocusin: ->
+    return unless _popupGuard.canOpen()
+    @openMenu()
+
+  onInputClick: ->
+    return if @disabled or open
+    @openMenu(true)
 
   onFocusout: ->
-    setTimeout => @close() unless @_content?.contains(document.activeElement), 0
+    setTimeout => @close(false, true) unless @_content?.contains(document.activeElement), 0
 
-  openMenu: ->
+  openMenu: (force = false) ->
+    return unless force or _popupGuard.canOpen()
     open = true
     highlightedIndex = -1
     @_input?.focus()
 
-  close: ->
+  close: (restoreFocus = true, blockOpen = false) ->
     open = false
     highlightedIndex = -1
-    @_input?.focus()
+    _popupGuard.block() if blockOpen
+    @_input?.focus() if restoreFocus
+
+  mounted: ->
+    _ready = true
 
   _applyPlacement: ->
-    return unless @_list
-    @_list.style.position = 'fixed'
-    @_list.style.inset = 'auto'
-    @_list.style.margin = '0'
-    @_list.style.positionArea = 'bottom start'
-    @_list.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
-    @_list.style.positionVisibility = 'anchors-visible'
-    @_list.style.marginTop = '2px'
-    @_list.style.minWidth = 'anchor-size(width)'
+    ARIA.position @_content, @_list, placement: 'bottom start', offset: 2, matchWidth: true
 
   isDisabled: (item) -> item?.hasAttribute?('data-disabled')
 
@@ -73,7 +78,7 @@ export Combobox = component
     val = item.dataset.value ?? item.textContent.trim()
     @query = val
     @emit 'select', val
-    @close()
+    @close(true, true)
 
   _nextEnabled: (from, dir) ->
     opts = @getItems()
@@ -93,13 +98,14 @@ export Combobox = component
       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()
+      tab:     => @close(false, true)
 
   ~>
+    return unless _ready
     if @_list
-      @_list.setAttribute 'popover', 'auto'
       @_applyPlacement()
     ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_input)
+    ARIA.popupDismiss open, (=> @_list), (=> @close(false, true)), [=> @_input, => @_content]
 
   render
     . ref: "_content", $open: open?!
@@ -118,13 +124,20 @@ export Combobox = component
           disabled: @disabled
           placeholder: @placeholder
           value: @query
+          @click: @onInputClick
           @keydown: @_onKeydown
         if @query
           button aria-label: "Clear", $clear: true, @click: @clear
             "✕"
 
       # Listbox
-      div ref: "_list", id: _listId, role: "listbox", style: "position:fixed;margin:0;inset:auto"
+      div ref: "_list"
+        id: _listId
+        role: "listbox"
+        popover: "auto"
+        hidden: not open
+        aria-hidden: (open ? undefined : "true")
+        style: "position:fixed;margin:0;inset:auto"
         $open: open?!
         for item, idx in @items
           div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"

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

@@ -12,7 +12,7 @@
 #     div $item: "paste", "Paste"
 
 export ContextMenu = component
-  @disabled := false
+  @disabled:: boolean := false
 
   open := false
   highlightedIndex := -1

package/{components → browser/components}/date-picker.rip

@@ -37,11 +37,11 @@ dpInRange = (day, from, to) ->
   t >= lo and t <= hi
 
 export DatePicker = component
-  @value := null
-  @placeholder := 'mm/dd/yyyy'
-  @disabled := false
-  @range := false
-  @firstDayOfWeek := 0
+  @value:: any := null
+  @placeholder:: string := "mm/dd/yyyy"
+  @disabled:: boolean := false
+  @range:: boolean := false
+  @firstDayOfWeek:: number := 0
 
   open := false
   viewMonth := new Date()

package/{components → browser/components}/dialog.rip

@@ -13,9 +13,9 @@
 #     button @click: (=> showDialog = false), "Close"
 
 export Dialog = component
-  @open := false
-  @dismissable := true
-  @initialFocus := null
+  @open:: boolean := false
+  @dismissable:: boolean := true
+  @initialFocus:: any := null
 
   _id =! "dlg-#{Math.random().toString(36).slice(2, 8)}"
 
@@ -55,6 +55,10 @@ export Dialog = component
       @_dialog?.close()
 
   render
-    dialog ref: "_dialog", @click: @onBackdropClick, @keydown: @onKeydown
+    dialog ref: "_dialog"
+      hidden: not @open
+      aria-hidden: (@open ? undefined : "true")
+      @click: @onBackdropClick
+      @keydown: @onKeydown
       $open: @open?!
       slot

package/{components → browser/components}/drawer.rip

@@ -10,9 +10,9 @@
 #     p "Panel content here"
 
 export Drawer = component
-  @open := false
-  @side := 'right'
-  @dismissable := true
+  @open:: boolean := false
+  @side:: "top" | "right" | "bottom" | "left" := "right"
+  @dismissable:: boolean := true
 
   _prevFocus = null
   _id =! "drw-#{Math.random().toString(36).slice(2, 8)}"
@@ -51,7 +51,11 @@ export Drawer = component
       @_dialog?.close()
 
   render
-    dialog ref: "_dialog", $open: @open?!, $side: @side
+    dialog ref: "_dialog"
+      hidden: not @open
+      aria-hidden: (@open ? undefined : "true")
+      $open: @open?!
+      $side: @side
       @click: @onBackdropClick
       @keydown: @onKeydown
       $side: @side

package/{components → browser/components}/editable-value.rip

@@ -11,10 +11,11 @@
 #       input type: "text", value: name, @input: (e) => name = e.target.value
 
 export EditableValue = component
-  @disabled := false
+  @disabled:: boolean := false
 
   editing := false
   saving := false
+  _ready := false
 
   _onEdit: ->
     return if @disabled
@@ -50,8 +51,13 @@ export EditableValue = component
     editor.style.zIndex = '50'
     editor.querySelector('input, textarea, select')?.focus()
 
+  mounted: ->
+    _ready = true
+
   ~>
+    _readyNow = _ready
     _editing = editing                                 # track before any early return
+    return unless _readyNow
     display = @_root?.querySelector('[data-display]')
     editor = @_root?.querySelector('[data-editor]')
     return unless display and editor

package/{components → browser/components}/field.rip

@@ -9,11 +9,11 @@
 #     Input value <=> email, type: "email"
 
 export Field = component
-  @label := ''
-  @description := ''
-  @error := ''
-  @disabled := false
-  @required := false
+  @label:: string := ""
+  @description:: string := ""
+  @error:: string := ""
+  @disabled:: boolean := false
+  @required:: boolean := false
 
   _id =! "fld-#{Math.random().toString(36).slice(2, 8)}"
 

package/{components → browser/components}/fieldset.rip

@@ -11,8 +11,8 @@
 #       Input value <=> city
 
 export Fieldset = component
-  @legend := ''
-  @disabled := false
+  @legend:: string := ""
+  @disabled:: boolean := false
 
   render
     fieldset disabled: @disabled, $disabled: @disabled?!

package/{components → browser/components}/form.rip

@@ -12,7 +12,7 @@
 #       "Submit"
 
 export Form = component
-  @disabled := false
+  @disabled:: boolean := false
 
   submitting := false
   submitted := false