@rip-lang/ui 0.3.66 → 0.4.1

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

@@ -2,9 +2,12 @@
 #
 # Keyboard: ArrowDown/Up to navigate, Enter/Space to select, Escape to close,
 #           Home/End for first/last, typeahead to jump by character.
+# Pointer: mouse/pen opens on pointerdown so release can land on an option in
+#          one gesture; touch opens on click so scrolling can still be canceled.
 #
 # Exposes $open and $placeholder on button, $highlighted and $selected on options.
-# Uses native `popover="auto"` + anchor positioning.
+# Uses native Popover API in manual mode so pointerdown open does not get
+# auto-dismissed by the same click lifecycle.
 # Ships zero CSS — style entirely via attribute selectors in your stylesheet.
 #
 # Usage:
@@ -13,21 +16,24 @@
 #     option value: "b", "Option B"
 
 export Select = component
-  @value := null
-  @placeholder := 'Select...'
-  @disabled := false
+  @value:: any := null
+  @placeholder:: string := "Select..."
+  @disabled:: boolean := false
 
+  options := []
   open := false
   highlightedIndex := -1
   typeaheadBuffer := ''
   typeaheadTimer := null
+  suppressTriggerClick := false
+  _ready := false
+  _popupGuard =! ARIA.popupGuard()
   _listId =! "sel-#{Math.random().toString(36).slice(2, 8)}"
 
   getOpt: (o) -> o.dataset.value ?? o.value
 
-  options ~=
-    return [] unless @_slot
-    Array.from(@_slot.querySelectorAll('[data-value], option[value]') or [])
+  _readOptions: ->
+    options = Array.from(@_slot?.querySelectorAll('[data-value], option[value]') or [])
 
   selectedLabel ~=
     if @value?
@@ -36,19 +42,18 @@ export Select = component
     else
       @placeholder
 
-  toggle: ->
-    return if @disabled
-    if open then @close() else @openMenu()
-
   openMenu: ->
+    return unless _popupGuard.canOpen()
+    @_readOptions()
     open = true
     highlightedIndex = Math.max(0, options.findIndex (o) -> @getOpt(o) is String(@value))
     requestAnimationFrame => @_focusHighlighted()
 
-  close: ->
+  close: (restoreFocus = true, blockOpen = false) ->
     open = false
     highlightedIndex = -1
-    @_trigger?.focus()
+    _popupGuard.block() if blockOpen
+    @_trigger?.focus() if restoreFocus
 
   isDisabled: (opt) -> opt?.hasAttribute?('data-disabled') or opt?.disabled
 
@@ -58,7 +63,7 @@ export Select = component
     return if @isDisabled(opt)
     @value = @getOpt(opt)
     @emit 'change', @value
-    @close()
+    @close(true, true)
 
   onTriggerKeydown: (e) ->
     return if @disabled
@@ -70,6 +75,25 @@ export Select = component
         e.preventDefault()
         @close() if open
 
+  onTriggerPointerdown: (e) ->
+    return if @disabled
+    return unless e.button is 0
+    return if e.ctrlKey
+    return unless e.pointerType in ['mouse', 'pen']
+    return if open
+    e.preventDefault()
+    suppressTriggerClick = true
+    @openMenu()
+
+  onTriggerClick: (e) ->
+    return if @disabled
+    if suppressTriggerClick
+      suppressTriggerClick = false
+      e.preventDefault()
+      return
+    e.preventDefault()
+    if open then @close(false, true) else @openMenu()
+
   _nextEnabled: (from, dir) ->
     len = options.length
     i = from
@@ -87,7 +111,7 @@ export Select = component
       last:    => highlightedIndex = options.length - 1; @_focusHighlighted()
       select:  => @selectIndex(highlightedIndex)
       dismiss: => @close()
-      tab:     => @close()
+      tab:     => @close(false, true)
       char:    => @_typeahead(e.key)
 
   _typeahead: (char) ->
@@ -105,21 +129,18 @@ export Select = component
     el?.scrollIntoView { block: 'nearest' }
 
   _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 = '4px'
-    @_list.style.minWidth = 'anchor-size(width)'
+    ARIA.position @_trigger, @_list, placement: 'bottom start', offset: 4, matchWidth: true
+
+  mounted: ->
+    _ready = true
+    requestAnimationFrame => @_readOptions()
 
   ~>
+    return unless _ready
     if @_list
-      @_list.setAttribute 'popover', 'auto'
       @_applyPlacement()
     ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_trigger)
+    ARIA.popupDismiss open, (=> @_list), (=> @close(false, true)), [=> @_trigger]
 
   render
     .
@@ -133,7 +154,8 @@ export Select = component
         $placeholder: (!@value)?!
         $disabled: @disabled?!
         disabled: @disabled
-        @click: @toggle
+        @pointerdown: @onTriggerPointerdown
+        @click: @onTriggerClick
         @keydown: @onTriggerKeydown
         span selectedLabel
 
@@ -142,7 +164,13 @@ export Select = component
         slot
 
       # Dropdown listbox
-      div ref: "_list", id: _listId, role: "listbox", style: "position:fixed;margin:0;inset:auto"
+      div ref: "_list"
+        id: _listId
+        role: "listbox"
+        popover: "manual"
+        hidden: not open
+        aria-hidden: (open ? undefined : "true")
+        style: "position:fixed;margin:0;inset:auto"
         $open: open?!
         @keydown: @onListKeydown
         for opt, idx in options

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

@@ -8,8 +8,8 @@
 #   Separator orientation: "vertical"
 
 export Separator = component
-  @orientation := 'horizontal'
-  @decorative := true
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @decorative:: boolean := true
 
   render
     div role: (if @decorative then 'none' else 'separator')

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

@@ -10,10 +10,10 @@
 #   Skeleton circle: true, width: "48px"
 
 export Skeleton = component
-  @width := null
-  @height := null
-  @circle := false
-  @label := 'Loading'
+  @width:: any := null
+  @height:: any := null
+  @circle:: boolean := false
+  @label:: string := "Loading"
 
   render
     div role: "status", aria-busy: "true", aria-label: @label

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

@@ -10,15 +10,15 @@
 #   Slider value <=> range, min: 0, max: 100   (pass array for range mode)
 
 export Slider = component
-  @value := 0
-  @min := 0
-  @max := 100
-  @step := 1
-  @largeStep := 10
-  @orientation := 'horizontal'
-  @disabled := false
-  @name := null
-  @valueText := null
+  @value:: number := 0
+  @min:: number := 0
+  @max:: number := 100
+  @step:: number := 1
+  @largeStep:: number := 10
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @disabled:: boolean := false
+  @name:: any := null
+  @valueText:: any := null
 
   dragging := false
   activeThumb := -1
@@ -75,6 +75,10 @@ export Slider = component
   _commitValue: ->
     @emit 'change', @value
 
+  _focusThumb: (idx) ->
+    requestAnimationFrame =>
+      @_track?.querySelector("#" + "#{_id}-thumb-#{idx}")?.focus()
+
   _onPointerDown: (e) ->
     return if @disabled or e.button isnt 0
     e.preventDefault()
@@ -125,6 +129,7 @@ export Slider = component
       e.preventDefault()
       @_setValue idx, newVal
       @_commitValue()
+      @_focusThumb idx
 
   render
     div role: "group", $orientation: @orientation, $disabled: @disabled?!, $dragging: dragging?!
@@ -149,7 +154,6 @@ export Slider = component
         for val, idx in values
           div $thumb: true, $active: (idx is activeThumb)?!
             style: "position:absolute; #{if horiz then 'left' else 'bottom'}: #{@_percentOf(val)}%; z-index: #{if idx is activeThumb then 2 else 1}"
-            @keydown: (e) => @_onKeydown(e, idx)
             input type: "range", style: "position:absolute;opacity:0;width:0;height:0;pointer-events:none"
               id: "#{_id}-thumb-#{idx}"
               name: @name?!
@@ -161,5 +165,6 @@ export Slider = component
               aria-valuetext: if @valueText then @valueText(val, idx) else undefined
               aria-orientation: @orientation
               aria-disabled: @disabled?!
+              @keydown: (e) => @_onKeydown(e, idx)
 
       slot

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

@@ -9,8 +9,8 @@
 #   Spinner label: "Saving...", size: "24px"
 
 export Spinner = component
-  @label := 'Loading'
-  @size := null
+  @label:: string := "Loading"
+  @size:: any := null
 
   render
     div role: "status", aria-label: @label

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

@@ -16,8 +16,8 @@
 #         td "Engineer"
 
 export Table = component
-  @caption := ''
-  @striped := false
+  @caption:: string := ""
+  @striped:: boolean := false
 
   render
     div $striped: @striped?!

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

@@ -19,9 +19,9 @@
 #       p "Content for tab two"
 
 export Tabs = component
-  @active      := null
-  @orientation := 'horizontal'
-  @activation  := 'automatic'
+  @active:: any := null
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @activation:: "automatic" | "manual" := "automatic"
   _ready       := false
   _id =! "tabs-#{Math.random().toString(36).slice(2, 8)}"
   activationDirection := 'none'
@@ -53,6 +53,9 @@ export Tabs = component
 
   _isDisabled: (el) -> el?.hasAttribute('data-disabled')
 
+  _tabButtons: ->
+    Array.from(@_tablist?.querySelectorAll('[role="tab"]') or [])
+
   select: (id) ->
     prev = @active
     horiz = @orientation is 'horizontal'
@@ -74,17 +77,18 @@ export Tabs = component
     i = from
     loop len
       i = (i + dir) %% len
-      tab = tabs.find (t) -> t.dataset.tab is ids[i]
+      tab = @_tabButtons().find (t) -> t.dataset.tab is ids[i]
       return ids[i] unless @_isDisabled(tab)
     ids[from]
 
   onKeydown: (e) ->
-    ids = tabs.map (t) -> t.dataset.tab
+    buttons = @_tabButtons()
+    ids = buttons.map (t) -> t.dataset.tab
     idx = ids.indexOf @active
     return if idx is -1
     move = (nextId) =>
       return unless nextId
-      tabs.find((t) -> t.dataset.tab is nextId)?.focus()
+      buttons.find((t) -> t.dataset.tab is nextId)?.focus()
       @select(nextId) if @activation is 'automatic'
     ARIA.rovingNav e, {
       next:   => move(@_nextEnabled(ids, idx,              1))
@@ -96,9 +100,10 @@ export Tabs = component
 
   render
     .
-      div role: "tablist", aria-orientation: @orientation, data-activation-direction: activationDirection, @keydown: @onKeydown
+      div ref: "_tablist", role: "tablist", aria-orientation: @orientation, data-activation-direction: activationDirection, @keydown: @onKeydown
         for tab in tabs
           button role: "tab"
+            data-tab: tab.dataset.tab
             id: "#{_id}-tab-#{tab.dataset.tab}"
             aria-selected: tab.dataset.tab is @active
             aria-controls: "#{_id}-panel-#{tab.dataset.tab}"

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

@@ -7,13 +7,13 @@
 #   Textarea value <=> bio, placeholder: "Tell us about yourself"
 #   Textarea value <=> notes, autoResize: true, rows: 3
 
-export Textarea = component
-  @value := ''
-  @placeholder := ''
-  @disabled := false
-  @required := false
-  @rows := 3
-  @autoResize := false
+export Textarea = component extends textarea
+  @value:: string := ""
+  @placeholder:: string := ""
+  @disabled:: boolean := false
+  @required:: boolean := false
+  @rows:: number := 3
+  @autoResize:: boolean := false
 
   focused := false
   touched := false
@@ -35,7 +35,7 @@ export Textarea = component
     @_resize(@_root) if @autoResize and @value
 
   render
-    textarea ref: "_root", value: @value, placeholder: @placeholder, rows: @rows
+    textarea value: @value, placeholder: @placeholder, rows: @rows
       disabled: @disabled
       required: @required
       aria-disabled: @disabled?!

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

@@ -19,8 +19,8 @@
 #   ToastViewport toasts <=> toasts
 
 export ToastViewport = component
-  @toasts := []
-  @placement := 'bottom-right'
+  @toasts:: any[] := []
+  @placement:: "top-left" | "top-right" | "bottom-left" | "bottom-right" := "bottom-right"
 
   _onDismiss: (toast) ->
     @toasts = @toasts.filter (t) -> t isnt toast
@@ -31,7 +31,7 @@ export ToastViewport = component
         Toast toast: toast, @dismiss: (e) => @_onDismiss(e.detail)
 
 export Toast = component
-  @toast := {}
+  @toast:: Record<string, any> := {}
 
   leaving := false
   _timer := null

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

@@ -11,10 +11,10 @@
 #     div $value: "right", "Right"
 
 export ToggleGroup = component
-  @value := null
-  @disabled := false
-  @multiple := false
-  @orientation := 'horizontal'
+  @value:: any := null
+  @disabled:: boolean := false
+  @multiple:: boolean := false
+  @orientation:: "horizontal" | "vertical" := "horizontal"
 
   _items ~=
     return [] unless @_slot
@@ -40,18 +40,49 @@ export ToggleGroup = component
       @value = if val is @value then null else val
     @emit 'change', @value
 
+  _buttons: ->
+    Array.from(@_root?.querySelectorAll('button[aria-pressed]') or [])
+
+  _syncTabStops: (focusIdx = null) ->
+    buttons = @_buttons()
+    return unless buttons.length
+    idx = focusIdx
+    if idx is null
+      idx = buttons.indexOf(document.activeElement)
+    if idx < 0
+      idx = buttons.findIndex (btn) -> btn.getAttribute('aria-pressed') is 'true'
+    idx = 0 if idx < 0
+    buttons.forEach (btn, i) -> btn.tabIndex = if i is idx then 0 else -1
+
+  _focusIndex: (idx) ->
+    buttons = @_buttons()
+    return unless buttons.length
+    idx = Math.max(0, Math.min(idx, buttons.length - 1))
+    @_syncTabStops(idx)
+    buttons[idx]?.focus()
+
   onKeydown: (e) ->
-    opts = @_root?.querySelectorAll('[data-value]')
+    opts = @_buttons()
     return unless opts?.length
     focused = Array.from(opts).indexOf(document.activeElement)
     return if focused < 0
     len = opts.length
     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'
+      next:  => @_focusIndex((focused + 1) %% len)
+      prev:  => @_focusIndex((focused - 1) %% len)
+      first: => @_focusIndex(0)
+      last:  => @_focusIndex(len - 1)
+    }, @orientation
+
+  onFocusin: (e) ->
+    buttons = @_buttons()
+    idx = buttons.indexOf(e.target)
+    @_syncTabStops(idx) if idx >= 0
+
+  mounted: ->
+    requestAnimationFrame => @_syncTabStops()
+
+  ~> @_syncTabStops()
 
   render
     div ref: "_root", role: "group", aria-orientation: @orientation
@@ -62,7 +93,7 @@ export ToggleGroup = component
         slot
 
       for item, idx in _items
-        button tabindex: (if idx is 0 then "0" else "-1")
+        button tabindex: "-1"
           aria-pressed: !!@_isPressed(item)
           $pressed: @_isPressed(item)?!
           $disabled: @disabled?!

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

@@ -8,8 +8,8 @@
 #     "Bold"
 
 export Toggle = component
-  @pressed := false
-  @disabled := false
+  @pressed:: boolean := false
+  @disabled:: boolean := false
 
   onClick: ->
     return if @disabled

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

@@ -11,8 +11,8 @@
 #     Toggle pressed <=> isBold, "Bold"
 
 export Toolbar = component
-  @orientation := 'horizontal'
-  @label := ''
+  @orientation:: "horizontal" | "vertical" := "horizontal"
+  @label:: string := ""
 
   _getFocusable: ->
     return [] unless @_root

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

@@ -12,38 +12,24 @@ lastCloseTime = 0
 GROUP_TIMEOUT = 400
 
 export Tooltip = component
-  @text := ''
-  @placement := 'top'
-  @delay := 300
-  @offset := 6
-  @hoverable := false
+  @text:: string := ""
+  @placement:: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right" := "top"
+  @delay:: number := 300
+  @offset:: number := 6
+  @hoverable:: boolean := false
 
   open := false
   entering := false
   exiting := false
   _showTimer := null
   _hideTimer := null
+  _ready := false
   _id =! "tip-#{Math.random().toString(36).slice(2, 8)}"
 
   _applyPlacement: ->
-    return unless @_tip
     [side, align] = @placement.split('-')
-    align ?= 'center'
-    @_tip.style.position = 'fixed'
-    @_tip.style.inset = 'auto'
-    @_tip.style.margin = '0'
-    @_tip.style.positionArea = "#{side} #{align}"
-    @_tip.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
-    @_tip.style.positionVisibility = 'anchors-visible'
-    @_tip.style.marginTop = ''
-    @_tip.style.marginRight = ''
-    @_tip.style.marginBottom = ''
-    @_tip.style.marginLeft = ''
-    switch side
-      when 'bottom' then @_tip.style.marginTop = "#{@offset}px"
-      when 'top' then @_tip.style.marginBottom = "#{@offset}px"
-      when 'left' then @_tip.style.marginRight = "#{@offset}px"
-      when 'right' then @_tip.style.marginLeft = "#{@offset}px"
+    align ??= 'center'
+    ARIA.position @_trigger, @_tip, placement: "#{side} #{align}", offset: @offset
 
   show: ->
     clearTimeout _hideTimer if _hideTimer
@@ -73,7 +59,11 @@ export Tooltip = component
     clearTimeout _showTimer if _showTimer
     clearTimeout _hideTimer if _hideTimer
 
+  mounted: ->
+    _ready = true
+
   ~>
+    return unless _ready
     if @_tip
       @_tip.setAttribute 'popover', 'hint'
       @_applyPlacement()
@@ -90,7 +80,13 @@ export Tooltip = component
         @focusout: @hide
         slot
 
-      div ref: "_tip", id: _id, role: "tooltip", style: "position:fixed;margin:0;inset:auto"
+      div ref: "_tip"
+        id: _id
+        role: "tooltip"
+        popover: "hint"
+        hidden: not open
+        aria-hidden: (open ? undefined : "true")
+        style: "position:fixed;margin:0;inset:auto"
         $open: open?!
         $entering: entering?!
         $exiting: exiting?!