@astryxdesign/core 0.7.5 → 0.7.6-canary.0ef60dd
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/AlertDialog/AlertDialog.d.ts +1 -1
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +5 -5
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +12 -3
- package/dist/Badge/Badge.d.ts.map +1 -1
- package/dist/Badge/Badge.js +7 -1
- package/dist/BottomSheet/BottomSheet.js +1 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +2 -1
- package/dist/BottomSheet/useSheetGestures.d.ts +12 -0
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +30 -3
- package/dist/Button/Button.js +4 -4
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +6 -5
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +37 -4
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +12 -4
- package/dist/DateInput/MonthScroller.d.ts.map +1 -1
- package/dist/DateInput/MonthScroller.js +101 -15
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +8 -3
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +1 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts +5 -2
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +23 -12
- package/dist/DateTimeInput/NativeTimeSegment.d.ts.map +1 -1
- package/dist/DateTimeInput/NativeTimeSegment.js +5 -4
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +4 -3
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +34 -9
- package/dist/Dialog/DialogHeader.d.ts.map +1 -1
- package/dist/Dialog/DialogHeader.js +5 -4
- package/dist/Divider/Divider.d.ts.map +1 -1
- package/dist/Divider/Divider.js +2 -1
- package/dist/Drawer/Drawer.d.ts +1 -0
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +7 -2
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +7 -3
- package/dist/DropdownMenu/MenuBottomSheetActionList.d.ts.map +1 -1
- package/dist/DropdownMenu/MenuBottomSheetActionList.js +6 -5
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts +20 -2
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts.map +1 -1
- package/dist/DropdownMenu/lazyMenuBottomSheet.js +31 -3
- package/dist/DropdownMenu/renderDropdownItems.d.ts.map +1 -1
- package/dist/DropdownMenu/renderDropdownItems.js +21 -16
- package/dist/EmptyState/EmptyState.d.ts.map +1 -1
- package/dist/EmptyState/EmptyState.js +2 -1
- package/dist/Field/FieldLabel.d.ts +1 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +4 -4
- package/dist/Field/InputClearButton.js +3 -3
- package/dist/Field/PanelSearchInput.js +2 -2
- package/dist/FieldStatus/FieldStatus.js +2 -2
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +7 -1
- package/dist/Heading/Heading.js +1 -1
- package/dist/Icon/Icon.js +1 -1
- package/dist/Indicator/CheckIndicator.d.ts.map +1 -1
- package/dist/Indicator/CheckIndicator.js +2 -1
- package/dist/Indicator/CheckboxIndicator.d.ts.map +1 -1
- package/dist/Indicator/CheckboxIndicator.js +3 -1
- package/dist/Indicator/RadioIndicator.d.ts.map +1 -1
- package/dist/Indicator/RadioIndicator.js +3 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +2 -1
- package/dist/Item/ItemSwipeLayer.js +1 -1
- package/dist/Layer/popoverOperations.d.ts +27 -0
- package/dist/Layer/popoverOperations.d.ts.map +1 -0
- package/dist/Layer/popoverOperations.js +159 -0
- package/dist/Layer/useLayer.d.ts +1 -1
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +93 -59
- package/dist/Layout/Layout.js +1 -1
- package/dist/Layout/LayoutContent.js +1 -1
- package/dist/Layout/LayoutFooter.js +1 -1
- package/dist/Layout/LayoutHeader.js +1 -1
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +5 -0
- package/dist/Lightbox/LightboxViewport.a11y.browser.spec.js +5 -4
- package/dist/List/List.js +1 -1
- package/dist/List/ListItem.js +3 -3
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +7 -2
- package/dist/MultiSelector/CreateRow.a11y.chromium.spec.js +7 -6
- package/dist/MultiSelector/MultiSelector.d.ts +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +26 -10
- package/dist/NumberInput/NumberInput.d.ts +3 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +3 -3
- package/dist/NumberInput/numberParser.d.ts +3 -0
- package/dist/NumberInput/numberParser.d.ts.map +1 -1
- package/dist/NumberInput/numberParser.js +7 -44
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +16 -12
- package/dist/Resizable/useResizable.d.ts.map +1 -1
- package/dist/Resizable/useResizable.js +28 -2
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +4 -1
- package/dist/Selector/useSelectorPresentation.d.ts +8 -1
- package/dist/Selector/useSelectorPresentation.d.ts.map +1 -1
- package/dist/Selector/useSelectorPresentation.js +20 -4
- package/dist/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/Skeleton/Skeleton.js +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +10 -2
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +3 -3
- package/dist/Stack/Stack.js +1 -1
- package/dist/Stack/StackItem.js +1 -1
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +16 -1
- package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +9 -1
- package/dist/Text/Text.js +1 -1
- package/dist/Text/useTruncation.d.ts.map +1 -1
- package/dist/Text/useTruncation.js +23 -5
- package/dist/TextArea/TextArea.d.ts +1 -1
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +13 -2
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +3 -3
- package/dist/TimeInput/TimeInput.d.ts +6 -2
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +21 -14
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +5 -4
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +2 -2
- package/dist/Timestamp/TimestampHoverCard.js +4 -4
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +60 -20
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +82 -51
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +13 -2
- package/dist/Tokenizer/TokenizerBottomSheet.js +3 -3
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +2 -1
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +3 -0
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +1 -0
- package/dist/Typeahead/Typeahead.d.ts +1 -1
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +9 -1
- package/dist/astryx.css +20 -4
- package/dist/gestures/GestureArena.d.ts +6 -0
- package/dist/gestures/GestureArena.d.ts.map +1 -1
- package/dist/gestures/GestureArena.js +39 -0
- package/dist/gestures/GestureHost.d.ts +352 -0
- package/dist/gestures/GestureHost.d.ts.map +1 -0
- package/dist/gestures/GestureHost.js +1773 -0
- package/dist/gestures/GestureRecognizer.d.ts +10 -0
- package/dist/gestures/GestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/GestureRecognizer.js +16 -0
- package/dist/gestures/LongPressGestureRecognizer.d.ts +1 -0
- package/dist/gestures/LongPressGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/LongPressGestureRecognizer.js +3 -0
- package/dist/gestures/PanGestureRecognizer.d.ts +1 -0
- package/dist/gestures/PanGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/PanGestureRecognizer.js +3 -0
- package/dist/gestures/PinchGestureRecognizer.d.ts +31 -0
- package/dist/gestures/PinchGestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/PinchGestureRecognizer.js +128 -0
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts +71 -0
- package/dist/gestures/ScreenEdgePanGestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/ScreenEdgePanGestureRecognizer.js +223 -0
- package/dist/gestures/SwipeGestureRecognizer.d.ts +37 -0
- package/dist/gestures/SwipeGestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/SwipeGestureRecognizer.js +148 -0
- package/dist/gestures/TapGestureRecognizer.d.ts +1 -0
- package/dist/gestures/TapGestureRecognizer.d.ts.map +1 -1
- package/dist/gestures/TapGestureRecognizer.js +3 -0
- package/dist/gestures/VelocityTracker.d.ts +6 -2
- package/dist/gestures/VelocityTracker.d.ts.map +1 -1
- package/dist/gestures/VelocityTracker.js +7 -3
- package/dist/gestures/haptics.d.ts +65 -0
- package/dist/gestures/haptics.d.ts.map +1 -0
- package/dist/gestures/haptics.js +182 -0
- package/dist/gestures/nativeScroll.d.ts +42 -0
- package/dist/gestures/nativeScroll.d.ts.map +1 -0
- package/dist/gestures/nativeScroll.js +228 -0
- package/dist/gestures/touchAction.d.ts +60 -0
- package/dist/gestures/touchAction.d.ts.map +1 -0
- package/dist/gestures/touchAction.js +157 -0
- package/dist/gestures/touchActionRule.d.ts +34 -0
- package/dist/gestures/touchActionRule.d.ts.map +1 -0
- package/dist/gestures/touchActionRule.js +140 -0
- package/dist/gestures/types.d.ts +18 -7
- package/dist/gestures/types.d.ts.map +1 -1
- package/dist/gestures/types.js +22 -2
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/modalAnnounce.d.ts.map +1 -1
- package/dist/hooks/modalAnnounce.js +107 -61
- package/dist/hooks/useAdaptivePresentation.d.ts.map +1 -1
- package/dist/hooks/useAdaptivePresentation.js +4 -1
- package/dist/hooks/useAnnounce.d.ts +101 -42
- package/dist/hooks/useAnnounce.d.ts.map +1 -1
- package/dist/hooks/useAnnounce.js +161 -75
- package/dist/hooks/useAnnounceRenderedText.d.ts +11 -3
- package/dist/hooks/useAnnounceRenderedText.d.ts.map +1 -1
- package/dist/hooks/useAnnounceRenderedText.js +5 -3
- package/dist/hooks/useBusyAnnouncement.d.ts.map +1 -1
- package/dist/hooks/useBusyAnnouncement.js +6 -12
- package/dist/hooks/useMenuHover.d.ts.map +1 -1
- package/dist/hooks/useMenuHover.js +12 -1
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +5 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +5 -0
- package/dist/motion/animator.d.ts +7 -1
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +119 -27
- package/dist/theme/defineTheme.d.ts +19 -5
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +64 -4
- package/dist/theme/domainTokens/domainTokenDefaults.d.ts +3 -0
- package/dist/theme/domainTokens/domainTokenDefaults.d.ts.map +1 -0
- package/dist/theme/domainTokens/domainTokenDefaults.js +19 -0
- package/dist/theme/domainTokens/index.d.ts +5 -4
- package/dist/theme/domainTokens/index.d.ts.map +1 -1
- package/dist/theme/domainTokens/index.js +5 -9
- package/dist/theme/index.d.ts +1 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/motionKnobs.d.ts +56 -0
- package/dist/theme/motionKnobs.d.ts.map +1 -0
- package/dist/theme/motionKnobs.js +48 -0
- package/dist/theme/resolveThemeValues.d.ts +11 -4
- package/dist/theme/resolveThemeValues.d.ts.map +1 -1
- package/dist/theme/resolveThemeValues.js +40 -4
- package/dist/theme/themeAdaptations.d.ts +7 -3
- package/dist/theme/themeAdaptations.d.ts.map +1 -1
- package/dist/theme/themeAdaptations.js +36 -7
- package/dist/theme/themeMotion.d.ts +96 -0
- package/dist/theme/themeMotion.d.ts.map +1 -0
- package/dist/theme/themeMotion.js +177 -0
- package/dist/theme/tokenReferences.d.ts +31 -0
- package/dist/theme/tokenReferences.d.ts.map +1 -0
- package/dist/theme/tokenReferences.js +132 -0
- package/dist/theme/tokens.d.ts +1 -0
- package/dist/theme/tokens.d.ts.map +1 -1
- package/dist/theme/tokens.js +9 -129
- package/dist/theme/tokens.stylex.d.ts +12 -0
- package/dist/theme/tokens.stylex.d.ts.map +1 -1
- package/dist/theme/tokens.stylex.js +12 -0
- package/dist/utils/focusReturn.d.ts +17 -1
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +11 -4
- package/dist/utils/getNodeText.d.ts +8 -0
- package/dist/utils/getNodeText.d.ts.map +1 -0
- package/dist/utils/getNodeText.js +37 -0
- package/dist/utils/interactionModality.d.ts +11 -2
- package/dist/utils/interactionModality.d.ts.map +1 -1
- package/dist/utils/interactionModality.js +58 -5
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +17 -8
- package/dist/utils/plainDate.d.ts +2 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +46 -3
- package/dist/utils/presentation.d.ts +50 -0
- package/dist/utils/presentation.d.ts.map +1 -0
- package/dist/utils/presentation.js +125 -0
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +20 -1
- package/dist/utils/primaryClick.d.ts +11 -0
- package/dist/utils/primaryClick.d.ts.map +1 -0
- package/dist/utils/primaryClick.js +25 -0
- package/dist/utils/timeFormat.d.ts +47 -0
- package/dist/utils/timeFormat.d.ts.map +1 -0
- package/dist/utils/timeFormat.js +240 -0
- package/dist/utils/touchPresentation.d.ts.map +1 -1
- package/dist/utils/touchPresentation.js +5 -3
- package/dist/utils/touchPresentation.stylex.d.ts +15 -0
- package/dist/utils/touchPresentation.stylex.d.ts.map +1 -0
- package/dist/utils/touchPresentation.stylex.js +33 -0
- package/dist/utils/unicodeDigits.d.ts +20 -0
- package/dist/utils/unicodeDigits.d.ts.map +1 -0
- package/dist/utils/unicodeDigits.js +70 -0
- package/locales/en.json +23 -3
- package/locales/pseudo.json +15 -0
- package/package.json +5 -4
- package/src/AlertDialog/AlertDialog.tsx +6 -5
- package/src/AlertDialog/__tests__/AlertDialog.a11y.chromium.spec.ts +18 -6
- package/src/Avatar/Avatar.spec.md +22 -22
- package/src/Avatar/Avatar.tsx +18 -1
- package/src/Avatar/__tests__/AvatarForcedColors.a11y.chromium.spec.ts +126 -0
- package/src/Badge/Badge.doc.mjs +1 -1
- package/src/Badge/Badge.tsx +19 -2
- package/src/Badge/__tests__/BadgeLargerText.a11y.chromium.spec.ts +260 -0
- package/src/BottomSheet/BottomSheet.test.tsx +46 -0
- package/src/BottomSheet/BottomSheet.tsx +1 -1
- package/src/BottomSheet/BottomSheetPanel.tsx +2 -1
- package/src/BottomSheet/useSheetGestures.test.ts +52 -0
- package/src/BottomSheet/useSheetGestures.ts +37 -6
- package/src/Breadcrumbs/__tests__/Breadcrumbs.a11y.chromium.spec.ts +18 -6
- package/src/Button/Button.tsx +4 -4
- package/src/Calendar/Calendar.spec.md +87 -48
- package/src/Calendar/__tests__/Calendar.a11y.chromium.spec.ts +21 -7
- package/src/Carousel/__tests__/Carousel.a11y.chromium.spec.ts +21 -7
- package/src/CheckboxInput/CheckboxInput.tsx +6 -5
- package/src/ClickableCard/ClickableCard.test.tsx +96 -0
- package/src/ClickableCard/ClickableCard.tsx +48 -4
- package/src/Collapsible/Collapsible.spec.md +2 -0
- package/src/Collapsible/CollapsibleGroup.spec.md +57 -29
- package/src/Collapsible/__tests__/Collapsible.a11y.chromium.spec.ts +18 -7
- package/src/Collapsible/__tests__/CollapsibleGroupAccordion.a11y.chromium.spec.ts +18 -6
- package/src/ComplexSelector/ComplexSelector.test.tsx +37 -0
- package/src/ContextMenu/ContextMenu.test.tsx +35 -0
- package/src/DateInput/DateInput.test.tsx +115 -3
- package/src/DateInput/DateInput.tsx +29 -14
- package/src/DateInput/DateInputTouch.test.tsx +76 -0
- package/src/DateInput/MonthScroller.tsx +106 -20
- package/src/DateInput/MonthScrollerSettle.test.tsx +165 -0
- package/src/DateInput/TouchDateField.tsx +14 -3
- package/src/DateInput/__tests__/MonthScrollerSteps.interaction.browser.spec.ts +312 -0
- package/src/DateRangeInput/DateRangeInput.test.tsx +46 -3
- package/src/DateRangeInput/DateRangeInput.tsx +16 -12
- package/src/DateTimeInput/DateTimeInput.doc.mjs +10 -8
- package/src/DateTimeInput/DateTimeInput.spec.md +75 -51
- package/src/DateTimeInput/DateTimeInput.test.tsx +81 -0
- package/src/DateTimeInput/DateTimeInput.tsx +46 -24
- package/src/DateTimeInput/NativeTimeSegment.tsx +4 -6
- package/src/DateTimeInput/TouchDateTimeField.tsx +3 -7
- package/src/Dialog/Dialog.test.tsx +216 -2
- package/src/Dialog/Dialog.tsx +42 -9
- package/src/Dialog/DialogHeader.tsx +5 -4
- package/src/Dialog/__tests__/DialogSecondDocument.a11y.browser.spec.ts +202 -0
- package/src/Divider/Divider.tsx +2 -1
- package/src/Drawer/Drawer.spec.md +111 -80
- package/src/Drawer/Drawer.test.tsx +35 -0
- package/src/Drawer/Drawer.tsx +13 -2
- package/src/Drawer/DrawerHeader.spec.md +181 -0
- package/src/Drawer/__tests__/DrawerNonModalPageScroll.a11y.chromium.spec.ts +267 -0
- package/src/DropdownMenu/DropdownMenu.test.tsx +41 -0
- package/src/DropdownMenu/DropdownMenu.tsx +10 -3
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +34 -0
- package/src/DropdownMenu/MenuBottomSheetActionList.tsx +6 -5
- package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts +19 -7
- package/src/DropdownMenu/__tests__/MenuButton.a11y.chromium.spec.ts +21 -9
- package/src/DropdownMenu/lazyMenuBottomSheet.test.ts +60 -0
- package/src/DropdownMenu/lazyMenuBottomSheet.ts +36 -7
- package/src/DropdownMenu/renderDropdownItems.tsx +24 -19
- package/src/EmptyState/EmptyState.tsx +2 -1
- package/src/Field/FieldLabel.tsx +5 -4
- package/src/Field/InputClearButton.tsx +3 -3
- package/src/Field/PanelSearchInput.tsx +2 -2
- package/src/FieldStatus/FieldStatus.tsx +2 -2
- package/src/FileInput/FileInput.test.tsx +21 -0
- package/src/FileInput/FileInput.tsx +4 -1
- package/src/FormLayout/FormLayout.spec.md +7 -8
- package/src/Heading/Heading.tsx +1 -1
- package/src/Icon/Icon.tsx +1 -1
- package/src/Indicator/CheckIndicator.spec.md +47 -42
- package/src/Indicator/CheckIndicator.tsx +2 -1
- package/src/Indicator/CheckboxIndicator.spec.md +40 -37
- package/src/Indicator/CheckboxIndicator.tsx +3 -1
- package/src/Indicator/Indicator.spec.md +188 -0
- package/src/Indicator/RadioIndicator.tsx +3 -1
- package/src/Item/Item.tsx +2 -1
- package/src/Item/ItemSwipeLayer.tsx +1 -1
- package/src/Kbd/Kbd.spec.md +81 -38
- package/src/Layer/__tests__/LayerBrowserHide.a11y.chromium.spec.ts +126 -0
- package/src/Layer/popoverOperations.test.ts +205 -0
- package/src/Layer/popoverOperations.ts +172 -0
- package/src/Layer/useLayer.test.tsx +348 -1
- package/src/Layer/useLayer.tsx +118 -71
- package/src/Layout/Layout.spec.md +127 -131
- package/src/Layout/Layout.tsx +1 -1
- package/src/Layout/LayoutContent.spec.md +205 -0
- package/src/Layout/LayoutContent.tsx +1 -1
- package/src/Layout/LayoutFooter.spec.md +190 -0
- package/src/Layout/LayoutFooter.tsx +1 -1
- package/src/Layout/LayoutHeader.spec.md +193 -0
- package/src/Layout/LayoutHeader.tsx +1 -1
- package/src/Layout/LayoutPanel.spec.md +194 -0
- package/src/Layout/__tests__/Layout.a11y.chromium.spec.ts +18 -6
- package/src/Lightbox/Lightbox.test.tsx +18 -0
- package/src/Lightbox/Lightbox.tsx +5 -0
- package/src/Lightbox/LightboxViewport.a11y.browser.spec.ts +8 -4
- package/src/Link/__tests__/Link.a11y.chromium.spec.ts +18 -8
- package/src/List/List.tsx +1 -1
- package/src/List/ListItem.spec.md +205 -0
- package/src/List/ListItem.tsx +3 -3
- package/src/MetadataList/MetadataList.spec.md +187 -0
- package/src/MetadataList/MetadataListItem.spec.md +165 -0
- package/src/MobileNav/MobileNav.test.tsx +15 -0
- package/src/MobileNav/MobileNav.tsx +9 -1
- package/src/MobileNav/__tests__/MobileNavHeader.a11y.chromium.spec.ts +89 -0
- package/src/MoreMenu/MoreMenu.test.tsx +11 -0
- package/src/MultiSelector/CreateRow.a11y.chromium.spec.ts +7 -8
- package/src/MultiSelector/MultiSelector.spec.md +7 -4
- package/src/MultiSelector/MultiSelector.test.tsx +270 -1
- package/src/MultiSelector/MultiSelector.tsx +25 -10
- package/src/MultiSelector/__tests__/MultiSelector.listbox.a11y.test.tsx +8 -1
- package/src/NavMenu/NavHeadingMenu.spec.md +1 -5
- package/src/NumberInput/NumberInput.doc.mjs +13 -7
- package/src/NumberInput/NumberInput.spec.md +59 -37
- package/src/NumberInput/NumberInput.tsx +13 -3
- package/src/NumberInput/__tests__/NumberInput.coarse-pointer.a11y.chromium.spec.ts +102 -0
- package/src/NumberInput/numberParser.ts +7 -45
- package/src/ProgressBar/ProgressBar.test.tsx +108 -32
- package/src/ProgressBar/ProgressBar.tsx +58 -10
- package/src/ProgressBar/__tests__/ProgressBar.a11y.chromium.spec.ts +21 -9
- package/src/ProgressBar/__tests__/ProgressBarMotion.a11y.chromium.spec.ts +831 -0
- package/src/Resizable/__tests__/ResizeHandle.a11y.chromium.spec.ts +21 -14
- package/src/Resizable/useResizable.test.ts +43 -0
- package/src/Resizable/useResizable.ts +32 -9
- package/src/SegmentedControl/SegmentedControl.test.tsx +84 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +11 -5
- package/src/Selector/Selector.test.tsx +90 -1
- package/src/Selector/__tests__/Selector.combobox.a11y.test.tsx +8 -1
- package/src/Selector/__tests__/Selector.listbox.a11y.test.tsx +8 -1
- package/src/Selector/useSelectorPresentation.ts +31 -3
- package/src/SideNav/SideNav.test.tsx +27 -0
- package/src/SideNav/__tests__/SideNavRailMotion.interaction.browser.spec.ts +176 -51
- package/src/Skeleton/Skeleton.tsx +3 -1
- package/src/Slider/Slider.test.tsx +31 -0
- package/src/Slider/Slider.tsx +8 -3
- package/src/Slider/__tests__/Slider.a11y.chromium.spec.ts +19 -7
- package/src/Spinner/Spinner.tsx +5 -3
- package/src/Stack/Stack.tsx +1 -1
- package/src/Stack/StackItem.tsx +1 -1
- package/src/TabList/TabList.test.tsx +58 -4
- package/src/TabList/TabList.tsx +16 -1
- package/src/TabList/__tests__/TabPressPointer.interaction.browser.spec.ts +163 -0
- package/src/Table/__tests__/Table.a11y.chromium.spec.ts +18 -6
- package/src/Table/plugins/columnResize/useTableColumnResize.test.tsx +22 -0
- package/src/Table/plugins/columnResize/useTableColumnResize.tsx +8 -4
- package/src/Text/Text.tsx +1 -1
- package/src/Text/useTruncation.test.tsx +128 -1
- package/src/Text/useTruncation.ts +23 -5
- package/src/TextArea/TextArea.spec.md +10 -13
- package/src/TextArea/TextArea.test.tsx +60 -0
- package/src/TextArea/TextArea.tsx +15 -1
- package/src/TextInput/TextInput.test.tsx +21 -0
- package/src/TextInput/TextInput.tsx +3 -1
- package/src/TimeInput/NativeTimeInput.test.tsx +17 -0
- package/src/TimeInput/Presentation.test.tsx +21 -0
- package/src/TimeInput/TimeInput.doc.mjs +8 -8
- package/src/TimeInput/TimeInput.spec.md +45 -48
- package/src/TimeInput/TimeInput.test.tsx +76 -0
- package/src/TimeInput/TimeInput.tsx +36 -18
- package/src/TimeInput/TouchTimeField.tsx +4 -6
- package/src/Timestamp/Timestamp.spec.md +6 -12
- package/src/Timestamp/Timestamp.test.tsx +30 -5
- package/src/Timestamp/Timestamp.tsx +6 -2
- package/src/Timestamp/TimestampHoverCard.tsx +4 -4
- package/src/Toast/Toast.spec.md +14 -20
- package/src/Toast/Toast.tsx +104 -36
- package/src/Toast/ToastViewport.test.tsx +719 -1
- package/src/Toast/ToastViewport.tsx +100 -50
- package/src/Tokenizer/Tokenizer.spec.md +5 -3
- package/src/Tokenizer/Tokenizer.test.tsx +68 -0
- package/src/Tokenizer/Tokenizer.tsx +14 -2
- package/src/Tokenizer/TokenizerBottomSheet.test.tsx +15 -4
- package/src/Tokenizer/TokenizerBottomSheet.tsx +3 -3
- package/src/Toolbar/Toolbar.spec.md +5 -6
- package/src/Toolbar/Toolbar.test.tsx +30 -0
- package/src/Toolbar/Toolbar.tsx +2 -1
- package/src/Toolbar/__tests__/Toolbar.a11y.chromium.spec.ts +18 -6
- package/src/Tooltip/__tests__/Tooltip.a11y.chromium.spec.ts +18 -7
- package/src/TopNav/TopNav.test.tsx +27 -0
- package/src/TopNav/TopNavMegaMenu.test.tsx +21 -0
- package/src/TopNav/TopNavMegaMenu.tsx +4 -1
- package/src/TopNav/TopNavMenu.test.tsx +17 -0
- package/src/TopNav/TopNavMenu.tsx +1 -0
- package/src/Typeahead/Typeahead.test.tsx +40 -0
- package/src/Typeahead/Typeahead.tsx +12 -1
- package/src/__tests__/pressState.ts +8 -4
- package/src/gestures/GestureArena.ts +35 -0
- package/src/gestures/GestureHost.ts +2065 -0
- package/src/gestures/GestureRecognizer.ts +18 -0
- package/src/gestures/LongPressGestureRecognizer.ts +4 -0
- package/src/gestures/PanGestureRecognizer.ts +4 -0
- package/src/gestures/PinchGestureRecognizer.ts +148 -0
- package/src/gestures/ScreenEdgePanGestureRecognizer.ts +256 -0
- package/src/gestures/SwipeGestureRecognizer.ts +197 -0
- package/src/gestures/TapGestureRecognizer.ts +4 -0
- package/src/gestures/VelocityTracker.ts +10 -3
- package/src/gestures/__tests__/GestureHost.test.ts +2087 -0
- package/src/gestures/__tests__/PanGestureRecognizer.test.ts +4 -4
- package/src/gestures/__tests__/PinchGestureRecognizer.test.ts +74 -0
- package/src/gestures/__tests__/ScreenEdgePanGestureRecognizer.test.ts +498 -0
- package/src/gestures/__tests__/SwipeGestureRecognizer.test.ts +108 -0
- package/src/gestures/__tests__/arena.test.ts +5 -0
- package/src/gestures/__tests__/arenaPinchSwipeEdge.test.ts +193 -0
- package/src/gestures/__tests__/browser/build-fixture.mjs +46 -0
- package/src/gestures/__tests__/browser/fixture.ts +307 -0
- package/src/gestures/__tests__/browser/gestures.interaction.browser.spec.ts +1137 -0
- package/src/gestures/__tests__/browserNegotiation.test.ts +293 -0
- package/src/gestures/__tests__/haptics.test.ts +187 -0
- package/src/gestures/__tests__/harness.ts +21 -2
- package/src/gestures/__tests__/recognizerKind.test.ts +78 -0
- package/src/gestures/__tests__/touchActionRule.test.ts +54 -0
- package/src/gestures/haptics.ts +203 -0
- package/src/gestures/nativeScroll.ts +277 -0
- package/src/gestures/touchAction.ts +191 -0
- package/src/gestures/touchActionRule.ts +157 -0
- package/src/gestures/types.ts +30 -9
- package/src/hooks/index.ts +5 -1
- package/src/hooks/modalAnnounce.ts +129 -72
- package/src/hooks/useAdaptivePresentation.ts +4 -1
- package/src/hooks/useAnnounce.doc.mjs +35 -3
- package/src/hooks/useAnnounce.replace.test.tsx +516 -0
- package/src/hooks/useAnnounce.ts +209 -102
- package/src/hooks/useAnnounceRenderedText.adopters.test.tsx +10 -1
- package/src/hooks/useAnnounceRenderedText.ts +17 -3
- package/src/hooks/useBusyAnnouncement.ts +7 -10
- package/src/hooks/useMenuHover.ts +15 -1
- package/src/i18n/generated-locales/en.generated.ts +6 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +6 -0
- package/src/motion/README.md +11 -1
- package/src/motion/animator.test.ts +151 -3
- package/src/motion/animator.ts +149 -33
- package/src/theme/Theme.doc.mjs +1 -1
- package/src/theme/defineTheme.ts +117 -8
- package/src/theme/derivedVarRegistry.test.ts +4 -0
- package/src/theme/domainTokens/domainTokenDefaults.ts +19 -0
- package/src/theme/domainTokens/index.ts +6 -10
- package/src/theme/expandMotionScale.test.ts +1 -1
- package/src/theme/index.ts +5 -0
- package/src/theme/motionKnobs.ts +82 -0
- package/src/theme/resolveThemeValues.ts +68 -6
- package/src/theme/themeAdaptations.ts +52 -12
- package/src/theme/themeMotion.test.ts +620 -0
- package/src/theme/themeMotion.ts +221 -0
- package/src/theme/tokenReferences.ts +149 -0
- package/src/theme/tokens.stylex.ts +10 -0
- package/src/theme/tokens.ts +15 -158
- package/src/utils/focusReturn.ts +17 -6
- package/src/utils/getNodeText.test.ts +24 -0
- package/src/utils/getNodeText.ts +37 -0
- package/src/utils/interactionModality.test.ts +45 -1
- package/src/utils/interactionModality.ts +64 -5
- package/src/utils/interactionOverlay.stylex.ts +12 -3
- package/src/utils/plainDate.test.ts +90 -0
- package/src/utils/plainDate.ts +58 -3
- package/src/utils/presentation.test.ts +380 -0
- package/src/utils/presentation.ts +180 -0
- package/src/utils/pressFeedback.test.ts +138 -0
- package/src/utils/pressFeedback.ts +34 -11
- package/src/utils/pressPaintPriority.test.ts +80 -0
- package/src/utils/primaryClick.test.ts +38 -0
- package/src/utils/primaryClick.ts +28 -0
- package/src/utils/timeFormat.test.ts +204 -0
- package/src/utils/timeFormat.ts +314 -0
- package/src/utils/touchPresentation.stylex.ts +43 -0
- package/src/utils/touchPresentation.test.ts +140 -1
- package/src/utils/touchPresentation.ts +5 -3
- package/src/utils/unicodeDigits.test.ts +44 -0
- package/src/utils/unicodeDigits.ts +71 -0
|
@@ -52,9 +52,6 @@ import {Spinner} from '../Spinner';
|
|
|
52
52
|
import {VisuallyHidden} from '../VisuallyHidden';
|
|
53
53
|
import {
|
|
54
54
|
type ISOTimeString,
|
|
55
|
-
parseTimeInput,
|
|
56
|
-
formatDisplayTime12h,
|
|
57
|
-
formatDisplayTime24h,
|
|
58
55
|
formatISOTime,
|
|
59
56
|
adjustTime,
|
|
60
57
|
isImeKeyEvent,
|
|
@@ -81,7 +78,12 @@ import {InputGroupInternalContext} from '../InputGroup/InputGroupInternalContext
|
|
|
81
78
|
import {groupStyles, inputGroupItemProps} from '../InputGroup/groupStyles';
|
|
82
79
|
import {useTooltip} from '../Tooltip';
|
|
83
80
|
import {themeProps} from '../utils/themeProps';
|
|
84
|
-
import {useTranslator} from '../i18n';
|
|
81
|
+
import {useLocale, useTranslator} from '../i18n';
|
|
82
|
+
import {
|
|
83
|
+
formatLocaleTime,
|
|
84
|
+
parseLocaleTime,
|
|
85
|
+
resolveHourFormat,
|
|
86
|
+
} from '../utils/timeFormat';
|
|
85
87
|
|
|
86
88
|
import {useMergedRefs} from '../hooks/useMergedRefs';
|
|
87
89
|
import {NativeTimeSegment} from '../DateTimeInput/NativeTimeSegment';
|
|
@@ -294,9 +296,13 @@ export interface TimeInputProps extends Omit<
|
|
|
294
296
|
|
|
295
297
|
/**
|
|
296
298
|
* Hour format for display.
|
|
297
|
-
* - '12h': Display as 12-hour with
|
|
299
|
+
* - '12h': Display as 12-hour with the locale's day period (e.g., "2:30 PM")
|
|
298
300
|
* - '24h': Display as 24-hour (e.g., "14:30")
|
|
299
|
-
*
|
|
301
|
+
*
|
|
302
|
+
* When unset, follows the `InternationalizationProvider` locale's hour
|
|
303
|
+
* cycle: `en-US` reads 12-hour, `en-GB` and `de-DE` read 24-hour. A
|
|
304
|
+
* per-user preference rides on the locale tag (`en-US-u-hc-h23`).
|
|
305
|
+
* @default the locale's hour cycle
|
|
300
306
|
*/
|
|
301
307
|
hourFormat?: TimeInputHourFormat;
|
|
302
308
|
|
|
@@ -449,6 +455,7 @@ function TimeField({
|
|
|
449
455
|
...controlProps
|
|
450
456
|
} = rest;
|
|
451
457
|
const t = useTranslator();
|
|
458
|
+
const locale = useLocale();
|
|
452
459
|
const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
|
|
453
460
|
const placeholder =
|
|
454
461
|
placeholderFromProps ?? t('@astryx.timeInput.placeholder');
|
|
@@ -542,9 +549,11 @@ function TimeField({
|
|
|
542
549
|
const [pendingInput, setPendingInput] = useState<string | null>(null);
|
|
543
550
|
const [isFocused, setIsFocused] = useState(false);
|
|
544
551
|
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
552
|
+
const formatDisplayTime = useCallback(
|
|
553
|
+
(time: ISOTimeString, includeSeconds: boolean) =>
|
|
554
|
+
formatLocaleTime(time, locale, hourFormat, includeSeconds),
|
|
555
|
+
[locale, hourFormat],
|
|
556
|
+
);
|
|
548
557
|
|
|
549
558
|
// Unified change handler that fires both onChange and changeAction
|
|
550
559
|
const fireChange = useCallback(
|
|
@@ -576,21 +585,23 @@ function TimeField({
|
|
|
576
585
|
if (pendingInput === null || !pendingInput.trim()) {
|
|
577
586
|
return true;
|
|
578
587
|
}
|
|
579
|
-
const parsed =
|
|
588
|
+
const parsed = parseLocaleTime(pendingInput, locale, hasSeconds);
|
|
580
589
|
if (!parsed) {
|
|
581
590
|
return false;
|
|
582
591
|
}
|
|
583
592
|
// Also check min/max range
|
|
584
593
|
return isTimeInRange(parsed, min, max);
|
|
585
|
-
}, [pendingInput, hasSeconds, min, max]);
|
|
594
|
+
}, [pendingInput, locale, hasSeconds, min, max]);
|
|
586
595
|
|
|
587
596
|
// Placeholder that shows format hint when focused and empty
|
|
588
597
|
const displayPlaceholder = useMemo(() => {
|
|
589
598
|
if (isFocused && !displayValue) {
|
|
590
|
-
return hourFormat === '12h'
|
|
599
|
+
return hourFormat === '12h'
|
|
600
|
+
? t('@astryx.dateTimeInput.timeHint12h')
|
|
601
|
+
: t('@astryx.dateTimeInput.timeHint24h');
|
|
591
602
|
}
|
|
592
603
|
return placeholder;
|
|
593
|
-
}, [isFocused, displayValue, hourFormat, placeholder]);
|
|
604
|
+
}, [isFocused, displayValue, hourFormat, placeholder, t]);
|
|
594
605
|
|
|
595
606
|
// Handle input text change - update immediately if valid
|
|
596
607
|
const handleInputChange = useCallback(
|
|
@@ -604,12 +615,12 @@ function TimeField({
|
|
|
604
615
|
setPendingInput(newValue);
|
|
605
616
|
|
|
606
617
|
// If the input is valid, update immediately (don't wait for blur)
|
|
607
|
-
const parsed =
|
|
618
|
+
const parsed = parseLocaleTime(newValue, locale, hasSeconds);
|
|
608
619
|
if (parsed && isTimeInRange(parsed, min, max) && parsed !== value) {
|
|
609
620
|
fireChange(parsed);
|
|
610
621
|
}
|
|
611
622
|
},
|
|
612
|
-
[hasSeconds, min, max, value, fireChange, isDisabled],
|
|
623
|
+
[locale, hasSeconds, min, max, value, fireChange, isDisabled],
|
|
613
624
|
);
|
|
614
625
|
|
|
615
626
|
// Handle focus
|
|
@@ -646,7 +657,7 @@ function TimeField({
|
|
|
646
657
|
return;
|
|
647
658
|
}
|
|
648
659
|
|
|
649
|
-
const parsed =
|
|
660
|
+
const parsed = parseLocaleTime(pendingInput, locale, hasSeconds);
|
|
650
661
|
if (parsed && isTimeInRange(parsed, min, max)) {
|
|
651
662
|
// Valid time - update if different
|
|
652
663
|
if (parsed !== value) {
|
|
@@ -656,7 +667,7 @@ function TimeField({
|
|
|
656
667
|
// Clear pending input - display will revert to formatted value
|
|
657
668
|
setPendingInput(null);
|
|
658
669
|
},
|
|
659
|
-
[pendingInput, isDisabled, value, fireChange, hasSeconds, min, max],
|
|
670
|
+
[pendingInput, isDisabled, value, fireChange, locale, hasSeconds, min, max],
|
|
660
671
|
);
|
|
661
672
|
|
|
662
673
|
// Handle keyboard navigation on input
|
|
@@ -950,11 +961,18 @@ export function TimeInput(props: TimeInputProps) {
|
|
|
950
961
|
props.nativePicker,
|
|
951
962
|
'time',
|
|
952
963
|
);
|
|
964
|
+
const locale = useLocale();
|
|
953
965
|
const {
|
|
954
966
|
presentation: _presentation,
|
|
955
967
|
nativePicker: _nativePicker,
|
|
956
|
-
...
|
|
968
|
+
...surfaceProps
|
|
957
969
|
} = props;
|
|
970
|
+
// Every surface gets the resolved hour format, so the typed text, the
|
|
971
|
+
// native field's resting text, and the sheet wheels agree.
|
|
972
|
+
const rest = {
|
|
973
|
+
...surfaceProps,
|
|
974
|
+
hourFormat: resolveHourFormat(locale, props.hourFormat),
|
|
975
|
+
};
|
|
958
976
|
if (effective === 'native') {
|
|
959
977
|
// Deprecated `always` keeps released fallbacks (FR2 legacy); only an
|
|
960
978
|
// explicit `presentation="native"` is forced.
|
|
@@ -46,7 +46,8 @@ import {useBusyAnnouncement} from '../hooks/useBusyAnnouncement';
|
|
|
46
46
|
import {useMergedRefs} from '../hooks/useMergedRefs';
|
|
47
47
|
import {useResolvedRequired} from '../hooks/useResolvedRequired';
|
|
48
48
|
import {Icon} from '../Icon';
|
|
49
|
-
import {useTranslator} from '../i18n';
|
|
49
|
+
import {useLocale, useTranslator} from '../i18n';
|
|
50
|
+
import {formatLocaleTime} from '../utils/timeFormat';
|
|
50
51
|
import {colorVars, sizeVars, spacingVars} from '../theme/tokens.stylex';
|
|
51
52
|
import {useSize} from '../SizeContext/SizeContext';
|
|
52
53
|
import {Spinner} from '../Spinner';
|
|
@@ -57,8 +58,6 @@ import {focusOutlineStyles} from '../utils/focusOutline.stylex';
|
|
|
57
58
|
import {themeProps} from '../utils/themeProps';
|
|
58
59
|
import {
|
|
59
60
|
clampTime,
|
|
60
|
-
formatDisplayTime12h,
|
|
61
|
-
formatDisplayTime24h,
|
|
62
61
|
formatISOTime,
|
|
63
62
|
getInputARIA,
|
|
64
63
|
isTimeInRange,
|
|
@@ -238,6 +237,7 @@ export function TouchTimeField({
|
|
|
238
237
|
...controlProps
|
|
239
238
|
} = rest;
|
|
240
239
|
const t = useTranslator();
|
|
240
|
+
const locale = useLocale();
|
|
241
241
|
const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
|
|
242
242
|
const placeholder =
|
|
243
243
|
placeholderFromProps ?? t('@astryx.timeInput.placeholder');
|
|
@@ -302,10 +302,8 @@ export function TouchTimeField({
|
|
|
302
302
|
[changeAction, isEffectivelyDisabled, onChange, setOptimisticValue],
|
|
303
303
|
);
|
|
304
304
|
|
|
305
|
-
const formatDisplayTime =
|
|
306
|
-
hourFormat === '12h' ? formatDisplayTime12h : formatDisplayTime24h;
|
|
307
305
|
const displayValue = optimisticValue
|
|
308
|
-
?
|
|
306
|
+
? formatLocaleTime(optimisticValue, locale, hourFormat, hasSeconds)
|
|
309
307
|
: '';
|
|
310
308
|
|
|
311
309
|
const fallbackTime = useMemo(() => {
|
|
@@ -44,7 +44,7 @@ system_specs: [spec:AST-009, spec:AST-085]
|
|
|
44
44
|
| Behavior | Relative output carries the full absolute date as its default accessible name; relative output, or configured `tooltipEntries`, attach a keyboard-reachable hover card of copyable rows. |
|
|
45
45
|
| End-user impact | Readers see compact or exact times in their locale; screen-reader users hear the full date and time zone; keyboard users can open and copy the exact time. |
|
|
46
46
|
| Builder impact | None; the record describes shipped behavior. |
|
|
47
|
-
| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes.
|
|
47
|
+
| Compatibility/readiness | Released behavior recorded as current; no API, default, or output changes. Three implementation gaps are listed under Current-state impact. |
|
|
48
48
|
| Review checks | Reject a relative timestamp without the full absolute name when the caller names nothing, a hover card without a tab stop, a change that makes more server markup depend on the server's zone, or a crash on an unparseable value. |
|
|
49
49
|
| Governing rules | `architecture:internationalization/INV4,INV8,INV10`; `architecture:react-component-runtime/INV1,INV3,INV5`; `architecture:public-component-api/INV5,INV6,INV8`. |
|
|
50
50
|
|
|
@@ -70,11 +70,6 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
70
70
|
|
|
71
71
|
## Current-state impact
|
|
72
72
|
|
|
73
|
-
- **Caller name and tab stop replaced (FR5, FR9).** On relative output the
|
|
74
|
-
full-date name replaces a caller `aria-label`, and while a card is attached
|
|
75
|
-
the component's `tabIndex={0}` replaces a caller `tabIndex`, where
|
|
76
|
-
`architecture:public-component-api` INV5 lets a caller's explicit input reach
|
|
77
|
-
the element.
|
|
78
73
|
- **Focus lost when the card attaches (FR6, AR3).** While the card module
|
|
79
74
|
loads, a fallback `time` with the tab stop renders; when the card attaches it
|
|
80
75
|
replaces that element, so keyboard focus placed on it falls to the page body
|
|
@@ -129,11 +124,11 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
129
124
|
| FR2 | `auto` shows `relative` when the instant is within `autoThreshold` seconds of now (default seven days) and `date_time` otherwise. `relative` uses the locale's long relative phrase and `relative_short` its narrow phrase; a value a few seconds in the future reads as "now". Absolute formats use the shared instant formatter in the provider locale with Gregorian years; `system_*` formats are machine-readable, and `unix_seconds` is zone-independent. `isTimezoneShown` appends the zone abbreviation to `date_time` and `time` only. | Current source and tests |
|
|
130
125
|
| FR3 | Server markup does not depend on the server's time zone and hydrates without a mismatch. A format that needs the clock renders `date_time` in UTC with the zone shown until the client can read the clock; the client then shows the resolved format without committing the UTC placeholder. Implementation gap: absolute formats other than `unix_seconds` render in the host's time zone, so their server markup depends on the server's zone and hydrating it in another zone produces a text mismatch (Current-state impact). | Current source and tests |
|
|
131
126
|
| FR4 | With `isLive` and relative output, the clock refreshes every second under a minute old, every 30 seconds under an hour, every minute under a day, and every five minutes beyond; the timer is cleared on unmount or when the inputs change. Locale changes update the output live. | Current source and tests |
|
|
132
|
-
| FR5 | Relative output is named by the full absolute date and the long time-zone name unless a caller names the element; absolute output adds no name. A caller's explicit `aria-label` reaches the element (`architecture:public-component-api` INV5).
|
|
127
|
+
| FR5 | Relative output is named by the full absolute date and the long time-zone name unless a caller names the element; absolute output adds no name. A caller's explicit `aria-label` reaches the element (`architecture:public-component-api` INV5). | Current source and tests |
|
|
133
128
|
| FR6 | When `hasTooltip` is true and the output is relative or `tooltipEntries` is non-empty, a lazily loaded HoverCard named "Timestamp details" attaches above the timestamp, opening on hover and on keyboard focus; the `time` element gains `tabIndex={0}`. Otherwise no card renders and no tab stop is added. Focus placed on the timestamp stays there when the card attaches (`spec:AST-085` FR4). Implementation gap: while the card module loads, a fallback `time` with the tab stop renders, and attaching the card replaces it, so focus placed on it falls to the page body and no card opens (Current-state impact). | Current source and tests |
|
|
134
129
|
| FR7 | The card is a description list in a grid: an optional label column (present when any row has a label), the value column, and a trailing action column (present when any row is copyable). Without entries it has one copyable row with the full absolute time in the viewer's zone. Each configured entry is one row in the given order, rendered in its own time zone and format, read-only unless `isCopyable`. An unknown time zone does not crash. A description list holds only name-value groups (WCAG 2.2 1.3.1). Implementation gaps: once any row is copyable, every row carries an action-cell `div` inside its row group (empty on read-only rows), so the open card fails the `definition-list` structure check, and a card with no labelled rows, the default card included, renders each row as a lone `dd` with no `dt` (Current-state impact). | Current source and tests |
|
|
135
130
|
| FR8 | A copy button is a small ghost IconButton on the `timestamp-copy-button` target, named "Copy {value}" with a "Copy" tooltip; activating it writes the row's value to the clipboard, switches to a check icon and the "Copied" name and tooltip for 1.5 seconds, and announces "Copied" politely. A clipboard rejection does nothing. | Current source and tests |
|
|
136
|
-
| FR9 | `ref`, `data-testid`, and other supported DOM, ARIA, data, and event props reach the `time` element; `xstyle`, `className`, and `style` reach the Text wrapper. A caller `aria-labelledby` names the element in place of FR5's name. A caller's explicit `tabIndex` reaches the element (`architecture:public-component-api` INV5).
|
|
131
|
+
| FR9 | `ref`, `data-testid`, and other supported DOM, ARIA, data, and event props reach the `time` element; `xstyle`, `className`, and `style` reach the Text wrapper. A caller `aria-labelledby` names the element in place of FR5's name. A caller's explicit `tabIndex` reaches the element (`architecture:public-component-api` INV5). | Current source and tests |
|
|
137
132
|
|
|
138
133
|
### Allowed variation
|
|
139
134
|
|
|
@@ -161,8 +156,7 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
161
156
|
- **ORD2 — Card rows.** Non-empty `tooltipEntries` → the default full-date row.
|
|
162
157
|
- **ORD3 — Time element attributes.** `datetime` and `data-testid` are set,
|
|
163
158
|
then caller props; the relative name and the card's tab stop apply only
|
|
164
|
-
where the caller sets no `aria-label` or `tabIndex
|
|
165
|
-
the caller's, the FR5 and FR9 gaps).
|
|
159
|
+
where the caller sets no `aria-label` or `tabIndex`.
|
|
166
160
|
|
|
167
161
|
### Performance and resources
|
|
168
162
|
|
|
@@ -230,10 +224,10 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
230
224
|
| FR1, FR2 | `Timestamp.test.tsx` format, auto, locale, and invalid-value tests; stable visual baseline `core-timestamp--default` | Every format; thresholds; locales; unparseable values; default | A wrong phrase, a crossed tier, a non-Gregorian year, a missing `time` element or `datetime`, a crash, or a missing development warning for an unparseable value fails; a changed default type or color comes back changed for review. Gap: no test asserts the `timestamp` target or its format reflection. | `audit:Timestamp/behavior` |
|
|
231
225
|
| FR3 | `Timestamp.test.tsx` server-rendering suite | Server zones; hydration | Zone-dependent markup, a hydration mismatch, or a committed placeholder fails. Gap: no test covers an absolute format rendered on a server in another zone. | `audit:Timestamp/behavior` |
|
|
232
226
|
| FR4, PR1 | `Timestamp.test.tsx` live-update and locale tests | Live relative output; locale change | A missing refresh or a stale locale fails. Gap: the per-tier refresh intervals and the timer cleanup on unmount or input change have no automated check. | `audit:Timestamp/behavior` |
|
|
233
|
-
| FR5, AR2 | `Timestamp.test.tsx` naming tests | Relative, absolute, time-zone spelling | A missing or short-zone name, or a name on absolute output, fails.
|
|
227
|
+
| FR5, AR2 | `Timestamp.test.tsx` naming tests | Relative, absolute, time-zone spelling | A missing or short-zone name, or a name on absolute output, fails. A caller `aria-label` replaced on relative output fails. | `audit:Timestamp/a11y` |
|
|
234
228
|
| FR6, AR3 | `Timestamp.test.tsx` keyboard-reachability suite | Relative, absolute, disabled, entries removed | A missing tab stop, `aria-expanded` on the trigger, or a stray tab stop fails. The aria-expanded test also pins `aria-haspopup` on the Text wrapper, which is current behavior, not contract. Gap: no test covers focus on the timestamp while the card module loads, or `aria-controls`. | `audit:Timestamp/a11y` |
|
|
235
229
|
| FR7, FR8, AR4 | `Timestamp.test.tsx` hover-card suites; `tooltipEntries.test.ts`; `useClipboard.test.tsx` | Default row, entries, copyable rows, unknown zone | A wrong row count or order, an unpaired label, a copy button on a read-only row, a wrong copied value, a missing copied state, or a missing announcement fails. Gap: no check runs the `definition-list` structure rule on the open card (the recorded gap); the grid columns and the 1.5-second reset have no automated check; `useClipboard.test.tsx` covers the clipboard-rejection no-op. The lone-`dd` rows of a label-less card are also unchecked. | `audit:Timestamp/behavior` |
|
|
236
|
-
| FR9 | `Timestamp.test.tsx` ref, test-id, and pass-through tests | Ref, test id, caller props | A ref, test id, or caller prop missing from the `time` element fails. Gap: no test asserts that `xstyle`, `className`, and `style` reach the Text wrapper, or covers a caller `aria-labelledby
|
|
230
|
+
| FR9 | `Timestamp.test.tsx` ref, test-id, and pass-through tests | Ref, test id, caller props | A ref, test id, or caller prop missing from the `time` element fails. A caller `tabIndex` replaced while a card is attached fails. Gap: no test asserts that `xstyle`, `className`, and `style` reach the Text wrapper, or covers a caller `aria-labelledby`. | `audit:Timestamp/behavior` |
|
|
237
231
|
| Theming anatomy map | `scripts/check-knowledge.mjs` | Consumer anatomy, targets, HoverCard delegate | Missing, extra, or stale mappings fail repository validation. | `audit:Timestamp/theming` |
|
|
238
232
|
| AR1 | `Timestamp.test.tsx` `datetime` tests | `date_time`; `date` | A missing or wrong ISO `datetime` on `date_time`, or a missing one on `date`, fails. Gap: no test asserts the exact `datetime` on relative or other absolute formats. | `audit:Timestamp/a11y` |
|
|
239
233
|
| AR2, AR4 | Accessibility-tree evidence (`spec:AST-009` FR3) | Relative output; copy buttons | Gap: no accessibility-tree check proves the computed name of relative output or the copy-button names; the unit tests query the DOM. | `audit:Timestamp/a11y` |
|
|
@@ -768,6 +768,20 @@ describe('Timestamp', () => {
|
|
|
768
768
|
HTMLElement.prototype.hidePopover = originalHidePopover;
|
|
769
769
|
});
|
|
770
770
|
|
|
771
|
+
it("keeps a caller's tabIndex while the hover card is attached (FR9)", async () => {
|
|
772
|
+
render(
|
|
773
|
+
<Timestamp
|
|
774
|
+
value={Date.now() / 1000 - 3600}
|
|
775
|
+
format="relative"
|
|
776
|
+
tabIndex={-1}
|
|
777
|
+
data-testid="ts"
|
|
778
|
+
/>,
|
|
779
|
+
);
|
|
780
|
+
expect(screen.getByTestId('ts')).toHaveAttribute('tabindex', '-1');
|
|
781
|
+
await openTimestampHoverCard();
|
|
782
|
+
expect(screen.getByTestId('ts')).toHaveAttribute('tabindex', '-1');
|
|
783
|
+
});
|
|
784
|
+
|
|
771
785
|
it('makes the <time> element focusable while the hover card is attached', () => {
|
|
772
786
|
render(
|
|
773
787
|
<Timestamp
|
|
@@ -1449,7 +1463,7 @@ describe('Timestamp pass-through props', () => {
|
|
|
1449
1463
|
expect(time).toHaveAttribute('data-source', 'cms');
|
|
1450
1464
|
});
|
|
1451
1465
|
|
|
1452
|
-
it(
|
|
1466
|
+
it("keeps a caller's aria-label on a relative timestamp (FR5)", () => {
|
|
1453
1467
|
render(
|
|
1454
1468
|
<Timestamp
|
|
1455
1469
|
value={Date.now()}
|
|
@@ -1463,10 +1477,21 @@ describe('Timestamp pass-through props', () => {
|
|
|
1463
1477
|
expect({
|
|
1464
1478
|
ariaLabel: stamp.getAttribute('aria-label'),
|
|
1465
1479
|
dataSource: stamp.getAttribute('data-source'),
|
|
1466
|
-
}).toEqual({
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1480
|
+
}).toEqual({ariaLabel: 'Caller label', dataSource: 'cms'});
|
|
1481
|
+
});
|
|
1482
|
+
|
|
1483
|
+
it('names a relative timestamp by the full date when the caller names nothing (FR5)', () => {
|
|
1484
|
+
render(
|
|
1485
|
+
<Timestamp
|
|
1486
|
+
value={Date.now()}
|
|
1487
|
+
format="relative"
|
|
1488
|
+
aria-label={undefined}
|
|
1489
|
+
data-testid="stamp"
|
|
1490
|
+
/>,
|
|
1491
|
+
);
|
|
1492
|
+
expect(screen.getByTestId('stamp').getAttribute('aria-label')).toMatch(
|
|
1493
|
+
/\d{4}/,
|
|
1494
|
+
);
|
|
1470
1495
|
});
|
|
1471
1496
|
});
|
|
1472
1497
|
|
|
@@ -443,7 +443,10 @@ export function Timestamp({
|
|
|
443
443
|
// before rendering — but keep the guard local: an empty aria-label
|
|
444
444
|
// must be omitted entirely (not rendered as aria-label="") so AT
|
|
445
445
|
// falls back to reading the visible <time> content.
|
|
446
|
-
|
|
446
|
+
// A caller's own name wins (`component:Timestamp` FR5).
|
|
447
|
+
{...(isRelativeFormat(effectiveFormat) &&
|
|
448
|
+
ariaLabelText !== '' &&
|
|
449
|
+
rest['aria-label'] == null
|
|
447
450
|
? {'aria-label': ariaLabelText}
|
|
448
451
|
: {})}
|
|
449
452
|
// The hover card is anchored here with focusTrigger="always", which
|
|
@@ -454,7 +457,8 @@ export function Timestamp({
|
|
|
454
457
|
// gratuitous tab stops otherwise. The card carries its own
|
|
455
458
|
// dashed-underline hover indication as the affordance, so the anchor
|
|
456
459
|
// needs no separate focus outline.
|
|
457
|
-
|
|
460
|
+
// A caller's own tabIndex wins (`component:Timestamp` FR9).
|
|
461
|
+
{...(showTooltip && rest.tabIndex == null ? {tabIndex: 0} : {})}>
|
|
458
462
|
{displayText}
|
|
459
463
|
</time>
|
|
460
464
|
</Text>
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
import type {ReactNode} from 'react';
|
|
27
27
|
import {useCallback} from 'react';
|
|
28
28
|
import * as stylex from '@stylexjs/stylex';
|
|
29
|
-
import {HoverCard} from '../HoverCard';
|
|
30
|
-
import {IconButton} from '../IconButton';
|
|
31
|
-
import {Icon} from '../Icon';
|
|
29
|
+
import {HoverCard} from '../HoverCard/HoverCard';
|
|
30
|
+
import {IconButton} from '../IconButton/IconButton';
|
|
31
|
+
import {Icon} from '../Icon/Icon';
|
|
32
32
|
import {useClipboard} from '../hooks/useClipboard';
|
|
33
|
-
import {useTranslator} from '../i18n';
|
|
33
|
+
import {useTranslator} from '../i18n/useTranslator';
|
|
34
34
|
import {themeProps} from '../utils/themeProps';
|
|
35
35
|
import {
|
|
36
36
|
colorVars,
|
package/src/Toast/Toast.spec.md
CHANGED
|
@@ -50,7 +50,7 @@ system_specs:
|
|
|
50
50
|
| Behavior | A stack of non-modal notification cards at one viewport corner. Each toast is announced once, can auto-hide (pausing while hovered, focused, touched, or the window is blurred), and dismisses by its button, a vertical swipe toward its edge, or code. F6 moves focus into the newest toast. |
|
|
51
51
|
| End-user impact | Users get brief notices without losing their place; screen-reader users hear each toast once; keyboard users reach toast controls with F6 and land somewhere sensible after dismissing; touch users swipe toasts away. |
|
|
52
52
|
| Builder impact | None. |
|
|
53
|
-
| Compatibility/readiness | Records shipped behavior; no public change. Twenty
|
|
53
|
+
| Compatibility/readiness | Records shipped behavior; no public change. Twenty implementation gaps, listed under Current-state impact. |
|
|
54
54
|
| Review checks | Reject a toast announced more than once per show, a dismissal that drops focus to the body, an auto-hide that runs while the user is reading or interacting, or a swipe as the only way to dismiss. |
|
|
55
55
|
| Governing rules | `spec:AST-086` FR1; `spec:AST-003` (modal rehosting); `spec:AST-094`; `spec:AST-100`; `spec:AST-059` FR6; `architecture:layer-runtime`; `design:bidirectionality`; `design:reduced-motion`. |
|
|
56
56
|
|
|
@@ -93,12 +93,9 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
93
93
|
once at release on projected travel and cancel a release moving back, and
|
|
94
94
|
`spec:AST-100` FR1, FR2, and FR4 take the release velocity from the shared
|
|
95
95
|
tracker.
|
|
96
|
-
- **
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
or with the pointer over it. A toast raised while the window is already
|
|
100
|
-
blurred starts its timer and can auto-hide unseen, since only a later blur
|
|
101
|
-
pauses it.
|
|
96
|
+
- **A toast raised while the window is blurred runs its timer.** Only a later
|
|
97
|
+
blur pauses it, so a toast raised while the user is in another window can
|
|
98
|
+
auto-hide unseen.
|
|
102
99
|
- **A control-free toast cannot take focus.** With no control in the newest
|
|
103
100
|
toast, F6 leaves focus where it was; dismissing a focused toast beside a
|
|
104
101
|
control-free one drops focus to the page body.
|
|
@@ -121,9 +118,9 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
121
118
|
- **Some modals supply no outlet.** A modal Drawer, Lightbox, or MobileNav
|
|
122
119
|
opens without supplying an outlet, so toasts stay behind it; `spec:AST-003`
|
|
123
120
|
FR18 rehosts globally hosted layers above every native modal.
|
|
124
|
-
- **A toast
|
|
125
|
-
|
|
126
|
-
|
|
121
|
+
- **A toast collapsing through an outlet move can linger.** A toast that is
|
|
122
|
+
still collapsing when its viewport moves into or out of any outlet FR12
|
|
123
|
+
names comes back as an invisible zero-height row that never unmounts: it
|
|
127
124
|
keeps the notifications landmark exposed and F6 focuses its hidden dismiss
|
|
128
125
|
button, and it holds one of the `maxVisible` places. With no provider
|
|
129
126
|
above the caller a dismissal called before the fallback viewport
|
|
@@ -143,9 +140,6 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
143
140
|
- **The action row does not track a held pointer.** A press that slides across
|
|
144
141
|
the row's sibling actions does not act on the action it lifts on;
|
|
145
142
|
`family:action-groups` has the row use the shared press tracking.
|
|
146
|
-
- **Same-handler `ignore` toasts both announce.** Two `ignore` toasts with one
|
|
147
|
-
`uniqueID` raised before the first renders are both announced, and the
|
|
148
|
-
second replaces the first (FR8, ORD1).
|
|
149
143
|
- **Nested viewports can show two landmarks.** An outer and an inner viewport
|
|
150
144
|
that each hold a toast expose two notifications landmarks (FR11).
|
|
151
145
|
- **Reduced motion is instant on every pointer.** Under reduced motion the
|
|
@@ -192,13 +186,13 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
192
186
|
| ID | Invariant | Basis |
|
|
193
187
|
| ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
|
|
194
188
|
| FR1 | A card carries `toast` with `type` and shows `body` and, on its first line, `endContent` then a dismiss Button named by `@astryx.toast.dismiss`; long body text wraps below. `renderContent` replaces that layout, receives `body`, `endContent`, `type`, timing, and a `dismiss` function, and gets no injected dismiss control. | Current source and tests |
|
|
195
|
-
| FR2 | With auto-hide on (the default for `info`, off for `error`), the card dismisses with reason `auto` after `autoHideDuration` ms. The timer pauses while the pointer is over the card, focus is inside it, a touch or pen gesture is active, or the window is blurred, and resumes with the remaining time (at least 1 s).
|
|
189
|
+
| FR2 | With auto-hide on (the default for `info`, off for `error`), the card dismisses with reason `auto` after `autoHideDuration` ms. The timer pauses while the pointer is over the card, focus is inside it, a touch or pen gesture is active, or the window is blurred, and resumes with the remaining time (at least 1 s). Each pause condition holds the timer on its own: one ending resumes it only when no other still holds, and focus moving between the card's own controls keeps it held. Implementation gap: a toast raised while the window is already blurred starts its timer (Current-state impact). | Current source and tests |
|
|
196
190
|
| FR3 | The dismiss button, a swipe, a `dismiss` call, or the returned dismiss function dismiss with reason `manual`; `onHide` fires at most once, when the toast is dismissed, even when dismissed twice during its exit. Implementation gap: with no provider above the caller, a dismissal called before the fallback viewport mounts does nothing, so the toast shows and stays unless it auto-hides (Current-state impact). A toast replaced through `uniqueID` is not dismissed and reports no `onHide`. | Current source and tests |
|
|
197
191
|
| FR4 | A drag toward the position's block edge, from any pointer (`spec:AST-094` FR43), decides once, at release, per `spec:AST-094` FR36–FR37: projected travel past the commit point dismisses, and a release moving back toward the start cancels. A short drag snaps back; horizontal intent, a second touch, or a gesture starting on an interactive descendant does not dismiss. Native page scrolling continues until touch intent matches the dismiss edge. In the default layout the visible dismiss button stays as a non-gesture alternative; custom content supplies its own. Implementation gaps: the shipped rule dismisses on net travel past a distance threshold or a fast flick timed by its own average speed, even after the finger moves back, and recognizes only touch and pen drags, not a mouse (Current-state impact). | Current source and tests |
|
|
198
192
|
| FR5 | A new card slides in from its edge and fades in; a dismissed card collapses and fades before it unmounts; both slide only along the block axis. A dismissal without a swipe uses theme timing; a swipe's commit and snap-back start at the release velocity (`spec:AST-094` FR38). Under reduced motion the entrance and dismissal are an opacity-only fade of 200 ms or less on a coarse pointer or after a touch release (`design:reduced-motion` DR2) and immediate otherwise (DR3), and the card still unmounts. Implementation gaps: a swipe's settle is a CSS transition at theme timing, and under reduced motion every transition, including the row collapse and the swipe's throw, runs for 0.01 ms on every pointer (Current-state impact). | Current source and tests |
|
|
199
193
|
| FR6 | The viewport stacks toasts at `position`, newest nearest the configured edge, with an 8 px gap and no extra space at the edge beyond the safe-area gutter it keeps; it spans the inline axis within its inset, honoring start and end insets in either direction. Each edge sits at the provider's `layerInset`, and a `toast.inset` edge, when set, replaces it (`spec:AST-059` FR6). Implementation gaps: a `toast.inset` edge set to 0 does not replace the provider's value, and an edge opposite the position, such as `top` for a bottom stack, moves the stack to that edge (Current-state impact). | Current source and tests |
|
|
200
194
|
| FR7 | With `maxVisible` of 1 or more, at most that many toasts show; when more are raised, the oldest wait hidden and return as visible toasts leave. `maxVisible={0}` shows every toast. | Current source and tests |
|
|
201
|
-
| FR8 | A toast whose `uniqueID` matches a toast the viewport holds, whether shown, hidden by the cap, or exiting, replaces it in place under `overwrite` (and is announced again; the card remounts, so focus inside it drops to the page body), and is dropped unshown and unannounced under `ignore
|
|
195
|
+
| FR8 | A toast whose `uniqueID` matches a toast the viewport holds, whether shown, hidden by the cap, or exiting, replaces it in place under `overwrite` (and is announced again; the card remounts, so focus inside it drops to the page body), and is dropped unshown and unannounced under `ignore`, even when both are raised before the first renders. Implementation gap: overwriting a toast hidden by the cap announces it while it is not shown, and nothing is announced when it surfaces (Current-state impact). | Current source and tests |
|
|
202
196
|
| FR9 | Each shown toast has one announcement owner (`spec:AST-086` FR1): the viewport announces it once, when it is shown, `error` assertively and `info` politely, using the toast's text content, through its own persistent polite and assertive containers, which move with it into a modal (`spec:AST-086` FR10). Unrelated renders do not re-announce. Implementation gaps: the viewport announces through the shared body-level channel, which a modal hides, and announces at dispatch rather than when a toast appears (Current-state impact). | `spec:AST-086`; tests |
|
|
203
197
|
| FR10 | F6 moves focus to the first control in the newest toast and remembers where focus was. Dismissing a toast that holds focus moves focus to a control in a remaining toast, or back to the remembered element when none remain. Implementation gap: with no control in the target toast, F6 leaves focus where it was and the handoff drops focus to the page, and dismissing the last toast after reaching it with Tab rather than F6 also drops focus to the page (Current-state impact). | Current source and tests |
|
|
204
198
|
| FR11 | While a toast is visible the viewport is a `region` landmark named by `@astryx.toast.viewport`, without `aria-modal`; it exposes no landmark when empty, so an empty nested viewport adds none. Implementation gap: nested viewports that each hold a toast expose two landmarks (Current-state impact). | Current source and tests |
|
|
@@ -221,8 +215,8 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
221
215
|
|
|
222
216
|
### Transformation and precedence order
|
|
223
217
|
|
|
224
|
-
- **ORD1 — Collision.** `ignore` drops a matching toast before announcement
|
|
225
|
-
|
|
218
|
+
- **ORD1 — Collision.** `ignore` drops a matching toast before announcement;
|
|
219
|
+
`overwrite` replaces it, then announces.
|
|
226
220
|
|
|
227
221
|
### Performance and resources
|
|
228
222
|
|
|
@@ -265,7 +259,7 @@ button), so no anatomy part can own the `toast` target.
|
|
|
265
259
|
| Contract | Verification | Representative states | Mutation or failure expectation | Audit section |
|
|
266
260
|
| -------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------------------------- |
|
|
267
261
|
| FR1, FR3 | `ToastViewport.test.tsx` layout, custom content, and onHide tests | Default, custom content, double dismiss | Dropped controls or a repeated `onHide` fails. | `audit:Toast/behavior` |
|
|
268
|
-
| FR2 | `ToastViewport.test.tsx` blur-pause tests
|
|
262
|
+
| FR2 | `ToastViewport.test.tsx` blur-pause and pause-source tests | Window blur, new toast during pause, overlapping pointer/focus/window holds, focus moving inside | A timer running while paused, or resuming while another hold remains, fails. | `audit:Toast/behavior` |
|
|
269
263
|
| FR4, FR5 | `ToastViewport.test.tsx` gesture and motion tests | Pen and touch thresholds, short drag, horizontal intent, second touch, interactive descendant, RTL | A dismissal from a rejected gesture, a lost snap-back, or off-axis drift fails. | `audit:Toast/behavior` |
|
|
270
264
|
| FR6–FR8 | `ToastViewport.test.tsx` placement, cap, and uniqueID tests; `Layer/LayerProvider.test.tsx` inset tests | Each position, cap 1 and an explicit cap, overwrite, ignore | Wrong order, cap, or collision fails. | `audit:Toast/layout` |
|
|
271
265
|
| FR9–FR11 | `ToastViewport.test.tsx` announcement, F6, focus, landmark tests | Info, error, StrictMode, nested viewports | A repeated or wrong-urgency announcement, or focus to the body after F6 entry, fails. | `audit:Toast/accessibility` |
|
|
@@ -274,8 +268,8 @@ button), so no anatomy part can own the `toast` target.
|
|
|
274
268
|
Read from source, with no focused test yet:
|
|
275
269
|
|
|
276
270
|
- FR1: the `toast` target and its `type` state.
|
|
277
|
-
- FR2: pausing while
|
|
278
|
-
|
|
271
|
+
- FR2: pausing while a touch gesture is active, and the 1 s minimum on
|
|
272
|
+
resume.
|
|
279
273
|
- FR4: a mouse drag dismissing, and a release moving back cancelling; the
|
|
280
274
|
gesture tests assert today's touch-and-pen-only, net-travel rule.
|
|
281
275
|
- FR5: a swipe's settle starting at the release velocity, and the
|