@astryxdesign/core 0.7.4-canary.faa934f → 0.7.5-canary.0026f37

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @xds/core
 
+# 0.7.4
+
+#### New Features
+
+- `BottomSheetSwitcher` presents each step in its own native `<dialog>`. Every child `BottomSheet` owns a dialog exactly like a standalone sheet; the switcher presents the selected sheet's dialog (`showModal()` with a scrim, `show()` without), keeps the previous sheet's dialog open and inert beneath the entering one through the handoff, and closes it once its panel has faded. One backdrop paints at a time: the retained dialog keeps the scrim until it closes, then the new dialog takes it over without a fade, so the page is never dimmed twice and the previous panel is never dimmed. Focus containment is the browser's own modal-dialog containment (as for `Dialog`) instead of a script trap; the page scroll lock (the shared body lock, held once by the switcher for the whole modal flow, through a handoff and until after the exit), Escape and platform-close routing, `purpose` dismissal rules, and focus return to the opener are unchanged. Going back to a sheet whose dialog is still fading closes and re-presents that dialog so the interactive sheet is the topmost layer again. (#7720)
+  Public props, defaults, and exports are unchanged. Two observable details move with the structure: The switcher's `ref` resolves to the dialog hosting the flow — the active sheet's dialog, which changes on a handoff; the exiting sheet's through its exit; and, while the flow is closed, the dialog that hosted it last (or the first mounted sheet's) — instead of one persistent element; it is never `null` while a sheet is mounted, from the first commit on, and a callback ref's returned cleanup runs on each detach. `onCancel` and the forwarded dialog props apply to each sheet's dialog (a `role` given to the switcher included, except on a `required` step, which is an `alertdialog` as before), except `id` and `data-testid`, which render once, on the dialog the `ref` resolves to, from the first commit's synchronous re-render on; server markup of a flow that mounts closed carries them on no element (the shared dialog carried them). A non-modal flow orders its sheet dialogs inside a switcher-owned isolated wrapper that carries the one overlay value the shared dialog carried before.
+
+#### Fixes
+
+- `TextInput`, `TextArea`, `Selector` and `MultiSelector` announce "Loading" once, politely, through the shared announcement channel when they become busy, and the Spinner they show while busy is hidden from assistive technology. Before, the Spinner mounted as its own `role="status"` region already holding its name, which screen readers often skip, and it competed with the control's own `aria-busy` as a second owner of the same feedback. A rerender or StrictMode replay does not repeat the announcement; settling and becoming busy again announces again. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the control's `aria-busy` instead. (#7920)
+- Carousel: when the focused edge scroll button runs out (the carousel reached that edge), focus now moves to the scroll area without scrolling it, instead of to the opposite scroll button. No API changes. (#7926)
+- `CheckboxInput` announces its busy start ("Loading") once, politely, through the shared announcement channel. The Spinner it shows in place of the check mark while busy sits inside the decorative, hidden indicator, so before this nothing told screen-reader users that the checkbox had become busy beyond its `aria-busy`. Inside an open modal dialog the announcement goes to a status region in the dialog. (#7948)
+- `CommandPaletteItem` now reflects its highlighted, selected, and disabled states on the `command-palette-item` theme target as `data-highlighted="highlighted"`, `data-selected="selected"`, and `data-disabled="disabled"`. A theme can now style the active keyboard result, the chosen value, or an unavailable command, for example `.astryx-command-palette-item[data-selected]`. States derived from CommandPalette are reflected too. Rendering, semantics, and props are unchanged. (#7967)
+- `CommandPalette` announces each busy start ("Loading"), including its load on opening or clearing the query, once from a status region inside its dialog, and its search Spinner is hidden from assistive technology. Before, the Spinner mounted as its own `role="status"` region already named "Loading", and the palette's own "Loading" went to the page-level announcement channel, which an open native modal hides from assistive technology. Result-count announcements are unchanged. Tests that found the Spinner with `getByRole('status')` should query the Spinner element instead. (#7956)
+- A busy `DateInput` (`isLoading`, or a pending `changeAction`) no longer looks disabled. On the popover, native, and bottom-sheet surfaces the field keeps its ordinary paint and shows its Spinner while new commits are blocked; only `isDisabled` dims the field. The busy field still takes no hover ring and keeps its keyboard focus ring. Props, semantics, and announcements are unchanged. (#7968)
+- `DateInput` (popover, native and bottom-sheet presentations) and `DateRangeInput` announce their busy start ("Loading") once, politely, through the shared announcement channel, and the Spinner they show while busy is hidden from assistive technology. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip, and it was a second owner beside the field's `aria-busy`. Inside an open modal dialog the announcement goes to a status region in the dialog. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the field's `aria-busy` instead. (#7939)
+- `DateTimeInput` and `TimeInput` (popover, native and bottom-sheet presentations) announce their busy start ("Loading") once, politely, through the shared announcement channel, and the Spinner they show while busy is hidden from assistive technology. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip, and it was a second owner beside the field's `aria-busy`. A change made inside the open bottom sheet under a pending `changeAction` is announced from inside the sheet. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the field's `aria-busy` instead. (#7942)
+- `FileInput` announces its busy start ("Loading") once, politely, through the shared announcement channel, and the Spinner it shows while busy is hidden from assistive technology. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip. A file pick keeps its single "file selected" announcement, because it is one user action, even when it starts a busy period (`changeAction`, or `isLoading` set from `onChange`). Other busy starts, such as `isLoading` on its own or a clear under `changeAction`, announce "Loading". Inside an open modal dialog the announcement goes to a status region in the dialog. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the field's `aria-busy` instead. (#7954)
+- Selector, DropdownMenu and ContextMenu: clicking an option inside a shadow root (open, closed or nested) selects it. The menus used to read the document's view of the click, which names the shadow host, so the click closed the menu without selecting anything. (#7914)
+- `DropdownMenuSubMenu` (with `hasSpinner`), an uploading `Thumbnail`, and `ChatMessageList` while it loads older messages announce their busy start ("Loading") once, politely, through the shared announcement channel. The Spinner each one shows is hidden from assistive technology. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip; in `ChatMessageList` it was also a second live role inside the log. Tests that found these Spinners with `getByRole('status', {name: 'Loading'})` should query the Spinner element or the owner's busy state instead. (#7950)
+- ChatComposerInput: the trigger menu's loading row no longer mounts as a `role="status"` region already holding its text, which screen readers could skip. The loading text is announced once per pending search through the shared polite channel instead, and a search that returns its results before the loading row is painted, such as `createStaticSource` or a cached result, announces nothing; the visible row and its `loadingText` are unchanged. (#7900)
+  Fixes #7859.
+- useTypeahead clears its pending buffer reset when its component unmounts or an `<Activity>` boundary hides it, so a menu, list or selector removed within 750 ms of a typed character leaves no timer running behind it, and a hidden one comes back with an empty buffer (#7938)
+- `ComplexSelector`, `Typeahead`, `Tokenizer` and a directly used `BaseTypeahead` announce their busy start ("Loading") once, politely, through the shared announcement channel, and the Spinner they show while busy or while a search is in flight is no longer a live region: ComplexSelector's is hidden from assistive technology, and the search Spinner of Typeahead, Tokenizer and BaseTypeahead stays named as an image ("Loading") so the search's busy feedback keeps its name. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip, and it was a second owner beside the control's `aria-busy`. Inside an open modal dialog the announcement goes to a status region in the dialog. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the control's `aria-busy`, or find the search Spinner with `getByRole('img', {name: 'Loading'})`. (#7930)
+
+#### Documentation
+
+- `BottomSheetSwitcher` anatomy names its host part `Sheet dialogs` — one native dialog per child sheet, the one hosting the active sheet carrying the flow's ref, id, modality, and dismissal — instead of `Shared dialog`. (#7720)
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @cixzhang
+- @HelloOjasMutreja
+- @imdreamrunner
+- @vjeux
+
+---
+
 # 0.7.3
 
 #### New Features

package/dist/AlertDialog/AlertDialog.d.ts

@@ -12,8 +12,8 @@
  * - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
  */
 import React from 'react';
-import { type ButtonVariant } from '../Button';
-import type { BaseProps } from '../BaseProps';
+import { type ButtonVariant } from '../Button/index.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
     ref?: React.Ref<HTMLDialogElement>;
     /**

package/dist/AlertDialog/index.d.ts

@@ -1,5 +1,5 @@
-export { AlertDialog } from './AlertDialog';
-export type { AlertDialogProps } from './AlertDialog';
-export { useImperativeAlertDialog } from './useImperativeAlertDialog';
-export type { ImperativeAlertDialogReturn } from './useImperativeAlertDialog';
+export { AlertDialog } from './AlertDialog.js';
+export type { AlertDialogProps } from './AlertDialog.js';
+export { useImperativeAlertDialog } from './useImperativeAlertDialog.js';
+export type { ImperativeAlertDialogReturn } from './useImperativeAlertDialog.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/AlertDialog/useImperativeAlertDialog.d.ts

@@ -10,7 +10,7 @@
  * - /apps/storybook/stories/AlertDialog.stories.tsx
  */
 import { type ReactNode } from 'react';
-import { type AlertDialogProps } from './AlertDialog';
+import { type AlertDialogProps } from './AlertDialog.js';
 type AlertDialogOptions = Omit<AlertDialogProps, 'isOpen' | 'onOpenChange'>;
 export interface ImperativeAlertDialogReturn {
     /** Show the alert dialog. */

package/dist/AppShell/AppShell.d.ts

@@ -15,10 +15,10 @@ import React from 'react';
  * - /packages/cli/assets/templates/blocks/components/AppShell/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { SpacingStep } from '../utils/types';
-import type { BaseProps } from '../BaseProps';
-import { type WidthBreakpointName } from '../theme/themeAdaptations';
-import type { AppShellVariantMap } from './index';
+import type { SpacingStep } from '../utils/types.js';
+import type { BaseProps } from '../BaseProps.js';
+import { type WidthBreakpointName } from '../theme/themeAdaptations.js';
+import type { AppShellVariantMap } from './index.js';
 /**
  * SideNav breakpoint options. Named points resolve through the nearest Theme;
  * without an active theme they use Astryx's default width-breakpoint map.

package/dist/AppShell/index.d.ts

@@ -25,8 +25,8 @@ export interface AppShellVariantMap {
     section: true;
     elevated: true;
 }
-export { AppShell } from './AppShell';
-export type { AppShellProps, AppShellBreakpoint, AppShellVariant, MobileNavConfig, } from './AppShell';
-export { useAppShellMobile, AppShellMobileContext, } from './AppShellMobileContext';
-export type { AppShellMobileContextValue } from './AppShellMobileContext';
+export { AppShell } from './AppShell.js';
+export type { AppShellProps, AppShellBreakpoint, AppShellVariant, MobileNavConfig, } from './AppShell.js';
+export { useAppShellMobile, AppShellMobileContext, } from './AppShellMobileContext.js';
+export type { AppShellMobileContextValue } from './AppShellMobileContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/AspectRatio/AspectRatio.d.ts

@@ -11,7 +11,7 @@
  * - /packages/cli/assets/templates/blocks/components/AspectRatio/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 /**
  * The shape of the aspect ratio container.
  * - `rectangle`: standard rectangular container (default).

package/dist/AspectRatio/index.d.ts

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

package/dist/Avatar/Avatar.d.ts

@@ -15,9 +15,9 @@
  * Last synced props: alt, fallbackSrc, name, size, src, status, href, as, target, rel, onClick
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 import * as stylex from '@stylexjs/stylex';
-import type { LinkComponentType } from '../Link/types';
+import type { LinkComponentType } from '../Link/types.js';
 /**
  * Named size options.
  *

package/dist/Avatar/AvatarStatusDot.d.ts

@@ -12,8 +12,8 @@
  * - /packages/cli/assets/templates/blocks/components/Avatar/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { AvatarStatusDotVariantMap } from './index';
+import type { BaseProps } from '../BaseProps.js';
+import type { AvatarStatusDotVariantMap } from './index.js';
 /**
  * AvatarStatusDot variant type. Extensible via module augmentation of AvatarStatusDotVariantMap.
  */

package/dist/Avatar/index.d.ts

@@ -31,8 +31,8 @@ export interface AvatarStatusDotVariantMap {
     neutral: true;
     error: true;
 }
-export { Avatar, resolveSize } from './Avatar';
-export type { AvatarProps, AvatarSize, AvatarShape } from './Avatar';
-export { AvatarStatusDot } from './AvatarStatusDot';
-export type { AvatarStatusDotProps, AvatarStatusDotVariant, } from './AvatarStatusDot';
+export { Avatar, resolveSize } from './Avatar.js';
+export type { AvatarProps, AvatarSize, AvatarShape } from './Avatar.js';
+export { AvatarStatusDot } from './AvatarStatusDot.js';
+export type { AvatarStatusDotProps, AvatarStatusDotVariant, } from './AvatarStatusDot.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/AvatarGroup/AvatarGroup.d.ts

@@ -22,8 +22,8 @@
  * - /packages/cli/assets/templates/blocks/components/AvatarGroup/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import { type AvatarShape, type AvatarSize } from '../Avatar';
+import type { BaseProps } from '../BaseProps.js';
+import { type AvatarShape, type AvatarSize } from '../Avatar/index.js';
 export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element. */
     ref?: React.Ref<HTMLDivElement>;

package/dist/AvatarGroup/AvatarGroupContext.d.ts

@@ -1,4 +1,4 @@
-import type { AvatarShape, AvatarSize } from '../Avatar';
+import type { AvatarShape, AvatarSize } from '../Avatar/index.js';
 export interface AvatarGroupContextValue {
     size: AvatarSize;
     shape: AvatarShape;

package/dist/AvatarGroup/AvatarGroupOverflow.d.ts

@@ -11,7 +11,7 @@
  * - /packages/cli/assets/templates/blocks/components/AvatarGroup/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface AvatarGroupOverflowProps extends Omit<BaseProps<HTMLElement>, 'onClick'> {
     ref?: React.Ref<HTMLElement>;
     /**

package/dist/AvatarGroup/index.d.ts

@@ -6,10 +6,10 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/AvatarGroup/AvatarGroup.doc.mjs
  */
-export { AvatarGroup } from './AvatarGroup';
-export type { AvatarGroupProps } from './AvatarGroup';
-export { AvatarGroupOverflow } from './AvatarGroupOverflow';
-export type { AvatarGroupOverflowProps } from './AvatarGroupOverflow';
-export { useAvatarGroup } from './AvatarGroupContext';
-export type { AvatarGroupContextValue } from './AvatarGroupContext';
+export { AvatarGroup } from './AvatarGroup.js';
+export type { AvatarGroupProps } from './AvatarGroup.js';
+export { AvatarGroupOverflow } from './AvatarGroupOverflow.js';
+export type { AvatarGroupOverflowProps } from './AvatarGroupOverflow.js';
+export { useAvatarGroup } from './AvatarGroupContext.js';
+export type { AvatarGroupContextValue } from './AvatarGroupContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Badge/Badge.d.ts

@@ -12,8 +12,8 @@
  * - /packages/cli/assets/templates/blocks/components/Badge/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { BadgeVariantMap } from './index';
+import type { BaseProps } from '../BaseProps.js';
+import type { BadgeVariantMap } from './index.js';
 /**
  * Badge variant type derived from BadgeVariantMap.
  * Extensible via module augmentation of BadgeVariantMap.

package/dist/Badge/index.d.ts

@@ -35,6 +35,6 @@ export interface BadgeVariantMap {
     teal: true;
     yellow: true;
 }
-export { Badge } from './Badge';
-export type { BadgeProps, BadgeVariant } from './Badge';
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeVariant } from './Badge.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Banner/Banner.d.ts

@@ -46,10 +46,10 @@
  * - /packages/cli/assets/templates/blocks/components/Banner/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { CollapsibleConfig } from '../Collapsible/useCollapsible';
-import type { Elevation } from '../utils/types';
-import type { BannerStatusMap, BannerContainerMap } from './index';
+import type { BaseProps } from '../BaseProps.js';
+import type { CollapsibleConfig } from '../Collapsible/useCollapsible.js';
+import type { Elevation } from '../utils/types.js';
+import type { BannerStatusMap, BannerContainerMap } from './index.js';
 /**
  * Status type controlling the banner's icon and color.
  * Extensible via module augmentation of BannerStatusMap.

package/dist/Banner/index.d.ts

@@ -46,6 +46,6 @@ export interface BannerStatusMap {
     error: true;
     success: true;
 }
-export { Banner } from './Banner';
-export type { BannerProps, BannerStatus, BannerContainer } from './Banner';
+export { Banner } from './Banner.js';
+export type { BannerProps, BannerStatus, BannerContainer } from './Banner.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Blockquote/Blockquote.d.ts

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

package/dist/Blockquote/index.d.ts

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

package/dist/BottomSheet/BottomSheet.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file BottomSheet.tsx
- * @input Uses React, StyleX, core hooks, shared layer dismissal, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext
+ * @input Uses React, StyleX, core hooks, shared layer dismissal, the modal outlet registry, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext
  * @output Exports BottomSheet component and BottomSheetProps
  * @position Public BottomSheet router plus private standalone/switcher hosts
  *
@@ -23,6 +23,9 @@
  * in a switcher, handing one scrim between two dialogs and keeping focus in
  * the active sheet when a retained dialog closes.
  *
+ * While a standalone modal sheet is open, its dialog is the outlet that
+ * app-global surfaces (toasts) render into (Layer/modalOutlet.ts).
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
  * - /packages/core/src/BottomSheet/BottomSheetEdgeTint.tsx
@@ -32,15 +35,16 @@
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
  * - /packages/core/src/Layer/layerDismissalFamilies.test.tsx
  * - /packages/core/src/Layer/layerDismissalInvariants.test.tsx
+ * - /packages/core/src/Toast/ToastViewport.modalHost.test.tsx
  * - /apps/storybook/stories/BottomSheet.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
  */
 import { type RefObject, type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { DialogPurpose } from '../Dialog';
-import type { SpacingStep } from '../utils/types';
-export type { BottomSheetHeight, BottomSheetSnapPoint } from './BottomSheetPanel';
-import type { BottomSheetHeight, BottomSheetSnapPoint } from './BottomSheetPanel';
+import type { BaseProps } from '../BaseProps.js';
+import type { DialogPurpose } from '../Dialog/index.js';
+import type { SpacingStep } from '../utils/types.js';
+export type { BottomSheetHeight, BottomSheetSnapPoint } from './BottomSheetPanel.js';
+import type { BottomSheetHeight, BottomSheetSnapPoint } from './BottomSheetPanel.js';
 interface BottomSheetSharedProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the visual sheet panel <div>. */
     ref?: React.Ref<HTMLDivElement>;

package/dist/BottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAoBhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AA2FhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAikBxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAqBhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AA2FhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAukBxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}

package/dist/BottomSheet/BottomSheet.js

@@ -4,7 +4,7 @@
 
 /**
  * @file BottomSheet.tsx
- * @input Uses React, StyleX, core hooks, shared layer dismissal, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext
+ * @input Uses React, StyleX, core hooks, shared layer dismissal, the modal outlet registry, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext
  * @output Exports BottomSheet component and BottomSheetProps
  * @position Public BottomSheet router plus private standalone/switcher hosts
  *
@@ -27,6 +27,9 @@
  * in a switcher, handing one scrim between two dialogs and keeping focus in
  * the active sheet when a retained dialog closes.
  *
+ * While a standalone modal sheet is open, its dialog is the outlet that
+ * app-global surfaces (toasts) render into (Layer/modalOutlet.ts).
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
  * - /packages/core/src/BottomSheet/BottomSheetEdgeTint.tsx
@@ -36,6 +39,7 @@
  * - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
  * - /packages/core/src/Layer/layerDismissalFamilies.test.tsx
  * - /packages/core/src/Layer/layerDismissalInvariants.test.tsx
+ * - /packages/core/src/Toast/ToastViewport.modalHost.test.tsx
  * - /apps/storybook/stories/BottomSheet.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
  */
@@ -46,6 +50,7 @@ import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { useDevWarning, useScrollLock } from "../hooks/index.js";
 import { mergeProps } from "../utils/index.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
+import { useModalOutlet } from "../Layer/modalOutlet.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
 import { focusForLastInput } from "../utils/focusReturn.js";
 import { useInteractionModalityTracking } from "../utils/interactionModality.js";
@@ -253,6 +258,12 @@ function StandaloneBottomSheet({
       focusPanel(panelRef.current, hasScrim);
     }
   }, [hasScrim, isOpen]);
+
+  // Host app-global surfaces (toasts) inside this sheet while it is an open
+  // modal, so they stay visible and operable above it. A closing sheet stays
+  // modal through its exit animation, but inert and hidden, so it hands them
+  // back as soon as it starts closing.
+  useModalOutlet(dialogRef, isOpen && hasScrim);
   useEffect(() => {
     if (!isOpen && isPresented && hasScrim) {
       handleScrimOpacity(0);

package/dist/BottomSheet/BottomSheetPanel.d.ts

@@ -19,9 +19,9 @@
  * - /packages/core/src/Layout/container.stylex.ts (bottom-sheet padding chain)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { SpacingStep } from '../utils/types';
-import { type BottomSheetSnapPoint } from './snapOffsets';
+import type { BaseProps } from '../BaseProps.js';
+import type { SpacingStep } from '../utils/types.js';
+import { type BottomSheetSnapPoint } from './snapOffsets.js';
 declare const HEIGHT_BUDGETS: {
     readonly hug: "92dvh";
     readonly capped: "62dvh";

package/dist/BottomSheet/BottomSheetSwitcher.d.ts

@@ -50,7 +50,7 @@
  * - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetSwitcherShowcase.tsx
  */
 import { type ReactNode, type SyntheticEvent } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface BottomSheetSwitcherProps extends BaseProps<HTMLDialogElement> {
     /**
      * Ref resolved to the native dialog hosting the flow: the active sheet's

package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts

@@ -10,8 +10,8 @@
  * down to those sheet hosts.
  */
 import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, SyntheticEvent } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { DialogPurpose } from '../Dialog';
+import type { BaseProps } from '../BaseProps.js';
+import type { DialogPurpose } from '../Dialog/index.js';
 export type BottomSheetSwitcherPhase = 'entering' | 'active' | 'covered' | 'aligning' | 'fading' | 'exiting' | 'hidden';
 export interface BottomSheetSwitcherTransitionEvent {
     sheetId: string;

package/dist/BottomSheet/index.d.ts

@@ -4,8 +4,8 @@
  * @output Re-exports the BottomSheet public API
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { BottomSheet } from './BottomSheet';
-export type { BottomSheetHeight, BottomSheetProps, BottomSheetSnapPoint, } from './BottomSheet';
-export { BottomSheetSwitcher } from './BottomSheetSwitcher';
-export type { BottomSheetSwitcherProps } from './BottomSheetSwitcher';
+export { BottomSheet } from './BottomSheet.js';
+export type { BottomSheetHeight, BottomSheetProps, BottomSheetSnapPoint, } from './BottomSheet.js';
+export { BottomSheetSwitcher } from './BottomSheetSwitcher.js';
+export type { BottomSheetSwitcherProps } from './BottomSheetSwitcher.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Breadcrumbs/BreadcrumbItem.d.ts

@@ -19,10 +19,10 @@
  * - /packages/cli/assets/templates/blocks/components/Breadcrumbs/ (showcase blocks)
  */
 import React, { type ReactNode, type MouseEvent } from 'react';
-import type { LinkComponentType } from '../Link/types';
-import type { BaseProps } from '../BaseProps';
-import { type DropdownMenuSize } from '../DropdownMenu/DropdownMenuContext';
-import type { DropdownMenuOption } from '../DropdownMenu/DropdownMenu';
+import type { LinkComponentType } from '../Link/types.js';
+import type { BaseProps } from '../BaseProps.js';
+import { type DropdownMenuSize } from '../DropdownMenu/DropdownMenuContext.js';
+import type { DropdownMenuOption } from '../DropdownMenu/DropdownMenu.js';
 export interface BreadcrumbItemProps extends Omit<BaseProps<HTMLLIElement>, 'onClick'> {
     ref?: React.Ref<HTMLLIElement>;
     /**

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -12,8 +12,8 @@
  * - /packages/cli/assets/templates/blocks/components/Breadcrumbs/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { BreadcrumbsVariantMap } from './index';
+import type { BaseProps } from '../BaseProps.js';
+import type { BreadcrumbsVariantMap } from './index.js';
 /**
  * Visual variant for the breadcrumb trail.
  * - `'default'`: Standard text styling

package/dist/Breadcrumbs/index.d.ts

@@ -18,16 +18,16 @@ export interface BreadcrumbsVariantMap {
     default: true;
     supporting: true;
 }
-export { Breadcrumbs } from './Breadcrumbs';
-export type { BreadcrumbsProps, BreadcrumbsVariant } from './Breadcrumbs';
-export { BreadcrumbItem } from './BreadcrumbItem';
-export type { BreadcrumbItemProps } from './BreadcrumbItem';
-export { DropdownMenuItem as BreadcrumbMenuItem, type DropdownMenuItemProps as BreadcrumbMenuItemProps, } from '../DropdownMenu/DropdownMenuItem';
-export { DropdownMenuDivider as BreadcrumbMenuDivider, type DropdownMenuDividerProps as BreadcrumbMenuDividerProps, } from '../DropdownMenu/DropdownMenuDivider';
-export { DropdownMenuGroup as BreadcrumbMenuGroup, type DropdownMenuGroupProps as BreadcrumbMenuGroupProps, } from '../DropdownMenu/DropdownMenuGroup';
-export { DropdownMenuCheckboxItem as BreadcrumbMenuCheckboxItem, type DropdownMenuCheckboxItemProps as BreadcrumbMenuCheckboxItemProps, } from '../DropdownMenu/DropdownMenuCheckboxItem';
-export { DropdownMenuRadioGroup as BreadcrumbMenuRadioGroup, type DropdownMenuRadioGroupProps as BreadcrumbMenuRadioGroupProps, } from '../DropdownMenu/DropdownMenuRadioGroup';
-export { DropdownMenuRadioItem as BreadcrumbMenuRadioItem, type DropdownMenuRadioItemProps as BreadcrumbMenuRadioItemProps, } from '../DropdownMenu/DropdownMenuRadioItem';
-export { DropdownMenuSubMenu as BreadcrumbMenuSubMenu, type DropdownMenuSubMenuProps as BreadcrumbMenuSubMenuProps, } from '../DropdownMenu/DropdownMenuSubMenu';
-export type { DropdownMenuOption as BreadcrumbMenuOption, DropdownMenuItemData as BreadcrumbMenuItemData, DropdownMenuDividerData as BreadcrumbMenuDividerData, DropdownMenuSection as BreadcrumbMenuSection, } from '../DropdownMenu/DropdownMenu';
+export { Breadcrumbs } from './Breadcrumbs.js';
+export type { BreadcrumbsProps, BreadcrumbsVariant } from './Breadcrumbs.js';
+export { BreadcrumbItem } from './BreadcrumbItem.js';
+export type { BreadcrumbItemProps } from './BreadcrumbItem.js';
+export { DropdownMenuItem as BreadcrumbMenuItem, type DropdownMenuItemProps as BreadcrumbMenuItemProps, } from '../DropdownMenu/DropdownMenuItem.js';
+export { DropdownMenuDivider as BreadcrumbMenuDivider, type DropdownMenuDividerProps as BreadcrumbMenuDividerProps, } from '../DropdownMenu/DropdownMenuDivider.js';
+export { DropdownMenuGroup as BreadcrumbMenuGroup, type DropdownMenuGroupProps as BreadcrumbMenuGroupProps, } from '../DropdownMenu/DropdownMenuGroup.js';
+export { DropdownMenuCheckboxItem as BreadcrumbMenuCheckboxItem, type DropdownMenuCheckboxItemProps as BreadcrumbMenuCheckboxItemProps, } from '../DropdownMenu/DropdownMenuCheckboxItem.js';
+export { DropdownMenuRadioGroup as BreadcrumbMenuRadioGroup, type DropdownMenuRadioGroupProps as BreadcrumbMenuRadioGroupProps, } from '../DropdownMenu/DropdownMenuRadioGroup.js';
+export { DropdownMenuRadioItem as BreadcrumbMenuRadioItem, type DropdownMenuRadioItemProps as BreadcrumbMenuRadioItemProps, } from '../DropdownMenu/DropdownMenuRadioItem.js';
+export { DropdownMenuSubMenu as BreadcrumbMenuSubMenu, type DropdownMenuSubMenuProps as BreadcrumbMenuSubMenuProps, } from '../DropdownMenu/DropdownMenuSubMenu.js';
+export type { DropdownMenuOption as BreadcrumbMenuOption, DropdownMenuItemData as BreadcrumbMenuItemData, DropdownMenuDividerData as BreadcrumbMenuDividerData, DropdownMenuSection as BreadcrumbMenuSection, } from '../DropdownMenu/DropdownMenu.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Button/Button.d.ts

@@ -14,11 +14,11 @@
  * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, tooltip, endContent, href, as, target, rel
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { Elevation, SizeValue } from '../utils/types';
+import type { BaseProps } from '../BaseProps.js';
+import type { Elevation, SizeValue } from '../utils/types.js';
 import * as stylex from '@stylexjs/stylex';
-import type { LinkComponentType } from '../Link/types';
-import type { ButtonVariantMap } from './index';
+import type { LinkComponentType } from '../Link/types.js';
+import type { ButtonVariantMap } from './index.js';
 declare const sizeStyles: Readonly<{
     readonly sm: Readonly<{
         readonly height: stylex.StyleXClassNameFor<"height", "28px">;

package/dist/Button/index.d.ts

@@ -25,6 +25,6 @@ export interface ButtonVariantMap {
     ghost: true;
     destructive: true;
 }
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -17,10 +17,10 @@
  * - /packages/cli/assets/templates/blocks/components/ButtonGroup/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { ButtonSize } from '../Button';
-import type { Elevation } from '../utils/types';
-import type { BaseProps } from '../BaseProps';
-import type { ButtonGroupOrientation } from './ButtonGroupContext';
+import type { ButtonSize } from '../Button/index.js';
+import type { Elevation } from '../utils/types.js';
+import type { BaseProps } from '../BaseProps.js';
+import type { ButtonGroupOrientation } from './ButtonGroupContext.js';
 export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element. */
     ref?: React.Ref<HTMLDivElement>;

package/dist/ButtonGroup/index.d.ts

@@ -4,8 +4,8 @@
  * @output Exports ButtonGroup, context hook, and types
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { ButtonGroup } from './ButtonGroup';
-export type { ButtonGroupProps } from './ButtonGroup';
-export { useButtonGroup } from './ButtonGroupContext';
-export type { ButtonGroupOrientation, ButtonGroupContextValue, } from './ButtonGroupContext';
+export { ButtonGroup } from './ButtonGroup.js';
+export type { ButtonGroupProps } from './ButtonGroup.js';
+export { useButtonGroup } from './ButtonGroupContext.js';
+export type { ButtonGroupOrientation, ButtonGroupContextValue, } from './ButtonGroupContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Calendar/Calendar.d.ts

@@ -1,6 +1,6 @@
-import type { BaseProps } from '../BaseProps';
-export type { ISODateString, DayOfWeek, DayOfWeekName, DateRange, } from '../utils/dateTypes';
-import type { ISODateString, DayOfWeek, DayOfWeekName, DateRange } from '../utils/dateTypes';
+import type { BaseProps } from '../BaseProps.js';
+export type { ISODateString, DayOfWeek, DayOfWeekName, DateRange, } from '../utils/dateTypes.js';
+import type { ISODateString, DayOfWeek, DayOfWeekName, DateRange } from '../utils/dateTypes.js';
 /** Imperative handle for Calendar handleRef */
 export interface CalendarHandle {
     /** Navigate the calendar to show the month containing the given date */

package/dist/Calendar/dayCellUtils.d.ts

@@ -1,4 +1,4 @@
-import type { PlainDate } from '../utils/plainDate';
+import type { PlainDate } from '../utils/plainDate.js';
 export interface DayCellState {
     effectivelyDisabled: boolean;
     isToday: boolean;

package/dist/Calendar/getInitialFocusDate.d.ts

@@ -8,8 +8,8 @@
  * - /packages/core/src/Calendar/getInitialFocusDate.test.ts
  * - /packages/core/src/Calendar/Calendar.tsx (the only caller)
  */
-import type { ISODateString, DateRange } from '../utils/dateTypes';
-import { type PlainDate } from '../utils/plainDate';
+import type { ISODateString, DateRange } from '../utils/dateTypes.js';
+import { type PlainDate } from '../utils/plainDate.js';
 export interface InitialFocusDateOptions {
     /** Controlled visible month, if the consumer supplied one. */
     focusDate?: ISODateString;

package/dist/Calendar/getStandaloneShortWeekdayNames.d.ts

@@ -4,7 +4,7 @@
  * @output Private locale resolver for Calendar weekday headers
  * @position Calendar-internal pure utility; not exported from the package
  */
-import { type StandaloneShortWeekdayNames } from './standaloneShortWeekdayNames.generated';
+import { type StandaloneShortWeekdayNames } from './standaloneShortWeekdayNames.generated.js';
 /**
  * Resolve generated weekday reference data as exact locale -> language -> English.
  * Unicode extensions are ignored through Intl.Locale.baseName. Invalid tags and