@astryxdesign/core 0.6.1 → 0.6.2-canary.0faf070

package/dist/Typeahead/BaseTypeahead.js

@@ -274,9 +274,9 @@ export const BaseTypeahead = function BaseTypeahead({
   // Debounce ref
   const searchTimeoutRef = useRef(null);
 
-  // Monotonic counter incremented on selection and query-clear. Async
-  // searches that resolve after a selection compare their captured
-  // generation to the current value and discard stale results.
+  // Monotonic counter incremented on selection, query-clear, and source
+  // replacement. Async searches that resolve afterwards compare their
+  // captured generation to the current value and discard stale results.
   const searchGenRef = useRef(0);
   // The generation at which results were last populated. handleFocus
   // compares this to searchGenRef — if they differ, the cached results
@@ -284,6 +284,15 @@ export const BaseTypeahead = function BaseTypeahead({
   // be re-shown.
   const resultsGenRef = useRef(0);
 
+  // Results still arriving from a replaced source must not land in the new
+  // one's menu.
+  const prevSearchSourceRef = useRef(searchSource);
+  if (prevSearchSourceRef.current !== searchSource) {
+    prevSearchSourceRef.current.cancel?.();
+    prevSearchSourceRef.current = searchSource;
+    searchGenRef.current++;
+  }
+
   // Layer for dropdown
   const handleLayerShow = useCallback(() => {
     onOpenChange?.(true);
@@ -630,15 +639,15 @@ export const BaseTypeahead = function BaseTypeahead({
   });
   const selectedKey = value == null ? null : getKey(value.id, () => results.indexOf(value));
 
-  // Cleanup timeout and cancel in-flight searches on unmount
+  // Unmount: clear the pending debounce and cancel in-flight work.
   useEffect(() => {
     return () => {
       if (searchTimeoutRef.current) {
         clearTimeout(searchTimeoutRef.current);
       }
-      searchSource.cancel?.();
+      prevSearchSourceRef.current.cancel?.();
     };
-  }, [searchSource]);
+  }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("input", {
       ...rest,

package/dist/astryx.css

@@ -333,6 +333,7 @@
   .xnpej1e{--radius-element:var(--radius-full)}
   .x11rj6l1{--selectable-card-ring-color:var(--color-accent)}
   .xkce8z9{--separator-display:flex}
+  .x7o5821{--spinner-arc-fraction:.375}
   .x1uzk0gl{--spinner-color:currentColor}
   .xt1b8mc{--spinner-color:var(--color-accent)}
   .x13u6jys{--spinner-color:var(--color-on-dark)}
@@ -515,7 +516,6 @@
   .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
   .x1rea2x4:not(#\#):not(#\#){overflow:visible}
   .xish69e:not(#\#):not(#\#){overscroll-behavior:contain}
-  .x8du1vd:not(#\#):not(#\#){overscroll-behavior:none}
   .xt970qd:not(#\#):not(#\#){padding-block:0}
   .x1vn5h1t:not(#\#):not(#\#){padding-block:calc((var(--size-element-lg) - var(--spacing-5) - 2 * var(--border-width)) / 2)}
   .x1ioay2v:not(#\#):not(#\#){padding-block:calc((var(--size-element-md) - var(--spacing-5) - 2 * var(--border-width)) / 2)}
@@ -866,6 +866,7 @@
   .x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
   .xjp7ctv:not(#\#):not(#\#):not(#\#){display:contents}
   .x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
+  .xufnvkl:not(#\#):not(#\#):not(#\#){display:flow-root}
   .xrvj5dj:not(#\#):not(#\#):not(#\#){display:grid}
   .x1rg5ohu:not(#\#):not(#\#):not(#\#){display:inline-block}
   .x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
@@ -1173,7 +1174,7 @@
   .x24f09q:not(#\#):not(#\#):not(#\#){scrollbar-gutter:auto}
   .xosa0jh:not(#\#):not(#\#):not(#\#){scrollbar-width:auto}
   .x1rohswg:not(#\#):not(#\#):not(#\#){scrollbar-width:none}
-  .x1vy8frr:not(#\#):not(#\#):not(#\#){stroke-dasharray:calc(var(--_spinner-ring-diameter) * 1.1780972450961724) calc(var(--_spinner-ring-diameter) * 1.9634954084936207)}
+  .xdv9ggb:not(#\#):not(#\#):not(#\#){stroke-dasharray:calc(var(--_spinner-ring-diameter) * 3.141592653589793 * var(--spinner-arc-fraction)) calc(var(--_spinner-ring-diameter) * 3.141592653589793 * (1 - var(--spinner-arc-fraction)))}
   .x1owpc8m:not(#\#):not(#\#):not(#\#){stroke-linecap:round}
   .x7bo2k:not(#\#):not(#\#):not(#\#){stroke-opacity:.3}
   .x1smxkh6:not(#\#):not(#\#):not(#\#){stroke-opacity:.302}
@@ -1330,6 +1331,7 @@
   .x7v6acp.x7v6acp:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){visibility:visible}
   .x5um2zc.x5um2zc:where(.x1twag4g:first-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
   .x1se5z8o.x1se5z8o:where(.x1twag4g:last-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
+  .x6ipy2d.x6ipy2d:where(.x1u3b27q:active *):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}
   @supports (animation-timeline: view()){.x1iu2jvn.x1iu2jvn:not(#\#):not(#\#):not(#\#){animation-name:x1tut0r7-B}}
   @supports (container-type: scroll-state){.xafyuhj.xafyuhj:not(#\#):not(#\#):not(#\#){container-type:scroll-state}}
   .xfd3fxj:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){animation-name:x1c2q33o-B}
@@ -1362,6 +1364,8 @@
   .x1e0x2sz:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--color-error)}
   .xx47ajj:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--focus-outline-color)}
   .x7s97pk:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:2px}
+  .x1nw7mhf:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:calc(-1 * var(--focus-outline-width))}
+  .x1l5jwag:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:calc(0px - var(--focus-outline-width))}
   .x13aywxo:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--button-focus-offset)}
   .x1vwwbsn:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
   .xwz5zln.xwz5zln:where(.x1iwu4tg:has(:focus-visible) *):not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
@@ -1477,6 +1481,8 @@
   @media (hover: hover){.x8ydxbz.x8ydxbz.x8ydxbz:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){pointer-events:auto}}
   @media (hover: hover){.x17hxqr7.x17hxqr7.x17hxqr7:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){transform:translateY(0)}}
   @media (hover: hover){.xneequu.xneequu.xneequu:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){visibility:visible}}
+  @media (hover: hover){.x74x3iv.x74x3iv.x74x3iv:where(.x1u3b27q:active *):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}}
+  @media (forced-colors: none){.x1xm682w.x1xm682w.x1xm682w:where(.x1iwu4tg:active *):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-pressed),var(--color-overlay-pressed))}}
   @supports (animation-timeline: view()){@media (prefers-reduced-motion: reduce){.xk3h8ob.xk3h8ob.xk3h8ob:not(#\#):not(#\#):not(#\#){animation-name:xuvekqa-B}}}
   @media (hover: hover){.xvxo0qp.xvxo0qp.xvxo0qp:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:color-mix(in srgb,var(--color-accent),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.x1pfkqlk.x1pfkqlk.x1pfkqlk:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:transparent}}
@@ -1675,6 +1681,7 @@
   .xjwf9q1:not(#\#):not(#\#):not(#\#):not(#\#){min-height:24px}
   .xe0p6wg:not(#\#):not(#\#):not(#\#):not(#\#){min-height:28px}
   .x21xpn4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:32px}
+  .x121v3j4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:min-content}
   .x1xf4nls:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-lg)}
   .x1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}
   .x1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}
@@ -1882,6 +1889,8 @@
   @starting-style{.x14gflnl.x14gflnl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}}
   .x1k48kgn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:inherit}
   .xxyica1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:inherit}
+  .xq94oqs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:var(--radius-full)}
+  .xtb6wbx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:var(--radius-inner)}
   .x17gn2l9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{grid-column:1}
   .xd54j2p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-block:0}
   .xpsyfx0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{margin-block:0}
@@ -1961,6 +1970,8 @@
   .xa5v58t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-timing-function:var(--ease-standard)}
   .x1rbqspl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{user-select:none}
   .xy5mcqj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:-1}
+  .xzywxsk.xzywxsk:where(.x1odsvnm:active *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--color-overlay-pressed)}
+  .x2kv6q6.x2kv6q6:where(.x1odsvnm:active:not(:has(a:active,button:active,[role="button"]:active,[role="link"]:active)) *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--color-overlay-pressed)}
   .xk7vujl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to left,var(--color-shadow),transparent)}
   .xlptwl5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to right,var(--color-shadow),transparent)}
   .xdq8fwl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:right center}

package/dist/hooks/scrollKeyboardDelegation.d.ts

@@ -0,0 +1,3 @@
+/** Attach only while automatic ownership has an effective scroll axis. */
+export declare function attachScrollKeyboardDelegation(viewport: HTMLElement, content: HTMLElement): () => void;
+//# sourceMappingURL=scrollKeyboardDelegation.d.ts.map

package/dist/hooks/scrollKeyboardDelegation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollKeyboardDelegation.d.ts","sourceRoot":"","sources":["../../src/hooks/scrollKeyboardDelegation.ts"],"names":[],"mappings":"AAkIA,0EAA0E;AAC1E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,WAAW,GACnB,MAAM,IAAI,CAkGZ"}

package/dist/hooks/scrollKeyboardDelegation.js

@@ -0,0 +1,146 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file scrollKeyboardDelegation.ts
+ * @input A named, overflowing viewport and its real content box
+ * @output Focus-time delegation with native forward and reverse Tab traversal
+ * @position Private useScrollableArea keyboard behavior; no DOM observers or scrolling
+ */
+
+import { FOCUSABLE_SELECTOR } from "./focusableSelector.js";
+import { getRegisteredScrollOwnerState } from "./scrollOwnerRegistry.js";
+
+// Structural roles may contain ordinary links/buttons. Unknown or interactive
+// roles are deliberately excluded until their navigation contract is proven.
+const PASSIVE_ROLES = new Set(['article', 'banner', 'complementary', 'contentinfo', 'definition', 'directory', 'document', 'figure', 'form', 'generic', 'group', 'heading', 'list', 'listitem', 'main', 'navigation', 'none', 'note', 'paragraph', 'presentation', 'region', 'section', 'status', 'table', 'term']);
+function isSequential(element) {
+  if (element.tabIndex < 0 || element.matches(':disabled') || element.closest('[inert], [hidden]') != null || element.getClientRects().length === 0) {
+    return false;
+  }
+  const visibility = getComputedStyle(element).visibility;
+  return visibility !== 'hidden' && visibility !== 'collapse';
+}
+function firstDelegationTarget(viewport, content) {
+  const candidates = content.querySelectorAll(FOCUSABLE_SELECTOR);
+  let first = content.matches(FOCUSABLE_SELECTOR) && isSequential(content) ? content : null;
+  for (const candidate of candidates) {
+    // After finding the first target, only positive tabindex can precede it.
+    // Ordinary trailing controls need no visibility or layout reads.
+    if (first != null && candidate.tabIndex <= 0) {
+      continue;
+    }
+    if (!isSequential(candidate)) {
+      continue;
+    }
+    // Positive tabindex participates before the zero-index viewport. Do not
+    // revisit it or skip its ordering by delegating to a later zero-index child.
+    if (candidate.tabIndex > 0) {
+      return null;
+    }
+    first ??= candidate;
+  }
+  if (first == null || first.tabIndex !== 0 || !first.matches('a[href], button') || first.closest('[aria-hidden="true"]') != null || first.matches('[aria-disabled="true"], [aria-haspopup]:not([aria-haspopup="false"])')) {
+    return null;
+  }
+  let ancestor = first;
+  while (ancestor != null && ancestor !== viewport) {
+    const role = ancestor.getAttribute('role')?.trim().toLowerCase();
+    const nativeRole = ancestor === first && (role === 'button' && first.localName === 'button' || role === 'link' && first.localName === 'a');
+    if (role != null && role !== '' && !nativeRole && !PASSIVE_ROLES.has(role) || ancestor === first && role != null && role !== '' && !nativeRole || ancestor.hasAttribute('aria-activedescendant') || ancestor.isContentEditable || ancestor.matches('[contenteditable]:not([contenteditable="false"])') || getRegisteredScrollOwnerState(ancestor) != null) {
+      return null;
+    }
+    // Also respect native scroll owners that have not adopted the shared hook.
+    const style = getComputedStyle(ancestor);
+    if (/^(auto|scroll|overlay)$/.test(style.overflowX) && ancestor.scrollWidth > ancestor.clientWidth + 1 || /^(auto|scroll|overlay)$/.test(style.overflowY) && ancestor.scrollHeight > ancestor.clientHeight + 1) {
+      return null;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return ancestor === viewport ? first : null;
+}
+
+/** Attach only while automatic ownership has an effective scroll axis. */
+export function attachScrollKeyboardDelegation(viewport, content) {
+  const document = viewport.ownerDocument;
+  const window = document.defaultView;
+  if (window == null) {
+    return () => {};
+  }
+  let entry = null;
+  let origin = null;
+  let delegated = null;
+  let timer;
+  let restoreTabStop;
+  const reset = () => {
+    entry = null;
+    origin = null;
+    window.clearTimeout(timer);
+    restoreTabStop?.();
+    restoreTabStop = undefined;
+  };
+  const onKeyDown = event => {
+    reset();
+    if (event.key !== 'Tab' || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    // Keep the actual event: focus() during keydown is programmatic (nonzero
+    // eventPhase), whereas native Tab focus follows completed event dispatch.
+    entry = event;
+    origin = event.target;
+    if (event.shiftKey && delegated != null && document.activeElement === delegated && viewport.contains(delegated)) {
+      const tabIndex = viewport.getAttribute('tabindex');
+      viewport.tabIndex = -1;
+      restoreTabStop = () => {
+        if (viewport.getAttribute('tabindex') === '-1') {
+          if (tabIndex == null) {
+            viewport.removeAttribute('tabindex');
+          } else {
+            viewport.setAttribute('tabindex', tabIndex);
+          }
+        }
+      };
+    }
+    // A canceled Tab, focus leaving the document, or a held key must not leave
+    // stale keyboard intent for a later pointer/programmatic focus operation.
+    timer = window.setTimeout(reset, 0);
+  };
+  const onFocusIn = event => {
+    const keyboardEntry = entry;
+    const previous = origin;
+    reset();
+    if (event.target !== viewport) {
+      if (!viewport.contains(event.target)) {
+        delegated = null;
+      }
+      return;
+    }
+    delegated = null;
+    if (keyboardEntry == null || keyboardEntry.shiftKey || keyboardEntry.defaultPrevented || keyboardEntry.eventPhase !== 0 || event.relatedTarget != null && event.relatedTarget !== previous) {
+      return;
+    }
+    const target = firstDelegationTarget(viewport, content);
+    if (target == null) {
+      return;
+    }
+    delegated = target;
+    // Let native focus reveal the action. Arrow/Page scrolling remains entirely
+    // browser-owned, including scroll chaining and the full viewport range.
+    target.focus();
+    if (document.activeElement !== target) {
+      delegated = null;
+    }
+  };
+  document.addEventListener('keydown', onKeyDown, true);
+  document.addEventListener('keyup', reset, true);
+  document.addEventListener('pointerdown', reset, true);
+  document.addEventListener('focusin', onFocusIn, true);
+  window.addEventListener('blur', reset);
+  return () => {
+    reset();
+    document.removeEventListener('keydown', onKeyDown, true);
+    document.removeEventListener('keyup', reset, true);
+    document.removeEventListener('pointerdown', reset, true);
+    document.removeEventListener('focusin', onFocusIn, true);
+    window.removeEventListener('blur', reset);
+  };
+}

package/dist/hooks/useScrollableArea.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file useScrollableArea.ts
- * @input Logical scroll intent, keyboard ownership, caller-owned viewport/content props
- * @output Safe prop getters and stable per-axis effective scroll state
+ * @input Logical scroll intent, focus-time keyboard delegation, caller-owned viewport/content props
+ * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
  * SYNC: When modified, update:
@@ -20,6 +20,10 @@ export type ScrollKeyboardAccess = {
     owner: 'viewport';
     label: string;
     role?: 'group' | 'region';
+} | {
+    owner: 'contentOrViewport';
+    label: string;
+    role?: 'group' | 'region';
 };
 export interface ScrollAxisState {
     isScrollable: boolean;

package/dist/hooks/useScrollableArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollableArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollableArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAC5B;IAAC,KAAK,EAAE,SAAS,CAAA;CAAC,GAClB;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAC,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,cAAc,EAAE,oBAAoB,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;CAC7C;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACtE,aAAa,CAAC,CAAC,CAAC,CAAC;AAEnB,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,CAAC,SAAS,WAAW,EACpC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,CAAC,SAAS,WAAW,EACnC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,mBAAmB,CAAC;CAC5B;AAiGD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,cAAc,EACd,UAAoB,EACpB,iBAAoC,GACrC,EAAE,wBAAwB,GAAG,uBAAuB,CAwRpD"}
+{"version":3,"file":"useScrollableArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollableArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAC5B;IAAC,KAAK,EAAE,SAAS,CAAA;CAAC,GAClB;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAC,GAC7D;IACE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B,CAAC;AAEN,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,cAAc,EAAE,oBAAoB,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;CAC7C;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACtE,aAAa,CAAC,CAAC,CAAC,CAAC;AAEnB,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,CAAC,SAAS,WAAW,EACpC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,CAAC,SAAS,WAAW,EACnC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,mBAAmB,CAAC;CAC5B;AAiGD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,cAAc,EACd,UAAoB,EACpB,iBAAoC,GACrC,EAAE,wBAAwB,GAAG,uBAAuB,CA0SpD"}

package/dist/hooks/useScrollableArea.js

@@ -4,8 +4,8 @@
 
 /**
  * @file useScrollableArea.ts
- * @input Logical scroll intent, keyboard ownership, caller-owned viewport/content props
- * @output Safe prop getters and stable per-axis effective scroll state
+ * @input Logical scroll intent, focus-time keyboard delegation, caller-owned viewport/content props
+ * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
  * SYNC: When modified, update:
@@ -15,6 +15,7 @@
  */
 import { useCallback, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { attachScrollKeyboardDelegation } from "./scrollKeyboardDelegation.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { mergeRefs } from "../utils/mergeRefs.js";
@@ -172,6 +173,9 @@ export function useScrollableArea({
     viewport.addEventListener('animationend', scheduleMeasure);
     content.addEventListener('transitionend', scheduleMeasure);
     content.addEventListener('animationend', scheduleMeasure);
+
+    // Geometry invalidation is independent of keyboard eligibility. The latter
+    // is inspected only on native keyboard entry, never by these observers.
     const mutationObserver = typeof MutationObserver === 'undefined' ? null : new MutationObserver(scheduleMeasure);
     mutationObserver?.observe(viewport, {
       attributes: true,
@@ -219,6 +223,13 @@ export function useScrollableArea({
     inline: axisIsRequested(axis, 'inline') ? measured.inline : INACTIVE_AXIS_STATE,
     block: axisIsRequested(axis, 'block') ? measured.block : INACTIVE_AXIS_STATE
   }), [axis, measured]);
+  const hasEffectiveAxis = state.inline.isScrollable || state.block.isScrollable;
+  useIsomorphicLayoutEffect(() => {
+    if (keyboardAccess.owner !== 'contentOrViewport' || !hasEffectiveAxis || viewport == null || content == null) {
+      return;
+    }
+    return attachScrollKeyboardDelegation(viewport, content);
+  }, [content, hasEffectiveAxis, keyboardAccess.owner, viewport]);
   const getViewportProps = useCallback((props = {}) => {
     const hasEffectiveAxis = state.inline.isScrollable || state.block.isScrollable;
     const requestedX = axisIsRequested(axis, 'inline') && mapping.inline === 'x' || axisIsRequested(axis, 'block') && mapping.block === 'x';
@@ -237,7 +248,8 @@ export function useScrollableArea({
       style: withoutOwnedOverflow(domProps.style)
     };
     const styledProps = mergeProps(callerProps, stylex.props(xstyle, styles.overflow(containsSticky ? scrollsOnX ? 'auto' : 'hidden' : 'clip', containsSticky ? scrollsOnY ? 'auto' : 'hidden' : 'clip')));
-    const keepsProgrammaticFocus = !hasEffectiveAxis && viewport != null && typeof document !== 'undefined' && document.activeElement === viewport;
+    const viewportIsKeyboardOwner = keyboardAccess.owner !== 'content';
+    const keepsProgrammaticFocus = (!viewportIsKeyboardOwner || !hasEffectiveAxis) && viewport != null && typeof document !== 'undefined' && document.activeElement === viewport;
     const behaviorStyle = {
       ...styledProps.style
     };
@@ -251,10 +263,10 @@ export function useScrollableArea({
     if (axisIsRequested(axis, 'block')) {
       behaviorStyle[blockPhysical === 'x' ? 'overscrollBehaviorX' : 'overscrollBehaviorY'] = containBlock ? 'contain' : 'auto';
     }
-    const keyboardProps = keyboardAccess.owner === 'viewport' ? {
+    const keyboardProps = keyboardAccess.owner !== 'content' ? {
       role: keyboardAccess.role ?? 'group',
       'aria-label': keyboardAccess.label,
-      tabIndex: hasEffectiveAxis ? 0 : keepsProgrammaticFocus ? -1 : undefined
+      tabIndex: viewportIsKeyboardOwner && hasEffectiveAxis ? 0 : keepsProgrammaticFocus ? -1 : undefined
     } : {};
     const result = {
       ...styledProps,

package/dist/utils/interactionOverlay.stylex.d.ts

@@ -4,6 +4,11 @@
  * @output Exports reusable background-color and background-image state styles
  * @position Internal styling utility for interactive core surfaces
  *
+ * Every surface that paints a press composes one of these (or carries its own
+ * `:active` rule), so a change to how the system answers a press is made here
+ * once. `pressedBackgroundColor` is the press without the hover, for controls
+ * whose hover is a colour or nothing.
+ *
  * Keep the enabled guard outside the individual states. StyleX assigns an
  * extra priority bucket (and generated selector specificity) to media-nested
  * rules. Repeating `:active` inside the hover-capable branch gives hover and
@@ -22,5 +27,8 @@ export declare const interactionOverlayStyles: Readonly<{
     readonly backgroundImageOnNeutral: Readonly<{
         readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", string | null>;
     }>;
+    readonly pressedBackgroundColor: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#05365919, #FFFFFF19)" | null>;
+    }>;
 }>;
 //# sourceMappingURL=interactionOverlay.stylex.d.ts.map

package/dist/utils/interactionOverlay.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,eAAO,MAAM,wBAAwB;;;;;;;;;;EA2CnC,CAAC"}
+{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;EA0DnC,CAAC"}

package/dist/utils/interactionOverlay.stylex.js

@@ -10,6 +10,11 @@
  * @output Exports reusable background-color and background-image state styles
  * @position Internal styling utility for interactive core surfaces
  *
+ * Every surface that paints a press composes one of these (or carries its own
+ * `:active` rule), so a change to how the system answers a press is made here
+ * once. `pressedBackgroundColor` is the press without the hover, for controls
+ * whose hover is a colour or nothing.
+ *
  * Keep the enabled guard outside the individual states. StyleX assigns an
  * extra priority bucket (and generated selector specificity) to media-nested
  * rules. Repeating `:active` inside the hover-capable branch gives hover and
@@ -38,5 +43,9 @@ export const interactionOverlayStyles = {
   backgroundImageOnNeutral: {
     kKwaWg: "x14bno8m xzmimnh x1otsd3y xo3fi6e",
     $$css: true
+  },
+  pressedBackgroundColor: {
+    kWkggS: "x1anq1lc",
+    $$css: true
   }
 };

package/locales/en.json

@@ -447,6 +447,18 @@
     "defaultMessage": "Next",
     "description": "Screen-reader-only label on the right-arrow button in a Lightbox (navigates to next media item). Pairs with `lightbox.previous`."
   },
+  "@astryx.chatTypingIndicator.one": {
+    "defaultMessage": "{name} is typing…",
+    "description": "Politely announced status naming the single person currently typing in a chat. `name` is a display name supplied by the app. Present-progressive form; the trailing ellipsis is the single … character."
+  },
+  "@astryx.chatTypingIndicator.many": {
+    "defaultMessage": "{names} are typing…",
+    "description": "Politely announced status when more than one person is typing in a chat. `names` is already joined for the locale by Intl.ListFormat, so translations must not add their own conjunction — place `{names}` where the joined list belongs."
+  },
+  "@astryx.chatTypingIndicator.others": {
+    "defaultMessage": "{count, number} {count, plural, one {other} other {others}}",
+    "description": "Overflow element for the chat typing status when three or more people type: the first name is shown and the rest collapse into this phrase, which is then joined to the name by Intl.ListFormat. Renders as the last list item, e.g. \"Ana and 2 others\"."
+  },
   "@astryx.listInput.emptyTitle": {
     "defaultMessage": "No {itemName}s yet",
     "description": "EmptyState title shown inside a lab ListInput when its collection has no records. `{itemName}` is the consumer's singular noun for one record (e.g. \"guest\"); the source appends a literal \"s\" to pluralize it, which only works for regular English plurals. If your language cannot pluralize an interpolated noun this way, rephrase around `{itemName}` instead (e.g. \"No {itemName} added yet\")."
@@ -935,6 +947,10 @@
     "defaultMessage": "Loading",
     "description": "Screen-reader-only live-region announcement while a Button is in its loading state (spinner shown, action in flight). Progressive sense (\"work in progress\"), not a noun. Kept separate from `typeahead.loading` — translations may diverge."
   },
+  "@astryx.spinner.loading": {
+    "defaultMessage": "Loading",
+    "description": "Screen-reader-only default name for a standalone Spinner's role=\"status\" element, used when the consumer supplies neither `aria-label` nor a visible string label. Present-progressive form. Kept separate from `button.loading` and `typeahead.loading` — translations may diverge."
+  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "Expand {label}",
     "description": "Screen-reader-only label on the ChatComposerDrawer toggle when the drawer is collapsed. `{label}` is the drawer's visible name — example: `Expand Attachments`. Pairs with `collapse`."

package/locales/pseudo.json

@@ -335,6 +335,15 @@
   "@astryx.lightbox.next": {
     "defaultMessage": "⟦Ñéẋţ⟧"
   },
+  "@astryx.chatTypingIndicator.one": {
+    "defaultMessage": "⟦{name} íš ţýþíñĝ…⟧"
+  },
+  "@astryx.chatTypingIndicator.many": {
+    "defaultMessage": "⟦{names} àřé ţýþíñĝ…⟧"
+  },
+  "@astryx.chatTypingIndicator.others": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {other} other {others}}⟧"
+  },
   "@astryx.listInput.emptyTitle": {
     "defaultMessage": "⟦Ñó {itemName}š ýéţ⟧"
   },
@@ -701,6 +710,9 @@
   "@astryx.button.loading": {
     "defaultMessage": "⟦Łóàðíñĝ⟧"
   },
+  "@astryx.spinner.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ⟧"
+  },
   "@astryx.chatComposerDrawer.expand": {
     "defaultMessage": "⟦Éẋþàñð {label}⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.6.1",
+  "version": "0.6.2-canary.0faf070",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -672,16 +672,18 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^8.0.4",
+    "@astryxdesign/a11y-spec": "0.6.2-canary.0faf070",
+    "@astryxdesign/cli": "0.6.2-canary.0faf070",
+    "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
-    "@babel/preset-react": "^8.0.1",
+    "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
+    "@heroicons/react": "^2.2.0",
     "@stylexjs/babel-plugin": "^0.19.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
-    "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/cli": "0.6.1"
+    "@types/babel__core": "^7.20.5"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/scripts/agent-doc-state.mjs

@@ -57,7 +57,7 @@ export const LEGACY_MARKER_END = '<!-- XDS:END -->';
  * targets are user-chosen and not enumerable here.)
  */
 export const AGENT_DOC_PATHS = [
-  AGENTS_MD, // Codex / ChatGPT / generic
+  AGENTS_MD, // Codex / ChatGPT / Muse / generic
   CLAUDE_MD, // Claude Code (root)
   CLAUDE_DIR_MD, // Claude Code (.claude/CLAUDE.md)
   CURSOR_RULES, // Cursor

package/src/BottomSheet/BottomSheet.doc.mjs

@@ -1,5 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/**
+ * @file BottomSheet.doc.mjs
+ * @input BottomSheet props, sheet anatomy, and focus-time keyboard scrolling behavior
+ * @output Consumer documentation and examples for BottomSheet
+ * @position CLI and rendered component documentation
+ */
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
 const anatomy = [
   {
@@ -130,7 +137,7 @@ export const docs = {
       name: 'children',
       type: 'ReactNode',
       description:
-        "Sheet content, rendered below the grab handle in a scrollable area. If it includes a text-entry control that can bring up the mobile keyboard, use height='tall' and keep the sheet fully expanded while editing.",
+        "Sheet content in a scrollable area. The named body is keyboard reachable while overflowing. Forward Tab entry may move directly to the first native link or button; input controls, composite widgets, and nested scroll areas retain the body stop. Shift+Tab from a delegated first child skips the body. Fitting content adds no body stop. The internal observed content box preserves block flow and percentage heights. If it includes a text-entry control that can bring up the mobile keyboard, use height='tall' and keep the sheet fully expanded while editing.",
       required: true,
     },
     {