@astryxdesign/core 0.6.1 → 0.6.2-canary.0faf070

package/src/hooks/useScrollableArea.ts

@@ -4,8 +4,8 @@
 
 /**
  * @file useScrollableArea.ts
- * @input Logical scroll intent, keyboard ownership, caller-owned viewport/content props
- * @output Safe prop getters and stable per-axis effective scroll state
+ * @input Logical scroll intent, focus-time keyboard delegation, caller-owned viewport/content props
+ * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
  * SYNC: When modified, update:
@@ -26,6 +26,7 @@ import {
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
+import {attachScrollKeyboardDelegation} from './scrollKeyboardDelegation';
 import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
 import {mergeProps} from '../utils/mergeProps';
 import {mergeRefs} from '../utils/mergeRefs';
@@ -48,7 +49,12 @@ export type ScrollStickyContainment = 'whenScrollable' | 'always';
 
 export type ScrollKeyboardAccess =
   | {owner: 'content'}
-  | {owner: 'viewport'; label: string; role?: 'group' | 'region'};
+  | {owner: 'viewport'; label: string; role?: 'group' | 'region'}
+  | {
+      owner: 'contentOrViewport';
+      label: string;
+      role?: 'group' | 'region';
+    };
 
 export interface ScrollAxisState {
   isScrollable: boolean;
@@ -285,6 +291,8 @@ export function useScrollableArea({
     content.addEventListener('transitionend', scheduleMeasure);
     content.addEventListener('animationend', scheduleMeasure);
 
+    // Geometry invalidation is independent of keyboard eligibility. The latter
+    // is inspected only on native keyboard entry, never by these observers.
     const mutationObserver =
       typeof MutationObserver === 'undefined'
         ? null
@@ -346,6 +354,20 @@ export function useScrollableArea({
     [axis, measured],
   );
 
+  const hasEffectiveAxis =
+    state.inline.isScrollable || state.block.isScrollable;
+  useIsomorphicLayoutEffect(() => {
+    if (
+      keyboardAccess.owner !== 'contentOrViewport' ||
+      !hasEffectiveAxis ||
+      viewport == null ||
+      content == null
+    ) {
+      return;
+    }
+    return attachScrollKeyboardDelegation(viewport, content);
+  }, [content, hasEffectiveAxis, keyboardAccess.owner, viewport]);
+
   const getViewportProps = useCallback(
     <E extends HTMLElement>(
       props: ScrollableElementProps<E> = {},
@@ -385,8 +407,9 @@ export function useScrollableArea({
           ),
         ),
       ) as ScrollableElementProps<E>;
+      const viewportIsKeyboardOwner = keyboardAccess.owner !== 'content';
       const keepsProgrammaticFocus =
-        !hasEffectiveAxis &&
+        (!viewportIsKeyboardOwner || !hasEffectiveAxis) &&
         viewport != null &&
         typeof document !== 'undefined' &&
         document.activeElement === viewport;
@@ -409,15 +432,16 @@ export function useScrollableArea({
       }
 
       const keyboardProps =
-        keyboardAccess.owner === 'viewport'
+        keyboardAccess.owner !== 'content'
           ? {
               role: keyboardAccess.role ?? 'group',
               'aria-label': keyboardAccess.label,
-              tabIndex: hasEffectiveAxis
-                ? 0
-                : keepsProgrammaticFocus
-                  ? -1
-                  : undefined,
+              tabIndex:
+                viewportIsKeyboardOwner && hasEffectiveAxis
+                  ? 0
+                  : keepsProgrammaticFocus
+                    ? -1
+                    : undefined,
             }
           : {};
 

package/src/theme/derivedVarRegistry.test.ts

@@ -310,15 +310,17 @@ const VARS_WITHOUT_DERIVED_MAPPING = new Set([
   // It is one component of one shadow in the list, so no standard property
   // maps onto it either — a theme sets it beside the fill it has to contrast.
   '--selectable-card-ring-color',
-  // The spinner's ring is drawn as an SVG circle, so none of its four vars is
+  // The spinner's ring is drawn as an SVG circle, so none of its five vars is
   // a CSS property of the element carrying the theme target: `width` and
-  // `borderWidth` would name a box the ring is not, and a `color` mapping
-  // would take the label's text color with it. They are public vars a theme
-  // sets directly under a size- or shade-variant key.
+  // `borderWidth` would name a box the ring is not, a `color` mapping would
+  // take the label's text color with it, and the arc fraction is a pure
+  // dash-length multiplier with no standard property to attach to. They are
+  // public vars a theme sets directly under a size- or shade-variant key.
   '--spinner-diameter',
   '--spinner-stroke-width',
   '--spinner-color',
   '--spinner-track-color',
+  '--spinner-arc-fraction',
 ]);
 
 // ---------------------------------------------------------------------------

package/src/utils/interactionOverlay.stylex.ts

@@ -10,6 +10,11 @@
  * @output Exports reusable background-color and background-image state styles
  * @position Internal styling utility for interactive core surfaces
  *
+ * Every surface that paints a press composes one of these (or carries its own
+ * `:active` rule), so a change to how the system answers a press is made here
+ * once. `pressedBackgroundColor` is the press without the hover, for controls
+ * whose hover is a colour or nothing.
+ *
  * Keep the enabled guard outside the individual states. StyleX assigns an
  * extra priority bucket (and generated selector specificity) to media-nested
  * rules. Repeating `:active` inside the hover-capable branch gives hover and
@@ -71,4 +76,19 @@ export const interactionOverlayStyles = stylex.create({
       },
     },
   },
+  /**
+   * The pressed arm alone, for a control whose hover answer is its own — a
+   * text link changes colour, a disclosure row has none — so a press paints
+   * the system's pressed overlay without adding a hover surface the control
+   * never had. Same enabled guard as the paired states above.
+   */
+  pressedBackgroundColor: {
+    backgroundColor: {
+      default: null,
+      [ENABLED]: {
+        default: null,
+        ':active': colorVars['--color-overlay-pressed'],
+      },
+    },
+  },
 });