@adea-ai/ui 0.137.0 → 0.138.1

package/dist/components/ui/callout/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","names":["ComponentProps","splitProps","cva","VariantProps","cn","calloutVariants","variants","variant","default","destructive","success","warning","info","size","sm","md","lg","defaultVariants","CalloutProps","Callout","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","CalloutTitle","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/callout/callout.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Callout.\n *\n * A quiet aside that belongs to the content around it: the summary at the top of\n * an answer, a note in documentation, a remembered fact beside the reply that\n * used it. It is a card-coloured block with one rule on its start edge, and\n * nothing about it interrupts the reader.\n *\n * That is the difference from `Alert`. An `Alert` is a message about the state of\n * the surface it sits in — a failed sync, a validation summary — so it is always\n * `role=\"alert\"`, a live announcement, with a tone glyph and a tinted status\n * surface. A callout is static page content: a plain `div` with `role=\"note\"`, no\n * live region, no icon, and no tint. A caller whose note really is a status\n * message uses `Alert`; one whose note needs a different landmark role passes\n * `role`. Reach for `Card` when the block is a self-contained object with its own\n * header, content and footer; a callout has no parts beyond an optional\n * `CalloutTitle`.\n *\n * The rule is the only thing that varies by `variant`: `default` is the accent\n * (`--primary`), and the four status hues use the same tokens `Alert` does. The\n * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners\n * stay square because a rounded box would curve the rule into a crescent.\n *\n * `size` is the padding rung and the rule's weight together, so a caller never\n * sets `p-*` or a border width to make one denser. The rungs are Cortana's three\n * answer-view callouts, expressed in the Tailwind spacing scale:\n *\n * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.\n * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.\n * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.\n *\n * Type size and colour are inherited rather than set (only the card foreground is\n * applied), so a callout in a dense panel and one in an article both read at the\n * size of the text around them.\n *\n * Text that has no break opportunity (a 200-character token, a URL, a file path)\n * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`\n * and not `break-word`, because only `anywhere` lowers the box's min-content width:\n * a callout that is a flex or grid item (auto minimum size) then shrinks to its\n * track instead of stretching it. The callout's own padding, rule and width are\n * untouched, so none of its sizing differs from Cortana's.\n *\n * The block is deliberately not a flex or grid container: its children are inline\n * text, links and code, and a flex root would turn each of those into a separate\n * item and break the line.\n */\nexport const calloutVariants = cva(\n  'bg-card text-card-foreground block rounded-none wrap-anywhere',\n  {\n    variants: {\n      variant: {\n        default: 'border-s-primary',\n        destructive: 'border-s-destructive',\n        success: 'border-s-success',\n        warning: 'border-s-warning',\n        info: 'border-s-info',\n      },\n      size: {\n        /** 12px block / 14px inline padding, 2px rule: a short inline note. */\n        sm: 'border-s-2 px-3.5 py-3',\n        /** 18px block / 20px inline padding, 3px rule: a supporting aside. */\n        md: 'border-s-3 px-5 py-4.5',\n        /** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */\n        lg: 'border-s-3 px-6 py-5.5',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'md' },\n  }\n)\n\nexport type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>\n\nexport function Callout(props: CalloutProps) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])\n  return (\n    <div\n      data-slot=\"callout\"\n      role=\"note\"\n      class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * An optional heading line for the callout. It is a styled `div`, not a heading\n * element: a callout sits inside someone else's outline, and a fixed heading\n * level would break it. Pass `role=\"heading\"` with `aria-level` where the\n * content does belong in the outline.\n *\n * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a\n * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such\n * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)\n * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for\n * bare text, the most common body. The unconditional margin is the less\n * surprising failure: it is never missing where text follows. The price is the\n * title-only callout, which would end 4px taller than its padding says. Pass\n * `class=\"mb-0\"` there (`cn` lets the caller's margin win); the `WithTitle` story\n * shows it.\n */\nexport function CalloutTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"callout-title\"\n      class={cn('mb-1 font-medium tracking-tight', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAaK,kBAAkBH,IAC7B,iEACA;CACEI,UAAU;EACRC,SAAS;GACPC,SAAS;GACTC,aAAa;GACbC,SAAS;GACTC,SAAS;GACTC,MAAM;EACR;EACAC,MAAM;;GAEJC,IAAI;;GAEJC,IAAI;;GAEJC,IAAI;EACN;CACF;CACAC,iBAAiB;EAAEV,SAAS;EAAWM,MAAM;CAAK;AACpD,CACF;AAIA,SAAgBM,QAAQC,OAAqB;CAC3C,MAAM,CAACC,OAAOC,QAAQrB,WAAWmB,OAAO;EAAC;EAAS;EAAW;CAAM,CAAC;CACpE,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAIWtB,GAAGC,gBAAgB;IAAEE,SAASc,MAAMd;IAASM,MAAMQ,MAAMR;GAAK,CAAC,GAAGQ,MAAMM,KAAK;EAAC,EAAA,GACjFL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;;;;;;;;;;;;;;;;;AAkBA,SAAgBK,aAAaR,OAA8B;CACzD,MAAM,CAACC,OAAOC,QAAQrB,WAAWmB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWtB,GAAG,mCAAmCiB,MAAMM,KAAK;EAAC,EAAA,GACrDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd"}
+{"version":3,"file":"callout.js","names":["ComponentProps","children","createMemo","splitProps","cva","VariantProps","cn","calloutVariants","variants","variant","default","destructive","success","warning","info","size","sm","md","lg","defaultVariants","CalloutProps","isRendered","node","trim","isCalloutTitle","getAttribute","Callout","props","local","rest","resolved","titleOnly","nodes","toArray","filter","length","_el$","_tmpl$","_$spread","_$mergeProps","data-title-only","undefined","class","_$insert","CalloutTitle","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/callout/callout.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { children, createMemo, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Callout.\n *\n * A quiet aside that belongs to the content around it: the summary at the top of\n * an answer, a note in documentation, a remembered fact beside the reply that\n * used it. It is a card-coloured block with one rule on its start edge, and\n * nothing about it interrupts the reader.\n *\n * That is the difference from `Alert`. An `Alert` is a message about the state of\n * the surface it sits in — a failed sync, a validation summary — so it is always\n * `role=\"alert\"`, a live announcement, with a tone glyph and a tinted status\n * surface. A callout is static page content: a plain `div` with `role=\"note\"`, no\n * live region, no icon, and no tint. A caller whose note really is a status\n * message uses `Alert`; one whose note needs a different landmark role passes\n * `role`. Reach for `Card` when the block is a self-contained object with its own\n * header, content and footer; a callout has no parts beyond an optional\n * `CalloutTitle`.\n *\n * The rule is the only thing that varies by `variant`: `default` is the accent\n * (`--primary`), and the four status hues use the same tokens `Alert` does. The\n * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners\n * stay square because a rounded box would curve the rule into a crescent.\n *\n * `size` is the padding rung and the rule's weight together, so a caller never\n * sets `p-*` or a border width to make one denser. The rungs are Cortana's three\n * answer-view callouts, expressed in the Tailwind spacing scale:\n *\n * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.\n * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.\n * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.\n *\n * Type size and colour are inherited rather than set (only the card foreground is\n * applied), so a callout in a dense panel and one in an article both read at the\n * size of the text around them.\n *\n * Text that has no break opportunity (a 200-character token, a URL, a file path)\n * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`\n * and not `break-word`, because only `anywhere` lowers the box's min-content width:\n * a callout that is a flex or grid item (auto minimum size) then shrinks to its\n * track instead of stretching it. The callout's own padding, rule and width are\n * untouched, so none of its sizing differs from Cortana's.\n *\n * The block is deliberately not a flex or grid container: its children are inline\n * text, links and code, and a flex root would turn each of those into a separate\n * item and break the line.\n */\nexport const calloutVariants = cva(\n  'bg-card text-card-foreground block rounded-none wrap-anywhere',\n  {\n    variants: {\n      variant: {\n        default: 'border-s-primary',\n        destructive: 'border-s-destructive',\n        success: 'border-s-success',\n        warning: 'border-s-warning',\n        info: 'border-s-info',\n      },\n      size: {\n        /** 12px block / 14px inline padding, 2px rule: a short inline note. */\n        sm: 'border-s-2 px-3.5 py-3',\n        /** 18px block / 20px inline padding, 3px rule: a supporting aside. */\n        md: 'border-s-3 px-5 py-4.5',\n        /** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */\n        lg: 'border-s-3 px-6 py-5.5',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'md' },\n  }\n)\n\nexport type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>\n\nconst isRendered = (node: unknown) =>\n  node != null && typeof node !== 'boolean' && (typeof node !== 'string' || node.trim() !== '')\n\nconst isCalloutTitle = (node: unknown) =>\n  typeof node === 'object' &&\n  node !== null &&\n  'getAttribute' in node &&\n  typeof node.getAttribute === 'function' &&\n  node.getAttribute('data-slot') === 'callout-title'\n\nexport function Callout(props: CalloutProps) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'size', 'children'])\n  const resolved = children(() => local.children)\n  // CSS cannot see text nodes, so the callout looks at what it renders and marks a\n  // title with nothing after it. The title reads the mark to drop its bottom margin.\n  const titleOnly = createMemo(() => {\n    const nodes = resolved.toArray().filter(isRendered)\n    return nodes.length === 1 && isCalloutTitle(nodes[0])\n  })\n  return (\n    <div\n      data-slot=\"callout\"\n      data-title-only={titleOnly() ? '' : undefined}\n      role=\"note\"\n      class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    >\n      {resolved()}\n    </div>\n  )\n}\n\n/**\n * An optional heading line for the callout. It is a styled `div`, not a heading\n * element: a callout sits inside someone else's outline, and a fixed heading\n * level would break it. Pass `role=\"heading\"` with `aria-level` where the\n * content does belong in the outline.\n *\n * The title carries a 4px (`mb-1`) margin below it, whatever follows: a\n * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such\n * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)\n * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for\n * bare text, the most common body. So the gap stays the default and the one case\n * that does not want it is detected by `Callout`, which sees its rendered\n * children: a callout whose only child is a title carries `data-title-only`, and\n * the title drops its margin so the block ends at its own padding. A caller never\n * passes `mb-0` for this. Anything else after the title, text included, keeps the\n * gap.\n */\nexport function CalloutTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"callout-title\"\n      class={cn('mb-1 font-medium tracking-tight in-data-title-only:mb-0', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAaO,kBAAkBH,IAC7B,iEACA;CACEI,UAAU;EACRC,SAAS;GACPC,SAAS;GACTC,aAAa;GACbC,SAAS;GACTC,SAAS;GACTC,MAAM;EACR;EACAC,MAAM;;GAEJC,IAAI;;GAEJC,IAAI;;GAEJC,IAAI;EACN;CACF;CACAC,iBAAiB;EAAEV,SAAS;EAAWM,MAAM;CAAK;AACpD,CACF;AAIA,IAAMM,cAAcC,SAClBA,QAAQ,QAAQ,OAAOA,SAAS,cAAc,OAAOA,SAAS,YAAYA,KAAKC,KAAK,MAAM;AAE5F,IAAMC,kBAAkBF,SACtB,OAAOA,SAAS,YAChBA,SAAS,QACT,kBAAkBA,QAClB,OAAOA,KAAKG,iBAAiB,cAC7BH,KAAKG,aAAa,WAAW,MAAM;AAErC,SAAgBC,QAAQC,OAAqB;CAC3C,MAAM,CAACC,OAAOC,QAAQ1B,WAAWwB,OAAO;EAAC;EAAS;EAAW;EAAQ;CAAU,CAAC;CAChF,MAAMG,WAAW7B,eAAe2B,MAAM3B,QAAQ;CAG9C,MAAM8B,YAAY7B,iBAAiB;EACjC,MAAM8B,QAAQF,SAASG,QAAQ,CAAC,CAACC,OAAOb,UAAU;EAClD,OAAOW,MAAMG,WAAW,KAAKX,eAAeQ,MAAM,EAAE;CACtD,CAAC;CACD,cAAA;EAAA,IAAAI,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA;GAAA,KAAA,qBAAA;IAAA,OAGqBR,UAAU,IAAI,KAAKU,KAAAA;GAAS;GAAA,KAAA,WAAA;IAAA,OAEtCnC,GAAGC,gBAAgB;KAAEE,SAASmB,MAAMnB;KAASM,MAAMa,MAAMb;IAAK,CAAC,GAAGa,MAAMc,KAAK;GAAC;EAAA,GACjFb,IAAI,GAAA,OAAA,IAAA;EAAAc,OAAAP,MAEPN,QAAQ;EAAA,OAAAM;CAAA,EAAA,CAAA;AAGf;;;;;;;;;;;;;;;;;;AAmBA,SAAgBQ,aAAajB,OAA8B;CACzD,MAAM,CAACC,OAAOC,QAAQ1B,WAAWwB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAkB,QAAAC,QAAA;EAAAR,OAAAO,OAAAN,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWjC,GAAG,2DAA2DsB,MAAMc,KAAK;EAAC,EAAA,GAC7Eb,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAgB;CAAA,EAAA,CAAA;AAGd"}

package/dist/r/src/components/composites/tree/tree.tsx

@@ -25,6 +25,7 @@ type TreeContextValue = {
   unregister: (id: string, element: HTMLDivElement | undefined) => void
   focusItem: (id: string) => void
   noteFocus: (id: string) => void
+  noteBlur: (next: EventTarget | null) => void
   activate: (id: string, event: Event) => void
   expand: (id: string, expanded: boolean) => void
   disclosure: () => TreeDisclosure
@@ -114,8 +115,14 @@ export type TreeProps = Omit<
  * the target row: when the active row leaves `visibleItems`, the first visible
  * row becomes the roving stop and `onActiveIdChange` is called with it. If the
  * removed row held focus, or was the last row the tree saw focused, focus moves
- * to that same row; if it had no focus, only the roving stop moves. This is the
- * same in both `disclosure` modes and for every way a host collapses a row.
+ * to that same row; if it had no focus, only the roving stop moves. Focus that
+ * has already gone to a control outside the tree is never pulled back: the tree
+ * forgets its last focused row when focus moves to an element outside it, and
+ * the roving stop alone moves if that control still has focus when the row is
+ * hidden. Focus the tree has asked for but not yet moved (a queued recovery, or a
+ * keyboard move to a row the host has not mounted) is withdrawn when focus lands
+ * outside the tree, and is checked again when a row mounts. This is the same in
+ * both `disclosure` modes and for every way a host collapses a row.
  */
 export function Tree(props: TreeProps) {
   const [local, rest] = splitProps(props, [
@@ -143,9 +150,26 @@ export function Tree(props: TreeProps) {
   const rows = new Map<string, HTMLDivElement>()
   const rowIdsByElement = new WeakMap<HTMLDivElement, string>()
   let pendingFocusId: string | null = null
+  let pendingFocusGuard: ((event: FocusEvent) => void) | undefined
   let requestedRevealId: string | null = null
   let focusedId: string | null = null
   let disposed = false
+  const isInsideTreeRow = (element: Element) => {
+    const row = element.closest('[role="treeitem"]')
+    return row instanceof HTMLDivElement && rowIdsByElement.has(row)
+  }
+  // True when a focusable control outside this tree owns focus. Nothing focused
+  // (`body`) is not outside: that is where focus falls when a focused row is removed.
+  const focusIsOutsideTree = () => {
+    if (typeof document === 'undefined') return false
+    const active = document.activeElement
+    return (
+      active instanceof Element &&
+      active !== document.body &&
+      active !== document.documentElement &&
+      !isInsideTreeRow(active)
+    )
+  }
   const rowSizeObserver =
     typeof ResizeObserver === 'undefined'
       ? undefined
@@ -160,8 +184,33 @@ export function Tree(props: TreeProps) {
           }
         })
 
+  // Focus the tree has asked for but not yet moved (a microtask away, or waiting for a
+  // virtualised row to mount) is only a request. While one is pending, focus arriving
+  // on a control outside the tree withdraws it, so a row mounting later cannot take
+  // focus back from a control the user, or the host, has since chosen.
+  const setPendingFocus = (id: string | null) => {
+    pendingFocusId = id
+    if (typeof document === 'undefined') return
+    if (id === null) {
+      if (pendingFocusGuard) document.removeEventListener('focusin', pendingFocusGuard, true)
+      pendingFocusGuard = undefined
+    } else if (!pendingFocusGuard) {
+      pendingFocusGuard = (event) => {
+        if (event.target instanceof Element && !isInsideTreeRow(event.target)) cancelPendingFocus()
+      }
+      document.addEventListener('focusin', pendingFocusGuard, true)
+    }
+  }
+  // Withdrawing a request also drops the memory of the row it was recovering for:
+  // nothing is left to recover.
+  const cancelPendingFocus = () => {
+    setPendingFocus(null)
+    focusedId = null
+  }
+
   onCleanup(() => {
     disposed = true
+    setPendingFocus(null)
     rowSizeObserver?.disconnect()
   })
 
@@ -176,13 +225,19 @@ export function Tree(props: TreeProps) {
       if (pendingFocusId !== id || effectiveActiveId() !== id) return
       const row = rows.get(id)
       if (!row || typeof document === 'undefined') return
+      // Ownership is checked when focus would move, not when it was requested: a
+      // control outside the tree may have taken focus since, and keeps it.
+      if (focusIsOutsideTree()) {
+        cancelPendingFocus()
+        return
+      }
       row.focus()
-      if (document.activeElement === row) pendingFocusId = null
+      if (document.activeElement === row) setPendingFocus(null)
     })
   }
 
   const focusItem = (id: string) => {
-    pendingFocusId = id
+    setPendingFocus(id)
     local.onActiveIdChange(id)
     if (rows.has(id)) requestedRevealId = null
     else requestReveal(id)
@@ -216,8 +271,14 @@ export function Tree(props: TreeProps) {
       if (focusWasInside) {
         queueMicrotask(() => {
           const fallbackId = effectiveActiveId()
-          if (!disposed && fallbackId !== null && pendingFocusId !== fallbackId)
-            focusItem(fallbackId)
+          if (disposed || fallbackId === null || pendingFocusId === fallbackId) return
+          // Focus fell out of the removed row, but it may have been given to a control
+          // outside the tree before this ran. Only nothing-focused (body) recovers.
+          if (focusIsOutsideTree()) {
+            focusedId = null
+            return
+          }
+          focusItem(fallbackId)
         })
       }
     },
@@ -225,6 +286,13 @@ export function Tree(props: TreeProps) {
     noteFocus: (id) => {
       focusedId = id
     },
+    noteBlur: (next) => {
+      // Focus moving to an element outside this tree ends the memory of the last
+      // focused row and withdraws any focus the tree was still waiting to give a
+      // row. A null target (focus to nothing, or the window losing focus) is
+      // ambiguous, so both stay for the recovery below.
+      if (next instanceof Element && !isInsideTreeRow(next)) cancelPendingFocus()
+    },
     activate: (id, event) => local.onActivate?.(id, event),
     expand: (id, expanded) => local.onExpand?.(id, expanded),
     disclosure: () => local.disclosure ?? 'row',
@@ -239,11 +307,15 @@ export function Tree(props: TreeProps) {
     if (activeId === null) return
     // If the projection removes the last row that took focus (a host filter, or
     // an ancestor collapsing), move focus to the same fallback that now owns the
-    // roving tab stop. `focusedId` is not cleared when focus leaves the tree, so
-    // this also reclaims focus from a control outside it; that long-standing
-    // behaviour is deliberately left as it was.
+    // roving tab stop, unless a control outside the tree has focus: that control
+    // keeps it, and only the roving stop moves.
     if (focusedId !== null && !index().byId.has(focusedId) && pendingFocusId !== activeId) {
-      focusItem(activeId)
+      if (focusIsOutsideTree()) {
+        focusedId = null
+        if (local.activeId !== activeId) local.onActiveIdChange(activeId)
+      } else {
+        focusItem(activeId)
+      }
     } else if (local.activeId !== activeId) {
       local.onActiveIdChange(activeId)
     }
@@ -354,12 +426,19 @@ export function TreeRow(props: TreeRowProps) {
   let registeredId: string | undefined
   const id = () => local.item.id
 
-  onCleanup(() => tree.unregister(registeredId ?? id(), row))
+  const handleFocusOut = (event: FocusEvent) => tree.noteBlur(event.relatedTarget)
+
+  onCleanup(() => {
+    row?.removeEventListener('focusout', handleFocusOut)
+    tree.unregister(registeredId ?? id(), row)
+  })
 
   const setRef = (element: HTMLDivElement) => {
     row = element
     registeredId = id()
     tree.register(registeredId, element)
+    // A listener, not an `onFocusOut` prop, so a host's own handler is untouched.
+    element.addEventListener('focusout', handleFocusOut)
   }
 
   createEffect(() => {

package/dist/r/src/components/ui/alert-dialog/alert-dialog.tsx

@@ -17,10 +17,11 @@ import { cn } from '../../../lib/utils'
 /**
  * AlertDialog.
  *
- * A dialog that cannot be dismissed by accident: Escape and a click on the scrim
- * do nothing, and the user must choose one of the actions. That is the whole
- * difference from Dialog, and it is why this exists as its own component rather
- * than a prop — a caller has to reach for it deliberately.
+ * A dialog that cannot be dismissed by accident: a click on the scrim does nothing,
+ * and the user must choose one of the actions. Escape is the keyboard's Cancel: it
+ * closes the dialog exactly as the cancel action does, so nothing is confirmed. That
+ * is the whole difference from Dialog, and it is why this exists as its own
+ * component rather than a prop — a caller has to reach for it deliberately.
  *
  * The consequence is a rule of use: this is for confirming a destructive or
  * irreversible step. Wrapping an ordinary form in an AlertDialog traps someone who
@@ -59,22 +60,26 @@ export function AlertDialogOverlay(props: ComponentProps<typeof KobalteAlertDial
  * The panel.
  *
  * Kobalte's `AlertDialog.Content` is `Dialog.Content` with `role="alertdialog"`
- * and nothing else — Escape and an outside click dismiss it exactly as they
- * dismiss a Dialog. That is a real gap in the primitive, so the blocking is
- * implemented here, and it is the whole difference between this component and a
- * Dialog:
+ * and nothing else — an outside click dismisses it exactly as it dismisses a
+ * Dialog. That is a real gap in the primitive, so the blocking is implemented
+ * here, and it is the whole difference between this component and a Dialog:
  *
- *   - Escape is prevented, because a key that closes a confirmation is a key that
- *     makes "confirm" meaningless.
  *   - Pointer and focus interactions outside are prevented, including the scrim
- *     click, for the same reason.
+ *     click, because a stray click that closes a confirmation is a click that
+ *     makes "confirm" meaningless.
+ *
+ * Escape is deliberately left to the primitive. It can only ever cancel, never
+ * confirm, so it is not an accident that matters; refusing it traps a keyboard
+ * user who has changed their mind, and the WAI-ARIA alertdialog pattern says
+ * Escape closes. It reports `onOpenChange(false)` and restores focus to the
+ * trigger, which is what the cancel action does, and as the topmost layer it
+ * closes only the confirmation, not a dialog underneath it.
  *
- * There is deliberately no prop to turn this off. A surface that can be escaped
+ * There is deliberately no prop to turn the scrim blocking off. A surface that can be escaped
  * accidentally does not need to be an AlertDialog; it is a Dialog, and using this
  * one would be a claim about the flow that is not true.
  */
 const blockDismissal = {
-  onEscapeKeyDown: (event: KeyboardEvent) => event.preventDefault(),
   onPointerDownOutside: (event: Event) => event.preventDefault(),
   onFocusOutside: (event: Event) => event.preventDefault(),
   onInteractOutside: (event: Event) => event.preventDefault(),

package/dist/r/src/components/ui/callout/callout.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { children, createMemo, splitProps } from 'solid-js'
 import { cva, type VariantProps } from '../../../lib/variants'
 import { cn } from '../../../lib/utils'
 
@@ -75,15 +75,35 @@ export const calloutVariants = cva(
 
 export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>
 
+const isRendered = (node: unknown) =>
+  node != null && typeof node !== 'boolean' && (typeof node !== 'string' || node.trim() !== '')
+
+const isCalloutTitle = (node: unknown) =>
+  typeof node === 'object' &&
+  node !== null &&
+  'getAttribute' in node &&
+  typeof node.getAttribute === 'function' &&
+  node.getAttribute('data-slot') === 'callout-title'
+
 export function Callout(props: CalloutProps) {
-  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size', 'children'])
+  const resolved = children(() => local.children)
+  // CSS cannot see text nodes, so the callout looks at what it renders and marks a
+  // title with nothing after it. The title reads the mark to drop its bottom margin.
+  const titleOnly = createMemo(() => {
+    const nodes = resolved.toArray().filter(isRendered)
+    return nodes.length === 1 && isCalloutTitle(nodes[0])
+  })
   return (
     <div
       data-slot="callout"
+      data-title-only={titleOnly() ? '' : undefined}
       role="note"
       class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}
       {...rest}
-    />
+    >
+      {resolved()}
+    </div>
   )
 }
 
@@ -93,22 +113,23 @@ export function Callout(props: CalloutProps) {
  * level would break it. Pass `role="heading"` with `aria-level` where the
  * content does belong in the outline.
  *
- * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
+ * The title carries a 4px (`mb-1`) margin below it, whatever follows: a
  * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
  * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
  * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
- * bare text, the most common body. The unconditional margin is the less
- * surprising failure: it is never missing where text follows. The price is the
- * title-only callout, which would end 4px taller than its padding says. Pass
- * `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
- * shows it.
+ * bare text, the most common body. So the gap stays the default and the one case
+ * that does not want it is detected by `Callout`, which sees its rendered
+ * children: a callout whose only child is a title carries `data-title-only`, and
+ * the title drops its margin so the block ends at its own padding. A caller never
+ * passes `mb-0` for this. Anything else after the title, text included, keeps the
+ * gap.
  */
 export function CalloutTitle(props: ComponentProps<'div'>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="callout-title"
-      class={cn('mb-1 font-medium tracking-tight', local.class)}
+      class={cn('mb-1 font-medium tracking-tight in-data-title-only:mb-0', local.class)}
       {...rest}
     />
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.137.0",
+  "version": "0.138.1",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/src/components/composites/tree/tree.tsx

@@ -25,6 +25,7 @@ type TreeContextValue = {
   unregister: (id: string, element: HTMLDivElement | undefined) => void
   focusItem: (id: string) => void
   noteFocus: (id: string) => void
+  noteBlur: (next: EventTarget | null) => void
   activate: (id: string, event: Event) => void
   expand: (id: string, expanded: boolean) => void
   disclosure: () => TreeDisclosure
@@ -114,8 +115,14 @@ export type TreeProps = Omit<
  * the target row: when the active row leaves `visibleItems`, the first visible
  * row becomes the roving stop and `onActiveIdChange` is called with it. If the
  * removed row held focus, or was the last row the tree saw focused, focus moves
- * to that same row; if it had no focus, only the roving stop moves. This is the
- * same in both `disclosure` modes and for every way a host collapses a row.
+ * to that same row; if it had no focus, only the roving stop moves. Focus that
+ * has already gone to a control outside the tree is never pulled back: the tree
+ * forgets its last focused row when focus moves to an element outside it, and
+ * the roving stop alone moves if that control still has focus when the row is
+ * hidden. Focus the tree has asked for but not yet moved (a queued recovery, or a
+ * keyboard move to a row the host has not mounted) is withdrawn when focus lands
+ * outside the tree, and is checked again when a row mounts. This is the same in
+ * both `disclosure` modes and for every way a host collapses a row.
  */
 export function Tree(props: TreeProps) {
   const [local, rest] = splitProps(props, [
@@ -143,9 +150,26 @@ export function Tree(props: TreeProps) {
   const rows = new Map<string, HTMLDivElement>()
   const rowIdsByElement = new WeakMap<HTMLDivElement, string>()
   let pendingFocusId: string | null = null
+  let pendingFocusGuard: ((event: FocusEvent) => void) | undefined
   let requestedRevealId: string | null = null
   let focusedId: string | null = null
   let disposed = false
+  const isInsideTreeRow = (element: Element) => {
+    const row = element.closest('[role="treeitem"]')
+    return row instanceof HTMLDivElement && rowIdsByElement.has(row)
+  }
+  // True when a focusable control outside this tree owns focus. Nothing focused
+  // (`body`) is not outside: that is where focus falls when a focused row is removed.
+  const focusIsOutsideTree = () => {
+    if (typeof document === 'undefined') return false
+    const active = document.activeElement
+    return (
+      active instanceof Element &&
+      active !== document.body &&
+      active !== document.documentElement &&
+      !isInsideTreeRow(active)
+    )
+  }
   const rowSizeObserver =
     typeof ResizeObserver === 'undefined'
       ? undefined
@@ -160,8 +184,33 @@ export function Tree(props: TreeProps) {
           }
         })
 
+  // Focus the tree has asked for but not yet moved (a microtask away, or waiting for a
+  // virtualised row to mount) is only a request. While one is pending, focus arriving
+  // on a control outside the tree withdraws it, so a row mounting later cannot take
+  // focus back from a control the user, or the host, has since chosen.
+  const setPendingFocus = (id: string | null) => {
+    pendingFocusId = id
+    if (typeof document === 'undefined') return
+    if (id === null) {
+      if (pendingFocusGuard) document.removeEventListener('focusin', pendingFocusGuard, true)
+      pendingFocusGuard = undefined
+    } else if (!pendingFocusGuard) {
+      pendingFocusGuard = (event) => {
+        if (event.target instanceof Element && !isInsideTreeRow(event.target)) cancelPendingFocus()
+      }
+      document.addEventListener('focusin', pendingFocusGuard, true)
+    }
+  }
+  // Withdrawing a request also drops the memory of the row it was recovering for:
+  // nothing is left to recover.
+  const cancelPendingFocus = () => {
+    setPendingFocus(null)
+    focusedId = null
+  }
+
   onCleanup(() => {
     disposed = true
+    setPendingFocus(null)
     rowSizeObserver?.disconnect()
   })
 
@@ -176,13 +225,19 @@ export function Tree(props: TreeProps) {
       if (pendingFocusId !== id || effectiveActiveId() !== id) return
       const row = rows.get(id)
       if (!row || typeof document === 'undefined') return
+      // Ownership is checked when focus would move, not when it was requested: a
+      // control outside the tree may have taken focus since, and keeps it.
+      if (focusIsOutsideTree()) {
+        cancelPendingFocus()
+        return
+      }
       row.focus()
-      if (document.activeElement === row) pendingFocusId = null
+      if (document.activeElement === row) setPendingFocus(null)
     })
   }
 
   const focusItem = (id: string) => {
-    pendingFocusId = id
+    setPendingFocus(id)
     local.onActiveIdChange(id)
     if (rows.has(id)) requestedRevealId = null
     else requestReveal(id)
@@ -216,8 +271,14 @@ export function Tree(props: TreeProps) {
       if (focusWasInside) {
         queueMicrotask(() => {
           const fallbackId = effectiveActiveId()
-          if (!disposed && fallbackId !== null && pendingFocusId !== fallbackId)
-            focusItem(fallbackId)
+          if (disposed || fallbackId === null || pendingFocusId === fallbackId) return
+          // Focus fell out of the removed row, but it may have been given to a control
+          // outside the tree before this ran. Only nothing-focused (body) recovers.
+          if (focusIsOutsideTree()) {
+            focusedId = null
+            return
+          }
+          focusItem(fallbackId)
         })
       }
     },
@@ -225,6 +286,13 @@ export function Tree(props: TreeProps) {
     noteFocus: (id) => {
       focusedId = id
     },
+    noteBlur: (next) => {
+      // Focus moving to an element outside this tree ends the memory of the last
+      // focused row and withdraws any focus the tree was still waiting to give a
+      // row. A null target (focus to nothing, or the window losing focus) is
+      // ambiguous, so both stay for the recovery below.
+      if (next instanceof Element && !isInsideTreeRow(next)) cancelPendingFocus()
+    },
     activate: (id, event) => local.onActivate?.(id, event),
     expand: (id, expanded) => local.onExpand?.(id, expanded),
     disclosure: () => local.disclosure ?? 'row',
@@ -239,11 +307,15 @@ export function Tree(props: TreeProps) {
     if (activeId === null) return
     // If the projection removes the last row that took focus (a host filter, or
     // an ancestor collapsing), move focus to the same fallback that now owns the
-    // roving tab stop. `focusedId` is not cleared when focus leaves the tree, so
-    // this also reclaims focus from a control outside it; that long-standing
-    // behaviour is deliberately left as it was.
+    // roving tab stop, unless a control outside the tree has focus: that control
+    // keeps it, and only the roving stop moves.
     if (focusedId !== null && !index().byId.has(focusedId) && pendingFocusId !== activeId) {
-      focusItem(activeId)
+      if (focusIsOutsideTree()) {
+        focusedId = null
+        if (local.activeId !== activeId) local.onActiveIdChange(activeId)
+      } else {
+        focusItem(activeId)
+      }
     } else if (local.activeId !== activeId) {
       local.onActiveIdChange(activeId)
     }
@@ -354,12 +426,19 @@ export function TreeRow(props: TreeRowProps) {
   let registeredId: string | undefined
   const id = () => local.item.id
 
-  onCleanup(() => tree.unregister(registeredId ?? id(), row))
+  const handleFocusOut = (event: FocusEvent) => tree.noteBlur(event.relatedTarget)
+
+  onCleanup(() => {
+    row?.removeEventListener('focusout', handleFocusOut)
+    tree.unregister(registeredId ?? id(), row)
+  })
 
   const setRef = (element: HTMLDivElement) => {
     row = element
     registeredId = id()
     tree.register(registeredId, element)
+    // A listener, not an `onFocusOut` prop, so a host's own handler is untouched.
+    element.addEventListener('focusout', handleFocusOut)
   }
 
   createEffect(() => {

package/src/components/ui/alert-dialog/alert-dialog.tsx

@@ -17,10 +17,11 @@ import { cn } from '#lib/utils'
 /**
  * AlertDialog.
  *
- * A dialog that cannot be dismissed by accident: Escape and a click on the scrim
- * do nothing, and the user must choose one of the actions. That is the whole
- * difference from Dialog, and it is why this exists as its own component rather
- * than a prop — a caller has to reach for it deliberately.
+ * A dialog that cannot be dismissed by accident: a click on the scrim does nothing,
+ * and the user must choose one of the actions. Escape is the keyboard's Cancel: it
+ * closes the dialog exactly as the cancel action does, so nothing is confirmed. That
+ * is the whole difference from Dialog, and it is why this exists as its own
+ * component rather than a prop — a caller has to reach for it deliberately.
  *
  * The consequence is a rule of use: this is for confirming a destructive or
  * irreversible step. Wrapping an ordinary form in an AlertDialog traps someone who
@@ -59,22 +60,26 @@ export function AlertDialogOverlay(props: ComponentProps<typeof KobalteAlertDial
  * The panel.
  *
  * Kobalte's `AlertDialog.Content` is `Dialog.Content` with `role="alertdialog"`
- * and nothing else — Escape and an outside click dismiss it exactly as they
- * dismiss a Dialog. That is a real gap in the primitive, so the blocking is
- * implemented here, and it is the whole difference between this component and a
- * Dialog:
+ * and nothing else — an outside click dismisses it exactly as it dismisses a
+ * Dialog. That is a real gap in the primitive, so the blocking is implemented
+ * here, and it is the whole difference between this component and a Dialog:
  *
- *   - Escape is prevented, because a key that closes a confirmation is a key that
- *     makes "confirm" meaningless.
  *   - Pointer and focus interactions outside are prevented, including the scrim
- *     click, for the same reason.
+ *     click, because a stray click that closes a confirmation is a click that
+ *     makes "confirm" meaningless.
+ *
+ * Escape is deliberately left to the primitive. It can only ever cancel, never
+ * confirm, so it is not an accident that matters; refusing it traps a keyboard
+ * user who has changed their mind, and the WAI-ARIA alertdialog pattern says
+ * Escape closes. It reports `onOpenChange(false)` and restores focus to the
+ * trigger, which is what the cancel action does, and as the topmost layer it
+ * closes only the confirmation, not a dialog underneath it.
  *
- * There is deliberately no prop to turn this off. A surface that can be escaped
+ * There is deliberately no prop to turn the scrim blocking off. A surface that can be escaped
  * accidentally does not need to be an AlertDialog; it is a Dialog, and using this
  * one would be a claim about the flow that is not true.
  */
 const blockDismissal = {
-  onEscapeKeyDown: (event: KeyboardEvent) => event.preventDefault(),
   onPointerDownOutside: (event: Event) => event.preventDefault(),
   onFocusOutside: (event: Event) => event.preventDefault(),
   onInteractOutside: (event: Event) => event.preventDefault(),