@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/DateRangeInput/DateRangeInput.tsx

@@ -16,7 +16,14 @@
  * - /packages/cli/assets/templates/blocks/components/DateRangeInput/ (showcase blocks)
  */
 
-import {useId, useCallback, useMemo, useOptimistic, useTransition} from 'react';
+import {
+  use,
+  useId,
+  useCallback,
+  useMemo,
+  useOptimistic,
+  useTransition,
+} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   plainDateFromISO,
@@ -65,7 +72,8 @@ import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
-import {useTranslator} from '../i18n';
+import {useTranslator, InternationalizationContext} from '../i18n';
+import type {Locale} from '../i18n/types';
 
 export type {DateRange} from '../Calendar';
 
@@ -98,7 +106,10 @@ const styles = stylex.create({
     color: colorVars['--color-text-primary'],
     backgroundColor: 'transparent',
     outline: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     textAlign: 'start',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -108,7 +119,7 @@ const styles = stylex.create({
     color: colorVars['--color-text-secondary'],
   },
   triggerDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   iconButton: {
     display: 'flex',
@@ -119,11 +130,14 @@ const styles = stylex.create({
     borderWidth: 0,
     borderStyle: 'none',
     backgroundColor: 'transparent',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     borderRadius: radiusVars['--radius-element'],
   },
   iconButtonDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   popoverLayout: {
     display: 'flex',
@@ -148,7 +162,7 @@ const styles = stylex.create({
     borderRadius: radiusVars['--radius-element'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -156,7 +170,10 @@ const styles = stylex.create({
     fontSize: typeScaleVars['--text-label-size'],
     lineHeight: typeScaleVars['--text-label-leading'],
     color: colorVars['--color-text-primary'],
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     textAlign: 'start',
   },
   presetButtonActive: {
@@ -165,7 +182,7 @@ const styles = stylex.create({
   },
   presetButtonDisabled: {
     color: colorVars['--color-text-disabled'],
-    cursor: 'not-allowed',
+    cursor: 'default',
     backgroundColor: 'transparent',
   },
 });
@@ -185,7 +202,7 @@ const sizeStyles = stylex.create({
   },
 });
 
-function formatRangeDisplay(range: DateRange | null): string {
+function formatRangeDisplay(range: DateRange | null, locale?: Locale): string {
   if (!range) {
     return '';
   }
@@ -195,7 +212,7 @@ function formatRangeDisplay(range: DateRange | null): string {
   const sameYear = start.year === end.year && start.year === currentYear;
 
   const fmt = sameYear ? DATE_FORMAT_SHORT : DATE_FORMAT_SHORT_WITH_YEAR;
-  return `${plainDateFormat(start, fmt)} – ${plainDateFormat(end, fmt)}`;
+  return `${plainDateFormat(start, fmt, locale)} – ${plainDateFormat(end, fmt, locale)}`;
 }
 
 function isRangeEqual(a: DateRange | null, b: DateRange | null): boolean {
@@ -475,6 +492,7 @@ export function DateRangeInput({
 }: DateRangeInputProps) {
   const t = useTranslator();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
+  const {locale} = use(InternationalizationContext);
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
   const size = useSize(sizeProp, 'md');
@@ -521,8 +539,8 @@ export function DateRangeInput({
       .join(' ') || undefined;
 
   const displayValue = useMemo(
-    () => formatRangeDisplay(optimisticValue),
-    [optimisticValue],
+    () => formatRangeDisplay(optimisticValue, locale),
+    [optimisticValue, locale],
   );
 
   const popover = usePopover({

package/src/DateTimeInput/DateTimeInput.tsx

@@ -17,6 +17,7 @@
  */
 
 import {
+  use,
   useId,
   useState,
   useCallback,
@@ -88,7 +89,7 @@ import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
-import {useTranslator} from '../i18n';
+import {useTranslator, InternationalizationContext} from '../i18n';
 
 export type ISODateTimeString = string & {
   readonly __brand: 'ISODateTimeString';
@@ -120,11 +121,14 @@ const styles = stylex.create({
     borderWidth: 0,
     borderStyle: 'none',
     backgroundColor: 'transparent',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     borderRadius: radiusVars['--radius-element'],
   },
   iconButtonDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   icon: {
     display: 'flex',
@@ -153,7 +157,7 @@ const styles = stylex.create({
     },
   },
   inputDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   inputInvalid: {
     color: colorVars['--color-text-secondary'],
@@ -450,6 +454,7 @@ export function DateTimeInput({
 }: DateTimeInputProps) {
   const t = useTranslator();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
+  const {locale} = use(InternationalizationContext);
   // Speaks arrow-key stepping results through the persistent live regions:
   // stepping programmatically rewrites a plain textbox's value, which screen
   // readers do not announce on their own (WCAG 4.1.2).
@@ -560,13 +565,17 @@ export function DateTimeInput({
     datePendingInput !== null
       ? datePendingInput
       : valueParts.date && /^\d{4}-\d{2}-\d{2}$/.test(valueParts.date)
-        ? plainDateFormat(plainDateFromISO(valueParts.date), DATE_FORMAT_LONG)
+        ? plainDateFormat(
+            plainDateFromISO(valueParts.date),
+            DATE_FORMAT_LONG,
+            locale,
+          )
         : '';
 
   const isDateInputValid =
     datePendingInput === null || !datePendingInput.trim()
       ? true
-      : parseDateInput(datePendingInput) !== null;
+      : parseDateInput(datePendingInput, locale) !== null;
 
   // --- Time input state ---
   const [timePendingInput, setTimePendingInput] = useState<string | null>(null);
@@ -694,7 +703,7 @@ export function DateTimeInput({
       const text = e.target.value;
       setDatePendingInput(text);
 
-      const parsed = parseDateInput(text);
+      const parsed = parseDateInput(text, locale);
       if (
         parsed &&
         plainDateToISO(parsed) !== valueParts.date &&
@@ -706,7 +715,13 @@ export function DateTimeInput({
         calendarRef.current?.navigateTo(parsedISO);
       }
     },
-    [valueParts.date, isDateDisabled, handleDateChange, isEffectivelyDisabled],
+    [
+      valueParts.date,
+      isDateDisabled,
+      handleDateChange,
+      isEffectivelyDisabled,
+      locale,
+    ],
   );
 
   const commitDatePendingInput = useCallback(() => {
@@ -722,7 +737,7 @@ export function DateTimeInput({
       return;
     }
 
-    const parsed = parseDateInput(datePendingInput);
+    const parsed = parseDateInput(datePendingInput, locale);
     if (parsed && !isDateDisabled(parsed)) {
       const parsedISO = plainDateToISO(parsed);
       if (parsedISO !== valueParts.date) {
@@ -737,6 +752,7 @@ export function DateTimeInput({
     fireChange,
     isDateDisabled,
     handleDateChange,
+    locale,
   ]);
 
   const handleDateBlur = useCallback(() => {

package/src/Dialog/Dialog.test.tsx

@@ -461,4 +461,28 @@ describe('Dialog', () => {
       before.remove();
     });
   });
+
+  describe('container padding isolation', () => {
+    it('resets container padding custom properties on the root dialog element', () => {
+      render(
+        <Dialog isOpen={true} onOpenChange={() => {}}>
+          Content
+        </Dialog>,
+      );
+      const dialog = screen.getByRole('dialog');
+      const computed = window.getComputedStyle(dialog);
+      expect(
+        computed.getPropertyValue('--container-padding-inline-start'),
+      ).toBe('0px');
+      expect(computed.getPropertyValue('--container-padding-inline-end')).toBe(
+        '0px',
+      );
+      expect(computed.getPropertyValue('--container-padding-block-start')).toBe(
+        '0px',
+      );
+      expect(computed.getPropertyValue('--container-padding-block-end')).toBe(
+        '0px',
+      );
+    });
+  });
 });

package/src/Dialog/Dialog.tsx

@@ -44,6 +44,7 @@ import {
   containerPaddingBlockStartVarStyles,
   containerPaddingBlockEndVarStyles,
   spacingStepToToken,
+  overlayPaddingReset,
 } from '../Layout/padding.stylex';
 import type {SpacingStep} from '../utils/types';
 import {mergeProps, mergeRefs} from '../utils';
@@ -610,6 +611,7 @@ export function Dialog({
           themeProps('dialog', {variant}),
           stylex.props(
             styles.inlineWrapper,
+            overlayPaddingReset.reset,
             !isFullscreen && dynamicStyles.sizing(width, maxHeight),
             isFullscreen && styles.fullscreen,
             xstyle,
@@ -636,6 +638,7 @@ export function Dialog({
         themeProps('dialog', {variant}),
         focusOutlineProps.focusVisible(
           styles.dialog,
+          overlayPaddingReset.reset,
           isOpen && styles.open,
           styles.backdrop,
           !isFullscreen && dynamicStyles.sizing(width, maxHeight),

package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -46,12 +46,15 @@ const styles = stylex.create({
       default: 'transparent',
       ':focus': colorVars['--color-overlay-hover'],
     },
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     outline: 'none',
   },
   disabled: {
     opacity: 0.5,
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   // Rendered in Item's `marker` slot as a raw flex child, so `order` moves it
   // relative to the label within the row. On touch it moves to the inline-end.

package/src/DropdownMenu/DropdownMenuItem.tsx

@@ -54,13 +54,16 @@ const menuItemStyles = stylex.create({
       ':focus': colorVars['--color-overlay-hover'],
     },
     border: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     textAlign: 'start',
     outline: 'none',
   },
   disabled: {
     opacity: 0.5,
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   destructive: {
     // Only recolor the text/icon; the hover / focus background stays the shared

package/src/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -42,12 +42,15 @@ const styles = stylex.create({
       default: 'transparent',
       ':focus': colorVars['--color-overlay-hover'],
     },
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     outline: 'none',
   },
   disabled: {
     opacity: 0.5,
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   // Rendered in Item's `marker` slot as a raw flex child. On touch it moves to
   // the inline-end of the row via `order`.

package/src/DropdownMenu/DropdownMenuSubMenu.tsx

@@ -96,7 +96,10 @@ const triggerStyles = stylex.create({
       ':focus': colorVars['--color-overlay-hover'],
     },
     border: 'none',
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     textAlign: 'start',
     outline: 'none',
   },
@@ -107,7 +110,7 @@ const triggerStyles = stylex.create({
   },
   disabled: {
     opacity: 0.5,
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   caret: {
     display: 'flex',

package/src/Field/Field.doc.mjs

@@ -39,6 +39,8 @@ export const docs = {
     ],
     vars: [
       {name: '--_field-radius', description: 'Border radius of input fields', default: 'var(--radius-element)', private: true},
+      {name: '--_input-clear-hit-inset', description: 'Outset of the clear (\u2715) button\u2019s invisible hit area, applied to a ::after overlay. 0 on a fine pointer; negative on a coarse one, which grows the 20px button to the 24px touch target without changing what is drawn.', default: '0px', private: true},
+      {name: '--_input-clear-hit-content', description: 'Whether the clear (\u2715) button\u2019s invisible hit overlay exists. `none` on a fine pointer, so no ::after is generated and hover still reaches the glyph; `""` on a coarse one, where the overlay provides the 24px touch target.', default: 'none', private: true},
     ],
     derived: [
       {property: 'borderRadius', vars: ['--_field-radius']},

package/src/Field/FieldLabel.tsx

@@ -45,11 +45,14 @@ 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',
+    },
   },
   labelDisabled: {
     color: colorVars['--color-text-disabled'],
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   srOnly: {
     borderStyle: 'none',
@@ -82,7 +85,10 @@ const styles = stylex.create({
   // When the description forwards clicks to a click-activatable control
   // (checkbox/switch), it reads as part of the same hit target as the label.
   descriptionClickable: {
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
   },
 });
 

package/src/Field/InputClearButton.test.tsx

@@ -2,7 +2,8 @@
 
 /**
  * @file InputClearButton.test.tsx
- * @input Uses vitest, @testing-library/react, InputClearButton, Icon, theme
+ * @input Uses node:fs, node:path, vitest, @testing-library/react, InputClearButton, Icon,
+ *   theme
  * @output Unit tests for the shared clear-button primitive
  * @position Testing; validates InputClearButton.tsx — the single home for the
  *   clearable input family's clear (✕) affordance and its theme target.
@@ -10,6 +11,8 @@
  * SYNC: When InputClearButton.tsx changes, update tests to match new behavior.
  */
 
+import {readFileSync} from 'node:fs';
+import path from 'node:path';
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
 import {InputClearButton} from './InputClearButton';
@@ -22,6 +25,39 @@ function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   return [prose, component].filter(Boolean).join('\n\n');
 }
 
+interface InjectedRule {
+  selector: string;
+  text: string;
+  media: string | null;
+}
+
+/**
+ * Every style rule StyleX has injected at runtime (`runtimeInjection` in the
+ * root vitest config), flattened out of any at-rule wrapper and tagged with
+ * that wrapper's condition — so a `@media (pointer: coarse)` rule stays
+ * distinguishable from the unconditional one.
+ */
+function injectedRules(): InjectedRule[] {
+  const walk = (rules: CSSRuleList, condition: string | null) =>
+    [...rules].flatMap((rule): InjectedRule[] => {
+      const {selectorText} = rule as CSSStyleRule;
+      if (typeof selectorText === 'string') {
+        return [{selector: selectorText, text: rule.cssText, media: condition}];
+      }
+      // A grouping rule (@media, @keyframes, ...): descend, carrying the
+      // innermost condition down. jsdom hangs an empty `cssRules` off plain
+      // style rules too, which is why the leaf check comes first.
+      const nested = (rule as CSSGroupingRule).cssRules;
+      if (nested == null) {
+        return [];
+      }
+      const own = (rule as CSSMediaRule).media?.mediaText;
+      return walk(nested, own != null && own !== '' ? own : condition);
+    });
+
+  return [...document.styleSheets].flatMap(sheet => walk(sheet.cssRules, null));
+}
+
 const getGlyph = (): HTMLElement => {
   const button = screen.getByRole('button', {name: 'Clear'});
   const icon = button.querySelector('.astryx-icon');
@@ -111,7 +147,7 @@ describe('InputClearButton', () => {
     const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-input-clear-icon {');
     expect(css).toContain('width: 12px');
-    expect(css).toContain('.astryx-input-clear-icon:hover {');
+    expect(css).toContain('.astryx-input-clear-icon:hover');
     expect(css).toContain('color: var(--color-icon-primary)');
   });
 
@@ -121,6 +157,77 @@ describe('InputClearButton', () => {
     expect(button).toHaveClass('astryx-input-clear-button');
   });
 
+  it('grows the hit area to 24px on a coarse pointer only (WCAG 2.5.8 AA)', () => {
+    // The visual glyph stays 20px; an ::after overlay expands only the
+    // tappable region, and only under a coarse pointer. Asserted against the
+    // CSS StyleX injects at runtime, because jsdom resolves neither media
+    // queries nor pseudo-element boxes.
+    render(<InputClearButton label="Clear" onClick={() => {}} />);
+    const button = screen.getByRole('button', {name: 'Clear'});
+    const classes = new Set(button.className.split(' ').filter(Boolean));
+
+    const css = injectedRules();
+    const rulesForButton = css.filter(({selector}) =>
+      [...classes].some(c => selector.includes(`.${c}`)),
+    );
+    // Guards every assertion below against silently passing if StyleX's
+    // runtime injection or the class plumbing ever changes shape.
+    expect(rulesForButton.length).toBeGreaterThan(0);
+
+    const decl = (pattern: RegExp, inMedia?: string) =>
+      rulesForButton.some(
+        ({text, media}) =>
+          pattern.test(text) &&
+          (inMedia == null ? media == null : (media ?? '').includes(inMedia)),
+      );
+
+    // Fine pointer: hit area == the 20px visual glyph, no expansion.
+    expect(decl(/--_input-clear-hit-inset\s*:\s*0px/)).toBe(true);
+    // Coarse pointer: 20px + 2px on each side = 24x24, the AA floor.
+    expect(decl(/--_input-clear-hit-inset\s*:\s*-2px/, 'pointer: coarse')).toBe(
+      true,
+    );
+    // ...and nothing wider than that, which would reach into the adornment
+    // gap and the input's caret area. Scoped to the coarse block, because
+    // that is the only place a wider value can appear.
+    expect(
+      decl(
+        /--_input-clear-hit-inset\s*:\s*-(?:[3-9]|\d{2,})px/,
+        'pointer: coarse',
+      ),
+    ).toBe(false);
+    // The overlay exists only on touch. On a fine pointer a generated
+    // ::after would cover the button and take hover away from the glyph
+    // target, so `content` is gated the same way the inset is.
+    expect(decl(/--_input-clear-hit-content\s*:\s*none/)).toBe(true);
+    expect(decl(/--_input-clear-hit-content\s*:\s*""/, 'pointer: coarse')).toBe(
+      true,
+    );
+    // The overlay itself is what carries the expansion, and what is gated.
+    expect(
+      decl(/::after\s*\{[^}]*inset\s*:\s*var\(--_input-clear-hit-inset\)/),
+    ).toBe(true);
+    expect(
+      decl(/::after\s*\{[^}]*content\s*:\s*var\(--_input-clear-hit-content\)/),
+    ).toBe(true);
+  });
+
+  it('declares its own containing block for the hit overlay', () => {
+    // The ::after overlay must resolve against this button. Button happens to
+    // set `position: relative` on itself, so at runtime the overlay is
+    // correctly placed either way — and StyleX compiles both declarations to
+    // the same atomic class, so the rendered CSS cannot tell the two apart.
+    // Assert on the source instead, so a future edit can't quietly leave the
+    // overlay depending on another component's internal.
+    const source = readFileSync(
+      path.resolve(__dirname, './InputClearButton.tsx'),
+      'utf-8',
+    );
+    const buttonStyle = source.match(/button:\s*\{[\s\S]*?\n {2}\},/)?.[0];
+    expect(buttonStyle).toBeDefined();
+    expect(buttonStyle).toMatch(/position:\s*'relative'/);
+  });
+
   it('exposes input-clear-button so a theme controls the button size and hover', () => {
     const theme = defineTheme({
       name: 'input-clear-button-test',
@@ -136,7 +243,7 @@ describe('InputClearButton', () => {
     const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-input-clear-button {');
     expect(css).toContain('height: 28px');
-    expect(css).toContain('.astryx-input-clear-button:hover {');
+    expect(css).toContain('.astryx-input-clear-button:hover');
     expect(css).toContain('background-image: none');
   });
 });

package/src/Field/InputClearButton.tsx

@@ -25,6 +25,44 @@ const styles = stylex.create({
   button: {
     height: '20px',
     flexShrink: 0,
+    // Containing block for the ::after hit overlay below. Button sets its own
+    // `position: relative`, so the overlay would resolve correctly without
+    // this — but that is another component's internal, and if it ever changes
+    // the overlay silently reattaches to some ancestor and the hit area lands
+    // in the wrong place. Declaring it here keeps the containing block
+    // colocated with the thing that depends on it. No-op at runtime.
+    position: 'relative',
+    // Expand the tap target to 24px ONLY on touch (WCAG 2.5.8 AA is a touch
+    // requirement, and its floor is 24x24). On a fine pointer the 20px glyph
+    // is precise enough, and an unconditional overlay could overlap
+    // neighboring controls in dense layouts. The inset is 0 by default (hit
+    // area == visual glyph) and grows to -2px (=> 24x24) under a coarse
+    // pointer — no further, because at -4px the overlay reaches into the 8px
+    // adornment gap and, on the inline-start side, over the input's own caret
+    // area. Driven through a custom property because StyleX only allows plain
+    // values inside a pseudo-element; the conditional lives on this top-level
+    // property instead. Private (--_) because it is an internal implementation
+    // detail, not a themeable target.
+    '--_input-clear-hit-inset': {
+      default: '0px',
+      '@media (pointer: coarse)': '-2px',
+    },
+    // The overlay itself is gated too, not just its size. An ::after that is
+    // generated on a fine pointer sits exactly over the button at inset 0,
+    // where it adds no hit area but is the topmost hit-test box — so hover
+    // stops reaching the descendants and `.astryx-input-clear-icon:hover`, a
+    // public theme target, no longer matches. `content: none` means the
+    // pseudo-element is not generated at all, so on a fine pointer the
+    // overlay does not exist.
+    '--_input-clear-hit-content': {
+      default: 'none',
+      '@media (pointer: coarse)': '""',
+    },
+    '::after': {
+      content: 'var(--_input-clear-hit-content)',
+      position: 'absolute',
+      inset: 'var(--_input-clear-hit-inset)',
+    },
   },
 });
 

package/src/Field/inputStyles.stylex.ts

@@ -56,15 +56,16 @@ export const inputWrapperStyles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     boxShadow: {
       default: 'none',
-      ':hover:not(:focus-within)': {
-        '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${colorVars['--color-border-emphasized']} 30%, transparent)`,
-      },
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${colorVars['--color-border-emphasized']} 30%, transparent)`,
+        },
       ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
     },
     outline: 'none',
   },
   disabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
     opacity: 0.5,
     borderColor: colorVars['--color-border-emphasized'],
     // Suppress the base hover ring — a disabled control must not react to hover.
@@ -96,25 +97,28 @@ export const inputStatusHoverShadowStyles = stylex.create({
   warning: {
     boxShadow: {
       default: 'none',
-      ':hover:not(:focus-within)': {
-        '@media (hover: hover)': shadowVars['--shadow-inset-warning'],
-      },
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': shadowVars['--shadow-inset-warning'],
+        },
     },
   },
   error: {
     boxShadow: {
       default: 'none',
-      ':hover:not(:focus-within)': {
-        '@media (hover: hover)': shadowVars['--shadow-inset-error'],
-      },
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': shadowVars['--shadow-inset-error'],
+        },
     },
   },
   success: {
     boxShadow: {
       default: 'none',
-      ':hover:not(:focus-within)': {
-        '@media (hover: hover)': shadowVars['--shadow-inset-success'],
-      },
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': shadowVars['--shadow-inset-success'],
+        },
     },
   },
 });