@astryxdesign/core 0.4.4 → 0.4.5-canary.0472ec1

package/src/RadioList/RadioList.test.tsx

@@ -116,6 +116,22 @@ describe('RadioList', () => {
     expect(handleChange).toHaveBeenCalledWith('b');
   });
 
+  it('calls onChange when clicking the description', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <RadioList label="Preference" value="a" onChange={handleChange}>
+        <RadioListItem label="Option A" value="a" description="First option" />
+        <RadioListItem label="Option B" value="b" description="Second option" />
+      </RadioList>,
+    );
+
+    // The whole row delegates surface clicks to the radio, so the description
+    // is a live target — not dead space as it was before.
+    await user.click(screen.getByText('Second option'));
+    expect(handleChange).toHaveBeenCalledWith('b');
+  });
+
   it('disables all radios when group isDisabled is true', () => {
     render(
       <RadioList label="Preference" value="" onChange={() => {}} isDisabled>
@@ -137,7 +153,13 @@ describe('RadioList', () => {
       </RadioList>,
     );
 
-    await user.click(screen.getByLabelText('Option A'));
+    // userEvent honors `pointer-events: none`, so clicking the disabled row's
+    // delegate surface is genuinely blocked (it refuses and throws) rather than
+    // merely ignored by the handler — the guarantee this PR's delegation relies
+    // on.
+    await expect(user.click(screen.getByLabelText('Option A'))).rejects.toThrow(
+      /pointer-events/i,
+    );
     expect(handleChange).not.toHaveBeenCalled();
   });
 
@@ -162,7 +184,13 @@ describe('RadioList', () => {
       </RadioList>,
     );
 
-    await user.click(screen.getByLabelText('Option A'));
+    // userEvent honors `pointer-events: none`, so clicking the disabled row's
+    // delegate surface is genuinely blocked (it refuses and throws) rather than
+    // merely ignored by the handler — the guarantee this PR's delegation relies
+    // on.
+    await expect(user.click(screen.getByLabelText('Option A'))).rejects.toThrow(
+      /pointer-events/i,
+    );
     expect(handleChange).not.toHaveBeenCalled();
   });
 
@@ -647,6 +675,146 @@ describe('RadioList', () => {
       expect(item).toHaveAttribute('aria-label', 'First option');
     });
   });
+
+  describe('radio-list-item theme target', () => {
+    it('renders astryx-radio-list-item, with its size, on every row', () => {
+      render(
+        <RadioList label="Preference" value="" onChange={() => {}} size="sm">
+          <RadioListItem label="Option A" value="a" data-testid="row-a" />
+          <RadioListItem label="Option B" value="b" data-testid="row-b" />
+        </RadioList>,
+      );
+      for (const testid of ['row-a', 'row-b']) {
+        const row = screen.getByTestId(testid);
+        expect(row).toHaveClass('astryx-radio-list-item');
+        expect(row).toHaveClass('sm');
+        expect(row).toHaveAttribute('data-size', 'sm');
+      }
+    });
+
+    it('carries the selected and disabled states a theme keys on', () => {
+      render(
+        <RadioList label="Preference" value="a" onChange={() => {}}>
+          <RadioListItem label="Option A" value="a" data-testid="selected" />
+          <RadioListItem label="Option B" value="b" data-testid="plain" />
+          <RadioListItem
+            label="Option C"
+            value="c"
+            isDisabled
+            data-testid="disabled"
+          />
+        </RadioList>,
+      );
+      const selected = screen.getByTestId('selected');
+      const plain = screen.getByTestId('plain');
+      const disabled = screen.getByTestId('disabled');
+
+      expect(selected).toHaveClass('selected');
+      expect(selected).toHaveAttribute('data-selected', 'selected');
+      expect(plain).not.toHaveClass('selected');
+      expect(plain).not.toHaveAttribute('data-selected');
+
+      expect(disabled).toHaveClass('disabled');
+      expect(disabled).toHaveAttribute('data-disabled', 'disabled');
+      expect(plain).not.toHaveAttribute('data-disabled');
+    });
+
+    it('rides the painting row element (astryx-item), not a bare layout wrapper', () => {
+      // The row target must sit on the element Item paints — the surface that
+      // renders hover, density padding, and radius — so a theme styling
+      // `radio-list-item`'s background/padding/borderRadius (and its `:hover`)
+      // actually takes effect. Converges with how ListItem lands `list-item`
+      // on the same element as `astryx-item`. The same element also carries
+      // the reflected `data-size`, proving the variant surface moved with it.
+      const {container} = render(
+        <RadioList label="Preference" value="" onChange={() => {}}>
+          <RadioListItem label="Option A" value="a" data-testid="row" />
+        </RadioList>,
+      );
+      const row = screen.getByTestId('row');
+      // A single element carries both the paint class and the theme target.
+      expect(row).toHaveClass('astryx-item');
+      expect(row).toHaveClass('astryx-radio-list-item');
+      expect(row).toHaveAttribute('data-size');
+      // No separate layout wrapper survives outside the painting row: the
+      // target-bearing element is the same one Item renders.
+      expect(
+        container.querySelectorAll('.astryx-radio-list-item'),
+      ).toHaveLength(1);
+    });
+
+    it('keeps the bare default row appearance: zeroed padding/radius, no default background', () => {
+      // The architectural win — the target rides the painting Item — must not
+      // change the DEFAULT look. The painting row zeroes Item's density
+      // padding, its radius, and its interactive hover/press background, so an
+      // unthemed RadioList renders as a flat surface (only the indicator tints
+      // on hover via `indicatorScope`). This matches the appearance before the
+      // target moved onto Item; a theme's `radio-list-item` overrides still win
+      // from the higher `astryx-theme` layer.
+      render(
+        <RadioList label="Preference" value="a" onChange={() => {}}>
+          <RadioListItem label="Selected" value="a" data-testid="selected" />
+          <RadioListItem label="Plain" value="b" data-testid="plain" />
+        </RadioList>,
+      );
+      const cssFor = (className: string): string => {
+        const rules: string[] = [];
+        const walk = (list: CSSRuleList) => {
+          for (const rule of Array.from(list)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const anyRule = rule as any;
+            if (anyRule.cssRules) {
+              walk(anyRule.cssRules);
+            }
+            if (
+              typeof anyRule.cssText === 'string' &&
+              anyRule.cssText.includes(`.${className}`)
+            ) {
+              rules.push(anyRule.cssText);
+            }
+          }
+        };
+        for (const sheet of Array.from(document.styleSheets)) {
+          try {
+            walk(sheet.cssRules);
+          } catch {
+            // cross-origin/inaccessible sheet — skip
+          }
+        }
+        return rules.join('\n');
+      };
+
+      const plain = screen.getByTestId('plain');
+      const atoms = plain.className
+        .split(/\s+/)
+        .filter(c => /^x[a-z0-9]+$/i.test(c));
+      const declarations = atoms.map(cssFor).join('\n');
+
+      // The bare-look declarations land on the painting row.
+      expect(declarations).toMatch(/padding-block:\s*0/);
+      expect(declarations).toMatch(/padding-inline:\s*0/);
+      expect(declarations).toMatch(/border-radius:\s*0/);
+      expect(declarations).toMatch(/background-color:\s*transparent/);
+
+      // No default full-row hover highlight: the flat transparent background
+      // replaces Item's interactive `:hover` overlay, so no hover rule paints
+      // the row's own background. (The indicator still tints via its scope.)
+      expect(declarations).not.toMatch(
+        /:hover[^{]*\{[^}]*background-color:\s*var\(--color-overlay-hover\)/,
+      );
+
+      // No default selected-row background: the selected row differs from the
+      // plain row only by state markers, not by a painted background class.
+      const selected = screen.getByTestId('selected');
+      const selectedAtoms = selected.className
+        .split(/\s+/)
+        .filter(c => /^x[a-z0-9]+$/i.test(c));
+      const selectedDecls = selectedAtoms.map(cssFor).join('\n');
+      expect(selectedDecls).not.toMatch(
+        /background-color:\s*var\(--color-accent-muted\)/,
+      );
+    });
+  });
 });
 
 // jsdom cannot emulate forced-colors rendering, so this asserts that the

package/src/RadioList/RadioList.tsx

@@ -29,6 +29,7 @@ import {spacingVars} from '../theme/tokens.stylex';
 import {Field} from '../Field/Field';
 import type {InputStatus} from '../Field/types';
 import {useTooltip} from '../Tooltip';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -218,6 +219,13 @@ export function RadioList({
 
   const groupRef = useRef<HTMLDivElement>(null);
 
+  // The radiogroup exposes the *effective* required state so a form-wide
+  // `defaultOptionality="required"` is announced even when the group carries no
+  // visible indicator. Individual radios keep their native `required` bound to
+  // the explicit `isRequired` (via context), so a layout default never switches
+  // on browser validation for the group.
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
+
   // Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
   // controls swallow pointer events, so the tooltip listeners attach to the
   // radiogroup container and the radios stay perceivable via aria-disabled
@@ -387,7 +395,7 @@ export function RadioList({
             .join(' ') || undefined
         }
         aria-invalid={status?.type === 'error' ? true : undefined}
-        aria-required={isRequired || undefined}
+        aria-required={isEffectivelyRequired || undefined}
         {...mergeProps(
           themeProps('radio-list', {orientation, size}),
           stylex.props(

package/src/RadioList/RadioListItem.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file RadioListItem.tsx
- * @input Uses React use, useId, RadioListContext
+ * @input Uses React use, useId, useRef, RadioListContext, Item
  * @output Exports RadioListItem component, RadioListItemProps
  * @position Core implementation; consumed by index.ts, tested by RadioList.test.tsx
  *
@@ -20,10 +20,10 @@
 
 import React, {use, useId, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
+import type {StyleXStyles} from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
-import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {RadioListContext} from './RadioList';
-import {mergeProps} from '../utils';
+import {mergeProps, isRenderable} from '../utils';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {useIndicator} from '../Indicator';
@@ -31,11 +31,6 @@ import {Item} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: spacingVars['--spacing-2'],
-  },
   radioWrapper: {
     position: 'relative',
     display: 'flex',
@@ -79,10 +74,6 @@ const styles = stylex.create({
   indicatorSlot: {
     display: 'contents',
   },
-  labelDisabled: {
-    color: colorVars['--color-text-disabled'],
-    cursor: 'not-allowed',
-  },
 });
 
 const wrapperSizeStyles = stylex.create({
@@ -96,13 +87,23 @@ const wrapperSizeStyles = stylex.create({
   },
 });
 
-const embeddedStyles = stylex.create({
+const rowStyles = stylex.create({
+  // The row's default appearance is a bare surface: no density padding, no
+  // radius, and no full-row background — only the indicator tints on hover
+  // (via `indicatorScope`). Item paints padding/radius/hover as an interactive
+  // row, so this neutralizes them at the component level. A theme's
+  // `radio-list-item` overrides still win: they land in `@layer astryx-theme`,
+  // above the component's base StyleX layer, so themes opt back into row
+  // padding/radius/hover/selected styling. `minWidth: 0` preserves label
+  // truncation now that the Item is the row's flex child.
   root: {
     paddingBlock: 0,
     paddingInline: 0,
     borderRadius: 0,
-    flex: 1,
     minWidth: 0,
+    // Suppress Item's interactive hover/press background so the resting and
+    // hovered row look identical by default (a theme can restyle either).
+    backgroundColor: 'transparent',
   },
 });
 
@@ -159,6 +160,7 @@ export function RadioListItem({
   xstyle,
   className,
   style,
+  onClick,
   ...rest
 }: RadioListItemProps) {
   const context = use(RadioListContext);
@@ -185,16 +187,28 @@ export function RadioListItem({
   const indicatorRef = useRef<HTMLSpanElement>(null);
   const {focusProps} = useIndicatorFocusRing(indicatorRef, isDisabled);
 
+  // The radio is the row's single keyboard control and action. The row is an
+  // enlarged click/tap target that delegates surface clicks — the description
+  // and the empty hover area, not just the control and its label — to the
+  // input via Item's `interactiveRef` (useClickableContainer). This matches
+  // CheckboxListItem so the whole row is clickable, and keeps one tab stop per
+  // option (WCAG 4.1.2). The radio carries its accessible name via `aria-label`
+  // since the visible label is now a plain (non-`<label>`) text node — a real
+  // `<label htmlFor>` would double-fire under delegation.
+  const radioRef = useRef<HTMLInputElement>(null);
+
   const radioCircle = (
     <div
       {...stylex.props(styles.radioWrapper, wrapperSizeStyles[size])}
       {...focusProps}>
       <input
+        ref={radioRef}
         id={id}
         type="radio"
         name={context.name}
         value={value}
         checked={isChecked}
+        aria-label={label}
         disabled={isDisabled && !keepsFocusableForMessage}
         aria-disabled={keepsFocusableForMessage ? 'true' : undefined}
         // A focusable-disabled radio is not natively disabled, so detach it
@@ -208,6 +222,10 @@ export function RadioListItem({
           }
           context.onChange(value);
         }}
+        // A consumer onClick rides on the radio input itself, so it fires for
+        // both direct control clicks and row-surface clicks the row delegates
+        // to the input — the same routing CheckboxListItem uses.
+        onClick={onClick}
         aria-describedby={description ? descriptionID : undefined}
         {...stylex.props(
           styles.input,
@@ -225,50 +243,64 @@ export function RadioListItem({
     </div>
   );
 
-  const mediaContent =
-    startContent != null ? (
-      <>
-        {radioCircle}
-        {startContent}
-      </>
-    ) : (
-      radioCircle
-    );
+  const mediaContent = isRenderable(startContent) ? (
+    <>
+      {radioCircle}
+      {startContent}
+    </>
+  ) : (
+    radioCircle
+  );
 
   return (
-    <div
+    <Item
       ref={ref}
-      {...mergeProps(
-        themeProps('radio-list-item'),
-        stylex.props(
-          styles.container,
+      startContent={mediaContent}
+      // Delegate row-surface clicks (label text, description, and the empty
+      // hover area) to the radio input. The input stays the option's sole
+      // focusable control, so the row adds no second tab stop.
+      interactiveRef={radioRef}
+      isDisabled={isDisabled}
+      label={<span>{label}</span>}
+      description={
+        isRenderable(description) ? (
+          <span id={descriptionID}>{description}</span>
+        ) : undefined
+      }
+      endContent={endContent}
+      xstyle={
+        [
           // Hover reaches the radio visual through this ancestor marker rather
-          // than props, so hovering the row tints the control.
+          // than props, so hovering the row tints the control. The marker rides
+          // the painting row element (Item), the same element that carries the
+          // theme target, so a theme's hover styling stays in step with the tint.
           !isDisabled && indicatorScope,
+          // Restore the bare default look: zero Item's padding/radius and its
+          // interactive hover/press background. Applied after Item's own base
+          // styles so it wins within the base layer; a `radio-list-item` theme
+          // still overrides it from the higher `astryx-theme` layer.
+          rowStyles.root,
           xstyle,
-        ),
-        className,
-        style,
+        ] as StyleXStyles
+      }
+      {...mergeProps(
+        // One target for every row, carrying its size and runtime state so a
+        // theme can express "selected option at large" or restyle disabled
+        // rows without reaching for structural selectors. It lands on the
+        // element Item paints — the row surface — so a theme styling
+        // `radio-list-item`'s background/padding/borderRadius (and its
+        // `:hover`) actually takes effect from the `astryx-theme` layer, even
+        // though the component zeroes those by default. Converges with how
+        // ListItem lands `list-item` on the same element as `astryx-item`.
+        themeProps('radio-list-item', {
+          size,
+          selected: isChecked ? 'selected' : null,
+          disabled: isDisabled ? 'disabled' : null,
+        }),
+        {className, style},
       )}
-      {...rest}>
-      <Item
-        startContent={mediaContent}
-        label={
-          <label
-            htmlFor={id}
-            {...stylex.props(isDisabled && styles.labelDisabled)}>
-            {label}
-          </label>
-        }
-        description={
-          description != null ? (
-            <span id={descriptionID}>{description}</span>
-          ) : undefined
-        }
-        endContent={endContent}
-        xstyle={embeddedStyles.root}
-      />
-    </div>
+      {...rest}
+    />
   );
 }
 

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

@@ -219,16 +219,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.',
   },
 };