rip-lang 3.13.119 → 3.13.121

package/src/components.js

@@ -489,12 +489,14 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           }
         }
 
+        let atLineStart = tag === 'IDENTIFIER' && (prevTag === 'INDENT' || prevTag === 'TERMINATOR' || prevTag === 'RENDER');
+
         if (isClsxCallEnd) {
           isTemplateElement = true;
         } else if (tag === 'IDENTIFIER' && isTemplateTag(token[1]) && !isAfterControlFlow) {
           isTemplateElement = true;
         } else if (tag === 'IDENTIFIER' && !isAfterControlFlow) {
-          isTemplateElement = startsWithTag(tokens, i);
+          isTemplateElement = atLineStart || startsWithTag(tokens, i);
         } else if (tag === 'PROPERTY' || tag === 'STRING' || tag === 'STRING_END' || tag === 'NUMBER' || tag === 'BOOL' || tag === 'CALL_END' || tag === ')' || tag === 'PRESENCE') {
           isTemplateElement = startsWithTag(tokens, i);
         }
@@ -513,7 +515,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
               }
             }
           }
-          let isBareTag = isClsxCallEnd || (tag === 'IDENTIFIER' && isTemplateTag(token[1])) || isClassOrIdTail;
+          let isBareTag = isClsxCallEnd || (tag === 'IDENTIFIER' && (isTemplateTag(token[1]) || atLineStart)) || isClassOrIdTail;
 
           if (isBareTag) {
             let callStartToken = gen('CALL_START', '(', token);
@@ -804,6 +806,8 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
       const sl = [];
       sl.push('class {');
+      sl.push('  declare _root: Element | null;');
+      sl.push('  emit(name: string, detail?: any): void {}');
 
       // Constructor — typed props for public state/readonly (matches DTS)
       const propEntries = [];
@@ -892,6 +896,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
       // Pre-scan render block for @event: @method bindings to type method params
       const eventMethodTypes = new Map();
+      for (const [eventName, methodName] of autoEventHandlers) {
+        eventMethodTypes.set(methodName, eventName);
+      }
       if (renderBlock) {
         const scanEvents = (node) => {
           if (!Array.isArray(node)) return;
@@ -929,7 +936,8 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       // Methods
       for (const { name, func } of methods) {
         if (Array.isArray(func) && (func[0] === '->' || func[0] === '=>')) {
-          const [, params, methodBody] = func;
+          let [, params, methodBody] = func;
+          if ((!params || (Array.isArray(params) && params.length === 0)) && this.containsIt(methodBody)) params = ['it'];
           let paramStr = Array.isArray(params) ? params.map(p => this.formatParam(p)).join(', ') : '';
           // Inject event type on untyped first param when method is bound to an event
           const boundEvent = eventMethodTypes.get(name);
@@ -1063,7 +1071,8 @@ export function installComponentSupport(CodeGenerator, Lexer) {
                 constructions.push(`    };`);
               }
             }
-          } else if (typeof head === 'string' && head !== 'object' && head !== 'switch' && TEMPLATE_TAGS.has(head.split(/[.#]/)[0])) {
+          } else if (typeof head === 'string' && head !== 'object' && head !== 'switch' && (TEMPLATE_TAGS.has(head.split(/[.#]/)[0]) ||
+                     (/^[a-z]/.test(head) && node.length > 1 && Array.isArray(node[1]) && (node[1][0] === '->' || node[1][0] === '=>')))) {
             const tagName = head.split(/[.#]/)[0];
             const iProps = extractIntrinsicProps(node.slice(1));
             const tagLine = node.loc?.r;
@@ -1203,7 +1212,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       lines.push('    for (const key in this._rest) this._applyInheritedProp(this._inheritedEl, key, this._rest[key]);');
       lines.push('  }');
       lines.push('  _applyInheritedProp(el, key, value) {');
-      lines.push('    if (!el || key === \'key\' || key === \'ref\' || key.startsWith(\'__bind_\')) return;');
+      lines.push('    if (!el || key === \'key\' || key === \'ref\' || key === \'children\' || key.startsWith(\'__bind_\')) return;');
       lines.push('    if (key[0] === \'@\') {');
       lines.push('      const event = key.slice(1).split(\'.\')[0];');
       lines.push('      this._restHandlers || (this._restHandlers = {});');
@@ -1251,7 +1260,8 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     // --- Methods ---
     for (const { name, func } of methods) {
       if (Array.isArray(func) && (func[0] === '->' || func[0] === '=>')) {
-        const [, params, methodBody] = func;
+        let [, params, methodBody] = func;
+        if ((!params || (Array.isArray(params) && params.length === 0)) && this.containsIt(methodBody)) params = ['it'];
         const paramStr = Array.isArray(params) ? params.map(p => this.formatParam(p)).join(', ') : '';
         const transformed = this.reactiveMembers ? this.transformComponentMembers(methodBody) : methodBody;
         const isAsync = this.containsAwait(methodBody);
@@ -1494,6 +1504,33 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       return slotVar;
     }
 
+    // Switch: convert to if/else-if chain for conditional rendering
+    if (headStr === 'switch') {
+      const disc = rest[0];
+      const whens = rest[1] || [];
+      const defaultCase = rest[2] || null;
+      let chain = defaultCase;
+      for (let i = whens.length - 1; i >= 0; i--) {
+        const [, tests, body] = whens[i];
+        let cond;
+        if (disc === null) {
+          cond = tests.length === 1 ? tests[0]
+            : tests.reduce((a, t) => a ? ['||', a, t] : t, null);
+        } else {
+          cond = tests.length === 1 ? ['==', disc, tests[0]]
+            : tests.map(t => ['==', disc, t]).reduce((a, c) => a ? ['||', a, c] : c, null);
+        }
+        chain = ['if', cond, body, chain];
+      }
+      if (chain) {
+        if (Array.isArray(chain) && chain[0] === 'if') return this.generateConditional(chain);
+        return this.generateTemplateBlock(chain);
+      }
+      const cv = this.newElementVar('c');
+      this._createLines.push(`${cv} = document.createComment('switch');`);
+      return cv;
+    }
+
     // HTML tag (possibly with #id, e.g. div#content)
     if (headStr && this.isHtmlTag(headStr) && !meta(head, 'text')) {
       let [tagName, id] = headStr.split('#');

package/src/grammar/grammar.rip

@@ -772,8 +772,8 @@ grammar =
     o 'IMPORT ImportNamespaceSpecifier FROM String'                                 , '["import", 2, 4]'
     o 'IMPORT { } FROM String'                                                      , '["import", "{}", 5]'
     o 'IMPORT { ImportSpecifierList OptComma } FROM String'                         , '["import", 3, 7]'
-    o 'IMPORT ImportDefaultSpecifier , ImportNamespaceSpecifier FROM String'        , '["import", [2, 4], 6]'
-    o 'IMPORT ImportDefaultSpecifier , { ImportSpecifierList OptComma } FROM String', '["import", [2, 5], 9]'
+    o 'IMPORT ImportDefaultSpecifier , ImportNamespaceSpecifier FROM String'        , '["import", 2, 4, 6]'
+    o 'IMPORT ImportDefaultSpecifier , { ImportSpecifierList OptComma } FROM String', '["import", 2, 5, 9]'
   ]
 
   ImportSpecifierList: [

package/src/lexer.js

@@ -1638,6 +1638,26 @@ export class Lexer {
           return forward(1);
         }
 
+        // Dotted keys: collapse `IDENTIFIER . PROPERTY . PROPERTY` into a STRING
+        if (tokens[i - 1]?.[0] === 'PROPERTY' && tokens[i - 2]?.[0] === '.') {
+          let j = i - 2;
+          while (j >= 2 && tokens[j]?.[0] === '.' && (tokens[j - 1]?.[0] === 'PROPERTY' || tokens[j - 1]?.[0] === 'IDENTIFIER')) {
+            j -= 2;
+          }
+          j += 1;
+          if (tokens[j]?.[0] === 'IDENTIFIER' || tokens[j]?.[0] === 'PROPERTY') {
+            let parts = [];
+            for (let k = j; k < i; k += 2) parts.push(tokens[k][1]);
+            let str = gen('STRING', `"${parts.join('.')}"`, tokens[j]);
+            str.pre = tokens[j].pre;
+            str.spaced = tokens[j].spaced;
+            str.newLine = tokens[j].newLine;
+            str.loc = tokens[j].loc;
+            tokens.splice(j, i - j, str);
+            i = j + 1;
+          }
+        }
+
         // Find the start of this key
         let s = EXPRESSION_END.has(this.tokens[i - 1]?.[0]) ? stack[stack.length - 1]?.[1] ?? i - 1 : i - 1;
         if (this.tokens[i - 2]?.[0] === '@') s = i - 2;
@@ -1825,6 +1845,12 @@ export class Lexer {
     if (!this.tokens[j]) return false;
     if (this.tokens[j]?.[0] === '@' && this.tokens[j + 2]?.[0] === ':') return true;
     if (this.tokens[j + 1]?.[0] === ':') return true;
+    // Dotted keys: IDENTIFIER . PROPERTY ... :
+    if ((this.tokens[j]?.[0] === 'IDENTIFIER' || this.tokens[j]?.[0] === 'PROPERTY') && this.tokens[j + 1]?.[0] === '.') {
+      let k = j + 2;
+      while (this.tokens[k]?.[0] === 'PROPERTY' && this.tokens[k + 1]?.[0] === '.') k += 2;
+      if (this.tokens[k]?.[0] === 'PROPERTY' && this.tokens[k + 1]?.[0] === ':') return true;
+    }
     if (EXPRESSION_START.has(this.tokens[j]?.[0])) {
       let end = null;
       this.detectEnd(j + 1,

package/src/parser.js

@@ -189,8 +189,8 @@ const parserInstance = {
       case 327: case 330: return ["import", "{}", $[$0]];
       case 328: case 329: return ["import", $[$0-2], $[$0]];
       case 331: return ["import", $[$0-4], $[$0]];
-      case 332: return ["import", [$[$0-4], $[$0-2]], $[$0]];
-      case 333: return ["import", [$[$0-7], $[$0-4]], $[$0]];
+      case 332: return ["import", $[$0-4], $[$0-2], $[$0]];
+      case 333: return ["import", $[$0-7], $[$0-4], $[$0]];
       case 344: return ["*", $[$0]];
       case 345: return ["export", "{}"];
       case 346: return ["export", $[$0-2]];

package/src/sourcemap-utils.js

@@ -1,6 +1,37 @@
 // Shared source-map position utilities used by both the CLI type-checker
 // (src/typecheck.js) and the VS Code language server (packages/vscode/src/lsp.js).
 
+// When a switch expression is the implicit return of a function, the compiler
+// wraps it in an IIFE: `return (() => { switch ... })()`.  Non-exhaustive
+// switches produce TS2322 on the IIFE return, which source-maps to the `switch`
+// line.  This helper detects that pattern and remaps the diagnostic to the
+// function's return-type annotation (matching TS behaviour on the raw .ts).
+// Returns { line, col, len } if remapped, or null if no adjustment needed.
+export function adjustSwitchDiagnostic(source, pos, code) {
+  if (code !== 2322) return null;
+  const srcLines = source.split('\n');
+  const line = srcLines[pos.line] || '';
+  if (!/^\s*switch\b/.test(line)) return null;
+
+  const switchIndent = line.match(/^(\s*)/)[1].length;
+  for (let i = pos.line - 1; i >= 0; i--) {
+    const defLine = srcLines[i];
+    const defMatch = defLine.match(/^(\s*)def\b/);
+    if (defMatch && defMatch[1].length < switchIndent) {
+      // Found enclosing function — look for return-type annotation "):: Type"
+      const retMatch = defLine.match(/\)\s*::\s*(\w+)\s*$/);
+      if (retMatch) {
+        const typeStart = defLine.lastIndexOf(retMatch[1]);
+        return { line: i, col: typeStart, len: retMatch[1].length };
+      }
+      return { line: i, col: defMatch[1].length, len: 3 }; // fallback: highlight `def`
+    }
+    // Stop if we leave the indentation context
+    if (/\S/.test(defLine) && !defLine.match(/^(\s*)/)[1].length && !/^\s*#/.test(defLine)) break;
+  }
+  return null;
+}
+
 export function getLineText(text, lineNum) {
   let start = 0, line = 0;
   for (let i = 0; i <= text.length; i++) {
@@ -73,6 +104,22 @@ export function mapToSourcePos(entry, offset) {
       const srcLines = entry.source.split('\n');
       const re = new RegExp('\\b' + word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\b');
 
+      // For let/var declarations, the error word may appear on many source lines
+      // (e.g. `Status` referenced in multiple variable annotations). Narrow the
+      // search to the source line that declares the same variable.
+      const letMatch = genLineText.match(/^(?:export\s+)?(?:declare\s+)?(?:let|var)\s+(\w+)/);
+      if (letMatch) {
+        const varName = letMatch[1];
+        const varRe = new RegExp('\\b' + varName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s*::');
+        for (let s = 0; s < srcLines.length; s++) {
+          if (varRe.test(srcLines[s])) {
+            const m = re.exec(srcLines[s]);
+            if (m) return { line: s, col: m.index };
+            return { line: s, col: 0 };
+          }
+        }
+      }
+
       // Find enclosing type/interface from DTS context to narrow search —
       // without this, duplicate member names (e.g. "host" in two types) always
       // resolve to the first occurrence in the source.
@@ -98,6 +145,50 @@ export function mapToSourcePos(entry, offset) {
     return null;
   }
 
+  // Hoisted multi-variable `let` declaration (e.g. `let a, b, items, ...;`) —
+  // the compiler aggregates variable declarations into one line with no useful
+  // per-variable source mapping.  Detect the pattern (both top-level and inside
+  // functions), extract the word at the offset, and find its assignment in
+  // the Rip source.  Use the genToSrc mapping of the preceding TS line (the
+  // function declaration) to scope the search and avoid matching a same-named
+  // variable in a different function.
+  const hoistLine = getLineText(entry.tsContent, tsLine);
+  if (/^\s*let\s+[$\w]+\s*,/.test(hoistLine) && entry.source) {
+    let hl = 0;
+    for (let i = 0; i < entry.tsContent.length; i++) {
+      if (hl === tsLine) { hl = i; break; }
+      if (entry.tsContent[i] === '\n') hl++;
+    }
+    const hCol = offset - hl;
+    const hWord = hoistLine.slice(hCol).match(/^[$\w]+/);
+    if (hWord) {
+      const word = hWord[0];
+      const srcLines = entry.source.split('\n');
+      const assignRe = new RegExp('^' + word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s*(?:::|=!|:=|~=|=)');
+
+      // Scope the search: find the source line of the enclosing function by
+      // checking genToSrc for the TS line just before the hoisted let.
+      let searchStart = 0;
+      if (entry.genToSrc) {
+        for (let g = tsLine - 1; g >= 0; g--) {
+          const s = entry.genToSrc.get(g);
+          if (s !== undefined) { searchStart = s; break; }
+        }
+      }
+
+      for (let s = searchStart; s < srcLines.length; s++) {
+        if (assignRe.test(srcLines[s].trimStart())) {
+          const col = srcLines[s].indexOf(word);
+          if (col >= 0) return { line: s, col };
+        }
+      }
+      // Variable is on a hoisted let but has no recognisable assignment in
+      // the source (e.g. for-loop iterators, destructured names).  Return
+      // null so callers skip it rather than producing a garbage mapping.
+      return null;
+    }
+  }
+
   // Resolve source line from genToSrc
   let srcLine = entry.genToSrc.get(tsLine);
   if (srcLine === undefined) {

package/src/typecheck.js

@@ -13,7 +13,7 @@
 import { Compiler, getStdlibCode } from './compiler.js';
 import { createRequire } from 'module';
 import { readFileSync, existsSync, readdirSync } from 'fs';
-import { mapToSourcePos, offsetToLine, getLineText, findNearestWord, lineColToOffset, offsetToLineCol } from './sourcemap-utils.js';
+import { mapToSourcePos, offsetToLine, getLineText, findNearestWord, lineColToOffset, offsetToLineCol, adjustSwitchDiagnostic } from './sourcemap-utils.js';
 import { resolve, relative, dirname } from 'path';
 import { buildLineMap } from './sourcemaps.js';
 
@@ -22,7 +22,12 @@ import { buildLineMap } from './sourcemaps.js';
 // Detect type annotations (:: followed by space or =) ignoring comments,
 // string literals, and prototype syntax (Class::method).
 export function hasTypeAnnotations(source) {
+  let inHeredoc = false;
   return source.split('\n').some(line => {
+    // Track heredoc boundaries (''' or """)
+    const ticks = (line.match(/'''|"""/g) || []);
+    for (const t of ticks) inHeredoc = !inHeredoc;
+    if (inHeredoc) return false;
     // Strip comment
     line = line.replace(/#.*$/, '');
     // Strip string literals (single and double quoted)
@@ -247,6 +252,22 @@ export function cleanDiagnosticMessage(msg) {
   msg = msg.replace(/\b__ripEl\b/g, 'element');
   // Deduplicate consecutive identical lines (unwrapping can collapse nested messages)
   msg = msg.split('\n').filter((line, i, arr) => i === 0 || line.trim() !== arr[i - 1].trim()).join('\n');
+  // Remove redundant nested "Type 'X' is not assignable to type 'Y'" when
+  // the parent already says "Type 'X | Z' is not assignable to type 'Y'"
+  // and X is just one member of the union — the drill-down adds no information.
+  const lines = msg.split('\n');
+  if (lines.length >= 2) {
+    const parentMatch = lines[0].match(/^Type '(.+)' is not assignable to type '(.+)'\.$/);
+    if (parentMatch && parentMatch[1].includes(' | ')) {
+      const members = parentMatch[1].split(' | ').map(s => s.trim());
+      const filtered = lines.filter((line, i) => {
+        if (i === 0) return true;
+        const childMatch = line.trim().match(/^Type '(.+)' is not assignable to type '(.+)'\.$/);
+        return !(childMatch && childMatch[2] === parentMatch[2] && members.includes(childMatch[1]));
+      });
+      msg = filtered.join('\n');
+    }
+  }
   return msg;
 }
 
@@ -843,7 +864,7 @@ export function compileForCheck(filePath, source, compiler) {
 
 // ── Source mapping helpers (delegated to sourcemap-utils.js) ───────
 
-export { mapToSourcePos, offsetToLine, getLineText, findNearestWord, lineColToOffset, offsetToLineCol } from './sourcemap-utils.js';
+export { mapToSourcePos, offsetToLine, getLineText, findNearestWord, lineColToOffset, offsetToLineCol, adjustSwitchDiagnostic } from './sourcemap-utils.js';
 
 // Map a TypeScript diagnostic offset back to a Rip source line number.
 // Returns -1 if the offset falls in the DTS header.
@@ -957,15 +978,15 @@ export async function runCheck(targetDir, opts = {}) {
     }
   }
 
-  // Check for unresolved .rip imports in typed files
+  // Check for unresolved relative imports in all files (not just typed ones)
   const fileResults = [];
   let totalErrors = 0, totalWarnings = 0;
-  for (const [fp, entry] of compiled) {
-    if (!entry.hasTypes) continue;
-    const srcLines = entry.source.split('\n');
+  for (const [fp, source] of sourcesByPath) {
+    const srcLines = source.split('\n');
     const errors = [];
     for (let s = 0; s < srcLines.length; s++) {
-      const m = srcLines[s].match(/from\s+['"]([^'"]*\.rip)['"]/);
+      if (/^\s*#/.test(srcLines[s])) continue;
+      const m = srcLines[s].match(/^(?:import|export)\b.*from\s+['"](\.\.?\/[^'"]+)['"]/);
       if (!m) continue;
       const imported = resolve(dirname(fp), m[1]);
       if (!existsSync(imported)) {
@@ -1046,7 +1067,11 @@ export async function runCheck(targetDir, opts = {}) {
       const pos = mapToSourcePos(entry, d.start);
       if (!pos) continue;
 
-      const endPos = d.length ? mapToSourcePos(entry, d.start + d.length) : null;
+      // Remap IIFE-switch diagnostics to the enclosing function declaration
+      const adj = adjustSwitchDiagnostic(entry.source, pos, d.code);
+      if (adj) { pos.line = adj.line; pos.col = adj.col; }
+
+      const endPos = adj ? { line: adj.line, col: adj.col + adj.len } : (d.length ? mapToSourcePos(entry, d.start + d.length) : null);
       const len = endPos && endPos.line === pos.line ? endPos.col - pos.col : 1;
 
       const message = cleanDiagnosticMessage(ts.flattenDiagnosticMessageText(d.messageText, '\n'));

package/src/ui.rip

@@ -1075,6 +1075,18 @@ _ariaPopupDismiss = (open, popup, close, els = [], repos = null) ->
     document.removeEventListener 'mousedown', onDown
     window.removeEventListener   'scroll',    onScroll, true
 
+# popupGuard — per-component reopen suppression for pointer-driven popup closes.
+# Use when the same gesture that closes a popup can otherwise refocus/reclick a
+# trigger and reopen it immediately on the tail end of that sequence.
+_ariaPopupGuard = (delay = 250) ->
+  blockedUntil = 0
+  {
+    block: (ms = delay) ->
+      blockedUntil = Date.now() + ms
+    canOpen: ->
+      Date.now() >= blockedUntil
+  }
+
 # bindPopover — sync reactive open state with native Popover API
 # open: reactive boolean
 # popover: element or lazy getter (=> el)
@@ -1093,6 +1105,18 @@ _ariaBindPopover = (open, popover, setOpen, source = null) ->
   return unless Object.hasOwn(HTMLElement.prototype, 'togglePopover')
   restoreEl = null
 
+  syncState = (isOpen) ->
+    if isOpen
+      el.hidden = false
+      try el.inert = false
+      catch then null
+      el.removeAttribute 'aria-hidden'
+    else
+      try el.inert = true
+      catch then null
+      el.setAttribute 'aria-hidden', 'true'
+      el.hidden = true
+
   restoreFocus = ->
     target = restoreEl
     restoreEl = null
@@ -1109,7 +1133,9 @@ _ariaBindPopover = (open, popover, setOpen, source = null) ->
     isOpen = e.newState is 'open'
     if isOpen
       restoreEl = get(source) or currentFocus()
+      syncState(true)
     else
+      syncState(false)
       restoreFocus()
     setOpen?(isOpen)
   el.addEventListener 'toggle', onToggle
@@ -1120,6 +1146,7 @@ _ariaBindPopover = (open, popover, setOpen, source = null) ->
     src = get(source)
     if desired
       restoreEl = src or currentFocus()
+      syncState(true)
     opts = if src and desired then { force: desired, source: src } else { force: desired }
     try
       el.togglePopover(opts)
@@ -1127,6 +1154,8 @@ _ariaBindPopover = (open, popover, setOpen, source = null) ->
       # If the element cannot be toggled right now (for example detached),
       # keep runtime stable; effect will retry on the next reactive pass.
       null
+  else
+    syncState(desired)
 
   -> el.removeEventListener 'toggle', onToggle
 
@@ -1147,6 +1176,18 @@ _ariaBindDialog = (open, dialog, setOpen, dismissable = true) ->
   return unless el?.showModal?
   restoreEl = null
 
+  syncState = (isOpen) ->
+    if isOpen
+      el.hidden = false
+      try el.inert = false
+      catch then null
+      el.removeAttribute 'aria-hidden'
+    else
+      try el.inert = true
+      catch then null
+      el.setAttribute 'aria-hidden', 'true'
+      el.hidden = true
+
   restoreFocus = ->
     target = restoreEl
     restoreEl = null
@@ -1167,16 +1208,20 @@ _ariaBindDialog = (open, dialog, setOpen, dismissable = true) ->
 
   onClose = ->
     setOpen?(false)
+    syncState(false)
     restoreFocus()
   el.addEventListener 'cancel', onCancel
   el.addEventListener 'close', onClose
 
   if open and not el.open
     restoreEl = currentFocus() unless restoreEl
+    syncState(true)
     try el.showModal()
     catch then null
-  if not open and el.open
+  else if not open and el.open
     el.close()
+  else
+    syncState(!!open)
 
   ->
     el.removeEventListener 'cancel', onCancel
@@ -1262,10 +1307,81 @@ _ariaUnlockScroll = (instance) ->
     document.body.style.width = ''
     window.scrollTo 0, scrollY
 
+_ariaHasAnchor = do ->
+  try
+    return false unless document?.createElement
+    anchor = document.createElement('div')
+    floating = document.createElement('div')
+    anchor.style.cssText = 'position:fixed;top:100px;left:100px;width:10px;height:10px;anchor-name:--probe'
+    floating.style.cssText = 'position:fixed;inset:auto;margin:0;position-anchor:--probe;position-area:bottom start;width:10px;height:10px'
+    document.body.appendChild(anchor)
+    document.body.appendChild(floating)
+    rect = floating.getBoundingClientRect()
+    anchor.remove()
+    floating.remove()
+    rect.top > 50
+  catch
+    false
+
+_ariaPosition = (trigger, floating, opts = {}) ->
+  return unless trigger and floating
+  placement = opts.placement ?? 'bottom start'
+  offset = opts.offset ?? 4
+  matchWidth = opts.matchWidth ?? false
+  if _ariaHasAnchor
+    name = "--anchor-#{floating.id or Math.random().toString(36).slice(2, 8)}"
+    trigger.style.anchorName = name
+    floating.style.positionAnchor = name
+    floating.style.position = 'fixed'
+    floating.style.inset = 'auto'
+    floating.style.margin = '0'
+    floating.style.positionArea = placement
+    floating.style.positionTry = 'flip-block, flip-inline, flip-block flip-inline'
+    floating.style.positionVisibility = 'anchors-visible'
+    [side] = placement.split(' ')
+    floating.style.marginTop = ''
+    floating.style.marginBottom = ''
+    floating.style.marginLeft = ''
+    floating.style.marginRight = ''
+    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"
+    floating.style.minWidth = 'anchor-size(width)' if matchWidth
+  else
+    rect = trigger.getBoundingClientRect()
+    floating.style.position = 'fixed'
+    floating.style.inset = 'auto'
+    floating.style.margin = '0'
+    [side, align] = placement.split(' ')
+    align ??= 'start'
+    switch side
+      when 'bottom'
+        floating.style.top = "#{rect.bottom + offset}px"
+      when 'top'
+        floating.style.bottom = "#{window.innerHeight - rect.top + offset}px"
+      when 'left'
+        floating.style.right = "#{window.innerWidth - rect.left + offset}px"
+      when 'right'
+        floating.style.left = "#{rect.right + offset}px"
+    if side in ['bottom', 'top']
+      switch align
+        when 'start' then floating.style.left = "#{rect.left}px"
+        when 'center' then floating.style.left = "#{rect.left + rect.width / 2}px"; floating.style.transform = 'translateX(-50%)'
+        when 'end' then floating.style.right = "#{window.innerWidth - rect.right}px"
+    else
+      switch align
+        when 'start' then floating.style.top = "#{rect.top}px"
+        when 'center' then floating.style.top = "#{rect.top + rect.height / 2}px"; floating.style.transform = 'translateY(-50%)'
+        when 'end' then floating.style.bottom = "#{window.innerHeight - rect.bottom}px"
+    floating.style.minWidth = "#{rect.width}px" if matchWidth
+
 globalThis.__aria ??= {
-  listNav: _ariaListNav, rovingNav: _ariaRovingNav, popupDismiss: _ariaPopupDismiss,
+  listNav: _ariaListNav, rovingNav: _ariaRovingNav, popupDismiss: _ariaPopupDismiss, popupGuard: _ariaPopupGuard,
   bindPopover: _ariaBindPopover, bindDialog: _ariaBindDialog,
   positionBelow: _ariaPositionBelow, trapFocus: _ariaTrapFocus, wireAria: _ariaWireAria,
   lockScroll: _ariaLockScroll, unlockScroll: _ariaUnlockScroll,
+  position: _ariaPosition, hasAnchor: _ariaHasAnchor,
 }
 globalThis.ARIA ??= globalThis.__aria