@astryxdesign/core 0.6.1 → 0.6.2-canary.176dfa6

package/src/Markdown/utils.ts

@@ -16,9 +16,15 @@ export {
 
 export type {
   InlineNode,
+  InlineNodeWithMath,
+  MathInlineNode,
   BlockNode,
+  BlockNodeWithMath,
+  MathBlockNode,
   ListItemNode,
   TableCellNode,
   TableAlignment,
+  ParseOptions,
+  MathParseOptions,
   IncrementalState,
 } from './parser';

package/src/PowerSearch/PowerSearchEditPopover.test.tsx

@@ -10,7 +10,14 @@ import {
   afterAll,
   afterEach,
 } from 'vitest';
-import {render, screen, fireEvent, act} from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import React, {useState} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
@@ -170,6 +177,148 @@ describe('PowerSearch', () => {
     expect(popoverText).toContain('equals');
   });
 
+  describe('value editor identity follows the field and operator', () => {
+    // Two fields with the same value type, so an unkeyed editor would be
+    // reused across the switch and keep the first field's menu contents.
+    const sameTypeConfig: PowerSearchConfig = {
+      name: 'test-same-type',
+      fields: [
+        {
+          key: 'creator',
+          label: 'Creator',
+          operators: [
+            {
+              key: 'is_any_of',
+              label: 'is any of',
+              value: {
+                type: 'enum_list',
+                values: [{value: 'creator-1', label: 'Creator Person'}],
+              },
+            },
+          ],
+        },
+        {
+          key: 'owner',
+          label: 'Owner',
+          operators: [
+            {
+              key: 'is_any_of',
+              label: 'is any of',
+              value: {
+                type: 'enum_list',
+                values: [{value: 'owner-1', label: 'Owner Person'}],
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const creatorOption = () =>
+      screen.queryByRole('option', {name: 'Creator Person', hidden: true});
+    const ownerOption = () =>
+      screen.queryByRole('option', {name: 'Owner Person', hidden: true});
+
+    it('replaces an open value menu when the field changes', async () => {
+      function Harness() {
+        const internalConfig = useInternalConfig(sameTypeConfig);
+        return (
+          <PowerSearchEditPopover
+            config={internalConfig}
+            filter={{
+              field: 'creator',
+              operator: 'is_any_of',
+              value: {type: 'enum_list', value: []},
+            }}
+            mode="edit"
+            onSave={() => {}}
+            onCancel={() => {}}
+          />
+        );
+      }
+
+      render(<Harness />);
+
+      // Open the Creator value menu and leave it open.
+      fireEvent.focus(screen.getByRole('combobox', {name: 'Values'}));
+      await waitFor(() => expect(creatorOption()).toBeInTheDocument());
+
+      // Switch the field underneath the open menu.
+      fireEvent.click(screen.getByRole('combobox', {name: 'Field'}));
+      fireEvent.click(
+        screen.getByRole('option', {name: 'Owner', hidden: true}),
+      );
+      act(() => flushRAF());
+
+      // The old field's options are gone, the new field's are shown.
+      expect(creatorOption()).not.toBeInTheDocument();
+      await waitFor(() => expect(ownerOption()).toBeInTheDocument());
+    });
+
+    it('replaces an open value menu on a nested sub-filter row', async () => {
+      const nestedConfig: PowerSearchConfig = {
+        name: 'test-nested-same-type',
+        fields: [
+          {
+            key: 'group',
+            label: 'Group',
+            operators: [
+              {key: 'all_of', label: 'all of', value: {type: 'nested'}},
+            ],
+          },
+          ...sameTypeConfig.fields,
+        ],
+      };
+
+      function Harness() {
+        const internalConfig = useInternalConfig(nestedConfig);
+        return (
+          <PowerSearchEditPopover
+            config={internalConfig}
+            filter={{
+              field: 'group',
+              operator: 'all_of',
+              value: {
+                type: 'nested',
+                value: [
+                  {
+                    field: 'creator',
+                    operator: 'is_any_of',
+                    value: {type: 'enum_list', value: []},
+                  },
+                ],
+              },
+            }}
+            mode="edit"
+            onSave={() => {}}
+            onCancel={() => {}}
+          />
+        );
+      }
+
+      render(<Harness />);
+
+      fireEvent.focus(screen.getByRole('combobox', {name: 'Values'}));
+      await waitFor(() => expect(creatorOption()).toBeInTheDocument());
+
+      // The nested row's own field selector is the one currently on
+      // "Creator"; the root selector stays on "Group".
+      const rowField = screen
+        .getAllByRole('combobox', {name: 'Field'})
+        .find(el => el.textContent === 'Creator');
+      expect(rowField).toBeDefined();
+      fireEvent.click(rowField!);
+      const rowListbox = document.getElementById(
+        rowField!.getAttribute('aria-controls')!,
+      )!;
+      fireEvent.click(
+        within(rowListbox).getByRole('option', {name: 'Owner', hidden: true}),
+      );
+
+      expect(creatorOption()).not.toBeInTheDocument();
+    });
+  });
+
   it('edit popover shows correct filter after removing a preceding filter', () => {
     const filters: PowerSearchFilter[] = [
       {field: 'status', operator: 'is', value: {type: 'string', value: 'open'}},

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -22,7 +22,10 @@ import {TreeList, type TreeListItemData} from '../TreeList';
 import {useTranslator} from '../i18n';
 import {isImeKeyEvent} from '../utils/ime';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
-import {PowerSearchValueEditor} from './PowerSearchValueEditor';
+import {
+  PowerSearchValueEditor,
+  type PowerSearchValueEditorProps,
+} from './PowerSearchValueEditor';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import type {InternalConfig} from './useInternalConfig';
 import type {
@@ -356,6 +359,7 @@ function NestedSubFilterRow({
       {operatorValue && !isEmptyType && !isNestedType && (
         <div {...stylex.props(styles.nestedRowValueEditor)}>
           <PowerSearchValueEditor
+            key={valueEditorKey(subFilter)}
             operatorValue={operatorValue}
             filterValue={subFilter.value}
             onChange={handleValueChange}
@@ -606,6 +610,42 @@ function NestedEditor({
   return <TreeList items={items} density="balanced" />;
 }
 
+// =============================================================================
+// Value editor cell
+// =============================================================================
+
+// A field switch must replace the editor, not update it in place: a reused
+// editor keeps its open menu and old results.
+function valueEditorKey(filter: {field: string; operator?: string}): string {
+  return `${filter.field}\u0000${filter.operator ?? ''}`;
+}
+
+// Keyed on field + operator, so this also mounts on a field switch, not just
+// when the popover opens; the focus handoff below runs for both.
+function ValueEditorCell(props: PowerSearchValueEditorProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      const container = ref.current;
+      if (!container) {
+        return;
+      }
+      const focusable = container.querySelector<HTMLElement>(
+        'input:not([disabled]), button:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      );
+      focusable?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  return (
+    <div ref={ref} {...stylex.props(styles.valueEditor)}>
+      <PowerSearchValueEditor {...props} />
+    </div>
+  );
+}
+
 // =============================================================================
 // Main popover
 // =============================================================================
@@ -625,22 +665,6 @@ export function PowerSearchEditPopover({
     saveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
   const [partialFilter, setPartialFilter] =
     useState<PartialFilter>(initialFilter);
-  const valueEditorRef = useRef<HTMLDivElement>(null);
-
-  // Focus the first focusable element inside the value editor after mount
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      const container = valueEditorRef.current;
-      if (!container) {
-        return;
-      }
-      const focusable = container.querySelector<HTMLElement>(
-        'input:not([disabled]), button:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
-      );
-      focusable?.focus();
-    });
-    return () => cancelAnimationFrame(frame);
-  }, []);
 
   const currentOperator = partialFilter.operator
     ? config.getOperator(partialFilter.field, partialFilter.operator)
@@ -854,17 +878,16 @@ export function PowerSearchEditPopover({
             </div>
           )}
           {operatorValue && !isEmptyType && (
-            <div ref={valueEditorRef} {...stylex.props(styles.valueEditor)}>
-              <PowerSearchValueEditor
-                operatorValue={operatorValue}
-                filterValue={partialFilter.value}
-                onChange={handleValueChange}
-                onEnter={handleSave}
-                config={config}
-                maxMenuItems={maxMenuItems}
-                isDisabled={isReadOnly}
-              />
-            </div>
+            <ValueEditorCell
+              key={valueEditorKey(partialFilter)}
+              operatorValue={operatorValue}
+              filterValue={partialFilter.value}
+              onChange={handleValueChange}
+              onEnter={handleSave}
+              config={config}
+              maxMenuItems={maxMenuItems}
+              isDisabled={isReadOnly}
+            />
           )}
         </HStack>
       </div>

package/src/ScrollableArea/modules/useScrollableArea.spec.md

@@ -10,7 +10,12 @@ approved_by: cixzhang
 approved_at: 2026-09-11
 owners: [cixzhang]
 review_triggers: [public-api, behavior, accessibility]
-verified_by: [packages/core/src/hooks/useScrollableArea.test.tsx]
+verified_by:
+  [
+    packages/core/src/hooks/useScrollableArea.test.tsx,
+    packages/core/src/hooks/scrollKeyboardDelegation.test.ts,
+    packages/core/src/BottomSheet/__tests__/BottomSheetKeyboard.a11y.browser.spec.ts,
+  ]
 parent_component: component:ScrollableArea
 references: [architecture:public-component-api, spec:AST-025/DEC-1]
 ---
@@ -47,24 +52,25 @@ and scroll chaining without inserting structure.
 
 ## Public API and concepts
 
-| Concept        | Closed values or states            | Meaning                               | Default                   | Owner                                     | Stability |
-| -------------- | ---------------------------------- | ------------------------------------- | ------------------------- | ----------------------------------------- | --------- |
-| axis           | `inline`, `block`, `both`          | requested logical scroll intent       | required                  | `spec:AST-025`                            | stable    |
-| keyboard owner | `content`, named `viewport`        | where keyboard scrolling is reached   | required                  | `spec:AST-025`                            | stable    |
-| overscroll     | `allow`, `contain`                 | edge propagation on effective axes    | `allow`                   | `spec:AST-025`                            | stable    |
-| axis state     | `isScrollable`, `atStart`, `atEnd` | effective ownership and logical edges | inactive, both edges true | `module:ScrollableArea/useScrollableArea` | stable    |
+| Concept        | Closed values or states                                | Meaning                                 | Default                   | Owner                                     | Stability |
+| -------------- | ------------------------------------------------------ | --------------------------------------- | ------------------------- | ----------------------------------------- | --------- |
+| axis           | `inline`, `block`, `both`                              | requested logical scroll intent         | required                  | `spec:AST-025`                            | stable    |
+| keyboard owner | `content`, named `viewport`, named `contentOrViewport` | fixed or automatic keyboard scroll path | required                  | `spec:AST-025`                            | stable    |
+| overscroll     | `allow`, `contain`                                     | edge propagation on effective axes      | `allow`                   | `spec:AST-025`                            | stable    |
+| axis state     | `isScrollable`, `atStart`, `atEnd`                     | effective ownership and logical edges   | inactive, both edges true | `module:ScrollableArea/useScrollableArea` | stable    |
 
 ## Behavioral contract
 
-| ID  | Invariant                                                                                                                                                                             | Basis                       | Acceptance and implementation state     |
-| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------------------- |
-| FR1 | An axis MUST be effective only when requested, computed overflow is scroll-capable, and geometry exceeds 1px.                                                                         | `spec:AST-025` FR1–FR4      | implemented                             |
-| FR2 | Viewport and content geometry MUST be observed; invalidations MUST coalesce and preserve the last valid state while unmeasurable.                                                     | `spec:AST-025` FR5–FR9      | implemented                             |
-| FR3 | Logical edges and behavior-owned physical overflow MUST map through direction and horizontal, vertical, or sideways writing modes without requiring adopters to recreate the mapping. | `spec:AST-025` FR1, FR3–FR4 | implemented                             |
-| FR4 | The nearest registered effective owner MUST win independently by axis.                                                                                                                | `spec:AST-025` FR10, FR18   | implemented privately for future Sticky |
-| FR5 | Viewport keyboard props and overscroll containment MUST appear only while applicable requested axes are effective.                                                                    | `spec:AST-025` FR12–FR14    | implemented                             |
-| FR6 | Prop getters MUST compose refs and preserve caller handlers/classes/styles/ARIA while behavior-owned accessibility and non-cancellable behavior win conflicts.                        | `spec:AST-025` IR4          | implemented                             |
-| FR7 | The viewport prop getter MUST consume caller `xstyle` and internally compose geometry-driven `clip`/`auto`/`hidden` overflow plus explicit fitting Sticky containment.                | `spec:AST-025` FR21         | implemented                             |
+| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                        | Basis                       | Acceptance and implementation state     |
+| --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------------------- |
+| FR1 | An axis MUST be effective only when requested, computed overflow is scroll-capable, and geometry exceeds 1px.                                                                                                                                                                                                                                                                    | `spec:AST-025` FR1–FR4      | implemented                             |
+| FR2 | Viewport and content geometry MUST be observed; invalidations MUST coalesce and preserve the last valid state while unmeasurable.                                                                                                                                                                                                                                                | `spec:AST-025` FR5–FR9      | implemented                             |
+| FR3 | Logical edges and behavior-owned physical overflow MUST map through direction and horizontal, vertical, or sideways writing modes without requiring adopters to recreate the mapping.                                                                                                                                                                                            | `spec:AST-025` FR1, FR3–FR4 | implemented                             |
+| FR4 | The nearest registered effective owner MUST win independently by axis.                                                                                                                                                                                                                                                                                                           | `spec:AST-025` FR10, FR18   | implemented privately for future Sticky |
+| FR5 | Viewport keyboard props and overscroll containment MUST appear only while applicable requested axes are effective.                                                                                                                                                                                                                                                               | `spec:AST-025` FR12–FR14    | implemented                             |
+| FR6 | Prop getters MUST compose refs and preserve caller handlers/classes/styles/ARIA while behavior-owned accessibility and non-cancellable behavior win conflicts.                                                                                                                                                                                                                   | `spec:AST-025` IR4          | implemented                             |
+| FR7 | The viewport prop getter MUST consume caller `xstyle` and internally compose geometry-driven `clip`/`auto`/`hidden` overflow plus explicit fitting Sticky containment.                                                                                                                                                                                                           | `spec:AST-025` FR21         | implemented                             |
+| FR8 | `contentOrViewport` MUST retain the named overflowing viewport, inspect the first sequential descendant on forward Tab entry, and delegate only to a native link/button outside navigation-key-owning surfaces. Reverse traversal from the delegated first child skips the viewport. Pointer/programmatic focus never delegates; eligibility is checked again on the next entry. | `spec:AST-025` FR12–FR13    | implemented                             |
 
 ### Transformation and precedence order
 
@@ -82,9 +88,20 @@ and scroll chaining without inserting structure.
 
 ## Accessibility contract
 
-- **AR1 — Named viewport owner.** Viewport-owned access requires a label and adds
-  the viewport to the tab order only while an applicable axis is effective.
-- **AR2 — Focus continuity.** State changes never move or blur focus.
+- **AR1 — Named viewport owner.** Fixed viewport and automatic access require a
+  label and retain `tabIndex=0` while effectively scrollable. Automatic access
+  delegates only on forward keyboard entry; the descendant retains its own name
+  inside the named viewport group/region.
+- **AR2 — Focus continuity.** Content, eligibility, and geometry changes never
+  move or blur focus. A viewport losing overflow while focused remains
+  programmatically focusable. Reverse traversal from the delegated first child
+  skips the viewport, including after visiting later descendants.
+- **AR3 — Conservative eligibility.** Inspect the first sequential target; do not
+  search past an excluded one for a link/button. Composite roles, editable
+  surfaces, native or registered nested scroll owners, positive tab ordering,
+  popup triggers, and unproven interactive roles retain the viewport path.
+- **AR4 — Native scrolling.** Delegation MUST preserve Arrow/Page access to both
+  scroll edges without implementing JavaScript scrolling.
 
 ## Design relationships
 
@@ -97,9 +114,9 @@ No visual representation is owned by this hook.
 
 ## Verification map
 
-| Contract         | Verification                                                   | Representative states                                                                 | Mutation or failure expectation                                                                                |
-| ---------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| FR1–FR6, AR1–AR2 | `useScrollableArea.test.tsx` plus real-browser Storybook probe | horizontal/vertical/sideways, LTR/RTL, fit/overflow/edge, nested owners, focused loss | style-only or geometry-only ownership, physical-edge leakage, stale state, ref loss, or dead containment fails |
+| Contract         | Verification                                                                                                     | Representative states                                                                                                                                  | Mutation or failure expectation                                                                                                                 |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| FR1–FR8, AR1–AR4 | `useScrollableArea.test.tsx`, `scrollKeyboardDelegation.test.ts`, and `BottomSheetKeyboard.a11y.browser.spec.ts` | horizontal/vertical/sideways, LTR/RTL, fit/overflow/edge, fixed/automatic keyboard owners, dynamic descendant eligibility, nested owners, focused loss | style-only or geometry-only ownership, physical-edge leakage, duplicate/missing keyboard path, stale state, ref loss, or dead containment fails |
 
 ## Decision log
 
@@ -111,6 +128,17 @@ No visual representation is owned by this hook.
 One returned prop object per owned element keeps refs, accessibility, handlers,
 and behavior together without making consumer spread order part of correctness.
 
+### DEC-2 — Automatic ownership is shared behavior
+
+**Reference:** `module:ScrollableArea/useScrollableArea/DEC-2`
+**Decider:** cixzhang, 2026-09-13
+
+`contentOrViewport` retains the named overflowing viewport and delegates only on
+forward Tab entry to a safe first sequential native link/button. This replaces
+continuous keyboard-eligibility observation. Geometry observation is unchanged;
+keyboard eligibility adds no subtree or ancestor observers and is inspected anew
+at each entry. BottomSheet is a proving composition of this shared behavior.
+
 ## Open questions
 
 None.

package/src/Slider/Slider.doc.mjs

@@ -19,6 +19,12 @@ const anatomy = [
     description:
       'Control row containing the track, thumb or thumbs, and optional text value.',
   },
+  {
+    name: 'Interactive control',
+    required: true,
+    description:
+      'Pointer and keyboard interaction surface containing the rail, fill, marks, and thumbs.',
+  },
   {
     name: 'Track',
     required: true,
@@ -235,6 +241,11 @@ export const docs = {
         visualProps: ['orientation'],
         states: ['disabled'],
       },
+      {
+        className: 'astryx-slider-control',
+        visualProps: ['orientation'],
+        states: ['disabled'],
+      },
       {className: 'astryx-slider-track', visualProps: ['orientation']},
       {
         className: 'astryx-slider-thumb',
@@ -416,6 +427,11 @@ export const docsZh = {
         visualProps: ['orientation'],
         states: ['disabled'],
       },
+      {
+        className: 'astryx-slider-control',
+        visualProps: ['orientation'],
+        states: ['disabled'],
+      },
       {className: 'astryx-slider-track', visualProps: ['orientation']},
       {
         className: 'astryx-slider-thumb',