@astryxdesign/core 0.5.1 → 0.5.2-canary.00477a5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/BottomSheet/BottomSheet.d.ts +3 -1
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +4 -3
- package/dist/BottomSheet/BottomSheetEdgeTint.d.ts +2 -2
- package/dist/BottomSheet/BottomSheetEdgeTint.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetEdgeTint.js +7 -10
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +1 -1
- package/dist/Button/Button.d.ts +2 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +11 -4
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +2 -2
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +34 -17
- package/dist/ContextMenu/ContextMenu.d.ts +14 -3
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +149 -26
- package/dist/ContextMenu/index.d.ts +1 -0
- package/dist/ContextMenu/index.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts +24 -5
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +340 -26
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuItem.js +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts +6 -2
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +43 -14
- package/dist/DropdownMenu/MenuBottomSheet.d.ts +20 -0
- package/dist/DropdownMenu/MenuBottomSheet.d.ts.map +1 -0
- package/dist/DropdownMenu/MenuBottomSheet.js +36 -0
- package/dist/DropdownMenu/MenuBottomSheetActionList.d.ts +10 -0
- package/dist/DropdownMenu/MenuBottomSheetActionList.d.ts.map +1 -0
- package/dist/DropdownMenu/MenuBottomSheetActionList.js +111 -0
- package/dist/DropdownMenu/index.d.ts +2 -1
- package/dist/DropdownMenu/index.d.ts.map +1 -1
- package/dist/DropdownMenu/menuWidth.d.ts +14 -0
- package/dist/DropdownMenu/menuWidth.d.ts.map +1 -0
- package/dist/DropdownMenu/menuWidth.js +35 -0
- package/dist/DropdownMenu/useMenuOverflow.d.ts +10 -0
- package/dist/DropdownMenu/useMenuOverflow.d.ts.map +1 -0
- package/dist/DropdownMenu/useMenuOverflow.js +60 -0
- package/dist/MoreMenu/MoreMenu.d.ts +8 -2
- package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
- package/dist/MoreMenu/MoreMenu.js +2 -0
- package/dist/MultiSelector/MultiSelector.d.ts +11 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +97 -68
- package/dist/MultiSelector/index.d.ts +1 -1
- package/dist/MultiSelector/index.d.ts.map +1 -1
- package/dist/Popover/Popover.d.ts +10 -6
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +141 -16
- package/dist/Popover/usePopover.d.ts +4 -0
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +52 -5
- package/dist/Selector/Selector.d.ts +10 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +106 -80
- package/dist/Selector/SelectorBottomSheet.d.ts +21 -0
- package/dist/Selector/SelectorBottomSheet.d.ts.map +1 -0
- package/dist/Selector/SelectorBottomSheet.js +83 -0
- package/dist/Selector/index.d.ts +1 -1
- package/dist/Selector/index.d.ts.map +1 -1
- package/dist/Selector/selectorPresentation.stylex.d.ts +16 -0
- package/dist/Selector/selectorPresentation.stylex.d.ts.map +1 -0
- package/dist/Selector/selectorPresentation.stylex.js +21 -0
- package/dist/Selector/useSelectorPresentation.d.ts +32 -0
- package/dist/Selector/useSelectorPresentation.d.ts.map +1 -0
- package/dist/Selector/useSelectorPresentation.js +90 -0
- package/dist/Toast/useToastGesture.d.ts.map +1 -1
- package/dist/Toast/useToastGesture.js +46 -9
- package/dist/astryx.css +19 -1
- package/dist/hooks/useAdaptivePresentation.d.ts +5 -0
- package/dist/hooks/useAdaptivePresentation.d.ts.map +1 -0
- package/dist/hooks/useAdaptivePresentation.js +19 -0
- package/dist/hooks/useFocusReturnVisibility.d.ts +7 -0
- package/dist/hooks/useFocusReturnVisibility.d.ts.map +1 -0
- package/dist/hooks/useFocusReturnVisibility.js +35 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +12 -0
- package/dist/i18n/InternationalizationContext.d.ts +2 -0
- package/dist/i18n/InternationalizationContext.d.ts.map +1 -1
- package/dist/i18n/InternationalizationContext.js +3 -1
- package/dist/i18n/InternationalizationProvider.d.ts.map +1 -1
- package/dist/i18n/InternationalizationProvider.js +3 -1
- package/dist/i18n/resolve.d.ts +1 -1
- package/dist/i18n/resolve.d.ts.map +1 -1
- package/dist/i18n/resolve.js +37 -38
- package/dist/i18n/useTranslator.d.ts.map +1 -1
- package/dist/i18n/useTranslator.js +2 -3
- package/locales/af-ZA.json +0 -4
- package/locales/ar-SA.json +0 -4
- package/locales/ca-ES.json +0 -4
- package/locales/cs-CZ.json +0 -4
- package/locales/da-DK.json +0 -4
- package/locales/de-DE.json +0 -4
- package/locales/el-GR.json +0 -4
- package/locales/en.json +20 -0
- package/locales/es-ES.json +0 -4
- package/locales/fi-FI.json +0 -4
- package/locales/fr-FR.json +0 -4
- package/locales/he-IL.json +0 -4
- package/locales/hu-HU.json +0 -4
- package/locales/it-IT.json +0 -4
- package/locales/ja-JP.json +0 -4
- package/locales/ko-KR.json +0 -4
- package/locales/nl-NL.json +0 -4
- package/locales/no-NO.json +0 -4
- package/locales/pl-PL.json +0 -4
- package/locales/pseudo.json +15 -0
- package/locales/pt-BR.json +0 -4
- package/locales/pt-PT.json +0 -4
- package/locales/ro-RO.json +0 -4
- package/locales/ru-RU.json +0 -4
- package/locales/sr-SP.json +0 -4
- package/locales/sv-SE.json +0 -4
- package/locales/tr-TR.json +0 -4
- package/locales/uk-UA.json +0 -4
- package/locales/vi-VN.json +0 -4
- package/locales/zh-CN.json +0 -4
- package/locales/zh-TW.json +0 -4
- package/package.json +3 -3
- package/src/BottomSheet/BottomSheet.doc.mjs +37 -0
- package/src/BottomSheet/BottomSheet.spec.md +177 -0
- package/src/BottomSheet/BottomSheet.test.tsx +29 -0
- package/src/BottomSheet/BottomSheet.tsx +7 -4
- package/src/BottomSheet/BottomSheetEdgeTint.test.tsx +4 -6
- package/src/BottomSheet/BottomSheetEdgeTint.tsx +7 -10
- package/src/BottomSheet/BottomSheetSwitcher.tsx +1 -2
- package/src/Button/Button.doc.mjs +56 -0
- package/src/Button/Button.test.tsx +10 -0
- package/src/Button/Button.tsx +13 -5
- package/src/ButtonGroup/ButtonGroup.doc.mjs +47 -0
- package/src/Calendar/Calendar.doc.mjs +1 -1
- package/src/Carousel/Carousel.test.tsx +83 -0
- package/src/Carousel/Carousel.tsx +8 -2
- package/src/Chat/ChatToolCalls.test.tsx +44 -0
- package/src/Chat/ChatToolCalls.tsx +36 -15
- package/src/CheckboxInput/CheckboxInput.doc.mjs +1 -1
- package/src/CheckboxList/CheckboxList.doc.mjs +173 -32
- package/src/CheckboxList/CheckboxList.spec.md +214 -0
- package/src/CommandPalette/CommandPalette.doc.mjs +72 -0
- package/src/CommandPalette/CommandPalette.spec.md +223 -0
- package/src/ComplexSelector/ComplexSelector.doc.mjs +44 -2
- package/src/ComplexSelector/ComplexSelector.spec.md +189 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +13 -1
- package/src/ContextMenu/ContextMenu.test.tsx +131 -1
- package/src/ContextMenu/ContextMenu.tsx +199 -32
- package/src/ContextMenu/index.ts +1 -0
- package/src/DateInput/DateInput.doc.mjs +1 -1
- package/src/DateRangeInput/DateRangeInput.doc.mjs +1 -1
- package/src/DateTimeInput/DateTimeInput.doc.mjs +1 -1
- package/src/Divider/Divider.doc.mjs +24 -0
- package/src/Divider/Divider.spec.md +150 -0
- package/src/DropdownMenu/DropdownMenu.doc.mjs +201 -40
- package/src/DropdownMenu/DropdownMenu.test.tsx +518 -7
- package/src/DropdownMenu/DropdownMenu.tsx +459 -28
- package/src/DropdownMenu/DropdownMenuContext.tsx +1 -1
- package/src/DropdownMenu/DropdownMenuItem.tsx +2 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs +4 -2
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +124 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +72 -17
- package/src/DropdownMenu/MenuBottomSheet.tsx +46 -0
- package/src/DropdownMenu/MenuBottomSheetActionList.tsx +141 -0
- package/src/DropdownMenu/index.ts +2 -0
- package/src/DropdownMenu/menuWidth.ts +51 -0
- package/src/DropdownMenu/useMenuOverflow.ts +77 -0
- package/src/Field/Field.doc.mjs +1 -1
- package/src/FieldStatus/FieldStatus.doc.mjs +22 -1
- package/src/FieldStatus/FieldStatus.spec.md +212 -0
- package/src/FileInput/FileInput.doc.mjs +1 -1
- package/src/Grid/Grid.doc.mjs +19 -0
- package/src/Grid/Grid.spec.md +161 -0
- package/src/Icon/Icon.doc.mjs +196 -48
- package/src/Icon/Icon.spec.md +191 -0
- package/src/IconButton/IconButton.doc.mjs +38 -0
- package/src/Indicator/Indicator.doc.mjs +1 -1
- package/src/InputGroup/InputGroup.doc.mjs +1 -1
- package/src/Kbd/Kbd.doc.mjs +18 -0
- package/src/Kbd/Kbd.spec.md +141 -0
- package/src/Layout/Layout.doc.mjs +32 -0
- package/src/Layout/Layout.spec.md +199 -0
- package/src/Lightbox/Lightbox.doc.mjs +149 -33
- package/src/Lightbox/Lightbox.spec.md +197 -0
- package/src/Markdown/Markdown.doc.mjs +60 -0
- package/src/Markdown/Markdown.spec.md +200 -0
- package/src/MobileNav/MobileNav.doc.mjs +140 -32
- package/src/MobileNav/MobileNav.spec.md +208 -0
- package/src/MoreMenu/MoreMenu.doc.mjs +17 -0
- package/src/MoreMenu/MoreMenu.test.tsx +47 -0
- package/src/MoreMenu/MoreMenu.tsx +13 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +129 -1
- package/src/MultiSelector/MultiSelector.spec.md +266 -0
- package/src/MultiSelector/MultiSelector.test.tsx +127 -0
- package/src/MultiSelector/MultiSelector.tsx +121 -73
- package/src/MultiSelector/index.ts +1 -0
- package/src/NavIcon/NavIcon.doc.mjs +17 -0
- package/src/NavIcon/NavIcon.spec.md +133 -0
- package/src/NavMenu/NavHeadingMenu.spec.md +205 -0
- package/src/NavMenu/NavMenu.doc.mjs +37 -0
- package/src/NumberInput/NumberInput.doc.mjs +1 -1
- package/src/Outline/Outline.doc.mjs +35 -0
- package/src/Outline/Outline.spec.md +161 -0
- package/src/OverflowList/OverflowList.doc.mjs +24 -0
- package/src/OverflowList/OverflowList.spec.md +156 -0
- package/src/Pagination/Pagination.doc.mjs +74 -0
- package/src/Pagination/Pagination.spec.md +225 -0
- package/src/Popover/Popover.doc.mjs +11 -11
- package/src/Popover/Popover.test.tsx +397 -2
- package/src/Popover/Popover.tsx +228 -21
- package/src/Popover/usePopover.tsx +92 -15
- package/src/PowerSearch/PowerSearch.doc.mjs +1 -1
- package/src/ProgressBar/ProgressBar.doc.mjs +198 -38
- package/src/ProgressBar/ProgressBar.spec.md +260 -0
- package/src/RadioList/RadioList.doc.mjs +1 -1
- package/src/Resizable/Resizable.doc.mjs +59 -16
- package/src/Resizable/Resizable.spec.md +194 -0
- package/src/Section/Section.doc.mjs +17 -0
- package/src/Section/Section.spec.md +138 -0
- package/src/SegmentedControl/SegmentedControl.doc.mjs +83 -0
- package/src/SegmentedControl/SegmentedControl.spec.md +151 -0
- package/src/Selector/Selector.doc.mjs +13 -1
- package/src/Selector/Selector.test.tsx +135 -0
- package/src/Selector/Selector.tsx +141 -82
- package/src/Selector/SelectorBottomSheet.tsx +97 -0
- package/src/Selector/index.ts +1 -0
- package/src/Selector/selectorPresentation.stylex.ts +20 -0
- package/src/Selector/useSelectorPresentation.ts +147 -0
- package/src/Skeleton/Skeleton.doc.mjs +12 -0
- package/src/Skeleton/Skeleton.spec.md +126 -0
- package/src/Slider/Slider.doc.mjs +186 -32
- package/src/Slider/Slider.spec.md +223 -0
- package/src/Stack/Stack.doc.mjs +22 -0
- package/src/Stack/Stack.spec.md +154 -0
- package/src/StatusDot/StatusDot.doc.mjs +17 -0
- package/src/StatusDot/StatusDot.spec.md +137 -0
- package/src/Switch/Switch.doc.mjs +41 -1
- package/src/Switch/Switch.spec.md +174 -0
- package/src/Text/Text.doc.mjs +190 -43
- package/src/Text/Text.spec.md +205 -0
- package/src/TextArea/TextArea.doc.mjs +256 -46
- package/src/TextArea/TextArea.spec.md +204 -0
- package/src/TextInput/TextInput.doc.mjs +1 -1
- package/src/TimeInput/TimeInput.doc.mjs +1 -1
- package/src/Toast/ToastViewport.test.tsx +118 -4
- package/src/Toast/useToastGesture.ts +61 -8
- package/src/ToggleButton/ToggleButton.doc.mjs +56 -0
- package/src/Tokenizer/Tokenizer.doc.mjs +1 -1
- package/src/Toolbar/Toolbar.doc.mjs +19 -0
- package/src/Toolbar/Toolbar.spec.md +173 -0
- package/src/Tooltip/Tooltip.doc.mjs +17 -0
- package/src/Tooltip/Tooltip.spec.md +141 -0
- package/src/TreeList/TreeList.doc.mjs +58 -0
- package/src/TreeList/TreeList.spec.md +220 -0
- package/src/Typeahead/Typeahead.doc.mjs +84 -2
- package/src/Typeahead/Typeahead.spec.md +250 -0
- package/src/hooks/useAdaptivePresentation.ts +35 -0
- package/src/hooks/useFocusReturnVisibility.ts +45 -0
- package/src/hooks/useFocusTrap.test.tsx +40 -0
- package/src/hooks/useFocusTrap.ts +13 -0
- package/src/i18n/InternationalizationContext.ts +3 -0
- package/src/i18n/InternationalizationProvider.tsx +8 -1
- package/src/i18n/__tests__/resolve.test.ts +23 -1
- package/src/i18n/resolve.ts +46 -49
- package/src/i18n/useTranslator.ts +2 -7
- package/src/theme/themingTargets.test.ts +91 -25
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema_version: 1
|
|
3
|
+
template_version: 3
|
|
4
|
+
kind: component
|
|
5
|
+
id: component:Toolbar
|
|
6
|
+
authority: draft
|
|
7
|
+
archive_reason: null
|
|
8
|
+
superseded_by: null
|
|
9
|
+
approved_by: null
|
|
10
|
+
approved_at: null
|
|
11
|
+
owners: [cixzhang]
|
|
12
|
+
review_triggers: [layout, theming, accessibility]
|
|
13
|
+
verified_by:
|
|
14
|
+
[
|
|
15
|
+
packages/core/src/Toolbar/Toolbar.test.tsx,
|
|
16
|
+
packages/core/src/Section/Section.test.tsx,
|
|
17
|
+
packages/core/src/theme/themingTargets.test.ts,
|
|
18
|
+
scripts/check-knowledge.mjs,
|
|
19
|
+
]
|
|
20
|
+
families: [family:layout-regions]
|
|
21
|
+
design_specs: []
|
|
22
|
+
architecture:
|
|
23
|
+
[
|
|
24
|
+
architecture:component-theming-surface,
|
|
25
|
+
architecture:container-padding,
|
|
26
|
+
architecture:public-component-api,
|
|
27
|
+
]
|
|
28
|
+
contributing: []
|
|
29
|
+
system_specs: []
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
# Toolbar component contract
|
|
33
|
+
|
|
34
|
+
## Intent
|
|
35
|
+
|
|
36
|
+
Toolbar presents a named contextual action region with one semantic toolbar row
|
|
37
|
+
inside Section-owned outer chrome. This draft records the current consumer
|
|
38
|
+
anatomy and theming ownership without changing layout, keyboard behavior,
|
|
39
|
+
targets, or public API.
|
|
40
|
+
|
|
41
|
+
## Compatibility and migration
|
|
42
|
+
|
|
43
|
+
- Released default preserved: `yes`
|
|
44
|
+
- Compatibility class: additive documentation only; runtime, DOM, styling,
|
|
45
|
+
targets, and public API remain unchanged
|
|
46
|
+
- Controlled/uncontrolled behavior: not applicable
|
|
47
|
+
- Migration decision: none
|
|
48
|
+
|
|
49
|
+
Consumer migration instructions belong in consumer docs and release notes.
|
|
50
|
+
|
|
51
|
+
## Ownership boundary
|
|
52
|
+
|
|
53
|
+
**Owns**
|
|
54
|
+
|
|
55
|
+
- The named toolbar row, toolbar semantics, start/optional-center/end layout,
|
|
56
|
+
keyboard movement, size cascade, and current `toolbar` target.
|
|
57
|
+
|
|
58
|
+
**Does not own / non-goals**
|
|
59
|
+
|
|
60
|
+
- The painted outer chrome, variant, block padding, and selected divider edges —
|
|
61
|
+
delegated to `component:Section`.
|
|
62
|
+
- Content supplied through the three layout slots — owned by the caller or its
|
|
63
|
+
rendered components.
|
|
64
|
+
- A general arbitrary-child layout primitive contract.
|
|
65
|
+
- New runtime behavior, targets, props, or target placement.
|
|
66
|
+
|
|
67
|
+
## Public concepts
|
|
68
|
+
|
|
69
|
+
No new public concept is introduced. Consumer props, slots, and usage remain
|
|
70
|
+
documented in `Toolbar.doc.mjs`; `family:layout-regions` owns the shared
|
|
71
|
+
structural-region boundary.
|
|
72
|
+
|
|
73
|
+
## Behavioral and layout contract
|
|
74
|
+
|
|
75
|
+
| ID | Candidate invariant | Basis | Draft review state |
|
|
76
|
+
| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | -------------------------------------------------- |
|
|
77
|
+
| FR1 | The current render contains Section-owned Outer chrome around one named Toolbar carrying `role="toolbar"` and the current `toolbar` target. | Current source, docs, tests, and family | Verified current behavior; no new behavior decided |
|
|
78
|
+
| FR2 | The Toolbar uses its current two-lane layout without center content and its current three-lane layout when center content is supplied. | Current source and focused structure tests | Verified current behavior; no layout change |
|
|
79
|
+
| FR3 | Variant, selected divider edges, and outer padding remain delegated to Section, while Toolbar retains toolbar semantics, keyboard behavior, and internal layout. | Current source, docs, and family contract | Verified current ownership; no target change |
|
|
80
|
+
|
|
81
|
+
### Allowed variation
|
|
82
|
+
|
|
83
|
+
- Caller content may be absent or supplied in the start, center, and end slots
|
|
84
|
+
without changing Outer chrome or Toolbar ownership.
|
|
85
|
+
- Size and orientation may change the current row geometry and keyboard axis
|
|
86
|
+
without creating separate anatomy parts or targets.
|
|
87
|
+
|
|
88
|
+
### Representative states
|
|
89
|
+
|
|
90
|
+
| State | Required invariant | Allowed variation |
|
|
91
|
+
| ----------------- | ------------------------------------------------------- | --------------------------------------------------- |
|
|
92
|
+
| Empty toolbar | Outer chrome and named Toolbar remain rendered. | No caller slot content. |
|
|
93
|
+
| Two-lane layout | Start and/or end content use the current flex layout. | Either lane may be absent. |
|
|
94
|
+
| Three-lane layout | Center content selects the current three-column layout. | Start or end content may be absent. |
|
|
95
|
+
| Vertical toolbar | Toolbar semantics and target remain unchanged. | Layout and keyboard movement use the vertical axis. |
|
|
96
|
+
|
|
97
|
+
### Transformation and precedence order
|
|
98
|
+
|
|
99
|
+
- No new slot, layout, edge-compensation, padding, or event precedence rule is
|
|
100
|
+
introduced.
|
|
101
|
+
|
|
102
|
+
### Performance and resources
|
|
103
|
+
|
|
104
|
+
- No new performance or resource rule is introduced.
|
|
105
|
+
|
|
106
|
+
## Accessibility contract
|
|
107
|
+
|
|
108
|
+
This draft does not change or extend Toolbar's current accessible name,
|
|
109
|
+
orientation, roving-tabindex, keyboard-hint, caret-guard, or event-composition
|
|
110
|
+
behavior.
|
|
111
|
+
|
|
112
|
+
## Design relationships
|
|
113
|
+
|
|
114
|
+
| Anatomy or state | Design requirement | Representation authority | Hierarchy role | Component contract |
|
|
115
|
+
| ---------------- | -------------------------------------------------------------------------------- | ----------------------------------------- | -------------- | ------------------ |
|
|
116
|
+
| Outer chrome | Supplies the painted surface, padding, and selected boundaries around the row. | `component:Section` | Supporting | FR1, FR3 |
|
|
117
|
+
| Toolbar | Presents the named toolbar semantics and current two- or three-lane arrangement. | Current source, docs, and family contract | Prominent | FR1, FR2, FR3 |
|
|
118
|
+
|
|
119
|
+
The slot contents are caller-owned content inside Toolbar's layout. They do not
|
|
120
|
+
become additional Toolbar-owned anatomy or targets.
|
|
121
|
+
|
|
122
|
+
### Theming anatomy
|
|
123
|
+
|
|
124
|
+
<!-- anatomy-theming:v1 -->
|
|
125
|
+
|
|
126
|
+
```json
|
|
127
|
+
{
|
|
128
|
+
"Outer chrome": {
|
|
129
|
+
"delegatesTo": {"owner": "component:Section", "target": "section"}
|
|
130
|
+
},
|
|
131
|
+
"Toolbar": {"target": "toolbar"}
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Family and system relationships
|
|
136
|
+
|
|
137
|
+
- `family:layout-regions` owns the structural-region vocabulary and records
|
|
138
|
+
Toolbar as a Section-backed contextual action region.
|
|
139
|
+
- `architecture:container-padding` owns the inherited inset and edge-compensation
|
|
140
|
+
geometry used by the composed Section and Toolbar.
|
|
141
|
+
- `architecture:component-theming-surface` owns anatomy qualification, local
|
|
142
|
+
target mapping, and component delegation.
|
|
143
|
+
- `architecture:public-component-api` owns the stable prop and slot surface; this
|
|
144
|
+
documentation adds no API.
|
|
145
|
+
|
|
146
|
+
## Verification map
|
|
147
|
+
|
|
148
|
+
| Contract | Verification | Representative states | Mutation or failure expectation | Audit section |
|
|
149
|
+
| ------------------- | --------------------------------------------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------- |
|
|
150
|
+
| FR1 | `Toolbar.test.tsx` role, name, pass-through, and Section suites | Empty and populated Toolbar | Removing the role/name, Toolbar target, Section composition, or delegated Section target fails current evidence. | `audit:Toolbar/anatomy` |
|
|
151
|
+
| FR2 | `Toolbar.test.tsx` slot and child-count suites | Start-only, end-only, two-lane, and three-lane | Changing current slot presence or two-/three-lane structure fails focused assertions. | `audit:Toolbar/layout` |
|
|
152
|
+
| FR3 | Toolbar and Section source plus their focused tests | Variant, divider, size, and orientation states | Moving outer chrome ownership into Toolbar or moving toolbar semantics onto Section contradicts source and coverage. | `audit:Toolbar/theming` |
|
|
153
|
+
| Target inventory | `packages/core/src/theme/themingTargets.test.ts` | Toolbar and delegated Section targets | Runtime and documented target metadata drift fails target validation. | `audit:Toolbar/theming` |
|
|
154
|
+
| Theming anatomy map | `scripts/check-knowledge.mjs` | Canonical anatomy and current local target | Missing, extra, prefixed, or stale mappings fail repository validation. | `audit:Toolbar/theming` |
|
|
155
|
+
|
|
156
|
+
Existing tests assert the semantic row, slot structure, and Section composition.
|
|
157
|
+
They do not prove computed inset or edge-compensation geometry for every parent
|
|
158
|
+
padding state; this documentation does not claim that coverage.
|
|
159
|
+
|
|
160
|
+
## Decision log
|
|
161
|
+
|
|
162
|
+
None. This draft records current facts and introduces no component-local design,
|
|
163
|
+
layout, accessibility, or API decision.
|
|
164
|
+
|
|
165
|
+
## Open questions
|
|
166
|
+
|
|
167
|
+
None.
|
|
168
|
+
|
|
169
|
+
## Content boundary
|
|
170
|
+
|
|
171
|
+
This file does not duplicate consumer prop tables, examples, family layout
|
|
172
|
+
rules, container-padding mechanics, keyboard algorithms, implementation steps,
|
|
173
|
+
or system rules. It links to their owners.
|
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
+
/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
|
|
4
|
+
const anatomy = [
|
|
5
|
+
{
|
|
6
|
+
name: 'Tooltip surface',
|
|
7
|
+
required: true,
|
|
8
|
+
description: 'Painted overlay surface that presents the tooltip.',
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: 'Tooltip text',
|
|
12
|
+
required: true,
|
|
13
|
+
description: 'Tooltip content rendered within the surface.',
|
|
14
|
+
},
|
|
15
|
+
];
|
|
16
|
+
|
|
3
17
|
/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
|
|
4
18
|
|
|
5
19
|
export const docs = {
|
|
@@ -110,6 +124,7 @@ export const docs = {
|
|
|
110
124
|
],
|
|
111
125
|
},
|
|
112
126
|
usage: {
|
|
127
|
+
anatomy,
|
|
113
128
|
description:
|
|
114
129
|
'A short text hint that appears on hover or focus, anchored to a trigger element. Use it to describe icon-only buttons, show the full text of truncated labels, or provide supplementary context without cluttering the UI.',
|
|
115
130
|
bestPractices: [
|
|
@@ -217,6 +232,7 @@ export const docsZh = {
|
|
|
217
232
|
],
|
|
218
233
|
},
|
|
219
234
|
usage: {
|
|
235
|
+
anatomy,
|
|
220
236
|
description:
|
|
221
237
|
'A short text hint that appears on hover or focus, anchored to a trigger element. Use it to describe icon-only buttons, show the full text of truncated labels, or provide supplementary context without cluttering the UI.',
|
|
222
238
|
bestPractices: [
|
|
@@ -233,6 +249,7 @@ export const docsZh = {
|
|
|
233
249
|
export const docsDense = {
|
|
234
250
|
description: 'Hover/focus triggered tooltip for displaying short, non-interactive text anchored to trigger element.',
|
|
235
251
|
usage: {
|
|
252
|
+
anatomy,
|
|
236
253
|
description:
|
|
237
254
|
'A short text hint that appears on hover or focus, anchored to a trigger element. Use it to describe icon-only buttons, show the full text of truncated labels, or provide supplementary context without cluttering the UI.',
|
|
238
255
|
bestPractices: [
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema_version: 1
|
|
3
|
+
template_version: 3
|
|
4
|
+
kind: component
|
|
5
|
+
id: component:Tooltip
|
|
6
|
+
authority: draft
|
|
7
|
+
archive_reason: null
|
|
8
|
+
superseded_by: null
|
|
9
|
+
approved_by: null
|
|
10
|
+
approved_at: null
|
|
11
|
+
owners: [cixzhang]
|
|
12
|
+
review_triggers: [theming]
|
|
13
|
+
verified_by:
|
|
14
|
+
[packages/core/src/Tooltip/Tooltip.test.tsx, scripts/check-knowledge.mjs]
|
|
15
|
+
families: [family:overlay-dismissal]
|
|
16
|
+
design_specs: []
|
|
17
|
+
architecture:
|
|
18
|
+
[
|
|
19
|
+
architecture:component-theming-surface,
|
|
20
|
+
architecture:interaction-modality,
|
|
21
|
+
architecture:layer-runtime,
|
|
22
|
+
architecture:public-component-api,
|
|
23
|
+
]
|
|
24
|
+
contributing: []
|
|
25
|
+
system_specs: []
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
# Tooltip component contract
|
|
29
|
+
|
|
30
|
+
## Intent
|
|
31
|
+
|
|
32
|
+
Tooltip renders supplied tooltip content on an owned overlay surface associated
|
|
33
|
+
with a caller-owned trigger. This draft records current consumer anatomy and
|
|
34
|
+
theming ownership without deciding layer behavior, positioning, or new visual
|
|
35
|
+
parts.
|
|
36
|
+
|
|
37
|
+
## Compatibility and migration
|
|
38
|
+
|
|
39
|
+
- Released default preserved: `yes`
|
|
40
|
+
- Compatibility class: additive documentation only; runtime, DOM, styling,
|
|
41
|
+
targets, and public API remain unchanged
|
|
42
|
+
- Controlled/uncontrolled behavior: unchanged
|
|
43
|
+
- Migration decision: none
|
|
44
|
+
|
|
45
|
+
Consumer migration instructions belong in consumer docs and release notes.
|
|
46
|
+
|
|
47
|
+
## Ownership boundary
|
|
48
|
+
|
|
49
|
+
**Owns**
|
|
50
|
+
|
|
51
|
+
- The rendered tooltip surface and content inside that surface.
|
|
52
|
+
|
|
53
|
+
**Does not own / non-goals**
|
|
54
|
+
|
|
55
|
+
- The trigger element — supplied by the caller or referenced externally and
|
|
56
|
+
outside Tooltip's owned anatomy.
|
|
57
|
+
- An arrow element — the current implementation renders none.
|
|
58
|
+
- Layer lifecycle, light dismissal, and anchor-positioning policy — outside this
|
|
59
|
+
factual anatomy backfill.
|
|
60
|
+
|
|
61
|
+
## Public concepts
|
|
62
|
+
|
|
63
|
+
No new public concept is introduced. Consumer props and usage remain documented
|
|
64
|
+
in `Tooltip.doc.mjs` and `useTooltip.doc.mjs`.
|
|
65
|
+
|
|
66
|
+
## Behavioral and layout contract
|
|
67
|
+
|
|
68
|
+
| ID | Candidate invariant | Basis | Draft review state |
|
|
69
|
+
| --- | ---------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------- |
|
|
70
|
+
| FR1 | The current rendered tooltip contains one owned surface with the supplied tooltip content inside it. | Current source, docs, and tests | Verified current behavior; no new behavior decided |
|
|
71
|
+
| FR2 | The surface carries the current `tooltip` target; its content has no separate target. | Current source and public docs | Verified current behavior; no target change |
|
|
72
|
+
|
|
73
|
+
### Allowed variation
|
|
74
|
+
|
|
75
|
+
- Supplied content may vary without adding a Tooltip-owned child target.
|
|
76
|
+
|
|
77
|
+
### Representative states
|
|
78
|
+
|
|
79
|
+
- The owned anatomy is unchanged across wrapped-trigger and external-anchor
|
|
80
|
+
modes; the trigger remains outside it.
|
|
81
|
+
|
|
82
|
+
### Transformation and precedence order
|
|
83
|
+
|
|
84
|
+
- No new ordering or positioning rule is introduced.
|
|
85
|
+
|
|
86
|
+
### Performance and resources
|
|
87
|
+
|
|
88
|
+
- No new performance or resource rule is introduced.
|
|
89
|
+
|
|
90
|
+
## Accessibility contract
|
|
91
|
+
|
|
92
|
+
This draft does not change or extend Tooltip's existing accessibility behavior.
|
|
93
|
+
|
|
94
|
+
## Design relationships
|
|
95
|
+
|
|
96
|
+
| Anatomy or state | Design requirement | Representation authority | Hierarchy role | Component contract |
|
|
97
|
+
| ---------------- | --------------------------------------------------- | ------------------------------ | -------------- | ------------------ |
|
|
98
|
+
| Tooltip surface | Presents the current painted overlay surface. | Current source and public docs | Supporting | FR1, FR2 |
|
|
99
|
+
| Tooltip text | Presents supplied content within the owned surface. | Current source and public docs | Prominent | FR1, FR2 |
|
|
100
|
+
|
|
101
|
+
The trigger is caller-owned and outside this anatomy. The current implementation
|
|
102
|
+
has no arrow element.
|
|
103
|
+
|
|
104
|
+
### Theming anatomy
|
|
105
|
+
|
|
106
|
+
<!-- anatomy-theming:v1 -->
|
|
107
|
+
|
|
108
|
+
```json
|
|
109
|
+
{
|
|
110
|
+
"Tooltip surface": {"target": "tooltip"},
|
|
111
|
+
"Tooltip text": {"inherits": "tooltip"}
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Family and system relationships
|
|
116
|
+
|
|
117
|
+
This draft references the current shared owners without restating their rules:
|
|
118
|
+
`architecture:component-theming-surface`, `family:overlay-dismissal`,
|
|
119
|
+
`architecture:interaction-modality`, `architecture:layer-runtime`, and
|
|
120
|
+
`architecture:public-component-api`.
|
|
121
|
+
|
|
122
|
+
## Verification map
|
|
123
|
+
|
|
124
|
+
| Contract | Verification | Representative states | Mutation or failure expectation | Audit section |
|
|
125
|
+
| ------------------- | ------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------- | ----------------------- |
|
|
126
|
+
| FR1 | `Tooltip.test.tsx` role/content suite | Rendered surface and supplied content | Removing the surface or content fails existing tooltip role and text assertions. | `audit:Tooltip/anatomy` |
|
|
127
|
+
| Theming anatomy map | `scripts/check-knowledge.mjs` | Canonical anatomy and current target | Missing, extra, prefixed, or stale mappings fail repository validation. | `audit:Tooltip/theming` |
|
|
128
|
+
|
|
129
|
+
## Decision log
|
|
130
|
+
|
|
131
|
+
None. This draft records current facts and introduces no component-local design
|
|
132
|
+
or layer-system decision.
|
|
133
|
+
|
|
134
|
+
## Open questions
|
|
135
|
+
|
|
136
|
+
None.
|
|
137
|
+
|
|
138
|
+
## Content boundary
|
|
139
|
+
|
|
140
|
+
This file does not duplicate consumer prop tables, examples, layer-system rules,
|
|
141
|
+
implementation steps, or system rules. It links to their owners.
|
|
@@ -1,5 +1,60 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
+
/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
|
|
4
|
+
const anatomy = [
|
|
5
|
+
{
|
|
6
|
+
name: 'Tree list',
|
|
7
|
+
required: true,
|
|
8
|
+
description: 'Container that presents the hierarchical tree.',
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: 'Header',
|
|
12
|
+
required: false,
|
|
13
|
+
description: 'Caller-provided content that visibly names the tree.',
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
name: 'Item',
|
|
17
|
+
required: true,
|
|
18
|
+
description: 'Painted row for one node in the hierarchy.',
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: 'Chevron',
|
|
22
|
+
required: false,
|
|
23
|
+
description:
|
|
24
|
+
'Expand and collapse control rendered for an Item with children.',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: 'Chevron glyph',
|
|
28
|
+
required: false,
|
|
29
|
+
description: 'Directional symbol rendered by Icon inside a Chevron.',
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: 'Item label',
|
|
33
|
+
required: true,
|
|
34
|
+
description: 'Primary content that identifies an Item.',
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: 'Item description',
|
|
38
|
+
required: false,
|
|
39
|
+
description: 'Secondary text rendered below an Item label.',
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: 'Start content',
|
|
43
|
+
required: false,
|
|
44
|
+
description: 'Caller-provided content rendered before an Item label.',
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: 'End content',
|
|
48
|
+
required: false,
|
|
49
|
+
description: 'Caller-provided content rendered after an Item label.',
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
name: 'Guide',
|
|
53
|
+
required: false,
|
|
54
|
+
description: 'Connector line that shows parent-child relationships.',
|
|
55
|
+
},
|
|
56
|
+
];
|
|
57
|
+
|
|
3
58
|
/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
|
|
4
59
|
|
|
5
60
|
export const docs = {
|
|
@@ -79,6 +134,7 @@ export const docs = {
|
|
|
79
134
|
},
|
|
80
135
|
],
|
|
81
136
|
usage: {
|
|
137
|
+
anatomy,
|
|
82
138
|
description:
|
|
83
139
|
'An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes parent-child relationships.',
|
|
84
140
|
bestPractices: [
|
|
@@ -158,6 +214,7 @@ export const docsZh = {
|
|
|
158
214
|
},
|
|
159
215
|
],
|
|
160
216
|
usage: {
|
|
217
|
+
anatomy,
|
|
161
218
|
description:
|
|
162
219
|
'An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes parent-child relationships.',
|
|
163
220
|
bestPractices: [
|
|
@@ -175,6 +232,7 @@ export const docsDense = {
|
|
|
175
232
|
description:
|
|
176
233
|
'Data-driven tree list for hierarchical data w/ expand/collapse, branch lines, interactive items. Flat items array w/ recursive children, no composition, no cloneElement.',
|
|
177
234
|
usage: {
|
|
235
|
+
anatomy,
|
|
178
236
|
description:
|
|
179
237
|
'An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes parent-child relationships.',
|
|
180
238
|
bestPractices: [
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema_version: 1
|
|
3
|
+
template_version: 3
|
|
4
|
+
kind: component
|
|
5
|
+
id: component:TreeList
|
|
6
|
+
authority: draft
|
|
7
|
+
archive_reason: null
|
|
8
|
+
superseded_by: null
|
|
9
|
+
approved_by: null
|
|
10
|
+
approved_at: null
|
|
11
|
+
owners: [cixzhang]
|
|
12
|
+
review_triggers: [behavior, theming, accessibility]
|
|
13
|
+
verified_by:
|
|
14
|
+
[
|
|
15
|
+
packages/core/src/TreeList/TreeList.test.tsx,
|
|
16
|
+
packages/core/src/theme/themingTargets.test.ts,
|
|
17
|
+
scripts/check-knowledge.mjs,
|
|
18
|
+
]
|
|
19
|
+
families: []
|
|
20
|
+
design_specs: []
|
|
21
|
+
architecture:
|
|
22
|
+
[
|
|
23
|
+
architecture:component-theming-surface,
|
|
24
|
+
architecture:interaction-modality,
|
|
25
|
+
architecture:public-component-api,
|
|
26
|
+
]
|
|
27
|
+
contributing: []
|
|
28
|
+
system_specs: []
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
# TreeList component contract
|
|
32
|
+
|
|
33
|
+
## Intent
|
|
34
|
+
|
|
35
|
+
TreeList presents hierarchical data as expandable tree rows. This draft records
|
|
36
|
+
its current consumer anatomy, target ownership, delegated Icon glyph, and
|
|
37
|
+
unreached stable parts without changing runtime behavior, styling, targets, or
|
|
38
|
+
public API.
|
|
39
|
+
|
|
40
|
+
## Compatibility and migration
|
|
41
|
+
|
|
42
|
+
- Released default preserved: `yes`
|
|
43
|
+
- Compatibility class: additive documentation only; runtime, DOM, styling,
|
|
44
|
+
targets, aliases, and public API remain unchanged
|
|
45
|
+
- Controlled/uncontrolled behavior: unchanged
|
|
46
|
+
- Migration decision: none
|
|
47
|
+
|
|
48
|
+
Consumer migration instructions belong in consumer docs and release notes.
|
|
49
|
+
|
|
50
|
+
## Ownership boundary
|
|
51
|
+
|
|
52
|
+
**Owns**
|
|
53
|
+
|
|
54
|
+
- The Tree list, Item, Chevron, Item label, and Guide parts and their five current
|
|
55
|
+
targets.
|
|
56
|
+
- The stable Item description rendered below an Item label.
|
|
57
|
+
- Hierarchical placement, indentation, expansion, selection, and tree semantics.
|
|
58
|
+
|
|
59
|
+
**Does not own / non-goals**
|
|
60
|
+
|
|
61
|
+
- The Chevron glyph artwork and Icon target — owned by `component:Icon`.
|
|
62
|
+
- Header, Start content, and End content supplied through consumer slots — owned
|
|
63
|
+
by the product callsite.
|
|
64
|
+
- New targets for Item description or caller-provided slots — unresolved by this
|
|
65
|
+
factual backfill.
|
|
66
|
+
|
|
67
|
+
## Public concepts
|
|
68
|
+
|
|
69
|
+
No new public concept is introduced. Consumer data, props, slots, and usage
|
|
70
|
+
remain documented in `TreeList.doc.mjs`.
|
|
71
|
+
|
|
72
|
+
## Behavioral and layout contract
|
|
73
|
+
|
|
74
|
+
| ID | Candidate invariant | Basis | Draft review state |
|
|
75
|
+
| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------- |
|
|
76
|
+
| FR1 | The current render contains one Tree list, one Item and Item label per rendered node, optional Header, Chevron, Item description, Start content, End content, and Guide parts, and delegated Chevron glyphs. | Current source, docs, and tests | Verified current behavior; no new behavior decided |
|
|
77
|
+
| FR2 | Tree list, Item, Chevron, Item label, and Guide carry the five current `tree-list*` targets documented below. | Current source and target docs | Verified current inventory; focused placement coverage is partial |
|
|
78
|
+
| FR3 | Chevron glyph delegates to Icon's `icon` target. Header, Start content, and End content are consumer-owned and have no TreeList target. | Current source and component docs | Verified current ownership; no target change |
|
|
79
|
+
| FR4 | Item description is a stable library-rendered part below Item label and currently has no public target. It does not inherit through `tree-list-item-label`; both spans are siblings inside the row content. | Current source and target docs | Verified current reachability; long-term theming intent remains unsettled |
|
|
80
|
+
|
|
81
|
+
### Allowed variation
|
|
82
|
+
|
|
83
|
+
- **AV1 — Hierarchy.** Item count, depth, expansion, selection, density, and guide
|
|
84
|
+
visibility may vary without changing the anatomy ownership recorded here.
|
|
85
|
+
- **AV2 — Consumer content.** Header, Start content, End content, Item label
|
|
86
|
+
values, and descriptions may vary without making caller-owned slot content a
|
|
87
|
+
TreeList target.
|
|
88
|
+
- **AV3 — Delegated glyph.** Icon may change the Chevron glyph's internal element
|
|
89
|
+
shape while preserving its own public contract.
|
|
90
|
+
|
|
91
|
+
### Representative states
|
|
92
|
+
|
|
93
|
+
| State | Required invariant | Allowed variation |
|
|
94
|
+
| ------------------------ | ----------------------------------------------------- | --------------------------------------------- |
|
|
95
|
+
| Empty tree | Tree list remains; no Item instances render. | Optional Header content. |
|
|
96
|
+
| Flat items | Each Item contains an Item label. | Description and consumer slots may be absent. |
|
|
97
|
+
| Expandable item | Item may contain Chevron and delegated Chevron glyph. | Expanded or collapsed state. |
|
|
98
|
+
| Nested `lineGuides` tree | Guide instances show parent-child relationships. | Count and position follow hierarchy. |
|
|
99
|
+
| `noGuides` tree | Guide instances are absent; indentation remains. | All other anatomy remains unchanged. |
|
|
100
|
+
| Described item | Item description renders below Item label. | Caller-provided description text. |
|
|
101
|
+
|
|
102
|
+
### Transformation and precedence order
|
|
103
|
+
|
|
104
|
+
- No new hierarchy, focus, expansion, layout, or styling precedence rule is
|
|
105
|
+
introduced.
|
|
106
|
+
|
|
107
|
+
### Performance and resources
|
|
108
|
+
|
|
109
|
+
- No new performance or resource rule is introduced.
|
|
110
|
+
|
|
111
|
+
## Accessibility contract
|
|
112
|
+
|
|
113
|
+
This draft does not change or extend TreeList's current tree, treeitem, group,
|
|
114
|
+
roving-focus, expansion, selection, disabled, or activation behavior.
|
|
115
|
+
|
|
116
|
+
## Design relationships
|
|
117
|
+
|
|
118
|
+
| Anatomy or state | Design requirement | Representation authority | Hierarchy role | Component contract |
|
|
119
|
+
| ---------------- | -------------------------------------------------------------------- | ------------------------------ | ----------------- | ------------------ |
|
|
120
|
+
| Tree list | Groups the hierarchical tree and owns its density and guide variant. | Current source and public docs | Supporting | FR1, FR2 |
|
|
121
|
+
| Header | Visibly names the tree with caller-provided content. | Caller-supplied content | Prominent | FR1, FR3 |
|
|
122
|
+
| Item | Paints one row and reflects density, selection, and disabled state. | Current source and public docs | Prominent | FR1, FR2 |
|
|
123
|
+
| Chevron | Provides the expand and collapse control for an Item with children. | Current source and public docs | Supporting | FR1, FR2 |
|
|
124
|
+
| Chevron glyph | Presents the current directional symbol inside Chevron. | `component:Icon` | Supporting | FR1, FR3 |
|
|
125
|
+
| Item label | Presents the primary content that identifies an Item. | Current source and public docs | Prominent | FR1, FR2 |
|
|
126
|
+
| Item description | Presents stable secondary text below Item label. | Current source and public docs | Supporting | FR1, FR4 |
|
|
127
|
+
| Start content | Presents caller-provided content before Item label. | Caller-supplied content | Context-dependent | FR1, FR3 |
|
|
128
|
+
| End content | Presents caller-provided content after Item label. | Caller-supplied content | Context-dependent | FR1, FR3 |
|
|
129
|
+
| Guide | Paints a connector between related hierarchy levels. | Current source and public docs | Supporting | FR1, FR2 |
|
|
130
|
+
|
|
131
|
+
Item description is stable TreeList-rendered anatomy, not consumer-owned slot
|
|
132
|
+
structure. Its current lack of a target is observed reachability, not a decision
|
|
133
|
+
that it must remain unthemeable. Header, Start content, and End content remain
|
|
134
|
+
caller-owned even though TreeList positions their slot wrappers.
|
|
135
|
+
|
|
136
|
+
### Theming anatomy
|
|
137
|
+
|
|
138
|
+
<!-- anatomy-theming:v1 -->
|
|
139
|
+
|
|
140
|
+
```json
|
|
141
|
+
{
|
|
142
|
+
"Tree list": {"target": "tree-list"},
|
|
143
|
+
"Header": {
|
|
144
|
+
"none": {
|
|
145
|
+
"reason": "intentional: Header is caller-provided content outside TreeList's public theming ownership"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
"Item": {"target": "tree-list-item"},
|
|
149
|
+
"Chevron": {"target": "tree-list-chevron"},
|
|
150
|
+
"Chevron glyph": {
|
|
151
|
+
"delegatesTo": {"owner": "component:Icon", "target": "icon"}
|
|
152
|
+
},
|
|
153
|
+
"Item label": {"target": "tree-list-item-label"},
|
|
154
|
+
"Item description": {
|
|
155
|
+
"none": {
|
|
156
|
+
"reason": "unsettled: No current public target reaches the stable Item description; future exposure still needs an owner decision"
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
"Start content": {
|
|
160
|
+
"none": {
|
|
161
|
+
"reason": "intentional: Start content is caller-provided content outside TreeList's public theming ownership"
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
"End content": {
|
|
165
|
+
"none": {
|
|
166
|
+
"reason": "intentional: End content is caller-provided content outside TreeList's public theming ownership"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
"Guide": {"target": "tree-list-guide"}
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
The five local targets are current public seams. The Chevron glyph retains Icon
|
|
174
|
+
ownership. Consumer-slot `none` dispositions are ownership boundaries; Item
|
|
175
|
+
description's `none` disposition records a current audit gap and does not
|
|
176
|
+
authorize a new target.
|
|
177
|
+
|
|
178
|
+
## Family and system relationships
|
|
179
|
+
|
|
180
|
+
- `architecture:component-theming-surface` owns anatomy qualification, target
|
|
181
|
+
mapping, delegation, and factual `none` dispositions.
|
|
182
|
+
- `architecture:public-component-api` owns the stable data, props, and slot
|
|
183
|
+
surface; this documentation adds no API.
|
|
184
|
+
- `architecture:interaction-modality` owns shared keyboard and pointer modality;
|
|
185
|
+
TreeList continues to own its existing tree focus and activation behavior.
|
|
186
|
+
- TreeList has no current family contract, and no unresolved family or runtime
|
|
187
|
+
record identifier is included.
|
|
188
|
+
|
|
189
|
+
## Verification map
|
|
190
|
+
|
|
191
|
+
| Contract | Verification | Representative states | Mutation or failure expectation | Audit section |
|
|
192
|
+
| ------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
|
|
193
|
+
| FR1 | `TreeList.test.tsx` rendering, hierarchy, slot, and accessibility suites plus source inspection | Flat, nested, described, headed, and slotted items | Removing asserted Tree list, Header, Item, Chevron, Item label, Item description, Start content, End content, or Guide behavior fails existing role, content, hierarchy, or state assertions; Chevron glyph presence remains source-inspected only. | `audit:TreeList/anatomy` |
|
|
194
|
+
| FR2 | `TreeList.test.tsx` and `themingTargets.test.ts` | Five local targets and their documented states | Removing or moving any current local target fails focused class assertions or the global inventory. | `audit:TreeList/theming` |
|
|
195
|
+
| FR3 | Source inspection plus Icon public target metadata | Expandable rows and caller-provided slots | Existing focused tests do not assert the composed Icon instance; changing glyph or slot ownership requires this map and the relevant owner metadata to change. | `audit:TreeList/theming` |
|
|
196
|
+
| FR4 | `TreeList.test.tsx` description rendering test and source inspection | Item with description | Removing description fails content coverage; adding a target requires an explicit map update. | `audit:TreeList/anatomy` |
|
|
197
|
+
| Theming anatomy map | `scripts/check-knowledge.mjs` | Canonical anatomy and five current local targets | Missing, extra, prefixed, stale, or alias-backed mappings fail repository validation. | `audit:TreeList/theming` |
|
|
198
|
+
|
|
199
|
+
Focused target-placement assertions cover all five local targets: Tree list,
|
|
200
|
+
Item, Chevron, Item label, and Guide. Existing tests do not assert the Icon
|
|
201
|
+
instance that renders Chevron glyph.
|
|
202
|
+
|
|
203
|
+
## Decision log
|
|
204
|
+
|
|
205
|
+
None. This draft records current facts and introduces no component-local design,
|
|
206
|
+
API, behavior, or theming decision.
|
|
207
|
+
|
|
208
|
+
## Open questions
|
|
209
|
+
|
|
210
|
+
- **OQ1 — Should Item description gain a stable public theming target?**
|
|
211
|
+
(`human-api`) Its current lack of reachability is an audit gap, not settled
|
|
212
|
+
intent.
|
|
213
|
+
- **OQ2 — Should a focused test pin the delegated Chevron glyph's Icon
|
|
214
|
+
instance?** (`checkable`) Its presence is currently source-inspected rather
|
|
215
|
+
than asserted.
|
|
216
|
+
|
|
217
|
+
## Content boundary
|
|
218
|
+
|
|
219
|
+
This file does not duplicate consumer prop tables/examples, shared modality
|
|
220
|
+
rules, current audit results, or implementation steps. It links to their owners.
|