@fairgarden/design 0.1.0-alpha.1 → 0.1.0-alpha.2
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/LICENSE +21 -0
- package/Readme.md +51 -27
- package/actions/button/Button.d.ts.map +1 -1
- package/actions/button/Button.js +13 -1
- package/actions/button/Button.js.map +1 -1
- package/actions/button/button.module.css +85 -25
- package/actions/chip/Chip.d.ts +2 -2
- package/actions/chip/Chip.js +2 -2
- package/actions/chip/chip.module.css +12 -18
- package/actions/link/Link.d.ts +1 -1
- package/actions/link/link.module.css +22 -19
- package/actions/toggle/Toggle.js +1 -1
- package/actions/toggle/toggle.module.css +27 -23
- package/content/card/card.module.css +27 -27
- package/content/card-grid/CardGrid.js +1 -1
- package/content/card-grid/card-grid.module.css +3 -3
- package/content/carousel/Carousel.d.ts.map +1 -1
- package/content/carousel/Carousel.js +1 -4
- package/content/carousel/Carousel.js.map +1 -1
- package/content/carousel/carousel.module.css +19 -9
- package/content/code-block/CodeActionsMenu.d.ts +34 -0
- package/content/code-block/CodeActionsMenu.d.ts.map +1 -0
- package/content/code-block/CodeActionsMenu.js +102 -0
- package/content/code-block/CodeActionsMenu.js.map +1 -0
- package/content/code-block/CodeBlock.d.ts +37 -0
- package/content/code-block/CodeBlock.d.ts.map +1 -0
- package/content/code-block/CodeBlock.js +30 -0
- package/content/code-block/CodeBlock.js.map +1 -0
- package/content/code-block/CodeBlockFrame.d.ts +54 -0
- package/content/code-block/CodeBlockFrame.d.ts.map +1 -0
- package/content/code-block/CodeBlockFrame.js +80 -0
- package/content/code-block/CodeBlockFrame.js.map +1 -0
- package/content/code-block/CodeBlockHeader.d.ts +26 -0
- package/content/code-block/CodeBlockHeader.d.ts.map +1 -0
- package/content/code-block/CodeBlockHeader.js +16 -0
- package/content/code-block/CodeBlockHeader.js.map +1 -0
- package/content/code-block/CodeBlockLazy.d.ts +11 -0
- package/content/code-block/CodeBlockLazy.d.ts.map +1 -0
- package/content/code-block/CodeBlockLazy.js +14 -0
- package/content/code-block/CodeBlockLazy.js.map +1 -0
- package/content/code-block/CodeBlockLoading.d.ts +31 -0
- package/content/code-block/CodeBlockLoading.d.ts.map +1 -0
- package/content/code-block/CodeBlockLoading.js +90 -0
- package/content/code-block/CodeBlockLoading.js.map +1 -0
- package/content/code-block/CodeBlockSection.d.ts +40 -0
- package/content/code-block/CodeBlockSection.d.ts.map +1 -0
- package/content/code-block/CodeBlockSection.js +105 -0
- package/content/code-block/CodeBlockSection.js.map +1 -0
- package/content/code-block/CodeBlockToasts.d.ts +26 -0
- package/content/code-block/CodeBlockToasts.d.ts.map +1 -0
- package/content/code-block/CodeBlockToasts.js +88 -0
- package/content/code-block/CodeBlockToasts.js.map +1 -0
- package/content/code-block/code-block.module.css +949 -0
- package/content/code-block/index.d.ts +4 -0
- package/content/code-block/index.d.ts.map +1 -0
- package/content/code-block/index.js +4 -0
- package/content/code-block/index.js.map +1 -0
- package/content/demo/DemoContent.d.ts +32 -0
- package/content/demo/DemoContent.d.ts.map +1 -0
- package/content/demo/DemoContent.js +87 -0
- package/content/demo/DemoContent.js.map +1 -0
- package/content/demo/DemoFrame.d.ts +6 -0
- package/content/demo/DemoFrame.d.ts.map +1 -0
- package/content/demo/DemoFrame.js +17 -0
- package/content/demo/DemoFrame.js.map +1 -0
- package/content/demo/DemoLazy.d.ts +11 -0
- package/content/demo/DemoLazy.d.ts.map +1 -0
- package/content/demo/DemoLazy.js +14 -0
- package/content/demo/DemoLazy.js.map +1 -0
- package/content/demo/DemoLoading.d.ts +23 -0
- package/content/demo/DemoLoading.d.ts.map +1 -0
- package/content/demo/DemoLoading.js +26 -0
- package/content/demo/DemoLoading.js.map +1 -0
- package/content/demo/demo.module.css +163 -0
- package/content/demo/index.d.ts +4 -0
- package/content/demo/index.d.ts.map +1 -0
- package/content/demo/index.js +4 -0
- package/content/demo/index.js.map +1 -0
- package/content/empty-state/EmptyState.d.ts +1 -1
- package/content/empty-state/EmptyState.js +1 -1
- package/content/empty-state/empty-state.module.css +11 -11
- package/content/feature-grid/feature-grid.module.css +22 -22
- package/content/index-rows/IndexRows.d.ts +2 -2
- package/content/index-rows/IndexRows.d.ts.map +1 -1
- package/content/index-rows/IndexRows.js +1 -1
- package/content/index-rows/index-rows.module.css +29 -29
- package/content/pricing/Pricing.d.ts +4 -4
- package/content/pricing/Pricing.d.ts.map +1 -1
- package/content/pricing/Pricing.js +4 -4
- package/content/pricing/Pricing.js.map +1 -1
- package/content/pricing/pricing.module.css +22 -22
- package/content/profile/Profile.d.ts +1 -1
- package/content/profile/Profile.js +2 -2
- package/content/profile/profile.module.css +13 -13
- package/content/quote/Quote.d.ts +1 -1
- package/content/quote/quote.module.css +9 -9
- package/content/timeline/Timeline.d.ts +1 -1
- package/content/timeline/Timeline.d.ts.map +1 -1
- package/content/timeline/Timeline.js +5 -5
- package/content/timeline/Timeline.js.map +1 -1
- package/content/timeline/timeline.module.css +12 -12
- package/content/types-table/TypePre.d.ts +11 -0
- package/content/types-table/TypePre.d.ts.map +1 -0
- package/content/types-table/TypePre.js +13 -0
- package/content/types-table/TypePre.js.map +1 -0
- package/content/types-table/TypesTable.d.ts +22 -0
- package/content/types-table/TypesTable.d.ts.map +1 -0
- package/content/types-table/TypesTable.js +124 -0
- package/content/types-table/TypesTable.js.map +1 -0
- package/content/types-table/index.d.ts +3 -0
- package/content/types-table/index.d.ts.map +1 -0
- package/content/types-table/index.js +3 -0
- package/content/types-table/index.js.map +1 -0
- package/content/types-table/types-table.module.css +160 -0
- package/data/chart/Chart.d.ts +8 -1
- package/data/chart/Chart.d.ts.map +1 -1
- package/data/chart/Chart.js +28 -15
- package/data/chart/Chart.js.map +1 -1
- package/data/chart/chart.module.css +20 -6
- package/data/figure/Figure.d.ts +1 -1
- package/data/figure/Figure.js +1 -1
- package/data/figure/figure.module.css +7 -7
- package/data/map/Map.d.ts +3 -3
- package/data/map/Map.d.ts.map +1 -1
- package/data/map/Map.js +10 -8
- package/data/map/Map.js.map +1 -1
- package/data/map/MapCanvas.d.ts.map +1 -1
- package/data/map/MapCanvas.js +5 -9
- package/data/map/MapCanvas.js.map +1 -1
- package/data/map/map.module.css +39 -14
- package/data/map/mapStyle.d.ts +2 -2
- package/data/map/mapStyle.d.ts.map +1 -1
- package/data/map/mapStyle.js +5 -5
- package/data/map/mapStyle.js.map +1 -1
- package/data/scroll-area/ScrollArea.d.ts.map +1 -1
- package/data/scroll-area/ScrollArea.js +8 -4
- package/data/scroll-area/ScrollArea.js.map +1 -1
- package/data/scroll-area/scroll-area.module.css +28 -9
- package/data/spec-grid/spec-grid.module.css +8 -8
- package/data/spec-list/spec-list.module.css +3 -3
- package/data/spec-sheet/SpecSheet.d.ts +2 -2
- package/data/spec-sheet/SpecSheet.js +1 -1
- package/data/spec-sheet/spec-sheet.module.css +9 -9
- package/data/stat/Stat.d.ts +1 -1
- package/data/stat/Stat.d.ts.map +1 -1
- package/data/stat/stat.module.css +4 -4
- package/data/table/Table.d.ts +6 -5
- package/data/table/Table.d.ts.map +1 -1
- package/data/table/Table.js.map +1 -1
- package/data/table/table.module.css +43 -46
- package/disclosure/accordion/Accordion.d.ts +1 -1
- package/disclosure/accordion/Accordion.js +1 -1
- package/disclosure/accordion/accordion.module.css +12 -12
- package/disclosure/collapsible/Collapsible.d.ts +4 -4
- package/disclosure/collapsible/Collapsible.js +4 -4
- package/disclosure/collapsible/collapsible.module.css +10 -10
- package/disclosure/faq/FAQ.d.ts +3 -3
- package/disclosure/faq/FAQ.d.ts.map +1 -1
- package/disclosure/faq/FAQ.js +3 -3
- package/disclosure/faq/FAQ.js.map +1 -1
- package/disclosure/faq/faq.module.css +20 -20
- package/feedback/alert/alert.module.css +4 -4
- package/feedback/avatar/avatar-group.module.css +2 -2
- package/feedback/avatar/avatar.module.css +9 -9
- package/feedback/badge/Badge.d.ts +1 -1
- package/feedback/badge/badge.module.css +7 -7
- package/feedback/meter/Meter.d.ts +2 -2
- package/feedback/meter/meter.module.css +14 -14
- package/feedback/progress/Progress.d.ts +1 -1
- package/feedback/progress/progress.module.css +7 -7
- package/feedback/tag/tag.module.css +7 -7
- package/feedback/toast/Toast.d.ts +3 -3
- package/feedback/toast/Toast.d.ts.map +1 -1
- package/feedback/toast/Toast.js +17 -7
- package/feedback/toast/Toast.js.map +1 -1
- package/feedback/toast/toast.module.css +31 -20
- package/forms/autocomplete/Autocomplete.d.ts +11 -0
- package/forms/autocomplete/Autocomplete.d.ts.map +1 -1
- package/forms/autocomplete/Autocomplete.js +27 -6
- package/forms/autocomplete/Autocomplete.js.map +1 -1
- package/forms/autocomplete/autocomplete.module.css +35 -41
- package/forms/checkbox/Checkbox.js +1 -1
- package/forms/checkbox/checkbox.module.css +29 -25
- package/forms/checkbox-group/checkbox-group.module.css +4 -4
- package/forms/combobox/Combobox.d.ts +10 -0
- package/forms/combobox/Combobox.d.ts.map +1 -1
- package/forms/combobox/Combobox.js +28 -7
- package/forms/combobox/Combobox.js.map +1 -1
- package/forms/combobox/combobox.module.css +34 -41
- package/forms/field/field.module.css +1 -1
- package/forms/fieldset/Fieldset.d.ts +1 -1
- package/forms/fieldset/Fieldset.js +2 -2
- package/forms/fieldset/fieldset.module.css +14 -14
- package/forms/form/form.module.css +2 -2
- package/forms/input/Input.d.ts +10 -3
- package/forms/input/Input.d.ts.map +1 -1
- package/forms/input/Input.js +10 -4
- package/forms/input/Input.js.map +1 -1
- package/forms/input/input.module.css +38 -21
- package/forms/number-field/number-field.module.css +24 -23
- package/forms/radio/Radio.d.ts +1 -1
- package/forms/radio/Radio.d.ts.map +1 -1
- package/forms/radio/Radio.js +5 -3
- package/forms/radio/Radio.js.map +1 -1
- package/forms/radio/radio.module.css +38 -30
- package/forms/radio-group/RadioGroup.d.ts +1 -1
- package/forms/radio-group/radio-group.module.css +3 -3
- package/forms/search/Search.d.ts +10 -0
- package/forms/search/Search.d.ts.map +1 -1
- package/forms/search/Search.js +25 -6
- package/forms/search/Search.js.map +1 -1
- package/forms/search/search.module.css +25 -33
- package/forms/select/Select.d.ts +10 -2
- package/forms/select/Select.d.ts.map +1 -1
- package/forms/select/Select.js +27 -12
- package/forms/select/Select.js.map +1 -1
- package/forms/select/select.module.css +42 -48
- package/forms/slider/Slider.js +2 -2
- package/forms/slider/slider.module.css +23 -23
- package/forms/switch/Switch.js +1 -1
- package/forms/switch/switch.module.css +23 -19
- package/foundations/expanding-box/ExpandingBox.d.ts +86 -0
- package/foundations/expanding-box/ExpandingBox.d.ts.map +1 -0
- package/foundations/expanding-box/ExpandingBox.js +179 -0
- package/foundations/expanding-box/ExpandingBox.js.map +1 -0
- package/foundations/expanding-box/expanding-box.module.css +415 -0
- package/foundations/expanding-box/index.d.ts +3 -0
- package/foundations/expanding-box/index.d.ts.map +1 -0
- package/foundations/expanding-box/index.js +3 -0
- package/foundations/expanding-box/index.js.map +1 -0
- package/foundations/expanding-box/startExpandingTransition.d.ts +33 -0
- package/foundations/expanding-box/startExpandingTransition.d.ts.map +1 -0
- package/foundations/expanding-box/startExpandingTransition.js +82 -0
- package/foundations/expanding-box/startExpandingTransition.js.map +1 -0
- package/foundations/ground/Ground.d.ts +1 -1
- package/foundations/ground/ground.module.css +4 -4
- package/foundations/icon/Icon.d.ts +1 -1
- package/foundations/icon/Icon.js +1 -1
- package/foundations/icon/icon.module.css +1 -1
- package/foundations/outline-morph/OutlineMorph.d.ts +112 -0
- package/foundations/outline-morph/OutlineMorph.d.ts.map +1 -0
- package/foundations/outline-morph/OutlineMorph.js +83 -0
- package/foundations/outline-morph/OutlineMorph.js.map +1 -0
- package/foundations/outline-morph/index.d.ts +3 -0
- package/foundations/outline-morph/index.d.ts.map +1 -0
- package/foundations/outline-morph/index.js +3 -0
- package/foundations/outline-morph/index.js.map +1 -0
- package/foundations/outline-morph/morphEngine.d.ts +219 -0
- package/foundations/outline-morph/morphEngine.d.ts.map +1 -0
- package/foundations/outline-morph/morphEngine.js +1331 -0
- package/foundations/outline-morph/morphEngine.js.map +1 -0
- package/foundations/outline-morph/outline-morph.module.css +113 -0
- package/foundations/outline-morph/useOutlineMorphRoot.d.ts +50 -0
- package/foundations/outline-morph/useOutlineMorphRoot.d.ts.map +1 -0
- package/foundations/outline-morph/useOutlineMorphRoot.js +55 -0
- package/foundations/outline-morph/useOutlineMorphRoot.js.map +1 -0
- package/foundations/separator/separator.module.css +10 -10
- package/foundations/sticker/Sticker.d.ts +4 -4
- package/foundations/sticker/Sticker.d.ts.map +1 -1
- package/foundations/sticker/Sticker.js +3 -3
- package/foundations/sticker/sticker.module.css +10 -10
- package/icons/paths.d.ts +1 -1
- package/icons/paths.d.ts.map +1 -1
- package/icons/paths.js +50 -0
- package/icons/paths.js.map +1 -1
- package/navigation/breadcrumb/Breadcrumb.d.ts +7 -1
- package/navigation/breadcrumb/Breadcrumb.d.ts.map +1 -1
- package/navigation/breadcrumb/Breadcrumb.js +8 -8
- package/navigation/breadcrumb/Breadcrumb.js.map +1 -1
- package/navigation/breadcrumb/breadcrumb.module.css +14 -14
- package/navigation/file-tabs/FileTabs.d.ts +169 -0
- package/navigation/file-tabs/FileTabs.d.ts.map +1 -0
- package/navigation/file-tabs/FileTabs.js +253 -0
- package/navigation/file-tabs/FileTabs.js.map +1 -0
- package/navigation/file-tabs/file-tabs.module.css +868 -0
- package/navigation/file-tabs/index.d.ts +2 -0
- package/navigation/file-tabs/index.d.ts.map +1 -0
- package/navigation/file-tabs/index.js +2 -0
- package/navigation/file-tabs/index.js.map +1 -0
- package/navigation/nav-drawer/NavDrawer.d.ts +32 -6
- package/navigation/nav-drawer/NavDrawer.d.ts.map +1 -1
- package/navigation/nav-drawer/NavDrawer.js +94 -28
- package/navigation/nav-drawer/NavDrawer.js.map +1 -1
- package/navigation/nav-drawer/nav-drawer.module.css +78 -55
- package/navigation/navigation-bar/NavigationBar.d.ts +31 -11
- package/navigation/navigation-bar/NavigationBar.d.ts.map +1 -1
- package/navigation/navigation-bar/NavigationBar.js +40 -17
- package/navigation/navigation-bar/NavigationBar.js.map +1 -1
- package/navigation/navigation-bar/navigation-bar.module.css +58 -27
- package/navigation/navigation-menu/NavigationMenu.d.ts +9 -9
- package/navigation/navigation-menu/NavigationMenu.d.ts.map +1 -1
- package/navigation/navigation-menu/NavigationMenu.js +15 -15
- package/navigation/navigation-menu/navigation-menu.module.css +39 -53
- package/navigation/pagination/Pagination.js +1 -1
- package/navigation/pagination/pagination.module.css +24 -24
- package/navigation/sidebar-nav/SidebarNav.d.ts +71 -0
- package/navigation/sidebar-nav/SidebarNav.d.ts.map +1 -0
- package/navigation/sidebar-nav/SidebarNav.js +169 -0
- package/navigation/sidebar-nav/SidebarNav.js.map +1 -0
- package/navigation/sidebar-nav/index.d.ts +2 -0
- package/navigation/sidebar-nav/index.d.ts.map +1 -0
- package/navigation/sidebar-nav/index.js +2 -0
- package/navigation/sidebar-nav/index.js.map +1 -0
- package/navigation/sidebar-nav/sidebar-nav.module.css +270 -0
- package/navigation/table-of-contents/TableOfContents.d.ts +92 -0
- package/navigation/table-of-contents/TableOfContents.d.ts.map +1 -0
- package/navigation/table-of-contents/TableOfContents.js +211 -0
- package/navigation/table-of-contents/TableOfContents.js.map +1 -0
- package/navigation/table-of-contents/index.d.ts +3 -0
- package/navigation/table-of-contents/index.d.ts.map +1 -0
- package/navigation/table-of-contents/index.js +3 -0
- package/navigation/table-of-contents/index.js.map +1 -0
- package/navigation/table-of-contents/table-of-contents.module.css +322 -0
- package/navigation/table-of-contents/useActiveHeading.d.ts +37 -0
- package/navigation/table-of-contents/useActiveHeading.d.ts.map +1 -0
- package/navigation/table-of-contents/useActiveHeading.js +111 -0
- package/navigation/table-of-contents/useActiveHeading.js.map +1 -0
- package/navigation/tabs/Tabs.d.ts +2 -2
- package/navigation/tabs/Tabs.js +3 -3
- package/navigation/tabs/tabs.module.css +22 -19
- package/navigation/toolbar/Toolbar.d.ts +7 -1
- package/navigation/toolbar/Toolbar.d.ts.map +1 -1
- package/navigation/toolbar/Toolbar.js +3 -3
- package/navigation/toolbar/Toolbar.js.map +1 -1
- package/navigation/toolbar/toolbar.module.css +6 -6
- package/overlays/alert-dialog/AlertDialog.d.ts +14 -4
- package/overlays/alert-dialog/AlertDialog.d.ts.map +1 -1
- package/overlays/alert-dialog/AlertDialog.js +15 -5
- package/overlays/alert-dialog/AlertDialog.js.map +1 -1
- package/overlays/alert-dialog/alert-dialog.module.css +4 -4
- package/overlays/context-menu/ContextMenu.d.ts +1 -1
- package/overlays/context-menu/ContextMenu.js +1 -1
- package/overlays/dialog/Dialog.d.ts +26 -11
- package/overlays/dialog/Dialog.d.ts.map +1 -1
- package/overlays/dialog/Dialog.js +36 -17
- package/overlays/dialog/Dialog.js.map +1 -1
- package/overlays/dialog/dialog.module.css +32 -31
- package/overlays/dialog/morph.d.ts +17 -0
- package/overlays/dialog/morph.d.ts.map +1 -0
- package/overlays/dialog/morph.js +44 -0
- package/overlays/dialog/morph.js.map +1 -0
- package/overlays/menu/Menu.d.ts +18 -7
- package/overlays/menu/Menu.d.ts.map +1 -1
- package/overlays/menu/Menu.js +35 -12
- package/overlays/menu/Menu.js.map +1 -1
- package/overlays/menu/menu.module.css +26 -50
- package/overlays/menu/morph.d.ts +16 -0
- package/overlays/menu/morph.d.ts.map +1 -0
- package/overlays/menu/morph.js +36 -0
- package/overlays/menu/morph.js.map +1 -0
- package/overlays/menu/popup.d.ts +2 -0
- package/overlays/menu/popup.d.ts.map +1 -1
- package/overlays/menu/popup.js +11 -3
- package/overlays/menu/popup.js.map +1 -1
- package/overlays/menubar/Menubar.d.ts +10 -1
- package/overlays/menubar/Menubar.d.ts.map +1 -1
- package/overlays/menubar/Menubar.js +22 -12
- package/overlays/menubar/Menubar.js.map +1 -1
- package/overlays/menubar/menubar.module.css +13 -13
- package/overlays/popover/Popover.d.ts +22 -8
- package/overlays/popover/Popover.d.ts.map +1 -1
- package/overlays/popover/Popover.js +51 -16
- package/overlays/popover/Popover.js.map +1 -1
- package/overlays/popover/popover.module.css +73 -47
- package/overlays/preview-card/PreviewCard.d.ts +3 -3
- package/overlays/preview-card/PreviewCard.d.ts.map +1 -1
- package/overlays/preview-card/PreviewCard.js +5 -6
- package/overlays/preview-card/PreviewCard.js.map +1 -1
- package/overlays/preview-card/preview-card.module.css +19 -54
- package/overlays/search-dialog/SearchDialog.d.ts +89 -0
- package/overlays/search-dialog/SearchDialog.d.ts.map +1 -0
- package/overlays/search-dialog/SearchDialog.js +220 -0
- package/overlays/search-dialog/SearchDialog.js.map +1 -0
- package/overlays/search-dialog/SearchDialogPopup.d.ts +39 -0
- package/overlays/search-dialog/SearchDialogPopup.d.ts.map +1 -0
- package/overlays/search-dialog/SearchDialogPopup.js +80 -0
- package/overlays/search-dialog/SearchDialogPopup.js.map +1 -0
- package/overlays/search-dialog/SearchDialogTrigger.d.ts +24 -0
- package/overlays/search-dialog/SearchDialogTrigger.d.ts.map +1 -0
- package/overlays/search-dialog/SearchDialogTrigger.js +32 -0
- package/overlays/search-dialog/SearchDialogTrigger.js.map +1 -0
- package/overlays/search-dialog/index.d.ts +3 -0
- package/overlays/search-dialog/index.d.ts.map +1 -0
- package/overlays/search-dialog/index.js +3 -0
- package/overlays/search-dialog/index.js.map +1 -0
- package/overlays/search-dialog/search-dialog.module.css +492 -0
- package/overlays/search-dialog/useShortcutLabel.d.ts +13 -0
- package/overlays/search-dialog/useShortcutLabel.d.ts.map +1 -0
- package/overlays/search-dialog/useShortcutLabel.js +19 -0
- package/overlays/search-dialog/useShortcutLabel.js.map +1 -0
- package/overlays/search-dialog/variants.d.ts +25 -0
- package/overlays/search-dialog/variants.d.ts.map +1 -0
- package/overlays/search-dialog/variants.js +31 -0
- package/overlays/search-dialog/variants.js.map +1 -0
- package/overlays/tooltip/Tooltip.d.ts +3 -3
- package/overlays/tooltip/Tooltip.d.ts.map +1 -1
- package/overlays/tooltip/Tooltip.js +3 -3
- package/overlays/tooltip/Tooltip.js.map +1 -1
- package/overlays/tooltip/tooltip.module.css +2 -2
- package/package.json +27 -19
- package/page/announcement-bar/AnnouncementBar.d.ts +1 -1
- package/page/announcement-bar/AnnouncementBar.js +4 -4
- package/page/announcement-bar/AnnouncementBar.js.map +1 -1
- package/page/announcement-bar/announcement-bar.module.css +11 -17
- package/page/cta-block/CTABlock.d.ts +5 -5
- package/page/cta-block/CTABlock.d.ts.map +1 -1
- package/page/cta-block/CTABlock.js +2 -2
- package/page/cta-block/cta-block.module.css +26 -26
- package/page/docs-layout/DocsLayout.d.ts +83 -0
- package/page/docs-layout/DocsLayout.d.ts.map +1 -0
- package/page/docs-layout/DocsLayout.js +108 -0
- package/page/docs-layout/DocsLayout.js.map +1 -0
- package/page/docs-layout/docs-layout.module.css +266 -0
- package/page/docs-layout/index.d.ts +2 -0
- package/page/docs-layout/index.d.ts.map +1 -0
- package/page/docs-layout/index.js +2 -0
- package/page/docs-layout/index.js.map +1 -0
- package/page/footer/Footer.d.ts +1 -1
- package/page/footer/Footer.js +1 -1
- package/page/footer/footer.module.css +31 -31
- package/page/hero/Hero.d.ts +3 -3
- package/page/hero/Hero.d.ts.map +1 -1
- package/page/hero/Hero.js +1 -1
- package/page/hero/hero.module.css +36 -36
- package/page/marquee/Marquee.d.ts +2 -2
- package/page/marquee/Marquee.js +1 -1
- package/page/marquee/marquee.module.css +11 -11
- package/page/newsletter/Newsletter.d.ts.map +1 -1
- package/page/newsletter/Newsletter.js +4 -59
- package/page/newsletter/Newsletter.js.map +1 -1
- package/page/newsletter/newsletter.module.css +44 -22
- package/page/section-bar/SectionBar.d.ts +10 -3
- package/page/section-bar/SectionBar.d.ts.map +1 -1
- package/page/section-bar/SectionBar.js +21 -11
- package/page/section-bar/SectionBar.js.map +1 -1
- package/page/section-bar/section-bar.module.css +43 -46
- package/page/section-divider/SectionDivider.d.ts +2 -2
- package/page/section-divider/SectionDivider.js +4 -4
- package/page/section-divider/SectionDivider.js.map +1 -1
- package/page/section-divider/section-divider.module.css +18 -18
- package/page/section-header/SectionHeader.d.ts +7 -7
- package/page/section-header/SectionHeader.d.ts.map +1 -1
- package/page/section-header/SectionHeader.js +3 -3
- package/page/section-header/SectionHeader.js.map +1 -1
- package/page/section-header/section-header.module.css +16 -16
- package/utils/Ornament.d.ts +1 -1
- package/utils/Ornament.js +2 -2
- package/utils/assignRef.d.ts +7 -1
- package/utils/assignRef.d.ts.map +1 -1
- package/utils/assignRef.js +18 -0
- package/utils/assignRef.js.map +1 -1
- package/utils/docs/DemoTitle.d.ts +12 -0
- package/utils/docs/DemoTitle.d.ts.map +1 -0
- package/utils/docs/DemoTitle.js +11 -0
- package/utils/docs/DemoTitle.js.map +1 -0
- package/utils/docs/Pre.d.ts +39 -0
- package/utils/docs/Pre.d.ts.map +1 -0
- package/utils/docs/Pre.js +26 -0
- package/utils/docs/Pre.js.map +1 -0
- package/utils/docs/createDemo.d.ts +89 -0
- package/utils/docs/createDemo.d.ts.map +1 -0
- package/utils/docs/createDemo.js +51 -0
- package/utils/docs/createDemo.js.map +1 -0
- package/utils/docs/createMdxComponents.d.ts +52 -0
- package/utils/docs/createMdxComponents.d.ts.map +1 -0
- package/utils/docs/createMdxComponents.js +59 -0
- package/utils/docs/createMdxComponents.js.map +1 -0
- package/utils/docs/createTypes.d.ts +23 -0
- package/utils/docs/createTypes.d.ts.map +1 -0
- package/utils/docs/createTypes.js +27 -0
- package/utils/docs/createTypes.js.map +1 -0
- package/utils/docs/index.d.ts +8 -0
- package/utils/docs/index.d.ts.map +1 -0
- package/utils/docs/index.js +16 -0
- package/utils/docs/index.js.map +1 -0
- package/utils/docs/mdx.module.css +201 -0
- package/utils/docs/serverSourceEnhancers.d.ts +26 -0
- package/utils/docs/serverSourceEnhancers.d.ts.map +1 -0
- package/utils/docs/serverSourceEnhancers.js +32 -0
- package/utils/docs/serverSourceEnhancers.js.map +1 -0
- package/utils/docs/toSidebarItems.d.ts +23 -0
- package/utils/docs/toSidebarItems.d.ts.map +1 -0
- package/utils/docs/toSidebarItems.js +36 -0
- package/utils/docs/toSidebarItems.js.map +1 -0
- package/utils/font-fallbacks.css +176 -0
- package/utils/fonts.d.ts +1 -0
- package/utils/fonts.d.ts.map +1 -1
- package/utils/fonts.js +12 -0
- package/utils/fonts.js.map +1 -1
- package/utils/frame.d.ts +4 -0
- package/utils/frame.d.ts.map +1 -0
- package/utils/frame.js +11 -0
- package/utils/frame.js.map +1 -0
- package/utils/global.css +480 -266
- package/utils/line.module.css +17 -17
- package/utils/media.css +1 -1
- package/utils/ornament.module.css +19 -19
- package/utils/overlay.d.ts +4 -4
- package/utils/overlay.js +4 -4
- package/utils/pattern.module.css +45 -45
- package/utils/print.css +48 -34
- package/utils/reset.css +9 -2
- package/utils/roles.css +29 -29
- package/utils/seriesPatterns.js +3 -3
- package/utils/syntax.module.css +92 -0
- package/utils/theme.css +6 -6
- package/utils/tokens.css +262 -192
- package/utils/tokens.d.ts +51 -8
- package/utils/tokens.d.ts.map +1 -1
- package/utils/tokens.js +46 -9
- package/utils/tokens.js.map +1 -1
- package/utils/type.module.css +87 -87
- package/utils/useReleaseMark.d.ts +13 -0
- package/utils/useReleaseMark.d.ts.map +1 -0
- package/utils/useReleaseMark.js +44 -0
- package/utils/useReleaseMark.js.map +1 -0
- package/utils/view-transitions.css +122 -0
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
/** A root's scroll state: whether it is scrolled to its end. */
|
|
4
|
+
function atEnd(root) {
|
|
5
|
+
if (root == null) {
|
|
6
|
+
const doc = document.documentElement;
|
|
7
|
+
return window.scrollY > 0 && window.innerHeight + window.scrollY >= doc.scrollHeight - 1;
|
|
8
|
+
}
|
|
9
|
+
return root.scrollTop > 0 && root.clientHeight + root.scrollTop >= root.scrollHeight - 1;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Scrollspy for a table of contents [D202]: the id of the heading whose
|
|
13
|
+
* section is in view, for `TableOfContents`' `activeId`. An
|
|
14
|
+
* IntersectionObserver watches the headings against a band from the root's
|
|
15
|
+
* top edge down to `line`; each time one crosses the line the hook takes
|
|
16
|
+
* the last heading above it (the first while none has passed, the last
|
|
17
|
+
* once the root is scrolled to its end). The heading a link just landed on
|
|
18
|
+
* (the URL's hash) stays current while it sits above the line, so a short
|
|
19
|
+
* section chosen from the contents is the one marked. A `scrollend` pass
|
|
20
|
+
* re-reads the positions after jumps that cross no line.
|
|
21
|
+
*
|
|
22
|
+
* It only reads layout and returns an id: nothing it drives changes size
|
|
23
|
+
* (the list reserves each entry's current weight), so it causes no layout
|
|
24
|
+
* shift. It returns `undefined` on the server and before the first
|
|
25
|
+
* observation, so the server HTML marks no section.
|
|
26
|
+
*/
|
|
27
|
+
export function useActiveHeading(ids, options = {}) {
|
|
28
|
+
const { root, line = '25%', enabled = true } = options;
|
|
29
|
+
const key = ids.join('\n');
|
|
30
|
+
const [active, setActive] = React.useState(undefined);
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
const list = key.split('\n').filter(Boolean);
|
|
33
|
+
if (!enabled || list.length === 0 || typeof IntersectionObserver === 'undefined') {
|
|
34
|
+
setActive(undefined);
|
|
35
|
+
return undefined;
|
|
36
|
+
}
|
|
37
|
+
const rootElement = root?.current ?? null;
|
|
38
|
+
const headings = list
|
|
39
|
+
.map((id) => document.getElementById(id))
|
|
40
|
+
.filter((element) => element != null);
|
|
41
|
+
if (headings.length === 0)
|
|
42
|
+
return undefined;
|
|
43
|
+
// The line's distance below the root's top edge, in px.
|
|
44
|
+
const lineDepth = () => {
|
|
45
|
+
const height = rootElement ? rootElement.clientHeight : window.innerHeight;
|
|
46
|
+
const value = Number.parseFloat(line) || 0;
|
|
47
|
+
return line.trim().endsWith('%') ? (height * value) / 100 : value;
|
|
48
|
+
};
|
|
49
|
+
// The last heading whose top has passed the line; positions are read fresh.
|
|
50
|
+
const update = () => {
|
|
51
|
+
const top = rootElement ? rootElement.getBoundingClientRect().top : 0;
|
|
52
|
+
const bottom = rootElement ? rootElement.getBoundingClientRect().bottom : window.innerHeight;
|
|
53
|
+
const limit = top + lineDepth() + 1;
|
|
54
|
+
const end = atEnd(rootElement);
|
|
55
|
+
let current = headings[0].id;
|
|
56
|
+
if (end)
|
|
57
|
+
current = headings[headings.length - 1].id;
|
|
58
|
+
else {
|
|
59
|
+
for (const heading of headings) {
|
|
60
|
+
if (heading.getBoundingClientRect().top <= limit)
|
|
61
|
+
current = heading.id;
|
|
62
|
+
else
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
// The section a link just landed on (the URL's hash) stays current
|
|
67
|
+
// while its heading sits in the band above the line, or anywhere in
|
|
68
|
+
// view at the end of the page, even when a short section lets the
|
|
69
|
+
// next heading pass the line too.
|
|
70
|
+
const hash = decodeURIComponent(window.location.hash.slice(1));
|
|
71
|
+
const target = hash ? headings.find((heading) => heading.id === hash) : undefined;
|
|
72
|
+
if (target != null) {
|
|
73
|
+
const at = target.getBoundingClientRect().top;
|
|
74
|
+
if (at >= top - 1 && (at <= limit || (end && at < bottom)))
|
|
75
|
+
current = target.id;
|
|
76
|
+
}
|
|
77
|
+
setActive(current);
|
|
78
|
+
};
|
|
79
|
+
// The band runs from the root's top edge down to the line, so every
|
|
80
|
+
// crossing of the line is an intersection change. Rebuilt on resize.
|
|
81
|
+
let observer = null;
|
|
82
|
+
const connect = () => {
|
|
83
|
+
observer?.disconnect();
|
|
84
|
+
const height = rootElement ? rootElement.clientHeight : window.innerHeight;
|
|
85
|
+
const below = Math.max(0, Math.round(height - lineDepth()));
|
|
86
|
+
observer = new IntersectionObserver(update, {
|
|
87
|
+
root: rootElement,
|
|
88
|
+
rootMargin: `0px 0px ${-below}px 0px`,
|
|
89
|
+
threshold: [0, 1],
|
|
90
|
+
});
|
|
91
|
+
headings.forEach((heading) => observer?.observe(heading));
|
|
92
|
+
};
|
|
93
|
+
connect();
|
|
94
|
+
const onResize = () => {
|
|
95
|
+
connect();
|
|
96
|
+
update();
|
|
97
|
+
};
|
|
98
|
+
const target = rootElement ?? window;
|
|
99
|
+
target.addEventListener('scrollend', update, { passive: true });
|
|
100
|
+
window.addEventListener('resize', onResize, { passive: true });
|
|
101
|
+
window.addEventListener('hashchange', update);
|
|
102
|
+
return () => {
|
|
103
|
+
observer?.disconnect();
|
|
104
|
+
target.removeEventListener('scrollend', update);
|
|
105
|
+
window.removeEventListener('resize', onResize);
|
|
106
|
+
window.removeEventListener('hashchange', update);
|
|
107
|
+
};
|
|
108
|
+
}, [key, root, line, enabled]);
|
|
109
|
+
return enabled ? active : undefined;
|
|
110
|
+
}
|
|
111
|
+
//# sourceMappingURL=useActiveHeading.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useActiveHeading.js","sourceRoot":"","sources":["../../src/navigation/table-of-contents/useActiveHeading.ts"],"names":[],"mappings":"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"}
|
|
@@ -75,8 +75,8 @@ export type TabsTabProps = BaseTabs.Tab.Props & {
|
|
|
75
75
|
};
|
|
76
76
|
/**
|
|
77
77
|
* One tab: an optional icon and a caps `type-label` label, at least
|
|
78
|
-
* `--
|
|
79
|
-
* the current label `--primary12` at 700 with the `--
|
|
78
|
+
* `--fgd-size-hit` tall. Inactive labels are `--role-muted` at weight 600,
|
|
79
|
+
* the current label `--primary12` at 700 with the `--border-size-2-25` bar.
|
|
80
80
|
* Prefer removing a tab to disabling it.
|
|
81
81
|
*/
|
|
82
82
|
export declare function TabsTab(props: TabsTabProps): React.JSX.Element;
|
package/navigation/tabs/Tabs.js
CHANGED
|
@@ -24,7 +24,7 @@ import styles from './tabs.module.css';
|
|
|
24
24
|
* - Defaults: variant underline, filled false; color axes: none.
|
|
25
25
|
* - Color fallback: inherits the scope.
|
|
26
26
|
* - States: the current tab (`data-active`, Base UI's name for §9.5's
|
|
27
|
-
* `data-selected`) → the --
|
|
27
|
+
* `data-selected`) → the --border-size-2-25 bar (the Indicator, placed from
|
|
28
28
|
* Base UI's active-tab position variables) and --font-weight-7, plus the
|
|
29
29
|
* --role-select cell under `filled`; `:hover` (not disabled) → the
|
|
30
30
|
* bare-text underline under the label (--role-accent at --border-size-2,
|
|
@@ -142,8 +142,8 @@ export function TabsList(props) {
|
|
|
142
142
|
}
|
|
143
143
|
/**
|
|
144
144
|
* One tab: an optional icon and a caps `type-label` label, at least
|
|
145
|
-
* `--
|
|
146
|
-
* the current label `--primary12` at 700 with the `--
|
|
145
|
+
* `--fgd-size-hit` tall. Inactive labels are `--role-muted` at weight 600,
|
|
146
|
+
* the current label `--primary12` at 700 with the `--border-size-2-25` bar.
|
|
147
147
|
* Prefer removing a tab to disabling it.
|
|
148
148
|
*/
|
|
149
149
|
export function TabsTab(props) {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
gap: calc(var(--size-px-5) - 2 * var(--tab-inset));
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
/* Each tab is at least --
|
|
62
|
+
/* Each tab is at least --fgd-size-hit tall; it grows when the label wraps. */
|
|
63
63
|
.tab {
|
|
64
64
|
position: relative;
|
|
65
65
|
display: inline-flex;
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
gap: var(--size-px-2);
|
|
69
69
|
box-sizing: border-box;
|
|
70
70
|
min-inline-size: 0;
|
|
71
|
-
min-block-size: var(--
|
|
71
|
+
min-block-size: var(--fgd-size-hit);
|
|
72
72
|
margin: 0;
|
|
73
73
|
padding-block: var(--size-px-2);
|
|
74
74
|
padding-inline: var(--tab-inset);
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
position: absolute;
|
|
88
88
|
inset-inline: var(--tab-inset);
|
|
89
89
|
inset-block-end: 0;
|
|
90
|
-
border-block-end: var(--
|
|
90
|
+
border-block-end: var(--border-size-1-5) solid var(--primary12);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
.icon {
|
|
@@ -121,13 +121,13 @@
|
|
|
121
121
|
font-weight: var(--font-weight-7);
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
/* The current bar: --
|
|
124
|
+
/* The current bar: --border-size-2-25 in --primary12, placed from Base UI's active-tab variables. */
|
|
125
125
|
.indicator {
|
|
126
126
|
position: absolute;
|
|
127
127
|
inset-block-end: 0;
|
|
128
128
|
left: calc(var(--active-tab-left) + var(--tab-inset));
|
|
129
129
|
inline-size: calc(var(--active-tab-width) - 2 * var(--tab-inset));
|
|
130
|
-
border-block-end: var(--
|
|
130
|
+
border-block-end: var(--border-size-2-25) solid var(--primary12);
|
|
131
131
|
pointer-events: none;
|
|
132
132
|
}
|
|
133
133
|
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
inset-inline-start: var(--tab-inset);
|
|
139
139
|
inset-block-end: 0;
|
|
140
140
|
inline-size: calc(100% - 2 * var(--tab-inset));
|
|
141
|
-
block-size: var(--
|
|
141
|
+
block-size: var(--fgd-dot-fine);
|
|
142
142
|
overflow: visible;
|
|
143
143
|
pointer-events: none;
|
|
144
144
|
}
|
|
@@ -151,11 +151,16 @@
|
|
|
151
151
|
/* The › button, centred on a one-line tab row. */
|
|
152
152
|
.overflow {
|
|
153
153
|
flex: none;
|
|
154
|
-
margin-block-start: calc((var(--
|
|
154
|
+
margin-block-start: calc((var(--fgd-size-hit) - var(--size-px-7)) / 2);
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
+
/*
|
|
158
|
+
* The panel sits --size-px-5 below the tab row: the bar's Scroll Area
|
|
159
|
+
* always reserves its --size-px-2-5 scrollbar gutter [D201], so the panel
|
|
160
|
+
* adds the remaining --size-px-2 and the step stays 20 px.
|
|
161
|
+
*/
|
|
157
162
|
.panel {
|
|
158
|
-
margin-block-start: var(--size-px-
|
|
163
|
+
margin-block-start: var(--size-px-2);
|
|
159
164
|
}
|
|
160
165
|
|
|
161
166
|
.printLabel {
|
|
@@ -168,17 +173,15 @@
|
|
|
168
173
|
}
|
|
169
174
|
}
|
|
170
175
|
|
|
171
|
-
/*
|
|
176
|
+
/*
|
|
177
|
+
* Hover transitions [D181]: --fgd-duration-quick, --ease-out-3, for the
|
|
178
|
+
* underline. A tab's fill (the filled kind's current cell) rests at none,
|
|
179
|
+
* so it steps at once [D205].
|
|
180
|
+
*/
|
|
172
181
|
@media (prefers-reduced-motion: no-preference) {
|
|
173
|
-
.tab {
|
|
174
|
-
transition-property: background-color;
|
|
175
|
-
transition-duration: var(--ds-duration-quick);
|
|
176
|
-
transition-timing-function: var(--ease-out-3);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
182
|
.labelText {
|
|
180
183
|
transition-property: text-decoration-color;
|
|
181
|
-
transition-duration: var(--
|
|
184
|
+
transition-duration: var(--fgd-duration-quick);
|
|
182
185
|
transition-timing-function: var(--ease-out-3);
|
|
183
186
|
}
|
|
184
187
|
}
|
|
@@ -198,12 +201,12 @@
|
|
|
198
201
|
inset-block-end: calc(-1 * var(--border-size-1));
|
|
199
202
|
}
|
|
200
203
|
|
|
201
|
-
/* Baseline: up to 3 equal cells with wrapping labels
|
|
204
|
+
/* Baseline: up to 3 equal cells with wrapping labels… */
|
|
202
205
|
.underline .tab {
|
|
203
206
|
flex: 1 1 0;
|
|
204
207
|
}
|
|
205
208
|
|
|
206
|
-
/* …4–6 tabs hug their labels on one scrolling line, the last one clipped
|
|
209
|
+
/* …4–6 tabs hug their labels on one scrolling line, the last one clipped. */
|
|
207
210
|
.underline .list:has(> .tab:nth-child(4)) .tab {
|
|
208
211
|
flex: none;
|
|
209
212
|
white-space: nowrap;
|
|
@@ -258,7 +261,7 @@
|
|
|
258
261
|
/*
|
|
259
262
|
* Hover (not disabled) [D181]: the label keeps its ink and takes the
|
|
260
263
|
* bare-text underline (--role-accent at --border-size-2, offset
|
|
261
|
-
* --size-px-1), told from the --
|
|
264
|
+
* --size-px-1), told from the --border-size-2-25 --primary12 current bar by
|
|
262
265
|
* color and position, so hover never reads as current.
|
|
263
266
|
*/
|
|
264
267
|
.tab:not([data-disabled]):hover .labelText {
|
|
@@ -100,7 +100,7 @@ export type ToolbarLinkProps = LinkProps;
|
|
|
100
100
|
export declare function ToolbarLink(props: ToolbarLinkProps): React.JSX.Element;
|
|
101
101
|
/** Props for ToolbarCount: `span` props. */
|
|
102
102
|
export type ToolbarCountProps = React.ComponentPropsWithRef<'span'>;
|
|
103
|
-
/** The list's count in mono `type-data`, `--primary12`,
|
|
103
|
+
/** The list's count in mono `type-data`, `--primary12`, in parentheses: "Items (54)". */
|
|
104
104
|
export declare function ToolbarCount(props: ToolbarCountProps): React.JSX.Element;
|
|
105
105
|
/** Props for ToolbarMore: the overflow menu's items and popup options. */
|
|
106
106
|
export type ToolbarMoreProps = Omit<MenuPopupProps, 'children'> & {
|
|
@@ -108,6 +108,12 @@ export type ToolbarMoreProps = Omit<MenuPopupProps, 'children'> & {
|
|
|
108
108
|
children?: React.ReactNode;
|
|
109
109
|
/** The trigger's accessible name and tooltip. Default "More". */
|
|
110
110
|
label?: string;
|
|
111
|
+
/**
|
|
112
|
+
* The outline morph: the "…" button's ring (or box) grows into the
|
|
113
|
+
* menu's frame as it opens and back as it closes [D204]. Default `true`;
|
|
114
|
+
* `false` opens and closes the menu at once.
|
|
115
|
+
*/
|
|
116
|
+
morph?: boolean;
|
|
111
117
|
};
|
|
112
118
|
/**
|
|
113
119
|
* The "…" overflow: an icon-only `more_horiz` `text` Button named "More"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/navigation/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAgC,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAqCvF,eAAO,MAAM,OAAO;;;;;8EAmBlB,CAAA;AAEF,oHAAoH;AACpH,eAAO,MAAM,iBAAiB;;8EAU5B,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAA;AAE1D,0FAA0F;AAC1F,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,GAC/C,eAAe,GAAG;IAChB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACpC,2FAA2F;IAC3F,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAEH;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAsB1C;AAED,2DAA2D;AAC3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAA;AAEvD,8GAA8G;AAC9G,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAQpD;AAED,mEAAmE;AACnE,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAC,SAAS,CAAC,KAAK,CAAA;AAE/D;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAQ5D;AAED,yFAAyF;AACzF,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAA;AAEvD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAElD;AAED,wEAAwE;AACxE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA2CtD;AAED,yCAAyC;AACzC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAA;AAExC;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAGlD;AAED,4CAA4C;AAC5C,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAA;AAEnE,
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/navigation/toolbar/Toolbar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -148,7 +148,7 @@ export function ToolbarLink(props) {
|
|
|
148
148
|
const { kind, ...rest } = props;
|
|
149
149
|
return React.createElement(BaseToolbar.Link, { render: React.createElement(Link, { kind: kind ?? 'nav', ...rest }) });
|
|
150
150
|
}
|
|
151
|
-
/** The list's count in mono `type-data`, `--primary12`,
|
|
151
|
+
/** The list's count in mono `type-data`, `--primary12`, in parentheses: "Items (54)". */
|
|
152
152
|
export function ToolbarCount(props) {
|
|
153
153
|
const { className, ...rest } = props;
|
|
154
154
|
return React.createElement("span", { ...rest, className: cx(styles.count, className) });
|
|
@@ -159,8 +159,8 @@ export function ToolbarCount(props) {
|
|
|
159
159
|
* while the `lowPriority` items are hidden, so list those items here.
|
|
160
160
|
*/
|
|
161
161
|
export function ToolbarMore(props) {
|
|
162
|
-
const { label = 'More', align = 'end', children, ...popupProps } = props;
|
|
163
|
-
return (React.createElement(Menu,
|
|
162
|
+
const { label = 'More', align = 'end', morph = true, children, ...popupProps } = props;
|
|
163
|
+
return (React.createElement(Menu, { morph: morph },
|
|
164
164
|
React.createElement(Tooltip, null,
|
|
165
165
|
React.createElement(TooltipTrigger, { render: React.createElement(BaseToolbar.Button, { render: React.createElement(MenuTrigger, { variant: "text", size: "sm", iconOnly: true, icon: "more_horiz", className: styles.more }, label) }) }),
|
|
166
166
|
React.createElement(TooltipPopup, null, label)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../src/navigation/toolbar/Toolbar.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../src/navigation/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,MAAM,EAAoB,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAAE,IAAI,EAAkB,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAA;AACvF,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC/F,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACtC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,MAAM,EAAE,MAAM,CAAC,MAAM;SACtB;QACD,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC,MAAM;SACpB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,KAAK;KACd;CACF,CAAC,CAAA;AAEF,oHAAoH;AACpH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC,MAAM,CAAC,UAAU,EAAE;IACtD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;SAC1B;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA;AAoCF;;;;;;;GAOG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACzF,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAElC,OAAO,CACL;QACE,oBAAC,WAAW,CAAC,IAAI,OACX,IAAI,KACJ,KAAK,EACT,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAC/C,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAChE;YAED,oBAAC,eAAe,QAAE,QAAQ,CAAmB,CAC5B;QAClB,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CACjB,8BAAO,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IACpC,OAAO,CACN,CACL,CAAC,CAAC,CAAC,IAAI,CACP,CACJ,CAAA;AACH,CAAC;AAKD,8GAA8G;AAC9G,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,CACL,oBAAC,WAAW,CAAC,KAAK,OACZ,IAAI,EACR,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAC1E,CACH,CAAA;AACH,CAAC;AAKD;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,CACL,oBAAC,WAAW,CAAC,SAAS,OAChB,IAAI,EACR,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,GAC9E,CACH,CAAA;AACH,CAAC;AAKD;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,oBAAC,WAAW,CAAC,MAAM,OAAK,KAAK,GAAI,CAAA;AAC1C,CAAC;AAWD;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,qBAAqB,GAAG,IAAI,EAC5B,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,eAAe,GAAG,OAAO,IAAI,MAAM,CAAA;IACzC,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,eAAe,KAAK,MAAM,CAAA;IACpF,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,UAAU,CAAA;IAClD,MAAM,UAAU,GAAG,EAAE,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,EAAE,WAAW,IAAI,MAAM,CAAC,WAAW,CAAC,CAAA;IAEzF,MAAM,WAAW,GAAG;QAClB,GAAG,IAAI;QACP,OAAO,EAAE,eAAe;QACxB,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC3C,QAAQ;QACR,qBAAqB;QACrB,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QACxE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAQ,CAAC,CAAC,CAAC,QAAQ;KACpE,CAAA;IAEhB,MAAM,IAAI,GAAG,CACX,oBAAC,WAAW,CAAC,MAAM,IACjB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,MAAM,EAAE,oBAAC,MAAM,OAAK,WAAW,GAAI,GACnC,CACH,CAAA;IAED,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,cAAc,IAAC,MAAM,EAAE,IAAI,GAAI;QAChC,oBAAC,YAAY,QAAE,QAAQ,CAAgB,CAC/B,CACX,CAAA;AACH,CAAC;AAKD;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC/B,OAAO,oBAAC,WAAW,CAAC,IAAI,IAAC,MAAM,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,IAAI,KAAK,KAAM,IAAI,GAAI,GAAI,CAAA;AAC9E,CAAC;AAKD,yFAAyF;AACzF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,iCAAU,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAI,CAAA;AACnE,CAAC;AAgBD;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,GAAG,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IACtF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK;QAChB,oBAAC,OAAO;YACN,oBAAC,cAAc,IACb,MAAM,EACJ,oBAAC,WAAW,CAAC,MAAM,IACjB,MAAM,EACJ,oBAAC,WAAW,IACV,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,QACR,IAAI,EAAC,YAAY,EACjB,SAAS,EAAE,MAAM,CAAC,IAAI,IAErB,KAAK,CACM,GAEhB,GAEJ;YACF,oBAAC,YAAY,QAAE,KAAK,CAAgB,CAC5B;QACV,oBAAC,SAAS,OAAK,UAAU,EAAE,KAAK,EAAE,KAAK,IACpC,QAAQ,CACC,CACP,CACR,CAAA;AACH,CAAC;AASD,sGAAsG;AACtG,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC7C,OAAO,CACL,6CAAkB,MAAM,KAAK,IAAI,EAAE,SAAS,EAAE,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,GAAI,CAC5F,CAAA;AACH,CAAC"}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
@layer base {
|
|
28
|
-
/* The row: --size-px-8 tall (--
|
|
28
|
+
/* The row: --size-px-8 tall (--fgd-size-control-md items plus --size-px-1
|
|
29
29
|
padding), the band's ground, no face of its own. Never wraps. */
|
|
30
30
|
.base {
|
|
31
31
|
container: toolbar / inline-size;
|
|
@@ -90,18 +90,18 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
@layer variants {
|
|
93
|
-
/* List: the count at the start, its actions at the end
|
|
93
|
+
/* List: the count at the start, its actions at the end. */
|
|
94
94
|
.list .count {
|
|
95
95
|
margin-inline-end: auto;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
/* Format: groups of icon toggles and buttons, start-aligned, divided by
|
|
99
|
-
vertical rules
|
|
99
|
+
vertical rules. */
|
|
100
100
|
.format {
|
|
101
101
|
justify-content: flex-start;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
/* Context: tools at the start, the breadcrumb centered, a toggle at the end
|
|
104
|
+
/* Context: tools at the start, the breadcrumb centered, a toggle at the end. */
|
|
105
105
|
.context {
|
|
106
106
|
display: grid;
|
|
107
107
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
@@ -125,12 +125,12 @@
|
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
/* Docked: opaque on the band's ground, a --border-size-1 --role-rule on the
|
|
128
|
-
content side, --
|
|
128
|
+
content side, --fgd-space-margin at the ends, --layer-2 [D23, D89]. */
|
|
129
129
|
.docked {
|
|
130
130
|
position: sticky;
|
|
131
131
|
inset-block-start: 0;
|
|
132
132
|
z-index: var(--layer-2);
|
|
133
|
-
padding-inline: var(--
|
|
133
|
+
padding-inline: var(--fgd-space-margin);
|
|
134
134
|
border-block-end: var(--border-size-1) solid var(--role-rule);
|
|
135
135
|
background-color: var(--role-ground);
|
|
136
136
|
}
|
|
@@ -4,8 +4,15 @@ import { type ButtonProps } from '../../actions/button';
|
|
|
4
4
|
import { type DialogActionsProps, type DialogBodyProps, type DialogDescriptionProps, type DialogPopupProps, type DialogTitleProps } from '../dialog';
|
|
5
5
|
export declare const alertDialog: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
6
6
|
export type AlertDialogStatus = 'warning' | 'danger';
|
|
7
|
-
/** Props for AlertDialog: Base UI AlertDialog.Root props (`open`, `onOpenChange` …)
|
|
8
|
-
export type AlertDialogProps<Payload = unknown> = BaseAlertDialog.Root.Props<Payload
|
|
7
|
+
/** Props for AlertDialog: Base UI AlertDialog.Root props (`open`, `onOpenChange` …) plus `morph`. */
|
|
8
|
+
export type AlertDialogProps<Payload = unknown> = BaseAlertDialog.Root.Props<Payload> & {
|
|
9
|
+
/**
|
|
10
|
+
* The outline morph (§9.17) from the trigger to the panel and back, as
|
|
11
|
+
* Dialog's [D206]. Default `true`; `false` opens and closes at once, as
|
|
12
|
+
* does an alert opened with no rendered trigger (from a Menu item).
|
|
13
|
+
*/
|
|
14
|
+
morph?: boolean;
|
|
15
|
+
};
|
|
9
16
|
/**
|
|
10
17
|
* Groups the parts of an alert dialog (Base UI AlertDialog.Root): always
|
|
11
18
|
* modal, and an outside press never dismisses it. It may open over a
|
|
@@ -19,7 +26,10 @@ export type AlertDialogTriggerProps = ButtonProps & {
|
|
|
19
26
|
/** A payload handed to the AlertDialog's children function when this trigger opens it. */
|
|
20
27
|
payload?: unknown;
|
|
21
28
|
};
|
|
22
|
-
/**
|
|
29
|
+
/**
|
|
30
|
+
* Opens the alert dialog. Renders a Button (§9.2) whose label names the act
|
|
31
|
+
* ("Delete Photos"); the alert morphs out of it.
|
|
32
|
+
*/
|
|
23
33
|
export declare function AlertDialogTrigger(props: AlertDialogTriggerProps): React.JSX.Element;
|
|
24
34
|
/** Props for AlertDialogPopup: DialogPopup props (without `wide`) plus the required status. */
|
|
25
35
|
export type AlertDialogPopupProps = Omit<DialogPopupProps, 'wide'> & {
|
|
@@ -34,7 +44,7 @@ export type AlertDialogPopupProps = Omit<DialogPopupProps, 'wide'> & {
|
|
|
34
44
|
statusLabel?: string;
|
|
35
45
|
};
|
|
36
46
|
/**
|
|
37
|
-
* The alert panel: the Dialog panel (--size-sm, white scope, --
|
|
47
|
+
* The alert panel: the Dialog panel (--size-sm, white scope, --border-size-2-25
|
|
38
48
|
* --primary12 frame, full-screen sheet below --md-n-above) with the status
|
|
39
49
|
* glyph above the title. Compose `AlertDialogBody` (title and one
|
|
40
50
|
* consequence sentence) and `AlertDialogActions` inside it; there is no
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/overlays/alert-dialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAG5E,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/overlays/alert-dialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAG5E,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,WAAW,CAAA;AAkClB,eAAO,MAAM,WAAW,oFAAmB,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEpD,qGAAqG;AACrG,MAAM,MAAM,gBAAgB,CAAC,OAAO,GAAG,OAAO,IAAI,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;IACtF;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,qBAa9E;AAED,gGAAgG;AAChG,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,+FAA+F;IAC/F,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAChD,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAWhE;AAID,+FAA+F;AAC/F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IACnE;;;;;OAKG;IACH,MAAM,EAAE,iBAAiB,CAAA;IACzB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAsB5D;AAED,+FAA+F;AAC/F,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAA;AAEhD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAS9D;AAED,qDAAqD;AACrD,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAA;AAEpD,oGAAoG;AACpG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAE5D;AAED,iEAAiE;AACjE,MAAM,MAAM,2BAA2B,GAAG,sBAAsB,CAAA;AAEhE,+DAA+D;AAC/D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAExE;AAED,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAA;AAElD,yGAAyG;AACzG,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAE1D;AAED,yDAAyD;AACzD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,CAAA;AAExD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAEhE"}
|
|
@@ -4,6 +4,8 @@ import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
|
|
|
4
4
|
import { cva } from 'class-variance-authority';
|
|
5
5
|
import { Button } from '../../actions/button';
|
|
6
6
|
import { DialogActions, DialogBody, DialogDescription, DialogPopup, DialogTitle, } from '../dialog';
|
|
7
|
+
import { DialogMorphContext } from '../dialog/morph';
|
|
8
|
+
import { useOutlineMorphRoot } from '../../foundations/outline-morph/useOutlineMorphRoot';
|
|
7
9
|
import { cx, resolveClassName } from '../../utils/className';
|
|
8
10
|
import { overlayAttributes } from '../../utils/overlay';
|
|
9
11
|
import { secondaryScaleVariants } from '../../utils/scales';
|
|
@@ -26,7 +28,8 @@ import styles from './alert-dialog.module.css';
|
|
|
26
28
|
* A confirm that destroys (every danger alert's, and any Delete, Remove
|
|
27
29
|
* or Discard) is a `solid` Button with `destructive`: the danger fill
|
|
28
30
|
* [D192].
|
|
29
|
-
* - States: as Dialog
|
|
31
|
+
* - States: as Dialog, the outline morph from the trigger included [D206].
|
|
32
|
+
* Focus opens on the least destructive action
|
|
30
33
|
* (AlertDialogCancel); Esc means Cancel; outside presses never dismiss.
|
|
31
34
|
* - Parts: base (the panel, with the Dialog's base), glyph.
|
|
32
35
|
* - Scope: as Dialog. The glyph writes the overlay scope attributes beside
|
|
@@ -40,16 +43,23 @@ export const alertDialog = cva(styles.base);
|
|
|
40
43
|
* Dialog, never deeper; the Dialog stays visible, framed and inert.
|
|
41
44
|
*/
|
|
42
45
|
export function AlertDialog(props) {
|
|
43
|
-
|
|
46
|
+
const { morph = true, open, defaultOpen, onOpenChange, ...rest } = props;
|
|
47
|
+
const root = useOutlineMorphRoot({ open, defaultOpen, onOpenChange, morph, surface: true });
|
|
48
|
+
return (React.createElement(DialogMorphContext.Provider, { value: root.refs },
|
|
49
|
+
React.createElement(BaseAlertDialog.Root, { ...rest, open: open, defaultOpen: defaultOpen, onOpenChange: root.onOpenChange })));
|
|
44
50
|
}
|
|
45
|
-
/**
|
|
51
|
+
/**
|
|
52
|
+
* Opens the alert dialog. Renders a Button (§9.2) whose label names the act
|
|
53
|
+
* ("Delete Photos"); the alert morphs out of it.
|
|
54
|
+
*/
|
|
46
55
|
export function AlertDialogTrigger(props) {
|
|
47
56
|
const { handle, payload, ...buttonProps } = props;
|
|
48
|
-
|
|
57
|
+
const morph = React.useContext(DialogMorphContext);
|
|
58
|
+
return (React.createElement(BaseAlertDialog.Trigger, { ref: handle ? undefined : morph?.sourceRef, handle: handle, payload: payload, render: React.createElement(Button, { ...buttonProps }) }));
|
|
49
59
|
}
|
|
50
60
|
const CancelContext = React.createContext(null);
|
|
51
61
|
/**
|
|
52
|
-
* The alert panel: the Dialog panel (--size-sm, white scope, --
|
|
62
|
+
* The alert panel: the Dialog panel (--size-sm, white scope, --border-size-2-25
|
|
53
63
|
* --primary12 frame, full-screen sheet below --md-n-above) with the status
|
|
54
64
|
* glyph above the title. Compose `AlertDialogBody` (title and one
|
|
55
65
|
* consequence sentence) and `AlertDialogActions` inside it; there is no
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../src/overlays/alert-dialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAE9C,OAAO,EAAE,MAAM,EAAoB,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EACL,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,WAAW,EACX,WAAW,GAMZ,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACjF,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAE9C
|
|
1
|
+
{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../src/overlays/alert-dialog/AlertDialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Parts: base (the panel, beside the Dialog's own base), glyph. The panel,
|
|
4
4
|
* body, title, description and action bar are the Dialog's
|
|
5
5
|
* (dialog.module.css); this module adds only the Alert's status glyph:
|
|
6
|
-
* ▲ with ! (warning) or ◆ with × (danger) at --
|
|
6
|
+
* ▲ with ! (warning) or ◆ with × (danger) at --fgd-size-icon-block above the
|
|
7
7
|
* title, in --role-status of the status scale, which the glyph carries as
|
|
8
8
|
* its own secondary, with its inner mark [D58, D129, D141, D155].
|
|
9
9
|
*/
|
|
@@ -28,15 +28,15 @@
|
|
|
28
28
|
.glyph {
|
|
29
29
|
flex: none;
|
|
30
30
|
display: block;
|
|
31
|
-
inline-size: var(--
|
|
32
|
-
block-size: var(--
|
|
31
|
+
inline-size: var(--fgd-size-icon-block);
|
|
32
|
+
block-size: var(--fgd-size-icon-block);
|
|
33
33
|
margin-block-start: var(--alert-dialog-inset);
|
|
34
34
|
margin-inline: var(--alert-dialog-inset);
|
|
35
35
|
overflow: visible;
|
|
36
36
|
color: var(--role-status);
|
|
37
37
|
fill: var(--role-status-fill);
|
|
38
38
|
stroke: var(--role-status-fill);
|
|
39
|
-
stroke-width: var(--
|
|
39
|
+
stroke-width: var(--border-size-1-5);
|
|
40
40
|
stroke-linecap: round;
|
|
41
41
|
stroke-linejoin: round;
|
|
42
42
|
}
|
|
@@ -20,7 +20,7 @@ export declare function ContextMenuTrigger(props: ContextMenuTriggerProps): Reac
|
|
|
20
20
|
export type ContextMenuPopupProps = MenuPopupProps;
|
|
21
21
|
/**
|
|
22
22
|
* The popup: the Menu's build (a `white` scope, --border-size-2 --primary12
|
|
23
|
-
* edge, --
|
|
23
|
+
* edge, --fgd-size-hit rows, the highlight with its start-edge bar),
|
|
24
24
|
* anchored to the pointer, or to the focused object for keyboard
|
|
25
25
|
* invocation. Compose the Menu item parts inside it, re-exported here as
|
|
26
26
|
* ContextMenuItem, ContextMenuCheckboxItem and so on.
|
|
@@ -21,7 +21,7 @@ export function ContextMenuTrigger(props) {
|
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
23
|
* The popup: the Menu's build (a `white` scope, --border-size-2 --primary12
|
|
24
|
-
* edge, --
|
|
24
|
+
* edge, --fgd-size-hit rows, the highlight with its start-edge bar),
|
|
25
25
|
* anchored to the pointer, or to the focused object for keyboard
|
|
26
26
|
* invocation. Compose the Menu item parts inside it, re-exported here as
|
|
27
27
|
* ContextMenuItem, ContextMenuCheckboxItem and so on.
|