@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/dist/Tokenizer/Tokenizer.js

@@ -27,7 +27,9 @@ import React, { lazy, Suspense, use, useCallback, useEffect, useId, useImperativ
 import * as stylex from '@stylexjs/stylex';
 import { BusyIndicatorLaneProvider, createBusyIndicatorLane, useIsBusy } from "../Typeahead/busyIndicatorLane.js";
 import { TrailingKeyDownContext } from "../Typeahead/trailingKeyDown.js";
+import { CommittedChoicesKeyContext } from "../Typeahead/committedChoicesKey.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
+import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { TokenizerClearAllMessageContext } from "./TokenizerClearAllMessageContext.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
@@ -52,8 +54,11 @@ 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";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/Tokenizer/Tokenizer.generated.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 // Re-export status types for convenience
 
@@ -92,7 +97,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
  * `Omit<TokenizerProps<T>, …>` and `ComponentProps<typeof Tokenizer>` keep
  * their released shapes — names no presentation.
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -461,7 +466,7 @@ export function Tokenizer({
     onClick: callerOnClick,
     ...restWithoutClick
   } = rest;
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const size = useSize(sizeProp, 'md');
   const generatedInputId = useId();
   const inputId = idProp ?? generatedInputId;
@@ -714,8 +719,19 @@ export function Tokenizer({
   }, [isLayerMode, layer, isFocusInTokenizer, onBlur]);
   const isAtMax = maxEntries != null && value.length >= maxEntries;
 
-  // Filter out already-selected items from search results
-  const selectedIds = useMemo(() => new Set(value.map(item => item.id)), [value]);
+  // Filter out already-selected items from search results. Keyed by the ids,
+  // not the array: an equal new `value` array on every render keeps the
+  // filtered source, and the key tells an open list to reload only when the
+  // committed values really change (FR13).
+  const selectedIdKey = useMemo(() => JSON.stringify(value.map(item => item.id)), [value]);
+  const selectedIds = useMemo(() => new Set(JSON.parse(selectedIdKey)), [selectedIdKey]);
+  // Tells an open list to reload when the committed values change, or to
+  // close once they reach the limit (FR13, FR15).
+  const committedChoices = useMemo(() => ({
+    key: selectedIdKey,
+    ids: selectedIds,
+    isAtLimit: isAtMax
+  }), [selectedIdKey, selectedIds, isAtMax]);
 
   // Selected labels, lowercased, for the Create entry's duplicate check. The
   // typed text is a label, not an id: real selections usually carry an opaque
@@ -726,8 +742,12 @@ export function Tokenizer({
   // added a second "Alice" token under a different id.
   const selectedLabels = useMemo(() => new Set(value.map(item => item.label.toLowerCase())), [value]);
   const filteredSource = useMemo(() => ({
-    search: async query => {
-      const results = await searchSource.search(query);
+    // Committed values leave every list, partial or final
+    // (component:Tokenizer FR13, spec:AST-092 FR1).
+    search: async (query, context) => {
+      const results = await searchSource.search(query, context && {
+        update: items => context.update(items.filter(item => !selectedIds.has(item.id)))
+      });
       return results.filter(item => !selectedIds.has(item.id));
     },
     bootstrap: async () => {
@@ -945,7 +965,7 @@ export function Tokenizer({
       size,
       status: status?.type,
       disabled: isDisabled ? 'disabled' : null
-    }), stylex.props(inputWrapperStyles.base, styles.wrapper, value.length > 0 && styles.wrapperWithTokens, isTruncated ? truncatedSizeStyles[size] : sizeStyle, isTruncated && styles.truncatedWrapper, isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
+    }), stylex.props(inputWrapperStyles.base, styles.wrapper, value.length > 0 && styles.wrapperWithTokens, isTruncated ? truncatedSizeStyles[size] : sizeStyle, isTruncated && styles.truncatedWrapper, isDisabled && inputWrapperStyles.disabled, isDisabled && inputDisabledFocusStyles.nestedRing, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
     children: [startIcon && /*#__PURE__*/_jsx("span", {
       ...{
         0: {},
@@ -971,52 +991,59 @@ export function Tokenizer({
       value: busyLane,
       children: /*#__PURE__*/_jsx(TrailingKeyDownContext, {
         value: onKeyDown,
-        children: /*#__PURE__*/_jsx(BaseTypeahead, {
-          ...rest,
-          ref: useMergedRefs(inputRef,
-          // With `experimental`, the ref type admits the trigger too; in
-          // this presentation it receives the input.
-          ref, handOffFocusRef),
-          searchSource: isAtMax ? emptySource : filteredSource,
-          value: null,
-          onChange: handleAdd,
-          renderItem: renderItem
-          // A space keeps :placeholder-shown available as the CSS-only empty
-          // query signal without painting placeholder text beside tokens.
-          ,
-          placeholder: value.length === 0 ? placeholder : ' ',
-          hasEntriesOnFocus: isAtMax ? false : hasEntriesOnFocus,
-          maxMenuItems: maxMenuItems,
-          menuWidth: menuWidth,
-          minQueryLength: minQueryLength,
-          emptySearchText: emptySearchText,
-          isDisabled: isDisabled,
-          isFocusableDisabled: showsDisabledMessage,
-          hasAutoFocus: hasAutoFocus,
-          inputId: inputId,
-          ariaLabelledBy: fieldLabelledBy,
-          ariaDescribedBy: [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
-          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,
-          anchorRef: wrapperRef,
-          size: size,
-          inputXStyle: [isAtMax || isTruncated ? styles.inputAtMax : value.length > 0 ? styles.inputCompact : undefined,
-          // With tokens, wrapperWithTokens reserves the lane for every row.
-          // This rule is only for an empty Tokenizer; it still resolves to
-          // zero until the lane publishes a width.
-          !(isAtMax || isTruncated || value.length > 0) && laneReserve]
+        children: /*#__PURE__*/_jsx(CommittedChoicesKeyContext, {
+          value: committedChoices,
+          children: /*#__PURE__*/_jsx(BaseTypeahead, {
+            ...rest,
+            ref: useMergedRefs(inputRef,
+            // With `experimental`, the ref type admits the trigger too; in
+            // this presentation it receives the input.
+            ref, handOffFocusRef),
+            searchSource: isAtMax ? emptySource : filteredSource,
+            value: null,
+            onChange: handleAdd,
+            renderItem: renderItem
+            // A space keeps :placeholder-shown available as the CSS-only empty
+            // query signal without painting placeholder text beside tokens.
+            ,
+            placeholder: value.length === 0 ? placeholder : ' ',
+            hasEntriesOnFocus: isAtMax ? false : hasEntriesOnFocus,
+            maxMenuItems: maxMenuItems,
+            menuWidth: menuWidth,
+            minQueryLength: minQueryLength,
+            emptySearchText: emptySearchText,
+            isDisabled: isDisabled
+            // A disabled field keeps its tab stop (spec:AST-085 FR1), except in
+            // unfocusedLayer mode, where the input lives in a layer a disabled
+            // field never opens; how that field takes focus is undecided.
+            ,
+            isFocusableDisabled: showsDisabledMessage || isDisabled && !isLayerMode,
+            hasAutoFocus: hasAutoFocus,
+            inputId: inputId,
+            ariaLabelledBy: fieldLabelledBy,
+            ariaDescribedBy: [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
+            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,
+            anchorRef: wrapperRef,
+            size: size,
+            inputXStyle: [isAtMax || isTruncated ? styles.inputAtMax : value.length > 0 ? styles.inputCompact : undefined,
+            // With tokens, wrapperWithTokens reserves the lane for every row.
+            // This rule is only for an empty Tokenizer; it still resolves to
+            // zero until the lane publishes a width.
+            !(isAtMax || isTruncated || value.length > 0) && laneReserve]
+          })
         })
       })
     }), htmlName != null && !isDisabled && value.map(item => /*#__PURE__*/_jsx("input", {

package/dist/Tokenizer/TokenizerBottomSheet.d.ts

@@ -19,7 +19,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/Tokenizer.tsx (the trigger and the lazy host)
- * - /packages/core/src/Tokenizer/Tokenizer.spec.md (FR16–FR24, AR6, PR6)
+ * - /docs/specs/components/Tokenizer/Tokenizer.spec.md (FR16–FR24, AR6, PR6)
  */
 import { type ReactNode, type RefObject } from 'react';
 import type { SearchableItem, SearchSource } from '../Typeahead/types.js';

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;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"}
+{"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;AAgBrE,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

@@ -23,7 +23,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/Tokenizer.tsx (the trigger and the lazy host)
- * - /packages/core/src/Tokenizer/Tokenizer.spec.md (FR16–FR24, AR6, PR6)
+ * - /docs/specs/components/Tokenizer/Tokenizer.spec.md (FR16–FR24, AR6, PR6)
  */
 import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
@@ -41,17 +41,19 @@ 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/useTranslator.js";
 import { warnOnce } from "../utils/devWarning.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/Tokenizer/TokenizerBottomSheet.generated.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 /**
  * Sentinel prefix for the create row's synthetic item. Kept identical to the
  * inline field's so Tokenizer's `handleAdd` recognizes it and turns it into a
  * real item with a `create` change.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CREATABLE_ID_PREFIX = '__xds_create__';
 /** Rows rendered per batch while a long list scrolls (`component:Tokenizer` FR21). */
 export const LIST_RENDER_BATCH_SIZE = 50;
@@ -165,7 +167,7 @@ function TokenizerSheetContent({
   onClearAll,
   onChangeQuery
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const searchRef = useRef(null);
   const listRef = useRef(null);
   // Whether a checkbox row holds focus, kept by the list's own focus events,

package/dist/Tooltip/Tooltip.d.ts

@@ -54,9 +54,10 @@ export interface TooltipProps {
     hideDelay?: number;
     /**
      * When to trigger on focus:
-     * - `auto`: Only if element is naturally focusable
-     * - `always`: Always attach focus listeners
-     * - `never`: Never attach focus listeners (for composite widgets)
+     * - `auto`: focus on the trigger itself, or within a trigger that is
+     *   focusable when focus arrives
+     * - `always`: focus on the trigger or anything inside it
+     * - `never`: never on focus (for composite widgets)
      *
      * @default 'auto'
      */

package/dist/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAGtE,YAAY,EAAC,mBAAmB,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAiB3E,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAa,EACb,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,GACd,EAAE,YAAY,GAAG,YAAY,CA6J7B;yBA5Ke,OAAO"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAGtE,YAAY,EAAC,mBAAmB,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAiB3E,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAa,EACb,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,GACd,EAAE,YAAY,GAAG,YAAY,CA6J7B;yBA5Ke,OAAO"}

package/dist/Tooltip/useTooltip.d.ts

@@ -41,9 +41,10 @@ export interface TooltipOptions {
     hideDelay?: number;
     /**
      * When to trigger on focus:
-     * - `auto`: Only if element is naturally focusable
-     * - `always`: Always attach focus listeners
-     * - `never`: Never attach focus listeners (for composite widgets)
+     * - `auto`: focus on the trigger itself, or within a trigger that is
+     *   focusable when focus arrives
+     * - `always`: focus on the trigger or anything inside it
+     * - `never`: never on focus (for composite widgets)
      *
      * @default 'auto'
      */

package/dist/Tooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA2ClC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CA0YtE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA4ClC;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAkbtE"}

package/dist/Tooltip/useTooltip.js

@@ -16,6 +16,7 @@ import * as stylex from '@stylexjs/stylex';
 import { useLayerInternal } from "../Layer/useLayer.js";
 import { useTouchTrigger } from "../Layer/useTouchTrigger.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
+import { registerLayerSurface } from "../Layer/layerSurfacePress.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
 import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
@@ -94,6 +95,7 @@ function isFocusable(element) {
  * {tooltip.renderTooltip('Helpful tooltip text')}
  * ```
  */
+
 export function useTooltip(options = {}) {
   const {
     placement = 'above',
@@ -245,8 +247,26 @@ export function useTooltip(options = {}) {
     }
     scheduleHide();
   }, [isTouchPointerRef, layerId, scheduleHide]);
+
+  // Under `auto`, whether focus counts is decided when it arrives, not when
+  // the listeners attach: a roving-tabindex member that was `tabindex="-1"`
+  // then can be the tab stop now. A trigger that receives focus is focusable
+  // by definition; focus inside it counts only while the trigger is
+  // focusable too, so a plain wrapper still ignores its children's focus.
+  const isFocusForTrigger = useCallback(e => {
+    if (focusTrigger === 'always') {
+      return true;
+    }
+    const triggerEl = e.currentTarget;
+    return triggerEl != null && (e.target === triggerEl || isFocusable(triggerEl));
+  }, [focusTrigger]);
+
+  // Whether the trigger's current focus counted when it arrived, so its blur
+  // hides the tooltip even if the trigger has since left the tab order.
+  const focusCountedRef = useRef(false);
   const handleFocusIn = useCallback(e => {
-    if (!isEnabled) {
+    focusCountedRef.current = isFocusForTrigger(e);
+    if (!isEnabled || !focusCountedRef.current) {
       return;
     }
     // A tap focuses the trigger it activates, and `:focus-visible` does not
@@ -265,10 +285,14 @@ export function useTooltip(options = {}) {
     }
     clearTimeouts();
     showLayer();
-  }, [isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
-  const handleFocusOut = useCallback(() => {
+  }, [isEnabled, isFocusForTrigger, isTouchInteraction, clearTimeouts, showLayer]);
+  const handleFocusOut = useCallback(e => {
+    if (!focusCountedRef.current && !isFocusForTrigger(e)) {
+      return;
+    }
+    focusCountedRef.current = false;
     scheduleHide();
-  }, [scheduleHide]);
+  }, [isFocusForTrigger, scheduleHide]);
 
   // Pressing the trigger hides its own tooltip: once the control is activated
   // the hint has served its purpose, and a tooltip lingering over a
@@ -309,9 +333,9 @@ export function useTooltip(options = {}) {
       // Press-to-dismiss on a mouse; tap-to-open on a touch pointer.
       el.addEventListener('pointerdown', handlePointerDown);
 
-      // Attach focus listeners based on focusTrigger option
-      const shouldAttachFocus = focusTrigger === 'always' || focusTrigger === 'auto' && isFocusable(el);
-      if (shouldAttachFocus) {
+      // Focus listeners unless focus never opens the tooltip; `auto` decides
+      // per event (isFocusForTrigger).
+      if (focusTrigger !== 'never') {
         el.addEventListener('focusin', handleFocusIn);
         el.addEventListener('focusout', handleFocusOut);
       }
@@ -415,7 +439,15 @@ export function useTooltip(options = {}) {
       onMouseEnter: cancelHide,
       onMouseLeave: scheduleHide
     };
-    return renderLayer(/*#__PURE__*/_jsx("div", {
+    return renderLayer(
+    /*#__PURE__*/
+    // FR11: React bubbles a press on the surface to the trigger's
+    // ancestors, portaled or not. A registered surface counts as
+    // something else in the shared interactive-ancestor walk, so a
+    // clickable container around the trigger leaves the press alone while
+    // document listeners still see it.
+    _jsx("div", {
+      ref: registerLayerSurface,
       ...{
         className: "xfsso4q xy143xn x12gdq22 x1djylfy xw5ewwj x13faqbe"
       },

package/dist/TopNav/TopNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNav.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuG5C,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,UAAU,EACV,KAAK,EAAE,cAAc,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAwHb;yBApIe,MAAM"}
+{"version":3,"file":"TopNav.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8G5C,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,UAAU,EACV,KAAK,EAAE,cAAc,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA4Hb;yBAxIe,MAAM"}

package/dist/TopNav/TopNav.js

@@ -19,7 +19,6 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { useTranslator } from "../i18n/index.js";
 import { TopNavSlotContext } from "./TopNavContext.js";
 import { useTopNavRenderMode } from "./TopNavRenderContext.js";
 import { useTopNavMobileContent } from "./TopNavMobileContentContext.js";
@@ -28,11 +27,15 @@ import { MobileNav } from "../MobileNav/MobileNav.js";
 import { MobileNavToggle } from "../MobileNav/MobileNavToggle.js";
 import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/TopNav/TopNav.generated.js";
+import { isRenderable } from "../utils/isRenderable.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 /**
  * Base TopNav styles
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   base: {
     kGNEyG: "x6s0dn4",
@@ -95,7 +98,7 @@ export function TopNav({
   ref,
   ...props
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.topNav.landmarkLabel');
   const renderMode = useTopNavRenderMode();
   const mobileContent = useTopNavMobileContent();
@@ -103,10 +106,13 @@ export function TopNav({
     hasAutoToggle
   } = useAppShellMobile();
   const resolvedStartContent = startContent ?? children;
-  const hasCenterContent = centerContent != null;
-  const hasCollapsibleContent = resolvedStartContent != null || centerContent != null;
+  // The layout flags use the same test as the slots they gate.
+  const hasCenterContent = isRenderable(centerContent);
+  const hasStartContent = isRenderable(resolvedStartContent);
+  const hasMobileContent = isRenderable(mobileContent);
+  const hasCollapsibleContent = hasStartContent || hasCenterContent;
   // Show mobile toggle when there's ANY drawer content — own items OR SideNav via context
-  const hasMobileDrawerContent = hasCollapsibleContent || mobileContent != null;
+  const hasMobileDrawerContent = hasCollapsibleContent || hasMobileContent;
 
   // =========================================================================
   // Mobile bar mode — heading + endContent + toggle, hide nav items.
@@ -122,7 +128,7 @@ export function TopNav({
         mode: 'mobile-bar'
       }), stylex.props(styles.mobileBar, xstyle), className, style),
       ...props,
-      children: [heading && /*#__PURE__*/_jsx("div", {
+      children: [isRenderable(heading) && /*#__PURE__*/_jsx("div", {
         ...{
           className: "x78zum5 x6s0dn4 xkz0k9k xeuugli"
         },
@@ -142,7 +148,7 @@ export function TopNav({
   // =========================================================================
   if (renderMode === 'drawer') {
     // Only render if there are collapsible items or extra content
-    if (!hasCollapsibleContent && !mobileContent) {
+    if (!hasCollapsibleContent && !hasMobileContent) {
       return null;
     }
     return /*#__PURE__*/_jsxs(MobileNav, {
@@ -152,9 +158,9 @@ export function TopNav({
           className: "x78zum5 xdt5ytf x1lsbc85"
         },
         children: [resolvedStartContent, centerContent]
-      }), hasCollapsibleContent && mobileContent && /*#__PURE__*/_jsx(Divider, {
+      }), hasCollapsibleContent && hasMobileContent && /*#__PURE__*/_jsx(Divider, {
         xstyle: styles.drawerDivider
-      }), mobileContent && /*#__PURE__*/_jsx("div", {
+      }), hasMobileContent && /*#__PURE__*/_jsx("div", {
         ...{},
         children: mobileContent
       })]
@@ -175,12 +181,12 @@ export function TopNav({
       ...{
         className: "x78zum5 x6s0dn4 x18g69wz x845mor xeuugli"
       },
-      children: [heading && /*#__PURE__*/_jsx("div", {
+      children: [isRenderable(heading) && /*#__PURE__*/_jsx("div", {
         ...{
           className: "x78zum5 x6s0dn4 x2lah0s"
         },
         children: heading
-      }), resolvedStartContent && /*#__PURE__*/_jsx(TopNavSlotContext, {
+      }), hasStartContent && /*#__PURE__*/_jsx(TopNavSlotContext, {
         value: "start",
         children: /*#__PURE__*/_jsx("div", {
           ...{
@@ -205,7 +211,7 @@ export function TopNav({
         value: "end",
         children: endContent
       })
-    }) : endContent && /*#__PURE__*/_jsx("div", {
+    }) : isRenderable(endContent) && /*#__PURE__*/_jsx("div", {
       ...{
         className: "x78zum5 x6s0dn4 xzye2dw x2lah0s xvc5jky"
       },

package/dist/TopNav/TopNavHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgM5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAqapB;yBAvbe,aAAa"}
+{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuM5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAibpB;yBAnce,aAAa"}

package/dist/TopNav/TopNavHeading.js

@@ -36,12 +36,16 @@ import { menuTouchActionStyles } from "../DropdownMenu/menuTouchAction.stylex.js
 import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
 import { NavHeadingCloseContext } from "../NavMenu/NavMenuContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { useTranslator } from "../i18n/index.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/TopNav/TopNavHeading.generated.js";
+import { isRenderable } from "../utils/isRenderable.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+registerEnglishFallback(english);
 
 // =============================================================================
 // Styles
 // =============================================================================
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
 const styles = {
   root: {
     k1xSpc: "x78zum5",
@@ -149,7 +153,7 @@ export function TopNavHeading({
   ref,
   ...props
 }) {
-  const t = useTranslator();
+  const t = useComponentTranslator();
   const LinkComponent = useLinkComponent(as);
   // When the logo is wrapped in a link it needs its own accessible name (the
   // logo image itself is decorative). Prefer an explicit logoLabel, fall back
@@ -258,7 +262,7 @@ export function TopNavHeading({
     color: "secondary",
     xstyle: [styles.chevron, styles.chevronGlyph]
   });
-  const headerEndContentElement = headerEndContent && /*#__PURE__*/_jsx("span", {
+  const headerEndContentElement = isRenderable(headerEndContent) && /*#__PURE__*/_jsx("span", {
     ...{
       className: "x2lah0s x78zum5 x6s0dn4 xvc5jky"
     },
@@ -274,7 +278,7 @@ export function TopNavHeading({
     },
     // A close affordance, not the trigger: dismiss only.
     onClick: closeMenu,
-    children: [logo && /*#__PURE__*/_jsx("span", {
+    children: [isRenderable(logo) && /*#__PURE__*/_jsx("span", {
       ...{
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
       },
@@ -297,7 +301,7 @@ export function TopNavHeading({
       "data-testid": testId,
       ...mergeProps(themeProps('top-nav-heading'), stylex.props(styles.root, !!headingHref && styles.menuTrigger, xstyle), className, style),
       ...props,
-      children: logo && /*#__PURE__*/_jsx("span", {
+      children: isRenderable(logo) && /*#__PURE__*/_jsx("span", {
         ...{
           className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
         },
@@ -314,7 +318,7 @@ export function TopNavHeading({
       "data-testid": testId,
       ...mergeProps(themeProps('top-nav-heading'), stylex.props(styles.root, styles.menuTrigger, xstyle), className, style),
       ...props,
-      children: [logo && /*#__PURE__*/_jsx("span", {
+      children: [isRenderable(logo) && /*#__PURE__*/_jsx("span", {
         ...{
           className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
         },
@@ -331,7 +335,7 @@ export function TopNavHeading({
         "data-testid": testId,
         ...triggerProps,
         ...mergeProps(themeProps('top-nav-heading'), stylex.props(styles.root, styles.menuTrigger, xstyle), className, style),
-        children: [logo && /*#__PURE__*/_jsx("span", {
+        children: [isRenderable(logo) && /*#__PURE__*/_jsx("span", {
           ...{
             className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
           },
@@ -343,7 +347,10 @@ export function TopNavHeading({
         _jsx("button", {
           ref: setTriggerEl,
           type: "button",
-          "aria-label": t('@astryx.topNav.heading.openMenu'),
+          "aria-label": t('@astryx.topNav.heading.openMenu', {
+            heading: heading ?? '',
+            hasHeading: heading ? 'true' : 'false'
+          }),
           onClick: e => {
             e.stopPropagation();
             triggerProps.onClick();
@@ -393,7 +400,7 @@ export function TopNavHeading({
         "data-testid": testId,
         ...triggerProps,
         ...mergeProps(themeProps('top-nav-heading'), stylex.props(styles.root, xstyle), className, style),
-        children: [logo && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
+        children: [isRenderable(logo) && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
           href: headingHref,
           "aria-label": logoLinkLabel,
           onClick: e => e.stopPropagation(),
@@ -414,7 +421,10 @@ export function TopNavHeading({
         _jsx("button", {
           ref: setTriggerEl,
           type: "button",
-          "aria-label": t('@astryx.topNav.heading.openMenu'),
+          "aria-label": t('@astryx.topNav.heading.openMenu', {
+            heading: heading ?? '',
+            hasHeading: heading ? 'true' : 'false'
+          }),
           onClick: e => {
             e.stopPropagation();
             triggerProps.onClick();
@@ -463,7 +473,7 @@ export function TopNavHeading({
       "data-testid": testId,
       ...mergeProps(themeProps('top-nav-heading'), stylex.props(styles.root, xstyle), className, style),
       ...props,
-      children: [logo && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
+      children: [isRenderable(logo) && (headingHref ? /*#__PURE__*/_jsx(LinkComponent, {
         href: headingHref,
         "aria-label": logoLinkLabel,
         ...{
@@ -520,7 +530,7 @@ export function TopNavHeading({
     "data-testid": testId,
     ...mergeProps(themeProps('top-nav-heading'), stylex.props(styles.root, xstyle), className, style),
     ...props,
-    children: [logo && /*#__PURE__*/_jsx("span", {
+    children: [isRenderable(logo) && /*#__PURE__*/_jsx("span", {
       ...{
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
       },