@astryxdesign/core 0.3.0 → 0.4.0-canary.3112e99

package/dist/theme/derivedVarRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derivedVarRegistry.d.ts","sourceRoot":"","sources":["../../src/theme/derivedVarRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAiChE,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,eAAe,EAAE,CAMnB"}
+{"version":3,"file":"derivedVarRegistry.d.ts","sourceRoot":"","sources":["../../src/theme/derivedVarRegistry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAsChE,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,GACf,eAAe,EAAE,CAMnB"}

package/dist/theme/derivedVarRegistry.js

@@ -26,19 +26,6 @@
  * entries share the same property.
  */
 export const derivedVarRegistry = {
-  avatar: [{
-    property: 'fontSize',
-    vars: ['--_avatar-fallback-font-size']
-  }, {
-    property: 'fontWeight',
-    vars: ['--_avatar-fallback-font-weight']
-  }, {
-    property: 'color',
-    vars: ['--_avatar-fallback-color']
-  }, {
-    property: 'backgroundColor',
-    vars: ['--_avatar-fallback-background']
-  }],
   banner: [{
     property: 'borderRadius',
     vars: ['--_banner-radius']
@@ -87,6 +74,15 @@ export const derivedVarRegistry = {
     property: 'borderRadius',
     vars: ['--_popover-radius']
   }],
+  'progressbar-mark': [{
+    property: 'width',
+    vars: ['--_progressbar-mark-width'],
+    replaces: true
+  }, {
+    property: 'height',
+    vars: ['--_progressbar-mark-height'],
+    replaces: true
+  }],
   section: [{
     property: 'padding',
     expand: 'container'
@@ -97,6 +93,11 @@ export const derivedVarRegistry = {
   }, {
     property: 'padding',
     vars: ['--_segmented-control-padding']
+  }],
+  textarea: [{
+    property: 'paddingInline',
+    vars: ['--_textarea-inline-padding'],
+    replaces: true
   }]
 };
 

package/dist/theme/expandColorScale.d.ts

@@ -30,7 +30,9 @@ export interface ColorScaleConfig {
      */
     neutralStyle?: 'warm' | 'cool' | 'neutral';
     /**
-     * Contrast level. Affects tone assignments for text and UI elements.
+     * Contrast level. `'high'` pulls text, icons, and borders toward stronger
+     * tones (and thickens the subtle border's alpha) so structural and textual
+     * boundaries stay perceivable.
      * @default 'standard'
      */
     contrast?: 'standard' | 'high';

package/dist/theme/expandColorScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandColorScale.d.ts","sourceRoot":"","sources":["../../src/theme/expandColorScale.ts"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAE3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAyCtD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,EACZ,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,MAAM,CAYR;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,gBAAgB,CAuH3E"}
+{"version":3,"file":"expandColorScale.d.ts","sourceRoot":"","sources":["../../src/theme/expandColorScale.ts"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAE3C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAyCtD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,EACZ,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,MAAM,CAYR;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,gBAAgB,CAoI3E"}

package/dist/theme/expandColorScale.js

@@ -158,13 +158,21 @@ export function expandColorScale(config) {
   const textSecondaryLightTone = isHigh ? 20 : 30;
   const textSecondaryDarkTone = isHigh ? 80 : 70;
 
+  // Borders track contrast the same way text does: high contrast pulls the
+  // emphasized border tone toward mid-scale (stronger against both the near-
+  // white light surface and the near-black dark surface) and thickens the
+  // otherwise-decorative subtle hairline by doubling its alpha, so structural
+  // boundaries stay perceivable for users who opt into high contrast.
+  const borderSubtleAlpha = isHigh ? 0.2 : 0.1;
+
   // Emphasized borders outline form controls (CheckboxInput, Selector), so
   // they are non-text UI boundaries under WCAG 1.4.11 and must reach 3:1
-  // against the surface they sit on. The preferred tones (70 light /
-  // 30 dark) land around 2.2:1 / 1.8:1, so bump the tone toward the
-  // opposing extreme until the ratio passes. Text tones need no such loop:
-  // their spacing guarantees >= 4.5:1 for any hue/chroma (see file header).
-  const borderEmphasized = ld(ensureContrastTone(seedHue, neutralVariantChroma, 70, -1, N[99], NON_TEXT_MIN_CONTRAST), ensureContrastTone(seedHue, neutralVariantChroma, 30, 1, N[10], NON_TEXT_MIN_CONTRAST));
+  // against the surface they sit on. High contrast starts at a more
+  // aggressive tone (50 vs 70/30), guaranteeing a stronger result; standard
+  // contrast starts at 70/30 and walks toward mid-scale only as far as needed.
+  const borderEmphasizedStartLight = isHigh ? 50 : 70;
+  const borderEmphasizedStartDark = isHigh ? 50 : 30;
+  const borderEmphasized = ld(ensureContrastTone(seedHue, neutralVariantChroma, borderEmphasizedStartLight, -1, N[99], NON_TEXT_MIN_CONTRAST), ensureContrastTone(seedHue, neutralVariantChroma, borderEmphasizedStartDark, 1, N[10], NON_TEXT_MIN_CONTRAST));
   return {
     // Core semantic — only with a seed accent. Without one these fall through
     // to colorDefaults, whose --color-accent is NOT what the default seed
@@ -202,8 +210,10 @@ export function expandColorScale(config) {
     '--color-background-popover': ld(N[99], N[20]),
     '--color-background-inverted': ld(N[10], N[99]),
     // Border
-    // Decorative hairline (~1.1:1 by design) — not a WCAG 1.4.11 boundary.
-    '--color-border': ld(hexWithAlpha(N[10], 0.1), hexWithAlpha(N[95], 0.1)),
+    // Border
+    // Decorative hairline — not a WCAG 1.4.11 boundary. High contrast
+    // doubles the alpha so structural boundaries stay perceivable.
+    '--color-border': ld(hexWithAlpha(N[10], borderSubtleAlpha), hexWithAlpha(N[95], borderSubtleAlpha)),
     '--color-border-emphasized': borderEmphasized,
     // Effects
     '--color-skeleton': ld(NV[70], NV[30]),

package/dist/theme/expandTypeScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandTypeScale.d.ts","sourceRoot":"","sources":["../../src/theme/expandTypeScale.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAMH,oEAAoE;AACpE,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC;AAErC;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAC1C,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,eAAe,CAAC,CAC/C,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,CACvC,MAAM,CACF,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,YAAY,GACZ,WAAW,GACX,WAAW,GACX,WAAW,GACX,CAAC,MAAM,GAAG,EAAE,CAAC,EACf,eAAe,CAChB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE;QACR,yEAAyE;QACzE,OAAO,CAAC,EAAE,sBAAsB,CAAC;QACjC,oEAAoE;QACpE,IAAI,CAAC,EAAE,mBAAmB,CAAC;KAC5B,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAwIrD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,eAAe,GAAG,eAAe,CA+CxE;AAiBD;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,eAAe,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAkCxD"}
+{"version":3,"file":"expandTypeScale.d.ts","sourceRoot":"","sources":["../../src/theme/expandTypeScale.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAMH,oEAAoE;AACpE,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC;AAErC;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAC1C,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,eAAe,CAAC,CAC/C,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,CACvC,MAAM,CACF,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,YAAY,GACZ,WAAW,GACX,WAAW,GACX,WAAW,GACX,CAAC,MAAM,GAAG,EAAE,CAAC,EACf,eAAe,CAChB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE;QACR,yEAAyE;QACzE,OAAO,CAAC,EAAE,sBAAsB,CAAC;QACjC,oEAAoE;QACpE,IAAI,CAAC,EAAE,mBAAmB,CAAC;KAC5B,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAwIrD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,eAAe,GAAG,eAAe,CA+CxE;AAiBD;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,eAAe,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAmDxD"}

package/dist/theme/expandTypeScale.js

@@ -332,6 +332,23 @@ export function generateTypeScaleComponents(_config) {
       lineHeight: `var(--text-heading-${level}-leading)`
     };
   }
+  // `Heading` renders both a `level:N` and, when set, a `type:display-N`
+  // visual-prop class simultaneously (type sizing takes precedence over
+  // level sizing — see Heading.tsx's own `type ? sizeByTypeStyles[type] :
+  // sizeByLevelStyles[level]`). Without a `type:display-N` rule here, the
+  // `level:N` rule is the only one that matches, so it silently wins
+  // regardless of `type` once a theme supplies a type scale. Emitting these
+  // after the level rules keeps them later in source order, so they take
+  // precedence at equal specificity, matching the component's own logic.
+  // fontWeight is intentionally omitted, mirroring the `text` branch below
+  // and preserving `defaultWeightByTypeStyles`.
+  for (const type of ['display-1', 'display-2', 'display-3']) {
+    headingRules[`type:${type}`] = {
+      fontFamily: 'var(--font-family-heading)',
+      fontSize: `var(--text-${type}-size)`,
+      lineHeight: `var(--text-${type}-leading)`
+    };
+  }
   components.heading = headingRules;
   const textRules = {};
   for (const type of ['body', 'large', 'label', 'code', 'supporting', 'display-1', 'display-2', 'display-3']) {

package/dist/theme/generateThemeRules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generateThemeRules.d.ts","sourceRoot":"","sources":["../../src/theme/generateThemeRules.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AA+DhD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,kFAAkF;IAClF,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAgKD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,EAAE,CAoChE;AAwPD;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAe5E;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CA4E9D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,cAAc,CA2BpE"}
+{"version":3,"file":"generateThemeRules.d.ts","sourceRoot":"","sources":["../../src/theme/generateThemeRules.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AA+DhD;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,kFAAkF;IAClF,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAgKD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,EAAE,CAoChE;AAmQD;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,YAAY,GAAG,eAAe,CAe5E;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CA4E9D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,cAAc,CA2BpE"}

package/dist/theme/generateThemeRules.js

@@ -288,9 +288,11 @@ function generateComponentRules(components, parts) {
       // Entries are processed in order (priority).
       // - `vars`: emit internal CSS custom property declarations
       // - `expand: 'container'`: expand padding to container layout tokens
+      // - `replaces: true`: emit only the var, dropping the source property
       let finalProps = props;
       const derivedProps = [];
       let containerExpanded = false;
+      const replacedProps = new Set();
       for (const [prop, value] of props) {
         const derived = getDerivedVars(component, prop);
         // Padding longhands (paddingBlock, paddingInline, etc.) also
@@ -300,6 +302,9 @@ function generateComponentRules(components, parts) {
           if (entry.expand === 'container' && PADDING_PROPS.has(prop)) {
             containerExpanded = true;
           }
+          if (entry.replaces) {
+            replacedProps.add(prop);
+          }
           if (entry.vars) {
             for (const varName of entry.vars) {
               derivedProps.push([varName, value]);
@@ -317,6 +322,12 @@ function generateComponentRules(components, parts) {
         const containerTokens = expandContainerPadding(component, parsed);
         finalProps = [...nonPaddingProps, ...containerTokens];
       }
+
+      // Drop properties whose derived entry set `replaces` — their value is
+      // carried by the emitted var and must not land on the class element.
+      if (replacedProps.size > 0) {
+        finalProps = finalProps.filter(([p]) => !replacedProps.has(p));
+      }
       if (derivedProps.length > 0) {
         finalProps = [...finalProps, ...derivedProps];
       }

package/dist/theme/index.d.ts

@@ -30,10 +30,11 @@ export { expandColorScale } from './expandColorScale';
 export type { ColorScaleConfig, ColorScaleTokens } from './expandColorScale';
 export { expandMotionScale } from './expandMotionScale';
 export type { MotionScaleConfig, MotionScaleTokens } from './expandMotionScale';
-export { colorDefaults, spacingDefaults, sizeDefaults, borderDefaults, radiusDefaults, shadowDefaults, durationDefaults, easeDefaults, typographyDefaults, textSizeDefaults, fontWeightDefaults, typeScaleDefaults, colorVars, spacingVars, sizeVars, borderVars, radiusVars, shadowVars, durationVars, easeVars, typographyVars, textSizeVars, fontWeightVars, typeScaleVars, } from './tokens.stylex';
+export { colorDefaults, spacingDefaults, sizeDefaults, borderDefaults, focusDefaults, radiusDefaults, shadowDefaults, durationDefaults, easeDefaults, typographyDefaults, textSizeDefaults, fontWeightDefaults, typeScaleDefaults, colorVars, spacingVars, sizeVars, borderVars, focusVars, radiusVars, shadowVars, durationVars, easeVars, typographyVars, textSizeVars, fontWeightVars, typeScaleVars, } from './tokens.stylex';
 export type { ColorVarName, SpacingVarName, SizeVarName, BorderVarName, RadiusVarName, ShadowVarName, DurationVarName, EaseVarName, TypographyVarName, TextSizeVarName, FontWeightVarName, TypeScaleVarName, } from './tokens.stylex';
 export { useTheme, useThemeName, ThemeContext } from './useTheme';
 export type { UseThemeReturn, ThemeContextValue } from './useTheme';
+export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from '../Indicator';
 export { resolveThemeToken, resolveThemeTokens, tokenVar, tokenVars, } from './tokens';
 export type { ResolveThemeTokenOptions, ResolveThemeTokensOptions, ResolvedThemeMode, } from './tokens';
 export type { TextColorMap } from '../Text';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,cAAc,EACd,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,mBAAmB,EACnB,WAAW,GACZ,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,cAAc,GACf,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,eAAe,EACf,eAAe,EACf,aAAa,GACd,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAC;AAC3C,YAAY,EACV,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAC,WAAW,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AACrD,YAAY,EAAC,oBAAoB,EAAC,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAC,eAAe,EAAE,2BAA2B,EAAC,MAAM,mBAAmB,CAAC;AAC/E,YAAY,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAExE,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,gBAAgB,EAAE,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAG9E,OAAO,EACL,aAAa,EACb,eAAe,EACf,YAAY,EACZ,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,cAAc,EACd,aAAa,GACd,MAAM,iBAAiB,CAAC;AAGzB,YAAY,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,aAAa,EACb,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAC,MAAM,YAAY,CAAC;AAChE,YAAY,EAAC,cAAc,EAAE,iBAAiB,EAAC,MAAM,YAAY,CAAC;AAClE,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,SAAS,GACV,MAAM,UAAU,CAAC;AAClB,YAAY,EACV,wBAAwB,EACxB,yBAAyB,EACzB,iBAAiB,GAClB,MAAM,UAAU,CAAC;AAElB,YAAY,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,SAAS,EACT,UAAU,EACV,QAAQ,EACR,eAAe,EACf,eAAe,EACf,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"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"}

package/dist/theme/index.js

@@ -29,7 +29,7 @@ export { expandRadiusScale } from "./expandRadiusScale.js";
 export { expandColorScale } from "./expandColorScale.js";
 export { expandMotionScale } from "./expandMotionScale.js";
 // Export token defaults and vars for use in custom components and themes
-export { colorDefaults, spacingDefaults, sizeDefaults, borderDefaults, radiusDefaults, shadowDefaults, durationDefaults, easeDefaults, typographyDefaults, textSizeDefaults, fontWeightDefaults, typeScaleDefaults, colorVars, spacingVars, sizeVars, borderVars, radiusVars, shadowVars, durationVars, easeVars, typographyVars, textSizeVars, fontWeightVars, typeScaleVars } from "./tokens.stylex.js";
+export { colorDefaults, spacingDefaults, sizeDefaults, borderDefaults, focusDefaults, radiusDefaults, shadowDefaults, durationDefaults, easeDefaults, typographyDefaults, textSizeDefaults, fontWeightDefaults, typeScaleDefaults, colorVars, spacingVars, sizeVars, borderVars, focusVars, radiusVars, shadowVars, durationVars, easeVars, typographyVars, textSizeVars, fontWeightVars, typeScaleVars } from "./tokens.stylex.js";
 
 // Export token key types for theme authoring
 

package/dist/theme/tokens.stylex.d.ts

@@ -225,6 +225,18 @@ export declare const borderVars: stylex.VarGroup<Readonly<{
     readonly '--border-width': "1px";
 }>, symbol>;
 export type BorderVarName = keyof typeof borderDefaults;
+export declare const focusDefaults: {
+    readonly '--focus-outline-width': "2px";
+    readonly '--focus-outline-style': "solid";
+    readonly '--focus-outline-color': "var(--color-accent)";
+    readonly '--focus-outline-offset': "3px";
+};
+export declare const focusVars: stylex.VarGroup<Readonly<{
+    readonly '--focus-outline-width': "2px";
+    readonly '--focus-outline-style': "solid";
+    readonly '--focus-outline-color': "var(--color-accent)";
+    readonly '--focus-outline-offset': "3px";
+}>, symbol>;
 export declare const radiusDefaults: {
     readonly '--radius-none': "0px";
     readonly '--radius-inner': "4px";

package/dist/theme/tokens.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAM3C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;WAAqC,CAAC;AAM9D,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;WAAkC,CAAC;AAMxD,eAAO,MAAM,cAAc;;CAEjB,CAAC;AAEX,eAAO,MAAM,UAAU;;WAAoC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAMxD,eAAO,MAAM,cAAc;;;;;;;;CAWjB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;WAAoC,CAAC;AAQ5D,eAAO,MAAM,cAAc;;;;;;;;;CAejB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;WAAoC,CAAC;AAU5D,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;WAAsC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,eAAO,MAAM,QAAQ;;WAAkC,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAKpD,eAAO,MAAM,kBAAkB;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;WAAwC,CAAC;AAMpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAcnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;WAAsC,CAAC;AAMhE,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;WAAwC,CAAC;AAMpE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAehE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DpB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAuC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAM3C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;WAAqC,CAAC;AAM9D,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;WAAkC,CAAC;AAMxD,eAAO,MAAM,cAAc;;CAEjB,CAAC;AAEX,eAAO,MAAM,UAAU;;WAAoC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAWxD,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,cAAc;;;;;;;;CAWjB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;WAAoC,CAAC;AAQ5D,eAAO,MAAM,cAAc;;;;;;;;;CAejB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;WAAoC,CAAC;AAU5D,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;WAAsC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,eAAO,MAAM,QAAQ;;WAAkC,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAKpD,eAAO,MAAM,kBAAkB;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;WAAwC,CAAC;AAMpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAcnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;WAAsC,CAAC;AAMhE,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;WAAwC,CAAC;AAMpE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAehE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DpB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAuC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC"}

package/dist/theme/tokens.stylex.js

@@ -284,6 +284,29 @@ export const borderVars = {
   "--border-width": "var(--border-width)",
   __varGroupHash__: "xafi2nm"
 };
+// =============================================================================
+// Focus Tokens
+// =============================================================================
+// The keyboard focus ring, as one definition for the whole system. Values come
+// from Design Conventions §User Interaction States: 2px --color-accent at 3px
+// offset. Components read these through utils/focusOutline.stylex.ts; the
+// `:focus-visible` condition stays in core, so a theme can restyle the ring
+// but cannot show it to pointer users.
+
+export const focusDefaults = {
+  '--focus-outline-width': '2px',
+  '--focus-outline-style': 'solid',
+  '--focus-outline-color': 'var(--color-accent)',
+  '--focus-outline-offset': '3px'
+};
+export const focusVars = {
+  "--focus-outline-width": "var(--focus-outline-width)",
+  "--focus-outline-style": "var(--focus-outline-style)",
+  "--focus-outline-color": "var(--focus-outline-color)",
+  "--focus-outline-offset": "var(--focus-outline-offset)",
+  __varGroupHash__: "xzxs3qz"
+};
+
 // =============================================================================
 // Radius Tokens
 // =============================================================================

package/dist/utils/focusOutline.stylex.d.ts

@@ -0,0 +1,122 @@
+/**
+ * @file focusOutline.stylex.ts
+ * @input Uses StyleX and theme color tokens
+ * @output Exports shared focus-outline prop builders
+ * @position Internal utility for consistent keyboard focus outlines across core components
+ *
+ * Centralizes the standard Astryx focus outline, shown only for keyboard focus.
+ * Every focusable surface drew the same 2px accent ring already; writing it per
+ * component meant dozens of identical definitions to keep in step, and they did
+ * not stay in step — offsets drifted and one ring was a border-width thick.
+ *
+ * Every ring in core and lab is drawn from here, with one exception recorded in
+ * Switch: its condition is a component-scoped ancestor marker, which cannot be
+ * shared without leaking focus state between components. A component may still
+ * override the OFFSET (a ring that must sit inset, or clear of a field border);
+ * width, style and color are not restated anywhere.
+ *
+ * Every value comes from the `--focus-outline-*` tokens, which is how a theme
+ * restyles the ring: one override reaches every component at once. The
+ * `:focus-visible` condition is not themeable and stays here, so a theme can
+ * change what the ring looks like but cannot show it to pointer users.
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * The ring as a single `outline` value, for reading it at runtime — an
+ * assertion, or an element styled imperatively.
+ *
+ * NOT usable inside another file's `stylex.create`: StyleX resolves imported
+ * `defineVars` and nothing else, so a component whose condition
+ * {@link focusOutlineStyles} cannot express (Switch, whose ring keys off a
+ * component-scoped ancestor marker) has to compose the `focusVars` tokens
+ * itself.
+ */
+export declare const FOCUS_OUTLINE: string;
+/**
+ * The standard focus ring as plain CSS values, for the one case that has to
+ * apply it imperatively: a control whose focusable input is visually hidden and
+ * whose ring must land on a *themeable indicator* beside it (see
+ * `useIndicatorFocusRing`). Everything else should use the styles above.
+ *
+ * Longhands, not the `outline` shorthand, for the same reason the styles are:
+ * a shorthand resets every longhand it covers, so a caller could not re-color
+ * the ring without restating its width and style. Split, each part is
+ * independently overridable — and every part stays a var, so a theme's
+ * `--focus-outline-*` overrides still flow through.
+ *
+ * Keys are camelCase to match `HTMLElement.style`, so this spreads straight
+ * onto an element:
+ *
+ * ```ts
+ * Object.assign(el.style, FOCUS_OUTLINE_PARTS);        // draw
+ * Object.assign(el.style, FOCUS_OUTLINE_PARTS_NONE);   // clear
+ * ```
+ */
+export declare const FOCUS_OUTLINE_PARTS: {
+    readonly outlineWidth: stylex.StyleXVar<"2px">;
+    readonly outlineStyle: stylex.StyleXVar<"solid">;
+    readonly outlineColor: stylex.StyleXVar<"var(--color-accent)">;
+    readonly outlineOffset: stylex.StyleXVar<"3px">;
+};
+/** Clears {@link FOCUS_OUTLINE_PARTS}, one key per part so nothing lingers. */
+export declare const FOCUS_OUTLINE_PARTS_NONE: {
+    readonly outlineWidth: "";
+    readonly outlineStyle: "";
+    readonly outlineColor: "";
+    readonly outlineOffset: "";
+};
+export declare const focusOutlineStyles: Readonly<{
+    readonly focusVisible: Readonly<{
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "0" | "2px">;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "none" | "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-accent)" | null>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "0" | "3px">;
+    }>;
+    readonly focusWithin: Readonly<{
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", "0" | "2px">;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "none" | "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-accent)" | null>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "0" | "3px">;
+    }>;
+    readonly publishFocusVisibleVars: Readonly<{
+        readonly '--_focus-outline': stylex.StyleXClassNameFor<"--_focus-outline", string>;
+        readonly '--_focus-outline-offset': stylex.StyleXClassNameFor<"--_focus-outline-offset", "0" | "3px">;
+    }>;
+    readonly focusWithinOrPublished: Readonly<{
+        readonly outline: stylex.StyleXClassNameFor<"outline", string>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "3px" | "var(--_focus-outline-offset, 0)">;
+    }>;
+}>;
+type StyleXPropsArg = unknown;
+export declare const focusOutlineProps: {
+    readonly focusVisible: (...styles: StyleXPropsArg[]) => Readonly<{
+        className?: string;
+        'data-style-src'?: string;
+        style?: Readonly<{
+            [$$Key$$: string]: string | number;
+        }>;
+    }>;
+    readonly focusWithin: (...styles: StyleXPropsArg[]) => Readonly<{
+        className?: string;
+        'data-style-src'?: string;
+        style?: Readonly<{
+            [$$Key$$: string]: string | number;
+        }>;
+    }>;
+    readonly publishFocusVisibleVars: (...styles: StyleXPropsArg[]) => Readonly<{
+        className?: string;
+        'data-style-src'?: string;
+        style?: Readonly<{
+            [$$Key$$: string]: string | number;
+        }>;
+    }>;
+    readonly focusWithinOrPublished: (...styles: StyleXPropsArg[]) => Readonly<{
+        className?: string;
+        'data-style-src'?: string;
+        style?: Readonly<{
+            [$$Key$$: string]: string | number;
+        }>;
+    }>;
+};
+export {};
+//# sourceMappingURL=focusOutline.stylex.d.ts.map

package/dist/utils/focusOutline.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusOutline.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/focusOutline.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,QAAyE,CAAC;AAgBpG;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX,+EAA+E;AAC/E,eAAO,MAAM,wBAAwB;;;;;CAK3B,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;EAmD7B,CAAC;AAIH,KAAK,cAAc,GAAG,OAAO,CAAC;AAiB9B,eAAO,MAAM,iBAAiB;uCAdT,cAAc,EAAE;;;;;;;sCAAhB,cAAc,EAAE;;;;;;;kDAAhB,cAAc,EAAE;;;;;;;iDAAhB,cAAc,EAAE;;;;;;;CAuB3B,CAAC"}

package/dist/utils/focusOutline.stylex.js

@@ -0,0 +1,143 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file focusOutline.stylex.ts
+ * @input Uses StyleX and theme color tokens
+ * @output Exports shared focus-outline prop builders
+ * @position Internal utility for consistent keyboard focus outlines across core components
+ *
+ * Centralizes the standard Astryx focus outline, shown only for keyboard focus.
+ * Every focusable surface drew the same 2px accent ring already; writing it per
+ * component meant dozens of identical definitions to keep in step, and they did
+ * not stay in step — offsets drifted and one ring was a border-width thick.
+ *
+ * Every ring in core and lab is drawn from here, with one exception recorded in
+ * Switch: its condition is a component-scoped ancestor marker, which cannot be
+ * shared without leaking focus state between components. A component may still
+ * override the OFFSET (a ring that must sit inset, or clear of a field border);
+ * width, style and color are not restated anywhere.
+ *
+ * Every value comes from the `--focus-outline-*` tokens, which is how a theme
+ * restyles the ring: one override reaches every component at once. The
+ * `:focus-visible` condition is not themeable and stays here, so a theme can
+ * change what the ring looks like but cannot show it to pointer users.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { focusVars } from "../theme/tokens.stylex.js";
+const FOCUS_OUTLINE_WIDTH = focusVars['--focus-outline-width'];
+const FOCUS_OUTLINE_STYLE = focusVars['--focus-outline-style'];
+const FOCUS_OUTLINE_COLOR = focusVars['--focus-outline-color'];
+const FOCUS_OUTLINE_OFFSET = focusVars['--focus-outline-offset'];
+
+/**
+ * The ring as a single `outline` value, for reading it at runtime — an
+ * assertion, or an element styled imperatively.
+ *
+ * NOT usable inside another file's `stylex.create`: StyleX resolves imported
+ * `defineVars` and nothing else, so a component whose condition
+ * {@link focusOutlineStyles} cannot express (Switch, whose ring keys off a
+ * component-scoped ancestor marker) has to compose the `focusVars` tokens
+ * itself.
+ */
+export const FOCUS_OUTLINE = `${FOCUS_OUTLINE_WIDTH} ${FOCUS_OUTLINE_STYLE} ${FOCUS_OUTLINE_COLOR}`;
+
+/**
+ * Written as longhands rather than the `outline` shorthand.
+ *
+ * A shorthand resets every longhand it covers, so `outline: 2px solid accent`
+ * would clobber a later `outlineColor` no matter the order — which is how
+ * destructive buttons silently lost their red ring. With longhands, a variant
+ * can re-color the ring and inherit width, style and offset.
+ */
+const focusOutlineLonghands = {
+  outlineWidth: FOCUS_OUTLINE_WIDTH,
+  outlineStyle: FOCUS_OUTLINE_STYLE,
+  outlineColor: FOCUS_OUTLINE_COLOR
+};
+
+/**
+ * The standard focus ring as plain CSS values, for the one case that has to
+ * apply it imperatively: a control whose focusable input is visually hidden and
+ * whose ring must land on a *themeable indicator* beside it (see
+ * `useIndicatorFocusRing`). Everything else should use the styles above.
+ *
+ * Longhands, not the `outline` shorthand, for the same reason the styles are:
+ * a shorthand resets every longhand it covers, so a caller could not re-color
+ * the ring without restating its width and style. Split, each part is
+ * independently overridable — and every part stays a var, so a theme's
+ * `--focus-outline-*` overrides still flow through.
+ *
+ * Keys are camelCase to match `HTMLElement.style`, so this spreads straight
+ * onto an element:
+ *
+ * ```ts
+ * Object.assign(el.style, FOCUS_OUTLINE_PARTS);        // draw
+ * Object.assign(el.style, FOCUS_OUTLINE_PARTS_NONE);   // clear
+ * ```
+ */
+export const FOCUS_OUTLINE_PARTS = {
+  outlineWidth: FOCUS_OUTLINE_WIDTH,
+  outlineStyle: FOCUS_OUTLINE_STYLE,
+  outlineColor: FOCUS_OUTLINE_COLOR,
+  outlineOffset: FOCUS_OUTLINE_OFFSET
+};
+
+/** Clears {@link FOCUS_OUTLINE_PARTS}, one key per part so nothing lingers. */
+export const FOCUS_OUTLINE_PARTS_NONE = {
+  outlineWidth: '',
+  outlineStyle: '',
+  outlineColor: '',
+  outlineOffset: ''
+};
+export const focusOutlineStyles = {
+  focusVisible: {
+    kMeerF: "x1k57tk5 x1vidyx5",
+    k3XXqK: "x1t137rt x1jhp3zv",
+    kjBf7l: "xx47ajj",
+    kInvED: "x1wfwxd8 x1vwwbsn",
+    $$css: true
+  },
+  focusWithin: {
+    kMeerF: "x1k57tk5 x11j6mr8",
+    k3XXqK: "x1t137rt xciu248",
+    kjBf7l: "x1uy843r",
+    kInvED: "x1wfwxd8 x1jumodi",
+    $$css: true
+  },
+  publishFocusVisibleVars: {
+    "--_focus-outline": "x17wzz1v xqih627",
+    "--_focus-outline-offset": "xgzxwq1 xqchwus",
+    $$css: true
+  },
+  focusWithinOrPublished: {
+    kI3sdo: "xaw4jrz x16s19ga",
+    kInvED: "x1kvmbwa x1jumodi",
+    $$css: true
+  }
+};
+
+// StyleX does not expose a stable public input type for stylex.props();
+// keep this helper permissive so it mirrors stylex.props() itself.
+
+function makeFocusOutlineProps(style) {
+  return (...styles) =>
+  // Caller styles LAST, so a component can deliberately re-color its ring —
+  // destructive buttons ring in error red, not accent. StyleX is last-wins,
+  // and reversing this to protect the ring silently ate that override.
+  //
+  // The hazard in this direction is the opposite one: a caller whose base
+  // style carries `outline: 'none'` wipes the ring out entirely (TreeList
+  // did, and shipped a focusable row with no visible focus). Two things
+  // guard it — this file states the rule, and the ring is written as
+  // LONGHANDS, so an override has to name `outlineStyle`/`outlineWidth`
+  // explicitly rather than erasing them through the `outline` shorthand.
+  stylex.props(style, ...styles);
+}
+export const focusOutlineProps = {
+  focusVisible: makeFocusOutlineProps(focusOutlineStyles.focusVisible),
+  focusWithin: makeFocusOutlineProps(focusOutlineStyles.focusWithin),
+  publishFocusVisibleVars: makeFocusOutlineProps(focusOutlineStyles.publishFocusVisibleVars),
+  focusWithinOrPublished: makeFocusOutlineProps(focusOutlineStyles.focusWithinOrPublished)
+};

package/dist/utils/focusReturn.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file focusReturn.ts
+ * @input The document's current active element.
+ * @output Whether focus is currently "detached" — on nothing in particular.
+ * @position Utility; used by overlay triggers (e.g. DateInput, DateTimeInput)
+ *   that return focus to their control when the overlay closes, but only when
+ *   the dismiss did not already move focus somewhere the user chose.
+ */
+/**
+ * True when focus rests on nothing in particular — no active element, or the
+ * document body / root element.
+ *
+ * An overlay (popover, calendar, dropdown) that restores focus to its trigger
+ * on close should do so ONLY when this is true. A native `popover="auto"`
+ * light-dismiss fires its close synchronously with the pointer event that
+ * moved focus, so by the time the close handler runs, focus has already
+ * landed on whatever the user clicked — another field, a button, anywhere.
+ * Restoring focus unconditionally would yank it back and fight that click.
+ * The one case the browser leaves unresolved is Escape or a click on
+ * non-focusable empty space, which drops focus to the body; that is exactly
+ * when the trigger should reclaim it.
+ */
+export declare function isFocusDetached(doc?: Document): boolean;
+//# sourceMappingURL=focusReturn.d.ts.map

package/dist/utils/focusReturn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusReturn.d.ts","sourceRoot":"","sources":["../../src/utils/focusReturn.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,GAAG,GAAE,QAAmB,GAAG,OAAO,CAKjE"}

package/dist/utils/focusReturn.js

@@ -0,0 +1,29 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file focusReturn.ts
+ * @input The document's current active element.
+ * @output Whether focus is currently "detached" — on nothing in particular.
+ * @position Utility; used by overlay triggers (e.g. DateInput, DateTimeInput)
+ *   that return focus to their control when the overlay closes, but only when
+ *   the dismiss did not already move focus somewhere the user chose.
+ */
+
+/**
+ * True when focus rests on nothing in particular — no active element, or the
+ * document body / root element.
+ *
+ * An overlay (popover, calendar, dropdown) that restores focus to its trigger
+ * on close should do so ONLY when this is true. A native `popover="auto"`
+ * light-dismiss fires its close synchronously with the pointer event that
+ * moved focus, so by the time the close handler runs, focus has already
+ * landed on whatever the user clicked — another field, a button, anywhere.
+ * Restoring focus unconditionally would yank it back and fight that click.
+ * The one case the browser leaves unresolved is Escape or a click on
+ * non-focusable empty space, which drops focus to the body; that is exactly
+ * when the trigger should reclaim it.
+ */
+export function isFocusDetached(doc = document) {
+  const active = doc.activeElement;
+  return active == null || active === doc.body || active === doc.documentElement;
+}

package/dist/utils/index.d.ts

@@ -15,6 +15,7 @@ export { parseStyleKey } from './parseStyleKey';
 export { getKey, type Key, type KeyFallback } from './getKey';
 export { mergeProps } from './mergeProps';
 export { mergeRefs } from './mergeRefs';
+export { isFocusDetached } from './focusReturn';
 export { composeEventHandlers } from './composeEventHandlers';
 export { themeProps, themeDataAttributes } from './themeProps';
 export type { ClassValue, ClassProps, ThemeDataAttributes, ThemeProps, } from './themeProps';
@@ -28,4 +29,5 @@ export { parseHex, parseRgb, parseColor, formatHex, formatColor, toGLFloats, } f
 export type { RGBA } from './color';
 export { devWarn, devError, warnOnce, formatDevMessage } from './devWarning';
 export { rtlStyles } from './rtlStyles';
+export { focusOutlineStyles, focusOutlineProps } from './focusOutline.stylex';
 //# sourceMappingURL=index.d.ts.map