@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/Stack/Stack.doc.mjs

@@ -46,12 +46,36 @@ export const docs = {
           description:
             'Inline (horizontal) padding. Overrides padding on the inline axis when both are set.',
         },
+        {
+          name: 'paddingInlineStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-start padding, using the spacing scale (left in LTR, right in RTL). Overrides paddingInline and padding on that edge only.',
+        },
+        {
+          name: 'paddingInlineEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-end padding, using the spacing scale (right in LTR, left in RTL). Overrides paddingInline and padding on that edge only.',
+        },
         {
           name: 'paddingBlock',
           type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding. Overrides padding on the block axis when both are set.',
         },
+        {
+          name: 'paddingBlockStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-start (top) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
+        {
+          name: 'paddingBlockEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-end (bottom) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
         {
           name: 'isScrollable',
           type: 'boolean',
@@ -150,12 +174,36 @@ export const docs = {
           description:
             'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
         },
+        {
+          name: 'paddingInlineStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-start padding, using the spacing scale (left in LTR, right in RTL). Overrides paddingInline and padding on that edge only.',
+        },
+        {
+          name: 'paddingInlineEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-end padding, using the spacing scale (right in LTR, left in RTL). Overrides paddingInline and padding on that edge only.',
+        },
         {
           name: 'paddingBlock',
           type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
         },
+        {
+          name: 'paddingBlockStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-start (top) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
+        {
+          name: 'paddingBlockEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-end (bottom) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
         {
           name: 'isScrollable',
           type: 'boolean',
@@ -253,12 +301,36 @@ export const docs = {
           description:
             'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
         },
+        {
+          name: 'paddingInlineStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-start padding, using the spacing scale (left in LTR, right in RTL). Overrides paddingInline and padding on that edge only.',
+        },
+        {
+          name: 'paddingInlineEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Inline-end padding, using the spacing scale (right in LTR, left in RTL). Overrides paddingInline and padding on that edge only.',
+        },
         {
           name: 'paddingBlock',
           type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
         },
+        {
+          name: 'paddingBlockStart',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-start (top) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
+        {
+          name: 'paddingBlockEnd',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+          description:
+            'Block-end (bottom) padding, using the spacing scale. Overrides paddingBlock and padding on that edge only.',
+        },
         {
           name: 'isScrollable',
           type: 'boolean',

package/src/Stack/Stack.test.tsx

@@ -13,6 +13,22 @@ import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Stack} from './Stack';
 
+/**
+ * The functional class output, as an order-insensitive set. StyleX's dev
+ * runtime also emits readable debug classes naming the style object a
+ * declaration came from ("padding__paddingBlockStyles.2"); those record
+ * provenance rather than applied CSS and survive even when the declaration
+ * they name loses a merge, so they are dropped here.
+ */
+function classSet(el: HTMLElement): Set<string> {
+  return new Set(
+    el.className
+      .split(' ')
+      .filter(Boolean)
+      .filter(c => !c.includes('__') && !c.includes('.')),
+  );
+}
+
 describe('Stack', () => {
   it('defaults to vertical direction', () => {
     render(
@@ -314,4 +330,144 @@ describe('Stack', () => {
     const withScroll = screen.getByTestId('stack').className;
     expect(withScroll).not.toBe(withoutScroll);
   });
+
+  it('applies a class when paddingBlockStart is set on its own', () => {
+    const {rerender} = render(
+      <Stack data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    const baseline = screen.getByTestId('stack').className;
+    rerender(
+      <Stack paddingBlockStart={2} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    expect(screen.getByTestId('stack').className).not.toBe(baseline);
+  });
+
+  it('lets paddingBlockStart/paddingBlockEnd override only their own edge', () => {
+    const {rerender} = render(
+      <Stack padding={4} paddingBlockStart={2} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    const perEdge = classSet(screen.getByTestId('stack'));
+    rerender(
+      <Stack
+        paddingInline={4}
+        paddingBlockStart={2}
+        paddingBlockEnd={4}
+        data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    expect(perEdge).toEqual(classSet(screen.getByTestId('stack')));
+  });
+
+  it('gives paddingBlockEnd precedence over paddingBlock', () => {
+    const {rerender} = render(
+      <Stack paddingBlock={6} paddingBlockEnd={0} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    const overridden = classSet(screen.getByTestId('stack'));
+    rerender(
+      <Stack paddingBlockStart={6} paddingBlockEnd={0} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    expect(overridden).toEqual(classSet(screen.getByTestId('stack')));
+  });
+
+  it('leaves padding/paddingBlock output unchanged when no edge prop is set', () => {
+    const {rerender} = render(
+      <Stack padding={3} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    const uniform = classSet(screen.getByTestId('stack'));
+    rerender(
+      <Stack paddingInline={3} paddingBlock={3} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    expect(uniform).toEqual(classSet(screen.getByTestId('stack')));
+  });
+
+  it('applies a class when paddingInlineStart is set on its own', () => {
+    const {rerender} = render(
+      <Stack data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    const baseline = screen.getByTestId('stack').className;
+    rerender(
+      <Stack paddingInlineStart={2} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    expect(screen.getByTestId('stack').className).not.toBe(baseline);
+  });
+
+  it('lets paddingInlineStart/paddingInlineEnd override only their own edge', () => {
+    const {rerender} = render(
+      <Stack padding={4} paddingInlineStart={2} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    const perEdge = classSet(screen.getByTestId('stack'));
+    rerender(
+      <Stack
+        paddingInlineStart={2}
+        paddingInlineEnd={4}
+        paddingBlock={4}
+        data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    expect(perEdge).toEqual(classSet(screen.getByTestId('stack')));
+  });
+
+  it('gives paddingInlineEnd precedence over paddingInline', () => {
+    const {rerender} = render(
+      <Stack paddingInline={6} paddingInlineEnd={0} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    const overridden = classSet(screen.getByTestId('stack'));
+    rerender(
+      <Stack paddingInlineStart={6} paddingInlineEnd={0} data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    expect(overridden).toEqual(classSet(screen.getByTestId('stack')));
+  });
+
+  it('resolves all four edges independently', () => {
+    // One prop per edge, each a different step: the four-edge spelling and the
+    // shorthand-plus-overrides spelling must agree.
+    const {rerender} = render(
+      <Stack
+        paddingInlineStart={1}
+        paddingInlineEnd={2}
+        paddingBlockStart={3}
+        paddingBlockEnd={4}
+        data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    const explicit = classSet(screen.getByTestId('stack'));
+    rerender(
+      <Stack
+        padding={4}
+        paddingInlineStart={1}
+        paddingInlineEnd={2}
+        paddingBlockStart={3}
+        data-testid="stack">
+        <div>Content</div>
+      </Stack>,
+    );
+    expect(explicit).toEqual(classSet(screen.getByTestId('stack')));
+  });
 });

package/src/Stack/Stack.tsx

@@ -25,8 +25,10 @@ import {
 } from './stack.stylex';
 import type {SizeValue} from '../utils/types';
 import {
-  paddingInlineStyles,
-  paddingBlockStyles,
+  paddingInlineStartStyles,
+  paddingInlineEndStyles,
+  paddingBlockStartStyles,
+  paddingBlockEndStyles,
 } from '../Layout/padding.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
@@ -140,12 +142,38 @@ export interface StackProps extends BaseProps<HTMLElement> {
    */
   paddingInline?: SpacingStep;
 
+  /**
+   * Inline-start padding, using the spacing scale. Logical: the left edge in
+   * LTR, the right edge in RTL.
+   * Overrides `paddingInline` and `padding` on that edge only.
+   */
+  paddingInlineStart?: SpacingStep;
+
+  /**
+   * Inline-end padding, using the spacing scale. Logical: the right edge in
+   * LTR, the left edge in RTL.
+   * Overrides `paddingInline` and `padding` on that edge only.
+   */
+  paddingInlineEnd?: SpacingStep;
+
   /**
    * Block (vertical) padding, using the spacing scale.
    * Overrides `padding` on the block axis when both are set.
    */
   paddingBlock?: SpacingStep;
 
+  /**
+   * Block-start (top) padding, using the spacing scale.
+   * Overrides `paddingBlock` and `padding` on that edge only.
+   */
+  paddingBlockStart?: SpacingStep;
+
+  /**
+   * Block-end (bottom) padding, using the spacing scale.
+   * Overrides `paddingBlock` and `padding` on that edge only.
+   */
+  paddingBlockEnd?: SpacingStep;
+
   /**
    * Enables scrollable overflow (`overflow: auto`) for the stack.
    *
@@ -211,7 +239,11 @@ export function Stack({
   gap,
   padding,
   paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
   paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
   isScrollable,
   width,
   height,
@@ -242,10 +274,14 @@ export function Stack({
       ? (resolvedVAlign as StackCrossAlignment | undefined)
       : (resolvedHAlign as StackCrossAlignment | undefined);
 
-  // Resolve padding to per-axis values: `padding` sets both axes; `paddingInline`
-  // / `paddingBlock` take precedence on their own axis when provided.
-  const resolvedPaddingInline = paddingInline ?? padding;
-  const resolvedPaddingBlock = paddingBlock ?? padding;
+  // Resolve padding to per-edge values. Most specific wins, per edge:
+  // edge prop -> axis prop -> `padding`.
+  const resolvedPaddingInlineStart =
+    paddingInlineStart ?? paddingInline ?? padding;
+  const resolvedPaddingInlineEnd = paddingInlineEnd ?? paddingInline ?? padding;
+  const resolvedPaddingBlockStart =
+    paddingBlockStart ?? paddingBlock ?? padding;
+  const resolvedPaddingBlockEnd = paddingBlockEnd ?? paddingBlock ?? padding;
 
   const stylexProps = stylex.props(
     ...stack({
@@ -255,8 +291,14 @@ export function Stack({
       gap,
       wrap,
     }),
-    resolvedPaddingInline != null && paddingInlineStyles[resolvedPaddingInline],
-    resolvedPaddingBlock != null && paddingBlockStyles[resolvedPaddingBlock],
+    resolvedPaddingInlineStart != null &&
+      paddingInlineStartStyles[resolvedPaddingInlineStart],
+    resolvedPaddingInlineEnd != null &&
+      paddingInlineEndStyles[resolvedPaddingInlineEnd],
+    resolvedPaddingBlockStart != null &&
+      paddingBlockStartStyles[resolvedPaddingBlockStart],
+    resolvedPaddingBlockEnd != null &&
+      paddingBlockEndStyles[resolvedPaddingBlockEnd],
     isScrollable && overflowStyles.scrollable,
     xstyle,
   );

package/src/Switch/Switch.tsx

@@ -161,7 +161,10 @@ const styles = stylex.create({
     margin: 0,
     padding: 0,
     opacity: 0,
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     zIndex: 1,
     minInlineSize: {
       default: null,
@@ -185,7 +188,7 @@ const styles = stylex.create({
     },
   },
   inputDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   inputBusy: {
     pointerEvents: 'none',

package/src/TabList/Tab.tsx

@@ -101,7 +101,10 @@ const styles = stylex.create({
     lineHeight: typeScaleVars['--text-label-leading'],
     fontWeight: fontWeightVars['--font-weight-normal'],
     color: colorVars['--color-text-secondary'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     textDecoration: 'none',
     whiteSpace: 'nowrap',
     transitionProperty: 'color',

package/src/TabList/TabMenu.tsx

@@ -87,7 +87,10 @@ const styles = stylex.create({
     lineHeight: typeScaleVars['--text-label-leading'],
     fontWeight: fontWeightVars['--font-weight-normal'],
     color: colorVars['--color-text-secondary'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     textDecoration: 'none',
     transitionProperty: 'color',
     transitionDuration: durationVars['--duration-fast'],
@@ -185,13 +188,16 @@ const styles = stylex.create({
     lineHeight: typeScaleVars['--text-label-leading'],
     fontWeight: fontWeightVars['--font-weight-normal'],
     color: colorVars['--color-text-primary'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/Table/TableRow.tsx

@@ -61,13 +61,13 @@ const hoverRowStyles = stylex.create({
   row: {
     backgroundColor: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
     '--table-row-overlay': {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -82,14 +82,14 @@ const stripedHoverRowStyles = stylex.create({
     backgroundColor: {
       default: null,
       ':nth-child(even)': colorVars['--color-background-muted'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
     '--table-row-overlay': {
       default: null,
       ':nth-child(even)': colorVars['--color-background-muted'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -207,7 +207,10 @@ const handleStyles = stylex.create({
     // Wide transparent hit area; the visible indicator uses ::after to span
     // the full handle height independently of the border box.
     width: '8px',
-    cursor: 'ew-resize',
+    cursor: {
+      default: 'ew-resize',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     zIndex: 1,
     touchAction: 'none',
     userSelect: 'none',
@@ -216,7 +219,8 @@ const handleStyles = stylex.create({
     // can't receive :hover directly.
     '--indicator-color': {
       default: 'transparent',
-      ':hover': colorVars['--color-accent'],
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))':
+        colorVars['--color-accent'],
       ':focus-visible': colorVars['--color-accent'],
     },
     '@media (pointer: coarse)': {

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -362,7 +362,10 @@ const filterStyles = stylex.create({
   triggerButton: {
     background: 'none',
     border: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -113,7 +113,10 @@ export interface UseTableGroupedRowsResult<T extends Record<string, unknown>> {
 
 const styles = stylex.create({
   headerRow: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     userSelect: 'none',
     backgroundColor: colorVars['--color-background-muted'],
     // Divider beneath each group header row (Ernest review #2).
@@ -145,10 +148,14 @@ const styles = stylex.create({
     margin: 0,
     background: 'transparent',
     border: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     color: {
       default: colorVars['--color-icon-secondary'],
-      ':hover': colorVars['--color-icon-primary'],
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))':
+        colorVars['--color-icon-primary'],
     },
   },
   chevronIcon: {

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -77,7 +77,10 @@ const expansionStyles = stylex.create({
     background: 'transparent',
     border: 'none',
     borderRadius: radiusVars['--radius-inner'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     color: colorVars['--color-icon-secondary'],
     transitionProperty: 'transform, color',
     transitionDuration: '150ms',
@@ -85,11 +88,11 @@ const expansionStyles = stylex.create({
     // Match IconButton ghost hover: subtle overlay background.
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
     },
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       color: colorVars['--color-icon-primary'],
     },
   },

package/src/Table/plugins/sortable/useTableSortable.tsx

@@ -125,7 +125,10 @@ const sortStyles = stylex.create({
     border: 'none',
     padding: 0,
     margin: 0,
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     font: 'inherit',
     color: 'inherit',
     width: '100%',

package/src/Table/plugins/sortable/useTableSortableState.test.tsx

@@ -17,6 +17,7 @@ import {useTableSortable} from './useTableSortable';
 import type {TableSortState} from './useTableSortable';
 import {useTableSortableState} from './useTableSortableState';
 import type {UseTableSortableStateConfig} from './useTableSortableState';
+import {InternationalizationProvider} from '../../../i18n';
 
 // =============================================================================
 // Test Data
@@ -119,6 +120,39 @@ describe('useTableSortableState', () => {
       ]);
     });
 
+    it('re-sorts strings when the provider locale changes', () => {
+      const localeData: Employee[] = [
+        {
+          id: '1',
+          name: 'z',
+          age: 1,
+          department: 'Test',
+          salary: 1,
+        },
+        {
+          id: '2',
+          name: 'ä',
+          age: 2,
+          department: 'Test',
+          salary: 2,
+        },
+      ];
+      const table = (locale: string) => (
+        <InternationalizationProvider locale={locale}>
+          <SortableStateTable
+            data={localeData}
+            defaultSort={[{sortKey: 'name', direction: 'ascending'}]}
+          />
+        </InternationalizationProvider>
+      );
+
+      const {rerender} = render(table('sv-SE'));
+      expect(getNameColumnValues()).toEqual(['z', 'ä']);
+
+      rerender(table('de-DE'));
+      expect(getNameColumnValues()).toEqual(['ä', 'z']);
+    });
+
     it('renders unsorted when no defaultSort', () => {
       render(<SortableStateTable />);