@rip-lang/ui 0.3.54 → 0.3.56

package/README.md

@@ -28,6 +28,9 @@ cd packages/ui
 rip server
 ```
 
+For browser quality checks and overlay regression tests, see
+[TESTING.md](TESTING.md).
+
 Every widget:
 - Handles all keyboard interactions per WAI-ARIA Authoring Practices
 - Sets correct ARIA attributes automatically

package/components/alert-dialog.rip

@@ -17,25 +17,30 @@ export AlertDialog = component
   @initialFocus := null
 
   _prevFocus = null
-  _cleanupTrap = null
   _id =! "adlg-#{Math.random().toString(36).slice(2, 8)}"
 
+  ~>
+    ARIA.bindDialog @open, (=> @_dialog), ((isOpen) =>
+      if not isOpen and @open
+        @open = false
+        @emit 'close'
+    ), false
+
   ~>
     if @open
       _prevFocus = document.activeElement
       ARIA.lockScroll(this)
       requestAnimationFrame =>
-        panel = @_panel
+        panel = @_dialog
         if panel
           ARIA.wireAria panel, _id
+          panel.setAttribute 'role', 'alertdialog'
           if @initialFocus
             target = if typeof @initialFocus is 'string' then panel.querySelector(@initialFocus) else @initialFocus
             target?.focus()
           else
             panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')?[0]?.focus()
-          _cleanupTrap = ARIA.trapFocus(panel)
       return ->
-        _cleanupTrap?()
         ARIA.unlockScroll(this)
         _prevFocus?.focus()
 
@@ -44,7 +49,5 @@ export AlertDialog = component
     @emit 'close'
 
   render
-    if @open
-      div ref: "_backdrop", $open: true
-        div ref: "_panel", role: "alertdialog", aria-modal: "true", tabindex: "-1"
-          slot
+    dialog ref: "_dialog", $open: @open?!
+      slot

package/components/dialog.rip

@@ -1,6 +1,6 @@
 # Dialog — accessible headless modal dialog
 #
-# Traps focus, locks scroll, dismisses on Escape or click outside.
+# Native `<dialog>` variant that uses `showModal()` for top-layer modality.
 # Restores focus to the previously focused element on close.
 # Auto-wires aria-labelledby (first h1-h6) and aria-describedby (first p).
 #
@@ -18,15 +18,21 @@ export Dialog = component
   @initialFocus := null
 
   _prevFocus = null
-  _cleanupTrap = null
   _id =! "dlg-#{Math.random().toString(36).slice(2, 8)}"
 
+  ~>
+    ARIA.bindDialog @open, (=> @_dialog), ((isOpen) =>
+      if not isOpen and @open
+        @open = false
+        @emit 'close'
+    ), @dismissable
+
   ~>
     if @open
       _prevFocus = document.activeElement
       ARIA.lockScroll(this)
       requestAnimationFrame =>
-        panel = @_panel
+        panel = @_dialog
         if panel
           ARIA.wireAria panel, _id
           if @initialFocus
@@ -34,9 +40,7 @@ export Dialog = component
             target?.focus()
           else
             panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')?[0]?.focus()
-          _cleanupTrap = ARIA.trapFocus(panel)
       return ->
-        _cleanupTrap?()
         ARIA.unlockScroll(this)
         _prevFocus?.focus()
 
@@ -45,17 +49,15 @@ export Dialog = component
     @emit 'close'
 
   onKeydown: (e) ->
-    if e.key is 'Escape' and dialogStack[dialogStack.length - 1] is this
+    if e.key is 'Escape'
       e.preventDefault()
       @close() if @dismissable
 
   onBackdropClick: (e) ->
-    @close() if e.target is e.currentTarget and @dismissable
+    if e.target is e.currentTarget and @dismissable
+      @_dialog?.close()
 
   render
-    if @open
-      div ref: "_backdrop", $open: true,
-        @click: @onBackdropClick,
-        @keydown: @onKeydown
-        div ref: "_panel", role: "dialog", aria-modal: "true", tabindex: "-1"
-          slot
+    dialog ref: "_dialog", @click: @onBackdropClick, @keydown: @onKeydown
+      $open: @open?!
+      slot

package/components/drawer.rip

@@ -15,22 +15,26 @@ export Drawer = component
   @dismissable := true
 
   _prevFocus = null
-  _scrollY = 0
   _id =! "drw-#{Math.random().toString(36).slice(2, 8)}"
 
+  ~>
+    ARIA.bindDialog @open, (=> @_dialog), ((isOpen) =>
+      if not isOpen and @open
+        @open = false
+        @emit 'close'
+    ), @dismissable
+
   ~>
     if @open
       _prevFocus = document.activeElement
-      document.body.style.overflow = 'hidden'
+      ARIA.lockScroll(this)
       requestAnimationFrame =>
-        panel = @_panel
+        panel = @_dialog
         if panel
           ARIA.wireAria panel, _id
           panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')?[0]?.focus()
-          @_cleanupTrap = ARIA.trapFocus(panel)
       return ->
-        @_cleanupTrap?()
-        document.body.style.overflow = ''
+        ARIA.unlockScroll(this)
         _prevFocus?.focus()
 
   close: ->
@@ -43,13 +47,12 @@ export Drawer = component
       @close()
 
   onBackdropClick: (e) ->
-    @close() if e.target is e.currentTarget and @dismissable
+    if e.target is e.currentTarget and @dismissable
+      @_dialog?.close()
 
   render
-    if @open
-      div ref: "_backdrop", $open: true, $side: @side
-        @click: @onBackdropClick
-        @keydown: @onKeydown
-        div ref: "_panel", role: "dialog", aria-modal: "true", tabindex: "-1"
-          $side: @side
-          slot
+    dialog ref: "_dialog", $open: @open?!, $side: @side
+      @click: @onBackdropClick
+      @keydown: @onKeydown
+      $side: @side
+      slot

package/components/menu.rip

@@ -2,7 +2,7 @@
 #
 # 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.
+# Uses native `popover="auto"` + anchor positioning. Ships zero CSS.
 #
 # Usage:
 #   Menu
@@ -18,6 +18,7 @@ export Menu = component
   highlightedIndex := -1
   typeaheadBuffer := ''
   typeaheadTimer := null
+  _id =! "menu-#{Math.random().toString(36).slice(2, 8)}"
 
   items ~=
     return [] unless @_slot
@@ -35,9 +36,7 @@ export Menu = component
   openMenu: ->
     open = true
     highlightedIndex = 0
-    requestAnimationFrame =>
-      @_position()
-      @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
+    requestAnimationFrame => @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
 
   close: ->
     open = false
@@ -73,7 +72,15 @@ export Menu = component
       highlightedIndex = idx
       @_list?.querySelectorAll('[role="menuitem"]')[idx]?.focus()
 
-  _position: -> ARIA.positionBelow @_trigger, @_list
+  _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'
 
   onTriggerKeydown: (e) ->
     return if @disabled
@@ -98,7 +105,14 @@ export Menu = component
       tab:     => @close()
       char:    => @_typeahead(e.key)
 
-  ~> ARIA.popupDismiss open, (=> @_list), (=> @close()), [=> @_trigger], (=> @_position())
+  ~>
+    if @_list
+      @_list.id = _id
+      @_list.setAttribute 'popover', 'auto'
+      @_applyPlacement()
+    if @_trigger
+      @_trigger.setAttribute 'aria-controls', _id
+    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_trigger)
 
   render
     .
@@ -115,14 +129,13 @@ export Menu = component
       . 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
+      div ref: "_list", role: "menu", $open: open?!, style: "position:fixed;margin:0;inset:auto", @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/components/popover.rip

@@ -1,7 +1,7 @@
 # Popover — accessible headless popover with anchor positioning
 #
-# Positions itself relative to the trigger. Dismisses on Escape or click outside.
-# Exposes $open, $placement on content. Ships zero CSS.
+# Uses the native Popover API (top-layer + light-dismiss) and CSS anchor
+# positioning. Exposes $open, $placement on content. Ships zero CSS.
 #
 # Usage:
 #   Popover placement: "bottom-start"
@@ -23,83 +23,64 @@ export Popover = component
   _hoverCloseTimer := null
   _id =! "pop-#{Math.random().toString(36).slice(2, 8)}"
 
+  _applyPlacement: ->
+    floating = @_content?.querySelector('[data-content]')
+    return unless floating
+    [side, align] = @placement.split('-')
+    align ?= 'center'
+    area = "#{side} #{align}"
+    floating.style.position = 'fixed'
+    floating.style.inset = 'auto'
+    floating.style.margin = '0'
+    floating.style.positionArea = area
+    floating.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
+    floating.style.positionVisibility = 'anchors-visible'
+    floating.style.marginTop = ''
+    floating.style.marginRight = ''
+    floating.style.marginBottom = ''
+    floating.style.marginLeft = ''
+    switch side
+      when 'bottom' then floating.style.marginTop = "#{@offset}px"
+      when 'top' then floating.style.marginBottom = "#{@offset}px"
+      when 'left' then floating.style.marginRight = "#{@offset}px"
+      when 'right' then floating.style.marginLeft = "#{@offset}px"
+
   mounted: ->
     _ready = true
     trigger = @_content?.querySelector('[data-trigger]')
-    if trigger
+    floating = @_content?.querySelector('[data-content]')
+    if trigger and floating
+      floating.id = _id
+      floating.setAttribute 'popover', 'auto'
       trigger.setAttribute 'aria-expanded', false
       trigger.setAttribute 'aria-haspopup', 'dialog'
-      trigger.addEventListener 'click', => @toggle()
+      trigger.setAttribute 'aria-controls', _id
+      trigger.addEventListener 'click', =>
+        return if @disabled
+        open = not open
       trigger.addEventListener 'keydown', (e) =>
         if e.key in ['Enter', ' ', 'ArrowDown']
           e.preventDefault()
-          @toggle()
+          return if @disabled
+          open = not open
       if @openOnHover
         trigger.addEventListener 'mouseenter', =>
           clearTimeout _hoverCloseTimer if _hoverCloseTimer
-          _hoverTimer = setTimeout (=> @openPopover()), @hoverDelay
+          _hoverTimer = setTimeout (=> open = true), @hoverDelay
         trigger.addEventListener 'mouseleave', =>
           clearTimeout _hoverTimer if _hoverTimer
-          _hoverCloseTimer = setTimeout (=> @close()), @hoverCloseDelay
+          _hoverCloseTimer = setTimeout (=> open = false), @hoverCloseDelay
+      @_applyPlacement()
 
   toggle: ->
     return if @disabled
-    if open then @close() else @openPopover()
+    open = not open
 
   openPopover: ->
     open = true
-    requestAnimationFrame => @_position()
 
   close: ->
     open = false
-    @_content?.querySelector('[data-trigger]')?.focus()
-
-  _position: ->
-    trigger = @_content?.querySelector('[data-trigger]')
-    floating = @_content?.querySelector('[data-content]')
-    return unless trigger and floating
-    @_content.style.position = 'relative'
-    tr = trigger.getBoundingClientRect()
-    cr = @_content.getBoundingClientRect()
-    fl = floating.getBoundingClientRect()
-    [side, align] = @placement.split('-')
-    align ?= 'center'
-    gap = @offset
-
-    x = switch side
-      when 'bottom', 'top'
-        switch align
-          when 'start' then tr.left - cr.left
-          when 'end' then tr.right - cr.left - fl.width
-          else tr.left - cr.left + (tr.width - fl.width) / 2
-      when 'right' then tr.right - cr.left + gap
-      when 'left' then tr.left - cr.left - fl.width - gap
-
-    y = switch side
-      when 'bottom' then tr.bottom - cr.top + gap
-      when 'top' then tr.top - cr.top - fl.height - gap
-      when 'left', 'right'
-        switch align
-          when 'start' then tr.top - cr.top
-          when 'end' then tr.bottom - cr.top - fl.height
-          else tr.top - cr.top + (tr.height - fl.height) / 2
-
-    if side is 'bottom' and tr.bottom + gap + fl.height > window.innerHeight
-      y = tr.top - cr.top - fl.height - gap
-    if side is 'top' and tr.top - fl.height - gap < 0
-      y = tr.bottom - cr.top + gap
-    if side is 'right' and tr.right + gap + fl.width > window.innerWidth
-      x = tr.left - cr.left - fl.width - gap
-    if side is 'left' and tr.left - fl.width - gap < 0
-      x = tr.right - cr.left + gap
-
-    x = Math.max(4 - cr.left, Math.min(x, window.innerWidth - cr.left - fl.width - 4))
-
-    floating.style.position = 'absolute'
-    floating.style.left = "#{x}px"
-    floating.style.top = "#{y}px"
-    floating.style.zIndex = '50'
-    floating.style.visibility = 'visible'
 
   ~>
     return unless _ready
@@ -108,29 +89,14 @@ export Popover = component
     if trigger
       trigger.setAttribute 'aria-expanded', !!open
     if floating
-      if open
-        floating.style.position = 'fixed'
-        floating.style.left = '-9999px'
-        floating.style.top = '-9999px'
-        floating.hidden = false
-        floating.style.visibility = 'hidden'
-        floating.setAttribute 'data-open', ''
-        floating.setAttribute 'data-placement', @placement
-        ARIA.wireAria floating, _id
-      else
-        floating.hidden = true
-        floating.removeAttribute 'data-open'
+      floating.setAttribute 'data-placement', @placement
+      if open then floating.setAttribute 'data-open', '' else floating.removeAttribute 'data-open'
+      ARIA.wireAria floating, _id
+      @_applyPlacement()
 
   ~>
     return unless _ready
-    if open
-      onDown = (e) =>
-        trigger = @_content?.querySelector('[data-trigger]')
-        floating = @_content?.querySelector('[data-content]')
-        unless trigger?.contains(e.target) or floating?.contains(e.target)
-          @close()
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
+    ARIA.bindPopover open, (=> @_content?.querySelector('[data-content]')), ((isOpen) => open = isOpen), (=> @_content?.querySelector('[data-trigger]'))
 
   onKeydown: (e) ->
     if e.key is 'Escape' and open

package/components/preview-card.rip

@@ -1,7 +1,8 @@
 # PreviewCard — accessible headless hover preview card
 #
 # Shows a floating card on hover/focus of a trigger element. Dismisses
-# on mouse leave or blur. Ships zero CSS.
+# on mouse leave or blur. Uses native `popover="hint"` for top-layer behavior.
+# Ships zero CSS.
 #
 # Usage:
 #   PreviewCard delay: 400
@@ -17,6 +18,7 @@ export PreviewCard = component
   _ready := false
   _openTimer := null
   _closeTimer := null
+  _id =! "pc-#{Math.random().toString(36).slice(2, 8)}"
 
   beforeUnmount: ->
     clearTimeout _openTimer if _openTimer
@@ -25,13 +27,19 @@ export PreviewCard = component
   mounted: ->
     _ready = true
     trigger = @_root?.querySelector('[data-trigger]')
-    return unless trigger
+    floating = @_root?.querySelector('[data-content]')
+    return unless trigger and floating
+    floating.id = _id
+    floating.setAttribute 'popover', 'hint'
+    trigger.setAttribute 'aria-controls', _id
+    trigger.setAttribute 'aria-expanded', false
     trigger.addEventListener 'mouseenter', =>
       clearTimeout _closeTimer if _closeTimer
-      _openTimer = setTimeout (=> open = true; @_position()), @delay
+      _openTimer = setTimeout (=> open = true), @delay
     trigger.addEventListener 'mouseleave', =>
       clearTimeout _openTimer if _openTimer
       _closeTimer = setTimeout (=> open = false), @closeDelay
+    @_applyPlacement()
     trigger.addEventListener 'focus', =>
       clearTimeout _closeTimer if _closeTimer
       _openTimer = setTimeout (=> open = true; @_position()), @delay
@@ -39,25 +47,27 @@ export PreviewCard = component
       clearTimeout _openTimer if _openTimer
       _closeTimer = setTimeout (=> open = false), @closeDelay
 
-  _position: ->
-    trigger = @_root?.querySelector('[data-trigger]')
+  _applyPlacement: ->
     floating = @_root?.querySelector('[data-content]')
-    return unless trigger and floating
-    @_root.style.position = 'relative'
-    tr = trigger.getBoundingClientRect()
-    cr = @_root.getBoundingClientRect()
-    floating.style.position = 'absolute'
-    floating.style.left = "0px"
-    floating.style.top = "#{tr.bottom - cr.top + 4}px"
-    floating.style.zIndex = '50'
+    return unless floating
+    floating.style.position = 'fixed'
+    floating.style.inset = 'auto'
+    floating.style.margin = '0'
+    floating.style.positionArea = 'bottom start'
+    floating.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
+    floating.style.positionVisibility = 'anchors-visible'
+    floating.style.marginTop = '4px'
 
   ~>
     return unless _ready
+    trigger = @_root?.querySelector('[data-trigger]')
     floating = @_root?.querySelector('[data-content]')
-    return unless floating
-    floating.hidden = not open
+    return unless floating and trigger
+    trigger.setAttribute 'aria-expanded', !!open
+    @_applyPlacement()
+    if open then floating.setAttribute('data-open', '') else floating.removeAttribute('data-open')
+    ARIA.bindPopover open, (=> floating), ((isOpen) => open = isOpen), (=> trigger)
     if open
-      floating.setAttribute 'data-open', ''
       onEnter = => clearTimeout _closeTimer if _closeTimer
       onLeave = => _closeTimer = setTimeout (=> open = false), @closeDelay
       floating.addEventListener 'mouseenter', onEnter
@@ -65,8 +75,6 @@ export PreviewCard = component
       return ->
         floating.removeEventListener 'mouseenter', onEnter
         floating.removeEventListener 'mouseleave', onLeave
-    else
-      floating.removeAttribute 'data-open'
 
   render
     div ref: "_root"

package/components/select.rip

@@ -4,6 +4,7 @@
 #           Home/End for first/last, typeahead to jump by character.
 #
 # Exposes $open and $placeholder on button, $highlighted and $selected on options.
+# Uses native `popover="auto"` + anchor positioning.
 # Ships zero CSS — style entirely via attribute selectors in your stylesheet.
 #
 # Usage:
@@ -42,9 +43,7 @@ export Select = component
   openMenu: ->
     open = true
     highlightedIndex = Math.max(0, options.findIndex (o) -> @getOpt(o) is String(@value))
-    requestAnimationFrame =>
-      @_position()
-      @_focusHighlighted()
+    requestAnimationFrame => @_focusHighlighted()
 
   close: ->
     open = false
@@ -105,9 +104,22 @@ export Select = component
     el?.focus()
     el?.scrollIntoView { block: 'nearest' }
 
-  _position: -> ARIA.positionBelow @_trigger, @_list
-
-  ~> ARIA.popupDismiss open, (=> @_list), (=> @close()), [=> @_trigger], (=> @_position())
+  _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)'
+
+  ~>
+    if @_list
+      @_list.setAttribute 'popover', 'auto'
+      @_applyPlacement()
+    ARIA.bindPopover open, (=> @_list), ((isOpen) => open = isOpen), (=> @_trigger)
 
   render
     .
@@ -130,19 +142,18 @@ export Select = component
         slot
 
       # Dropdown listbox
-      if open
-        div ref: "_list", id: _listId, role: "listbox", style: "position:fixed;visibility:hidden"
-          $open: true
-          @keydown: @onListKeydown
-          for opt, idx in options
-            div role: "option"
-              tabindex: "-1"
-              $value: @getOpt(opt)
-              $highlighted: (idx is highlightedIndex)?!
-              $selected: (@getOpt(opt) is String(@value))?!
-              $disabled: @isDisabled(opt)?!
-              aria-selected: @getOpt(opt) is String(@value)
-              aria-disabled: @isDisabled(opt)?!
-              @click: (=> @selectIndex(idx))
-              @mouseenter: (=> highlightedIndex = idx)
-              = opt.textContent
+      div ref: "_list", id: _listId, role: "listbox", style: "position:fixed;margin:0;inset:auto"
+        $open: open?!
+        @keydown: @onListKeydown
+        for opt, idx in options
+          div role: "option"
+            tabindex: "-1"
+            $value: @getOpt(opt)
+            $highlighted: (idx is highlightedIndex)?!
+            $selected: (@getOpt(opt) is String(@value))?!
+            $disabled: @isDisabled(opt)?!
+            aria-selected: @getOpt(opt) is String(@value)
+            aria-disabled: @isDisabled(opt)?!
+            @click: (=> @selectIndex(idx))
+            @mouseenter: (=> highlightedIndex = idx)
+            = opt.textContent

package/components/tooltip.rip

@@ -1,6 +1,7 @@
 # Tooltip — accessible headless tooltip with delay and positioning
 #
-# Shows on hover/focus with configurable delay. Uses aria-describedby.
+# Shows on hover/focus with configurable delay. Uses aria-describedby and
+# native `popover="hint"` for top-layer behavior.
 # Exposes $open, $entering, $exiting. Ships zero CSS.
 #
 # Usage:
@@ -24,6 +25,26 @@ export Tooltip = component
   _hideTimer := null
   _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"
+
   show: ->
     clearTimeout _hideTimer if _hideTimer
     delay = if (Date.now() - lastCloseTime) < GROUP_TIMEOUT then 0 else @delay
@@ -32,7 +53,6 @@ export Tooltip = component
       entering = true
       setTimeout =>
         entering = false
-        @_position()
       , 0
     , delay
 
@@ -49,51 +69,17 @@ export Tooltip = component
     clearTimeout _hideTimer if _hideTimer
     exiting = false
 
-  _position: ->
-    return unless @_trigger and @_tip
-    tr = @_trigger.getBoundingClientRect()
-    fl = @_tip.getBoundingClientRect()
-    [side, align] = @placement.split('-')
-    align ?= 'center'
-    gap = @offset
-
-    x = switch side
-      when 'bottom', 'top'
-        switch align
-          when 'start' then tr.left
-          when 'end' then tr.right - fl.width
-          else tr.left + (tr.width - fl.width) / 2
-      when 'right' then tr.right + gap
-      when 'left' then tr.left - fl.width - gap
-
-    y = switch side
-      when 'bottom' then tr.bottom + gap
-      when 'top' then tr.top - fl.height - gap
-      when 'left', 'right'
-        switch align
-          when 'start' then tr.top
-          when 'end' then tr.bottom - fl.height
-          else tr.top + (tr.height - fl.height) / 2
-
-    if side is 'bottom' and y + fl.height > window.innerHeight
-      y = tr.top - fl.height - gap
-    if side is 'top' and y < 0
-      y = tr.bottom + gap
-    if side is 'right' and x + fl.width > window.innerWidth
-      x = tr.left - fl.width - gap
-    if side is 'left' and x < 0
-      x = tr.right + gap
-
-    x = Math.max(4, Math.min(x, window.innerWidth - fl.width - 4))
-
-    @_tip.style.position = 'fixed'
-    @_tip.style.left = "#{x}px"
-    @_tip.style.top = "#{y}px"
-
   beforeUnmount: ->
     clearTimeout _showTimer if _showTimer
     clearTimeout _hideTimer if _hideTimer
 
+  ~>
+    if @_tip
+      @_tip.setAttribute 'popover', 'hint'
+      @_applyPlacement()
+      if open then @_tip.setAttribute('data-open', '') else @_tip.removeAttribute('data-open')
+      ARIA.bindPopover open, (=> @_tip), ((isOpen) => open = isOpen), (=> @_trigger)
+
   render
     .
       div ref: "_trigger"
@@ -104,12 +90,11 @@ export Tooltip = component
         @focusout: @hide
         slot
 
-      if open
-        div ref: "_tip", id: _id, role: "tooltip", style: "position:fixed"
-          $open: true
-          $entering: entering?!
-          $exiting: exiting?!
-          $placement: @placement
-          @mouseenter: (=> @_cancelHide() if @hoverable)
-          @mouseleave: (=> @hide() if @hoverable)
-          @text
+      div ref: "_tip", id: _id, role: "tooltip", style: "position:fixed;margin:0;inset:auto"
+        $open: open?!
+        $entering: entering?!
+        $exiting: exiting?!
+        $placement: @placement
+        @mouseenter: (=> @_cancelHide() if @hoverable)
+        @mouseleave: (=> @hide() if @hoverable)
+        @text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.3.54",
+  "version": "0.3.56",
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "repository": {
     "type": "git",
@@ -34,7 +34,17 @@
   ],
   "license": "MIT",
   "type": "module",
+  "scripts": {
+    "test:e2e": "bunx playwright test -c playwright.config.mjs",
+    "test:e2e:chromium": "bunx playwright test -c playwright.config.mjs --project=chromium",
+    "test:e2e:headed": "bunx playwright test -c playwright.config.mjs --headed --project=chromium",
+    "test:e2e:axe": "UI_AXE=1 bunx playwright test -c playwright.config.mjs --project=chromium"
+  },
   "dependencies": {
-    "rip-lang": ">=3.13.107"
+    "rip-lang": ">=3.13.109"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "4.11.1",
+    "playwright": "1.58.2"
   }
 }