@astryxdesign/core 0.1.9 → 0.2.0-canary.0e01213

package/src/Resizable/ResizeHandle.tsx

@@ -56,14 +56,27 @@ function resolveEffectiveSide(
 }
 
 /**
- * Hit area bias percentage. When the pill is off-center, the grab zone
- * shifts ~2:1 toward the pill so users can reach the visible grip easily.
+ * Hit-area inline bias, expressed as a fraction of the pill's per-side offset.
+ *
+ * The visible pill is placed by `pillOffsetX`/`pillOffsetY`: anchored at the
+ * divider's inline-start edge and pushed one grip-width-plus-gap toward the
+ * panel side via a PHYSICAL translate (dir −1 = start, +1 = end). Because that
+ * offset is physical, the pill sits on the same physical side of the divider in
+ * both LTR and RTL. The grab zone must sit OVER that pill, so it has to use the
+ * exact same anchor + physical-offset construction as the pill (just wider) —
+ * anchoring the hit area at the divider centre (`insetInlineStart: 50%`) and
+ * biasing with a percentage translate mixes a logical anchor (which flips under
+ * RTL) with a physical translate (which doesn't), leaving the grab zone stranded
+ * to one side under RTL. Returning the pill's `dir` here lets the hit area reuse
+ * `pillOffsetX`/`pillOffsetY` so the two elements are positioned identically.
  */
-function hitAreaBias(effectiveSide: 'start' | 'end' | 'center'): string {
+function hitAreaBiasDir(
+  effectiveSide: 'start' | 'end' | 'center',
+): number | null {
   if (effectiveSide === 'center') {
-    return '50%';
+    return null;
   }
-  return effectiveSide === 'start' ? '66.67%' : '33.33%';
+  return effectiveSide === 'start' ? -1 : 1;
 }
 
 const styles = stylex.create({
@@ -102,8 +115,8 @@ const styles = stylex.create({
   },
   overlayVertical: {
     insetBlockEnd: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     height: 'var(--resize-handle-hit-area, 16px)',
   },
   horizontal: {
@@ -145,16 +158,24 @@ const styles = stylex.create({
     width: spacingVars['--spacing-4'],
     top: 0,
     bottom: 0,
-    left: '50%',
     cursor: 'col-resize',
   },
   hitAreaVertical: {
     height: spacingVars['--spacing-4'],
-    left: 0,
-    right: 0,
-    top: '50%',
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     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%)',
+  },
+  hitAreaCenteredY: {
+    insetBlockStart: '50%',
+    transform: 'translateY(-50%)',
+  },
 
   // Pill base — themes target .astryx-resize-handle-pill for size/shape.
   pill: {
@@ -167,7 +188,7 @@ const styles = stylex.create({
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
     top: '50%',
-    left: '50%',
+    insetInlineStart: '50%',
     transform: 'translate(-50%, -50%)',
   },
   pillHorizontal: {
@@ -193,14 +214,32 @@ const styles = stylex.create({
 // Dynamic styles — avoids inline style overrides.
 // Each axis gets its own function since StyleX requires static structure.
 const dynamicStyles = stylex.create({
-  hitAreaBiasX: (pct: string) => ({
-    transform: `translateX(-${pct})`,
+  // Hit-area inline offset — mirrors the pill's `pillOffsetX`/`pillOffsetY`
+  // construction so the grab zone sits centred on the visible pill in BOTH
+  // directions. Both anchor at the divider's inline-start edge
+  // (`insetInlineStart: 0`) and travel toward the panel side with the SAME
+  // physical translate `dir * (gripWidth + gap)`, so they share the pill's
+  // near edge. The hit area is wider, so it also shifts by half the width
+  // difference `(16px − 3px) / 2 = 6.5px` to align the two CENTRES. That
+  // centring shift is along the inline axis (a box grows from its inline-start
+  // edge toward inline-end), so it must flip physical sign under RTL — unlike
+  // the `dir * (...)` travel, which is physical and identical in both
+  // 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.
+  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%)`,
+    },
   }),
-  hitAreaBiasY: (pct: string) => ({
-    transform: `translateY(-${pct})`,
+  hitAreaOffsetY: (dir: number) => ({
+    insetBlockStart: 0,
+    transform: `translate(-50%, calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
   }),
   pillOffsetX: (dir: number) => ({
-    left: 0,
+    insetInlineStart: 0,
     transform: `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)`,
   }),
   // Vertical offset: no rotation — use explicit landscape dimensions.
@@ -333,6 +372,9 @@ export function ResizeHandle({
     isReversed,
     resizable?._isCollapsed ?? false,
   );
+  // Physical offset direction shared by the pill and the grab zone (null =
+  // centered / no bias). Keeps the two positioned identically in LTR and RTL.
+  const hitBiasDir = hitAreaBiasDir(effectiveSide);
 
   const getRTLMultiplier = useCallback((): number => {
     const el = handleRef.current;
@@ -538,9 +580,17 @@ export function ResizeHandle({
         {...stylex.props(
           styles.hitArea,
           isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical,
-          isHorizontal
-            ? dynamicStyles.hitAreaBiasX(hitAreaBias(effectiveSide))
-            : dynamicStyles.hitAreaBiasY(hitAreaBias(effectiveSide)),
+          // Bias the grab zone to sit over the visible pill. When the pill is
+          // centered (no bias) just center the hit area on the divider; when
+          // it's offset to a panel side, reuse the pill's physical-offset
+          // construction so the two stay aligned in LTR and RTL alike.
+          hitBiasDir == null
+            ? isHorizontal
+              ? styles.hitAreaCenteredX
+              : styles.hitAreaCenteredY
+            : isHorizontal
+              ? dynamicStyles.hitAreaOffsetX(hitBiasDir)
+              : dynamicStyles.hitAreaOffsetY(hitBiasDir),
           isDisabled && styles.disabled,
         )}
         onPointerDown={handlePointerDown}

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -14,6 +14,10 @@ import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {SegmentedControl} from './SegmentedControl';
 import {SegmentedControlItem} from './SegmentedControlItem';
+import {
+  getAllInjectedCss,
+  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.
@@ -780,3 +784,27 @@ describe('SegmentedControl container handler forwarding', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so these assert that the
+// compiled output includes the forced-colors rules; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles forced-colors overrides so the selected segment survives Windows High Contrast', () => {
+    render(
+      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+    const css = getForcedColorsRules();
+    // The painted surface fill and shadow are stripped; Highlight/
+    // HighlightText marks the selected segment.
+    expect(css).toContain('background-color: highlight;');
+    expect(css).toContain('color: highlighttext;');
+    // The segment is a <button>; without opting out of UA remapping it keeps
+    // the native ButtonFace surface and ignores the Highlight fill, leaving
+    // HighlightText text on a white surface. forced-color-adjust: none makes
+    // both render as authored.
+    expect(getAllInjectedCss()).toContain('forced-color-adjust: none;');
+  });
+});

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -103,9 +103,27 @@ const styles = stylex.create({
     },
   },
   selected: {
-    color: colorVars['--color-text-primary'],
+    // Forced colors (Windows High Contrast) strips the painted surface fill
+    // and box shadow, which would leave the selected segment with no state
+    // indication beyond font weight. Highlight/HighlightText is the platform
+    // convention for a selected item (WCAG 1.4.11).
+    //
+    // forced-color-adjust must be `none` here: the segment is a <button>, and
+    // the UA keeps native form-control colors (ButtonFace surface) for it under
+    // forced colors, ignoring the authored Highlight fill — the label kept its
+    // HighlightText color, giving white text on a white surface. Opting the
+    // selected segment out of UA remapping makes both the Highlight surface and
+    // the HighlightText label render as authored, restoring figure-ground.
+    forcedColorAdjust: 'none',
+    color: {
+      default: colorVars['--color-text-primary'],
+      '@media (forced-colors: active)': 'HighlightText',
+    },
     fontWeight: fontWeightVars['--font-weight-semibold'],
-    backgroundColor: colorVars['--color-background-surface'],
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'Highlight',
+    },
     boxShadow: shadowVars['--shadow-low'],
   },
   disabled: {
@@ -169,6 +187,7 @@ export function SegmentedControlItem({
   icon,
   isDisabled = false,
   onClick: onClickProp,
+  xstyle,
   ...rest
 }: SegmentedControlItemProps) {
   const ctx = useSegmentedControlContext();
@@ -228,6 +247,7 @@ export function SegmentedControlItem({
           isSelected && styles.selected,
           !isSelected && !isItemDisabled && styles.hover,
           isItemDisabled && styles.disabled,
+          xstyle,
         ),
       )}>
       {iconElement}

package/src/Selector/Selector.doc.mjs

@@ -23,6 +23,8 @@ export const docs = {
     targets: [
       {className: 'astryx-selector', visualProps: ['size', 'status']},
       {className: 'astryx-selector-option'},
+      {className: 'astryx-selector-clear-icon'},
+      {className: 'astryx-selector-indicator-icon', states: ['state']},
     ],
   },
   description: 'Dropdown selector for choosing from a list of options.',
@@ -128,12 +130,25 @@ export const docs = {
       type: "{type: 'error' | 'warning' | 'success', message?: string}",
       description: 'Validation status with an optional message.',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached'",
+      description:
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing.',
+      default: "'attached'",
+    },
     {
       name: 'renderOption',
       type: '(option: SelectorOptionData) => ReactNode',
       description:
         'Custom render function for each selectable option in the dropdown. Use this instead of JSX children; dividers and sections are rendered by the selector.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',