@astryxdesign/core 0.2.0 → 0.3.0

package/src/ProgressBar/ProgressBar.tsx

@@ -11,12 +11,13 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/ProgressBar/ProgressBar.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/ProgressBar/ProgressBar.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/ProgressBar/ProgressBarMarkTooltip.tsx (the lazy Tooltip wrapper for labeled marks)
  * - /packages/core/src/ProgressBar/index.ts (exports if types change)
  * - /apps/storybook/stories/ProgressBar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/ProgressBar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ProgressBar/ (showcase blocks)
  */
 
-import {useId} from 'react';
+import {lazy, Suspense, useId} from 'react';
 import * as stylex from '@stylexjs/stylex';
 
 import {
@@ -32,27 +33,15 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
+import type {ProgressBarVariantMap} from './index';
 
-/**
- * Extensible variant map for ProgressBar.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/ProgressBar' {
- *   interface ProgressBarVariantMap {
- *     'brand': true;
- *   }
- * }
- * ```
- */
-export interface ProgressBarVariantMap {
-  accent: true;
-  success: true;
-  warning: true;
-  neutral: true;
-  error: true;
-}
+// Every mark is wrapped in a Tooltip (marks always carry a label), so load it
+// lazily: a ProgressBar with no marks never bundles the Tooltip chunk. While it
+// loads, the Suspense fallback shows the bare mark, so nothing disappears; the
+// tooltip simply attaches once the chunk is ready.
+const LazyProgressBarMarkTooltip = lazy(
+  async () => import('./ProgressBarMarkTooltip'),
+);
 
 /**
  * Progress bar variant type — maps to semantic color tokens.
@@ -60,6 +49,29 @@ export interface ProgressBarVariantMap {
  */
 export type ProgressBarVariant = keyof ProgressBarVariantMap;
 
+/**
+ * A fixed target mark drawn on the progress track.
+ *
+ * Positioned by `value` in the same `0..max` scale as the bar's `value` prop —
+ * mirroring the object shape of Slider's `marks` so the two APIs stay
+ * consistent.
+ */
+export interface ProgressBarMark {
+  /**
+   * Position of the mark in the same `0..max` scale as `value`. Values
+   * outside the range are clamped to the track edges.
+   */
+  value: number;
+  /**
+   * Names the mark. A mark stands for something meaningful on the track — a
+   * goal, a threshold, a quarter target — so a label is required: it is the
+   * mark's accessible name and the text revealed in a `Tooltip` on hover and
+   * keyboard focus. Can be the value itself (e.g. `'70%'`) or something richer
+   * (e.g. `'Q1 target: 50%'`).
+   */
+  label: string;
+}
+
 export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLDivElement>;
@@ -107,6 +119,14 @@ export interface ProgressBarProps extends BaseProps<HTMLDivElement> {
    * @default false
    */
   isIndeterminate?: boolean;
+  /**
+   * Target marks drawn on the track at fixed points in the same `0..max`
+   * scale as `value` — e.g. a goal line. Marks stay visible whether progress
+   * is below or past them. Each mark's required `label` names it for assistive
+   * tech and is revealed via a `Tooltip` on hover/focus. Ignored when
+   * `isIndeterminate` is true.
+   */
+  marks?: ReadonlyArray<ProgressBarMark>;
   /**
    * When true, the progress bar is visually disabled — the fill bar and
    * text use disabled colors. Use for canceled or inactive operations.
@@ -190,11 +210,27 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
     borderWidth: 0,
   },
+  // The `role="progressbar"` element. In determinate mode it does NOT clip its
+  // content (`overflow` stays visible) so a themed mark taller than the bar can
+  // overhang it; the determinate fill rounds its own corners via `border-radius`
+  // (see `fill`) and is always inside the track box, so dropping the clip does
+  // not change its appearance at any progress. Indeterminate mode re-adds the
+  // clip via `trackClipped` (see below) — its sliding fill travels outside the
+  // track and must be clipped, and marks are ignored while indeterminate, so
+  // there is nothing to overhang.
   track: {
+    position: 'relative',
     width: '100%',
     height: '8px',
     backgroundColor: colorVars['--color-background-muted'],
     borderRadius: radiusVars['--radius-full'],
+  },
+  // Indeterminate-only clip. The indeterminate fill slides from translateX
+  // -100% to 250%, so it deliberately overshoots the track on both sides and
+  // relies on the track clipping it to the visible window. Applied only when
+  // `isIndeterminate` (marks are suppressed then, so nothing needs to overhang)
+  // so it never re-clips a themed tall mark in determinate mode.
+  trackClipped: {
     overflow: 'hidden',
   },
   fill: {
@@ -219,6 +255,35 @@ const styles = stylex.create({
     animationTimingFunction: 'ease-in-out',
     animationIterationCount: 'infinite',
   },
+  // A mark is a vertical tick centered on the track, a child of the
+  // `role="progressbar"` element (unchanged DOM). The track no longer clips, so
+  // its height — 8px by default, directly overridable via the `progressbar-mark`
+  // theme target — may exceed the bar and overhang; the centering translate
+  // keeps any overhang symmetric. Positioned horizontally via `insetInlineStart`;
+  // the translate mirrors under RTL.
+  mark: {
+    position: 'absolute',
+    top: '50%',
+    width: 2,
+    height: 8,
+    // Defaults to text-primary. Directly overridable via the `progressbar-mark`
+    // theme target — a theme can set `backgroundColor`, `width`, and `height`
+    // (e.g. a taller "flag" tick that overhangs the bar, or per-variant
+    // contrast) with `defineTheme`; no dedicated CSS vars needed.
+    backgroundColor: colorVars['--color-text-primary'],
+    outline: {
+      default: 'none',
+      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
+    },
+    outlineOffset: {
+      default: '0',
+      ':focus-visible': '2px',
+    },
+    transform: {
+      default: 'translate(-50%, -50%)',
+      ':is([dir="rtl"] *)': 'translate(50%, -50%)',
+    },
+  },
 });
 
 const variantStyles = stylex.create({
@@ -256,7 +321,8 @@ function defaultFormatValueLabel(value: number, max: number): string {
  *
  * ProgressBar is intentionally minimal — compose additional labels, status
  * icons, and descriptions alongside the bar using layout components rather
- * than adding props to ProgressBar itself.
+ * than adding props to ProgressBar itself. The exception is on-track content
+ * like `marks`, which are positioned by value over the track.
  *
  * Styles use Astryx theme tokens via StyleX.
  * Wrap your app in <Theme> to apply a theme.
@@ -268,6 +334,21 @@ function defaultFormatValueLabel(value: number, max: number): string {
  * <ProgressBar value={3.2} max={5} label="Disk usage" hasValueLabel
  *   formatValueLabel={(v, m) => `${v} GB / ${m} GB`} />
  * <ProgressBar value={30} label="Canceled" isDisabled hasValueLabel />
+ * <ProgressBar value={45} label="Fundraiser" marks={[{value: 80, label: 'Goal'}]} />
+ * ```
+ *
+ * A mark's height, width, and color are directly themeable via the
+ * `progressbar-mark` target — e.g. a taller "goal flag" tick that overhangs the
+ * bar (centered, so the overhang is symmetric):
+ *
+ * @example
+ * ```
+ * defineTheme({
+ *   name: 'campaign',
+ *   components: {
+ *     'progressbar-mark': {base: {height: '16px', backgroundColor: 'red'}},
+ *   },
+ * });
  * ```
  */
 export function ProgressBar({
@@ -280,6 +361,7 @@ export function ProgressBar({
   variant = 'accent',
   isIndeterminate = false,
   isDisabled = false,
+  marks,
   xstyle,
   className,
   style,
@@ -302,6 +384,20 @@ export function ProgressBar({
 
   const fillVariant = isDisabled ? 'disabled' : variant;
 
+  // Marks make no sense without a determinate value, so they are only drawn
+  // in determinate mode. Non-finite mark values are dropped; the rest are
+  // clamped to the track edges, matching the bar's own `clampedValue`.
+  const resolvedMarks =
+    !isIndeterminate && marks
+      ? marks
+          .filter(mark => Number.isFinite(mark.value))
+          .map(mark => {
+            const clamped = Math.min(Math.max(0, mark.value), safeMax);
+            const pct = safeMax > 0 ? (clamped / safeMax) * 100 : 0;
+            return {value: mark.value, label: mark.label, pct};
+          })
+      : [];
+
   return (
     <div
       ref={ref}
@@ -339,7 +435,10 @@ export function ProgressBar({
         <VisuallyHidden id={labelId}>{label}</VisuallyHidden>
       )}
 
-      {/* Progress track */}
+      {/* Progress track — the `role="progressbar"` element, holding the fill
+          and marks as its children (unchanged DOM shape). It no longer clips
+          (`overflow` is visible), so a themed taller mark can overhang it;
+          the fill preserves its rounded shape via its own `border-radius`. */}
       <div
         role="progressbar"
         aria-valuenow={isIndeterminate ? undefined : clampedValue}
@@ -349,7 +448,7 @@ export function ProgressBar({
         aria-valuetext={isIndeterminate ? undefined : valueText}
         {...mergeProps(
           themeProps('progressbar-track'),
-          stylex.props(styles.track),
+          stylex.props(styles.track, isIndeterminate && styles.trackClipped),
         )}>
         {isIndeterminate ? (
           <div
@@ -370,6 +469,35 @@ export function ProgressBar({
             style={{width: `${percentage}%`}}
           />
         )}
+        {/* Target marks — children of the progressbar element (unchanged),
+            layered above the fill so they show whether progress is below or
+            past them. Each mark is labeled, so it is a focusable Tooltip
+            trigger: the label is visible on hover/focus and names the mark for
+            assistive tech via the Tooltip's aria-describedby, without adding a
+            labeled child to the progressbar's own a11y subtree. */}
+        {resolvedMarks.map(mark => {
+          // The tick element. It is both the Tooltip's anchor and the Suspense
+          // fallback shown while the lazy Tooltip chunk loads, so the tick is
+          // always visible and the label attaches once ready. The list `key`
+          // lives on the mapped <Suspense>, not here.
+          const markEl = (
+            <span
+              tabIndex={0}
+              {...mergeProps(
+                themeProps('progressbar-mark'),
+                stylex.props(styles.mark),
+              )}
+              style={{insetInlineStart: `${mark.pct}%`}}
+            />
+          );
+          return (
+            <Suspense key={`${mark.value}:${mark.label}`} fallback={markEl}>
+              <LazyProgressBarMarkTooltip content={mark.label}>
+                {markEl}
+              </LazyProgressBarMarkTooltip>
+            </Suspense>
+          );
+        })}
       </div>
     </div>
   );

package/src/ProgressBar/ProgressBarMarkTooltip.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ProgressBarMarkTooltip.tsx
+ * @input Uses React, Tooltip, the mark element to wrap, and its label
+ * @output Default-exports the lazily-loaded Tooltip wrapper for a labeled mark
+ * @position Split out of ProgressBar so the Tooltip only loads when a mark is
+ *   actually rendered — a ProgressBar with no marks never bundles the Tooltip
+ *   chunk.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/ProgressBar/ProgressBar.tsx (the lazy() + Suspense wrapper)
+ * - /packages/core/src/ProgressBar/ProgressBar.test.tsx
+ */
+
+import type {ReactElement} from 'react';
+import {Tooltip} from '../Tooltip/Tooltip';
+
+export interface ProgressBarMarkTooltipProps {
+  /** The mark's accessible name / visible tooltip text. */
+  content: string;
+  /** The bare mark element the tooltip anchors to (also the Suspense fallback). */
+  children: ReactElement;
+}
+
+/**
+ * Wraps a labeled mark in a `Tooltip` that reveals its label on hover and
+ * keyboard focus. Placement and focus behavior match the inline usage this
+ * split replaced (`placement="above"`, `focusTrigger="always"`), so the
+ * rendered result is identical — only the load timing changes.
+ */
+export default function ProgressBarMarkTooltip({
+  content,
+  children,
+}: ProgressBarMarkTooltipProps): ReactElement {
+  return (
+    <Tooltip content={content} placement="above" focusTrigger="always">
+      {children}
+    </Tooltip>
+  );
+}

package/src/ProgressBar/index.ts

@@ -6,9 +6,30 @@
  * @file ProgressBar component barrel export
  */
 
+/**
+ * Extensible variant map for ProgressBar.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/ProgressBar' {
+ *   interface ProgressBarVariantMap {
+ *     'brand': true;
+ *   }
+ * }
+ * ```
+ */
+export interface ProgressBarVariantMap {
+  accent: true;
+  success: true;
+  warning: true;
+  neutral: true;
+  error: true;
+}
+
 export {ProgressBar} from './ProgressBar';
 export type {
   ProgressBarProps,
+  ProgressBarMark,
   ProgressBarVariant,
-  ProgressBarVariantMap,
 } from './ProgressBar';

package/src/RadioList/RadioList.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'RadioList',
@@ -149,7 +149,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -171,7 +171,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Radio group component for single-value selection from list of options.',

package/src/RadioList/RadioList.test.tsx

@@ -14,6 +14,7 @@ import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {RadioList} from './RadioList';
 import {RadioListItem} from './RadioListItem';
+import {getForcedColorsRules} from '../__tests__/forcedColors';
 
 // Mock showPopover/hidePopover (not implemented in jsdom) so the tooltip layer
 // reflects its open state via a `popover-open` attribute the tests can assert.
@@ -580,7 +581,11 @@ describe('RadioList', () => {
     it('submits the selected value under htmlName', () => {
       const {container} = render(
         <form>
-          <RadioList label="Preference" htmlName="pref" value="b" onChange={() => {}}>
+          <RadioList
+            label="Preference"
+            htmlName="pref"
+            value="b"
+            onChange={() => {}}>
             <RadioListItem label="Option A" value="a" />
             <RadioListItem label="Option B" value="b" />
           </RadioList>
@@ -599,13 +604,14 @@ describe('RadioList', () => {
             value="a"
             onChange={() => {}}
             isDisabled
-            disabledMessage="Locked"
-          >
+            disabledMessage="Locked">
             <RadioListItem label="Option A" value="a" />
           </RadioList>
         </form>,
       );
-      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
     });
 
     it('keeps working as an isolated group when htmlName is omitted', () => {
@@ -642,3 +648,19 @@ describe('RadioList', () => {
     });
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so this asserts that the
+// compiled output includes the forced-colors rule; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles a forced-colors fill so the selected dot survives Windows High Contrast', () => {
+    render(
+      <RadioList label="Preference" value="a" onChange={() => {}}>
+        <RadioListItem label="Option A" value="a" />
+      </RadioList>,
+    );
+    // The painted inner dot would be stripped to Canvas (invisible), making
+    // checked and unchecked radios identical; CanvasText keeps it perceivable.
+    expect(getForcedColorsRules()).toContain('background-color: canvastext;');
+  });
+});

package/src/RadioList/RadioList.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
 import React, {

package/src/RadioList/RadioListItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'RadioListItem',

package/src/RadioList/RadioListItem.tsx

@@ -15,7 +15,7 @@
  * - /packages/core/src/RadioList/RadioList.test.tsx
  * - /packages/core/src/RadioList/index.ts
  * - /apps/storybook/stories/RadioList.stories.tsx
- * - /packages/cli/templates/blocks/components/RadioList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
 import React, {use, useId, type ReactNode} from 'react';
@@ -119,7 +119,14 @@ const styles = stylex.create({
   },
   innerDot: {
     borderRadius: '50%',
-    backgroundColor: colorVars['--color-on-accent'],
+    backgroundColor: {
+      default: colorVars['--color-on-accent'],
+      // Forced colors (Windows High Contrast) strips painted backgrounds,
+      // which would make the selected dot invisible — checked and unchecked
+      // radios would look identical. CanvasText keeps the dot perceivable on
+      // the Canvas circle fill (WCAG 1.4.11).
+      '@media (forced-colors: active)': 'CanvasText',
+    },
   },
   labelDisabled: {
     color: colorVars['--color-text-disabled'],

package/src/Resizable/Resizable.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docs = {
   name: 'Resizable',
   displayName: 'Resizable',
@@ -188,7 +188,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator.',
   usage: {

package/src/Resizable/ResizeHandle.test.tsx

@@ -150,7 +150,55 @@ describe('ResizeHandle', () => {
     const separator = getSeparator();
     act(() => separator.focus());
     fireEvent.keyDown(separator, {key: 'Enter'});
-    expect(separator).toHaveAttribute('aria-valuenow', '0');
+    // The panel's real size is 0, but aria-valuenow must never drop below
+    // aria-valuemin (WCAG 4.1.2) — it clamps to the minimum and the state
+    // is announced via aria-valuetext instead.
+    expect(separator).toHaveAttribute('aria-valuenow', '100');
+    expect(separator).toHaveAttribute('aria-valuetext', 'Collapsed');
+  });
+
+  it('keeps aria-valuenow >= aria-valuemin and announces "Collapsed" while collapsed', () => {
+    render(
+      <Harness
+        config={{
+          defaultSize: 200,
+          minSizePx: 100,
+          maxSizePx: 400,
+          collapsible: true,
+        }}
+      />,
+    );
+    const separator = getSeparator();
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'Enter'});
+
+    const valueNow = Number(separator.getAttribute('aria-valuenow'));
+    const valueMin = Number(separator.getAttribute('aria-valuemin'));
+    expect(valueNow).toBeGreaterThanOrEqual(valueMin);
+    expect(separator).toHaveAttribute('aria-valuetext', 'Collapsed');
+  });
+
+  it('removes aria-valuetext when the panel is expanded', () => {
+    render(
+      <Harness
+        config={{
+          defaultSize: 200,
+          minSizePx: 100,
+          maxSizePx: 400,
+          collapsible: true,
+        }}
+      />,
+    );
+    const separator = getSeparator();
+    expect(separator).not.toHaveAttribute('aria-valuetext');
+
+    act(() => separator.focus());
+    fireEvent.keyDown(separator, {key: 'Enter'}); // collapse
+    expect(separator).toHaveAttribute('aria-valuetext', 'Collapsed');
+
+    fireEvent.keyDown(separator, {key: 'Enter'}); // expand again
+    expect(separator).not.toHaveAttribute('aria-valuetext');
+    expect(separator).toHaveAttribute('aria-valuenow', '100');
   });
 
   // --- Disabled guard ---
@@ -290,8 +338,9 @@ describe('ResizeHandle', () => {
   it('centers the grab zone on the divider when the pill is centered (no bias)', () => {
     render(<Harness handleProps={{pillPlacement: 'center'}} />);
     const hitArea = getSeparator().firstElementChild as HTMLElement;
-    // No physical offset — a plain logical centering class, no biased transform.
-    expect(hitArea.className).toContain('hitAreaCenteredX');
+    // Centered via the shared rtlStyles.centerInline helper (direction-symmetric
+    // left+translateX), not a biased offset.
+    expect(hitArea.className).toContain('centerInline');
     expect(hitArea.className).not.toContain('hitAreaOffsetX');
   });
 

package/src/Resizable/ResizeHandle.tsx

@@ -17,6 +17,10 @@
  * Pill placement uses a single stylex dynamic style that accepts a direction
  * multiplier (-1 or 1). The pill element has its own themeProps
  * ('resize-handle-pill') so themes can target size/shape directly.
+ *
+ * While the panel is collapsed, aria-valuenow is clamped to aria-valuemin
+ * (a value below the minimum is invalid per WCAG 4.1.2) and a localized
+ * "Collapsed" aria-valuetext announces the real state.
  */
 
 import {useCallback, useEffect, useRef, useState} from 'react';
@@ -30,7 +34,7 @@ import {
   radiusVars,
   spacingVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import type {ResizableProps} from './useResizable';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -167,11 +171,8 @@ const styles = stylex.create({
     cursor: 'row-resize',
   },
   // Centered grab zone (pillPlacement 'center' / no bias): sit the hit area on
-  // the divider itself. Anchored logically so it centers in both directions.
-  hitAreaCenteredX: {
-    insetInlineStart: '50%',
-    transform: 'translateX(-50%)',
-  },
+  // the divider itself. Inline centering comes from rtlStyles.centerInline at
+  // the call site (correct in LTR and RTL); this block owns only the block axis.
   hitAreaCenteredY: {
     insetBlockStart: '50%',
     transform: 'translateY(-50%)',
@@ -188,8 +189,6 @@ const styles = stylex.create({
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     top: '50%',
-    insetInlineStart: '50%',
-    transform: 'translate(-50%, -50%)',
   },
   pillHorizontal: {
     width: 3,
@@ -519,12 +518,23 @@ export function ResizeHandle({
   }, []);
 
   // --- ARIA ---
-  const ariaValueNow = resizable ? resizable._size : undefined;
+  // When collapsed the panel's real size (0) sits below aria-valuemin, which
+  // is invalid per WCAG 4.1.2. Clamp aria-valuenow to the minimum and announce
+  // the true state via aria-valuetext instead; the valuetext is removed as
+  // soon as the panel expands so the numeric value reads again.
+  const isCollapsed = resizable?._isCollapsed ?? false;
+  const ariaValueNow = resizable
+    ? isCollapsed
+      ? Math.max(resizable._size, resizable._minSizePx)
+      : resizable._size
+    : undefined;
   const ariaValueMin = resizable ? resizable._minSizePx : undefined;
   const ariaValueMax =
     resizable && resizable._maxSizePx !== Infinity
       ? resizable._maxSizePx
       : undefined;
+  const ariaValueText =
+    resizable && isCollapsed ? t('@astryx.resizable.collapsed') : undefined;
 
   return (
     <div
@@ -534,6 +544,7 @@ export function ResizeHandle({
       aria-valuenow={ariaValueNow}
       aria-valuemin={ariaValueMin}
       aria-valuemax={ariaValueMax}
+      aria-valuetext={ariaValueText}
       aria-label={label}
       aria-disabled={isDisabled || undefined}
       tabIndex={isDisabled ? -1 : 0}
@@ -586,7 +597,7 @@ export function ResizeHandle({
           // construction so the two stay aligned in LTR and RTL alike.
           hitBiasDir == null
             ? isHorizontal
-              ? styles.hitAreaCenteredX
+              ? rtlStyles.centerInline('0px')
               : styles.hitAreaCenteredY
             : isHorizontal
               ? dynamicStyles.hitAreaOffsetX(hitBiasDir)
@@ -609,14 +620,15 @@ export function ResizeHandle({
             stylex.props(
               styles.pill,
               isHorizontal ? styles.pillHorizontal : styles.pillVertical,
-              effectiveSide !== 'center' &&
-                (isHorizontal
+              effectiveSide === 'center'
+                ? rtlStyles.centerInline('-50%')
+                : isHorizontal
                   ? dynamicStyles.pillOffsetX(
                       effectiveSide === 'start' ? -1 : 1,
                     )
                   : dynamicStyles.pillOffsetY(
                       effectiveSide === 'start' ? -1 : 1,
-                    )),
+                    ),
               isAlwaysVisible ? styles.pillVisible : styles.pillHidden,
               isInteracting && !isDragging && styles.pillHover,
               isDragging && styles.pillActive,