@astryxdesign/core 0.6.1 → 0.6.2-canary.2b2113d

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/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',

package/src/Slider/Slider.spec.md

@@ -1,13 +1,13 @@
 ---
 schema_version: 3
-template_version: 3
+template_version: 4
 kind: component
 id: component:Slider
-authority: draft
+authority: current
 archive_reason: null
 superseded_by: null
-approved_by: null
-approved_at: null
+approved_by: cixzhang
+approved_at: 2026-09-14
 owners: [cixzhang]
 review_triggers: [theming]
 verified_by:
@@ -29,14 +29,14 @@ system_specs: []
 ## Intent
 
 Slider presents a labeled control for selecting one numeric value or a bounded
-range. This draft records its current consumer anatomy and theming ownership
-without changing runtime behavior, styling, targets, or public API.
+range. This contract records its consumer anatomy and theming ownership, including
+an additive target for the interactive control surface.
 
 ## Compatibility and migration
 
 - Released default preserved: `yes`
-- Compatibility class: additive documentation only; runtime, DOM, styling,
-  targets, and public API remain unchanged
+- Compatibility class: additive target and state reflection only; runtime,
+  default styling, DOM semantics, and public props remain unchanged
 - Controlled/uncontrolled behavior: unchanged; Slider remains controlled
 - Migration decision: none
 
@@ -48,7 +48,8 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 - The current slider row, background track, filled range, tick marks and labels,
   thumbs, and adjacent text value presentation.
-- The existing `slider`, `slider-track`, and `slider-thumb` public targets.
+- The `slider`, `slider-control`, `slider-track`, and `slider-thumb` public
+  targets.
 
 **Does not own / non-goals**
 
@@ -61,24 +62,26 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Public concepts
 
-No new public concept is introduced. Consumer props, modes, states, and usage
-remain documented in `Slider.doc.mjs`.
+This adds one public theming target without adding or changing a component prop,
+value domain, or behavior. Consumer props, modes, states, and usage remain
+documented in `Slider.doc.mjs`.
 
 ## Behavioral and layout contract
 
-| ID  | Candidate invariant                                                                                                                       | Basis                                   | Draft review state                                 |
-| --- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------- |
-| FR1 | The current render places a filled range, one or two thumbs, and optional tick marks over the background track.                           | Current source, docs, and focused tests | Verified current behavior; no new behavior decided |
-| FR2 | `Slider`, `Track`, and `Thumb` carry the existing `slider`, `slider-track`, and `slider-thumb` targets respectively.                      | Current source and public docs          | Verified current behavior; no target change        |
-| FR3 | Filled range, tick marks, mark labels, and adjacent text value display are stable rendered parts without their own current Slider target. | Current source and public docs          | Verified current asymmetry; not ratified as policy |
-| FR4 | Label and status presentation continue to use Field and FieldStatus; value tooltips continue to use Tooltip.                              | Current source and focused tests        | Verified composition boundary                      |
+| ID  | Candidate invariant                                                                                                                                  | Basis                                   | Review state                                       |
+| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------- |
+| FR1 | The current render places a filled range, one or two thumbs, and optional tick marks over the background track.                                      | Current source, docs, and focused tests | Verified current behavior; no new behavior decided |
+| FR2 | `Slider`, `Interactive control`, `Track`, and `Thumb` carry the `slider`, `slider-control`, `slider-track`, and `slider-thumb` targets respectively. | Current source, public docs, and #6224  | Approved additive target contract                  |
+| FR3 | Filled range, tick marks, mark labels, and adjacent text value display are stable rendered parts without their own current Slider target.            | Current source and public docs          | Verified current asymmetry; not ratified as policy |
+| FR4 | Label and status presentation continue to use Field and FieldStatus; value tooltips continue to use Tooltip.                                         | Current source and focused tests        | Verified composition boundary                      |
 
 ### Observed current target asymmetry
 
 ProgressBar currently exposes targets for its fill and marks, while Slider
-exposes targets for its root row, background track, and thumbs but not its
-filled range, tick marks, mark labels, or adjacent text value display. This is
-implementation evidence for a joint audit, not approval of either target shape.
+exposes targets for its root row, interactive control, background track, and
+thumbs but not its filled range, tick marks, mark labels, or adjacent text value
+display. This is implementation evidence for a joint audit, not approval of
+either component's remaining target shape.
 
 ### Allowed variation
 
@@ -108,20 +111,21 @@ implementation evidence for a joint audit, not approval of either target shape.
 
 ## Accessibility contract
 
-This draft does not change or extend Slider's existing accessible name, value,
+This contract does not change or extend Slider's existing accessible name, value,
 range-thumb naming, description/status association, keyboard behavior, disabled
 behavior, or value-tooltip behavior.
 
 ## Design relationships
 
-| Anatomy or state        | Design requirement                                            | Representation authority        | Hierarchy role | Component contract |
-| ----------------------- | ------------------------------------------------------------- | ------------------------------- | -------------- | ------------------ |
-| Label and description   | Identify and explain the numeric setting.                     | Current shared-component source | Supporting     | FR4                |
-| Slider and track        | Arrange the current interactive range control and rail.       | Current source and public docs  | Prominent      | FR1, FR2           |
-| Filled range and thumbs | Show the selected value or interval over the available range. | Current source and public docs  | Prominent      | FR1, FR2, FR3      |
-| Tick marks and labels   | Show optional supplied positions and their text.              | Current source and public docs  | Supporting     | FR1, FR3           |
-| Value presentation      | Shows the formatted value as text or a shared Tooltip.        | Current source and public docs  | Supporting     | FR3, FR4           |
-| Status message          | Presents shared validation feedback below the slider.         | Current shared-component source | Supporting     | FR4                |
+| Anatomy or state               | Design requirement                                                                             | Representation authority        | Hierarchy role | Component contract |
+| ------------------------------ | ---------------------------------------------------------------------------------------------- | ------------------------------- | -------------- | ------------------ |
+| Label and description          | Identify and explain the numeric setting.                                                      | Current shared-component source | Supporting     | FR4                |
+| Slider and interactive control | Separate the outer row from the pointer/keyboard surface and its composite disabled treatment. | Current source and public docs  | Prominent      | FR1, FR2           |
+| Track                          | Shows the available range behind the fill.                                                     | Current source and public docs  | Prominent      | FR1, FR2           |
+| Filled range and thumbs        | Show the selected value or interval over the available range.                                  | Current source and public docs  | Prominent      | FR1, FR2, FR3      |
+| Tick marks and labels          | Show optional supplied positions and their text.                                               | Current source and public docs  | Supporting     | FR1, FR3           |
+| Value presentation             | Shows the formatted value as text or a shared Tooltip.                                         | Current source and public docs  | Supporting     | FR3, FR4           |
+| Status message                 | Presents shared validation feedback below the slider.                                          | Current shared-component source | Supporting     | FR4                |
 
 ### Theming anatomy
 
@@ -138,6 +142,7 @@ behavior, or value-tooltip behavior.
     }
   },
   "Slider": {"target": "slider"},
+  "Interactive control": {"target": "slider-control"},
   "Track": {"target": "slider-track"},
   "Filled range": {
     "none": {
@@ -172,10 +177,12 @@ behavior, or value-tooltip behavior.
 }
 ```
 
-`Filled range`, `Tick mark`, `Mark label`, and `Value display` remain stable
-consumer anatomy, but no current Slider target reaches them. The map records
-those gaps without making their absence intentional. `Value display` names the
-adjacent text mode; the separately listed value tooltip retains Tooltip's target.
+`Interactive control` names the pointer/keyboard hit surface and the composite
+opacity boundary around the rail, fill, marks, and thumbs. `Filled range`, `Tick
+mark`, `Mark label`, and `Value display` remain stable consumer anatomy, but no
+current Slider target reaches them. The map records those gaps without making
+their absence intentional. `Value display` names the adjacent text mode; the
+separately listed value tooltip retains Tooltip's target.
 
 ## Family and system relationships
 
@@ -191,24 +198,31 @@ adjacent text mode; the separately listed value tooltip retains Tooltip's target
 
 ## Verification map
 
-| Contract            | Verification                                                                           | Representative states                             | Mutation or failure expectation                                                                                      | Audit section          |
-| ------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------- |
-| FR1                 | `Slider.test.tsx` structure, range, and marks suites                                   | Single, range, horizontal, vertical, marks        | Removing or misaligning stable parts breaks existing role, position, or mark assertions.                             | `audit:Slider/anatomy` |
-| FR2                 | `themingTargets.test.ts`                                                               | Root, track, and thumb target call sites          | Source and public target metadata drift fails the target guard.                                                      | `audit:Slider/theming` |
-| FR3                 | Source and consumer-doc review                                                         | Filled range, marks, labels, adjacent text value  | A missing target is inaccurately documented as present or intentionally permanent.                                   | `audit:Slider/theming` |
-| FR4                 | Source inspection; focused tests cover label, status, and disabled-reason Tooltip only | Label, status, value tooltip, disabled reason     | Shared composition or its accessible association disappears; value-tooltip composition still lacks focused coverage. | `audit:Slider/anatomy` |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                                          | Canonical anatomy and three current local targets | Missing, extra, prefixed, stale, or unclaimed mappings fail repository validation.                                   | `audit:Slider/theming` |
+| Contract            | Verification                                                                           | Representative states                                                 | Mutation or failure expectation                                                                                      | Audit section          |
+| ------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| FR1                 | `Slider.test.tsx` structure, range, and marks suites                                   | Single, range, horizontal, vertical, marks                            | Removing or misaligning stable parts breaks existing role, position, or mark assertions.                             | `audit:Slider/anatomy` |
+| FR2                 | `Slider.test.tsx`, `themingTargets.test.ts`, generated probe theme, and Chromium       | Root, horizontal/vertical control, disabled control, track, and thumb | A target class/state is missing, undocumented, or placed outside its owning anatomy.                                 | `audit:Slider/theming` |
+| FR3                 | Source and consumer-doc review                                                         | Filled range, marks, labels, adjacent text value                      | A missing target is inaccurately documented as present or intentionally permanent.                                   | `audit:Slider/theming` |
+| FR4                 | Source inspection; focused tests cover label, status, and disabled-reason Tooltip only | Label, status, value tooltip, disabled reason                         | Shared composition or its accessible association disappears; value-tooltip composition still lacks focused coverage. | `audit:Slider/anatomy` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                                          | Canonical anatomy and four current local targets                      | Missing, extra, prefixed, stale, or unclaimed mappings fail repository validation.                                   | `audit:Slider/theming` |
 
-The focused Slider suite does not separately assert the exact `slider`,
-`slider-track`, or `slider-thumb` class placement. The source/metadata target
-guard covers those declarations. It also covers only the disabled-reason
-Tooltip path, not the `valueDisplay="tooltip"` composition; that anatomy is
-source-inspected and remains missing focused test coverage.
+The focused Slider suite asserts the `slider-control` target's orientation and
+disabled state. Source/metadata guards cover all four target declarations. The
+suite covers only the disabled-reason Tooltip path, not the
+`valueDisplay="tooltip"` composition; that anatomy is source-inspected and
+remains missing focused test coverage.
 
 ## Decision log
 
-None. This draft records current facts and introduces no component-local design,
-family, theming, or API decision.
+### DEC-1 — Interactive control is public Slider anatomy
+
+**Reference:** `component:Slider/DEC-1`
+**Decider:** cixzhang, 2026-09-14
+
+The stable pointer/keyboard interaction and compositing surface is a
+consumer-recognizable part, so it carries `slider-control`. `Thumb` remains
+separate anatomy and continues to carry `slider-thumb`. This adds no default
+behavior or styling change.
 
 ## Open questions
 

package/src/Slider/Slider.test.tsx

@@ -137,6 +137,24 @@ describe('Slider', () => {
     },
   );
 
+  it('reflects orientation and disabled state on the interactive control target', () => {
+    render(
+      <Slider
+        label="Volume"
+        value={50}
+        orientation="vertical"
+        valueDisplay="text"
+        isDisabled
+      />,
+    );
+    const control = screen.getByRole('slider').parentElement;
+    expect(control).not.toBeNull();
+    expect(control).toHaveClass('astryx-slider-control');
+    expect(control).toHaveAttribute('data-orientation', 'vertical');
+    expect(control).toHaveAttribute('data-disabled', 'disabled');
+    expect(control).not.toContainElement(screen.getByText('50'));
+  });
+
   it('range mode sets correct aria values on both thumbs', () => {
     render(
       <Slider

package/src/Slider/Slider.tsx

@@ -1029,12 +1029,18 @@ export function Slider({ref, ...props}: SliderProps) {
           onPointerMove={handlePointerMove}
           onPointerUp={handlePointerUp}
           onPointerCancel={handlePointerUp}
-          {...stylex.props(
-            styles.trackContainer,
-            isHorizontal
-              ? styles.trackContainerHorizontal
-              : styles.trackContainerVertical,
-            isDisabled && styles.trackContainerDisabled,
+          {...mergeProps(
+            themeProps('slider-control', {
+              orientation,
+              disabled: isDisabled ? 'disabled' : null,
+            }),
+            stylex.props(
+              styles.trackContainer,
+              isHorizontal
+                ? styles.trackContainerHorizontal
+                : styles.trackContainerVertical,
+              isDisabled && styles.trackContainerDisabled,
+            ),
           )}>
           {/* Background track */}
           <div

package/src/Spinner/Spinner.doc.mjs

@@ -30,7 +30,7 @@ export const docs = {
       name: 'aria-label',
       type: 'string',
       description:
-        'Accessible name for screen readers. Defaults to label (if string) or "Loading".',
+        'Accessible name for screen readers. Defaults to label (if string) or a translated "Loading" from the i18n catalog.',
       default: "'Loading'",
     },
     {
@@ -48,6 +48,7 @@ export const docs = {
       {name: '--spinner-stroke-width', description: 'Stroke width of both circles the ring is drawn from: the moving arc and the track behind it. Set it per size alongside the diameter. One stroke width drives both, so 0 is honoured as a zero-width stroke and paints nothing at all rather than falling back to the default; for an arc with no track behind it, set --spinner-track-color to transparent instead.', default: '2px (sm), 3px (md), 3px (lg), 4px (xl)'},
       {name: '--spinner-color', description: "Color of the moving arc. Defaults to the shade's token, so set it on a shade-variant target to retheme one shade (spinner: { 'shade:subtle': { '--spinner-color': 'var(--color-text-tertiary)' } }), or on the base target to retheme all four. Accepts any color notation, including var(), color-mix() and currentColor.", default: 'var(--color-accent) (default), var(--color-text-secondary) (subtle), var(--color-on-dark) (onMedia), currentColor (inherit)'},
       {name: '--spinner-track-color', description: 'Color of the track the arc travels on. Set it to `transparent` for an arc with no track. The onMedia and inherit shades draw the track at reduced alpha (30%) so it reads against an arbitrary backdrop; that fade applies to a themed color too.', default: 'var(--color-track) (default, subtle), var(--color-on-dark) (onMedia), currentColor (inherit)'},
+      {name: '--spinner-arc-fraction', description: "Fraction of the ring the moving arc covers, as a plain number (not a percentage or angle). Set it on a size-variant target the same way as --spinner-diameter, e.g. spinner: { 'size:xl': { '--spinner-arc-fraction': '0.75' } } for a 270deg sweep. Only takes effect once the stylesheet loads; a render with no CSS (SSR, no-JS) always draws the default 135deg arc.", default: '0.375 (135deg), same for every size'},
     ],
   },
   usage: {
@@ -87,7 +88,7 @@ export const docsZh = {
     {
       name: 'aria-label',
       type: 'string',
-      description: '屏幕阅读器的无障碍名称。默认为 label（如果是字符串）或 "Loading"。',
+      description: '屏幕阅读器的无障碍名称。默认为 label（如果是字符串）或来自 i18n 词条的已翻译 "Loading"。',
       default: "'Loading'",
     },
     {
@@ -106,6 +107,7 @@ export const docsZh = {
       {name: '--spinner-stroke-width', description: '绘制环的两个圆——移动圆弧与其后的轨道——的描边宽度。与直径一起按尺寸设置。同一个描边宽度同时驱动两者，因此 0 会被采纳为零宽描边——什么都不绘制，而不会回退到默认值；若想要没有轨道的圆弧，请改将 --spinner-track-color 设为 transparent。', default: '2px (sm), 3px (md), 3px (lg), 4px (xl)'},
       {name: '--spinner-color', description: "运动圆弧的颜色。默认取所在 shade 的令牌，因此可在 shade 变体目标上设置以重新定义单个 shade——spinner: { 'shade:subtle': { '--spinner-color': 'var(--color-text-tertiary)' } }——或在 base 目标上设置以覆盖全部四种。接受任意颜色写法，包括 var()、color-mix() 与 currentColor。", default: 'var(--color-accent)（default）、var(--color-text-secondary)（subtle）、var(--color-on-dark)（onMedia）、currentColor（inherit）'},
       {name: '--spinner-track-color', description: '圆弧所在轨道的颜色。设为 `transparent` 可得到无轨道的圆弧。onMedia 与 inherit 两种 shade 会以降低的透明度（30%）绘制轨道，以便在任意背景上可辨；该淡化同样作用于主题化的颜色。', default: 'var(--color-track)（default、subtle）、var(--color-on-dark)（onMedia）、currentColor（inherit）'},
+      {name: '--spinner-arc-fraction', description: "运动圆弧覆盖圆环的比例，为纯数字（非百分比或角度）。在尺寸变体目标上设置，方式与 --spinner-diameter 相同，例如 spinner: { 'size:xl': { '--spinner-arc-fraction': '0.75' } } 可得到 270 度的圆弧。仅在样式表加载后生效；无 CSS 的渲染（SSR、无 JS）始终绘制默认的 135 度圆弧。", default: '0.375（135 度），各尺寸相同'},
     ],
   },
   usage: {
@@ -136,7 +138,8 @@ export const docsDense = {
     size: 'Spinner size: ring diameter (10px, 14px, 18px, 28px).',
     shade: 'Color shade for light or dark backgrounds.',
     label: 'Visible content below spinner. String auto-sets aria-label.',
-    'aria-label': 'A11y name for screen readers. Defaults to label or "Loading".',
+    'aria-label':
+      'A11y name for screen readers. Defaults to label or a translated "Loading".',
     xstyle: 'StyleX styles for layout customization. Must be stylex.create() value, not inline style.',
   },
 };

package/src/Spinner/Spinner.test.tsx

@@ -12,6 +12,7 @@
 import {describe, it, expect, vi, afterEach} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Spinner} from './Spinner';
+import {InternationalizationProvider} from '../i18n';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
 
@@ -72,6 +73,34 @@ describe('Spinner', () => {
     expect(spinner).toHaveAttribute('data-shade', 'inherit');
   });
 
+  it('localizes the default assistive label through the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{fr: {'@astryx.spinner.loading': 'Chargement'}}}>
+        <Spinner data-testid="spinner" />
+      </InternationalizationProvider>,
+    );
+    expect(screen.getByTestId('spinner')).toHaveAttribute(
+      'aria-label',
+      'Chargement',
+    );
+  });
+
+  it('keeps an explicit aria-label over the localized default', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{fr: {'@astryx.spinner.loading': 'Chargement'}}}>
+        <Spinner aria-label="Veuillez patienter" data-testid="spinner" />
+      </InternationalizationProvider>,
+    );
+    expect(screen.getByTestId('spinner')).toHaveAttribute(
+      'aria-label',
+      'Veuillez patienter',
+    );
+  });
+
   it('does not duplicate a visible string label as aria-label', () => {
     render(<Spinner label="Fetching data" data-testid="spinner" />);
     const status = screen.getByRole('status');
@@ -204,6 +233,14 @@ describe('Spinner', () => {
         '.astryx-spinner {\n    --spinner-color: var(--color-brand);',
       );
     });
+
+    it('scopes a themed arc fraction to that size variant (#5819)', () => {
+      expect(
+        cssFor({spinner: {'size:xl': {'--spinner-arc-fraction': '0.75'}}}),
+      ).toContain(
+        '.astryx-spinner[data-size="xl"] {\n    --spinner-arc-fraction: 0.75;',
+      );
+    });
   });
 });