@astryxdesign/core 0.7.5 → 0.7.6-canary.0bd3b37

package/dist/ToggleButton/ToggleButtonGroup.js

@@ -62,6 +62,12 @@ const styles = {
 // Props — Discriminated Union
 // =============================================================================
 
+/**
+ * Host props reach the group element (`architecture:public-component-api`
+ * INV5): `className`, `style`, `id`, `aria-*`, `data-*` and handlers. The group
+ * keeps its own `role`, `aria-label` and theme target.
+ */
+
 /**
  * Single-select group props.
  * Only one button can be active at a time. Clicking the active
@@ -103,7 +109,14 @@ export function ToggleButtonGroup(props) {
     size,
     isDisabled = false,
     xstyle,
-    'data-testid': testId
+    className,
+    style,
+    'data-testid': testId,
+    // Read through `props` below, where the union narrows them by `type`.
+    type: _type,
+    value: _value,
+    onChange: _onChange,
+    ...hostProps
   } = props;
   const isMultiple = props.type === 'multiple';
   const selectedValues = useMemo(() => {
@@ -138,10 +151,11 @@ export function ToggleButtonGroup(props) {
   return /*#__PURE__*/_jsx(ToggleButtonGroupContext, {
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {
+      ...hostProps,
       role: "group",
       "aria-label": label,
       "data-testid": testId,
-      ...mergeProps(themeProps('toggle-button-group'), stylex.props(styles.group, orientation === 'vertical' && styles.vertical, xstyle)),
+      ...mergeProps(themeProps('toggle-button-group'), stylex.props(styles.group, orientation === 'vertical' && styles.vertical, xstyle), className, style),
       children: children
     })
   });

package/dist/Token/Token.d.ts

@@ -95,7 +95,7 @@ export interface TokenProps extends BaseProps<HTMLElement> {
  * <Token label="Link" href="/path" />
  * ```
  */
-export declare function Token({ label, size, color, icon, isDisabled, onRemove, onClick, href, description, endContent, isLabelHidden, xstyle, className, style, 'data-testid': testId, ref, ...rest }: TokenProps): import("react").JSX.Element;
+export declare function Token({ label, size, color, icon, isDisabled, onRemove, onClick, href, description, endContent, isLabelHidden, xstyle, className, style, 'data-testid': testId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ref, ...rest }: TokenProps): import("react").JSX.Element;
 export declare namespace Token {
     var displayName: string;
 }

package/dist/Token/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAO3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA2JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BAkMZ;yBApNe,KAAK"}
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAO3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA2JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BAsQZ;yBA1Re,KAAK"}

package/dist/Token/Token.js

@@ -210,6 +210,8 @@ export function Token({
   className,
   style,
   'data-testid': testId,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   ref,
   ...rest
 }) {
@@ -261,6 +263,14 @@ export function Token({
       children: label
     }), endContent, removeButton]
   });
+
+  // Naming inputs reach the element that owns the token's action: the inner
+  // button of a clickable token, otherwise the root
+  // (architecture:public-component-api INV5).
+  const labellingProps = {
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy
+  };
   const sharedProps = {
     'data-testid': testId,
     ...(isLabelHidden ? {
@@ -270,7 +280,36 @@ export function Token({
       'aria-description': description
     } : {})
   };
-  if (role === 'link') {
+
+  // A disabled link keeps a focusable link with aria-disabled and no
+  // destination, as a disabled Link does (spec:AST-085 FR1, FR5;
+  // component:Link FR5). useInteractiveRole reports no link role once
+  // disabled, so the structure is chosen here.
+  const isDisabledLink = isDisabled && href != null && effectiveOnClick == null;
+  if (isDisabledLink && onRemove == null) {
+    // A disabled link is an <a> with no href, as Link renders one: nothing can
+    // navigate, it keeps a Tab stop and the link role (spec:AST-085 FR1, FR5).
+    // The router LinkComponent is skipped, since a custom router link may
+    // require a live href.
+    const DisabledAnchor = 'a';
+    return /*#__PURE__*/_jsx(DisabledAnchor, {
+      ref: ref,
+      role: "link",
+      "aria-disabled": true,
+      tabIndex: 0,
+      ...mergeProps(themeProps('token', {
+        color,
+        size,
+        disabled: 'disabled'
+      }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, styles.disabled, xstyle), className, style),
+      ...rest,
+      ...labellingProps,
+      ...disabledInteractionProps(rest.onKeyDown),
+      ...sharedProps,
+      children: content
+    });
+  }
+  if (role === 'link' || isDisabledLink) {
     if (onRemove == null) {
       return /*#__PURE__*/_jsx(LinkComponent, {
         ref: ref,
@@ -278,9 +317,11 @@ export function Token({
         ...pressable,
         ...mergeProps(themeProps('token', {
           color,
-          size
+          size,
+          disabled: isDisabled ? 'disabled' : null
         }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style),
         ...rest,
+        ...labellingProps,
         ...(isDisabled ? {
           'aria-disabled': true
         } : {}),
@@ -321,9 +362,11 @@ export function Token({
       }),
       ...mergeProps(themeProps('token', {
         color,
-        size
+        size,
+        disabled: isDisabled ? 'disabled' : null
       }), focusOutlineProps.focusWithin(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style),
       ...rest,
+      ...labellingProps,
       ...sharedProps
     });
   }
@@ -341,13 +384,15 @@ export function Token({
       ...pressable,
       ...mergeProps(themeProps('token', {
         color,
-        size
+        size,
+        disabled: isDisabled ? 'disabled' : null
       }), focusOutlineProps.focusWithin(styles.base, sizeStyles[size], colorStyles[color], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, xstyle), className, style),
       ...rest,
       ...sharedProps,
       children: [icon, /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: effectiveOnClick,
+        ...labellingProps,
         "aria-disabled": isDisabled || undefined,
         ...(isDisabled ? disabledInteractionProps() : null),
         ...{
@@ -371,9 +416,11 @@ export function Token({
     ref: ref,
     ...mergeProps(themeProps('token', {
       color,
-      size
+      size,
+      disabled: isDisabled ? 'disabled' : null
     }), stylex.props(styles.base, sizeStyles[size], colorStyles[color], isDisabled && styles.disabled, xstyle), className, style),
     ...rest,
+    ...labellingProps,
     ...sharedProps,
     children: content
   });

package/dist/Token/TokenLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenLink.d.ts","sourceRoot":"","sources":["../../src/Token/TokenLink.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,cAAc,EAAC,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IACjE,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,aAAa,EAAE,iBAAiB,CAAC;IACjC,mEAAmE;IACnE,cAAc,EAAE;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IAC5D,wEAAwE;IACxE,YAAY,EAAE,SAAS,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,YAAY,EAAE,SAAS,CAAC;IACxB,kFAAkF;IAClF,CAAC,QAAQ,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,cAAc,EAClB,EAAE,cAAc,+BAmChB;yBAhDe,SAAS"}
+{"version":3,"file":"TokenLink.d.ts","sourceRoot":"","sources":["../../src/Token/TokenLink.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,cAAc,EAAC,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAKrD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IACjE,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,aAAa,EAAE,iBAAiB,CAAC;IACjC,mEAAmE;IACnE,cAAc,EAAE;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IAC5D,wEAAwE;IACxE,YAAY,EAAE,SAAS,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,YAAY,EAAE,SAAS,CAAC;IACxB,kFAAkF;IAClF,CAAC,QAAQ,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,cAAc,EAClB,EAAE,cAAc,+BAgDhB;yBA7De,SAAS"}

package/dist/Token/TokenLink.js

@@ -28,6 +28,7 @@ import { useRef } from 'react';
 import { useClickableContainer } from "../hooks/useClickableContainer.js";
 import { composeEventHandlers } from "../utils/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { disabledInteractionProps } from "../utils/disabledInteraction.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Interactive container for a Token that is both a link and removable.
@@ -67,10 +68,21 @@ export function TokenLink({
     ...containerProps,
     onClick: isDisabled ? onClickProp : composeEventHandlers(onClickProp, onClick),
     onMouseUp: isDisabled ? onMouseUpProp : composeEventHandlers(onMouseUpProp, onMouseUp),
-    children: [icon, /*#__PURE__*/_jsx(LinkComponent, {
+    children: [icon, isDisabled ?
+    /*#__PURE__*/
+    // A disabled link stays a focusable link with no destination, as a
+    // disabled Link does (spec:AST-085 FR1, FR5; component:Link FR5).
+    _jsx("a", {
+      ref: linkRef,
+      role: "link",
+      "aria-disabled": true,
+      tabIndex: 0,
+      ...linkStyleProps,
+      ...disabledInteractionProps(),
+      children: labelContent
+    }) : /*#__PURE__*/_jsx(LinkComponent, {
       ref: linkRef,
       href: href,
-      "aria-disabled": isDisabled || undefined,
       ...linkStyleProps,
       children: labelContent
     }), endContent, removeButton]

package/dist/Tokenizer/Tokenizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}

package/dist/Tokenizer/Tokenizer.js

@@ -23,12 +23,13 @@
  * - /apps/storybook/stories/Tokenizer.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Tokenizer/ (showcase blocks)
  */
-import React, { lazy, Suspense, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { lazy, Suspense, use, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { BusyIndicatorLaneProvider, createBusyIndicatorLane, useIsBusy } from "../Typeahead/busyIndicatorLane.js";
 import { TrailingKeyDownContext } from "../Typeahead/trailingKeyDown.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { TokenizerClearAllMessageContext } from "./TokenizerClearAllMessageContext.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
 import { useIsHydrating } from "../hooks/useIsHydrating.js";
@@ -48,8 +49,11 @@ import { useAnnounce } from "../hooks/useAnnounce.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { composeEventHandlers, mergeProps } from "../utils/index.js";
+import { joinAriaIDs } from "../utils/inputAria.js";
+import { isFocusDetached } from "../utils/focusReturn.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
+import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 
 // Re-export status types for convenience
 
@@ -436,8 +440,13 @@ export function Tokenizer({
   experimental,
   id: idProp,
   'aria-describedby': ariaDescribedByProp,
+  'aria-labelledby': ariaLabelledByProp,
   ...restProps
 }) {
+  const isEffectivelyRequired = useResolvedRequired({
+    isRequired,
+    isOptional
+  });
   const {
     rest,
     container
@@ -456,8 +465,12 @@ export function Tokenizer({
   const size = useSize(sizeProp, 'md');
   const generatedInputId = useId();
   const inputId = idProp ?? generatedInputId;
+  const fieldLabelId = useId();
   const descriptionId = useId();
   const statusMessageId = useId();
+  // A caller aria-labelledby names the input together with the field's own
+  // label, which it would otherwise replace.
+  const fieldLabelledBy = ariaLabelledByProp != null ? joinAriaIDs(fieldLabelId, ariaLabelledByProp) : undefined;
   const inputRef = useRef(null);
   const wrapperRef = useRef(null);
 
@@ -494,14 +507,6 @@ export function Tokenizer({
     sheetQueryRef.current = query;
     onChangeQuery?.(query);
   }, [onChangeQuery]);
-  // Whether the field's control — the inline input or the trigger — holds
-  // focus. Kept in a ref by the focus and blur handlers of both, because a
-  // control unmounted while focused fires no blur: when a presentation swap
-  // removes the focused control (the latch releasing into the popover, or
-  // `adaptive` changing while the sheet is closed), the new presentation's
-  // control takes the focus over once it has mounted, so focus never lands on
-  // the page body (`component:Tokenizer` FR16, `spec:AST-085` FR4).
-  const isControlFocusedRef = useRef(false);
   // Set around a focus move the field makes itself — a presentation swap
   // handing focus from one control to the other — so the receiving control
   // does not report it as focus entering from outside.
@@ -512,35 +517,33 @@ export function Tokenizer({
   // entry, and the one focus the trigger then gets — BottomSheet's return
   // focus — is the entry to report.
   const hasReportedFocusRef = useRef(false);
-  // A control can hold focus without the field having seen a focus event:
-  // the inline input server-rendered with `autofocus` (`hasAutoFocus`) is
-  // focused before hydration, and the swap to the trigger in the first
-  // render after it removes that input. React detaches the old control
-  // before any effect of the swapping commit runs, so the live focus is
-  // read during that render, while the control is still in the document —
-  // a read of `document.activeElement` only, with no update made in render.
-  const previousPresentationRef = useRef(isSheetPresentation);
-  if (previousPresentationRef.current !== isSheetPresentation) {
-    previousPresentationRef.current = isSheetPresentation;
-    if (typeof document !== 'undefined') {
-      const active = document.activeElement;
-      if (active != null && (active === inputRef.current || active === triggerRef.current)) {
-        isControlFocusedRef.current = true;
-      }
-    }
-  }
-  useEffect(() => {
-    if (!isControlFocusedRef.current) {
+  // When a presentation swap removes the focused control (the latch
+  // releasing into the popover, or `adaptive` changing while the sheet is
+  // closed), the new presentation's control takes the focus over, so focus
+  // never lands on the page body (`component:Tokenizer` FR16, `spec:AST-085`
+  // FR4). Both controls' callback refs own the hand-off
+  // (`architecture:react-component-runtime` INV6): the detaching control
+  // notes that it held focus — it is still in the document then, so this also
+  // covers a control focused before hydration (`hasAutoFocus`), which no focus
+  // event reported — and the attaching control takes it.
+  const isFocusPendingHandOffRef = useRef(false);
+  const handOffFocusRef = useCallback(node => {
+    if (node == null) {
       return;
     }
-    const active = document.activeElement;
-    if (active != null && active !== document.body) {
-      return;
+    const takesFocus = isFocusPendingHandOffRef.current;
+    isFocusPendingHandOffRef.current = false;
+    if (takesFocus && isFocusDetached(node.ownerDocument)) {
+      isHandingOffFocusRef.current = true;
+      node.focus();
+      isHandingOffFocusRef.current = false;
     }
-    isHandingOffFocusRef.current = true;
-    (isSheetPresentation ? triggerRef.current : inputRef.current)?.focus();
-    isHandingOffFocusRef.current = false;
-  }, [isSheetPresentation]);
+    return () => {
+      if (node.ownerDocument.activeElement === node) {
+        isFocusPendingHandOffRef.current = true;
+      }
+    };
+  }, []);
   // The trigger's accessible description names the selected tokens: the
   // button's children are tokens whose own content assistive technology
   // leaves out of a button's name (`spec:AST-020` FR1).
@@ -591,10 +594,30 @@ export function Tokenizer({
     focusTrigger: 'always',
     isEnabled: showsDisabledMessage
   });
+  // The inline field's wrapper holds every control a swap removes with the
+  // input — a token's Remove button, the inline Clear all — so it notes focus
+  // anywhere inside it for the hand-off above. It also anchors the
+  // disabled-message tooltip, whose handlers are gated internally by
+  // isEnabled, so attaching unconditionally is safe.
+  const tooltipAnchorRef = disabledMessageTooltip.ref;
+  const wrapperCallbackRef = useCallback(el => {
+    wrapperRef.current = el;
+    tooltipAnchorRef(el);
+    if (el == null) {
+      return;
+    }
+    return () => {
+      if (el.contains(el.ownerDocument.activeElement)) {
+        isFocusPendingHandOffRef.current = true;
+      }
+      wrapperRef.current = null;
+      tooltipAnchorRef(null);
+    };
+  }, [tooltipAnchorRef]);
 
   // The sheet presentation has no input; the public ref reaches the trigger,
   // the control it stands for (`family:input-fields` FR10).
-  const triggerMergedRef = useMergedRefs(triggerRef, ref, disabledMessageTooltip.ref);
+  const triggerMergedRef = useMergedRefs(triggerRef, ref, disabledMessageTooltip.ref, handOffFocusRef);
   useImperativeHandle(handleRef, () => ({
     focus() {
       (isSheetPresentation ? triggerRef : inputRef).current?.focus();
@@ -666,7 +689,6 @@ export function Tokenizer({
       layer.show();
     }
     if (comingFromOutside) {
-      isControlFocusedRef.current = true;
       if (!isHandingOffFocusRef.current) {
         hasReportedFocusRef.current = true;
         onFocus?.(e);
@@ -680,8 +702,9 @@ export function Tokenizer({
   }, [isLayerMode, layer, isFocusInTokenizer, onFocus]);
   const handleBlurCapture = useCallback(e => {
     if (!isFocusInTokenizer(e.relatedTarget)) {
-      isControlFocusedRef.current = false;
       hasReportedFocusRef.current = false;
+      // Focus left the field: no hand-off is owed any more.
+      isFocusPendingHandOffRef.current = false;
       setIsFocusedWithin(false);
       onBlur?.(e);
       if (isLayerMode) {
@@ -732,12 +755,14 @@ export function Tokenizer({
     }
     return [{
       id: `${CREATABLE_ID_PREFIX}${trimmed}`,
-      label: `Create "${trimmed}"`,
+      label: t('@astryx.tokenizer.create', {
+        value: trimmed
+      }),
       auxiliaryData: {
         __createdValue: trimmed
       }
     }];
-  }, [hasCreate, selectedIds, selectedLabels]);
+  }, [hasCreate, selectedIds, selectedLabels, t]);
   const emptySource = useMemo(() => ({
     search: async () => [],
     bootstrap: async () => []
@@ -824,7 +849,10 @@ export function Tokenizer({
   }, [value, onChange, isDisabled, announce, t]);
 
   // Handle clearing all items
-  const handleClearAll = useCallback(() => {
+  // A composing component that words its own Clear all (PowerSearch) provides
+  // its words; otherwise the field's own (component:Tokenizer AR7).
+  const clearAllMessage = use(TokenizerClearAllMessageContext) ?? t('@astryx.tokenizer.allRemoved');
+  const handleClearAll = useCallback(options => {
     if (isDisabled || value.length === 0) {
       return;
     }
@@ -834,8 +862,13 @@ export function Tokenizer({
       item: lastItem,
       type: 'remove'
     });
+    // Focus moves to the input, so the emptied selection is announced, in
+    // the sheet's words (WCAG 4.1.3). The sheet announces its own Clear all.
+    if (!options?.silent) {
+      announce(clearAllMessage);
+    }
     inputRef.current?.focus();
-  }, [value, onChange, isDisabled]);
+  }, [value, onChange, isDisabled, announce, clearAllMessage]);
 
   // Handle backspace on empty input — remove last token
   const handleKeyDown = useCallback(e => {
@@ -893,13 +926,7 @@ export function Tokenizer({
     left: 'anchor(start)'
   };
   const wrapperContent = /*#__PURE__*/_jsxs("div", {
-    ref: el => {
-      wrapperRef.current = el;
-      // Anchor + hover/focus listeners for the disabled-message tooltip.
-      // Handlers are gated internally by isEnabled, so attaching
-      // unconditionally is safe.
-      disabledMessageTooltip.ref(el);
-    },
+    ref: wrapperCallbackRef,
     role: "group",
     "aria-label": label,
     onClick: handleWrapperClick,
@@ -949,7 +976,7 @@ export function Tokenizer({
           ref: useMergedRefs(inputRef,
           // With `experimental`, the ref type admits the trigger too; in
           // this presentation it receives the input.
-          ref),
+          ref, handOffFocusRef),
           searchSource: isAtMax ? emptySource : filteredSource,
           value: null,
           onChange: handleAdd,
@@ -967,8 +994,19 @@ export function Tokenizer({
           isFocusableDisabled: showsDisabledMessage,
           hasAutoFocus: hasAutoFocus,
           inputId: inputId,
+          ariaLabelledBy: fieldLabelledBy,
           ariaDescribedBy: [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
-          onChangeQuery: onChangeQuery,
+          onChangeQuery: onChangeQuery
+          // The resolved required state reaches the combobox, also when a
+          // FormLayout default hides the visible marker (component:FormLayout
+          // FR5, AR2).
+          ,
+          "aria-required": isEffectivelyRequired || rest['aria-required']
+          // An error status is exposed on the combobox as on every other field
+          // (WCAG 4.1.2; spec:AST-020 FR9). Without one, a caller's own
+          // aria-required / aria-invalid still applies.
+          ,
+          "aria-invalid": status?.type === 'error' || rest['aria-invalid'],
           __queryEntries: createEntries,
           debounceMs: debounceMs,
           onKeyDown: handleKeyDown,
@@ -1014,6 +1052,7 @@ export function Tokenizer({
         ref: triggerMergedRef,
         type: "button",
         id: inputId,
+        "aria-labelledby": fieldLabelledBy,
         "aria-haspopup": "dialog",
         "aria-expanded": isSheetOpen,
         "aria-disabled": isDisabled || undefined
@@ -1045,7 +1084,6 @@ export function Tokenizer({
         // trigger button, and the handler only reads the event.
         callerOnClick),
         onFocus: event => {
-          isControlFocusedRef.current = true;
           // BottomSheet focuses the trigger only after its exit completes;
           // that focus is the signal that the retained sheet can leave. If
           // the resolution moved to the popover meanwhile, the inline input
@@ -1072,8 +1110,8 @@ export function Tokenizer({
           if (isSheetOpen) {
             return;
           }
-          isControlFocusedRef.current = false;
           hasReportedFocusRef.current = false;
+          isFocusPendingHandOffRef.current = false;
           onBlur?.(event);
         },
         onKeyDown: onKeyDown,
@@ -1139,7 +1177,9 @@ export function Tokenizer({
         emptySearchText: emptySearchText,
         onAdd: handleAdd,
         onRemove: handleRemove,
-        onClearAll: handleClearAll,
+        onClearAll: () => handleClearAll({
+          silent: true
+        }),
         onChangeQuery: handleSheetQueryChange
       })]
     });
@@ -1190,6 +1230,7 @@ export function Tokenizer({
     isLabelHidden: isLabelHidden,
     description: description,
     inputID: inputId,
+    labelID: ariaLabelledByProp != null ? fieldLabelId : undefined,
     descriptionID: description ? descriptionId : undefined,
     isOptional: isOptional,
     isRequired: isRequired,

package/dist/Tokenizer/TokenizerBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenizerBottomSheet.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/TokenizerBottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAC;AASrE,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAyHzC,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,cAAc;IACjE,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kEAAkE;IAClE,aAAa,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,eAAe,EAAE,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE;QAAC,MAAM,EAAE,IAAI,CAAA;KAAC,KAAK,OAAO,CAAC;IACrD,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE;QAAC,MAAM,EAAE,IAAI,CAAA;KAAC,KAAK,OAAO,CAAC;IACxD,kCAAkC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;;;;;GAOG;AACH;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,cAAc,EAAE,EAC7D,MAAM,EACN,YAAY,EACZ,aAAa,EACb,KAAK,EACL,GAAG,OAAO,EACX,EAAE,yBAAyB,CAAC,CAAC,CAAC,+BAgC9B;yBAtCe,oBAAoB"}
+{"version":3,"file":"TokenizerBottomSheet.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/TokenizerBottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAC;AASrE,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAyHzC,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,cAAc;IACjE,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kEAAkE;IAClE,aAAa,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,eAAe,EAAE,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE;QAAC,MAAM,EAAE,IAAI,CAAA;KAAC,KAAK,OAAO,CAAC;IACrD,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE;QAAC,MAAM,EAAE,IAAI,CAAA;KAAC,KAAK,OAAO,CAAC;IACxD,kCAAkC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;;;;;GAOG;AACH;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,cAAc,EAAE,EAC7D,MAAM,EACN,YAAY,EACZ,aAAa,EACb,KAAK,EACL,GAAG,OAAO,EACX,EAAE,yBAAyB,CAAC,CAAC,CAAC,+BAgC9B;yBAtCe,oBAAoB"}

package/dist/Tokenizer/TokenizerBottomSheet.js

@@ -26,21 +26,22 @@
  * - /packages/core/src/Tokenizer/Tokenizer.spec.md (FR16–FR24, AR6, PR6)
  */
 import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
 import { AlertDialog } from "../AlertDialog/AlertDialog.js";
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
 import { Button } from "../Button/Button.js";
 import { EmptyState } from "../EmptyState/EmptyState.js";
 import { PanelSearchInput } from "../Field/PanelSearchInput.js";
-import { Icon } from "../Icon/index.js";
+import { Icon } from "../Icon/Icon.js";
 import { CheckboxIndicator } from "../Indicator/CheckboxIndicator.js";
-import { Spinner } from "../Spinner/index.js";
+import { Spinner } from "../Spinner/Spinner.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
 import { Text } from "../Text/Text.js";
-import { useTranslator } from "../i18n/index.js";
+import { useTranslator } from "../i18n/useTranslator.js";
 import { warnOnce } from "../utils/devWarning.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
@@ -176,8 +177,9 @@ function TokenizerSheetContent({
   // trigger's press — so an open sheet with no confirmation pending carries
   // no closed dialog (`architecture:component-style-authoring` INV7). Dialog
   // has an entrance animation and no exit, so a close is its unmount; the
-  // sheet then places focus itself, in the Effect below, once the modal is
-  // gone and the sheet's content can take focus again: on the search field
+  // close handler commits that unmount at once and then places focus itself,
+  // now that the modal is gone and the sheet's content can take focus again
+  // (`architecture:react-component-runtime` INV2): on the search field
   // after a confirmed clear — the clear is spent, and the search field is
   // where the next selection starts (FR24, `spec:AST-085` FR4) — and back on
   // Clear all after a cancel. A confirmed clear is announced there too — a
@@ -189,25 +191,17 @@ function TokenizerSheetContent({
   // dialog, so FR14 routes the words into it while the sheet is open.
   const [isClearConfirmationOpen, setIsClearConfirmationOpen] = useState(false);
   const clearAllRef = useRef(null);
-  const afterConfirmationRef = useRef(null);
   const announce = useAnnounce();
   const closeClearConfirmation = confirmed => {
-    afterConfirmationRef.current = confirmed ? 'search' : 'clear-all';
-    setIsClearConfirmationOpen(false);
-  };
-  useEffect(() => {
-    if (isClearConfirmationOpen || afterConfirmationRef.current == null) {
-      return;
-    }
-    const destination = afterConfirmationRef.current;
-    afterConfirmationRef.current = null;
-    if (destination === 'search') {
+    // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the confirmation must be gone before focus moves into the sheet and the words are routed into it
+    flushSync(() => setIsClearConfirmationOpen(false));
+    if (confirmed) {
       searchRef.current?.focus();
       announce(t('@astryx.tokenizer.allRemoved'));
     } else {
       clearAllRef.current?.focus();
     }
-  }, [announce, isClearConfirmationOpen, t]);
+  };
   const selectedIds = useMemo(() => new Set(value.map(v => v.id)), [value]);
 
   // ---- sheet session ----

package/dist/Tokenizer/TokenizerClearAllMessageContext.d.ts

@@ -0,0 +1,2 @@
+export declare const TokenizerClearAllMessageContext: import("react").Context<string | null>;
+//# sourceMappingURL=TokenizerClearAllMessageContext.d.ts.map

package/dist/Tokenizer/TokenizerClearAllMessageContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizerClearAllMessageContext.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/TokenizerClearAllMessageContext.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,+BAA+B,wCAE3C,CAAC"}

package/dist/Tokenizer/TokenizerClearAllMessageContext.js

@@ -0,0 +1,17 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TokenizerClearAllMessageContext.ts
+ * @input None
+ * @output A context carrying the words a composing component announces for
+ *   the field's Clear all
+ * @position Internal to Core: not exported from the Tokenizer barrel. A
+ *   component that composes Tokenizer and words its own Clear all (PowerSearch:
+ *   "All filters removed") provides it; Tokenizer otherwise announces its own
+ *   words (component:Tokenizer AR7).
+ */
+import { createContext } from 'react';
+export const TokenizerClearAllMessageContext = /*#__PURE__*/createContext(null);
+TokenizerClearAllMessageContext.displayName = 'TokenizerClearAllMessageContext';