@astryxdesign/core 0.7.6-canary.631ba02 → 0.7.6-canary.962dffe

package/dist/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAsChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAqND,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAykBf;yBAxlBe,QAAQ"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAwChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAuOD,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA6wBf;yBA5xBe,QAAQ"}

package/dist/AppShell/AppShell.js

@@ -23,7 +23,7 @@ import React from 'react';
 import { isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, focusVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Layout } from "../Layout/Layout.js";
 import { LayoutHeader } from "../Layout/LayoutHeader.js";
 import { LayoutPanel } from "../Layout/LayoutPanel.js";
@@ -38,7 +38,7 @@ import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
 import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
 import { AppShellMobileContext } from "./AppShellMobileContext.js";
 import { mergeProps, isRenderable } from "../utils/index.js";
-import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+import { focusOutlineProps, focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { observeResize } from "../utils/sharedResizeObserver.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -46,6 +46,8 @@ import { useTranslator } from "../i18n/index.js";
 import { useThemeDefinition } from "../theme/useTheme.js";
 import { DEFAULT_WIDTH_BREAKPOINTS } from "../theme/themeAdaptations.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { attachScrollKeyboardDelegation } from "../hooks/scrollKeyboardDelegation.js";
+import { observeMainOverflow } from "./observeMainOverflow.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity ? ({
@@ -168,6 +170,14 @@ const styles = {
     kI3sdo: "x1uvtmcs",
     $$css: true
   },
+  mainElevatedCorner: {
+    krdFHd: "x9a4xmf",
+    $$css: true
+  },
+  mainScrollRegionInset: {
+    kInvED: "x1wfwxd8 x1nw7mhf",
+    $$css: true
+  },
   contentBgSurface: {
     kWkggS: "x10xzikg",
     $$css: true
@@ -332,9 +342,87 @@ export function AppShell({
   const handleSkipLinkClick = useCallback(() => {
     document.getElementById(MAIN_CONTENT_ID)?.focus();
   }, []);
+
+  // Main draws its focus ring only for focus a Tab press moved onto it, and
+  // keeps it for as long as that focus stays, even once the content fits.
+  // Programmatic focus (the skip link, a script's focus() on a route change)
+  // draws none (FR4), even after keyboard input, where :focus-visible alone
+  // would match. See the effect below for how a Tab move is told apart.
+  const [isTabFocus, setIsTabFocus] = useState(false);
+  // A window or tab switch blurs main without moving focus off it: main stays
+  // the document's active element, and focus comes back to it with no Tab
+  // press. The ring holds across that round trip; any real focus move ends it.
+  const isMainAwayRef = useRef(false);
+  const handleMainBlur = useCallback(event => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if (document.activeElement === event.currentTarget) {
+      isMainAwayRef.current = true;
+      return;
+    }
+    isMainAwayRef.current = false;
+    setIsTabFocus(false);
+  }, []);
   const isFill = height === 'fill';
   const isAuto = height === 'auto';
 
+  // With `fill`, main is the page's scroller. While its content overflows it
+  // must be reachable from the keyboard even when nothing inside it is
+  // focusable (AST-025 FR12): it joins the tab order, and Tab entry moves on
+  // to its first link or button when it has one. Only `fill` observes main
+  // (PR1); LayoutContent keeps owning main's overflow and styles.
+  const [isMainOverflowing, setIsMainOverflowing] = useState(false);
+  const isMainScrollRegion = isFill && isMainOverflowing;
+  // Main's node is owned through a ref, never React state. Under `fill` its
+  // overflow is observed while the node is attached, and while main is a
+  // scroll region the keyboard delegation is attached to it. The ref callback
+  // changes with `fill`, so switching modes detaches and re-attaches main in
+  // the same commit; a detached or replaced node releases both before the new
+  // node takes over.
+  const mainNodeRef = useRef(null);
+  const mainOverflowRef = useRef(null);
+  const mainDelegationRef = useRef(null);
+  const isMainScrollRegionRef = useRef(isMainScrollRegion);
+  const syncMainDelegation = useCallback(() => {
+    const node = isMainScrollRegionRef.current ? mainNodeRef.current : null;
+    const current = mainDelegationRef.current;
+    if (current?.node === node) {
+      return;
+    }
+    current?.release();
+    mainDelegationRef.current = node == null ? null : {
+      node,
+      release: attachScrollKeyboardDelegation(node, node)
+    };
+  }, []);
+  const setMainNode = useCallback(node => {
+    mainNodeRef.current = node;
+    const observed = isFill ? node : null;
+    const current = mainOverflowRef.current;
+    if (current?.node !== observed) {
+      current?.stop();
+      mainOverflowRef.current = observed == null ? null : {
+        node: observed,
+        stop: observeMainOverflow(observed, setIsMainOverflowing)
+      };
+      if (observed == null) {
+        setIsMainOverflowing(false);
+      }
+    }
+    syncMainDelegation();
+  }, [isFill, syncMainDelegation]);
+  useEffect(() => {
+    isMainScrollRegionRef.current = isMainScrollRegion;
+    syncMainDelegation();
+  }, [isMainScrollRegion, syncMainDelegation]);
+  useEffect(() => () => {
+    mainOverflowRef.current?.stop();
+    mainOverflowRef.current = null;
+    mainDelegationRef.current?.release();
+    mainDelegationRef.current = null;
+  }, []);
+
   // Nav style derived values
   const hasBanner = isRenderable(banner);
   const hasTopNav = isRenderable(topNav);
@@ -459,6 +547,9 @@ export function AppShell({
   // (`component:SideNav` FR6).
   const railRef = useRef(null);
   const mainRef = useRef(null);
+  // Main's node goes to the glide above and to the overflow observation
+  // that, under `fill`, makes main a keyboard stop.
+  const mainRefs = useMergedRefs(mainRef, setMainNode);
   const backdropRef = useRef(null);
   const contentLayout = useAnimatedLayout({
     containerRef: shellRef
@@ -617,17 +708,104 @@ export function AppShell({
   // Build main content
   // =========================================================================
   const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
+  // While main is a keyboard stop, a Tab keydown anywhere in the document
+  // (capture, so Shift+Tab from the page start counts too) marks the next
+  // focus move, and so does the window's focus event for keyboard focus that
+  // enters the document from outside (Tab or Shift+Tab from the page
+  // embedding this one), where the browser's own `:focus-visible` then tells
+  // a key from a pointer. A mark counts only once its event's dispatch has
+  // finished uncancelled (`eventPhase === 0`): the browser's own focus move
+  // follows that dispatch in the same task, while a focus() a page's handler
+  // calls during it is programmatic and draws no ring (FR4). The marks expire
+  // on a zero-delay timer, so a cancelled Tab, a Tab out of the document or a
+  // window focus with nothing focused leaves nothing for a later focus().
+  useEffect(() => {
+    if (!isMainScrollRegion) {
+      return;
+    }
+    let tabKeydown = null;
+    let windowFocus = null;
+    let expiry;
+    const expireMarks = () => {
+      clearTimeout(expiry);
+      expiry = setTimeout(() => {
+        tabKeydown = null;
+        windowFocus = null;
+      }, 0);
+    };
+    const onKeyDown = event => {
+      tabKeydown = event.key === 'Tab' ? event : null;
+      windowFocus = null;
+      expireMarks();
+    };
+    const onPointerDown = () => {
+      tabKeydown = null;
+      windowFocus = null;
+    };
+    const onWindowFocus = event => {
+      windowFocus = event;
+      expireMarks();
+    };
+    const onFocusIn = event => {
+      // Still dispatching: this focus move is a handler's focus(), so it
+      // reads no mark and leaves the mark for the browser's own move.
+      const tabDone = tabKeydown != null && tabKeydown.eventPhase === 0;
+      const focusDone = windowFocus != null && windowFocus.eventPhase === 0;
+      const arrivedByTab = tabDone && tabKeydown?.defaultPrevented === false;
+      const enteredDocument = focusDone;
+      if (tabDone) {
+        tabKeydown = null;
+      }
+      if (focusDone) {
+        windowFocus = null;
+      }
+      const main = mainNodeRef.current;
+      const isMain = event.target != null && event.target === main;
+      if (isMainAwayRef.current) {
+        // Focus comes back after a window or tab switch (main keeps the ring
+        // it had), or lands elsewhere (main's ring is over).
+        isMainAwayRef.current = false;
+        if (isMain && !arrivedByTab) {
+          return;
+        }
+        if (!isMain) {
+          setIsTabFocus(false);
+          return;
+        }
+      }
+      if (isMain) {
+        setIsTabFocus(arrivedByTab || enteredDocument && main.matches(':focus-visible'));
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('focusin', onFocusIn, true);
+    window.addEventListener('focus', onWindowFocus);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('focusin', onFocusIn, true);
+      window.removeEventListener('focus', onWindowFocus);
+      clearTimeout(expiry);
+    };
+  }, [isMainScrollRegion]);
+
+  // Tab focus on main draws the ring until main loses focus; programmatic
+  // focus never does (FR4).
+  const drawsMainFocusRing = isTabFocus;
   const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
-    ref: mainRef,
+    ref: mainRefs,
     padding: contentPadding ?? 0,
     role: "main",
     id: MAIN_CONTENT_ID
     // Focusable skip-link target (WCAG 2.4.1) — without tabIndex, several
     // browsers won't move focus to the div when the skip link is activated.
+    // A keyboard stop only while it scrolls overflowing content.
     ,
-    tabIndex: -1,
+    tabIndex: isMainScrollRegion ? 0 : -1,
     isScrollable: isFill,
-    xstyle: [contentAreaStyle, styles.mainFocusTarget],
+    onBlur: handleMainBlur,
+    xstyle: [contentAreaStyle, drawsMainFocusRing && shouldElevateWithCorner && styles.mainElevatedCorner, drawsMainFocusRing ? [focusOutlineStyles.focusVisible, styles.mainScrollRegionInset] : styles.mainFocusTarget],
     children: children
   });
 

package/dist/AppShell/observeMainOverflow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Calls `onChange` with whether `main`'s content overflows it on either axis:
+ * once with the first measurement, then whenever the answer changes. Signals
+ * coalesce into one measurement per frame. A hidden, disconnected or
+ * zero-size main is unknown rather than fitting: the last answer stands until
+ * a later signal measures it.
+ */
+export declare function observeMainOverflow(main: HTMLElement, onChange: (overflows: boolean) => void): () => void;
+//# sourceMappingURL=observeMainOverflow.d.ts.map

package/dist/AppShell/observeMainOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observeMainOverflow.d.ts","sourceRoot":"","sources":["../../src/AppShell/observeMainOverflow.ts"],"names":[],"mappings":"AAyCA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GACrC,MAAM,IAAI,CA2FZ"}

package/dist/AppShell/observeMainOverflow.js

@@ -0,0 +1,125 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file observeMainOverflow.ts
+ * @input AppShell's main region under `height="fill"`: its own scroll
+ *   container, holding its content as direct children with no wrapper
+ * @output observeMainOverflow(main, onChange): reports whether main's content
+ *   overflows it on either axis, once at the start and on every change, and
+ *   returns the function that stops observing
+ * @position Internal to AppShell and never exported. AppShell makes main a
+ *   keyboard stop only while it overflows (`spec:AST-025` FR12,
+ *   `component:AppShell` FR4 and PR1). Main has no inner content box, so its
+ *   content grows inside it without resizing it: its direct children's sizes
+ *   are watched instead.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/AppShell/AppShell.tsx
+ * - /packages/core/src/AppShell/observeMainOverflow.test.ts
+ */
+import { getLogicalAxisMapping, measureLogicalScrollAxis } from "../hooks/scrollGeometry.js";
+import { observeMutations } from "../utils/sharedMutationObserver.js";
+import { observeResize } from "../utils/sharedResizeObserver.js";
+
+/**
+ * Main's content: layout attributes, text and children, all the way down.
+ * One shared observer serves every registration with these options.
+ */
+const CONTENT_MUTATIONS = {
+  attributes: true,
+  attributeFilter: ['class', 'dir', 'hidden', 'style'],
+  characterData: true,
+  childList: true,
+  subtree: true
+};
+
+/**
+ * Calls `onChange` with whether `main`'s content overflows it on either axis:
+ * once with the first measurement, then whenever the answer changes. Signals
+ * coalesce into one measurement per frame. A hidden, disconnected or
+ * zero-size main is unknown rather than fitting: the last answer stands until
+ * a later signal measures it.
+ */
+export function observeMainOverflow(main, onChange) {
+  let isActive = true;
+  let frame = null;
+  let overflows = null;
+  const measure = () => {
+    frame = null;
+    if (!isActive) {
+      return;
+    }
+    const computedStyle = getComputedStyle(main);
+    const mapping = getLogicalAxisMapping(computedStyle.writingMode, computedStyle.direction);
+    const inline = measureLogicalScrollAxis(main, 'inline', mapping);
+    const block = measureLogicalScrollAxis(main, 'block', mapping);
+    if (inline == null || block == null) {
+      return;
+    }
+    const next = inline.isScrollable || block.isScrollable;
+    if (next !== overflows) {
+      overflows = next;
+      onChange(next);
+    }
+  };
+  const scheduleMeasure = () => {
+    if (isActive && frame == null) {
+      frame = window.requestAnimationFrame(measure);
+    }
+  };
+
+  // Main keeps its size while its content grows; its children do not. Each
+  // direct child's size is watched, following the children as they change.
+  const childObservers = new Map();
+  const syncChildObservers = () => {
+    const children = new Set(Array.from(main.children));
+    for (const [child, stop] of childObservers) {
+      if (!children.has(child)) {
+        stop();
+        childObservers.delete(child);
+      }
+    }
+    for (const child of children) {
+      if (!childObservers.has(child)) {
+        childObservers.set(child, observeResize(child, scheduleMeasure));
+      }
+    }
+  };
+  const onContentChange = () => {
+    syncChildObservers();
+    scheduleMeasure();
+  };
+  measure();
+  syncChildObservers();
+  const stopObservingMain = observeResize(main, scheduleMeasure);
+  const stopObservingContent = observeMutations(main, CONTENT_MUTATIONS, onContentChange);
+  window.addEventListener('resize', scheduleMeasure);
+  window.visualViewport?.addEventListener('resize', scheduleMeasure);
+  main.addEventListener('load', scheduleMeasure, true);
+  main.addEventListener('transitionend', scheduleMeasure);
+  main.addEventListener('animationend', scheduleMeasure);
+  const fonts = document.fonts;
+  fonts?.addEventListener?.('loadingdone', scheduleMeasure);
+  void fonts?.ready.then(scheduleMeasure);
+  return () => {
+    isActive = false;
+    if (frame != null) {
+      window.cancelAnimationFrame(frame);
+      frame = null;
+    }
+    stopObservingMain();
+    stopObservingContent();
+    for (const stop of childObservers.values()) {
+      stop();
+    }
+    childObservers.clear();
+    window.removeEventListener('resize', scheduleMeasure);
+    window.visualViewport?.removeEventListener('resize', scheduleMeasure);
+    main.removeEventListener('load', scheduleMeasure, true);
+    main.removeEventListener('transitionend', scheduleMeasure);
+    main.removeEventListener('animationend', scheduleMeasure);
+    fonts?.removeEventListener?.('loadingdone', scheduleMeasure);
+  };
+}

package/dist/Carousel/Carousel.d.ts

@@ -10,7 +10,9 @@
  *   scroll control. Exposes APG
  *   carousel semantics: the root is a labelled region with
  *   aria-roledescription="carousel" and each item wrapper is a group with
- *   aria-roledescription="slide" named "Slide N of M".
+ *   aria-roledescription="slide" named "Slide N of M". The scroll area is a
+ *   group named like the carousel and a tab stop only while its content
+ *   overflows (AST-025 FR12).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Carousel/index.ts (exports)

package/dist/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,UAAU,IAAI,IAAI,CAAC;IACnB;;;OAGG;IACH,UAAU,IAAI,IAAI,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;OAIG;IACH,aAAa,IAAI,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,IAAI,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+JD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,SAAS,EACT,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BAyXf;yBAzYe,QAAQ"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,UAAU,IAAI,IAAI,CAAC;IACnB;;;OAGG;IACH,UAAU,IAAI,IAAI,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B;;;;OAIG;IACH,aAAa,IAAI,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,IAAI,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+JD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,SAAS,EACT,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA+Xf;yBA/Ye,QAAQ"}

package/dist/Carousel/Carousel.js

@@ -14,7 +14,9 @@
  *   scroll control. Exposes APG
  *   carousel semantics: the root is a labelled region with
  *   aria-roledescription="carousel" and each item wrapper is a group with
- *   aria-roledescription="slide" named "Slide N of M".
+ *   aria-roledescription="slide" named "Slide N of M". The scroll area is a
+ *   group named like the carousel and a tab stop only while its content
+ *   overflows (AST-025 FR12).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Carousel/index.ts (exports)
@@ -447,8 +449,15 @@ export function Carousel({
     "aria-label": ariaLabel,
     "aria-roledescription": "carousel",
     children: [/*#__PURE__*/_jsx("div", {
-      ref: composedRef,
-      tabIndex: 0,
+      ref: composedRef
+      // The scroll area takes keyboard scrolling (spec:AST-025 FR12): a
+      // group named like the carousel, in the tab order only while its
+      // content overflows. While it fits it still takes focus
+      // programmatically, for the edge buttons' hand-off (FR2).
+      ,
+      role: "group",
+      "aria-label": ariaLabel,
+      tabIndex: hasOverflow ? 0 : -1,
       onWheel: handleWheel,
       ...mergeProps(themeProps('carousel-scroller', {
         gap,

package/dist/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,oBAAoB,EAErB,MAAM,kCAAkC,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAMtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAsFhD;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sHAAsH;IACtH,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAC5C,0EAA0E;IAC1E,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAoFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,OAAW,EACX,KAAK,EACL,IAAe,EACf,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,eAAsB,EACtB,gBAAuB,EACvB,YAAwB,EACxB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CAqjB7B;yBA7kBe,OAAO"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"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"}

package/dist/Popover/Popover.js

@@ -145,6 +145,15 @@ const styles = {
   }
 };
 
+/**
+ * The window that holds `element`: the page's own, or a second document's (a
+ * same-origin iframe, a Document Picture-in-Picture window) when the Popover
+ * renders there.
+ */
+function windowOf(element) {
+  return element?.ownerDocument.defaultView ?? window;
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -374,11 +383,16 @@ export function Popover({
     if (measurementFrameRef.current != null) {
       return;
     }
-    measurementFrameRef.current = window.requestAnimationFrame(() => {
-      measurementFrameRef.current = null;
-      measureOverflow();
-    });
-  }, [measureOverflow]);
+    // The surface's own window paints it, so its frame runs the measurement.
+    const view = windowOf(popover.contentRef.current);
+    measurementFrameRef.current = {
+      view,
+      id: view.requestAnimationFrame(() => {
+        measurementFrameRef.current = null;
+        measureOverflow();
+      })
+    };
+  }, [measureOverflow, popover.contentRef]);
   useIsomorphicLayoutEffect(() => {
     if (!popover.isOpen) {
       return;
@@ -387,8 +401,13 @@ export function Popover({
     if (!surface) {
       return;
     }
+    // Observe from the surface's own window. A Popover rendered into a second
+    // document resizes with that document's window, and a ResizeObserver the
+    // page created checks a box in a Picture-in-Picture window only while the
+    // page itself renders frames.
+    const view = windowOf(surface);
     measureOverflow();
-    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleOverflowMeasurement);
+    const resizeObserver = typeof view.ResizeObserver === 'undefined' ? null : new view.ResizeObserver(scheduleOverflowMeasurement);
     const mutationObserver = typeof MutationObserver === 'undefined' ? null : new MutationObserver(scheduleOverflowMeasurement);
     resizeObserver?.observe(surface);
     mutationObserver?.observe(surface, {
@@ -397,16 +416,17 @@ export function Popover({
       subtree: true
     });
     surface.addEventListener('load', scheduleOverflowMeasurement, true);
-    window.addEventListener('resize', scheduleOverflowMeasurement);
-    window.visualViewport?.addEventListener('resize', scheduleOverflowMeasurement);
+    view.addEventListener('resize', scheduleOverflowMeasurement);
+    view.visualViewport?.addEventListener('resize', scheduleOverflowMeasurement);
     return () => {
       resizeObserver?.disconnect();
       mutationObserver?.disconnect();
       surface.removeEventListener('load', scheduleOverflowMeasurement, true);
-      window.removeEventListener('resize', scheduleOverflowMeasurement);
-      window.visualViewport?.removeEventListener('resize', scheduleOverflowMeasurement);
-      if (measurementFrameRef.current != null) {
-        window.cancelAnimationFrame(measurementFrameRef.current);
+      view.removeEventListener('resize', scheduleOverflowMeasurement);
+      view.visualViewport?.removeEventListener('resize', scheduleOverflowMeasurement);
+      const frame = measurementFrameRef.current;
+      if (frame != null) {
+        frame.view.cancelAnimationFrame(frame.id);
         measurementFrameRef.current = null;
       }
     };

package/dist/Stepper/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAozBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAq1BX;yBAt2Be,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsB7D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAozBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAg3BX;yBAj4Be,IAAI"}

package/dist/Stepper/Step.js

@@ -37,7 +37,7 @@
  * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
  * - /packages/cli/assets/templates/blocks/components/Step/ (showcase blocks)
  */
-import { useLayoutEffect } from 'react';
+import { useId, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
@@ -719,7 +719,12 @@ export function Step({
   // A compact horizontal stepper moves navigation to the named controls in its
   // summary row. Its track — including the on-track indicators — stays purely
   // presentational so it does not expose a second, denser set of click targets.
-  const isClickable = !isDisabled && onStepClick != null && !isCompact;
+  const hasButton = onStepClick != null && !isCompact;
+  // A disabled step keeps its button, focusable and aria-disabled, so it
+  // keeps its tab stop, is announced as unavailable, and keeps focus when it
+  // becomes disabled while focused (`spec:AST-085` FR1, FR4, FR5); only
+  // activation is withheld.
+  const isClickable = hasButton && !isDisabled;
   const handleClick = () => {
     if (isClickable && onStepClick) {
       onStepClick(step);
@@ -893,7 +898,13 @@ export function Step({
       })]
     }), endContent]
   });
+
+  // A clickable step's name is its number, label and status word; the
+  // description describes it, so a disabled step's reason reaches assistive
+  // technology too (spec:AST-085 FR5).
+  const descriptionID = useId();
   const descriptionNode = isRenderable(description) ? /*#__PURE__*/_jsx("div", {
+    id: descriptionID,
     ...{
       0: {
         className: "x18gyask"
@@ -1027,6 +1038,7 @@ export function Step({
       }), endContent]
     });
     const otDescriptionNode = isRenderable(description) ? /*#__PURE__*/_jsx("span", {
+      id: descriptionID,
       ...mergeProps(descriptionThemeProps, {
         className: "x1lliihq x141an7d x1ojctns xv1l7n4"
       }),
@@ -1080,10 +1092,12 @@ export function Step({
         "aria-current": isActive ? 'step' : undefined,
         "data-testid": dataTestId,
         ...rest,
-        children: [isClickable ? /*#__PURE__*/_jsx("button", {
+        children: [hasButton ? /*#__PURE__*/_jsx("button", {
           type: "button",
           onClick: handleClick,
           "aria-label": stepAriaLabel,
+          "aria-describedby": isRenderable(description) ? descriptionID : undefined,
+          "aria-disabled": isDisabled || undefined,
           ...pressable,
           ...stylex.props(styles.otInteractive, interactionOverlayStyles.backgroundColor, styles.otRowWrap, styles.otRowPadV(densitySpace), focusOutlineStyles.focusVisible),
           children: inner
@@ -1118,10 +1132,12 @@ export function Step({
       "aria-current": isActive ? 'step' : undefined,
       "data-testid": dataTestId,
       ...rest,
-      children: [isClickable ? /*#__PURE__*/_jsx("button", {
+      children: [hasButton ? /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: handleClick,
         "aria-label": stepAriaLabel,
+        "aria-describedby": isRenderable(description) ? descriptionID : undefined,
+        "aria-disabled": isDisabled || undefined,
         ...pressable,
         ...stylex.props(styles.otInteractive, interactionOverlayStyles.backgroundColor, styles.otColWrap, styles.otPadBlock(densitySpace), focusOutlineStyles.focusVisible),
         children: innerH
@@ -1147,10 +1163,12 @@ export function Step({
         ...{
           className: "x78zum5 xdt5ytf x98rzlu"
         },
-        children: [isClickable ? /*#__PURE__*/_jsxs("button", {
+        children: [hasButton ? /*#__PURE__*/_jsxs("button", {
           type: "button",
           onClick: handleClick,
           "aria-label": stepAriaLabel,
+          "aria-describedby": isRenderable(description) ? descriptionID : undefined,
+          "aria-disabled": isDisabled || undefined,
           ...pressable,
           ...stylex.props(styles.buttonReset, interactionOverlayStyles.backgroundColor, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
           children: [iconLabelNode, descriptionNode]
@@ -1172,10 +1190,12 @@ export function Step({
     children: [/*#__PURE__*/_jsx("div", {
       ...mergeProps(themeProps('step-bar'), stylex.props(styles.horizontalBar, styles.connectorTrack, isBarFilled ? styles.connectorFillH : styles.connectorEmptyH, barTiming)),
       "aria-hidden": "true"
-    }), isCompact ? compactNameNode : isClickable ? /*#__PURE__*/_jsxs("button", {
+    }), isCompact ? compactNameNode : hasButton ? /*#__PURE__*/_jsxs("button", {
       type: "button",
       onClick: handleClick,
       "aria-label": stepAriaLabel,
+      "aria-describedby": isRenderable(description) ? descriptionID : undefined,
+      "aria-disabled": isDisabled || undefined,
       ...stylex.props(styles.buttonReset, interactionOverlayStyles.backgroundColor, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
       children: [iconLabelNode, descriptionNode]
     }) : /*#__PURE__*/_jsxs("div", {

package/dist/astryx.css

@@ -1525,6 +1525,7 @@
   .x1wxx7ce.x1wxx7ce:where(.astryx-input-group > [data-astryx-input-group-item]):has(~ *:not([popover]):not(template):not(dialog)):not(#\#):not(#\#):not(#\#){border-start-end-radius:0}
   .x149bkfe:not(:has(~ *:not([popover]):not(template):not(dialog))):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
   .x132ell6.x132ell6:where(.astryx-input-group > [data-astryx-input-group-item]):not(:first-child):not(#\#):not(#\#):not(#\#){border-start-start-radius:0}
+  .x9a4xmf:focus-visible:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-page)}
   .xuihb5h:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px var(--color-accent-muted)}
   .x15ysqaf:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:none}
   .xyavpck:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}