@astryxdesign/core 0.7.4 → 0.7.5-canary.07605c2

package/dist/Tokenizer/Tokenizer.js

@@ -67,11 +67,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // because the input's reserve is derived from the same value.
 const END_LANE_INSET = spacingVars['--spacing-2'];
 const TOKEN_ROW_INSET = `calc(${spacingVars['--spacing-1']} - 1px)`;
-// InputClearButton grows 2px past its visible box under `(pointer: coarse)`.
-// Keep this maximum reserve in sync with Field/InputClearButton.tsx.
-const INPUT_CLEAR_COARSE_POINTER_OUTSET = '2px';
-// Kept in sync with useEndLaneReserve: inputCompact reads the custom property
-// directly so its empty-query pseudo-class can suppress the inner reserve.
+// Kept in sync with useEndLaneReserve: wrapperWithTokens reads the custom
+// property directly, to keep token rows and the input short of the lane.
 const END_LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 const styles = {
   wrapper: {
@@ -85,12 +82,14 @@ const styles = {
   wrapperWithTokens: {
     k8WAf4: "x1x7cmac",
     kg3NbH: "xx2oswg",
+    kwRFfy: "xx0flbe",
     khm7nJ: "xajebq8",
     $$css: true
   },
   token: {
     k1xSpc: "x78zum5",
     kmuXW: "x2lah0s",
+    ks0D6T: "x193iq5w",
     kVAEAm: "x1n2onr6",
     kY2c9j: "x1vjfegm",
     $$css: true
@@ -105,6 +104,11 @@ const styles = {
     kY2c9j: "x1vjfegm",
     $$css: true
   },
+  idleSpinner: {
+    k33iCy: "xlshs6z",
+    kCygrm: "xdps06",
+    $$css: true
+  },
   inputAtMax: {
     kzqmXN: "xnalus7",
     k7Eaqz: "xeuugli",
@@ -115,16 +119,15 @@ const styles = {
     $$css: true
   },
   inputCompact: {
-    kVAEAm: "x1n2onr6 x1utg46d",
+    kVAEAm: "x1n2onr6",
     kB7OPa: "x9f619",
-    kLqNvP: "xhi6v0a x1cs7wtd",
     kY2c9j: "x1ja2u2z",
-    k7Eaqz: "x1fns5xo xcax4zt",
-    kUk6DE: "xfoc8du xf0xpto",
-    kzqmXN: "xnalus7 xbuu7xz",
-    kZCmMZ: "x2a0j69 xf0ofad",
-    kwRFfy: "x1p6hqjl x1wg34a1",
-    k9WMMc: "x1yc453h x75j1tr",
+    k7Eaqz: "x1fns5xo x14dcwvw",
+    kUk6DE: "xfoc8du x1q9bidn",
+    kzqmXN: "xnalus7",
+    keTefX: "x1lziwak x1rq9t4t",
+    kZCmMZ: "x2a0j69 x1jwxvv4",
+    kwRFfy: "xyri2b",
     $$css: true
   },
   truncatedWrapper: {
@@ -168,23 +171,6 @@ const endSectionSizeStyles = {
     $$css: true
   }
 };
-const compactInputSizeStyles = {
-  sm: {
-    k87sOh: "x80663w x1a21zuh",
-    k3aq6I: "x1c071of xv6p7n0",
-    $$css: true
-  },
-  md: {
-    k87sOh: "x80663w x811pv0",
-    k3aq6I: "x1c071of xv6p7n0",
-    $$css: true
-  },
-  lg: {
-    k87sOh: "x80663w x1o13q2w",
-    k3aq6I: "x1c071of xv6p7n0",
-    $$css: true
-  }
-};
 const truncatedSizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -271,6 +257,13 @@ const CREATABLE_ID_PREFIX = '__xds_create__';
  *
  * Renders nothing when the lane would be empty, so `useEndLaneReserve` sees no
  * element, publishes no width, and the input keeps its full content box.
+ *
+ * With `hasBusySlot` the Spinner stays mounted while idle, unrendered, not
+ * animating and out of the accessibility tree, so its box keeps the themed
+ * Spinner's own size.
+ * Token rows reserve the lane's measured width, so a Spinner that came and
+ * went with the search would re-wrap them, and widen a content-sized field,
+ * on every search.
  */
 function EndLane({
   lane,
@@ -279,6 +272,7 @@ function EndLane({
   loadingLabel,
   anchorRef,
   hasStaticContent,
+  hasBusySlot,
   children
 }) {
   const isBusy = useIsBusy(lane);
@@ -286,17 +280,22 @@ function EndLane({
   // live region; the field announces each search's busy start instead
   // (spec:AST-086 FR8).
   useBusyAnnouncement(isBusy, loadingLabel, anchorRef);
-  if (!isBusy && !hasStaticContent) {
+  if (!isBusy && !hasStaticContent && !hasBusySlot) {
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
     ref: laneRef,
     ...stylex.props(laneXStyle),
-    children: [isBusy && /*#__PURE__*/_jsx(Spinner, {
+    children: [(isBusy || hasBusySlot) && /*#__PURE__*/_jsx(Spinner
+    // Remounts when a search starts, so the ring syncs its phase on
+    // mount exactly as a newly shown Spinner did before.
+    , {
       size: "sm",
       "aria-label": loadingLabel,
-      role: "img"
-    }), children]
+      role: "img",
+      "aria-hidden": isBusy ? undefined : true,
+      xstyle: isBusy ? undefined : styles.idleSpinner
+    }, isBusy ? 'busy' : 'idle'), children]
   });
 }
 export function Tokenizer({
@@ -633,7 +632,7 @@ export function Tokenizer({
     if (renderToken) {
       return /*#__PURE__*/_jsx("span", {
         ...{
-          className: "x78zum5 x2lah0s x1n2onr6 x1vjfegm"
+          className: "x78zum5 x2lah0s x193iq5w x1n2onr6 x1vjfegm"
         },
         children: renderToken(item, onRemoveItem)
       }, item.id);
@@ -734,10 +733,10 @@ export function Tokenizer({
           onKeyDown: handleKeyDown,
           anchorRef: wrapperRef,
           size: size,
-          inputXStyle: [isAtMax || isTruncated ? styles.inputAtMax : value.length > 0 ? [styles.inputCompact, compactInputSizeStyles[size]] : undefined,
-          // The compact-token style owns the same reserve with an empty-query
-          // exception. This standalone rule is only for an empty Tokenizer;
-          // it still resolves to zero until the lane publishes a width.
+          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]
         })
       })
@@ -755,7 +754,12 @@ export function Tokenizer({
       laneXStyle: [styles.endSection, endSectionSizeStyles[size]],
       loadingLabel: t('@astryx.typeahead.loading'),
       anchorRef: wrapperRef,
-      hasStaticContent: hasStaticEndLane,
+      hasStaticContent: hasStaticEndLane
+      // Wherever a search can run beside tokens: enabled and below
+      // maxEntries. A collapsed overflow row keeps it too, since a search
+      // started while focused can settle after focus leaves.
+      ,
+      hasBusySlot: value.length > 0 && !isDisabled && !isAtMax,
       children: [endContent, hasClearButton && /*#__PURE__*/_jsx(InputClearButton, {
         label: t('@astryx.tokenizer.clearAll'),
         onClick: e => {

package/dist/Tokenizer/index.d.ts

@@ -6,6 +6,6 @@
  *
  * SYNC: When adding new Tokenizer files, update exports here
  */
-export { Tokenizer } from './Tokenizer';
-export type { TokenizerProps, TokenizerSize, TokenizerOverflowBehavior, TokenizerChange, TokenizerHandle, TokenizerStatus, TokenizerStatusType, } from './Tokenizer';
+export { Tokenizer } from './Tokenizer.js';
+export type { TokenizerProps, TokenizerSize, TokenizerOverflowBehavior, TokenizerChange, TokenizerHandle, TokenizerStatus, TokenizerStatusType, } from './Tokenizer.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Tokenizer/useEndLaneReserve.d.ts

@@ -23,8 +23,9 @@ import * as stylex from '@stylexjs/stylex';
  *
  * Takes the lane's inset from the field's inline-end border, as the CSS
  * expression that positions it. Returns a ref callback for the lane, and the
- * ordinary input reserve style. Tokenizer's compact input reads the same custom
- * property directly so its empty-query hit surface can stop before the lane.
+ * ordinary input reserve style. With tokens, Tokenizer's field wrapper reads the
+ * same custom property directly so every token row, and the input after the
+ * last token, stops before the lane.
  * With no lane mounted the variable is absent and either rule resolves to its
  * no-lane fallback, so neither path needs to know whether a search is running.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"useEndLaneReserve.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/useEndLaneReserve.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA+B3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,GAChB,CAAC,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,EAAE,MAAM,CAAC,YAAY,CAAC,CAuD3D"}
+{"version":3,"file":"useEndLaneReserve.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/useEndLaneReserve.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA+B3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,GAChB,CAAC,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,EAAE,MAAM,CAAC,YAAY,CAAC,CAuD3D"}

package/dist/Tokenizer/useEndLaneReserve.js

@@ -81,8 +81,9 @@ const reserveStyles = {
  *
  * Takes the lane's inset from the field's inline-end border, as the CSS
  * expression that positions it. Returns a ref callback for the lane, and the
- * ordinary input reserve style. Tokenizer's compact input reads the same custom
- * property directly so its empty-query hit surface can stop before the lane.
+ * ordinary input reserve style. With tokens, Tokenizer's field wrapper reads the
+ * same custom property directly so every token row, and the input after the
+ * last token, stops before the lane.
  * With no lane mounted the variable is absent and either rule resolves to its
  * no-lane fallback, so neither path needs to know whether a search is running.
  */

package/dist/Toolbar/Toolbar.d.ts

@@ -13,10 +13,10 @@
  * - /packages/cli/assets/templates/blocks/components/Toolbar/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SectionVariant } from '../Section/Section';
-import type { SpacingStep } from '../utils/types';
-import type { ElementSize } from '../SizeContext/SizeContext';
+import type { BaseProps } from '../BaseProps.js';
+import type { SectionVariant } from '../Section/Section.js';
+import type { SpacingStep } from '../utils/types.js';
+import type { ElementSize } from '../SizeContext/SizeContext.js';
 export type ToolbarSize = ElementSize;
 export interface ToolbarProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root Section element */

package/dist/Toolbar/index.d.ts

@@ -6,6 +6,6 @@
  *
  * SYNC: When modified, update /packages/core/src/Toolbar/Toolbar.doc.mjs
  */
-export { Toolbar } from './Toolbar';
-export type { ToolbarProps, ToolbarSize } from './Toolbar';
+export { Toolbar } from './Toolbar.js';
+export type { ToolbarProps, ToolbarSize } from './Toolbar.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Tooltip/Tooltip.d.ts

@@ -10,9 +10,9 @@
  * - /packages/cli/assets/templates/blocks/components/Tooltip/ (showcase blocks)
  */
 import React, { type ReactElement, type ReactNode } from 'react';
-import { type TooltipFocusTrigger, type TooltipTouchTrigger } from './useTooltip';
-import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
-export type { TooltipFocusTrigger, TooltipTouchTrigger } from './useTooltip';
+import { type TooltipFocusTrigger, type TooltipTouchTrigger } from './useTooltip.js';
+import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer.js';
+export type { TooltipFocusTrigger, TooltipTouchTrigger } from './useTooltip.js';
 export interface TooltipProps {
     /**
      * The trigger element(s). Children refs are preserved.

package/dist/Tooltip/index.d.ts

@@ -6,8 +6,8 @@
  *
  * SYNC: When adding new Tooltip files, update exports here
  */
-export { useTooltip } from './useTooltip';
-export type { TooltipFocusTrigger, TooltipTouchTrigger, TooltipOptions, TooltipReturn, } from './useTooltip';
-export { Tooltip } from './Tooltip';
-export type { TooltipProps } from './Tooltip';
+export { useTooltip } from './useTooltip.js';
+export type { TooltipFocusTrigger, TooltipTouchTrigger, TooltipOptions, TooltipReturn, } from './useTooltip.js';
+export { Tooltip } from './Tooltip.js';
+export type { TooltipProps } from './Tooltip.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Tooltip/useTooltip.d.ts

@@ -8,8 +8,8 @@
  * - /packages/core/src/Tooltip/index.ts
  */
 import { type ReactNode, type RefCallback } from 'react';
-import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer';
-import { type LayerTouchTrigger } from '../Layer/useTouchTrigger';
+import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer.js';
+import { type LayerTouchTrigger } from '../Layer/useTouchTrigger.js';
 /**
  * Focus trigger behavior for tooltips
  */

package/dist/TopNav/TopNav.d.ts

@@ -12,7 +12,7 @@
  * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface TopNavProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLElement>;

package/dist/TopNav/TopNavHeading.d.ts

@@ -16,8 +16,8 @@
  * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { LinkComponentType } from '../Link/types';
-import type { BaseProps } from '../BaseProps';
+import type { LinkComponentType } from '../Link/types.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface TopNavHeadingProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLElement>;

package/dist/TopNav/TopNavItem.d.ts

@@ -12,9 +12,9 @@
  * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { LinkComponentType } from '../Link/types';
-import { type NavItemSize } from '../NavItem/navItemStyles.stylex';
+import type { BaseProps } from '../BaseProps.js';
+import type { LinkComponentType } from '../Link/types.js';
+import { type NavItemSize } from '../NavItem/navItemStyles.stylex.js';
 export interface TopNavItemProps extends BaseProps<HTMLAnchorElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLAnchorElement>;

package/dist/TopNav/TopNavMegaMenu.d.ts

@@ -26,7 +26,7 @@
  * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface TopNavMegaMenuProps extends BaseProps<HTMLButtonElement> {
     ref?: React.Ref<HTMLButtonElement>;
     /** The visible label for the nav item trigger. */

package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts

@@ -14,7 +14,7 @@
  * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface TopNavMegaMenuFeaturedCardProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /** Card title. */

package/dist/TopNav/TopNavMegaMenuItem.d.ts

@@ -11,8 +11,8 @@
  * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { LinkComponentType } from '../Link/types';
-import type { BaseProps } from '../BaseProps';
+import type { LinkComponentType } from '../Link/types.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface TopNavMegaMenuItemProps extends Omit<BaseProps<HTMLElement>, 'onClick'> {
     ref?: React.Ref<HTMLElement>;
     /** Display title for the menu item. */

package/dist/TopNav/TopNavMenu.d.ts

@@ -12,7 +12,7 @@
  * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 /**
  * An item in the TopNav overflow menu.
  */

package/dist/TopNav/index.d.ts

@@ -6,20 +6,20 @@
  *
  * SYNC: When modified, update /packages/core/src/TopNav/TopNav.doc.mjs
  */
-export { TopNav } from './TopNav';
-export type { TopNavProps } from './TopNav';
-export { TopNavHeading } from './TopNavHeading';
-export type { TopNavHeadingProps } from './TopNavHeading';
-export { TopNavItem } from './TopNavItem';
-export type { TopNavItemProps } from './TopNavItem';
-export { TopNavMenu } from './TopNavMenu';
-export type { TopNavMenuProps, TopNavMenuItemData } from './TopNavMenu';
-export { TopNavMegaMenu } from './TopNavMegaMenu';
-export type { TopNavMegaMenuProps } from './TopNavMegaMenu';
-export { TopNavMegaMenuItem } from './TopNavMegaMenuItem';
-export type { TopNavMegaMenuItemProps } from './TopNavMegaMenuItem';
-export { TopNavMegaMenuFeaturedCard } from './TopNavMegaMenuFeaturedCard';
-export type { TopNavMegaMenuFeaturedCardProps } from './TopNavMegaMenuFeaturedCard';
-export { TopNavRenderContext, useTopNavRenderMode, } from './TopNavRenderContext';
-export type { TopNavRenderMode } from './TopNavRenderContext';
+export { TopNav } from './TopNav.js';
+export type { TopNavProps } from './TopNav.js';
+export { TopNavHeading } from './TopNavHeading.js';
+export type { TopNavHeadingProps } from './TopNavHeading.js';
+export { TopNavItem } from './TopNavItem.js';
+export type { TopNavItemProps } from './TopNavItem.js';
+export { TopNavMenu } from './TopNavMenu.js';
+export type { TopNavMenuProps, TopNavMenuItemData } from './TopNavMenu.js';
+export { TopNavMegaMenu } from './TopNavMegaMenu.js';
+export type { TopNavMegaMenuProps } from './TopNavMegaMenu.js';
+export { TopNavMegaMenuItem } from './TopNavMegaMenuItem.js';
+export type { TopNavMegaMenuItemProps } from './TopNavMegaMenuItem.js';
+export { TopNavMegaMenuFeaturedCard } from './TopNavMegaMenuFeaturedCard.js';
+export type { TopNavMegaMenuFeaturedCardProps } from './TopNavMegaMenuFeaturedCard.js';
+export { TopNavRenderContext, useTopNavRenderMode, } from './TopNavRenderContext.js';
+export type { TopNavRenderMode } from './TopNavRenderContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/TreeList/TreeList.d.ts

@@ -11,9 +11,9 @@
  * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { TreeListItemData, TreeListDensity, TreeListVariant } from './TreeListTypes';
-export { type TreeListDensity, type TreeListVariant } from './TreeListTypes';
+import type { BaseProps } from '../BaseProps.js';
+import type { TreeListItemData, TreeListDensity, TreeListVariant } from './TreeListTypes.js';
+export { type TreeListDensity, type TreeListVariant } from './TreeListTypes.js';
 export interface TreeListProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;

package/dist/TreeList/TreeListItem.d.ts

@@ -11,7 +11,7 @@
  */
 import { type ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import type { TreeListDensity, TreeListVariant } from './TreeListTypes';
+import type { TreeListDensity, TreeListVariant } from './TreeListTypes.js';
 export interface TreeListItemInternalProps {
     id: string;
     label: React.ReactNode;

package/dist/TreeList/TreeListTypes.d.ts

@@ -10,7 +10,7 @@
  */
 import type { CSSProperties, ReactNode } from 'react';
 import type { StyleXStyles } from '@stylexjs/stylex';
-import type { TreeListVariantMap } from './index';
+import type { TreeListVariantMap } from './index.js';
 /** Spacing density for tree list items. */
 export type TreeListDensity = 'compact' | 'balanced' | 'spacious';
 /**

package/dist/TreeList/index.d.ts

@@ -23,7 +23,7 @@ export interface TreeListVariantMap {
     lineGuides: true;
     noGuides: true;
 }
-export { TreeList } from './TreeList';
-export type { TreeListProps, TreeListDensity, TreeListVariant } from './TreeList';
-export type { TreeListItemData } from './TreeListTypes';
+export { TreeList } from './TreeList.js';
+export type { TreeListProps, TreeListDensity, TreeListVariant } from './TreeList.js';
+export type { TreeListItemData } from './TreeListTypes.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Typeahead/BaseTypeahead.d.ts

@@ -14,8 +14,8 @@
  */
 import React, { type ReactNode, type RefObject } from 'react';
 import type { StyleXStyles } from '@stylexjs/stylex';
-import type { BaseProps } from '../BaseProps';
-import type { SearchableItem, SearchSource } from './types';
+import type { BaseProps } from '../BaseProps.js';
+import type { SearchableItem, SearchSource } from './types.js';
 export interface BaseTypeaheadProps<T extends SearchableItem> extends Omit<BaseProps<HTMLElement>, 'onChange'> {
     ref?: React.Ref<HTMLInputElement>;
     /**

package/dist/Typeahead/Typeahead.d.ts

@@ -14,12 +14,12 @@
  * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import { type InputStatus, type FieldStatusVariant } from '../Field';
-import { type IconType } from '../Icon';
-import { type FieldInputBaseProps } from '../Field/fieldParts';
-import type { SizeValue } from '../utils/types';
-import type { SearchableItem, SearchSource } from './types';
-export type { InputStatus as TypeaheadStatus, InputStatusType as TypeaheadStatusType, } from '../Field';
+import { type InputStatus, type FieldStatusVariant } from '../Field/index.js';
+import { type IconType } from '../Icon/index.js';
+import { type FieldInputBaseProps } from '../Field/fieldParts.js';
+import type { SizeValue } from '../utils/types.js';
+import type { SearchableItem, SearchSource } from './types.js';
+export type { InputStatus as TypeaheadStatus, InputStatusType as TypeaheadStatusType, } from '../Field/index.js';
 export type TypeaheadSize = 'sm' | 'md' | 'lg';
 export interface TypeaheadProps<T extends SearchableItem> extends Omit<FieldInputBaseProps<HTMLInputElement>, 'onChange' | 'onKeyDown'> {
     /**

package/dist/Typeahead/TypeaheadItem.d.ts

@@ -9,8 +9,8 @@
  * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { SearchableItem } from './types';
-import type { BaseProps } from '../BaseProps';
+import type { SearchableItem } from './types.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface TypeaheadItemProps<T extends SearchableItem = SearchableItem> extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**

package/dist/Typeahead/createStaticSource.d.ts

@@ -7,7 +7,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
  */
-import type { SearchableItem, SearchSource } from './types';
+import type { SearchableItem, SearchSource } from './types.js';
 export interface CreateStaticSourceOptions<T extends SearchableItem = SearchableItem> {
     /**
      * Extract additional search terms from an item.

package/dist/Typeahead/index.d.ts

@@ -6,13 +6,13 @@
  *
  * SYNC: When adding new Typeahead files, update exports here
  */
-export type { SearchableItem, SearchSource } from './types';
-export { createStaticSource } from './createStaticSource';
-export type { CreateStaticSourceOptions } from './createStaticSource';
-export { BaseTypeahead } from './BaseTypeahead';
-export type { BaseTypeaheadProps } from './BaseTypeahead';
-export { Typeahead } from './Typeahead';
-export type { TypeaheadProps, TypeaheadSize, TypeaheadStatus, TypeaheadStatusType, } from './Typeahead';
-export { TypeaheadItem } from './TypeaheadItem';
-export type { TypeaheadItemProps } from './TypeaheadItem';
+export type { SearchableItem, SearchSource } from './types.js';
+export { createStaticSource } from './createStaticSource.js';
+export type { CreateStaticSourceOptions } from './createStaticSource.js';
+export { BaseTypeahead } from './BaseTypeahead.js';
+export type { BaseTypeaheadProps } from './BaseTypeahead.js';
+export { Typeahead } from './Typeahead.js';
+export type { TypeaheadProps, TypeaheadSize, TypeaheadStatus, TypeaheadStatusType, } from './Typeahead.js';
+export { TypeaheadItem } from './TypeaheadItem.js';
+export type { TypeaheadItemProps } from './TypeaheadItem.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Typeahead/utils.d.ts

@@ -3,7 +3,7 @@
  * @output Server-safe re-exports of pure Typeahead utility functions
  * @position Subpath entry point: `@astryxdesign/core/Typeahead/utils`
  */
-export { createStaticSource } from './createStaticSource';
-export type { CreateStaticSourceOptions } from './createStaticSource';
-export type { SearchableItem, SearchSource } from './types';
+export { createStaticSource } from './createStaticSource.js';
+export type { CreateStaticSourceOptions } from './createStaticSource.js';
+export type { SearchableItem, SearchSource } from './types.js';
 //# sourceMappingURL=utils.d.ts.map

package/dist/VStack/VStack.d.ts

@@ -9,8 +9,8 @@
  * - /packages/core/src/VStack/VStack.test.tsx
  * - /packages/cli/assets/templates/blocks/components/VStack/ (showcase blocks)
  */
-import { type StackProps } from '../Stack/Stack';
-import type { StackCrossAlignment, StackMainAlignment } from '../Stack/stack.stylex';
+import { type StackProps } from '../Stack/Stack.js';
+import type { StackCrossAlignment, StackMainAlignment } from '../Stack/stack.stylex.js';
 export interface VStackProps extends Omit<StackProps, 'direction' | 'hAlign' | 'vAlign'> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLElement>;

package/dist/VStack/index.d.ts

@@ -4,5 +4,5 @@
  * @output Exports VStack and its props type
  * @position Entry point for @astryxdesign/core/VStack subpath export
  */
-export { VStack, type VStackProps } from './VStack';
+export { VStack, type VStackProps } from './VStack.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/VisuallyHidden/VisuallyHidden.d.ts

@@ -12,13 +12,22 @@
  * - /packages/cli/assets/templates/blocks/components/VisuallyHidden/ (showcase blocks)
  */
 import { type ElementType, type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
+import type { StyleXStyles } from '@stylexjs/stylex';
 /**
  * VisuallyHidden is deliberately styling-free: it exists to *not* be seen, so it
- * intentionally omits `xstyle`/`className`/`style`. The clip block is fixed and
- * non-overridable — styling a visually-hidden node is always a mistake. The
- * accessibility pass-throughs from `BaseProps` (`aria-*`, `role`, `id`,
- * `data-*`, event handlers) remain, since the live-region use case needs them.
+ * omits `className`/`style` and applies a fixed, non-overridable clip block —
+ * styling a visually-hidden node is always a mistake. The accessibility
+ * pass-throughs from `BaseProps` (`aria-*`, `role`, `id`, `data-*`, event
+ * handlers) remain, since the live-region use case needs them.
+ *
+ * `xstyle` stays declared and documented as ignored, because released 0.7.2
+ * accepted it through `BaseProps`: narrowing the interface would force every
+ * consumer to edit code, which is a `[breaking]` change for a planned minor
+ * (`spec:AST-017/FR53`). It carries no `@deprecated` marker either — under
+ * `spec:AST-017/FR28` a patch may only deprecate a surface it ships an exact
+ * migration for, and this fix ships none. Dropping the prop from the interface,
+ * with the migration being to delete it, belongs to a planned minor.
  */
 export interface VisuallyHiddenProps extends Omit<BaseProps<HTMLElement>, 'className' | 'style'> {
     /** Ref forwarded to the rendered element. */
@@ -34,6 +43,15 @@ export interface VisuallyHiddenProps extends Omit<BaseProps<HTMLElement>, 'class
      * @default 'span'
      */
     as?: ElementType;
+    /**
+     * Ignored: VisuallyHidden has no styling surface. The clip block is the only
+     * style applied, and nothing a caller passes can displace it.
+     *
+     * Accepted only so that code written against 0.7.2 keeps compiling. It is not
+     * applied to the element, and a planned minor removes it — the migration is to
+     * delete the prop.
+     */
+    xstyle?: StyleXStyles;
 }
 /**
  * Renders its children in the accessibility tree while hiding them visually.
@@ -52,7 +70,7 @@ export interface VisuallyHiddenProps extends Omit<BaseProps<HTMLElement>, 'class
  * </VisuallyHidden>
  * ```
  */
-export declare function VisuallyHidden({ children, as: element, ref, ...props }: VisuallyHiddenProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function VisuallyHidden({ children, as: element, ref, ...rest }: VisuallyHiddenProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare namespace VisuallyHidden {
     var displayName: string;
 }

package/dist/VisuallyHidden/VisuallyHidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;;;;;GAMG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,WAAW,CAAC,EACtB,WAAW,GAAG,OAAO,CACtB;IACC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,EAAE,EAAE,OAAgB,EACpB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,0FAarB;yBAlBe,cAAc"}
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAGnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,WAAW,CAAC,EACtB,WAAW,GAAG,OAAO,CACtB;IACC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,EAAE,EAAE,OAAgB,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,mBAAmB,0FA2BrB;yBAhCe,cAAc"}