@astryxdesign/core 0.5.1 → 0.5.2-canary.00477a5

package/src/Resizable/Resizable.doc.mjs

@@ -1,5 +1,27 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
+const anatomy = [
+  {
+    name: 'Handle',
+    required: true,
+    description:
+      'Focusable separator that owns pointer and keyboard resize interaction.',
+  },
+  {
+    name: 'Grip pill',
+    required: false,
+    description:
+      'Default visible grip indicator; custom handle content can replace it.',
+  },
+  {
+    name: 'Grab zone',
+    required: true,
+    description:
+      'Invisible enlarged pointer region aligned with the grip or divider.',
+  },
+];
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docs = {
   name: 'Resizable',
@@ -19,6 +41,7 @@ export const docs = {
     'grip',
   ],
   usage: {
+    anatomy,
     description:
       'Hook-based resizable panel system. useResizable() manages size state ' +
       'and ResizeHandle provides the interactive pill-grip separator. ' +
@@ -86,8 +109,7 @@ export const docs = {
         {
           name: 'collapsedSize',
           type: 'number',
-          description:
-            'Pixel threshold that triggers collapse during drag.',
+          description: 'Pixel threshold that triggers collapse during drag.',
           default: '40',
         },
         {
@@ -98,13 +120,13 @@ export const docs = {
         {
           name: 'shrinkOrder',
           type: 'number',
-          description:
-            'Cascade priority: lower number shrinks first.',
+          description: 'Cascade priority: lower number shrinks first.',
         },
         {
           name: 'autoSaveId',
           type: 'string',
-          description: 'Key for persisting sizes and collapse state to localStorage.',
+          description:
+            'Key for persisting sizes and collapse state to localStorage.',
         },
       ],
     },
@@ -190,20 +212,35 @@ export const docs = {
 
 /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
-  description: 'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator.',
+  description:
+    'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator.',
   usage: {
+    anatomy,
     description:
       'Hook-based resizable panel system. useResizable() manages size state; ResizeHandle provides interactive pill-grip separator. Pass resize props to existing layout components via their resizable prop.',
     bestPractices: [
-      {guidance: true, description: 'Use useResizable() w/ existing Astryx layout components. Pass returned props to resizable prop on LayoutPanel or SideNav.'},
-      {guidance: true, description: 'Provide accessible label on each ResizeHandle when multiple handles exist (e.g. "Resize sidebar", "Resize terminal").'},
-      {guidance: false, description: 'Wrap panels in extra container components for resize. Hook-first architecture avoids extra DOM; use it directly on existing components.'},
+      {
+        guidance: true,
+        description:
+          'Use useResizable() w/ existing Astryx layout components. Pass returned props to resizable prop on LayoutPanel or SideNav.',
+      },
+      {
+        guidance: true,
+        description:
+          'Provide accessible label on each ResizeHandle when multiple handles exist (e.g. "Resize sidebar", "Resize terminal").',
+      },
+      {
+        guidance: false,
+        description:
+          'Wrap panels in extra container components for resize. Hook-first architecture avoids extra DOM; use it directly on existing components.',
+      },
     ],
   },
   components: [
     {
       name: 'useResizable',
-      description: 'Hook managing resize state for one or more panel regions. Returns size, isCollapsed, collapse/expand/resize methods, + props to pass to handles.',
+      description:
+        'Hook managing resize state for one or more panel regions. Returns size, isCollapsed, collapse/expand/resize methods, + props to pass to handles.',
       propDescriptions: {
         defaultSize: 'initial size in px or % string (e.g. "20%")',
         minSizePx: 'minimum size in px',
@@ -217,14 +254,20 @@ export const docsDense = {
     },
     {
       name: 'ResizeHandle',
-      description: 'Draggable separator between panels. Pill-grip: invisible at rest, visible on hover (0.6 opacity), fully opaque during drag (1.0). Keyboard-accessible.',
+      description:
+        'Draggable separator between panels. Pill-grip: invisible at rest, visible on hover (0.6 opacity), fully opaque during drag (1.0). Keyboard-accessible.',
       propDescriptions: {
-        direction: 'layout direction: determines cursor + indicator orientation',
-        isReversed: 'reverse drag direction. Use when handle controls panel on end/right/bottom side',
+        direction:
+          'layout direction: determines cursor + indicator orientation',
+        isReversed:
+          'reverse drag direction. Use when handle controls panel on end/right/bottom side',
         isDisabled: 'handle interactive?',
-        hasDivider: 'show full-length 1px divider line through handle. Use when adjacent panels share same background',
-        isAlwaysVisible: 'show pill grip at rest instead of only on hover. Use when discoverability important',
-        pillPlacement: 'which side of divider pill sits on. auto = content side (derived from isReversed), flips when collapsed; start = left/top, end = right/bottom, center = centered on divider',
+        hasDivider:
+          'show full-length 1px divider line through handle. Use when adjacent panels share same background',
+        isAlwaysVisible:
+          'show pill grip at rest instead of only on hover. Use when discoverability important',
+        pillPlacement:
+          'which side of divider pill sits on. auto = content side (derived from isReversed), flips when collapsed; start = left/top, end = right/bottom, center = centered on divider',
         label: 'accessible label for separator',
         resizable: 'resize props from useResizable: connects handle to panel',
       },

package/src/Resizable/Resizable.spec.md

@@ -0,0 +1,194 @@
+---
+schema_version: 1
+template_version: 3
+kind: component
+id: component:Resizable
+authority: draft
+archive_reason: null
+superseded_by: null
+approved_by: null
+approved_at: null
+owners: [cixzhang]
+review_triggers: [behavior, layout, theming, accessibility]
+verified_by:
+  [
+    packages/core/src/Resizable/ResizeHandle.test.tsx,
+    packages/core/src/Resizable/useResizable.test.ts,
+    packages/core/src/theme/themingTargets.test.ts,
+    scripts/check-knowledge.mjs,
+  ]
+families: []
+design_specs: []
+architecture:
+  [
+    architecture:component-theming-surface,
+    architecture:interaction-modality,
+    architecture:public-component-api,
+  ]
+contributing: []
+system_specs: []
+---
+
+# Resizable component contract
+
+## Intent
+
+Resizable combines the useResizable state and behavior hook with a focusable
+ResizeHandle. The handle presents a default Grip pill over an enlarged invisible
+Grab zone. This draft records current consumer anatomy and theming ownership
+without changing resize semantics, runtime behavior, styling, targets, or public
+API.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: additive documentation only; runtime, DOM, styling,
+  targets, aliases, and public API remain unchanged
+- Controlled/uncontrolled behavior: unchanged
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- useResizable size, collapse, snapping, persistence, and resize lifecycle.
+- ResizeHandle's separator semantics, pointer and keyboard interaction, and
+  current `resize-handle` target.
+- The default Grip pill and its current `resize-handle-pill` target, plus the
+  aligned invisible Grab zone.
+
+**Does not own / non-goals**
+
+- The structural region being resized — owned by LayoutPanel, SideNav, or another
+  caller.
+- Layout-region topology, inset, divider, or scrolling rules.
+- A public target for the Grab zone; none exists on current `main`.
+- Fixing the missing runtime reflection for the documented Handle `direction`
+  theming state in this documentation-only change.
+
+## Public concepts
+
+No new public concept is introduced. Consumer props, hook outputs, and usage
+remain documented in `Resizable.doc.mjs` and `useResizable.doc.mjs`.
+
+## Behavioral and layout contract
+
+| ID  | Candidate invariant                                                                                                                                                                             | Basis                           | Draft review state                                            |
+| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------- |
+| FR1 | ResizeHandle renders one focusable Handle and one enlarged Grab zone; the default render also contains a Grip pill, while caller-provided children replace that pill.                           | Current source, docs, and tests | Verified current behavior; no new behavior decided            |
+| FR2 | Handle carries `resize-handle`, Grip pill carries `resize-handle-pill`, and Grab zone carries no public target.                                                                                 | Current source and public docs  | Verified current target inventory; no target change           |
+| FR3 | Pointer, keyboard, collapse, snap, persistence, reversal, and size behavior remain owned by ResizeHandle and useResizable rather than layout-regions collaborators.                             | Current source, docs, and tests | Verified current ownership; resize semantics remain unchanged |
+| FR4 | Resizable metadata advertises `direction` as a Handle visual state, but current runtime calls `themeProps('resize-handle')` without reflecting that value, so direction selectors cannot match. | Current source and public docs  | Verified audit gap; deliberately not fixed in this change     |
+
+### Allowed variation
+
+- **AV1 — Axis.** Handle may resize along the horizontal or vertical layout axis;
+  separator orientation and cursor follow the current implementation.
+- **AV2 — Placement.** Handle may participate inline or overlay its parent, and
+  Grip pill may sit at start, end, center, or the current automatic side.
+- **AV3 — Grip content.** Caller-provided children may replace Grip pill without
+  changing Handle or Grab zone ownership.
+- **AV4 — Divider.** Handle may paint its current divider treatment; a composing
+  region remains responsible for avoiding a duplicate adjacent divider.
+
+### Representative states
+
+| State                  | Required invariant                                                    | Allowed variation                                  |
+| ---------------------- | --------------------------------------------------------------------- | -------------------------------------------------- |
+| Default handle         | Handle, Grab zone, and Grip pill render.                              | Divider and always-visible treatment may vary.     |
+| Custom handle content  | Handle and Grab zone remain; caller content replaces Grip pill.       | Caller content remains caller-owned.               |
+| Horizontal or vertical | Interaction follows the selected axis and current ARIA orientation.   | Size, reversal, and pill placement may vary.       |
+| Collapsed or expanded  | Handle preserves valid separator value semantics and resize controls. | Grip pill automatic side follows current behavior. |
+| Disabled               | Handle remains represented but is removed from interactive tab order. | Painted treatment follows existing styles.         |
+
+### Transformation and precedence order
+
+- No new clamp, snap, collapse, persistence, reversal, pointer, or keyboard order
+  is introduced.
+
+### Performance and resources
+
+- No new listener, storage, observer, or render requirement is introduced.
+
+## Accessibility contract
+
+This draft does not change or extend ResizeHandle's existing separator role,
+label, orientation, value, collapsed value text, focus, pointer, or keyboard
+behavior.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                                                      | Representation authority       | Hierarchy role | Component contract |
+| ---------------- | ----------------------------------------------------------------------- | ------------------------------ | -------------- | ------------------ |
+| Handle           | Presents the focusable resize separator and optional divider treatment. | Current source and public docs | Prominent      | FR1, FR2, FR3      |
+| Grip pill        | Presents the default visible resize affordance.                         | Current source and public docs | Supporting     | FR1, FR2           |
+| Grab zone        | Enlarges pointer reach while remaining visually transparent.            | Current source and tests       | Supporting     | FR1, FR2           |
+| Direction state  | Selects horizontal or vertical resize presentation.                     | Current public metadata        | Supporting     | FR3, FR4           |
+
+Grab zone is interaction structure rather than a painted public theming seam. Its
+`none` disposition records factual reachability. The missing Handle direction
+reflection is a separate current audit gap: the target exists, but runtime does
+not emit the documented target state.
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Handle": {"target": "resize-handle"},
+  "Grip pill": {"target": "resize-handle-pill"},
+  "Grab zone": {
+    "none": {
+      "reason": "intentional: The invisible pointer hit area is nonvisual interaction structure and has no public target"
+    }
+  }
+}
+```
+
+## Family and system relationships
+
+- `architecture:component-theming-surface` owns anatomy qualification, target
+  mapping, and target-state reflection requirements.
+- `architecture:interaction-modality` and `architecture:public-component-api`
+  own shared modality and API boundaries; this draft changes neither.
+- `family:layout-regions` lists useResizable and ResizeHandle as collaborators
+  that may drive a LayoutPanel's size. Resizable is not a layout-regions member,
+  and that family does not own or redefine resize state, snapping, persistence,
+  collapse, pointer, or keyboard semantics.
+
+## Verification map
+
+| Contract            | Verification                                       | Representative states                           | Mutation or failure expectation                                                                                 | Audit section              |
+| ------------------- | -------------------------------------------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| FR1                 | `ResizeHandle.test.tsx` plus source inspection     | Default, custom, collapsed, disabled, both axes | Handle and Grab zone regressions fail focused tests; custom Grip replacement currently relies on source review. | `audit:Resizable/anatomy`  |
+| FR2                 | Source inspection and `themingTargets.test.ts`     | Handle, Grip pill, and Grab zone                | Removing a target or documenting an unshipped Grab zone target fails evidence or inventory.                     | `audit:Resizable/theming`  |
+| FR3                 | `ResizeHandle.test.tsx` and `useResizable.test.ts` | Pointer, keyboard, snap, collapse, persistence  | Moving resize ownership or changing current transformations fails focused behavior coverage.                    | `audit:Resizable/behavior` |
+| FR4                 | Source and public metadata comparison              | Horizontal and vertical Handle                  | No current test detects that documented `direction` is absent from runtime target-state reflection.             | `audit:Resizable/theming`  |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                      | Canonical anatomy and two current targets       | Missing, extra, prefixed, stale, or multiply assigned mappings fail repository validation.                      | `audit:Resizable/theming`  |
+
+Current tests exercise Handle and Grab zone structure and behavior but do not
+render `children` to prove that custom content replaces Grip pill. That branch is
+source-inspected and lacks focused regression evidence. The documented
+`direction` visual axis is a closed union, so `extensibleAxes.test.ts` does not
+cover its missing runtime reflection; that mismatch is currently unguarded.
+
+## Decision log
+
+None. This draft records current facts and introduces no component-local design,
+API, resize, layout-family, or theming decision.
+
+## Open questions
+
+- **OQ1 — Which follow-up should add and verify the missing Handle `direction`
+  target-state reflection?** (`checkable`)
+- **OQ2 — Which focused test should pin custom content replacing Grip pill?**
+  (`checkable`)
+
+## Content boundary
+
+This file does not duplicate consumer prop tables/examples, resize algorithms,
+layout-region rules, current audit results, or implementation steps. It links to
+their owners.

package/src/Section/Section.doc.mjs

@@ -1,5 +1,19 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
+const anatomy = [
+  {
+    name: 'Section container',
+    required: true,
+    description: 'Painted container that groups a page region.',
+  },
+  {
+    name: 'Consumer content',
+    required: false,
+    description: 'Caller-provided content rendered inside the section container.',
+  },
+];
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
@@ -99,6 +113,7 @@ export const docs = {
     ],
   },
   usage: {
+    anatomy,
     description:
       'Section is the correct way to create page regions and group related content on a page. Use it for settings groups, form sections, sidebar areas, or any time you need visual separation between parts of a page. If you are tempted to use a Card for a page section, use Section instead.',
     bestPractices: [
@@ -206,6 +221,7 @@ export const docsZh = {
     ],
   },
   usage: {
+    anatomy,
     description:
       'Section is the correct way to create page regions and group related content on a page. Use it for settings groups, form sections, sidebar areas, or any time you need visual separation between parts of a page. If you are tempted to use a Card for a page section, use Section instead.',
     bestPractices: [
@@ -223,6 +239,7 @@ export const docsDense = {
   description:
     'Page-level container for grouping content into regions. Use INSTEAD of Card for settings panels, form groups, and page sections.',
   usage: {
+    anatomy,
     description:
       'Section creates page regions. Use for settings groups, form sections, sidebar areas. If you want to visually separate a part of a page, use Section, not Card. Cards are for discrete items (one profile, one notification).',
     bestPractices: [

package/src/Section/Section.spec.md

@@ -0,0 +1,138 @@
+---
+schema_version: 1
+template_version: 3
+kind: component
+id: component:Section
+authority: draft
+archive_reason: null
+superseded_by: null
+approved_by: null
+approved_at: null
+owners: [cixzhang]
+review_triggers: [theming]
+verified_by:
+  [packages/core/src/Section/Section.test.tsx, scripts/check-knowledge.mjs]
+families: [family:layout-regions]
+design_specs: []
+architecture:
+  [
+    architecture:component-theming-surface,
+    architecture:container-padding,
+    architecture:public-component-api,
+  ]
+contributing: []
+system_specs: []
+---
+
+# Section component contract
+
+## Intent
+
+Section renders a painted container for a page region and places caller-provided
+content inside it. This draft records current consumer anatomy and theming
+ownership without changing layout, styling, targets, or public API.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: additive documentation only; runtime, DOM, styling,
+  targets, and public API remain unchanged
+- Controlled/uncontrolled behavior: not applicable
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The painted section container and its existing `section` theming target.
+
+**Does not own / non-goals**
+
+- The caller-provided content rendered inside the section.
+- The outer layout wrapper as a consumer-facing anatomy part or theming target.
+
+## Public concepts
+
+No new public concept is introduced. Consumer props and usage remain documented
+in `Section.doc.mjs`.
+
+## Behavioral and layout contract
+
+| ID  | Candidate invariant                                                                                         | Basis                           | Draft review state                                 |
+| --- | ----------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------- |
+| FR1 | The current render places caller-provided content inside the inner container carrying the `section` target. | Current source, docs, and tests | Verified current behavior; no new behavior decided |
+
+### Allowed variation
+
+- Caller-provided content may vary without becoming Section-owned anatomy.
+
+### Representative states
+
+- The anatomy and target ownership are unchanged across the documented section
+  variants, sizes, dividers, and padding inputs.
+
+### Transformation and precedence order
+
+- No new layout or style precedence rule is introduced.
+
+### Performance and resources
+
+- No new performance or resource rule is introduced.
+
+## Accessibility contract
+
+This draft does not change or extend Section's existing accessibility behavior.
+
+## Design relationships
+
+| Anatomy or state  | Design requirement                                          | Representation authority       | Hierarchy role    | Component contract |
+| ----------------- | ----------------------------------------------------------- | ------------------------------ | ----------------- | ------------------ |
+| Section container | Presents the current painted page-region container.         | Current source and public docs | Supporting        | FR1                |
+| Consumer content  | Presents content supplied by the caller inside the section. | Caller-supplied content        | Context-dependent | FR1                |
+
+The outer layout wrapper remains implementation structure and is not listed as
+consumer anatomy.
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Section container": {"target": "section"},
+  "Consumer content": {
+    "none": {
+      "reason": "unsettled: No Section theming target reaches caller-provided content."
+    }
+  }
+}
+```
+
+## Family and system relationships
+
+This draft references the current shared owners without restating their rules:
+`family:layout-regions`, `architecture:component-theming-surface`,
+`architecture:container-padding`, and `architecture:public-component-api`.
+
+## Verification map
+
+| Contract            | Verification                               | Representative states                | Mutation or failure expectation                                                         | Audit section           |
+| ------------------- | ------------------------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------- | ----------------------- |
+| FR1                 | `Section.test.tsx` structure/target suites | Inner container and consumer content | Moving or removing the target or content fails existing structure and class assertions. | `audit:Section/anatomy` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`              | Canonical anatomy and current target | Missing, extra, prefixed, or stale mappings fail repository validation.                 | `audit:Section/theming` |
+
+## Decision log
+
+None. This draft records current facts and introduces no component-local design
+decision.
+
+## Open questions
+
+None.
+
+## Content boundary
+
+This file does not duplicate consumer prop tables, examples, implementation
+steps, or system rules. It links to their owners.

package/src/SegmentedControl/SegmentedControl.doc.mjs

@@ -1,5 +1,29 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
+const anatomy = [
+  {
+    name: 'Control',
+    required: true,
+    description: 'Container for the mutually exclusive segment choices.',
+  },
+  {
+    name: 'Segment',
+    required: true,
+    description: 'Individual choice within the control.',
+  },
+  {
+    name: 'Label',
+    required: false,
+    description: 'Visible text identifying a segment when its label is not hidden.',
+  },
+  {
+    name: 'Icon',
+    required: false,
+    description: 'Optional caller-supplied icon shown inside a segment.',
+  },
+];
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
@@ -96,8 +120,65 @@ export const docs = {
     {name: 'SegmentedControlItem'},
   ],
   usage: {
+    anatomy,
     description:
       'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.',
+    accessibility: [
+      {
+        name: 'Text label',
+        category: 'Color contrast',
+        criterion: '1.4.3 Contrast (Minimum)',
+        requirement: '4.5:1',
+        states: ['Rest', 'Hover', 'Selected'],
+        description:
+          'Each label must have at least 4.5:1 contrast with its segment background. Check unselected, Hover, and selected colors as they appear on screen.',
+      },
+      {
+        name: 'Essential icon',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Icon only'],
+        description:
+          'When a segment has no visible label, its icon must have at least 3:1 contrast with the segment background. An icon beside a visible label does not need its own check.',
+      },
+      {
+        name: 'Selected state indicator',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1 if relied upon',
+        states: ['Selected'],
+        description:
+          'The selected background must reach 3:1 only when users need it to tell selected from unselected. Label color and weight also show selection.',
+      },
+      {
+        name: 'Visible control boundary',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1 if needed',
+        states: ['Rest'],
+        description:
+          'The control edge or segment borders need at least 3:1 contrast when users need them to see the choices.',
+      },
+      {
+        name: 'Keyboard focus indicator',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Focus visible'],
+        description:
+          'The focus outline must have at least 3:1 contrast with the area around the segment. Check it on the track and selected background.',
+      },
+      {
+        name: 'Disabled appearance',
+        category: 'Color contrast',
+        criterion: '1.4.3 and 1.4.11 exceptions',
+        requirement: 'Not required',
+        states: ['Disabled'],
+        description:
+          'Disabled controls do not need to meet these contrast ratios.',
+      },
+    ],
     bestPractices: [
       {guidance: true, description: 'Use for switching between 2–5 mutually exclusive views or modes where all options should be visible.'},
       {guidance: true, description: 'Provide a descriptive label for the control to ensure the group is accessible to screen readers.'},
@@ -111,6 +192,7 @@ export const docs = {
 /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
+    anatomy,
     description:
       'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.',
     bestPractices: [
@@ -126,6 +208,7 @@ export const docsZh = {
 /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
+    anatomy,
     description:
       'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.',
     bestPractices: [