@astryxdesign/core 0.1.4-canary.360fc9c → 0.1.4-canary.37c19d3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.4-canary.360fc9c",
+  "version": "0.1.4-canary.37c19d3",
   "displayName": "XDS Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",

package/src/Card/Card.tsx

@@ -44,10 +44,8 @@ import {themeProps} from '../utils/themeProps';
  * - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
  *   Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
  *
- * Only `default` draws a visible border. Its border width is subtracted from
- * the padding so the total inset (border + padding) equals the padding token —
- * keeping content geometry faithful to the spacing scale and identical to the
- * borderless variants. Themes can override borderWidth/borderColor.
+ * All variants include a transparent border to prevent layout jitter
+ * when switching variants. Themes can override borderWidth/borderColor.
  */
 export type CardVariant =
   | 'default'
@@ -73,18 +71,12 @@ const styles = stylex.create({
     '--_card-radius': radiusVars['--radius-container'],
     borderRadius: 'var(--_card-radius)',
     overflow: 'clip',
-  },
-  // The border is drawn *inside* the padding — its width is subtracted from
-  // each side — so total inset (border + padding) equals the padding token
-  // rather than exceeding it by the border width.
-  withBorder: {
     borderWidth: borderVars['--border-width'],
     borderStyle: 'solid',
+    borderColor: 'transparent',
+  },
+  withBorder: {
     borderColor: colorVars['--color-border-emphasized'],
-    paddingInlineStart: `calc(var(--container-padding-inline-start) - ${borderVars['--border-width']})`,
-    paddingInlineEnd: `calc(var(--container-padding-inline-end) - ${borderVars['--border-width']})`,
-    paddingBlockStart: `calc(var(--container-padding-block-start) - ${borderVars['--border-width']})`,
-    paddingBlockEnd: `calc(var(--container-padding-block-end) - ${borderVars['--border-width']})`,
   },
   // Fixed-height cards scroll content; overflow: auto also clips to border-radius
   scrollable: {
@@ -274,6 +266,7 @@ export function Card({
         stylex.props(
           styles.card,
           variantStyles[variant],
+          variant === 'default' && styles.withBorder,
           hasFixedHeight && styles.scrollable,
           dynamicStyles.sizing(
             width ?? null,
@@ -303,9 +296,6 @@ export function Card({
           !useThemeDefault &&
             effectivePadding !== 4 &&
             containerPaddingBlockEndVarStyles[effectivePadding],
-          // Applied after the container padding so the border-inset calc wins;
-          // it reads the --container-padding-* vars set above.
-          variant === 'default' && styles.withBorder,
           xstyle,
         ),
         className,

package/src/InputGroup/InputGroup.tsx

@@ -201,11 +201,11 @@ export function InputGroup({
           labelTooltip={labelTooltip}>
           <div
             ref={ref}
-            data-testid={testId}
-            {...rest}
             role="group"
             aria-labelledby={labelID}
             aria-describedby={describedByIDs}
+            data-testid={testId}
+            {...rest}
             {...mergeProps(
               themeProps('input-group', {
                 size,

package/src/Item/Item.tsx

@@ -470,9 +470,9 @@ export function Item({
   return (
     <Component
       ref={ref as React.Ref<never>}
-      {...restProps}
       aria-selected={isSelected || undefined}
       aria-disabled={isDisabled || undefined}
+      {...restProps}
       {...mergeProps(
         themeProps('item', {density, align}),
         stylex.props(

package/src/Table/BaseTable.tsx

@@ -279,8 +279,7 @@ function areRowPropsEqual<T extends Record<string, unknown>>(
     return true;
   }
 
-  // Different object reference - compare values. This is intentionally a
-  // one-level shallow compare: nested fields rely on reference identity.
+  // Different object reference - compare values
   const prevItem = prevProps.item;
   const nextItem = nextProps.item;
   const keys = Object.keys(nextItem);