@astryxdesign/core 0.7.1 → 0.7.2-canary.020e1fe
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/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +40 -1
- package/dist/AspectRatio/AspectRatio.d.ts +6 -8
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +44 -3
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +5 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +38 -14
- package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +3 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts +9 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +4 -2
- package/dist/CommandPalette/CommandPaletteInput.d.ts +1 -1
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +37 -5
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +5 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +20 -8
- package/dist/Drawer/Drawer.d.ts +191 -0
- package/dist/Drawer/Drawer.d.ts.map +1 -0
- package/dist/Drawer/Drawer.js +382 -0
- package/dist/Drawer/DrawerHeader.d.ts +85 -0
- package/dist/Drawer/DrawerHeader.d.ts.map +1 -0
- package/dist/Drawer/DrawerHeader.js +134 -0
- package/dist/Drawer/index.d.ts +11 -0
- package/dist/Drawer/index.d.ts.map +1 -0
- package/dist/Drawer/index.js +11 -0
- package/dist/Drawer/useDrawerDialogPresence.d.ts +42 -0
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -0
- package/dist/Drawer/useDrawerDialogPresence.js +236 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +83 -11
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -0
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.js +21 -0
- package/dist/DropdownMenu/DropdownMenuDivider.d.ts +5 -3
- package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuDivider.js +7 -3
- package/dist/DropdownMenu/DropdownMenuGroup.d.ts +6 -4
- package/dist/DropdownMenu/DropdownMenuGroup.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuGroup.js +4 -3
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +19 -8
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts +24 -0
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts.map +1 -0
- package/dist/DropdownMenu/lazyMenuBottomSheet.js +46 -0
- package/dist/EmptyState/EmptyState.d.ts.map +1 -1
- package/dist/EmptyState/EmptyState.js +4 -10
- package/dist/Field/Field.d.ts +1 -1
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +8 -4
- package/dist/Grid/GridSpan.d.ts.map +1 -1
- package/dist/Grid/GridSpan.js +1 -0
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +4 -2
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +10 -2
- package/dist/Item/Item.d.ts +6 -2
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +19 -4
- package/dist/Layer/layerViewportInset.stylex.d.ts +6 -2
- package/dist/Layer/layerViewportInset.stylex.d.ts.map +1 -1
- package/dist/Layer/layerViewportInset.stylex.js +6 -2
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +13 -7
- package/dist/Layer/useLayerDismissal.d.ts +1 -1
- package/dist/Layer/useLayerDismissal.js +1 -1
- package/dist/Layout/container.stylex.d.ts +5 -5
- package/dist/Layout/container.stylex.js +4 -4
- package/dist/List/List.d.ts +46 -19
- package/dist/List/List.d.ts.map +1 -1
- package/dist/List/List.js +28 -10
- package/dist/List/ListContext.d.ts +8 -3
- package/dist/List/ListContext.d.ts.map +1 -1
- package/dist/List/ListContext.js +7 -2
- package/dist/List/ListItem.d.ts +13 -5
- package/dist/List/ListItem.d.ts.map +1 -1
- package/dist/List/ListItem.js +21 -8
- package/dist/List/index.d.ts +1 -1
- package/dist/List/index.d.ts.map +1 -1
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +8 -1
- package/dist/Markdown/plugins/frontmatter.d.ts.map +1 -1
- package/dist/Markdown/plugins/frontmatter.js +7 -3
- package/dist/MetadataList/MetadataList.d.ts.map +1 -1
- package/dist/MetadataList/MetadataList.js +5 -1
- package/dist/MetadataList/MetadataListContext.d.ts +1 -1
- package/dist/MetadataList/MetadataListContext.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.d.ts +9 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +30 -3
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +22 -8
- package/dist/MultiSelector/OptionActions.a11y.chromium.spec.js +100 -2
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +3 -1
- package/dist/Pagination/Pagination.d.ts +8 -5
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +21 -8
- package/dist/Popover/Popover.js +2 -2
- package/dist/PowerSearch/PowerSearch.js +1 -1
- package/dist/RadioList/RadioList.d.ts +1 -1
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +6 -2
- package/dist/RadioList/RadioListItem.d.ts +9 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +2 -0
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +6 -2
- package/dist/SideNav/SideNavItem.d.ts +8 -1
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +71 -9
- package/dist/Switch/Switch.d.ts +1 -1
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +13 -1
- package/dist/TabList/TabMenu.d.ts +2 -2
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +6 -3
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +4 -2
- package/dist/Text/useTruncation.d.ts +7 -5
- package/dist/Text/useTruncation.d.ts.map +1 -1
- package/dist/Text/useTruncation.js +16 -5
- package/dist/ToggleButton/ToggleButton.d.ts +3 -2
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +12 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +11 -0
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +3 -3
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +3 -3
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +1 -0
- package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
- package/dist/TreeList/TreeListBranches.js +2 -2
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +57 -9
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +26 -0
- package/dist/astryx.css +47 -13
- package/dist/hooks/useEntryAnimation.d.ts +2 -1
- package/dist/hooks/useEntryAnimation.d.ts.map +1 -1
- package/dist/hooks/useEntryAnimation.js +14 -12
- package/dist/hooks/useIsHydrating.d.ts +6 -0
- package/dist/hooks/useIsHydrating.d.ts.map +1 -0
- package/dist/hooks/useIsHydrating.js +30 -0
- package/dist/hooks/useMenuHover.d.ts.map +1 -1
- package/dist/hooks/useMenuHover.js +18 -13
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +112 -1
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +112 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +0 -3
- package/dist/utils/focusOutline.stylex.d.ts +4 -0
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.js +4 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +15 -9
- package/dist/utils/sharedMutationObserver.d.ts +21 -0
- package/dist/utils/sharedMutationObserver.d.ts.map +1 -0
- package/dist/utils/sharedMutationObserver.js +69 -0
- package/locales/en.json +444 -0
- package/locales/pseudo.json +333 -0
- package/package.json +9 -4
- package/scripts/agent-doc-state.mjs +38 -0
- package/scripts/postinstall.mjs +1 -1
- package/src/AppShell/AppShell.tsx +45 -1
- package/src/AspectRatio/AspectRatio.test.tsx +44 -43
- package/src/AspectRatio/AspectRatio.tsx +38 -18
- package/src/AspectRatio/__tests__/AspectRatioFitLayers.a11y.browser.spec.ts +157 -0
- package/src/Avatar/Avatar.doc.mjs +5 -3
- package/src/AvatarGroup/AvatarGroup.doc.mjs +3 -2
- package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +30 -1
- package/src/Button/Button.doc.mjs +2 -2
- package/src/Button/Button.test.tsx +155 -9
- package/src/Button/Button.tsx +39 -16
- package/src/Button/__tests__/Button.a11y.known-failures.ts +1 -62
- package/src/Button/__tests__/Button.a11y.states.ts +0 -10
- package/src/Card/Card.doc.mjs +1 -1
- package/src/Chat/__tests__/ChatMessageMetadata.a11y.chromium.spec.ts +3 -1
- package/src/CheckboxInput/CheckboxInput.test.tsx +34 -0
- package/src/CheckboxInput/CheckboxInput.tsx +3 -1
- package/src/CheckboxList/CheckboxList.test.tsx +22 -0
- package/src/CheckboxList/CheckboxListItem.doc.mjs +16 -0
- package/src/CheckboxList/CheckboxListItem.tsx +10 -0
- package/src/Code/Code.doc.mjs +1 -0
- package/src/CommandPalette/CommandPalette.doc.mjs +2 -0
- package/src/CommandPalette/CommandPaletteInput.test.tsx +53 -4
- package/src/CommandPalette/CommandPaletteInput.tsx +33 -3
- package/src/CommandPalette/__tests__/CommandPaletteInputAudit.a11y.chromium.spec.ts +335 -0
- package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts +292 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +2 -3
- package/src/ContextMenu/ContextMenu.tsx +4 -1
- package/src/ContextMenu/__tests__/ContextMenuAudit.a11y.chromium.spec.ts +438 -0
- package/src/Dialog/Dialog.test.tsx +46 -0
- package/src/Dialog/Dialog.tsx +20 -7
- package/src/Dialog/__tests__/Dialog.a11y.known-failures.ts +0 -14
- package/src/Drawer/Drawer.doc.mjs +473 -0
- package/src/Drawer/Drawer.spec.md +357 -0
- package/src/Drawer/Drawer.test.tsx +1300 -0
- package/src/Drawer/Drawer.tsx +613 -0
- package/src/Drawer/DrawerDirection.test.tsx +127 -0
- package/src/Drawer/DrawerHeader.doc.mjs +293 -0
- package/src/Drawer/DrawerHeader.test.tsx +102 -0
- package/src/Drawer/DrawerHeader.tsx +235 -0
- package/src/Drawer/__tests__/DrawerAudit.a11y.chromium.spec.ts +401 -0
- package/src/Drawer/__tests__/DrawerHeaderAudit.a11y.chromium.spec.ts +297 -0
- package/src/Drawer/index.ts +13 -0
- package/src/Drawer/useDrawerDialogPresence.ts +284 -0
- package/src/DropdownMenu/DropdownMenu.ssr.test.tsx +57 -0
- package/src/DropdownMenu/DropdownMenu.test.tsx +79 -18
- package/src/DropdownMenu/DropdownMenu.tsx +83 -12
- package/src/DropdownMenu/DropdownMenuContext.tsx +24 -0
- package/src/DropdownMenu/DropdownMenuDivider.doc.mjs +2 -2
- package/src/DropdownMenu/DropdownMenuDivider.spec.md +192 -0
- package/src/DropdownMenu/DropdownMenuDivider.tsx +9 -5
- package/src/DropdownMenu/DropdownMenuGroup.doc.mjs +169 -10
- package/src/DropdownMenu/DropdownMenuGroup.tsx +6 -4
- package/src/DropdownMenu/DropdownMenuLazySheet.test.tsx +126 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +185 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +19 -5
- package/src/DropdownMenu/__tests__/DropdownMenuDividerAudit.a11y.chromium.spec.ts +280 -0
- package/src/DropdownMenu/__tests__/DropdownMenuGroupAudit.a11y.chromium.spec.ts +334 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts +145 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.known-failures.ts +26 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.renders.tsx +65 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.states.ts +138 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.test.tsx +136 -0
- package/src/DropdownMenu/__tests__/warmMenuBottomSheet.tsx +43 -0
- package/src/DropdownMenu/lazyMenuBottomSheet.ts +71 -0
- package/src/EmptyState/EmptyState.doc.mjs +3 -2
- package/src/EmptyState/EmptyState.spec.md +189 -0
- package/src/EmptyState/EmptyState.test.tsx +74 -3
- package/src/EmptyState/EmptyState.tsx +4 -8
- package/src/Field/Field.doc.mjs +14 -8
- package/src/Field/Field.spec.md +217 -0
- package/src/Field/Field.test.tsx +60 -2
- package/src/Field/Field.tsx +17 -8
- package/src/Field/FieldLabel.doc.mjs +133 -26
- package/src/Field/FieldLabel.spec.md +172 -0
- package/src/Field/__tests__/FieldLabelAudit.a11y.chromium.spec.ts +296 -0
- package/src/Grid/GridSpan.tsx +3 -0
- package/src/Heading/Heading.test.tsx +57 -0
- package/src/Heading/Heading.tsx +6 -2
- package/src/HoverCard/HoverCard.test.tsx +58 -0
- package/src/HoverCard/useHoverCard.tsx +10 -2
- package/src/Icon/Icon.doc.mjs +36 -0
- package/src/IconButton/IconButton.doc.mjs +2 -2
- package/src/IconButton/IconButton.test.tsx +3 -1
- package/src/Item/Item.doc.mjs +12 -8
- package/src/Item/Item.spec.md +226 -0
- package/src/Item/Item.test.tsx +61 -0
- package/src/Item/Item.tsx +40 -4
- package/src/Layer/layerViewportInset.source-build.test.mjs +90 -0
- package/src/Layer/layerViewportInset.stylex.ts +6 -2
- package/src/Layer/layerViewportInset.test.ts +1 -0
- package/src/Layer/useLayer.tsx +24 -13
- package/src/Layer/useLayerDismissal.ts +1 -1
- package/src/Layout/LayoutHeader.doc.mjs +5 -0
- package/src/Layout/container.stylex.ts +6 -6
- package/src/List/List.doc.mjs +14 -1
- package/src/List/List.spec.md +129 -77
- package/src/List/List.test.tsx +163 -94
- package/src/List/List.tsx +74 -18
- package/src/List/ListContext.tsx +9 -3
- package/src/List/ListItem.doc.mjs +24 -5
- package/src/List/ListItem.tsx +56 -27
- package/src/List/index.ts +1 -1
- package/src/Markdown/Markdown.tsx +14 -1
- package/src/Markdown/plugins/frontmatter.test.tsx +25 -0
- package/src/Markdown/plugins/frontmatter.ts +7 -3
- package/src/MetadataList/MetadataList.doc.mjs +3 -3
- package/src/MetadataList/MetadataList.test.tsx +38 -0
- package/src/MetadataList/MetadataList.tsx +8 -1
- package/src/MetadataList/MetadataListContext.tsx +1 -1
- package/src/MobileNav/MobileNav.tsx +30 -3
- package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx +173 -15
- package/src/MoreMenu/MoreMenu.test.tsx +5 -1
- package/src/MultiSelector/MultiSelector.test.tsx +159 -0
- package/src/MultiSelector/MultiSelector.tsx +40 -7
- package/src/MultiSelector/OptionActions.a11y.chromium.spec.ts +112 -2
- package/src/MultiSelector/hooks.ts +3 -1
- package/src/MultiSelector/useMultiCombobox.doc.mjs +267 -0
- package/src/Pagination/Pagination.doc.mjs +7 -7
- package/src/Pagination/Pagination.spec.md +9 -9
- package/src/Pagination/Pagination.test.tsx +242 -0
- package/src/Pagination/Pagination.tsx +27 -11
- package/src/Popover/Popover.test.tsx +2 -2
- package/src/Popover/Popover.tsx +4 -4
- package/src/PowerSearch/PowerSearch.test.tsx +85 -0
- package/src/PowerSearch/PowerSearch.tsx +2 -2
- package/src/ProgressBar/ProgressBar.doc.mjs +1 -0
- package/src/RadioList/RadioList.fr10.test.tsx +45 -2
- package/src/RadioList/RadioList.test.tsx +22 -0
- package/src/RadioList/RadioList.tsx +4 -1
- package/src/RadioList/RadioListItem.doc.mjs +16 -0
- package/src/RadioList/RadioListItem.tsx +10 -1
- package/src/Resizable/useResizable.doc.mjs +2 -0
- package/src/ScrollableArea/ScrollableArea.doc.mjs +1 -1
- package/src/Selector/hooks.ts +6 -2
- package/src/Selector/useCombobox.doc.mjs +237 -0
- package/src/SideNav/SideNav.spec.md +227 -0
- package/src/SideNav/SideNav.test.tsx +179 -0
- package/src/SideNav/SideNavItem.doc.mjs +2 -2
- package/src/SideNav/SideNavItem.tsx +96 -17
- package/src/Slider/Slider.spec.md +39 -18
- package/src/Spinner/Spinner.doc.mjs +1 -1
- package/src/Switch/Switch.test.tsx +49 -0
- package/src/Switch/Switch.tsx +11 -0
- package/src/TabList/TabList.spec.md +57 -44
- package/src/TabList/TabList.test.tsx +67 -0
- package/src/TabList/TabMenu.doc.mjs +4 -3
- package/src/TabList/TabMenu.tsx +7 -4
- package/src/Text/Text.test.tsx +57 -0
- package/src/Text/Text.tsx +6 -2
- package/src/Text/useTruncation.test.tsx +69 -0
- package/src/Text/useTruncation.ts +16 -5
- package/src/TimeInput/TimeInput.fr10.test.tsx +15 -0
- package/src/Timestamp/Timestamp.doc.mjs +1 -1
- package/src/ToggleButton/ToggleButton.test.tsx +95 -0
- package/src/ToggleButton/ToggleButton.tsx +12 -1
- package/src/ToggleButton/ToggleButtonGroup.doc.mjs +4 -0
- package/src/Tokenizer/Tokenizer.test.tsx +54 -1
- package/src/Toolbar/Toolbar.test.tsx +0 -8
- package/src/Toolbar/__tests__/Toolbar.a11y.chromium.spec.ts +163 -0
- package/src/Toolbar/__tests__/Toolbar.a11y.renders.tsx +63 -0
- package/src/Toolbar/__tests__/Toolbar.a11y.states.ts +142 -0
- package/src/Toolbar/__tests__/Toolbar.a11y.test.tsx +126 -0
- package/src/Tooltip/Tooltip.test.tsx +31 -0
- package/src/Tooltip/useTooltip.test.tsx +13 -0
- package/src/Tooltip/useTooltip.tsx +11 -0
- package/src/TopNav/TopNavMegaMenu.test.tsx +22 -0
- package/src/TopNav/TopNavMegaMenu.tsx +7 -3
- package/src/TopNav/TopNavMenu.test.tsx +19 -0
- package/src/TopNav/TopNavMenu.tsx +11 -3
- package/src/TreeList/TreeList.doc.mjs +1 -0
- package/src/TreeList/TreeList.spec.md +29 -17
- package/src/TreeList/TreeList.test.tsx +327 -6
- package/src/TreeList/TreeList.tsx +5 -1
- package/src/TreeList/TreeListBranches.tsx +6 -0
- package/src/TreeList/TreeListItem.tsx +88 -13
- package/src/Typeahead/BaseTypeahead.tsx +26 -0
- package/src/Typeahead/Typeahead.test.tsx +260 -2
- package/src/docPropLiterals.test.ts +36 -10
- package/src/hooks/useEntryAnimation.doc.mjs +4 -4
- package/src/hooks/useEntryAnimation.ssr.test.tsx +143 -0
- package/src/hooks/useEntryAnimation.ts +15 -16
- package/src/hooks/useIsHydrating.test.tsx +70 -0
- package/src/hooks/useIsHydrating.ts +31 -0
- package/src/hooks/useMenuHover.ts +18 -13
- package/src/i18n/InternationalizationProvider.doc.mjs +8 -0
- package/src/i18n/InternationalizationProvider.spec.md +252 -0
- package/src/i18n/__tests__/InternationalizationProvider.test.tsx +128 -0
- package/src/i18n/generated-locales/en.generated.ts +121 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +121 -0
- package/src/i18n/useTranslator.test.tsx +37 -0
- package/src/index.ts +1 -0
- package/src/postinstall.test.mjs +46 -0
- package/src/reset.css +0 -29
- package/src/theme/derivedVarRegistry.test.ts +7 -3
- package/src/theme/derivedVarRegistry.ts +0 -3
- package/src/utils/focusOutline.stylex.ts +4 -0
- package/src/utils/plainDate.test.ts +37 -1
- package/src/utils/plainDate.ts +15 -5
- package/src/utils/sharedMutationObserver.test.ts +53 -0
- package/src/utils/sharedMutationObserver.ts +78 -0
package/src/List/List.doc.mjs
CHANGED
|
@@ -41,11 +41,18 @@ export const docs = {
|
|
|
41
41
|
description: 'Show dividers between items.',
|
|
42
42
|
default: 'false',
|
|
43
43
|
},
|
|
44
|
+
{
|
|
45
|
+
name: 'edge',
|
|
46
|
+
type: "'padded' | 'flush' | 'outset' | 'bleed'",
|
|
47
|
+
description:
|
|
48
|
+
"Where each row's text, dividers, and hover and selection backgrounds sit, relative to the list's edges and the container around it. 'padded' keeps text inside each row's padding, so it starts a little in from a heading above the list and backgrounds have room around it. 'flush' drops the rows' side padding: text starts on the heading's line, and dividers and backgrounds stop at the row's content, with no room beyond it on either side. It works anywhere and suits static rows. 'outset' puts text on the heading's line and reaches dividers and backgrounds a little past it into the container's padding; it suits interactive rows in a container. 'bleed' puts text on the heading's line and reaches dividers and backgrounds to the container's edges with square corners, like Table rows in a Card. A row's first content is what lines up with the heading: its marker, icon, or avatar when it has one, otherwise its label. 'outset' and 'bleed' reach into the padding of the nearest container that shares its padding: a Card, Section, Dialog, or BottomSheet, or a transparent container such as a Layout region with explicit padding or a padded ScrollableArea. Place the List directly in that container's padding: padding that Stack, Center, or your own styles add in between is not counted. Drawers and the automatic padding of LayoutContent and LayoutPanel aren't supported yet. With no such container, including in a Popover, they look like 'padded'. In a container with less padding than the rows' own, text starts a little after the heading's line. A theme's inline padding on `item` replaces the row padding of every value, including the zero padding of flush.",
|
|
49
|
+
default: "'padded'",
|
|
50
|
+
},
|
|
44
51
|
{
|
|
45
52
|
name: 'edgeCompensation',
|
|
46
53
|
type: "'inline'",
|
|
47
54
|
description:
|
|
48
|
-
"
|
|
55
|
+
"Deprecated: use edge=\"outset\", which this sets. Still works; edge wins when both are set. `astryx upgrade` rewrites existing usage.",
|
|
49
56
|
},
|
|
50
57
|
{
|
|
51
58
|
name: 'header',
|
|
@@ -89,6 +96,8 @@ export const docs = {
|
|
|
89
96
|
bestPractices: [
|
|
90
97
|
{ guidance: true, description: 'Provide a header to label the list and give context to screen readers.' },
|
|
91
98
|
{ guidance: true, description: 'Use start and end content slots to add icons, avatars, or badges to each item.' },
|
|
99
|
+
{ guidance: true, description: 'Set edge to line row text up with a heading above the list: flush for static rows, outset or bleed for rows in a Card, Section, or Dialog.' },
|
|
100
|
+
{ guidance: true, description: 'To line text up with a heading and keep room around the highlight where there is no Card, such as a sidebar, put the heading and the list in a Section with variant="transparent" and set edge="outset".' },
|
|
92
101
|
{ guidance: false, description: 'Place interactive elements inside an interactive list item; it creates nested click targets and confusing focus behavior.' },
|
|
93
102
|
{ guidance: false, description: 'Use a list for a single item or for laying out unrelated content; lists imply a meaningful collection.' },
|
|
94
103
|
{ guidance: false, description: 'Mix clickable and non-clickable items in the same list without clear visual distinction.' },
|
|
@@ -109,6 +118,8 @@ export const docsZh = {
|
|
|
109
118
|
bestPractices: [
|
|
110
119
|
{ guidance: true, description: 'Provide a header to label the list and give context to screen readers.' },
|
|
111
120
|
{ guidance: true, description: 'Use start and end content slots to add icons, avatars, or badges to each item.' },
|
|
121
|
+
{ guidance: true, description: 'Set edge to line row text up with a heading above the list: flush for static rows, outset or bleed for rows in a Card, Section, or Dialog.' },
|
|
122
|
+
{ guidance: true, description: 'To line text up with a heading and keep room around the highlight where there is no Card, such as a sidebar, put the heading and the list in a Section with variant="transparent" and set edge="outset".' },
|
|
112
123
|
{ guidance: false, description: 'Place interactive elements inside an interactive list item; it creates nested click targets and confusing focus behavior.' },
|
|
113
124
|
{ guidance: false, description: 'Use a list for a single item or for laying out unrelated content; lists imply a meaningful collection.' },
|
|
114
125
|
{ guidance: false, description: 'Mix clickable and non-clickable items in the same list without clear visual distinction.' },
|
|
@@ -132,6 +143,8 @@ export const docsDense = {
|
|
|
132
143
|
bestPractices: [
|
|
133
144
|
{ guidance: true, description: 'Provide a header to label the list and give context to screen readers.' },
|
|
134
145
|
{ guidance: true, description: 'Use start and end content slots to add icons, avatars, or badges to each item.' },
|
|
146
|
+
{ guidance: true, description: 'Set edge to line row text up with a heading above the list: flush for static rows, outset or bleed for rows in a Card, Section, or Dialog.' },
|
|
147
|
+
{ guidance: true, description: 'To line text up with a heading and keep room around the highlight where there is no Card, such as a sidebar, put the heading and the list in a Section with variant="transparent" and set edge="outset".' },
|
|
135
148
|
{ guidance: false, description: 'Place interactive elements inside an interactive list item; it creates nested click targets and confusing focus behavior.' },
|
|
136
149
|
{ guidance: false, description: 'Use a list for a single item or for laying out unrelated content; lists imply a meaningful collection.' },
|
|
137
150
|
{ guidance: false, description: 'Mix clickable and non-clickable items in the same list without clear visual distinction.' },
|
package/src/List/List.spec.md
CHANGED
|
@@ -25,38 +25,51 @@ design_specs: []
|
|
|
25
25
|
architecture:
|
|
26
26
|
[architecture:container-padding, architecture:public-component-api]
|
|
27
27
|
contributing: [contributing:api-conventions]
|
|
28
|
-
system_specs:
|
|
28
|
+
system_specs:
|
|
29
|
+
[spec:AST-002/DEC-1, spec:AST-002/DEC-2, spec:AST-017/FR4, spec:AST-057/FR9]
|
|
29
30
|
---
|
|
30
31
|
|
|
31
32
|
# List component contract
|
|
32
33
|
|
|
33
34
|
## Contract at a glance
|
|
34
35
|
|
|
35
|
-
| Area | Contract
|
|
36
|
-
| ----------------------- |
|
|
37
|
-
| Public contract |
|
|
38
|
-
| Behavior |
|
|
39
|
-
| End-user impact |
|
|
40
|
-
| Builder impact |
|
|
41
|
-
| Compatibility/readiness | Additive
|
|
42
|
-
| Review checks | Reject header movement,
|
|
43
|
-
| Governing rules | `architecture:container-padding/INV9–INV11`; `spec:AST-002/DEC-1–DEC-2`.
|
|
36
|
+
| Area | Contract |
|
|
37
|
+
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
38
|
+
| Public contract | Optional `edge?: 'padded' \| 'flush' \| 'outset' \| 'bleed'`, default `'padded'`. Deprecated `edgeCompensation?: 'inline'` resolves to `'outset'`. |
|
|
39
|
+
| Behavior | One edge treatment applies to every ListItem row and decides where row content and row paint sit relative to the list's edges and the host's padding. |
|
|
40
|
+
| End-user impact | Row text can share the line of the list header and a heading above, with row paint stopping at the text, reaching into the host padding, or reaching the host edges. |
|
|
41
|
+
| Builder impact | One choice per list. `flush` works anywhere; `outset` and `bleed` act only inside a host that publishes container padding. |
|
|
42
|
+
| Compatibility/readiness | Additive; omission keeps current geometry; `edgeCompensation` keeps working with a codemod to `edge`. |
|
|
43
|
+
| Review checks | Reject header movement, row paint past the host's padding edge, duplicated padding values, physical-edge logic, automatic opt-in, a ListItem-level prop, or a second prop that can contradict `edge`. |
|
|
44
|
+
| Governing rules | `architecture:container-padding/INV3`, `INV9–INV11`; `spec:AST-002/DEC-1–DEC-2`; `spec:AST-017/FR4`; `spec:AST-057/FR9`. |
|
|
44
45
|
|
|
45
46
|
This table is a review projection; the body below is authoritative.
|
|
46
47
|
|
|
47
48
|
## Intent
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
Every ListItem keeps Item's inline inset so hover, press, and selection paint has
|
|
51
|
+
room around row content. That inset leaves row text off the line of the List
|
|
52
|
+
header, a heading above the list, and the host container's padding. How a
|
|
53
|
+
collection resolves that depends on its rows and its host: static rows need no
|
|
54
|
+
room around paint, interactive rows do, and a list inside a padded container can
|
|
55
|
+
reach into that padding. The caller knows which applies; List cannot derive it
|
|
56
|
+
from its rows, and the choice must hold for the whole collection.
|
|
53
57
|
|
|
54
58
|
## Compatibility and migration
|
|
55
59
|
|
|
56
60
|
- Released default preserved: `yes`; omission keeps current List and ListItem geometry.
|
|
57
|
-
- Compatibility class: additive optional prop
|
|
61
|
+
- Compatibility class: additive optional prop; `edgeCompensation` is a deprecated
|
|
62
|
+
alias with the same meaning as `edge="outset"`. Its `@deprecated` type reports
|
|
63
|
+
plain use; development warns only when both props are set, naming
|
|
64
|
+
`astryx upgrade` (`spec:AST-017` FR29–FR29b).
|
|
58
65
|
- Controlled/uncontrolled behavior: not applicable.
|
|
59
|
-
- Migration decision: `component:List/DEC-
|
|
66
|
+
- Migration decision: `component:List/DEC-3`; an `astryx upgrade` codemod renames
|
|
67
|
+
static `edgeCompensation="inline"` to `edge="outset"`, removes
|
|
68
|
+
`edgeCompensation` beside an `edge` string that no later spread can override,
|
|
69
|
+
and keeps the old prop with a TODO where `edge` is computed, on a dynamic value,
|
|
70
|
+
and where the List also spreads props (`spec:AST-017` FR29c–FR29d). A spread onto a
|
|
71
|
+
List that never writes `edgeCompensation` stays unchanged (`spec:AST-040` FR1);
|
|
72
|
+
the `@deprecated` type reports a typed use where the props are written.
|
|
60
73
|
|
|
61
74
|
Consumer migration instructions belong in consumer docs and release notes.
|
|
62
75
|
|
|
@@ -64,108 +77,118 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
64
77
|
|
|
65
78
|
**Owns**
|
|
66
79
|
|
|
67
|
-
- The collection-wide `
|
|
68
|
-
|
|
69
|
-
- Keeping the optional header in place
|
|
70
|
-
- The
|
|
71
|
-
|
|
80
|
+
- The collection-wide `edge` treatment and its application to every ListItem row.
|
|
81
|
+
- The deprecated `edgeCompensation` alias and its resolution.
|
|
82
|
+
- Keeping the optional header in place for every treatment.
|
|
83
|
+
- The relationship between row geometry and Item's density- and theme-aware
|
|
84
|
+
inline inset.
|
|
72
85
|
|
|
73
86
|
**Does not own / non-goals**
|
|
74
87
|
|
|
75
88
|
- Container padding values, nesting, or overlay resets — owned by
|
|
76
89
|
`architecture:container-padding`.
|
|
77
|
-
- A ListItem-level
|
|
78
|
-
|
|
90
|
+
- A ListItem-level edge prop, per-edge or arbitrary inset values, automatic host
|
|
91
|
+
detection, or block-axis bleed.
|
|
79
92
|
- TabList or Button projections.
|
|
80
93
|
|
|
81
94
|
## Public concepts
|
|
82
95
|
|
|
83
|
-
| Concept
|
|
84
|
-
|
|
|
85
|
-
| Edge
|
|
96
|
+
| Concept | Closed values or states | Meaning | Availability by variant/orientation/state | Default | Owner | Stability | Invalid-value behavior |
|
|
97
|
+
| ------------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | -------- | ---------------- | ---------- | -------------------------------------------- |
|
|
98
|
+
| Edge treatment | `padded`, `flush`, `outset`, `bleed` | Where row content and row paint sit relative to the list's edges and the host's padding | Every density, marker style, and divider setting; `outset` and `bleed` read host padding | `padded` | `component:List` | accepted | Other values are rejected by the public type |
|
|
99
|
+
| Edge compensation (deprecated) | omitted, `inline` | Same as `edge="outset"` | As `outset` | omitted | `component:List` | deprecated | Other values are rejected by the public type |
|
|
86
100
|
|
|
87
101
|
## Behavioral and layout contract
|
|
88
102
|
|
|
89
|
-
| ID | Invariant
|
|
90
|
-
| --- |
|
|
91
|
-
| FR1 | List MUST own `
|
|
92
|
-
| FR2 |
|
|
93
|
-
| FR3 |
|
|
94
|
-
| FR4 |
|
|
95
|
-
| FR5 |
|
|
96
|
-
| FR6 |
|
|
97
|
-
| FR7 |
|
|
103
|
+
| ID | Invariant | Basis | Status |
|
|
104
|
+
| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------- |
|
|
105
|
+
| FR1 | List MUST own `edge` and apply one treatment to every ListItem row, interactive or not; ListItem MUST NOT expose a parallel public prop. A defined `edge` MUST win over `edgeCompensation`, and `edgeCompensation="inline"` with `edge` undefined MUST resolve to `outset`. | `component:List/DEC-1`, `component:List/DEC-3` | Accepted contract |
|
|
106
|
+
| FR2 | `padded` MUST preserve current header, list, and row geometry. No treatment MAY move the header or change row block padding, gap, markers, start and end content, semantics, or hit target relative to the row box. | Owner direction | Accepted contract |
|
|
107
|
+
| FR3 | `flush` MUST resolve each row's inline inset to zero through the private source that supplies Item's applied inline padding, so row content and row paint share the list's inline edges. It reads no host padding. A theme override of row inline padding takes precedence over the zero (FR7). | `component:List/DEC-3` | Accepted contract |
|
|
108
|
+
| FR4 | `outset` MUST place each row so it reaches past the host content line by the smaller of its own inline inset and the matching host inset, per logical edge, keeping its inset inside. Content reaches the host line when the host inset is at least the row inset. | `architecture:container-padding/INV9–INV10`; `component:List/DEC-2` | Accepted contract |
|
|
109
|
+
| FR5 | `bleed` MUST place each row so it reaches the host's padding edge on each logical edge, with square corners. Row content sits on the host content line, or at the row's own inset from its edge when the host inset is smaller. A theme override of row inline padding sets the content's inset instead (FR7). | `architecture:container-padding/INV3`; `component:List/DEC-4` | Accepted contract |
|
|
110
|
+
| FR6 | Missing or reset host inset MUST resolve to zero, so `outset` and `bleed` place content as `padded` does outside a padded host. No row paint MAY reach past the host's padding edge. | `architecture:container-padding/INV6`, `INV9` | Accepted contract |
|
|
111
|
+
| FR7 | Each row's retained inset MUST come from the same private density- and theme-derived source as Item's applied inline padding. A theme `item.paddingInline` override takes precedence over every treatment's row padding, as it does over density. A consumer override of row padding through `xstyle`, `className`, or `style` is outside the alignment guarantee. | Shared two-owner geometry contract | Accepted contract |
|
|
112
|
+
| FR8 | `outset` and `bleed` are valid only under a host state whose published inline inset matches its applied padding: a visually neutral host, such as a Layout region with explicit padding or a padded ScrollableArea, or the content area of a Card, Section (any variant), Dialog, or BottomSheet. Those hosts bound their padding with a border, background, or clip; FR6 keeps row paint inside the padding edge, so it never covers the border or changes the host's outline. Automatic LayoutContent/LayoutPanel states with a known publication mismatch are not eligible until that gap is fixed, and Drawer's content area is not admitted until it has its own evidence. | `architecture:container-padding/INV8–INV11`; real-browser evidence in each admitted host | Accepted contract |
|
|
113
|
+
| FR9 | The list element containing the rows MUST clip in the inline axis with `overflow-inline: clip`, never `hidden`. Under `outset` and `bleed` its inline edges MUST reach the host's padding edge, so the clip never cuts resting row paint and a swiped row paints no further than that edge. | `spec:AST-057/FR9` | Verified by `List.test.tsx` and real-browser geometry |
|
|
98
114
|
|
|
99
115
|
### Allowed variation
|
|
100
116
|
|
|
101
117
|
- Density and `item.paddingInline` theme overrides may change the retained inset;
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
118
|
+
every treatment follows the same derived value. A theme override of row inline
|
|
119
|
+
padding takes precedence over every treatment, as it does over density.
|
|
120
|
+
- Host padding may be uniform, asymmetric, zero, or absent; each logical edge
|
|
121
|
+
resolves independently.
|
|
105
122
|
- Labels, descriptions, markers, start/end content, interactivity, and selection
|
|
106
|
-
may vary without changing the collection-wide
|
|
123
|
+
may vary without changing the collection-wide treatment.
|
|
107
124
|
|
|
108
125
|
### Representative states
|
|
109
126
|
|
|
110
|
-
| State
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
127
|
+
| State | Required invariant | Allowed variation |
|
|
128
|
+
| ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ----------------------------------- |
|
|
129
|
+
| `padded` (default) | Header and every row keep current geometry. | Any content, density, or host. |
|
|
130
|
+
| `flush` | Row content and paint share the list's inline edges with the header and divider ends. | Any host, including none. |
|
|
131
|
+
| `outset`, host inset at least row inset | Row content reaches the host content line; row paint reaches past it by the row inset. | Uniform or asymmetric host padding. |
|
|
132
|
+
| `bleed`, host inset at least row inset | Row paint reaches the host's padding edge; row content sits on the host content line. | Uniform or asymmetric host padding. |
|
|
133
|
+
| `outset` or `bleed`, host inset smaller than row inset | Row paint stops at the host's padding edge; content keeps the row inset. | Either logical edge independently. |
|
|
134
|
+
| `outset` or `bleed`, no host inset | Content placed as `padded`; `bleed` rows are square. | Standalone lists and overlays. |
|
|
135
|
+
| LTR or RTL | Logical start/end mapping follows direction. | Writing direction. |
|
|
117
136
|
|
|
118
137
|
### Transformation and precedence order
|
|
119
138
|
|
|
120
|
-
- **ORD1 —
|
|
121
|
-
|
|
122
|
-
- **ORD2 —
|
|
123
|
-
|
|
124
|
-
- **ORD3 —
|
|
125
|
-
|
|
139
|
+
- **ORD1 — Treatment.** Resolve `edge`, else `outset` for `edgeCompensation="inline"`,
|
|
140
|
+
else `padded`.
|
|
141
|
+
- **ORD2 — Host bound.** Read the matching published host inset for each logical
|
|
142
|
+
edge, with missing values falling back to zero.
|
|
143
|
+
- **ORD3 — Local inset.** Resolve Item's inline inset through the private value
|
|
144
|
+
that supplies applied padding: density sets it, `flush` replaces it with zero,
|
|
145
|
+
and a theme `item.paddingInline` override replaces either.
|
|
146
|
+
- **ORD4 — Placement.** Apply the treatment's geometry from those values; then
|
|
147
|
+
compose supported consumer styles without claiming alignment for a consumer
|
|
126
148
|
override of row inline padding.
|
|
127
149
|
|
|
128
150
|
### Performance and resources
|
|
129
151
|
|
|
130
|
-
- **PR1 — CSS geometry only.**
|
|
131
|
-
|
|
152
|
+
- **PR1 — CSS geometry only.** Every treatment MUST add no measurement, observer,
|
|
153
|
+
listener, state, Effect, or render pass. Deprecation warnings are dev-only.
|
|
132
154
|
|
|
133
155
|
## Accessibility contract
|
|
134
156
|
|
|
135
|
-
- **AR1 — Interaction geometry remains local.**
|
|
136
|
-
interactive element, accessible role/name/state, focus target, tab order
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
corresponding mirrored geometry under RTL without changing DOM order.
|
|
157
|
+
- **AR1 — Interaction geometry remains local.** No treatment MAY change the
|
|
158
|
+
interactive element, accessible role/name/state, focus target, or tab order.
|
|
159
|
+
- **AR2 — Direction remains logical.** Each treatment MUST produce the mirrored
|
|
160
|
+
geometry under RTL without changing DOM order.
|
|
140
161
|
|
|
141
162
|
## Design relationships
|
|
142
163
|
|
|
143
|
-
| Anatomy or state
|
|
144
|
-
|
|
|
145
|
-
| Optional header
|
|
146
|
-
| ListItem row
|
|
147
|
-
| Row content
|
|
164
|
+
| Anatomy or state | Design requirement | Representation authority | Hierarchy role | Component contract |
|
|
165
|
+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------ | ------------------ |
|
|
166
|
+
| Optional header | Stays on the host content line for every treatment. | `component:List/DEC-1` | Context | FR2 |
|
|
167
|
+
| ListItem row paint | Stops at the content (`flush`), reaches past it by the row inset (`padded`, `outset`), or reaches the host edge (`bleed`). | `component:List/DEC-3` | Supporting surface | FR3–FR6 |
|
|
168
|
+
| Row content | The row's first content (its marker, start content, or label) sits inside the row inset (`padded`) or on the host content line when the host inset allows (`flush`, `outset`, `bleed`). | `component:List/DEC-3` | Prominent | FR2–FR5 |
|
|
148
169
|
|
|
149
170
|
## Family and system relationships
|
|
150
171
|
|
|
151
|
-
- `architecture:container-padding` owns host publication,
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
- `architecture:public-component-api` and `spec:AST-
|
|
172
|
+
- `architecture:container-padding` owns host publication, eligibility,
|
|
173
|
+
logical-edge semantics, overlay reset, and the shared `edge` vocabulary. List's
|
|
174
|
+
`edge` projects all four values onto both inline edges of every row.
|
|
175
|
+
- `architecture:public-component-api`, `spec:AST-002`, and `spec:AST-017` own
|
|
176
|
+
public API admission and the deprecation lifecycle.
|
|
155
177
|
- Item remains the implementation owner of row padding and interaction paint;
|
|
156
|
-
List owns only the collection-level
|
|
178
|
+
List owns only the collection-level treatment and row placement.
|
|
157
179
|
- `spec:AST-057` owns swipe actions on `Item` and the rule that the element
|
|
158
|
-
containing swipe-capable rows clips in the inline axis; List carries that
|
|
159
|
-
|
|
160
|
-
|
|
180
|
+
containing swipe-capable rows clips in the inline axis; List carries that clip
|
|
181
|
+
(FR9) and `ListItem` passes `swipeActions` and `swipeBehavior` through to
|
|
182
|
+
`Item` unchanged.
|
|
161
183
|
|
|
162
184
|
## Verification map
|
|
163
185
|
|
|
164
|
-
| Contract
|
|
165
|
-
|
|
|
166
|
-
| FR1–
|
|
167
|
-
| FR2–FR6, AR1–AR2 | Real-browser List geometry evidence | header; LTR/RTL;
|
|
168
|
-
|
|
|
186
|
+
| Contract | Verification | Representative states | Mutation or failure expectation | Audit section |
|
|
187
|
+
| ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
|
|
188
|
+
| FR1–FR7, FR9 | List, Item, and theme-registry tests | every treatment; all densities; static and interactive rows; header; deprecated alias alone and with `edge`; ListItem outside a List | Removing context propagation, using one host edge for both inline edges, zeroing padding without the shared inset source, or dropping the list's reach or clip fails | `audit:List/layout` |
|
|
189
|
+
| FR2–FR6, FR8–FR9, AR1–AR2 | Real-browser List geometry evidence | each treatment in a Card at two paddings, a Section, an inline Dialog with and without Layout, a BottomSheet, a padded ScrollableArea scrolling vertically and in both axes, a LayoutContent with explicit padding, and standalone; header and dividers; LTR/RTL; hovered and selected rows; a swiped row under `outset` and `bleed` | Header movement, content off the expected line, paint past the host's padding edge, clipped resting paint, or a changed row box fails | `audit:List/visual` |
|
|
190
|
+
| Migration | `astryx upgrade` codemod tests | static, aliased, already-migrated, dynamic, and computed-`edge` callsites; a second run | A dynamic value or a computed `edge` rewritten, a static one missed, or a second run that changes output fails | `audit:List/docs` |
|
|
191
|
+
| Documentation | `List.doc.mjs`, Storybook, and `scripts/check-knowledge.mjs` | public prop, values, default, deprecation, and representative composition | Missing or stale contract, docs, or example fails | `audit:List/docs` |
|
|
169
192
|
|
|
170
193
|
## Decision log
|
|
171
194
|
|
|
@@ -194,6 +217,35 @@ without pulling row paint beyond the host boundary.
|
|
|
194
217
|
Rejected: `isFullBleed`, because the row may stop inside the host padding and the
|
|
195
218
|
name would promise outer-edge bleed that the component does not provide.
|
|
196
219
|
|
|
220
|
+
### DEC-3 — One edge prop names every row edge treatment
|
|
221
|
+
|
|
222
|
+
**Reference:** `component:List/DEC-3`
|
|
223
|
+
|
|
224
|
+
**Decider:** cixzhang, 2026-10-15
|
|
225
|
+
|
|
226
|
+
`padded`, `flush`, `outset`, and `bleed` are mutually exclusive answers to one
|
|
227
|
+
question, so one closed-value prop carries them and no combination can
|
|
228
|
+
contradict. The names are the shared edge vocabulary of
|
|
229
|
+
`architecture:container-padding`. `outset` is the bounded compensation of DEC-2;
|
|
230
|
+
`edgeCompensation` remains its deprecated alias.
|
|
231
|
+
|
|
232
|
+
Rejected: separate boolean props beside `edgeCompensation`, because they could
|
|
233
|
+
request two treatments at once.
|
|
234
|
+
|
|
235
|
+
### DEC-4 — Bleed reaches the host edge and keeps content on its padding line
|
|
236
|
+
|
|
237
|
+
**Reference:** `component:List/DEC-4`
|
|
238
|
+
|
|
239
|
+
**Decider:** cixzhang, 2026-10-15
|
|
240
|
+
|
|
241
|
+
`bleed` matches Table rows in a padded host: row paint reaches the host's padding
|
|
242
|
+
edge with square corners, and content sits on the host content line, never closer
|
|
243
|
+
to the row edge than the row's own inset. It is opt-in, so existing lists keep
|
|
244
|
+
their geometry.
|
|
245
|
+
|
|
246
|
+
Rejected: bleed as the default inside padded hosts, because it would move every
|
|
247
|
+
existing list in a container.
|
|
248
|
+
|
|
197
249
|
## Open questions
|
|
198
250
|
|
|
199
251
|
None.
|