@rip-lang/ui 0.3.65 → 0.3.67

package/components/autocomplete.rip

@@ -45,13 +45,24 @@ export Autocomplete = component
   openMenu: ->
     open = true
     @_hlIdx = -1
-    requestAnimationFrame => @_position()
+    @_input?.focus()
 
   close: ->
     open = false
     @_hlIdx = -1
-
-  _position: -> ARIA.positionBelow @_input, @_list, 2, false
+    @_input?.focus()
+
+  _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)'
 
   selectIndex: (idx) ->
     item = filteredItems[idx]
@@ -68,10 +79,7 @@ export Autocomplete = component
     @value = newVal
     open = true
     @_hlIdx = if filteredItems.length > 0 then 0 else -1
-    setTimeout =>
-      @_position()
-      @_updateHighlight()
-    , 0
+    setTimeout (=> @_updateHighlight()), 0
 
   onKeydown: (e) ->
     len = filteredItems.length
@@ -84,7 +92,11 @@ export Autocomplete = component
       dismiss: => @close()
       tab:     => @close()
 
-  ~> ARIA.popupDismiss open, (=> @_list), (=> @close()), [=> @_input], (=> @_position())
+  ~>
+    if @_list
+      @_list.setAttribute 'popover', 'auto'
+      @_applyPlacement()
+    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_input)
 
   mounted: ->
     @_hlIdx = -1
@@ -104,10 +116,9 @@ export Autocomplete = component
         placeholder: @placeholder
         @input: @onInput
 
-      if open and filteredItems.length > 0
-        div ref: "_list", id: _listId, role: "listbox", $open: true, style: "position:fixed"
-          for item, idx in filteredItems
-            div role: "option", tabindex: "-1"
-              @click: (=> @selectIndex(idx))
-              @mouseenter: (=> @_hlIdx = idx; @_updateHighlight())
-              "#{if typeof item is 'string' then item else (item.label or item.name or String(item))}"
+      div ref: "_list", id: _listId, role: "listbox", $open: open?!, style: "position:fixed;margin:0;inset:auto"
+        for item, idx in filteredItems
+          div role: "option", tabindex: "-1"
+            @click: (=> @selectIndex(idx))
+            @mouseenter: (=> @_hlIdx = idx; @_updateHighlight())
+            "#{if typeof item is 'string' then item else (item.label or item.name or String(item))}"

package/components/combobox.rip

@@ -46,13 +46,23 @@ export Combobox = component
   openMenu: ->
     open = true
     highlightedIndex = -1
-    requestAnimationFrame => @_position()
+    @_input?.focus()
 
   close: ->
     open = false
     highlightedIndex = -1
-
-  _position: -> ARIA.positionBelow @_input, @_list, 2, false
+    @_input?.focus()
+
+  _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)'
 
   isDisabled: (item) -> item?.hasAttribute?('data-disabled')
 
@@ -85,7 +95,11 @@ export Combobox = component
       dismiss: => if open then @close() else @query = ''
       tab:     => @close()
 
-  ~> ARIA.popupDismiss open, (=> @_list), (=> @close()), [=> @_content], (=> @_position())
+  ~>
+    if @_list
+      @_list.setAttribute 'popover', 'auto'
+      @_applyPlacement()
+    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_input)
 
   render
     . ref: "_content", $open: open?!
@@ -109,17 +123,16 @@ export Combobox = component
           button aria-label: "Clear", $clear: true, @click: @clear
             "✕"
 
-      # Listbox — conditionally rendered (like Select)
-      if open and @items.length > 0
-        div ref: "_list", id: _listId, role: "listbox", $open: true
-          style: "position:fixed"
-          for item, idx in @items
-            div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
-              $value: item
-              $highlighted: (idx is highlightedIndex)?!
-              @click: (=> @selectIndex(idx))
-              @mouseenter: (=> highlightedIndex = idx)
-              "#{item}"
-      if open and @items.length is 0 and @query
-        div role: "status", aria-live: "polite", $empty: true
-          "No results"
+      # Listbox
+      div ref: "_list", id: _listId, role: "listbox", style: "position:fixed;margin:0;inset:auto"
+        $open: open?!
+        for item, idx in @items
+          div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
+            $value: item
+            $highlighted: (idx is highlightedIndex)?!
+            @click: (=> @selectIndex(idx))
+            @mouseenter: (=> highlightedIndex = idx)
+            "#{item}"
+        if @items.length is 0 and @query
+          div role: "status", aria-live: "polite", $empty: true
+            "No results"

package/components/dialog.rip

@@ -17,7 +17,6 @@ export Dialog = component
   @dismissable := true
   @initialFocus := null
 
-  _prevFocus = null
   _id =! "dlg-#{Math.random().toString(36).slice(2, 8)}"
 
   ~>
@@ -29,7 +28,6 @@ export Dialog = component
 
   ~>
     if @open
-      _prevFocus = document.activeElement
       ARIA.lockScroll(this)
       requestAnimationFrame =>
         panel = @_dialog
@@ -42,7 +40,6 @@ export Dialog = component
             panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')?[0]?.focus()
       return ->
         ARIA.unlockScroll(this)
-        _prevFocus?.focus()
 
   close: ->
     @open = false

package/components/multi-select.rip

@@ -66,6 +66,7 @@ export MultiSelect = component
     open = false
     query = ''
     highlightedIndex = -1
+    @_input?.focus()
 
   onFocusin: -> open = true
 
@@ -75,7 +76,16 @@ export MultiSelect = component
       @_close()
     , 0
 
-  _position: -> ARIA.positionBelow @_input, @_list, 2, false
+  _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)'
 
   _onKeydown: (e) ->
     len = filtered.length
@@ -104,8 +114,10 @@ export MultiSelect = component
         query = ''
 
   ~>
-    if open then requestAnimationFrame => @_position()
-  ~> ARIA.popupDismiss open, (=> @_list), (=> @_close()), [=> @_content], (=> @_position())
+    if @_list
+      @_list.setAttribute 'popover', 'auto'
+      @_applyPlacement()
+    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_input)
 
   render
     . ref: "_content", $open: open?!, $disabled: @disabled?!
@@ -133,15 +145,17 @@ export MultiSelect = component
             "✕"
 
       # 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)
+      div ref: "_list", id: _listId, role: "listbox", $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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.3.65",
+  "version": "0.3.67",
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "repository": {
     "type": "git",
@@ -41,11 +41,11 @@
     "test:e2e:axe": "UI_AXE=1 bunx playwright test -c playwright.config.mjs --project=chromium"
   },
   "dependencies": {
-    "rip-lang": ">=3.13.118"
+    "rip-lang": ">=3.13.120"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.11.1",
-    "@rip-lang/server": "1.3.105",
+    "@rip-lang/server": "1.3.109",
     "playwright": "1.58.2"
   }
 }