@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

package/src/Timestamp/tooltipEntries.ts

@@ -2,7 +2,7 @@
 
 /**
  * @file tooltipEntries.ts
- * @input A Date and the consumer's tooltip entry list
+ * @input A Date, the consumer's tooltip entry list, a locale and a calendar
  * @output Pure formatting of one tooltip line per entry, plus the entry types
  * @position Leaf module; owns which zone each tooltip line names and whether
  *   it needs a zone abbreviation, then defers to formatInstant to render it
@@ -25,6 +25,7 @@ import {devWarn} from '../utils/devWarning';
 import {formatInstant} from './formatInstant';
 import type {InstantFormat} from './formatInstant';
 import type {Locale} from '../i18n/types';
+import type {CalendarSystem} from '../utils/calendarSystem';
 
 // =============================================================================
 // Types
@@ -197,15 +198,17 @@ function shouldShowZoneName(
 }
 
 /**
- * Renders one tooltip line per entry, in the order given.
+ * Renders one tooltip line per entry, in the order given, with dates in
+ * `calendar`.
  *
  * Pure: the same `date` and `entries` always produce the same lines for a given
- * host zone and locale.
+ * host zone, locale, and calendar.
  */
 export function formatTooltipLines(
   date: Date,
   entries: ReadonlyArray<TimestampTooltipEntry>,
   locale: Locale,
+  calendar: CalendarSystem = 'gregory',
 ): ReadonlyArray<TimestampTooltipLine> {
   const resolved = entries.map(entry => resolveTimezoneID(entry.timezoneID));
   const hasMultipleZones = new Set(resolved.map(zoneKey)).size > 1;
@@ -219,6 +222,7 @@ export function formatTooltipLines(
       isCopyable: entry.isCopyable ?? false,
       value: formatInstant(date, format, locale, {
         timeZone,
+        calendar,
         isTimezoneShown: shouldShowZoneName(
           format,
           hasMultipleZones,

package/src/Token/Token.tsx

@@ -39,6 +39,7 @@ import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
+import {cancelNestedTouchPress} from '../hooks/useClickableContainer';
 import type {TokenColorMap} from './index';
 import {disabledInteractionProps} from '../utils/disabledInteraction';
 import {TokenNamingContext} from './TokenNamingContext';
@@ -510,6 +511,19 @@ export function Token({
       }
       effectiveOnClick(e);
     };
+    // A finger press on Remove or a control in end content does not run the
+    // token's action, so the token shows no press for it. The inner button,
+    // the first button child, is the token's own action.
+    const handleContainerPointerDown = (
+      e: React.PointerEvent<HTMLSpanElement>,
+    ) => {
+      rest.onPointerDown?.(e);
+      cancelNestedTouchPress(
+        e,
+        e.currentTarget,
+        e.currentTarget.querySelector(':scope > button'),
+      );
+    };
 
     return (
       <span
@@ -535,7 +549,10 @@ export function Token({
           style,
         )}
         {...rest}
-        {...sharedProps}>
+        {...sharedProps}
+        onPointerDown={
+          isDisabled ? rest.onPointerDown : handleContainerPointerDown
+        }>
         {icon}
         <button
           type="button"

package/src/Token/TokenLink.tsx

@@ -90,12 +90,13 @@ export function TokenLink({
   removeButton,
   onClick: onClickProp,
   onMouseUp: onMouseUpProp,
+  onPointerDown: onPointerDownProp,
   ...containerProps
 }: TokenLinkProps) {
   const containerRef = useRef<HTMLElement | null>(null);
   const linkRef = useRef<HTMLElement | null>(null);
 
-  const {onClick, onMouseUp} = useClickableContainer({
+  const {onClick, onMouseUp, onPointerDown} = useClickableContainer({
     containerRef,
     interactiveRef: linkRef,
     href,
@@ -113,6 +114,11 @@ export function TokenLink({
         isDisabled
           ? onMouseUpProp
           : composeEventHandlers(onMouseUpProp, onMouseUp)
+      }
+      onPointerDown={
+        isDisabled
+          ? onPointerDownProp
+          : composeEventHandlers(onPointerDownProp, onPointerDown)
       }>
       {icon}
       {isDisabled ? (

package/src/Tokenizer/Tokenizer.doc.mjs

@@ -296,7 +296,7 @@ export const docs = {
       name: 'presentation',
       type: "'popover' | 'bottom-sheet' | 'adaptive'",
       description:
-        'How the field presents its choices. adaptive (the default) uses the bottom sheet on compact touch screens and the popover otherwise, resolved the same way Selector resolves it; the server render and the hydrating render are the popover. popover is the inline combobox with its anchored suggestion menu on every device. bottom-sheet replaces it on every device with a trigger showing the selected tokens that opens one tall modal sheet: a search row on top, full-width checkbox rows that keep their place while the sheet is open, a Create row with hasCreate, and a footer pinned in every state with a confirmed Clear all and Save; the sheet edits a draft, so onChange fires once, when Save commits it, and a swipe, scrim or Escape close of a changed draft asks before discarding. In the sheet presentation the trigger is the control: ref, id, aria-* and data-* reach it, and ref receives the trigger button there, so type it Ref<HTMLInputElement | HTMLButtonElement>, which the component accepts (TokenizerProps keeps its released input ref type). renderItem, renderToken, endContent, hasClear, hasEntriesOnFocus, menuWidth, tokenOverflowBehavior and hasAutoFocus have no surface in the sheet, and the field warns once in development when they are passed. Pass presentation="popover" to keep the inline field and those props on every device.',
+        'How the field presents its choices. adaptive (the default) uses the bottom sheet on compact touch screens and the popover otherwise, resolved the same way Selector resolves it; the server render and the hydrating render are the popover. popover is the inline combobox with its anchored suggestion menu on every device. bottom-sheet replaces it on every device with a field showing the selected tokens, whose trigger opens one tall modal sheet: a search row on top, full-width checkbox rows that keep their place while the sheet is open, a Create row with hasCreate, and a footer pinned in every state with a confirmed Clear all and Save; the sheet edits a draft, so onChange fires once, when Save commits it, and a swipe, scrim or Escape close of a changed draft asks before discarding. In the sheet presentation the field box holds the trigger, the tokens and endContent, and keeps the box, theming target and focus ring of the inline field; the trigger is the control: ref, id, aria-* and data-* reach it, and ref receives the trigger button there, so type it Ref<HTMLInputElement | HTMLButtonElement>, which the component accepts (TokenizerProps keeps its released input ref type). endContent sits at the inline end of the field and renderToken renders its tokens, as in the inline field; their own controls act without opening the sheet. renderItem, hasClear (the sheet has its own Clear all), hasEntriesOnFocus, menuWidth, tokenOverflowBehavior (the field wraps its tokens) and hasAutoFocus have no surface in the sheet, and the field warns once in development when they are passed. Pass presentation="popover" to keep the inline field and those props on every device.',
       default: "'adaptive'",
     },
   ],
@@ -642,7 +642,7 @@ export const docsZh = {
       name: 'presentation',
       type: "'popover' | 'bottom-sheet' | 'adaptive'",
       description:
-        '字段如何呈现选项。adaptive（默认）在紧凑触摸屏上使用底部面板，其他情况使用 popover，解析方式与 Selector 相同；服务端渲染和水合期间的渲染均为 popover。popover 在所有设备上为内联组合框及其锚定建议菜单。bottom-sheet 在所有设备上改为一个显示已选标记的触发按钮，点按后打开一个高的模态底部面板——顶部为搜索行，下方为整行复选框行（面板打开期间位置保持不变），hasCreate 时有「创建」行，底部固定显示需确认的「全部清除」和「保存」；面板编辑的是草稿，onChange 仅在「保存」提交时触发一次，草稿有改动时滑动、点击遮罩或按 Escape 关闭会先询问是否放弃。在底部面板呈现中，触发按钮即为控件：ref、id、aria-* 和 data-* 都作用于它，ref 在该呈现中收到的是触发按钮，因此请将其类型声明为组件所接受的 Ref<HTMLInputElement | HTMLButtonElement>（TokenizerProps 保留已发布的输入框 ref 类型）。renderItem、renderToken、endContent、hasClear、hasEntriesOnFocus、menuWidth、tokenOverflowBehavior 和 hasAutoFocus 在底部面板中没有作用对象，传入时开发模式下会警告一次。传入 presentation="popover" 可在所有设备上保留内联字段和这些属性。',
+        '字段如何呈现选项。adaptive（默认）在紧凑触摸屏上使用底部面板，其他情况使用 popover，解析方式与 Selector 相同；服务端渲染和水合期间的渲染均为 popover。popover 在所有设备上为内联组合框及其锚定建议菜单。bottom-sheet 在所有设备上改为一个显示已选标记的字段，点按其中的触发按钮后打开一个高的模态底部面板——顶部为搜索行，下方为整行复选框行（面板打开期间位置保持不变），hasCreate 时有「创建」行，底部固定显示需确认的「全部清除」和「保存」；面板编辑的是草稿，onChange 仅在「保存」提交时触发一次，草稿有改动时滑动、点击遮罩或按 Escape 关闭会先询问是否放弃。在底部面板呈现中，字段框包含触发按钮、标记和 endContent，并保留内联字段的外框、主题目标和焦点环；触发按钮即为控件：ref、id、aria-* 和 data-* 都作用于它，ref 在该呈现中收到的是触发按钮，因此请将其类型声明为组件所接受的 Ref<HTMLInputElement | HTMLButtonElement>（TokenizerProps 保留已发布的输入框 ref 类型）。endContent 位于字段的行内末端，renderToken 渲染字段中的标记，与内联字段相同；其中的控件可直接操作，不会打开底部面板。renderItem、hasClear（底部面板自带“全部清除”）、hasEntriesOnFocus、menuWidth、tokenOverflowBehavior（字段会换行显示标记）和 hasAutoFocus 在底部面板中没有作用对象，传入时开发模式下会警告一次。传入 presentation="popover" 可在所有设备上保留内联字段和这些属性。',
       default: "'adaptive'",
     },
   ],
@@ -845,6 +845,6 @@ export const docsDense = {
     endContent: 'Content at input row end. For buttons, counts, controls.',
     handleRef: 'Imperative handle for focus() and blur() control.',
     presentation:
-      "'adaptive' (default: sheet on compact touch, else popover; SSR/hydration render popover) | 'popover' (inline combobox, every device) | 'bottom-sheet' (trigger + one searchable modal sheet of checkbox rows editing a draft that Save commits; onChange fires once, on Save). Sheet: ref reaches the trigger button; renderItem/renderToken/endContent/hasClear/hasEntriesOnFocus/menuWidth/tokenOverflowBehavior/hasAutoFocus inert (dev warning). presentation=\"popover\" keeps them on every device.",
+      "'adaptive' (default: sheet on compact touch, else popover; SSR/hydration render popover) | 'popover' (inline combobox, every device) | 'bottom-sheet' (field box with trigger + one searchable modal sheet of checkbox rows editing a draft that Save commits; onChange fires once, on Save). Sheet: field box keeps the inline box, theming target and focus ring; ref reaches the trigger button; endContent (field end) and renderToken (field tokens) work as inline; renderItem/hasClear/hasEntriesOnFocus/menuWidth/tokenOverflowBehavior/hasAutoFocus inert (dev warning). presentation=\"popover\" keeps them on every device.",
   },
 };

package/src/Tokenizer/Tokenizer.tsx

@@ -8,8 +8,8 @@
  *   useAdaptivePresentation, and TokenizerBottomSheet (lazy)
  * @output Exports Tokenizer multi-select typeahead component
  * @position Composed component; forwards DOM ref and exposes focus control via
- *   handleRef. The `presentation` prop swaps the inline combobox for a
- *   trigger that opens TokenizerBottomSheet.
+ *   handleRef. The `presentation` prop swaps the inline combobox for a field
+ *   box whose trigger opens TokenizerBottomSheet.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/index.ts
@@ -48,6 +48,7 @@ import {
 } from '../Field/fieldParts';
 import {inputDisabledFocusStyles} from '../Field/inputDisabledFocus';
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {hasInteractiveAncestor} from '../hooks/useClickableContainer';
 import {TokenizerClearAllMessageContext} from './TokenizerClearAllMessageContext';
 import {TokenizerItemRemovableContext} from './TokenizerItemRemovableContext';
 import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
@@ -303,8 +304,8 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
    * How the field presents its choices.
    * - `'popover'`: the inline combobox with its anchored suggestion menu, on
    *   every device.
-   * - `'bottom-sheet'`: a trigger showing the selected tokens that opens one
-   *   tall modal sheet: a search row on top, full-width checkbox rows that
+   * - `'bottom-sheet'`: a field showing the selected tokens, whose trigger
+   *   opens one tall modal sheet: a search row on top, full-width checkbox rows that
    *   keep their place while the sheet is open, a create row with
    *   `hasCreate`, and a footer pinned in every state with a confirmed Clear
    *   all and Save. The sheet edits a draft: `onChange` fires once, when Save
@@ -315,12 +316,16 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
    *   otherwise the popover — the same resolution Selector uses. The server
    *   render and the hydrating render are the popover.
    *
-   * In the sheet presentation the trigger is the control: `ref`, `id`,
-   * `aria-*`, and `data-*` reach it. `renderItem`, `renderToken`,
-   * `endContent`, `hasClear`, `hasEntriesOnFocus`, `menuWidth`,
-   * `tokenOverflowBehavior`, and `hasAutoFocus` have no surface to act on
-   * and warn once in development. Pass `'popover'` to keep the inline field
-   * and those props on every device.
+   * In the sheet presentation the field's box keeps the inline field's box,
+   * theming target and focus ring, and holds the trigger, the tokens and
+   * `endContent`. The trigger is the control: `ref`, `id`, `aria-*`, and
+   * `data-*` reach it. `endContent` renders at the field's
+   * inline end and `renderToken` renders the field's tokens, as in the inline
+   * field. `renderItem`, `hasClear` (the sheet has its own Clear all),
+   * `hasEntriesOnFocus`, `menuWidth`, `tokenOverflowBehavior` (the field
+   * wraps its tokens), and `hasAutoFocus` have no surface to act on and warn
+   * once in development. Pass `'popover'` to keep the inline field and those
+   * props on every device.
    * @default 'adaptive'
    */
   presentation?: TokenizerPresentation;
@@ -487,20 +492,52 @@ const styles = stylex.create({
     color: colorVars['--color-text-secondary'],
     paddingInline: spacingVars['--spacing-1'],
   },
-  // The sheet presentation's trigger: the field's own control box, as a
-  // button. It wraps tokens like the inline field, but there is no input to
-  // type into, so the cursor says "press".
-  sheetTrigger: {
+  // The sheet presentation's field: the inline field's own control box. A
+  // button cannot contain controls, so the trigger, the tokens and the end lane
+  // are siblings in this box. `endContent` and a custom token can then hold their
+  // own controls. There is no input to type into, so the cursor says "press".
+  sheetField: {
     width: '100%',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+  },
+  // The box carries no aria-disabled: that would expose a caller's operable
+  // `endContent` as disabled. The trigger carries it, so the box keys its
+  // disabled cursor on the prop.
+  sheetFieldDisabled: {
+    cursor: 'default',
+  },
+  // With tokens, the button covers the box beneath them. A tap on a token or
+  // on empty space then opens the sheet. The box draws the focus ring, so the
+  // button draws none.
+  sheetTrigger: {
+    appearance: 'none',
+    flexGrow: 1,
+    alignSelf: 'stretch',
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
     fontFamily: 'inherit',
     fontSize: 'inherit',
+    lineHeight: 'inherit',
     color: 'inherit',
     textAlign: 'start',
-    appearance: 'none',
     cursor: {
       default: 'pointer',
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
+    outline: 'none',
+  },
+  sheetTriggerWithTokens: {
+    position: 'absolute',
+    inset: 0,
   },
   // An aria-disabled button gets no system disabled paint in forced colors;
   // GrayText is the platform's disabled affordance there. Defaults repeat the
@@ -906,8 +943,6 @@ export function Tokenizer<T extends SearchableItem>({
     ? (
         [
           ['renderItem', renderItem],
-          ['renderToken', renderToken],
-          ['endContent', endContent],
           ['hasClear', hasClear || undefined],
           ['hasEntriesOnFocus', hasEntriesOnFocus || undefined],
           ['menuWidth', menuWidth],
@@ -989,12 +1024,32 @@ export function Tokenizer<T extends SearchableItem>({
     [tooltipAnchorRef],
   );
 
+  // A swap also removes `endContent` and a custom token's remove. If focus is
+  // in the box when it detaches, the new control takes it. The box also anchors
+  // the disabled-message tooltip.
+  const sheetFieldCallbackRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      tooltipAnchorRef(el);
+      if (el == null) {
+        return;
+      }
+      return () => {
+        if (el.contains(el.ownerDocument.activeElement)) {
+          isFocusPendingHandOffRef.current = true;
+        }
+        tooltipAnchorRef(null);
+      };
+    },
+    [tooltipAnchorRef],
+  );
+
   // The sheet presentation has no input; the public ref reaches the trigger,
-  // the control it stands for (`family:input-fields` FR10).
+  // the control it stands for (`family:input-fields` FR10). The
+  // disabled-message tooltip anchors to the field box around it, as it
+  // anchors to the inline field's wrapper.
   const triggerMergedRef = useMergedRefs<HTMLButtonElement>(
     triggerRef,
     ref as React.Ref<HTMLButtonElement> | undefined,
-    disabledMessageTooltip.ref,
     handOffFocusRef,
   );
 
@@ -1019,6 +1074,14 @@ export function Tokenizer<T extends SearchableItem>({
   // `endContent`, a clear button, or all three — so its width is measured
   // rather than assumed, and the input reserves it.
   const [laneRef, laneReserve] = useEndLaneReserve(END_LANE_INSET);
+  // `laneRef` publishes the lane's width, so token rows and the placeholder
+  // stop short of it. `sheetLaneRef` tells a tap in the lane from a tap on the
+  // field.
+  const sheetLaneRef = useRef<HTMLDivElement | null>(null);
+  const sheetLaneMergedRef = useMergedRefs<HTMLDivElement>(
+    laneRef,
+    sheetLaneRef,
+  );
   // A composing component can lock tokens (PowerSearch's read-only filters
   // and read-only field). No remove path removes a locked token.
   const isItemRemovable = use(TokenizerItemRemovableContext);
@@ -1556,92 +1619,91 @@ export function Tokenizer<T extends SearchableItem>({
     </div>
   );
 
+  // A `renderToken` token's own remove control in the sheet field removes at
+  // once, as it does in the inline field. Its control leaves with it, so
+  // focus moves to the trigger.
+  const handleSheetTokenRemove = (item: T) => {
+    if (handleRemove(item)) {
+      triggerRef.current?.focus();
+    }
+  };
+  // A tap on a token, the placeholder or empty space opens the sheet, as a tap
+  // on the trigger does. The trigger, `endContent` and a custom token's
+  // controls handle their own clicks.
+  const handleSheetFieldClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    const trigger = triggerRef.current;
+    const target = event.target;
+    if (trigger == null || !(target instanceof Element)) {
+      return;
+    }
+    if (
+      trigger.contains(target) ||
+      sheetLaneRef.current?.contains(target) ||
+      hasInteractiveAncestor(target, event.currentTarget)
+    ) {
+      return;
+    }
+    trigger.click();
+  };
+
+  // The caller's onFocus and onBlur report focus entering and leaving the whole
+  // box, as for the inline wrapper. A move between the trigger, `endContent`
+  // and a custom token's controls stays inside the field.
+  const handleSheetFieldFocus = (event: React.FocusEvent<HTMLDivElement>) => {
+    // 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 takes the
+    // focus over once it mounts.
+    const isReturningFromSheet =
+      (event.target as EventTarget) === triggerRef.current &&
+      !isSheetOpen &&
+      isSheetPresented;
+    if (isReturningFromSheet) {
+      setIsSheetPresented(false);
+    }
+    const relatedTarget = event.relatedTarget;
+    if (
+      relatedTarget instanceof Node &&
+      event.currentTarget.contains(relatedTarget)
+    ) {
+      return;
+    }
+    // Focus that returns from the field's own sheet, or that a presentation swap
+    // hands over, does not enter from outside. The caller's onFocus stays quiet
+    // for it (`family:input-fields` FR10).
+    const isInsideTheField =
+      (isReturningFromSheet && hasReportedFocusRef.current) ||
+      isHandingOffFocusRef.current;
+    if (!isInsideTheField) {
+      hasReportedFocusRef.current = true;
+      onFocus?.(event);
+    }
+  };
+  const handleSheetFieldBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+    // Focus moving into the sheet, or to another control in the box, is
+    // still the field's. Only a blur to somewhere else reports.
+    const relatedTarget = event.relatedTarget;
+    if (
+      isSheetOpen ||
+      (relatedTarget instanceof Node &&
+        event.currentTarget.contains(relatedTarget))
+    ) {
+      return;
+    }
+    hasReportedFocusRef.current = false;
+    isFocusPendingHandOffRef.current = false;
+    onBlur?.(event);
+  };
+
   let tokenizerContent: ReactNode;
   if (isSheetPresentation) {
     tokenizerContent = (
       <>
-        <button
-          // The field-level pass-through props (`data-*`, `aria-*`) were typed
-          // for the inline input; here the control is a button.
-          {...(restWithoutClick as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-          ref={triggerMergedRef}
-          type="button"
-          id={inputId}
-          aria-labelledby={fieldLabelledBy}
-          aria-haspopup="dialog"
-          aria-expanded={isSheetOpen}
-          aria-disabled={isDisabled || undefined}
-          // The description is what the inline input's is, in its order —
-          // the caller's ids, the field description, the status message, the
-          // disabled reason (`spec:AST-085` FR5: a disabled control exposes
-          // its description and reason on itself) — then the hidden count and
-          // the rendered tokens themselves, each by id: the
-          // accessible-description algorithm reads the referenced elements in
-          // order and separates them, so every label renders once
-          // (`architecture:component-style-authoring` INV7) and no locale's
-          // list punctuation is written here (AR6).
-          aria-describedby={
-            [
-              ariaDescribedByProp,
-              ariaDescribedBy,
-              value.length > 0 ? triggerTokensId : null,
-              ...value.map(item => tokenElementId(item.id)),
-            ]
-              .filter(Boolean)
-              .join(' ') || undefined
-          }
-          // The open runs first and the caller's onClick after it, as the
-          // inline input composes its click: a caller observes the click but
-          // cannot cancel the field's own handling
-          // (`family:input-fields` FR10).
-          onClick={composeEventHandlers<React.MouseEvent<HTMLButtonElement>>(
-            () => {
-              if (isDisabled) {
-                return;
-              }
-              setIsSheetPresented(true);
-              setSheetInitialQuery(sheetQueryRef.current);
-              setIsSheetOpen(true);
-            },
-            // Typed for the input by the base props; here the control is the
-            // trigger button, and the handler only reads the event.
-            callerOnClick as unknown as
-              React.MouseEventHandler<HTMLButtonElement> | undefined,
-          )}
-          onFocus={event => {
-            // 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
-            // takes the focus over once it mounts. The field's own sheet is
-            // part of the field: focus coming back from it, or handed over by
-            // a presentation swap, is not focus entering from outside, so the
-            // caller's onFocus — "when focus enters the tokenizer from
-            // outside" — stays quiet for it (`family:input-fields` FR10).
-            const isReturningFromSheet = !isSheetOpen && isSheetPresented;
-            if (isReturningFromSheet) {
-              setIsSheetPresented(false);
-            }
-            const isInsideTheField =
-              (isReturningFromSheet && hasReportedFocusRef.current) ||
-              isHandingOffFocusRef.current;
-            if (!isInsideTheField) {
-              hasReportedFocusRef.current = true;
-              onFocus?.(event);
-            }
-          }}
-          onBlur={event => {
-            // Focus moving into the sheet is still the field's: the flag
-            // stays, and the caller's onBlur — "when focus leaves the
-            // tokenizer entirely" — stays quiet. Only a blur to somewhere
-            // else reports.
-            if (isSheetOpen) {
-              return;
-            }
-            hasReportedFocusRef.current = false;
-            isFocusPendingHandOffRef.current = false;
-            onBlur?.(event);
-          }}
-          onKeyDown={onKeyDown}
+        <div
+          ref={sheetFieldCallbackRef}
+          onClick={handleSheetFieldClick}
+          onFocus={handleSheetFieldFocus}
+          onBlur={handleSheetFieldBlur}
           {...mergeProps(
             themeProps('tokenizer', {
               size,
@@ -1651,8 +1713,9 @@ export function Tokenizer<T extends SearchableItem>({
             stylex.props(
               inputWrapperStyles.base,
               styles.wrapper,
-              styles.sheetTrigger,
-              // The trigger keeps the inline field's height for its size step,
+              styles.sheetField,
+              isDisabled && styles.sheetFieldDisabled,
+              // The field keeps the inline field's height for its size step,
               // as Selector's bottom-sheet trigger does; the sheet's own rows
               // and search field carry the touch-sized targets.
               sizeStyles[size],
@@ -1675,8 +1738,77 @@ export function Tokenizer<T extends SearchableItem>({
               {renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
             </span>
           )}
-          {value.length > 0 ? (
-            value.map(item => (
+          <button
+            // The field-level pass-through props (`data-*`, `aria-*`) were typed
+            // for the inline input; here the control is a button.
+            {...(restWithoutClick as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+            ref={triggerMergedRef}
+            type="button"
+            id={inputId}
+            aria-labelledby={fieldLabelledBy}
+            aria-haspopup="dialog"
+            aria-expanded={isSheetOpen}
+            aria-disabled={isDisabled || undefined}
+            // The description follows the inline input's order: the caller's
+            // ids, the field description, the status message, then the
+            // disabled reason (`spec:AST-085` FR5). The hidden count and the
+            // token labels follow, each by id. The algorithm separates
+            // referenced elements, so no list punctuation is written here
+            // (AR6). A default token is display-only and is its own label. A
+            // custom token can hold controls, so a hidden copy of its item
+            // label stands in.
+            aria-describedby={
+              [
+                ariaDescribedByProp,
+                ariaDescribedBy,
+                value.length > 0 ? triggerTokensId : null,
+                ...value.map(item => tokenElementId(item.id)),
+              ]
+                .filter(Boolean)
+                .join(' ') || undefined
+            }
+            // The open runs first and the caller's onClick after it, as the
+            // inline input composes its click: a caller observes the click but
+            // cannot cancel the field's own handling
+            // (`family:input-fields` FR10).
+            onClick={composeEventHandlers<React.MouseEvent<HTMLButtonElement>>(
+              () => {
+                if (isDisabled) {
+                  return;
+                }
+                setIsSheetPresented(true);
+                setSheetInitialQuery(sheetQueryRef.current);
+                setIsSheetOpen(true);
+              },
+              // Typed for the input by the base props; here the control is the
+              // trigger button, and the handler only reads the event.
+              callerOnClick as unknown as
+                React.MouseEventHandler<HTMLButtonElement> | undefined,
+            )}
+            onKeyDown={onKeyDown}
+            {...stylex.props(
+              styles.sheetTrigger,
+              value.length > 0 && styles.sheetTriggerWithTokens,
+              // With no token the placeholder stops short of the end lane, as
+              // the inline input's text does.
+              value.length === 0 && laneReserve,
+            )}>
+            {value.length === 0 && (
+              <span
+                {...stylex.props(
+                  styles.sheetTriggerPlaceholder,
+                  isDisabled && styles.sheetTriggerPlaceholderDisabled,
+                )}>
+                {placeholder ?? ''}
+              </span>
+            )}
+          </button>
+          {value.map(item =>
+            renderToken ? (
+              <span key={item.id} {...stylex.props(styles.token)}>
+                {renderToken(item, () => handleSheetTokenRemove(item))}
+              </span>
+            ) : (
               <Token
                 key={item.id}
                 id={tokenElementId(item.id)}
@@ -1685,22 +1817,27 @@ export function Tokenizer<T extends SearchableItem>({
                 isDisabled={isDisabled}
                 xstyle={isDisabled ? styles.sheetTokenDisabled : undefined}
               />
-            ))
-          ) : (
-            <span
-              {...stylex.props(
-                styles.sheetTriggerPlaceholder,
-                isDisabled && styles.sheetTriggerPlaceholderDisabled,
-              )}>
-              {placeholder ?? ''}
-            </span>
+            ),
+          )}
+          {isRenderable(endContent) && (
+            <div
+              ref={sheetLaneMergedRef}
+              {...stylex.props(styles.endSection, endSectionSizeStyles[size])}>
+              {endContent}
+            </div>
           )}
-        </button>
+        </div>
         {value.length > 0 && (
           <VisuallyHidden id={triggerTokensId}>
             {t('@astryx.tokenizer.selectedCount', {count: value.length})}
           </VisuallyHidden>
         )}
+        {renderToken != null &&
+          value.map(item => (
+            <span key={item.id} id={tokenElementId(item.id)} hidden>
+              {item.label}
+            </span>
+          ))}
         {/* Form carriers, gated exactly as the inline branch gates its own: a
             disabled field submits nothing. */}
         {htmlName != null &&