@astryxdesign/lab 0.3.0-canary.dccdabe → 0.3.0-canary.e19719c

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

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAMlD,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;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;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;AAwdD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,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,+BAqlBX;yBAvmBe,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAMlD,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;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;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;AAwdD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,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,+BAylBX;yBA3mBe,IAAI"}

package/dist/Stepper/Step.js

@@ -88,7 +88,7 @@ function CurrentIcon() {
 
 // --- Styles ---
 
-const BAR_WIDTH = '4px';
+const BAR_WIDTH = spacingVars['--spacing-1'];
 const ICON_SIZE = spacingVars['--spacing-4'];
 const NUMBER_SIZE = spacingVars['--spacing-5'];
 const _temp = {
@@ -309,7 +309,7 @@ const styles = {
     $$css: true
   },
   otSegBaseV: {
-    kzqmXN: "x51ohtg",
+    kzqmXN: "xx9zwd3",
     kmuXW: "x2lah0s",
     kaIpWk: "x2u8bby",
     $$css: true
@@ -326,7 +326,7 @@ const styles = {
     "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value)
   }],
   otSegH: {
-    kZKoxP: "xqu0tyb",
+    kZKoxP: "x11c6zpc",
     kUk6DE: "x98rzlu",
     k7Eaqz: "x18ki04u",
     kaIpWk: "x2u8bby",
@@ -556,7 +556,7 @@ export function Step({
         ...{
           className: "xjm74w1 xv1l7n4"
         },
-        children: "Optional"
+        children: t('@astryx.step.optional')
       })]
     }), endContent]
   });
@@ -616,7 +616,7 @@ export function Step({
           ...{
             className: "xjm74w1 xv1l7n4"
           },
-          children: "Optional"
+          children: t('@astryx.step.optional')
         })]
       }), endContent]
     });
@@ -722,10 +722,10 @@ export function Step({
       children: [/*#__PURE__*/_jsx("div", {
         ...mergeProps(themeProps('step-bar'), {
           0: {
-            className: "x51ohtg xjspbzw x2lah0s xkh2ocl x1m4xfpy"
+            className: "xx9zwd3 xjspbzw x2lah0s xkh2ocl x1m4xfpy"
           },
           1: {
-            className: "x51ohtg xjspbzw x2lah0s xkh2ocl x1ewilqj"
+            className: "xx9zwd3 xjspbzw x2lah0s xkh2ocl x1ewilqj"
           }
         }[!!isBarFilled << 0]),
         "aria-hidden": "true"
@@ -805,10 +805,10 @@ export function Step({
     children: [/*#__PURE__*/_jsx("div", {
       ...mergeProps(themeProps('step-bar'), {
         0: {
-          className: "xh8yej3 xqu0tyb xjspbzw x2lah0s xlstkdb x1m4xfpy"
+          className: "xh8yej3 x11c6zpc xjspbzw x2lah0s xlstkdb x1m4xfpy"
         },
         1: {
-          className: "xh8yej3 xqu0tyb xjspbzw x2lah0s xlstkdb x1ewilqj"
+          className: "xh8yej3 x11c6zpc xjspbzw x2lah0s xlstkdb x1ewilqj"
         }
       }[!!isBarFilled << 0]),
       "aria-hidden": "true"

package/dist/lab.css

@@ -572,7 +572,6 @@
   .xxk0z11:not(#\#):not(#\#):not(#\#):not(#\#){height:24px}
   .x1gnnpzl:not(#\#):not(#\#):not(#\#):not(#\#){height:30px}
   .x10w6t97:not(#\#):not(#\#):not(#\#):not(#\#){height:32px}
-  .xqu0tyb:not(#\#):not(#\#):not(#\#):not(#\#){height:4px}
   .x1ycjhwn:not(#\#):not(#\#):not(#\#):not(#\#){height:5px}
   .x1d9x2de:not(#\#):not(#\#):not(#\#):not(#\#){height:640px}
   .xt7dq6l:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
@@ -644,11 +643,11 @@
   .x1dz1jew:not(#\#):not(#\#):not(#\#):not(#\#){width:280px}
   .x1849jeq:not(#\#):not(#\#):not(#\#):not(#\#){width:30px}
   .x1td3qas:not(#\#):not(#\#):not(#\#):not(#\#){width:32px}
-  .x51ohtg:not(#\#):not(#\#):not(#\#):not(#\#){width:4px}
   .x1ftt334:not(#\#):not(#\#):not(#\#):not(#\#){width:5px}
   .x1nalo9x:not(#\#):not(#\#):not(#\#):not(#\#){width:min(41rem,calc(100vw - 32px))}
   .x1oai4fc:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--icon-size)}
   .x1m747yf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--size-element-lg)}
+  .xx9zwd3:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-1)}
   .x12xnipv:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-4)}
   .xfyiiit:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-5)}
   .x5lhr3w:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--x-width)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.3.0-canary.dccdabe",
+  "version": "0.3.0-canary.e19719c",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.3.0-canary.dccdabe",
+    "@astryxdesign/core": "0.3.0-canary.e19719c",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.46.0",
@@ -66,7 +66,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.3.0-canary.dccdabe",
+    "@astryxdesign/cli": "0.3.0-canary.e19719c",
     "@lexical/code": "^0.46.0",
     "@lexical/headless": "^0.46.0",
     "@lexical/html": "^0.46.0",

package/src/Stepper/Step.tsx

@@ -162,7 +162,7 @@ function CurrentIcon() {
 
 // --- Styles ---
 
-const BAR_WIDTH = '4px';
+const BAR_WIDTH = spacingVars['--spacing-1'];
 const ICON_SIZE = spacingVars['--spacing-4'];
 const NUMBER_SIZE = spacingVars['--spacing-5'];
 
@@ -869,7 +869,9 @@ export function Step({
       {isOptional && (
         <>
           <span {...stylex.props(styles.optionalDot)}>•</span>
-          <span {...stylex.props(styles.optionalText)}>Optional</span>
+          <span {...stylex.props(styles.optionalText)}>
+            {t('@astryx.step.optional')}
+          </span>
         </>
       )}
       {endContent}
@@ -943,7 +945,9 @@ export function Step({
         {isOptional && (
           <>
             <span {...stylex.props(styles.optionalDot)}>•</span>
-            <span {...stylex.props(styles.optionalText)}>Optional</span>
+            <span {...stylex.props(styles.optionalText)}>
+              {t('@astryx.step.optional')}
+            </span>
           </>
         )}
         {endContent}

package/src/Stepper/Stepper.doc.mjs

@@ -28,9 +28,10 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-stepper', visualProps: ['orientation']},
+      {className: 'astryx-stepper', visualProps: ['orientation', 'indicatorPosition']},
       {className: 'astryx-step', visualProps: ['progress', 'status']},
       {className: 'astryx-step-bar'},
+      {className: 'astryx-step-connector'},
     ],
   },
   components: [
@@ -125,7 +126,7 @@ export const docs = {
         {
           name: 'status',
           type: "'accent' | 'success' | 'warning' | 'error'",
-          description: 'Semantic color for the step. Controls color only and maps to the global XDS semantic tokens. Leave unset for the progress-derived default coloring.',
+          description: 'Semantic color for the step. Controls color only and maps to the global Astryx semantic tokens. Leave unset for the progress-derived default coloring.',
         },
         {
           name: 'indicator',
@@ -230,9 +231,10 @@ export const docsZh = {
   },
   theming: {
     targets: [
-      {className: 'astryx-stepper', visualProps: ['orientation']},
+      {className: 'astryx-stepper', visualProps: ['orientation', 'indicatorPosition']},
       {className: 'astryx-step', visualProps: ['progress', 'status']},
       {className: 'astryx-step-bar'},
+      {className: 'astryx-step-connector'},
     ],
   },
   components: [