@astryxdesign/core 0.2.0 → 0.3.0

package/dist/Popover/usePopover.js

@@ -21,6 +21,7 @@ import { useFocusTrap } from "../hooks/useFocusTrap.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
+import { rtlStyles } from "../utils/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,6 +35,18 @@ const styles = {
   contentWrapper: {
     kVAEAm: "x1n2onr6",
     $$css: true
+  },
+  closeButtonWrapper: {
+    kVAEAm: "x10l6tqk",
+    krVfgx: "x1ey2m1c",
+    kY2c9j: "x1vjfegm",
+    kzqmXN: "x1i1rx1s x10okhzq",
+    kZKoxP: "xjm9jq1 x132qfvm",
+    kVQacm: "xb3r6kr x1dordxg",
+    kz4h6p: "x1hyvwdk x10wafsz",
+    kfzvcC: "x47corl xbt4iw",
+    kLKAdn: "xexx8yu x1kw28su",
+    $$css: true
   }
 };
 
@@ -182,9 +195,7 @@ export function usePopover(options = {}) {
       "aria-label": role === 'dialog' ? dialogLabel : undefined,
       ...stylex.props(styles.contentWrapper, hasSurface && styles.surface, xstyle),
       children: [children, hasCloseButton && /*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x10l6tqk x1ey2m1c x1nrll8i x31h1t8 x1vjfegm x1i1rx1s x10okhzq xjm9jq1 x132qfvm xb3r6kr x1dordxg x1hyvwdk x10wafsz x47corl xbt4iw xexx8yu x1kw28su"
-        },
+        ...stylex.props(styles.closeButtonWrapper, rtlStyles.centerInline('100%')),
         children: /*#__PURE__*/_jsx(Button, {
           variant: "secondary",
           label: closeButtonLabel,

package/dist/PowerSearch/PowerSearch.d.ts

@@ -7,7 +7,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/PowerSearch/index.ts
- * - /packages/cli/templates/blocks/components/PowerSearch/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/PowerSearch/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/PowerSearch/PowerSearch.js

@@ -11,7 +11,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/PowerSearch/index.ts
- * - /packages/cli/templates/blocks/components/PowerSearch/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/PowerSearch/ (showcase blocks)
  */
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/ProgressBar/ProgressBar.d.ts

@@ -1,29 +1,32 @@
 import type { BaseProps } from '../BaseProps';
-/**
- * Extensible variant map for ProgressBar.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/ProgressBar' {
- *   interface ProgressBarVariantMap {
- *     'brand': true;
- *   }
- * }
- * ```
- */
-export interface ProgressBarVariantMap {
-    accent: true;
-    success: true;
-    warning: true;
-    neutral: true;
-    error: true;
-}
+import type { ProgressBarVariantMap } from './index';
 /**
  * Progress bar variant type — maps to semantic color tokens.
  * Extensible via module augmentation of ProgressBarVariantMap.
  */
 export type ProgressBarVariant = keyof ProgressBarVariantMap;
+/**
+ * A fixed target mark drawn on the progress track.
+ *
+ * Positioned by `value` in the same `0..max` scale as the bar's `value` prop —
+ * mirroring the object shape of Slider's `marks` so the two APIs stay
+ * consistent.
+ */
+export interface ProgressBarMark {
+    /**
+     * Position of the mark in the same `0..max` scale as `value`. Values
+     * outside the range are clamped to the track edges.
+     */
+    value: number;
+    /**
+     * Names the mark. A mark stands for something meaningful on the track — a
+     * goal, a threshold, a quarter target — so a label is required: it is the
+     * mark's accessible name and the text revealed in a `Tooltip` on hover and
+     * keyboard focus. Can be the value itself (e.g. `'70%'`) or something richer
+     * (e.g. `'Q1 target: 50%'`).
+     */
+    label: string;
+}
 export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;
@@ -71,6 +74,14 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
      * @default false
      */
     isIndeterminate?: boolean;
+    /**
+     * Target marks drawn on the track at fixed points in the same `0..max`
+     * scale as `value` — e.g. a goal line. Marks stay visible whether progress
+     * is below or past them. Each mark's required `label` names it for assistive
+     * tech and is revealed via a `Tooltip` on hover/focus. Ignored when
+     * `isIndeterminate` is true.
+     */
+    marks?: ReadonlyArray<ProgressBarMark>;
     /**
      * When true, the progress bar is visually disabled — the fill bar and
      * text use disabled colors. Use for canceled or inactive operations.
@@ -91,7 +102,8 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
  *
  * ProgressBar is intentionally minimal — compose additional labels, status
  * icons, and descriptions alongside the bar using layout components rather
- * than adding props to ProgressBar itself.
+ * than adding props to ProgressBar itself. The exception is on-track content
+ * like `marks`, which are positioned by value over the track.
  *
  * Styles use Astryx theme tokens via StyleX.
  * Wrap your app in <Theme> to apply a theme.
@@ -103,9 +115,24 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
  * <ProgressBar value={3.2} max={5} label="Disk usage" hasValueLabel
  *   formatValueLabel={(v, m) => `${v} GB / ${m} GB`} />
  * <ProgressBar value={30} label="Canceled" isDisabled hasValueLabel />
+ * <ProgressBar value={45} label="Fundraiser" marks={[{value: 80, label: 'Goal'}]} />
+ * ```
+ *
+ * A mark's height, width, and color are directly themeable via the
+ * `progressbar-mark` target — e.g. a taller "goal flag" tick that overhangs the
+ * bar (centered, so the overhang is symmetric):
+ *
+ * @example
+ * ```
+ * defineTheme({
+ *   name: 'campaign',
+ *   components: {
+ *     'progressbar-mark': {base: {height: '16px', backgroundColor: 'red'}},
+ *   },
+ * });
  * ```
  */
-export declare function ProgressBar({ value, max, label, isLabelHidden, hasValueLabel, formatValueLabel, variant, isIndeterminate, isDisabled, xstyle, className, style, 'data-testid': dataTestId, ref, ...rest }: ProgressBarProps): import("react").JSX.Element;
+export declare function ProgressBar({ value, max, label, isLabelHidden, hasValueLabel, formatValueLabel, variant, isIndeterminate, isDisabled, marks, xstyle, className, style, 'data-testid': dataTestId, ref, ...rest }: ProgressBarProps): import("react").JSX.Element;
 export declare namespace ProgressBar {
     var displayName: string;
 }

package/dist/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkID;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAuFlB;yBAvGe,WAAW"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAUnD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+KD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAqIlB;yBAtJe,WAAW"}

package/dist/ProgressBar/ProgressBar.js

@@ -11,37 +11,38 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/ProgressBar/ProgressBar.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/ProgressBar/ProgressBar.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/ProgressBar/ProgressBarMarkTooltip.tsx (the lazy Tooltip wrapper for labeled marks)
  * - /packages/core/src/ProgressBar/index.ts (exports if types change)
  * - /apps/storybook/stories/ProgressBar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/ProgressBar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ProgressBar/ (showcase blocks)
  */
-import { useId } from 'react';
+import { lazy, Suspense, useId } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Every mark is wrapped in a Tooltip (marks always carry a label), so load it
+// lazily: a ProgressBar with no marks never bundles the Tooltip chunk. While it
+// loads, the Suspense fallback shows the bare mark, so nothing disappears; the
+// tooltip simply attaches once the chunk is ready.
+const LazyProgressBarMarkTooltip = /*#__PURE__*/lazy(async () => import("./ProgressBarMarkTooltip.js"));
 
 /**
- * Extensible variant map for ProgressBar.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/ProgressBar' {
- *   interface ProgressBarVariantMap {
- *     'brand': true;
- *   }
- * }
- * ```
+ * Progress bar variant type — maps to semantic color tokens.
+ * Extensible via module augmentation of ProgressBarVariantMap.
  */
 
 /**
- * Progress bar variant type — maps to semantic color tokens.
- * Extensible via module augmentation of ProgressBarVariantMap.
+ * A fixed target mark drawn on the progress track.
+ *
+ * Positioned by `value` in the same `0..max` scale as the bar's `value` prop —
+ * mirroring the object shape of Slider's `marks` so the two APIs stay
+ * consistent.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 // =============================================================================
 // Indeterminate animation
 // =============================================================================
@@ -125,7 +126,8 @@ function defaultFormatValueLabel(value, max) {
  *
  * ProgressBar is intentionally minimal — compose additional labels, status
  * icons, and descriptions alongside the bar using layout components rather
- * than adding props to ProgressBar itself.
+ * than adding props to ProgressBar itself. The exception is on-track content
+ * like `marks`, which are positioned by value over the track.
  *
  * Styles use Astryx theme tokens via StyleX.
  * Wrap your app in <Theme> to apply a theme.
@@ -137,6 +139,21 @@ function defaultFormatValueLabel(value, max) {
  * <ProgressBar value={3.2} max={5} label="Disk usage" hasValueLabel
  *   formatValueLabel={(v, m) => `${v} GB / ${m} GB`} />
  * <ProgressBar value={30} label="Canceled" isDisabled hasValueLabel />
+ * <ProgressBar value={45} label="Fundraiser" marks={[{value: 80, label: 'Goal'}]} />
+ * ```
+ *
+ * A mark's height, width, and color are directly themeable via the
+ * `progressbar-mark` target — e.g. a taller "goal flag" tick that overhangs the
+ * bar (centered, so the overhang is symmetric):
+ *
+ * @example
+ * ```
+ * defineTheme({
+ *   name: 'campaign',
+ *   components: {
+ *     'progressbar-mark': {base: {height: '16px', backgroundColor: 'red'}},
+ *   },
+ * });
  * ```
  */
 export function ProgressBar({
@@ -149,6 +166,7 @@ export function ProgressBar({
   variant = 'accent',
   isIndeterminate = false,
   isDisabled = false,
+  marks,
   xstyle,
   className,
   style,
@@ -168,6 +186,19 @@ export function ProgressBar({
   const valueText = formatValueLabel(clampedValue, safeMax);
   const showValueLabel = hasValueLabel && !isIndeterminate;
   const fillVariant = isDisabled ? 'disabled' : variant;
+
+  // Marks make no sense without a determinate value, so they are only drawn
+  // in determinate mode. Non-finite mark values are dropped; the rest are
+  // clamped to the track edges, matching the bar's own `clampedValue`.
+  const resolvedMarks = !isIndeterminate && marks ? marks.filter(mark => Number.isFinite(mark.value)).map(mark => {
+    const clamped = Math.min(Math.max(0, mark.value), safeMax);
+    const pct = safeMax > 0 ? clamped / safeMax * 100 : 0;
+    return {
+      value: mark.value,
+      label: mark.label,
+      pct
+    };
+  }) : [];
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...mergeProps(themeProps('progressbar', {
@@ -210,7 +241,7 @@ export function ProgressBar({
     }) : /*#__PURE__*/_jsx(VisuallyHidden, {
       id: labelId,
       children: label
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       role: "progressbar",
       "aria-valuenow": isIndeterminate ? undefined : clampedValue,
       "aria-valuemin": isIndeterminate ? undefined : 0,
@@ -218,9 +249,14 @@ export function ProgressBar({
       "aria-labelledby": labelId,
       "aria-valuetext": isIndeterminate ? undefined : valueText,
       ...mergeProps(themeProps('progressbar-track'), {
-        className: "xh8yej3 xdk7pt xwmxj5m xjspbzw xb3r6kr"
-      }),
-      children: isIndeterminate ? /*#__PURE__*/_jsx("div", {
+        0: {
+          className: "x1n2onr6 xh8yej3 xdk7pt xwmxj5m xjspbzw"
+        },
+        1: {
+          className: "x1n2onr6 xh8yej3 xdk7pt xwmxj5m xjspbzw xb3r6kr"
+        }
+      }[!!isIndeterminate << 0]),
+      children: [isIndeterminate ? /*#__PURE__*/_jsx("div", {
         ...mergeProps(themeProps('progressbar-fill', {
           variant: fillVariant
         }), stylex.props(styles.indeterminateFill, variantStyles[fillVariant]))
@@ -231,7 +267,28 @@ export function ProgressBar({
         style: {
           width: `${percentage}%`
         }
-      })
+      }), resolvedMarks.map(mark => {
+        // The tick element. It is both the Tooltip's anchor and the Suspense
+        // fallback shown while the lazy Tooltip chunk loads, so the tick is
+        // always visible and the label attaches once ready. The list `key`
+        // lives on the mapped <Suspense>, not here.
+        const markEl = /*#__PURE__*/_jsx("span", {
+          tabIndex: 0,
+          ...mergeProps(themeProps('progressbar-mark'), {
+            className: "x10l6tqk xwa60dl xfo62xy xdk7pt x19aspcf x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x11lhmoz xoffwj3"
+          }),
+          style: {
+            insetInlineStart: `${mark.pct}%`
+          }
+        });
+        return /*#__PURE__*/_jsx(Suspense, {
+          fallback: markEl,
+          children: /*#__PURE__*/_jsx(LazyProgressBarMarkTooltip, {
+            content: mark.label,
+            children: markEl
+          })
+        }, `${mark.value}:${mark.label}`);
+      })]
     })]
   });
 }

package/dist/ProgressBar/ProgressBarMarkTooltip.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file ProgressBarMarkTooltip.tsx
+ * @input Uses React, Tooltip, the mark element to wrap, and its label
+ * @output Default-exports the lazily-loaded Tooltip wrapper for a labeled mark
+ * @position Split out of ProgressBar so the Tooltip only loads when a mark is
+ *   actually rendered — a ProgressBar with no marks never bundles the Tooltip
+ *   chunk.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/ProgressBar/ProgressBar.tsx (the lazy() + Suspense wrapper)
+ * - /packages/core/src/ProgressBar/ProgressBar.test.tsx
+ */
+import type { ReactElement } from 'react';
+export interface ProgressBarMarkTooltipProps {
+    /** The mark's accessible name / visible tooltip text. */
+    content: string;
+    /** The bare mark element the tooltip anchors to (also the Suspense fallback). */
+    children: ReactElement;
+}
+/**
+ * Wraps a labeled mark in a `Tooltip` that reveals its label on hover and
+ * keyboard focus. Placement and focus behavior match the inline usage this
+ * split replaced (`placement="above"`, `focusTrigger="always"`), so the
+ * rendered result is identical — only the load timing changes.
+ */
+export default function ProgressBarMarkTooltip({ content, children, }: ProgressBarMarkTooltipProps): ReactElement;
+//# sourceMappingURL=ProgressBarMarkTooltip.d.ts.map

package/dist/ProgressBar/ProgressBarMarkTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarMarkTooltip.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBarMarkTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,2BAA2B;IAC1C,yDAAyD;IACzD,OAAO,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,OAAO,EACP,QAAQ,GACT,EAAE,2BAA2B,GAAG,YAAY,CAM5C"}

package/dist/ProgressBar/ProgressBarMarkTooltip.js

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ProgressBarMarkTooltip.tsx
+ * @input Uses React, Tooltip, the mark element to wrap, and its label
+ * @output Default-exports the lazily-loaded Tooltip wrapper for a labeled mark
+ * @position Split out of ProgressBar so the Tooltip only loads when a mark is
+ *   actually rendered — a ProgressBar with no marks never bundles the Tooltip
+ *   chunk.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/ProgressBar/ProgressBar.tsx (the lazy() + Suspense wrapper)
+ * - /packages/core/src/ProgressBar/ProgressBar.test.tsx
+ */
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Wraps a labeled mark in a `Tooltip` that reveals its label on hover and
+ * keyboard focus. Placement and focus behavior match the inline usage this
+ * split replaced (`placement="above"`, `focusTrigger="always"`), so the
+ * rendered result is identical — only the load timing changes.
+ */
+export default function ProgressBarMarkTooltip({
+  content,
+  children
+}) {
+  return /*#__PURE__*/_jsx(Tooltip, {
+    content: content,
+    placement: "above",
+    focusTrigger: "always",
+    children: children
+  });
+}

package/dist/ProgressBar/index.d.ts

@@ -1,6 +1,26 @@
 /**
  * @file ProgressBar component barrel export
  */
+/**
+ * Extensible variant map for ProgressBar.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/ProgressBar' {
+ *   interface ProgressBarVariantMap {
+ *     'brand': true;
+ *   }
+ * }
+ * ```
+ */
+export interface ProgressBarVariantMap {
+    accent: true;
+    success: true;
+    warning: true;
+    neutral: true;
+    error: true;
+}
 export { ProgressBar } from './ProgressBar';
-export type { ProgressBarProps, ProgressBarVariant, ProgressBarVariantMap, } from './ProgressBar';
+export type { ProgressBarProps, ProgressBarMark, ProgressBarVariant, } from './ProgressBar';
 //# sourceMappingURL=index.d.ts.map

package/dist/ProgressBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/ProgressBar/index.js

@@ -5,4 +5,18 @@
 /**
  * @file ProgressBar component barrel export
  */
+
+/**
+ * Extensible variant map for ProgressBar.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/ProgressBar' {
+ *   interface ProgressBarVariantMap {
+ *     'brand': true;
+ *   }
+ * }
+ * ```
+ */
 export { ProgressBar } from "./ProgressBar.js";

package/dist/RadioList/RadioList.d.ts

@@ -9,7 +9,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
 import type { InputStatus } from '../Field/types';

package/dist/RadioList/RadioList.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 import React, { createContext, useCallback, useId, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/RadioList/RadioListItem.d.ts

@@ -11,7 +11,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';

package/dist/RadioList/RadioListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsJ5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAsHpB;yBAlIe,aAAa"}
+{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6J5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAsHpB;yBAlIe,aAAa"}

package/dist/RadioList/RadioListItem.js

@@ -15,7 +15,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 import React, { use, useId } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -97,7 +97,7 @@ const styles = {
   },
   innerDot: {
     kaIpWk: "x16rqkct",
-    kWkggS: "x1azo05",
+    kWkggS: "x1azo05 xwvh9j7",
     $$css: true
   }
 };

package/dist/Resizable/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAOnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAqNzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAgRnB;yBA/Re,YAAY"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAOnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAgNzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA6RnB;yBA5Se,YAAY"}

package/dist/Resizable/ResizeHandle.js

@@ -17,12 +17,16 @@
  * Pill placement uses a single stylex dynamic style that accepts a direction
  * multiplier (-1 or 1). The pill element has its own themeProps
  * ('resize-handle-pill') so themes can target size/shape directly.
+ *
+ * While the panel is collapsed, aria-valuenow is clamped to aria-valuemin
+ * (a value below the minimum is invalid per WCAG 4.1.2) and a localized
+ * "Collapsed" aria-valuetext announces the real state.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
-import { mergeProps, mergeRefs } from "../utils/index.js";
+import { mergeProps, mergeRefs, rtlStyles } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -151,11 +155,6 @@ const styles = {
     kkrTdU: "xyozgr7",
     $$css: true
   },
-  hitAreaCenteredX: {
-    kLqNvP: "xbudbmw",
-    k3aq6I: "xuuh30",
-    $$css: true
-  },
   hitAreaCenteredY: {
     k87sOh: "xwa60dl",
     k3aq6I: "x1cb1t30",
@@ -171,8 +170,6 @@ const styles = {
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
     k87sOh: "xwa60dl",
-    kLqNvP: "xbudbmw",
-    k3aq6I: "x11lhmoz",
     $$css: true
   },
   pillHorizontal: {
@@ -424,9 +421,15 @@ export function ResizeHandle({
   }, []);
 
   // --- ARIA ---
-  const ariaValueNow = resizable ? resizable._size : undefined;
+  // When collapsed the panel's real size (0) sits below aria-valuemin, which
+  // is invalid per WCAG 4.1.2. Clamp aria-valuenow to the minimum and announce
+  // the true state via aria-valuetext instead; the valuetext is removed as
+  // soon as the panel expands so the numeric value reads again.
+  const isCollapsed = resizable?._isCollapsed ?? false;
+  const ariaValueNow = resizable ? isCollapsed ? Math.max(resizable._size, resizable._minSizePx) : resizable._size : undefined;
   const ariaValueMin = resizable ? resizable._minSizePx : undefined;
   const ariaValueMax = resizable && resizable._maxSizePx !== Infinity ? resizable._maxSizePx : undefined;
+  const ariaValueText = resizable && isCollapsed ? t('@astryx.resizable.collapsed') : undefined;
   return /*#__PURE__*/_jsxs("div", {
     ref: mergeRefs(ref, handleRef),
     role: "separator",
@@ -434,6 +437,7 @@ export function ResizeHandle({
     "aria-valuenow": ariaValueNow,
     "aria-valuemin": ariaValueMin,
     "aria-valuemax": ariaValueMax,
+    "aria-valuetext": ariaValueText,
     "aria-label": label,
     "aria-disabled": isDisabled || undefined,
     tabIndex: isDisabled ? -1 : 0,
@@ -458,7 +462,7 @@ export function ResizeHandle({
       // centered (no bias) just center the hit area on the divider; when
       // it's offset to a panel side, reuse the pill's physical-offset
       // construction so the two stay aligned in LTR and RTL alike.
-      hitBiasDir == null ? isHorizontal ? styles.hitAreaCenteredX : styles.hitAreaCenteredY : isHorizontal ? dynamicStyles.hitAreaOffsetX(hitBiasDir) : dynamicStyles.hitAreaOffsetY(hitBiasDir), isDisabled && styles.disabled),
+      hitBiasDir == null ? isHorizontal ? rtlStyles.centerInline('0px') : styles.hitAreaCenteredY : isHorizontal ? dynamicStyles.hitAreaOffsetX(hitBiasDir) : dynamicStyles.hitAreaOffsetY(hitBiasDir), isDisabled && styles.disabled),
       onPointerDown: handlePointerDown,
       onPointerEnter: () => setIsHovered(true),
       onPointerLeave: () => {
@@ -467,7 +471,7 @@ export function ResizeHandle({
         }
       }
     }), children ?? /*#__PURE__*/_jsx("div", {
-      ...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide !== 'center' && (isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1)), isAlwaysVisible ? styles.pillVisible : styles.pillHidden, isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive))
+      ...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide === 'center' ? rtlStyles.centerInline('-50%') : isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1), isAlwaysVisible ? styles.pillVisible : styles.pillHidden, isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive))
     })]
   });
 }

package/dist/Section/Section.d.ts

@@ -8,29 +8,12 @@
  * - /packages/core/src/Section/Section.doc.mjs (props table, features)
  * - /packages/core/src/Section/index.ts (exports if types change)
  * - /apps/storybook/stories/Section.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Section/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Section/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue, SpacingStep } from '../utils/types';
-/**
- * Extensible variant map for Section.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Section' {
- *   interface SectionVariantMap {
- *     'elevated': true;
- *   }
- * }
- * ```
- */
-export interface SectionVariantMap {
-    section: true;
-    transparent: true;
-    muted: true;
-}
+import type { SectionVariantMap } from './index';
 /**
  * Visual variant for the section.
  * Extensible via module augmentation of SectionVariantMap.