@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/Resizable/ResizeHandle.test.tsx

@@ -344,6 +344,28 @@ describe('ResizeHandle', () => {
     expect(hitArea.className).not.toContain('hitAreaOffsetX');
   });
 
+  // The grab zone is stretched along the handle by its 0/0 insets, so anything
+  // that moves it across the handle displaces the whole zone off the divider —
+  // a percentage does it by half the handle's length, so the taller the panel
+  // the larger the dead region, and nothing about it is visible on screen.
+  it.each([
+    ['horizontal' as const, 'translateX'],
+    ['vertical' as const, 'translateY'],
+  ])('offsets the %s grab zone along the pill axis only', (direction, axis) => {
+    render(<Harness handleProps={{direction, pillPlacement: 'start'}} />);
+    const hitArea = getSeparator().firstElementChild as HTMLElement;
+    const translates = (hitArea.getAttribute('style') ?? '')
+      .split(';')
+      .map(decl => decl.split(/:(.*)/s)[1]?.trim() ?? '')
+      .filter(value => value.startsWith('translate'));
+
+    // Both the LTR and RTL declarations of the horizontal offset.
+    expect(translates.length).toBeGreaterThan(0);
+    for (const translate of translates) {
+      expect(translate.startsWith(`${axis}(`)).toBe(true);
+    }
+  });
+
   // --- Prop composition (ordering choice: handler sits after {...props}) ---
 
   it('runs a consumer onKeyDown alongside keyboard resizing', () => {

package/src/Resizable/ResizeHandle.tsx

@@ -119,12 +119,18 @@ const styles = stylex.create({
   horizontal: {
     width: 1,
     height: '100%',
-    cursor: 'col-resize',
+    cursor: {
+      default: 'col-resize',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   vertical: {
     height: 1,
     width: '100%',
-    cursor: 'row-resize',
+    cursor: {
+      default: 'row-resize',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   noDividerHorizontal: {
     backgroundColor: 'transparent',
@@ -155,13 +161,19 @@ const styles = stylex.create({
     width: spacingVars['--spacing-4'],
     top: 0,
     bottom: 0,
-    cursor: 'col-resize',
+    cursor: {
+      default: 'col-resize',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   hitAreaVertical: {
     height: spacingVars['--spacing-4'],
     insetInlineStart: 0,
     insetInlineEnd: 0,
-    cursor: 'row-resize',
+    cursor: {
+      default: 'row-resize',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
   // Centered grab zone (pillPlacement 'center' / no bias): sit the hit area on
   // the divider itself. Inline centering comes from rtlStyles.centerInline at
@@ -219,16 +231,22 @@ const dynamicStyles = stylex.create({
   // directions because the pill's own offset is physical. Mixing the previous
   // divider-relative `50%` anchor with a percentage translate stranded the grab
   // zone to one side under RTL; this construction keeps it on the pill.
+  //
+  // Only the offset axis is translated. Unlike the pill — a small box anchored
+  // at the divider's midpoint, so it needs a −50% self-shift to centre — the
+  // grab zone is STRETCHED along the handle by hitAreaHorizontal/Vertical's
+  // 0/0 insets, so it is already in place on that axis. A percentage there
+  // would displace it by half the handle's own length, growing with the panel.
   hitAreaOffsetX: (dir: number) => ({
     insetInlineStart: 0,
     transform: {
-      default: `translate(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px), -50%)`,
-      ':is([dir="rtl"] *)': `translate(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px), -50%)`,
+      default: `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
+      ':is([dir="rtl"] *)': `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))`,
     },
   }),
   hitAreaOffsetY: (dir: number) => ({
     insetBlockStart: 0,
-    transform: `translate(-50%, calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
+    transform: `translateY(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
   }),
   pillOffsetX: (dir: number) => ({
     insetInlineStart: 0,

package/src/Section/Section.doc.mjs

@@ -53,11 +53,36 @@ export const docs = {
       description: 'Internal padding using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Use padding={0} for edge-to-edge content.',
       default: '4',
     },
+    {
+      name: 'paddingInline',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: 'Inline (horizontal) padding override. Overrides only the inline-axis padding while preserving block padding from `padding` or the container theme default. Accepts the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10).',
+    },
+    {
+      name: 'paddingInlineStart',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: 'Inline-start padding override (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 override (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 override. Overrides only the block-axis padding while preserving inline padding from `padding` or the container theme default. Accepts the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10).',
     },
+    {
+      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: 'xstyle',
       type: 'StyleXStyles',
@@ -135,11 +160,36 @@ export const docsZh = {
       description: '使用间距比例的内部内边距（0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10）。使用 padding={0} 实现全宽内容。',
       default: '4',
     },
+    {
+      name: 'paddingInline',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '行内（水平）方向内边距覆盖。仅覆盖行内轴内边距，同时保留来自 padding 或容器主题默认值的块内边距。使用间距比例（0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10）。',
+    },
+    {
+      name: 'paddingInlineStart',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '行内起始内边距覆盖（LTR 中为左侧，RTL 中为右侧）。仅在该边上覆盖 paddingInline 和 padding。',
+    },
+    {
+      name: 'paddingInlineEnd',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '行内结束内边距覆盖（LTR 中为右侧，RTL 中为左侧）。仅在该边上覆盖 paddingInline 和 padding。',
+    },
     {
       name: 'paddingBlock',
       type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: '块（垂直）方向内边距覆盖。仅覆盖块轴内边距，同时保留来自 padding 或容器主题默认值的行内内边距。使用间距比例（0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10）。',
     },
+    {
+      name: 'paddingBlockStart',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '块起始（顶部）内边距，使用间距刻度。仅在该边上覆盖 paddingBlock 和 padding。',
+    },
+    {
+      name: 'paddingBlockEnd',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description: '块结束（底部）内边距，使用间距刻度。仅在该边上覆盖 paddingBlock 和 padding。',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -192,7 +242,12 @@ export const docsDense = {
     children: 'Content rendered inside section.',
     dividers: 'Which sides of section have divider borders.',
     padding: 'Internal padding via spacing scale; 0 for edge-to-edge content.',
+    paddingInline: 'Inline-axis padding override; preserves block padding from padding/theme.',
+    paddingInlineStart: 'Inline-start (left in LTR) padding override; wins over paddingInline/padding on that edge.',
+    paddingInlineEnd: 'Inline-end (right in LTR) padding override; wins over paddingInline/padding on that edge.',
     paddingBlock: 'Block-axis padding override; preserves inline padding from padding/theme.',
+    paddingBlockStart: 'Block-start (top) padding override; wins over paddingBlock/padding on that edge.',
+    paddingBlockEnd: 'Block-end (bottom) padding override; wins over paddingBlock/padding on that edge.',
     xstyle: 'StyleX styles for layout customization; must be stylex.create() value.',
   },
 };

package/src/Section/Section.test.tsx

@@ -4,6 +4,22 @@ import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Section} from './Section';
 
+/**
+ * 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('Section', () => {
   it('renders with default props', () => {
     const {container} = render(<Section>Default section</Section>);
@@ -151,15 +167,27 @@ describe('Section', () => {
     expect(screen.getByTestId('custom-section')).toBeInTheDocument();
   });
 
-  it('propagates explicit padding to nested sections via --astryx-section-padding', () => {
+  it('propagates explicit padding to nested sections via --_section-padding-propagated', () => {
     const {container} = render(
       <Section padding={6}>
         <Section data-testid="inner">Inner</Section>
       </Section>,
     );
-    // Outer section's inner div should set --astryx-section-padding
-    const outerInner = container.firstElementChild!.firstElementChild!;
-    expect(outerInner.className).toBeDefined();
+    // The outer section's inner div announces its padding on the PRIVATE
+    // propagation var, not the public `--astryx-section-padding` theme token —
+    // the split is what lets an overlay drop an inherited value at its
+    // boundary while keeping the theme's (see overlayPaddingReset).
+    const outerInner = container.firstElementChild!
+      .firstElementChild! as HTMLElement;
+    expect(
+      getComputedStyle(outerInner).getPropertyValue(
+        '--_section-padding-propagated',
+      ),
+      // jsdom does not resolve the token reference to its 24px value.
+    ).toBe('var(--spacing-6)');
+    expect(
+      getComputedStyle(outerInner).getPropertyValue('--astryx-section-padding'),
+    ).toBe('');
     // Inner section should render without error
     expect(screen.getByTestId('inner')).toBeInTheDocument();
     expect(screen.getByText('Inner')).toBeInTheDocument();
@@ -176,4 +204,173 @@ describe('Section', () => {
     expect(screen.getByTestId('inner')).toBeInTheDocument();
     expect(screen.getByText('Inner')).toBeInTheDocument();
   });
+
+  it('applies a class when paddingBlockStart is set on its own', () => {
+    const {container, rerender} = render(<Section>Content</Section>);
+    const baseline = (
+      container.firstElementChild!.firstElementChild as HTMLElement
+    ).className;
+    rerender(<Section paddingBlockStart={2}>Content</Section>);
+    const withEdge = (
+      container.firstElementChild!.firstElementChild as HTMLElement
+    ).className;
+    expect(withEdge).not.toBe(baseline);
+  });
+
+  it('treats paddingBlock as the two edge props set to the same step', () => {
+    const {container, rerender} = render(
+      <Section paddingBlock={2}>Content</Section>,
+    );
+    const axis = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section paddingBlockStart={2} paddingBlockEnd={2}>
+        Content
+      </Section>,
+    );
+    expect(axis).toEqual(
+      classSet(container.firstElementChild!.firstElementChild as HTMLElement),
+    );
+  });
+
+  it('gives paddingBlockEnd precedence over paddingBlock', () => {
+    const {container, rerender} = render(
+      <Section paddingBlock={2} paddingBlockEnd={8}>
+        Content
+      </Section>,
+    );
+    const overridden = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section paddingBlockStart={2} paddingBlockEnd={8}>
+        Content
+      </Section>,
+    );
+    expect(overridden).toEqual(
+      classSet(container.firstElementChild!.firstElementChild as HTMLElement),
+    );
+  });
+
+  it('keeps inline padding when only a block edge is overridden', () => {
+    // padding={6} sets all four edges; paddingBlockStart={0} may only move the
+    // top edge, so the inline classes must survive unchanged.
+    const {container, rerender} = render(
+      <Section padding={6}>Content</Section>,
+    );
+    const uniform = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section padding={6} paddingBlockStart={0}>
+        Content
+      </Section>,
+    );
+    const overridden = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    // Everything the uniform render dropped is block-start related.
+    const removed = [...uniform].filter(c => !overridden.has(c));
+    const added = [...overridden].filter(c => !uniform.has(c));
+    expect(removed.length).toBeGreaterThan(0);
+    expect(added.length).toBeGreaterThan(0);
+    // The inline-axis classes are shared by both renders.
+    expect(uniform.size - removed.length).toBeGreaterThan(0);
+  });
+
+  it('applies a class when paddingInlineStart is set on its own', () => {
+    const {container, rerender} = render(<Section>Content</Section>);
+    const baseline = (
+      container.firstElementChild!.firstElementChild as HTMLElement
+    ).className;
+    rerender(<Section paddingInlineStart={2}>Content</Section>);
+    expect(
+      (container.firstElementChild!.firstElementChild as HTMLElement).className,
+    ).not.toBe(baseline);
+  });
+
+  it('treats paddingInline as the two inline edge props set to the same step', () => {
+    const {container, rerender} = render(
+      <Section paddingInline={2}>Content</Section>,
+    );
+    const axis = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section paddingInlineStart={2} paddingInlineEnd={2}>
+        Content
+      </Section>,
+    );
+    expect(axis).toEqual(
+      classSet(container.firstElementChild!.firstElementChild as HTMLElement),
+    );
+  });
+
+  it('gives paddingInlineEnd precedence over paddingInline', () => {
+    const {container, rerender} = render(
+      <Section paddingInline={2} paddingInlineEnd={8}>
+        Content
+      </Section>,
+    );
+    const overridden = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section paddingInlineStart={2} paddingInlineEnd={8}>
+        Content
+      </Section>,
+    );
+    expect(overridden).toEqual(
+      classSet(container.firstElementChild!.firstElementChild as HTMLElement),
+    );
+  });
+
+  it('keeps block padding when only an inline edge is overridden', () => {
+    const {container, rerender} = render(
+      <Section padding={6}>Content</Section>,
+    );
+    const uniform = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section padding={6} paddingInlineStart={0}>
+        Content
+      </Section>,
+    );
+    const overridden = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    const removed = [...uniform].filter(c => !overridden.has(c));
+    const added = [...overridden].filter(c => !uniform.has(c));
+    expect(removed.length).toBeGreaterThan(0);
+    expect(added.length).toBeGreaterThan(0);
+    // The block-axis classes survive the inline-edge override.
+    expect(uniform.size - removed.length).toBeGreaterThan(0);
+  });
+
+  it('moves the inline container vars with a per-edge override', () => {
+    // Section drives --container-padding-inline-start/end for bleed children.
+    // A per-edge override must move only the matching var, so a nested Section
+    // or a bleeding Divider compensates against the real padding.
+    const {container, rerender} = render(
+      <Section padding={6} paddingInlineStart={2}>
+        Content
+      </Section>,
+    );
+    const startOverride = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section padding={6} paddingInlineEnd={2}>
+        Content
+      </Section>,
+    );
+    const endOverride = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    // Overriding opposite edges by the same step must not produce identical
+    // output — each edge carries its own padding class and its own var class.
+    expect(startOverride).not.toEqual(endOverride);
+  });
 });

package/src/Section/Section.tsx

@@ -21,8 +21,15 @@ import {container} from '../Layout/container.stylex';
 import type {SpacingToken} from '../Layout/container.stylex';
 import {
   paddingStyles,
+  paddingInlineStyles,
+  paddingInlineStartStyles,
+  paddingInlineEndStyles,
   paddingBlockStyles,
+  paddingBlockStartStyles,
+  paddingBlockEndStyles,
   containerPaddingInlineVarStyles,
+  containerPaddingInlineStartVarStyles,
+  containerPaddingInlineEndVarStyles,
   containerPaddingBlockStartVarStyles,
   containerPaddingBlockEndVarStyles,
   sectionPaddingPropagationStyles,
@@ -175,6 +182,27 @@ export interface SectionProps extends BaseProps<HTMLElement> {
    * @default 4 (16px)
    */
   padding?: SpacingStep;
+  /**
+   * Inline (horizontal) padding override. When set, overrides only the inline
+   * axis padding while preserving block padding from `padding` or the
+   * container theme default.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingInline?: SpacingStep;
+  /**
+   * Inline-start padding override. Logical: the left edge in LTR, the right
+   * edge in RTL. Takes precedence over `paddingInline` and `padding` on that
+   * edge only; every other edge is left alone.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingInlineStart?: SpacingStep;
+  /**
+   * Inline-end padding override. Logical: the right edge in LTR, the left
+   * edge in RTL. Takes precedence over `paddingInline` and `padding` on that
+   * edge only; every other edge is left alone.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingInlineEnd?: SpacingStep;
   /**
    * Block (vertical) padding override. When set, overrides only the block
    * axis padding while preserving inline padding from `padding` or the
@@ -182,6 +210,20 @@ export interface SectionProps extends BaseProps<HTMLElement> {
    * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
    */
   paddingBlock?: SpacingStep;
+  /**
+   * Block-start (top) padding override. Takes precedence over `paddingBlock`
+   * and `padding` on that edge only; the block-end edge and both inline edges
+   * are left alone.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingBlockStart?: SpacingStep;
+  /**
+   * Block-end (bottom) padding override. Takes precedence over `paddingBlock`
+   * and `padding` on that edge only; the block-start edge and both inline
+   * edges are left alone.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingBlockEnd?: SpacingStep;
 }
 
 /**
@@ -211,7 +253,12 @@ export function Section({
   children,
   dividers,
   padding,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
   paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
   xstyle,
   className,
   style,
@@ -275,11 +322,33 @@ export function Section({
               containerPaddingBlockEndVarStyles[effectivePadding],
             !useThemeDefault &&
               sectionPaddingPropagationStyles[effectivePadding],
+            paddingInline != null && paddingInlineStyles[paddingInline],
+            paddingInline != null &&
+              containerPaddingInlineVarStyles[paddingInline],
             paddingBlock != null && paddingBlockStyles[paddingBlock],
             paddingBlock != null &&
               containerPaddingBlockStartVarStyles[paddingBlock],
             paddingBlock != null &&
               containerPaddingBlockEndVarStyles[paddingBlock],
+            // Per-edge overrides come last so they win over `paddingBlock`
+            // and `padding` on their own edge. The matching container var is
+            // updated alongside so bleed children (Table, Divider, nested
+            // Section) compensate against the padding actually applied.
+            paddingBlockStart != null &&
+              paddingBlockStartStyles[paddingBlockStart],
+            paddingBlockStart != null &&
+              containerPaddingBlockStartVarStyles[paddingBlockStart],
+            paddingBlockEnd != null && paddingBlockEndStyles[paddingBlockEnd],
+            paddingBlockEnd != null &&
+              containerPaddingBlockEndVarStyles[paddingBlockEnd],
+            paddingInlineStart != null &&
+              paddingInlineStartStyles[paddingInlineStart],
+            paddingInlineStart != null &&
+              containerPaddingInlineStartVarStyles[paddingInlineStart],
+            paddingInlineEnd != null &&
+              paddingInlineEndStyles[paddingInlineEnd],
+            paddingInlineEnd != null &&
+              containerPaddingInlineEndVarStyles[paddingInlineEnd],
             variantStyles[variant],
             dividers?.includes('top') && dividerStyles.top,
             dividers?.includes('bottom') && dividerStyles.bottom,

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -199,6 +199,37 @@ describe('SegmentedControl', () => {
     expect(screen.queryByText('Grid view')).not.toBeInTheDocument();
   });
 
+  it('fill items can shrink and truncate long labels', () => {
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={() => {}}
+        label="View mode"
+        layout="fill">
+        <SegmentedControlItem
+          value="grid"
+          label="A very long segment label that should truncate"
+        />
+        <SegmentedControlItem value="list" label="List" />
+        <SegmentedControlItem value="table" label="Table" />
+      </SegmentedControl>,
+    );
+
+    const button = screen.getByRole('radio', {name: /very long/});
+    const label = screen.getByText(
+      'A very long segment label that should truncate',
+    );
+
+    // The button (flex child) must allow shrinking below content size
+    const buttonStyle = getComputedStyle(button);
+    expect(buttonStyle.minWidth).toBe('0');
+
+    // The label span must set up text truncation
+    const labelStyle = getComputedStyle(label);
+    expect(labelStyle.overflow).toBe('hidden');
+    expect(labelStyle.textOverflow).toBe('ellipsis');
+  });
+
   it('uses roving tabindex — selected item has tabIndex 0, others -1', () => {
     render(
       <SegmentedControl value="list" onChange={() => {}} label="View mode">

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -82,7 +82,11 @@ const styles = stylex.create({
     lineHeight: typeScaleVars['--text-label-leading'],
     fontWeight: fontWeightVars['--font-weight-medium'],
     color: colorVars['--color-text-secondary'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+    whiteSpace: 'nowrap',
     transitionProperty: 'color, background-color, box-shadow',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
@@ -90,7 +94,7 @@ const styles = stylex.create({
   hover: {
     backgroundColor: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -125,6 +129,7 @@ const styles = stylex.create({
   },
   fill: {
     flex: 1,
+    minWidth: 0,
     justifyContent: 'center',
   },
   icon: {
@@ -133,6 +138,11 @@ const styles = stylex.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
+  labelText: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    minWidth: 0,
+  },
 });
 
 const CONCENTRIC_RADIUS =
@@ -244,7 +254,9 @@ export function SegmentedControlItem({
         ),
       )}>
       {iconElement}
-      {!isLabelHidden && <span>{label}</span>}
+      {!isLabelHidden && (
+        <span {...stylex.props(styles.labelText)}>{label}</span>
+      )}
     </button>
   );
 }

package/src/SelectableCard/SelectableCard.tsx

@@ -55,7 +55,10 @@ import {focusOutlineProps} from '../utils/focusOutline.stylex';
 const styles = stylex.create({
   interactive: {
     position: 'relative',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     transitionProperty: 'box-shadow, border-color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
@@ -80,13 +83,13 @@ const styles = stylex.create({
   },
   hoverOnPointer: {
     '@media (hover: hover)': {
-      ':hover::after': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))::after': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },
   },
   disabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
     opacity: 0.5,
   },
   srOnly: {