@astryxdesign/core 0.7.5-canary.f2dafed → 0.7.5-canary.f3c78b2

package/README.md

@@ -165,15 +165,18 @@ The `tailwind-theme.css` import maps system tokens to Tailwind utilities via `@t
 
 Some useful mappings:
 
-| Tailwind class                                            | Astryx token                                      |
-| --------------------------------------------------------- | ------------------------------------------------- |
-| `text-primary` / `text-secondary`                         | `--color-text-primary` / `--color-text-secondary` |
-| `bg-surface` / `bg-card` / `bg-body`                      | `--color-background-surface` / `card` / `body`    |
-| `border-border` / `border-strong`                         | `--color-border` / `--color-border-emphasized`    |
-| `bg-success` / `text-error` / `text-warning`              | Status tokens                                     |
-| `bg-blue-subtle` / `border-blue-ring` / `text-blue-vivid` | Hue palette (×10 hues)                            |
-| `rounded-sm` / `rounded-md` / `rounded-lg`                | `--radius-inner` / `element` / `container`        |
-| `shadow-sm` / `shadow-md` / `shadow-lg`                   | `--shadow-low` / `med` / `high`                   |
+| Tailwind class                                               | Astryx token                                                     |
+| ------------------------------------------------------------ | ---------------------------------------------------------------- |
+| `text-primary` / `text-secondary`                            | `--color-text-primary` / `--color-text-secondary`                |
+| `bg-surface` / `bg-card` / `bg-body`                         | `--color-background-surface` / `card` / `body`                   |
+| `border-border` / `border-strong`                            | `--color-border` / `--color-border-emphasized`                   |
+| `bg-info` / `bg-success` / `bg-warning` / `bg-error`         | Strong status fills (`--color-<status>`)                         |
+| `text-on-info` / `bg-info-muted` / `text-on-info-muted`      | Strong-fill content, pale fill, pale-fill content                |
+| `text-success` / `text-warning` / `text-error` / `text-info` | Status text on the page (`--color-text-*`; also `text-status-*`) |
+| `border-success` / `border-warning` / `border-error`         | Status borders (`--color-border-*`)                              |
+| `bg-blue-subtle` / `border-blue-ring` / `text-blue-vivid`    | Hue palette (×10 hues)                                           |
+| `rounded-sm` / `rounded-md` / `rounded-lg`                   | `--radius-inner` / `element` / `container`                       |
+| `shadow-sm` / `shadow-md` / `shadow-lg`                      | `--shadow-low` / `med` / `high`                                  |
 
 Spacing references `var(--spacing-1)` as the base unit, so `p-4` = 16px, matching Astryx's `--spacing-4`. Arbitrary values still work as an escape hatch: `bg-[var(--color-background-surface)]`.
 

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/AlertDialog.js

@@ -28,7 +28,7 @@ import { Button } from "../Button/index.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
-import { useMediaQuery } from "../hooks/index.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SMALL_SCREEN_QUERY = '(max-width: 640px)';
 const styles = {

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.
@@ -176,28 +176,6 @@ export interface AppShellProps extends BaseProps<HTMLDivElement> {
      */
     topNav?: ReactNode;
 }
-/**
- * Page shell for an application. Provides the structural frame for an app:
- * top navigation, side navigation, and main content area.
- *
- * Slot-based API with `topNav`, `sideNav`, `banner`, and `children`.
- * Supports two height modes (`fill` and `auto`), responsive side nav
- * collapse, and mobile overlay with backdrop.
- *
- * @example
- * ```
- * <AppShell
- *   topNav={<TopNav label="Navigation" heading={<TopNavHeading heading="My App" />} />}
- *   sideNav={<SideNav>{navSections}</SideNav>}
- *   mobileNav={
- *     <MobileNav isOpen={mobileOpen} onOpenChange={(open) => setMobileOpen(open)} header="My App">
- *       {navSections}
- *     </MobileNav>
- *   }>
- *   <Content />
- * </AppShell>
- * ```
- */
 export declare function AppShell({ variant, banner, children, contentPadding, 'data-testid': dataTestId, height, mobileNav, sideNav, topNav, xstyle, className, style, ref, ...rest }: AppShellProps): React.JSX.Element;
 export declare namespace AppShell {
     var displayName: string;

package/dist/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAoBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAsChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkLD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA0bf;yBAzce,QAAQ"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAsChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAqND,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAykBf;yBAxlBe,QAAQ"}

package/dist/AppShell/AppShell.js

@@ -31,6 +31,9 @@ import { LayoutContent } from "../Layout/LayoutContent.js";
 import { MobileNavToggle } from "../MobileNav/MobileNavToggle.js";
 import { MAX_CLOSE_DELAY_MS as MOBILE_NAV_MAX_CLOSE_DELAY_MS } from "../MobileNav/MobileNav.js";
 import { SideNavRenderContext } from "../SideNav/SideNavRenderContext.js";
+import { SideNavShellContext } from "../SideNav/railMotion.js";
+import { useAnimatedLayout } from "../hooks/useAnimatedLayout.js";
+import { holdLayoutSwap, landLayoutGlide, layoutMotionFor, playLayoutFrames, playLayoutSwap, reportLayoutChange } from "../motion/animatedLayout.js";
 import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
 import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
 import { AppShellMobileContext } from "./AppShellMobileContext.js";
@@ -229,6 +232,18 @@ const styles = {
  * </AppShell>
  * ```
  */
+
+/**
+ * The column beside the rail that holds `main`: its ancestor whose parent
+ * also holds the rail. The glide moves it; the rail's edge rides it.
+ */
+function columnOf(main, rail) {
+  let column = main;
+  while (column.parentElement != null && !column.parentElement.contains(rail)) {
+    column = column.parentElement;
+  }
+  return column;
+}
 export function AppShell({
   variant = 'elevated',
   banner,
@@ -437,6 +452,139 @@ export function AppShell({
   }) : undefined;
 
   // =========================================================================
+  // While the inline side nav collapses or expands, the content area holds
+  // its own animated layout handle (`component:AppShell` FR17): the column
+  // beside the rail glides from its old place, and the content swaps its old
+  // wrap for its new one in place (`spec:AST-105` FR8), on the rail's clock
+  // (`component:SideNav` FR6).
+  const railRef = useRef(null);
+  const mainRef = useRef(null);
+  const backdropRef = useRef(null);
+  const contentLayout = useAnimatedLayout({
+    containerRef: shellRef
+  });
+  const pendingContentRef = useRef(null);
+  // The running swap: when it started and its wraps' starting opacities, so a
+  // change made during it starts its cross-fade from what the content shows.
+  const lastSwapRef = useRef(null);
+  const sideNavShell = useMemo(() => ({
+    animatedLayout: contentLayout,
+    rail: () => railRef.current,
+    column: () => mainRef.current == null ? null : columnOf(mainRef.current, railRef.current),
+    landContent() {
+      if (mainRef.current != null) {
+        landLayoutGlide(columnOf(mainRef.current, railRef.current));
+      }
+    },
+    beforeRailChange() {
+      const main = mainRef.current;
+      if (main == null) {
+        return;
+      }
+      const motion = layoutMotionFor(main);
+      // Only a spring glides the column; under Reduce Motion the two wraps
+      // cross-fade over a steady surface (`design:reduced-motion` DR2).
+      let change = null;
+      if (motion.kind === 'spring') {
+        change = reportLayoutChange(contentLayout, railRef);
+        change.measureBefore();
+      }
+      // At rest the copy (the wrap shown now) starts opaque and the entering
+      // wrap unseen; mid-swap the wrap in the DOM is the entering one and
+      // the copy's wrap is the one entering next, each at what it shows.
+      let held = 1;
+      let entering = 0;
+      const last = lastSwapRef.current;
+      if (last != null && motion.kind === 'spring') {
+        const elapsed = Number(main.ownerDocument.timeline?.currentTime ?? 0) - last.startedAt;
+        if (elapsed < motion.progress.durationMs) {
+          const p = 1 - motion.progress.remaining(elapsed);
+          held = last.entering + (1 - last.entering) * p;
+          entering = last.held * (1 - p);
+        }
+      }
+      lastSwapRef.current = null;
+      pendingContentRef.current = {
+        change,
+        swap: holdLayoutSwap(contentLayout, main, {
+          isVisiblePart: true
+        }),
+        before: main.getBoundingClientRect(),
+        held,
+        entering
+      };
+    },
+    afterRailChange() {
+      const pending = pendingContentRef.current;
+      pendingContentRef.current = null;
+      const main = mainRef.current;
+      if (pending == null || main == null) {
+        return () => {};
+      }
+      pending.change?.animate();
+      // The column beside the rail, which the glide moves: the copy sits
+      // beside it, in its parent, and rides its glide.
+      const column = columnOf(main, railRef.current);
+      const after = main.getBoundingClientRect();
+      const isRtl = getComputedStyle(main).direction === 'rtl';
+      const travel = isRtl ? pending.before.right - after.right : pending.before.left - after.left;
+      // An expand slides the narrower column in from its old start, which
+      // opens a gap at its trailing edge: the content surface (the elevated
+      // backdrop, or the main element) reaches over it as it closes,
+      // whether or not the old wrap is held.
+      const cover = [];
+      const surface = backdropRef.current ?? main;
+      const color = getComputedStyle(surface).backgroundColor;
+      const isPainted = !/^rgba\(.*,\s*0\)$|^transparent$/.test(color);
+      const glides = layoutMotionFor(main).kind === 'spring';
+      if ((isRtl ? travel > 0 : travel < 0) && glides && isPainted) {
+        cover.push({
+          element: surface,
+          frames: p => ({
+            boxShadow: `${-travel * (1 - p)}px 0px 0px 0px ${color}`
+          })
+        });
+      }
+      if (pending.swap == null || column.parentElement == null) {
+        return playLayoutFrames(contentLayout, cover);
+      }
+      // Under Reduce Motion nothing glides: the old wrap's copy paints the
+      // surface it sat on, so that surface fades out with it where it was
+      // (`design:reduced-motion` DR2) instead of leaving a bare strip.
+      if (!glides && isPainted) {
+        pending.swap.copy.style.backgroundColor = color;
+      }
+      const {
+        held,
+        entering
+      } = pending;
+      lastSwapRef.current = {
+        startedAt: Number(main.ownerDocument.timeline?.currentTime ?? 0),
+        held,
+        entering
+      };
+      return playLayoutSwap(pending.swap, {
+        host: column.parentElement,
+        copy: p => ({
+          opacity: held * (1 - p)
+        }),
+        rideWith: {
+          element: column,
+          travel: {
+            x: travel,
+            y: 0
+          }
+        },
+        incoming: [...Array.from(main.children, element => ({
+          element,
+          frames: p => ({
+            opacity: entering + (1 - entering) * p
+          })
+        })), ...cover]
+      });
+    }
+  }), [contentLayout]);
+
   // Build sideNav content
   //
   // In auto mode, the sideNav panel is not internally scrollable (the page
@@ -445,6 +593,7 @@ export function AppShell({
   // the sticky behavior since LayoutPanel doesn't accept style/className.
   // =========================================================================
   const sideNavPanel = showSideNavInline ? /*#__PURE__*/_jsx(LayoutPanel, {
+    ref: railRef,
     padding: 0,
     hasDivider: navHasDividers,
     isScrollable: isFill,
@@ -452,7 +601,10 @@ export function AppShell({
       variant
     }),
     xstyle: [navAreaStyle, isAuto && stickyBgStyle, isAuto && styles.panelAutoFill],
-    children: sideNav
+    children: /*#__PURE__*/_jsx(SideNavShellContext, {
+      value: sideNavShell,
+      children: sideNav
+    })
   }) : undefined;
   const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/_jsx("div", {
     ...{
@@ -466,6 +618,7 @@ export function AppShell({
   // =========================================================================
   const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
   const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
+    ref: mainRef,
     padding: contentPadding ?? 0,
     role: "main",
     id: MAIN_CONTENT_ID
@@ -490,6 +643,7 @@ export function AppShell({
       }
     }[!!shouldElevateWithCorner << 0],
     children: [shouldElevateWithCorner && /*#__PURE__*/_jsx("div", {
+      ref: backdropRef,
       ...{
         className: "x10l6tqk x10a8y8t x10xzikg x183tx6i x47corl"
       }

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/AvatarStatusDot.js

@@ -92,7 +92,7 @@ const styles = {
   },
   success: {
     kWkggS: "xdsz4j9",
-    kMwMTN: "xrkvqaz",
+    kMwMTN: "xri61p4",
     $$css: true
   },
   neutral: {
@@ -102,7 +102,7 @@ const styles = {
   },
   error: {
     kWkggS: "x1pjz0fi",
-    kMwMTN: "xrkvqaz",
+    kMwMTN: "x1m024r3",
     $$css: true
   },
   icon: {

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/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA0G7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAsCZ;yBA/Ce,KAAK"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA8I7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAsCZ;yBA/Ce,KAAK"}

package/dist/Badge/Badge.js

@@ -55,23 +55,39 @@ const variants = {
     $$css: true
   },
   info: {
-    kWkggS: "x1ewilqj",
-    kMwMTN: "x17wrial",
+    kWkggS: "xcc0xtb",
+    kMwMTN: "x1jxcxwi",
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     $$css: true
   },
   success: {
     kWkggS: "xdsz4j9",
     kMwMTN: "xri61p4",
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     $$css: true
   },
   warning: {
     kWkggS: "x1q8g9m5",
     kMwMTN: "xrebv38",
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     $$css: true
   },
   error: {
     kWkggS: "x1pjz0fi",
     kMwMTN: "x1m024r3",
+    kMeerF: "xcthrzx",
+    k3XXqK: "x815t2r",
+    kjBf7l: "x3teovq",
+    kInvED: "xvr1dqx",
     $$css: true
   },
   blue: {

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

@@ -8,6 +8,7 @@
  * - Banner frame (themeProps 'banner-frame'): owns the resting elevation and,
  *   for elevated card banners, the outer radius that shapes that shadow
  * - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
+ * - End area restores the ordinary text context for consumer `endContent`; built-in controls opt back into the status foreground
  * - Content area (themeProps 'banner-content'): card background for additional content (children)
  * - Status icon (themeProps 'banner-icon'): the target rides on the default
  *   <Icon> itself — the element that paints — so 'status:X' overrides reach
@@ -46,10 +47,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/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAyMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAkPb;yBAtQe,MAAM"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4QD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAqQb;yBAzRe,MAAM"}