@astryxdesign/core 0.5.2-canary.2da7a39 → 0.5.2-canary.2e51213

package/dist/Stepper/Step.js

@@ -5,7 +5,8 @@
 /**
  * @file Step.tsx
  * @input Uses React, stylex, theme tokens (including the motion duration token
- *   the connector fill animates on), StepperContext
+ *   the connector fill animates on), StepperContext, and per-step theme selector
+ *   state
  * @output Exports Step component and StepProps
  * @position Individual step item; used inside Stepper
  *
@@ -124,6 +125,37 @@ function CurrentIcon() {
 // --- Styles ---
 
 const BAR_WIDTH = spacingVars['--spacing-1'];
+
+/**
+ * How much of itself a connector gives up where it meets the indicator, read
+ * from the public `--step-connector-gap` declared on the Stepper root.
+ *
+ * Clipped, not padded. The gap has to apply to two layers — the track, which is
+ * the segment's own background, and the accent fill, which is an absolutely
+ * placed `::before`. Spending it on each separately meant two declarations on
+ * two boxes: a percentage then resolved against a different containing block
+ * for each and stopped them ~1.2px apart. `clip-path` is ONE declaration on the
+ * segment that clips the element and its pseudo-element together, against one
+ * reference box — so every accepted value behaves the same way on both layers,
+ * which is what a public input owes its full value domain.
+ *
+ * Clipping also cannot change layout: the segment keeps its box, so the node it
+ * positions cannot move and the Stepper cannot grow. A raw `1rem` padding grew
+ * a 180px stepper to 240px.
+ *
+ * Still clamped, because the value arrives with nothing in between to reject
+ * it. Both halves earn their place, and not for the reasons padding needed:
+ *
+ * - `max(0px, …)` — `inset()` ACCEPTS a negative length. Chromium computes
+ *   `inset(0 0 -4px 0)` as-is rather than dropping it, which is the opposite
+ *   of padding (there CSS clamps a negative to `0` for you). This normalises
+ *   it to `0` so a negative gap means "no gap" rather than a clip rect
+ *   stretched outside the segment's own box.
+ * - `min(…, --spacing-2)` — the flexible segment's own `min-height`, so an
+ *   oversized gap leaves a short track rather than an unbounded one.
+ */
+const CONNECTOR_GAP = `max(0px, min(var(--step-connector-gap, 0px), ${spacingVars['--spacing-2']}))`;
+
 // Every indicator — check, ring, custom icon, number badge — occupies the same
 // box, so the `auto` mode swapping a number for a check as a step completes
 // never nudges the label or the track.
@@ -503,6 +535,22 @@ const styles = {
     kaIpWk: "x2u8bby",
     $$css: true
   },
+  otSegGapLeadV: {
+    kz4h6p: "x1yxrbr4",
+    $$css: true
+  },
+  otSegGapRailV: {
+    kz4h6p: "x1eyou77",
+    $$css: true
+  },
+  otSegGapLeadH: {
+    kz4h6p: "x17qoqre x153f7d5",
+    $$css: true
+  },
+  otSegGapRailH: {
+    kz4h6p: "x13hy1yx x7cmjge",
+    $$css: true
+  },
   otSegFlexV: {
     kUk6DE: "x98rzlu",
     kAzted: "x175cymr",
@@ -773,13 +821,29 @@ export function Step({
   const hasIndicator = indicator !== 'none';
   const labelColorStyle = isDisabled ? styles.labelDisabled : progress === 'not-started' ? styles.labelNotStarted : isActive ? styles.labelInProgress : undefined;
 
+  // Both text parts carry {progress, status}, the phase vocabulary of
+  // `step-indicator` above. The label additionally owns Stepper's disabled
+  // paint, so it alone carries disabled below.
+  const labelThemeProps = themeProps('step-label', {
+    progress,
+    status: status ?? undefined,
+    // The label owns Stepper's disabled paint (`styles.labelDisabled` above),
+    // so it owns the selector too. The description does not change under
+    // disabled and deliberately keeps the smaller {progress, status} surface.
+    disabled: isDisabled ? 'disabled' : null
+  });
+  const descriptionThemeProps = themeProps('step-description', {
+    progress,
+    status: status ?? undefined
+  });
+
   // Indicator + Label row
   const iconLabelNode = /*#__PURE__*/_jsxs("div", {
     ...{
       className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj"
     },
     children: [indicatorNode, /*#__PURE__*/_jsx("span", {
-      ...stylex.props(styles.label, labelColorStyle),
+      ...mergeProps(labelThemeProps, stylex.props(styles.label, labelColorStyle)),
       children: label
     }), statusTextNode, isOptional && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("span", {
@@ -805,9 +869,9 @@ export function Step({
       }
     }[!!hasIndicator << 0],
     children: /*#__PURE__*/_jsx("span", {
-      ...{
+      ...mergeProps(descriptionThemeProps, {
         className: "x1lliihq x141an7d x1ojctns xv1l7n4"
-      },
+      }),
       children: description
     })
   }) : null;
@@ -873,7 +937,7 @@ export function Step({
         }
       }[!!isVertical << 0],
       children: [/*#__PURE__*/_jsx("span", {
-        ...stylex.props(styles.label, labelColorStyle),
+        ...mergeProps(labelThemeProps, stylex.props(styles.label, labelColorStyle)),
         children: label
       }), statusTextNode, isOptional && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("span", {
@@ -890,9 +954,9 @@ export function Step({
       }), endContent]
     });
     const otDescriptionNode = isRenderable(description) ? /*#__PURE__*/_jsx("span", {
-      ...{
+      ...mergeProps(descriptionThemeProps, {
         className: "x1lliihq x141an7d x1ojctns xv1l7n4"
-      },
+      }),
       children: description
     }) : null;
     const otContentNode = !isRenderable(children) ? null : isVertical ? /*#__PURE__*/_jsxs("div", {
@@ -924,10 +988,10 @@ export function Step({
           ...stylex.props(styles.otIndicatorColV, styles.otRailBridgeV(densitySpace)),
           children: [/*#__PURE__*/_jsx("div", {
             "aria-hidden": "true",
-            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegLeadV(densitySpace), styles.connectorTrack, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
+            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegLeadV(densitySpace), styles.connectorTrack, hasIndicator && styles.otSegGapLeadV, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
           }), indicatorNode, /*#__PURE__*/_jsx("div", {
             "aria-hidden": "true",
-            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, styles.connectorTrack, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
+            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, styles.connectorTrack, hasIndicator && styles.otSegGapRailV, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
           })]
         }), /*#__PURE__*/_jsxs("div", {
           ...{
@@ -963,10 +1027,10 @@ export function Step({
         },
         children: [/*#__PURE__*/_jsx("div", {
           "aria-hidden": "true",
-          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
+          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, hasIndicator && styles.otSegGapLeadH, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
         }), indicatorNode, /*#__PURE__*/_jsx("div", {
           "aria-hidden": "true",
-          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
+          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, hasIndicator && styles.otSegGapRailH, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
         })]
       }), /*#__PURE__*/_jsxs("div", {
         ...stylex.props(styles.otLabelWrapH, styles.otMarginTop(densitySpace)),

package/dist/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAyC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAE9B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;CAC9C;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,WAA0B,EAC1B,WAAW,EACX,KAAK,EAAE,cAAc,EACrB,OAAoB,EACpB,iBAA+B,EAC/B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,+BA0Gd;yBAvHe,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAyC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAE9B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;CAC9C;AAwCD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,WAA0B,EAC1B,WAAW,EACX,KAAK,EAAE,cAAc,EACrB,OAAoB,EACpB,iBAA+B,EAC/B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,+BA0Gd;yBAvHe,OAAO"}

package/dist/Stepper/Stepper.js

@@ -36,6 +36,7 @@ const styles = {
     kH6xsr: "x3ct3a4",
     kogj98: "x1ghz6dp",
     kmVPX3: "x1717udv",
+    "--step-connector-gap": "x152dxt4",
     $$css: true
   },
   horizontal: {

package/dist/TabList/TabList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../src/TabList/TabList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,QAAQ,EACb,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAQlD,OAAO,EAAC,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAsBjE;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAyLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,IAAI,EACJ,QAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,kBAAkB,EAChC,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,gBAAgB,EACpC,CAAC,cAAc,CAAC,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,YAAY,qBA+Ud;yBApWe,OAAO"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../src/TabList/TabList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,QAAQ,EACb,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAQlD,OAAO,EAAC,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAsBjE;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAyLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,IAAI,EACJ,QAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,kBAAkB,EAChC,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,gBAAgB,EACpC,CAAC,cAAc,CAAC,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,YAAY,qBA8Ud;yBAnWe,OAAO"}

package/dist/TabList/TabList.js

@@ -34,7 +34,7 @@ import { isRtlElement } from "../hooks/isRtlElement.js";
 import { Icon } from "../Icon/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
-import { observeResize, unobserveResize } from "../utils/sharedResizeObserver.js";
+import { observeResize } from "../utils/sharedResizeObserver.js";
 import { devWarn } from "../utils/devWarning.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useTranslator } from "../i18n/index.js";
@@ -372,8 +372,7 @@ export function TabList({
       return;
     }
     const onResize = () => revealSelectedTabRef.current();
-    observeResize(root, onResize);
-    return () => unobserveResize(root);
+    return observeResize(root, onResize);
   }, [hasScroll, listRef]);
   const scrollByPage = useCallback(direction => {
     const strip = stripRef.current;

package/dist/Table/index.d.ts

@@ -6,6 +6,21 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/Table/Table.doc.mjs
  */
+import type { IconName } from '../Icon';
+import type { TableRowStatusColor } from './plugins/rowStatus/useTableRowStatus';
+/** Stable custom row-status marker contract. */
+export interface TableRowStatus {
+    color: TableRowStatusColor | (string & {});
+    icon?: IconName;
+    label: string;
+}
+/** Semantic row outcome resolved through the active theme. */
+export interface TableSemanticRowStatus {
+    status: 'success' | 'warning' | 'error';
+    color?: never;
+    icon?: never;
+    label: string;
+}
 export { Table } from './Table';
 export { TableRow } from './TableRow';
 export { TableCell } from './TableCell';
@@ -53,7 +68,7 @@ export type { UseTableStickyColumnsConfig } from './plugins/stickyColumns';
 export type { UseTableRowExpansionConfig } from './plugins/rowExpansion';
 export type { UseTableRowIndexConfig } from './plugins/rowIndex';
 export type { UseTableGroupedRowsConfig, UseTableGroupedRowsResult, } from './plugins/groupedRows';
-export type { UseTableRowStatusConfig, TableRowStatus, } from './plugins/rowStatus';
+export type { UseTableRowStatusConfig } from './plugins/rowStatus';
 export type { TableTreeRowMeta, UseTableTreeDataConfig, UseTableTreeStateConfig, UseTableTreeStateResult, } from './plugins/tree';
 export type { UseTableFilteringConfig, TableFilterState, TableFilterVariant, TableFilterValue, TableFilterFieldRef, } from './plugins/filtering';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"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"}

package/dist/Table/index.js

@@ -9,6 +9,10 @@
  * SYNC: When modified, update this header and /packages/core/src/Table/Table.doc.mjs
  */
 
+/** Stable custom row-status marker contract. */
+
+/** Semantic row outcome resolved through the active theme. */
+
 export { Table } from "./Table.js";
 export { TableRow } from "./TableRow.js";
 export { TableCell } from "./TableCell.js";

package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableColumnResize.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/columnResize/useTableColumnResize.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EAEZ,MAAM,aAAa,CAAC;AAWrB,MAAM,WAAW,0BAA0B;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEtC;;;OAGG;IACH;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;CAClD;AAymBD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,GACjC,WAAW,CAAC,CAAC,CAAC,CAuKhB"}
+{"version":3,"file":"useTableColumnResize.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/columnResize/useTableColumnResize.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EAEZ,MAAM,aAAa,CAAC;AAQrB,MAAM,WAAW,0BAA0B;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEtC;;;OAGG;IACH;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAE9D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;CAClD;AAymBD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,GACjC,WAAW,CAAC,CAAC,CAAC,CAsKhB"}

package/dist/Table/plugins/columnResize/useTableColumnResize.js

@@ -17,7 +17,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { colorVars } from "../../../theme/tokens.stylex.js";
 import { DEFAULT_MIN_COLUMN_WIDTH } from "../../columnUtils.js";
-import { observeResize, unobserveResize } from "../../../utils/sharedResizeObserver.js";
+import { observeResize } from "../../../utils/sharedResizeObserver.js";
 
 // =============================================================================
 // Config Type
@@ -490,11 +490,11 @@ export function useTableColumnResize(config) {
   // --table-resize-height on the <table> element. This is initialized
   // entirely by the resize plugin — the base table has no knowledge of it.
   const observedTableRef = useRef(null);
+  const unobserveTableRef = useRef(null);
   const measureRef = useCallback(el => {
-    if (observedTableRef.current) {
-      unobserveResize(observedTableRef.current);
-      observedTableRef.current = null;
-    }
+    unobserveTableRef.current?.();
+    unobserveTableRef.current = null;
+    observedTableRef.current = null;
     if (!el) {
       return;
     }
@@ -503,7 +503,7 @@ export function useTableColumnResize(config) {
       tableRef.current = table;
     }
     if (table && typeof ResizeObserver !== 'undefined') {
-      observeResize(table, () => {
+      unobserveTableRef.current = observeResize(table, () => {
         const height = table.getBoundingClientRect().height;
         table.style.setProperty('--table-resize-height', `${height}px`);
       });
@@ -514,9 +514,8 @@ export function useTableColumnResize(config) {
   // Clean up observer on unmount
   useEffect(() => {
     return () => {
-      if (observedTableRef.current) {
-        unobserveResize(observedTableRef.current);
-      }
+      unobserveTableRef.current?.();
+      unobserveTableRef.current = null;
     };
   }, []);
   return useMemo(() => ({

package/dist/Table/plugins/rowStatus/index.d.ts

@@ -1,3 +1,3 @@
 export { useTableRowStatus } from './useTableRowStatus';
-export type { UseTableRowStatusConfig, TableRowStatus, } from './useTableRowStatus';
+export type { UseTableRowStatusConfig } from './useTableRowStatus';
 //# sourceMappingURL=index.d.ts.map

package/dist/Table/plugins/rowStatus/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowStatus/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EACV,uBAAuB,EACvB,cAAc,GACf,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowStatus/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,uBAAuB,EAAC,MAAM,qBAAqB,CAAC"}

package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts

@@ -1,31 +1,10 @@
-import { type IconName } from '../../../Icon';
+import type { TableRowStatus, TableSemanticRowStatus } from '../../index';
 import type { TablePlugin } from '../../types';
 /**
- * Semantic status colors, resolved to the design system's icon color tokens.
- * Prefer these over raw CSS so status colors stay consistent with the theme.
+ * Named colors supported by the custom row-status marker. These resolve to the
+ * design system's icon color tokens; raw CSS colors remain an escape hatch.
  */
 export type TableRowStatusColor = 'accent' | 'success' | 'error' | 'warning' | 'red' | 'orange' | 'green' | 'yellow' | 'blue' | 'gray';
-/**
- * A row's status indicator. `color` accepts a semantic status color
- * (mapped to a theme token) or any raw CSS color string as an escape hatch.
- * By default the plugin renders a colored status dot. Provide `icon` to signal
- * status by shape as well as color, which is more accessible when several
- * statuses coexist. `label` is required so the status is never conveyed by
- * color alone — it names the indicator for assistive technology and shows on
- * hover. Return `null` for rows with no status.
- */
-export interface TableRowStatus {
-    /** Semantic status color (preferred) or a raw CSS color string. */
-    color: TableRowStatusColor | (string & {});
-    /** Optional icon rendered as the signifier instead of the dot (shape as an a11y differentiator). */
-    icon?: IconName;
-    /**
-     * Accessible name for the status, announced to assistive technology and
-     * shown in a tooltip on hover. Required: a status must never be conveyed by
-     * color alone.
-     */
-    label: string;
-}
 /** Configuration for {@link useTableRowStatus}. */
 export interface UseTableRowStatusConfig<T extends Record<string, unknown>> {
     /**
@@ -35,23 +14,25 @@ export interface UseTableRowStatusConfig<T extends Record<string, unknown>> {
      * @example
      * ```
      * getStatus: row =>
-     *   row.hasError ? {color: 'error', icon: 'error', label: 'Error'} : null
+     *   row.hasError ? {status: 'error', label: 'Error'} : null
      * ```
      */
-    getStatus: (item: T) => TableRowStatus | null;
+    getStatus: (item: T) => (TableRowStatus & {
+        status?: never;
+    }) | TableSemanticRowStatus | null;
 }
 /**
  * Returns a {@link TablePlugin} that prepends a narrow column signaling per-row
- * status: a colored status dot by default, or an icon when `icon` is provided
- * (shape + color is more accessible than color alone).
+ * status. A semantic `status` resolves a themed glyph and tone; a custom
+ * `color` renders the stable dot unless the caller also provides an `icon`.
  *
  * @example
  * ```
  * const rowStatus = useTableRowStatus<Row>({
  *   getStatus: row =>
  *     row.state === 'error'
- *       ? {color: 'error', icon: 'error', label: 'Error'}
- *       : null,
+ *       ? {status: 'error', label: 'Error'}
+ *       : {color: 'blue', icon: 'info', label: 'Informational'},
  * });
  * <Table data={data} columns={columns} idKey="id" plugins={{rowStatus}} />;
  * ```

package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRowStatus.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowStatus/useTableRowStatus.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIlE,OAAO,KAAK,EAAc,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,KAAK,GACL,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;AA6BX;;;;;;;;GAQG;AACH,MAAM,WAAW,cAAc;IAC7B,mEAAmE;IACnE,KAAK,EAAE,mBAAmB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3C,oGAAoG;IACpG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,mDAAmD;AACnD,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE;;;;;;;;;OASG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,cAAc,GAAG,IAAI,CAAC;CAC/C;AA2BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CAoDhB"}
+{"version":3,"file":"useTableRowStatus.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowStatus/useTableRowStatus.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,cAAc,EAAE,sBAAsB,EAAC,MAAM,aAAa,CAAC;AACxE,OAAO,KAAK,EAAc,WAAW,EAAC,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,OAAO,GACP,SAAS,GACT,KAAK,GACL,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;AA+BX,mDAAmD;AACnD,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE;;;;;;;;;OASG;IACH,SAAS,EAAE,CACT,IAAI,EAAE,CAAC,KACJ,CAAC,cAAc,GAAG;QAAC,MAAM,CAAC,EAAE,KAAK,CAAA;KAAC,CAAC,GAAG,sBAAsB,GAAG,IAAI,CAAC;CAC1E;AAgGD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CAkEhB"}

package/dist/Table/plugins/rowStatus/useTableRowStatus.js

@@ -4,26 +4,31 @@
 
 /**
  * @file useTableRowStatus.tsx
- * @input React, StyleX, Icon, i18n, VisuallyHidden, Table types
+ * @input React, StyleX, Icon, i18n, dev warnings, VisuallyHidden, Table types
  * @output Exports useTableRowStatus hook + config type
  * @position Row-status plugin; consumed by Table via plugins prop
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Table/index.ts (exports)
+ * - /packages/core/src/Table/useTableRowStatus.doc.mjs
+ * - /packages/core/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx
+ * - /apps/storybook/stories/TableRowStatus.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/Table/TableRowStatusTable.tsx
  */
 import { useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Icon } from "../../../Icon/index.js";
 import { Tooltip } from "../../../Tooltip/index.js";
 import { useTranslator } from "../../../i18n/index.js";
+import { warnOnce } from "../../../utils/devWarning.js";
 import { VisuallyHidden } from "../../../VisuallyHidden/index.js";
 
 /**
- * Semantic status colors, resolved to the design system's icon color tokens.
- * Prefer these over raw CSS so status colors stay consistent with the theme.
+ * Named colors supported by the custom row-status marker. These resolve to the
+ * design system's icon color tokens; raw CSS colors remain an escape hatch.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const SEMANTIC_COLORS = {
+const NAMED_COLORS = {
   accent: 'var(--color-icon-accent)',
   success: 'var(--color-icon-green)',
   error: 'var(--color-icon-red)',
@@ -36,8 +41,8 @@ const SEMANTIC_COLORS = {
   gray: 'var(--color-icon-gray)'
 };
 
-/** Icon colors that map cleanly from a semantic status color. */
-const ICON_COLOR_BY_STATUS = {
+/** Preserve the released Icon color mapping for named custom-marker colors. */
+const ICON_COLOR_BY_NAMED_COLOR = {
   accent: 'accent',
   success: 'success',
   error: 'error',
@@ -50,28 +55,53 @@ const ICON_COLOR_BY_STATUS = {
   gray: 'gray'
 };
 
-/**
- * A row's status indicator. `color` accepts a semantic status color
- * (mapped to a theme token) or any raw CSS color string as an escape hatch.
- * By default the plugin renders a colored status dot. Provide `icon` to signal
- * status by shape as well as color, which is more accessible when several
- * statuses coexist. `label` is required so the status is never conveyed by
- * color alone — it names the indicator for assistive technology and shows on
- * hover. Return `null` for rows with no status.
- */
-
 /** Configuration for {@link useTableRowStatus}. */
 
-// The status column holds a small centered dot (or an icon when provided).
-// A fixed narrow width keeps every row's indicator aligned in one gutter.
+// The status column holds a small centered dot or icon. A fixed narrow width
+// keeps every row's indicator aligned in one gutter.
 const STATUS_COLUMN_WIDTH = {
   type: 'pixel',
   value: 28
 };
 
-/** Resolve a semantic color name to a token, or pass a raw CSS color through. */
+/** Resolve a named color to a token, or pass a raw CSS color through. */
 function resolveColor(color) {
-  return SEMANTIC_COLORS[color] ?? color;
+  return NAMED_COLORS[color] ?? color;
+}
+function isTableRowSemanticStatus(value) {
+  return value === 'success' || value === 'warning' || value === 'error';
+}
+function resolveTableRowStatus(value) {
+  const untypedValue = value;
+  if (isTableRowSemanticStatus(untypedValue.status)) {
+    if (process.env.NODE_ENV !== 'production' && (Object.prototype.hasOwnProperty.call(untypedValue, 'color') || Object.prototype.hasOwnProperty.call(untypedValue, 'icon'))) {
+      warnOnce('useTableRowStatus:semantic-custom-conflict', 'useTableRowStatus', 'status cannot be combined with color or icon. The semantic status takes precedence and the custom marker fields are ignored.');
+    }
+    return {
+      variant: 'icon',
+      icon: untypedValue.status,
+      iconColor: untypedValue.status
+    };
+  }
+  if (typeof untypedValue.color !== 'string') {
+    return null;
+  }
+  if (typeof untypedValue.icon === 'string') {
+    const namedIconColor = ICON_COLOR_BY_NAMED_COLOR[untypedValue.color];
+    return namedIconColor == null ? {
+      variant: 'icon',
+      icon: untypedValue.icon,
+      customColor: untypedValue.color
+    } : {
+      variant: 'icon',
+      icon: untypedValue.icon,
+      iconColor: namedIconColor
+    };
+  }
+  return {
+    variant: 'dot',
+    color: resolveColor(untypedValue.color)
+  };
 }
 const _temp = {
   kzqmXN: "x1xc55vz",
@@ -81,6 +111,18 @@ const _temp = {
   "$$css": true
 };
 const styles = {
+  wrap: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    $$css: true
+  },
+  customIcon: color => [{
+    kMwMTN: color != null ? "x14rh7hd" : color,
+    $$css: true
+  }, {
+    "--x-color": color != null ? color : undefined
+  }],
   dot: color => [_temp, {
     kWkggS: color != null ? "xl8spv7" : color,
     $$css: true
@@ -91,16 +133,16 @@ const styles = {
 
 /**
  * Returns a {@link TablePlugin} that prepends a narrow column signaling per-row
- * status: a colored status dot by default, or an icon when `icon` is provided
- * (shape + color is more accessible than color alone).
+ * status. A semantic `status` resolves a themed glyph and tone; a custom
+ * `color` renders the stable dot unless the caller also provides an `icon`.
  *
  * @example
  * ```
  * const rowStatus = useTableRowStatus<Row>({
  *   getStatus: row =>
  *     row.state === 'error'
- *       ? {color: 'error', icon: 'error', label: 'Error'}
- *       : null,
+ *       ? {status: 'error', label: 'Error'}
+ *       : {color: 'blue', icon: 'info', label: 'Informational'},
  * });
  * <Table data={data} columns={columns} idKey="id" plugins={{rowStatus}} />;
  * ```
@@ -110,43 +152,47 @@ export function useTableRowStatus(config) {
   const {
     getStatus
   } = config;
-  return useMemo(() => ({
-    transformColumns(columns) {
-      const statusColumn = {
-        key: '__rowStatus',
-        // The gutter stays visually blank, but the th needs a discernible
-        // name for assistive technology (axe: empty-table-header).
-        header: /*#__PURE__*/_jsx(VisuallyHidden, {
-          children: t('@astryx.table.rowStatus.columnHeader')
-        }),
-        width: STATUS_COLUMN_WIDTH,
-        resizable: false,
-        renderCell: item => {
-          const status = getStatus(item);
-          if (!status) {
-            return null;
-          }
-          const signifier = status.icon ? /*#__PURE__*/_jsx(Icon, {
-            icon: status.icon,
-            size: "xsm",
-            color: ICON_COLOR_BY_STATUS[status.color] ?? 'primary'
-          }) : /*#__PURE__*/_jsx("span", {
-            ...stylex.props(styles.dot(resolveColor(status.color)))
-          });
-          return /*#__PURE__*/_jsx(Tooltip, {
-            content: status.label,
-            children: /*#__PURE__*/_jsx("span", {
-              ...{
-                className: "x78zum5 x6s0dn4 xl56j7k"
-              },
-              role: "img",
-              "aria-label": status.label,
-              children: signifier
-            })
-          });
+  return useMemo(() => {
+    const statusColumn = {
+      key: '__rowStatus',
+      // The gutter stays visually blank, but the th needs a discernible
+      // name for assistive technology (axe: empty-table-header).
+      header: /*#__PURE__*/_jsx(VisuallyHidden, {
+        children: t('@astryx.table.rowStatus.columnHeader')
+      }),
+      width: STATUS_COLUMN_WIDTH,
+      resizable: false,
+      renderCell: item => {
+        const status = getStatus(item);
+        if (!status) {
+          return null;
         }
-      };
-      return [statusColumn, ...columns];
-    }
-  }), [getStatus, t]);
+        const resolvedStatus = resolveTableRowStatus(status);
+        if (!resolvedStatus) {
+          return null;
+        }
+        const signifier = resolvedStatus.variant === 'dot' ? /*#__PURE__*/_jsx("span", {
+          ...stylex.props(styles.dot(resolvedStatus.color))
+        }) : /*#__PURE__*/_jsx(Icon, {
+          icon: resolvedStatus.icon,
+          size: "xsm",
+          color: 'iconColor' in resolvedStatus ? resolvedStatus.iconColor : 'inherit'
+        });
+        return /*#__PURE__*/_jsx(Tooltip, {
+          content: status.label,
+          children: /*#__PURE__*/_jsx("span", {
+            ...stylex.props(styles.wrap, resolvedStatus.variant === 'icon' && 'customColor' in resolvedStatus && styles.customIcon(resolvedStatus.customColor)),
+            role: "img",
+            "aria-label": status.label,
+            children: signifier
+          })
+        });
+      }
+    };
+    return {
+      transformColumns(columns) {
+        return [statusColumn, ...columns];
+      }
+    };
+  }, [getStatus, t]);
 }