@astryxdesign/core 0.5.2-canary.48cb3a4 → 0.5.2-canary.4a48880

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

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAoBhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAoxBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAytBX;yBA1uBe,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAoBhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAgtBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAqtBX;yBAtuBe,IAAI"}

package/dist/Stepper/Step.js

@@ -124,37 +124,6 @@ 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.
@@ -534,22 +503,6 @@ 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",
@@ -971,10 +924,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, hasIndicator && styles.otSegGapLeadV, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
+            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegLeadV(densitySpace), styles.connectorTrack, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
           }), indicatorNode, /*#__PURE__*/_jsx("div", {
             "aria-hidden": "true",
-            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, styles.connectorTrack, hasIndicator && styles.otSegGapRailV, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
+            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, styles.connectorTrack, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
           })]
         }), /*#__PURE__*/_jsxs("div", {
           ...{
@@ -1010,10 +963,10 @@ export function Step({
         },
         children: [/*#__PURE__*/_jsx("div", {
           "aria-hidden": "true",
-          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, hasIndicator && styles.otSegGapLeadH, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
+          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
         }), indicatorNode, /*#__PURE__*/_jsx("div", {
           "aria-hidden": "true",
-          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, hasIndicator && styles.otSegGapRailH, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
+          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, 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;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"}
+{"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"}

package/dist/Stepper/Stepper.js

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

package/dist/Timestamp/Timestamp.d.ts

@@ -10,8 +10,8 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
     /**
      * Display format.
      * - `'relative'`: "2 hours ago", "yesterday", "now"
-     * - `'relative_short'`: "2h ago", "1d ago", "now" in English — the
-     *   locale's native narrow relative-time pattern, for compact,
+     * - `'relative_short'`: "2h ago", "1d ago", "now" — the same tiers as
+     *   `'relative'` with abbreviated units (s/m/h/d/mo/y), for compact,
      *   space-constrained surfaces
      * - `'auto'`: Relative for recent times, `date_time` for older
      * - `'date'`: "Mar 21, 2025"

package/dist/Timestamp/Timestamp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAK9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EACV,qBAAqB,EAEtB,MAAM,kBAAkB,CAAC;AAY1B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,gBAAgB,GAChB,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;;;;;;OAkBG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACtD;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+ED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,cAAc,EACd,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,cAAc,sCA+JhB;yBAjLe,SAAS"}
+{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAK9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EACV,qBAAqB,EAEtB,MAAM,kBAAkB,CAAC;AAY1B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,gBAAgB,GAChB,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;;;;;;OAkBG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACtD;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,cAAc,EACd,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,cAAc,sCA+JhB;yBAjLe,SAAS"}

package/dist/Timestamp/Timestamp.js

@@ -4,12 +4,11 @@
 
 /**
  * @file Timestamp.tsx
- * @input Uses React, Text, provider locale, and Timestamp formatters
+ * @input Uses React, Intl.DateTimeFormat, Text
  * @output Exports Timestamp component and related types
  * @position Core implementation; renders formatted timestamps
  *
  * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Timestamp/formatRelativeTime.ts
  * - /packages/core/src/Timestamp/Timestamp.doc.mjs
  * - /packages/core/src/Timestamp/Timestamp.test.tsx
  * - /packages/core/src/Timestamp/index.ts
@@ -25,7 +24,6 @@ import { useTranslator } from "../i18n/index.js";
 import { useLocale } from "../i18n/useLocale.js";
 import { themeProps } from "../utils/themeProps.js";
 import { formatInstant } from "./formatInstant.js";
-import { formatRelativeTime } from "./formatRelativeTime.js";
 import { formatTooltipLines } from "./tooltipEntries.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 // Load the overlay lazily so a card-less Timestamp — the default — never
@@ -49,9 +47,23 @@ const LazyTimestampHoverCard = /*#__PURE__*/lazy(async () => import("./Timestamp
 const MINUTE = 60;
 const HOUR = 3600;
 const DAY = 86400;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
 
 /** Default auto threshold: 7 days in seconds */
 const DEFAULT_AUTO_THRESHOLD = 7 * DAY;
+
+/**
+ * Tolerance (in seconds) for treating a *future* timestamp as the present.
+ * A value only a handful of seconds ahead of our reference clock is almost
+ * always clock skew — the displayed `now` lagging the real clock, or the value
+ * being produced on a slightly faster clock — not a genuine future event, so
+ * it reads as "now" rather than a confusing "in a few seconds". The future
+ * side gets a wider window than the past (which only needs to absorb the
+ * sub-second render-time lag) because future drift is far more likely to be
+ * skew than real.
+ */
+const FUTURE_SKEW_TOLERANCE = 30;
 function parseValue(value) {
   if (typeof value === 'number') {
     // Heuristic: if the number is less than 1e12, treat as seconds; otherwise ms.
@@ -60,6 +72,135 @@ function parseValue(value) {
   }
   return new Date(value);
 }
+function getRelativeTimeString(date, now) {
+  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
+
+  // Treat values at (or a hair before/after) the present as "now". The
+  // internal `now` reference is captured at render time, so it can lag the
+  // real clock; a value equal to "right now" can land a fraction of a second
+  // in the future and round to a small negative delta. Without this clamp,
+  // such values fall into the future branch and render "in a few seconds".
+  if (Math.abs(diffSeconds) < 10) {
+    return 'now';
+  }
+  if (diffSeconds < 0) {
+    // Future dates
+    const absDiff = Math.abs(diffSeconds);
+    // A value only a few seconds ahead of our clock is almost always skew, not
+    // a genuine future event — render it as the present rather than a
+    // confusing "in a few seconds". Wider than the past window above on
+    // purpose (see FUTURE_SKEW_TOLERANCE).
+    if (absDiff <= FUTURE_SKEW_TOLERANCE) {
+      return 'now';
+    }
+    if (absDiff < MINUTE) {
+      return 'in a few seconds';
+    }
+    if (absDiff < HOUR) {
+      const mins = Math.floor(absDiff / MINUTE);
+      return `in ${mins} ${mins === 1 ? 'minute' : 'minutes'}`;
+    }
+    if (absDiff < DAY) {
+      const hours = Math.floor(absDiff / HOUR);
+      return `in ${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+    }
+    if (absDiff < MONTH) {
+      const days = Math.floor(absDiff / DAY);
+      return `in ${days} ${days === 1 ? 'day' : 'days'}`;
+    }
+    if (absDiff < YEAR) {
+      const months = Math.floor(absDiff / MONTH);
+      return `in ${months} ${months === 1 ? 'month' : 'months'}`;
+    }
+    const years = Math.floor(absDiff / YEAR);
+    return `in ${years} ${years === 1 ? 'year' : 'years'}`;
+  }
+  if (diffSeconds < MINUTE) {
+    return `${diffSeconds} seconds ago`;
+  }
+  if (diffSeconds < HOUR) {
+    const mins = Math.floor(diffSeconds / MINUTE);
+    return `${mins} ${mins === 1 ? 'minute' : 'minutes'} ago`;
+  }
+  if (diffSeconds < DAY) {
+    const hours = Math.floor(diffSeconds / HOUR);
+    return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
+  }
+  if (diffSeconds < 2 * DAY) {
+    return 'yesterday';
+  }
+  if (diffSeconds < MONTH) {
+    const days = Math.floor(diffSeconds / DAY);
+    return `${days} days ago`;
+  }
+  if (diffSeconds < YEAR) {
+    const months = Math.floor(diffSeconds / MONTH);
+    return `${months} ${months === 1 ? 'month' : 'months'} ago`;
+  }
+  const years = Math.floor(diffSeconds / YEAR);
+  return `${years} ${years === 1 ? 'year' : 'years'} ago`;
+}
+
+/**
+ * The compact sibling of `getRelativeTimeString`: the same tier boundaries and
+ * present/future-skew handling, rendered with abbreviated units for
+ * space-constrained surfaces (chat metadata, dense tables, chips).
+ *
+ * Units follow the common compact convention (and the Microsoft Style Guide):
+ * `s` seconds, `m` minutes, `h` hours, `d` days, `mo` months, `y` years.
+ * Months use `mo` — not `m` — because `m` already means minutes; a bare `m`
+ * for months would be ambiguous. The value is always numeric (no "yesterday"
+ * idiom, which belongs to the long form) so the short form stays predictable
+ * and easy to scan. The `ago` / `in` affixes are kept so direction stays
+ * unambiguous at a glance.
+ */
+function getRelativeTimeShortString(date, now) {
+  const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
+
+  // Present clamp — identical to the long form (see getRelativeTimeString).
+  if (Math.abs(diffSeconds) < 10) {
+    return 'now';
+  }
+  if (diffSeconds < 0) {
+    // Future dates.
+    const absDiff = Math.abs(diffSeconds);
+    if (absDiff <= FUTURE_SKEW_TOLERANCE) {
+      return 'now';
+    }
+    if (absDiff < MINUTE) {
+      return `in ${absDiff}s`;
+    }
+    if (absDiff < HOUR) {
+      return `in ${Math.floor(absDiff / MINUTE)}m`;
+    }
+    if (absDiff < DAY) {
+      return `in ${Math.floor(absDiff / HOUR)}h`;
+    }
+    if (absDiff < MONTH) {
+      return `in ${Math.floor(absDiff / DAY)}d`;
+    }
+    if (absDiff < YEAR) {
+      return `in ${Math.floor(absDiff / MONTH)}mo`;
+    }
+    return `in ${Math.floor(absDiff / YEAR)}y`;
+  }
+  if (diffSeconds < MINUTE) {
+    return `${diffSeconds}s ago`;
+  }
+  if (diffSeconds < HOUR) {
+    return `${Math.floor(diffSeconds / MINUTE)}m ago`;
+  }
+  if (diffSeconds < DAY) {
+    return `${Math.floor(diffSeconds / HOUR)}h ago`;
+  }
+  if (diffSeconds < MONTH) {
+    return `${Math.floor(diffSeconds / DAY)}d ago`;
+  }
+  if (diffSeconds < YEAR) {
+    return `${Math.floor(diffSeconds / MONTH)}mo ago`;
+  }
+  return `${Math.floor(diffSeconds / YEAR)}y ago`;
+}
 
 /** Returns the interval (in ms) at which a relative timestamp should update. */
 function getLiveInterval(diffSeconds) {
@@ -149,7 +290,7 @@ export function Timestamp({
 
   // Format the display text. No time zone is passed: the visible text always
   // reads in the viewer's own zone, and only the tooltip names others.
-  const displayText = !isValidDate ? '' : effectiveFormat === 'relative' ? formatRelativeTime(date, now, locale, 'long') : effectiveFormat === 'relative_short' ? formatRelativeTime(date, now, locale, 'narrow') : isAbsoluteFormat(effectiveFormat) ? formatInstant(date, effectiveFormat, locale, {
+  const displayText = !isValidDate ? '' : effectiveFormat === 'relative' ? getRelativeTimeString(date, now) : effectiveFormat === 'relative_short' ? getRelativeTimeShortString(date, now) : isAbsoluteFormat(effectiveFormat) ? formatInstant(date, effectiveFormat, locale, {
     isTimezoneShown
   }) : '';
 

package/dist/astryx.css

@@ -340,7 +340,6 @@
   .xbfzqbu{--spinner-track-color:currentColor}
   .x1ufpcf6{--spinner-track-color:var(--color-on-dark)}
   .xspt9s2{--spinner-track-color:var(--color-track)}
-  .x152dxt4{--step-connector-gap:0px}
   .xpa4xmd{--tree-list-indent:var(--spacing-4)}
   .x1xbi2jf{--tree-list-row-gap:var(--spacing-0-5)}
   .x1wfyzv7:focus-within{--_fade-delay:0s}
@@ -769,11 +768,7 @@
   .x1afcbsf:not(#\#):not(#\#):not(#\#){box-sizing:content-box}
   .xbuiw85:not(#\#):not(#\#):not(#\#){caret-color:transparent}
   .xxugrtn:not(#\#):not(#\#):not(#\#){caret-color:var(--color-accent)}
-  .x13hy1yx:not(#\#):not(#\#):not(#\#){clip-path:inset(0 0 0 max(0px,min(var(--step-connector-gap,0px),var(--spacing-2))))}
-  .x1yxrbr4:not(#\#):not(#\#):not(#\#){clip-path:inset(0 0 max(0px,min(var(--step-connector-gap,0px),var(--spacing-2))) 0)}
-  .x17qoqre:not(#\#):not(#\#):not(#\#){clip-path:inset(0 max(0px,min(var(--step-connector-gap,0px),var(--spacing-2))) 0 0)}
   .x1hyvwdk:not(#\#):not(#\#):not(#\#){clip-path:inset(50%)}
-  .x1eyou77:not(#\#):not(#\#):not(#\#){clip-path:inset(max(0px,min(var(--step-connector-gap,0px),var(--spacing-2))) 0 0 0)}
   .xzpqnlu:not(#\#):not(#\#):not(#\#){clip:rect(0,0,0,0)}
   .xntwwlm:not(#\#):not(#\#):not(#\#){color-scheme:dark}
   .x108lcm5:not(#\#):not(#\#):not(#\#){color-scheme:light dark}
@@ -1320,8 +1315,6 @@
   .xuihb5h:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px var(--color-accent-muted)}
   .x15ysqaf:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:none}
   .xyavpck:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}
-  .x153f7d5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){clip-path:inset(0 0 0 max(0px,min(var(--step-connector-gap,0px),var(--spacing-2))))}
-  .x7cmjge:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){clip-path:inset(0 max(0px,min(var(--step-connector-gap,0px),var(--spacing-2))) 0 0)}
   .x10wafsz:focus-within:not(#\#):not(#\#):not(#\#){clip-path:none}
   .xy5bzlh.xy5bzlh:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}
   .x9o1np9.x9o1np9:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.5.2-canary.48cb3a4",
+  "version": "0.5.2-canary.4a48880",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -661,7 +661,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.5.2-canary.48cb3a4",
+    "@astryxdesign/cli": "0.5.2-canary.4a48880",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",

package/src/Stepper/Step.doc.mjs

@@ -10,7 +10,7 @@ export const docs = {
   category: 'Navigation',
   isHiddenFromOverview: true,
   description:
-    "Individual step within a Stepper. Renders a progress-bar segment, an indicator, and a label with optional description. Progress (completed/active/not-started) is derived from the parent Stepper's activeStep and this step's step index.",
+    'Individual step within a Stepper. Renders a progress-bar segment, an indicator, and a label with optional description. Progress (completed/active/not-started) is derived from the parent Stepper\'s activeStep and this step\'s step index.',
   props: [
     {
       name: 'step',

package/src/Stepper/Step.tsx

@@ -197,37 +197,6 @@ 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.
@@ -761,43 +730,6 @@ const styles = stylex.create({
     flexShrink: 0,
     borderRadius: 0,
   },
-  // The gap a connector leaves where it meets the indicator, spent on the side
-  // that faces the node so the pair leaves a symmetric hole around it.
-  //
-  // Clip the segment rather than changing its box: one `clip-path` clips the
-  // segment's own track and its absolutely positioned `::before` fill against
-  // the same reference box. The indicator stays put, the Stepper cannot grow,
-  // and percentage values cannot resolve differently between the two layers.
-  // The inherited value is clamped in CONNECTOR_GAP; its default is declared
-  // once on the Stepper root, where a generated theme override can replace it.
-  //
-  // A public var rather than a per-segment theme vocabulary: "do not touch the
-  // indicator" is one intent, and naming the segments would publish which
-  // pieces this layout happens to be drawn from today.
-  otSegGapLeadV: {
-    clipPath: `inset(0 0 ${CONNECTOR_GAP} 0)`,
-  },
-  otSegGapRailV: {
-    clipPath: `inset(${CONNECTOR_GAP} 0 0 0)`,
-  },
-  // The horizontal pair is PHYSICAL: `clip-path: inset()` takes top/right/
-  // bottom/left and has no logical form, while the row itself reverses under
-  // `dir="rtl"`. Left unflipped, the leading segment sits to the RIGHT of the
-  // node in RTL and still clips its right edge — opening the hole at the join
-  // between steps instead of at the indicator. The block axis needs no such
-  // handling: `dir` does not reverse it.
-  otSegGapLeadH: {
-    clipPath: {
-      default: `inset(0 ${CONNECTOR_GAP} 0 0)`,
-      ':is([dir="rtl"] *)': `inset(0 0 0 ${CONNECTOR_GAP})`,
-    },
-  },
-  otSegGapRailH: {
-    clipPath: {
-      default: `inset(0 0 0 ${CONNECTOR_GAP})`,
-      ':is([dir="rtl"] *)': `inset(0 ${CONNECTOR_GAP} 0 0)`,
-    },
-  },
   // Flexible segment (below the node) — grows to fill the step height and
   // meets the next node's leading segment.
   otSegFlexV: {
@@ -1420,7 +1352,6 @@ export function Step({
                   styles.otSegBaseV,
                   styles.otSegLeadV(densitySpace),
                   styles.connectorTrack,
-                  hasIndicator && styles.otSegGapLeadV,
                   beforeSegStyle,
                   beforeTiming,
                   styles.otSegHiddenIfFirst,
@@ -1436,7 +1367,6 @@ export function Step({
                   styles.otSegBaseV,
                   styles.otSegFlexV,
                   styles.connectorTrack,
-                  hasIndicator && styles.otSegGapRailV,
                   afterSegStyle,
                   railTiming,
                   styles.otSegHiddenIfLast,
@@ -1502,7 +1432,6 @@ export function Step({
               stylex.props(
                 styles.otSegH,
                 styles.connectorTrack,
-                hasIndicator && styles.otSegGapLeadH,
                 beforeSegStyle,
                 beforeTiming,
                 styles.otSegHiddenIfFirst,
@@ -1517,7 +1446,6 @@ export function Step({
               stylex.props(
                 styles.otSegH,
                 styles.connectorTrack,
-                hasIndicator && styles.otSegGapRailH,
                 afterSegStyle,
                 railTiming,
                 styles.otSegHiddenIfLast,

package/src/Stepper/Stepper.doc.mjs

@@ -53,30 +53,12 @@ export const docs = {
       },
     ],
     anatomy: [
-      {
-        name: 'Stepper',
-        required: true,
-        description:
-          'The ordered list holding the steps. Owns the orientation and the indicator placement the whole flow is laid out on.',
-      },
-      {
-        name: 'Step',
-        required: true,
-        description:
-          'One step in the flow, and the element carrying its status. Wraps the indicator, label, description, and the track segments belonging to it.',
-      },
       {
         name: 'Progress bar',
         required: true,
         description:
           'A 4px segmented bar per step. Filled for completed and active steps. Advancing one step grows the fill along the track it just covered, so the movement reads as progress rather than a bar changing color. Every other change applies at once: going back, jumping forward by more than one step, mounting mid-flow, and any change at all under prefers-reduced-motion. Where a span is drawn by more than one segment (the on-track layouts split it between two steps, three when a content slot sits between them), the segments run in track order at one constant speed, so the fill reads as a single line growing rather than pieces lighting in turn.',
       },
-      {
-        name: 'Connector',
-        required: false,
-        description:
-          'The track drawn between indicators in the on-track layouts. Each connector paints an unfilled line and, over it, the accent fill covering the progress made. How many pieces a connector is drawn from is an implementation detail of the layout, not a themeable part; use --step-connector-gap to hold the track off the indicator.',
-      },
       {
         name: 'Indicator',
         required: false,
@@ -106,14 +88,6 @@ export const docs = {
       {className: 'astryx-step-bar'},
       {className: 'astryx-step-connector'},
     ],
-    vars: [
-      {
-        name: '--step-connector-gap',
-        description:
-          'Gap a connector leaves where it meets the indicator, spent on the side facing it. Applies to the on-track layouts, whose connector is drawn as one segment either side of the node; 0 leaves the track running unbroken through it.',
-        default: '0px',
-      },
-    ],
   },
   components: [
     {
@@ -286,14 +260,6 @@ export const docsZh = {
       {className: 'astryx-step-bar'},
       {className: 'astryx-step-connector'},
     ],
-    vars: [
-      {
-        name: '--step-connector-gap',
-        description:
-          '连接线与指示器相接处留出的间隙，落在朝向指示器的一侧。适用于 on-track 布局——其连接线由节点两侧各一段绘制；取 0 时轨道将不间断地穿过节点。',
-        default: '0px',
-      },
-    ],
   },
   components: [
     {