@slotted/react 0.1.0-beta.8 → 0.1.0-beta.9
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/accordion-BV8Fk_Bb.js +144 -0
- package/dist/accordion.js +1 -1
- package/dist/{action-bar-C5zaYrEW.js → action-bar-1Oim1M96.js} +87 -86
- package/dist/action-bar.js +1 -1
- package/dist/action-sheet-DDYGq59n.js +358 -0
- package/dist/action-sheet.js +1 -1
- package/dist/alert-CBOYFgV4.js +162 -0
- package/dist/alert.js +1 -1
- package/dist/app-shell-lsR7E83y.js +845 -0
- package/dist/app-shell.js +1 -1
- package/dist/aspect-ratio-4-jVcJVH.js +41 -0
- package/dist/aspect-ratio.js +1 -1
- package/dist/attachment-DRJ1Xbwf.js +305 -0
- package/dist/attachment.js +1 -1
- package/dist/avatar-XLx8XVQx.js +103 -0
- package/dist/avatar-group-C7WnrQcv.js +50 -0
- package/dist/avatar-group.js +1 -1
- package/dist/avatar.js +1 -1
- package/dist/badge-D8JWis8n.js +98 -0
- package/dist/badge.js +1 -1
- package/dist/breadcrumb-Dwhy6HNo.js +222 -0
- package/dist/breadcrumb.js +1 -1
- package/dist/button-DE4tnH90.js +100 -0
- package/dist/button-group-CNDK1041.js +51 -0
- package/dist/button-group.js +1 -1
- package/dist/button.js +2 -2
- package/dist/calendar-C5MWMBJ-.js +457 -0
- package/dist/calendar.js +1 -1
- package/dist/card-D-qJkGER.js +103 -0
- package/dist/card.js +1 -1
- package/dist/carousel-AUACHYJI.js +499 -0
- package/dist/carousel.js +1 -1
- package/dist/{cascader-Cn2Acpcv.js → cascader-DxoDZicZ.js} +374 -334
- package/dist/cascader.js +1 -1
- package/dist/chart-DlFmkiTt.js +1010 -0
- package/dist/chart.js +1 -1
- package/dist/checkbox-BiQZiZNt.js +144 -0
- package/dist/checkbox-group-DGTqyyx5.js +109 -0
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/code-block-eGJk55we.js +282 -0
- package/dist/code-block.js +1 -1
- package/dist/collapsible-BZJRc6im.js +222 -0
- package/dist/collapsible.js +1 -1
- package/dist/color-picker-BwN0Z-6T.js +506 -0
- package/dist/color-picker.js +1 -1
- package/dist/column-manager-TmTLTxbk.js +586 -0
- package/dist/column-manager.js +1 -1
- package/dist/combobox-C7ah850L.js +902 -0
- package/dist/combobox.js +1 -1
- package/dist/{command-palette-Dw03scvF.js → command-palette-DaJvrDUu.js} +266 -235
- package/dist/command-palette.js +1 -1
- package/dist/container-D055iqqL.js +47 -0
- package/dist/container.js +1 -1
- package/dist/context-menu-DPVaLtM3.js +151 -0
- package/dist/context-menu.js +1 -1
- package/dist/currency-field-DaTmtosk.js +469 -0
- package/dist/currency-field.js +1 -1
- package/dist/{dashboard-grid-DsovCuVC.js → dashboard-grid-CPkG03YJ.js} +335 -330
- package/dist/dashboard-grid.js +1 -1
- package/dist/{data-grid-B93D5XsR.js → data-grid-UyqqM0QZ.js} +1329 -1180
- package/dist/data-grid.js +1 -1
- package/dist/{data-list-UtLdop-1.js → data-list-nqUyMq3p.js} +173 -147
- package/dist/data-list.js +1 -1
- package/dist/date-field-BSxzX9I5.js +299 -0
- package/dist/date-field.js +1 -1
- package/dist/date-picker-Cw5cGND1.js +316 -0
- package/dist/date-picker.js +1 -1
- package/dist/date-range-picker-l7D9XdFz.js +501 -0
- package/dist/date-range-picker.js +1 -1
- package/dist/datetime-field-KtkRmy6M.js +424 -0
- package/dist/datetime-field.js +1 -1
- package/dist/{datetime-picker-BiarFWN3.js → datetime-picker-CWNTsAk5.js} +217 -200
- package/dist/datetime-picker.js +1 -1
- package/dist/datetime-range-picker-OXDQGRWg.js +1029 -0
- package/dist/datetime-range-picker.js +1 -1
- package/dist/description-list-wYFj_gz-.js +240 -0
- package/dist/description-list.js +1 -1
- package/dist/{detail-panel-ChaIgrw3.js → detail-panel-CKizcLlb.js} +101 -93
- package/dist/detail-panel.js +1 -1
- package/dist/dialog-CpdINwbD.js +533 -0
- package/dist/dialog.js +1 -1
- package/dist/divider-mlzDmInL.js +35 -0
- package/dist/divider.js +1 -1
- package/dist/docs/code-block.json +93 -93
- package/dist/docs/code-block.md +71 -71
- package/dist/docs/currency-field.json +7 -0
- package/dist/docs/currency-field.md +1 -0
- package/dist/docs/data-grid.examples.md +1 -1
- package/dist/docs/data-grid.json +21 -4
- package/dist/docs/data-grid.md +1 -1
- package/dist/docs/data-grid.props.md +5 -3
- package/dist/docs/dialog.examples.md +118 -116
- package/dist/docs/dialog.json +8 -8
- package/dist/docs/filter-bar.json +115 -115
- package/dist/docs/filter-bar.md +78 -78
- package/dist/docs/guidelines/async-feedback.md +10 -0
- package/dist/docs/guidelines/composition.md +11 -7
- package/dist/docs/guidelines/index.md +6 -1
- package/dist/docs/guidelines/list-pages.md +30 -0
- package/dist/docs/guidelines/overviews.md +10 -0
- package/dist/docs/markdown.json +75 -75
- package/dist/docs/markdown.md +63 -63
- package/dist/docs/page-header.json +1 -1
- package/dist/docs/skills/compose-screen/SKILL.md +22 -10
- package/dist/docs/skills/review-screen/SKILL.md +6 -0
- package/dist/docs/skills/waiting-states/SKILL.md +4 -1
- package/dist/docs/tags-input.json +28 -2
- package/dist/docs/tags-input.md +4 -1
- package/dist/docs/timeline.json +129 -129
- package/dist/docs/timeline.md +120 -120
- package/dist/drawer-CRaogb8b.js +769 -0
- package/dist/drawer.js +1 -1
- package/dist/{entity-picker-BdySwW8F.js → entity-picker-Z_R15jez.js} +461 -407
- package/dist/entity-picker.js +1 -1
- package/dist/{event-calendar-CPAun_ab.js → event-calendar-BTqvEoHB.js} +466 -397
- package/dist/event-calendar.js +1 -1
- package/dist/field-DKA-qsCV.js +367 -0
- package/dist/field-group-DFBcVPei.js +138 -0
- package/dist/field-group.js +1 -1
- package/dist/field.js +1 -1
- package/dist/filter-bar-C9QzKlR7.js +1340 -0
- package/dist/filter-bar.js +1 -1
- package/dist/{form-vTCQhZM-.js → form-C3PbJPAx.js} +96 -87
- package/dist/form.js +1 -1
- package/dist/fullscreen-DnMrOXT1.js +190 -0
- package/dist/fullscreen.js +1 -1
- package/dist/grid-Ceyh0svH.js +26 -0
- package/dist/grid.js +1 -1
- package/dist/highlight-CIcfSNwz.js +59 -0
- package/dist/highlight.js +1 -1
- package/dist/hover-card-Cw65NrY1.js +215 -0
- package/dist/hover-card.js +1 -1
- package/dist/icon-DMdotKfc.js +75 -0
- package/dist/icon-button-VOA-RY_1.js +222 -0
- package/dist/icon.js +1 -1
- package/dist/{image-DpDFrrXL.js → image-CHiNVcMX.js} +24 -20
- package/dist/image.js +1 -1
- package/dist/{import-export-center-Bg1Iavoa.js → import-export-center-BZkY9DNX.js} +227 -175
- package/dist/import-export-center.js +1 -1
- package/dist/index.js +125 -125
- package/dist/inline-BvUpHX8q.js +17 -0
- package/dist/inline-message-BgA4EOsR.js +95 -0
- package/dist/inline-message.js +1 -1
- package/dist/inline.js +1 -1
- package/dist/kbd-DQwbQOQo.js +105 -0
- package/dist/kbd.js +1 -1
- package/dist/link-2zYK7lG3.js +91 -0
- package/dist/link.js +1 -1
- package/dist/list-Bl3ittKt.js +95 -0
- package/dist/list-item-C95M_E6h.js +125 -0
- package/dist/list-item.js +1 -1
- package/dist/list.js +1 -1
- package/dist/listbox-CjCzb8wA.js +626 -0
- package/dist/listbox.js +1 -1
- package/dist/loading-overlay-B6htOo0b.js +218 -0
- package/dist/loading-overlay.js +1 -1
- package/dist/markdown-CvkdDhk0.js +306 -0
- package/dist/markdown.js +1 -1
- package/dist/menu-parts-Dsszga3r.js +805 -0
- package/dist/menu.js +1 -1
- package/dist/menubar-C6ADG3vZ.js +157 -0
- package/dist/menubar.js +1 -1
- package/dist/message-Cjx5EKXr.js +434 -0
- package/dist/message-scroller-DbsTtBDf.js +216 -0
- package/dist/message-scroller.js +1 -1
- package/dist/message.js +1 -1
- package/dist/{multi-select-B8z6ApgW.js → multi-select-BwBY-V0x.js} +468 -428
- package/dist/multi-select.js +1 -1
- package/dist/navigation-menu-parts-BH_bD_nB.js +492 -0
- package/dist/navigation-menu.js +1 -1
- package/dist/notification-center-COgvX79i.js +515 -0
- package/dist/notification-center.js +1 -1
- package/dist/number-field-DAkV-0Ds.js +345 -0
- package/dist/number-field.js +1 -1
- package/dist/{otp-input-CI-kdNgx.js → otp-input-BhNLVojM.js} +75 -72
- package/dist/otp-input.js +1 -1
- package/dist/page-DhWDOrba.js +179 -0
- package/dist/page-header-_w0GDfzQ.js +369 -0
- package/dist/page-header.js +1 -1
- package/dist/page.js +1 -1
- package/dist/pagination-ORU3xJIl.js +299 -0
- package/dist/pagination.js +1 -1
- package/dist/popover-Dwj841Zz.js +500 -0
- package/dist/popover.js +1 -1
- package/dist/progress-indicator-BhljwFx8.js +289 -0
- package/dist/progress-indicator.js +1 -1
- package/dist/prompt-composer-DekRS1MN.js +259 -0
- package/dist/prompt-composer.js +1 -1
- package/dist/prose-vW3cGfUO.js +92 -0
- package/dist/prose.js +1 -1
- package/dist/radio-group-B90c6yUE.js +143 -0
- package/dist/radio-group.js +1 -1
- package/dist/rating-DQ8ekf4J.js +501 -0
- package/dist/rating.js +1 -1
- package/dist/result-state-_QpLl0_K.js +128 -0
- package/dist/result-state.js +1 -1
- package/dist/saved-views-CSVHsnUY.js +456 -0
- package/dist/saved-views.js +1 -1
- package/dist/scroll-area-YWtHa-AH.js +112 -0
- package/dist/scroll-area.js +1 -1
- package/dist/section-BIVN1b9I.js +177 -0
- package/dist/section.js +1 -1
- package/dist/segmented-control-BEhDuh3f.js +156 -0
- package/dist/segmented-control.js +1 -1
- package/dist/select-Dx9crduQ.js +1018 -0
- package/dist/{select-tags-CQMcHIQN.js → select-tags-O7s_VG8g.js} +11 -1
- package/dist/select.js +1 -1
- package/dist/side-navigation-Clp3d76j.js +747 -0
- package/dist/side-navigation.js +1 -1
- package/dist/skeleton-DhMVeVtn.js +149 -0
- package/dist/skeleton.js +1 -1
- package/dist/slider-Q4U838QA.js +264 -0
- package/dist/slider.js +1 -1
- package/dist/sparkline-BpEgC_sE.js +139 -0
- package/dist/sparkline.js +1 -1
- package/dist/split-button-BXTSOL1t.js +136 -0
- package/dist/split-button.js +1 -1
- package/dist/splitter-CQIAFS-U.js +293 -0
- package/dist/splitter.js +1 -1
- package/dist/stack-CcdrLuIO.js +16 -0
- package/dist/stack.js +1 -1
- package/dist/stat-card-B26PbBTG.js +247 -0
- package/dist/stat-card.js +1 -1
- package/dist/status-indicator-BcRmvlQi.js +78 -0
- package/dist/status-indicator.js +1 -1
- package/dist/stepper-DJiyt8_a.js +261 -0
- package/dist/stepper.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/switch-DJcPFG_K.js +144 -0
- package/dist/switch.js +1 -1
- package/dist/{table-BTSOjlTn.js → table-B_h8MWmn.js} +345 -332
- package/dist/table-of-contents-Di60gQxa.js +471 -0
- package/dist/table-of-contents.js +1 -1
- package/dist/table.js +1 -1
- package/dist/tabs-cSln63RJ.js +361 -0
- package/dist/tabs.js +1 -1
- package/dist/tag-IJC5A6Mw.js +374 -0
- package/dist/tag.js +1 -1
- package/dist/tags-input-C1rz88eV.js +729 -0
- package/dist/tags-input.js +1 -1
- package/dist/text-field-8YqMC2pD.js +203 -0
- package/dist/text-field.js +1 -1
- package/dist/textarea-CLs-VUAu.js +100 -0
- package/dist/textarea.js +1 -1
- package/dist/time-field-8ZgiPHW6.js +366 -0
- package/dist/time-field.js +1 -1
- package/dist/{time-picker-C0-O0oMU.js → time-picker-MmBtsFt-.js} +134 -121
- package/dist/time-picker.js +1 -1
- package/dist/time-range-picker-IKd3NKiC.js +779 -0
- package/dist/time-range-picker.js +1 -1
- package/dist/timeline-DHzS0QcQ.js +446 -0
- package/dist/timeline.js +1 -1
- package/dist/toast-BFK2kxCh.js +469 -0
- package/dist/toast.js +1 -1
- package/dist/toggle-Tce-wI5k.js +67 -0
- package/dist/toggle-group-CjtkcHal.js +145 -0
- package/dist/toggle-group.js +1 -1
- package/dist/toggle.js +1 -1
- package/dist/toolbar-f-xwEocO.js +241 -0
- package/dist/toolbar.js +1 -1
- package/dist/tooltip-Bhr8L7US.js +411 -0
- package/dist/tooltip.js +1 -1
- package/dist/top-navigation-DkklehE6.js +744 -0
- package/dist/top-navigation.js +1 -1
- package/dist/tour-BgFSHHxG.js +809 -0
- package/dist/tour.js +1 -1
- package/dist/transfer-kbdtwSnx.js +606 -0
- package/dist/transfer.js +1 -1
- package/dist/tree-CNUJWzmq.js +792 -0
- package/dist/tree.js +1 -1
- package/dist/types/accordion/accordion.d.ts.map +1 -1
- package/dist/types/action-bar/action-bar-overflow.d.ts.map +1 -1
- package/dist/types/action-bar/action-bar-parts.d.ts.map +1 -1
- package/dist/types/action-bar/action-bar.d.ts.map +1 -1
- package/dist/types/action-sheet/action-sheet-parts.d.ts.map +1 -1
- package/dist/types/alert/alert-parts.d.ts.map +1 -1
- package/dist/types/alert/alert.d.ts.map +1 -1
- package/dist/types/app-shell/app-shell-parts.d.ts.map +1 -1
- package/dist/types/app-shell/app-shell.d.ts.map +1 -1
- package/dist/types/aspect-ratio/aspect-ratio.d.ts.map +1 -1
- package/dist/types/attachment/attachment-parts.d.ts.map +1 -1
- package/dist/types/attachment/attachment.d.ts.map +1 -1
- package/dist/types/avatar/avatar.d.ts.map +1 -1
- package/dist/types/avatar-group/avatar-group.d.ts.map +1 -1
- package/dist/types/badge/badge-anchor.d.ts.map +1 -1
- package/dist/types/badge/badge.d.ts.map +1 -1
- package/dist/types/breadcrumb/breadcrumb-parts.d.ts.map +1 -1
- package/dist/types/breadcrumb/breadcrumb.d.ts.map +1 -1
- package/dist/types/button/button-content.d.ts.map +1 -1
- package/dist/types/button/button-indicator.d.ts.map +1 -1
- package/dist/types/button/button-link.d.ts.map +1 -1
- package/dist/types/button/button-root.d.ts +2 -2
- package/dist/types/button/button-root.d.ts.map +1 -1
- package/dist/types/button/button.d.ts.map +1 -1
- package/dist/types/button/icon-button.d.ts.map +1 -1
- package/dist/types/button/toggle-button.d.ts.map +1 -1
- package/dist/types/button-group/button-group-separator.d.ts.map +1 -1
- package/dist/types/button-group/button-group.d.ts.map +1 -1
- package/dist/types/calendar/calendar.d.ts.map +1 -1
- package/dist/types/card/card-actions.d.ts.map +1 -1
- package/dist/types/card/card-body.d.ts.map +1 -1
- package/dist/types/card/card-footer.d.ts.map +1 -1
- package/dist/types/card/card-header.d.ts.map +1 -1
- package/dist/types/card/card-link.d.ts.map +1 -1
- package/dist/types/card/card-media.d.ts.map +1 -1
- package/dist/types/card/card-selection.d.ts.map +1 -1
- package/dist/types/card/card.d.ts.map +1 -1
- package/dist/types/carousel/carousel-parts.d.ts.map +1 -1
- package/dist/types/carousel/carousel.d.ts.map +1 -1
- package/dist/types/cascader/cascader-surface.d.ts.map +1 -1
- package/dist/types/cascader/cascader.d.ts.map +1 -1
- package/dist/types/chart/chart.d.ts.map +1 -1
- package/dist/types/checkbox/checkbox.d.ts.map +1 -1
- package/dist/types/checkbox-group/checkbox-group.d.ts.map +1 -1
- package/dist/types/code-block/code-block.d.ts.map +1 -1
- package/dist/types/collapsible/collapsible-parts.d.ts.map +1 -1
- package/dist/types/collapsible/collapsible.d.ts.map +1 -1
- package/dist/types/color-picker/color-picker.d.ts.map +1 -1
- package/dist/types/column-manager/column-manager.d.ts.map +1 -1
- package/dist/types/combobox/combobox-items.d.ts.map +1 -1
- package/dist/types/combobox/combobox-parts.d.ts.map +1 -1
- package/dist/types/command-palette/command-palette.d.ts.map +1 -1
- package/dist/types/container/container-breakout.d.ts.map +1 -1
- package/dist/types/container/container.d.ts.map +1 -1
- package/dist/types/context-menu/context-menu.d.ts.map +1 -1
- package/dist/types/currency-field/currency-field-defaults.d.ts.map +1 -1
- package/dist/types/currency-field/currency-field.d.ts +1 -1
- package/dist/types/currency-field/currency-field.d.ts.map +1 -1
- package/dist/types/currency-field/currency-field.types.d.ts +14 -5
- package/dist/types/currency-field/currency-field.types.d.ts.map +1 -1
- package/dist/types/dashboard-grid/dashboard-grid.d.ts.map +1 -1
- package/dist/types/dashboard-grid/dashboard-widget.d.ts.map +1 -1
- package/dist/types/data-grid/data-grid-body.d.ts.map +1 -1
- package/dist/types/data-grid/data-grid-context.d.ts +29 -0
- package/dist/types/data-grid/data-grid-context.d.ts.map +1 -1
- package/dist/types/data-grid/data-grid-filter.d.ts.map +1 -1
- package/dist/types/data-grid/data-grid-header.d.ts.map +1 -1
- package/dist/types/data-grid/data-grid.d.ts +1 -1
- package/dist/types/data-grid/data-grid.d.ts.map +1 -1
- package/dist/types/data-grid/data-grid.types.d.ts +10 -0
- package/dist/types/data-grid/data-grid.types.d.ts.map +1 -1
- package/dist/types/data-grid/index.d.ts +1 -1
- package/dist/types/data-grid/index.d.ts.map +1 -1
- package/dist/types/data-list/data-list.d.ts.map +1 -1
- package/dist/types/date-field/date-field.d.ts.map +1 -1
- package/dist/types/date-picker/date-picker.d.ts.map +1 -1
- package/dist/types/date-range-picker/date-range-picker.d.ts.map +1 -1
- package/dist/types/datetime-field/datetime-field.d.ts.map +1 -1
- package/dist/types/datetime-picker/datetime-picker.d.ts.map +1 -1
- package/dist/types/datetime-range-picker/datetime-range-picker.d.ts.map +1 -1
- package/dist/types/description-list/description-list-parts.d.ts.map +1 -1
- package/dist/types/description-list/description-list.d.ts.map +1 -1
- package/dist/types/detail-panel/detail-panel-parts.d.ts.map +1 -1
- package/dist/types/detail-panel/detail-panel.d.ts.map +1 -1
- package/dist/types/dialog/dialog-parts.d.ts.map +1 -1
- package/dist/types/dialog/dialog.types.d.ts +5 -1
- package/dist/types/dialog/dialog.types.d.ts.map +1 -1
- package/dist/types/divider/divider.d.ts.map +1 -1
- package/dist/types/drawer/drawer-parts.d.ts.map +1 -1
- package/dist/types/entity-picker/entity-picker-control.d.ts.map +1 -1
- package/dist/types/entity-picker/entity-picker-popup.d.ts.map +1 -1
- package/dist/types/event-calendar/event-calendar-event.d.ts.map +1 -1
- package/dist/types/event-calendar/event-calendar-list.d.ts.map +1 -1
- package/dist/types/event-calendar/event-calendar-month.d.ts.map +1 -1
- package/dist/types/event-calendar/event-calendar-time-grid.d.ts.map +1 -1
- package/dist/types/event-calendar/event-calendar.d.ts.map +1 -1
- package/dist/types/field/field-parts.d.ts.map +1 -1
- package/dist/types/field/field.d.ts.map +1 -1
- package/dist/types/field-group/field-group-parts.d.ts.map +1 -1
- package/dist/types/field-group/field-group.d.ts.map +1 -1
- package/dist/types/filter-bar/filter-bar-rules.d.ts.map +1 -1
- package/dist/types/filter-bar/filter-bar.d.ts.map +1 -1
- package/dist/types/form/form-parts.d.ts.map +1 -1
- package/dist/types/form/form.d.ts.map +1 -1
- package/dist/types/fullscreen/fullscreen.d.ts.map +1 -1
- package/dist/types/grid/grid.d.ts.map +1 -1
- package/dist/types/highlight/highlight.d.ts.map +1 -1
- package/dist/types/hover-card/hover-card.d.ts.map +1 -1
- package/dist/types/icon/glyph.d.ts.map +1 -1
- package/dist/types/icon/icon.d.ts.map +1 -1
- package/dist/types/image/image.d.ts.map +1 -1
- package/dist/types/import-export-center/import-export-center.d.ts.map +1 -1
- package/dist/types/inline/inline.d.ts.map +1 -1
- package/dist/types/inline-message/inline-message.d.ts.map +1 -1
- package/dist/types/kbd/key-element.d.ts.map +1 -1
- package/dist/types/kbd/shortcut.d.ts.map +1 -1
- package/dist/types/link/link.d.ts.map +1 -1
- package/dist/types/list/list-parts.d.ts.map +1 -1
- package/dist/types/list/list.d.ts.map +1 -1
- package/dist/types/list-item/list-item-content.d.ts.map +1 -1
- package/dist/types/list-item/list-item-parts.d.ts.map +1 -1
- package/dist/types/list-item/list-item.d.ts.map +1 -1
- package/dist/types/listbox/listbox-parts.d.ts.map +1 -1
- package/dist/types/listbox/listbox.d.ts.map +1 -1
- package/dist/types/loading-overlay/loading-overlay.d.ts.map +1 -1
- package/dist/types/markdown/markdown.d.ts.map +1 -1
- package/dist/types/menu/menu-items.d.ts.map +1 -1
- package/dist/types/menu/menu-parts.d.ts.map +1 -1
- package/dist/types/menubar/menubar.d.ts.map +1 -1
- package/dist/types/message/bubble.d.ts.map +1 -1
- package/dist/types/message/message-parts.d.ts.map +1 -1
- package/dist/types/message/message.d.ts.map +1 -1
- package/dist/types/message-scroller/message-scroller.d.ts.map +1 -1
- package/dist/types/multi-select/multi-select-chips.d.ts.map +1 -1
- package/dist/types/multi-select/multi-select-items.d.ts.map +1 -1
- package/dist/types/multi-select/multi-select-parts.d.ts.map +1 -1
- package/dist/types/navigation-menu/navigation-menu-parts.d.ts.map +1 -1
- package/dist/types/navigation-menu/navigation-menu.d.ts.map +1 -1
- package/dist/types/notification-center/notification-center.d.ts.map +1 -1
- package/dist/types/number-field/number-field.d.ts.map +1 -1
- package/dist/types/otp-input/otp-input.d.ts.map +1 -1
- package/dist/types/page/page.d.ts.map +1 -1
- package/dist/types/page-header/page-header-parts.d.ts.map +1 -1
- package/dist/types/page-header/page-header.d.ts.map +1 -1
- package/dist/types/pagination/pagination-parts.d.ts.map +1 -1
- package/dist/types/pagination/pagination.d.ts.map +1 -1
- package/dist/types/popover/popover-parts.d.ts.map +1 -1
- package/dist/types/progress-indicator/progress-bar.d.ts.map +1 -1
- package/dist/types/progress-indicator/progress-circle.d.ts.map +1 -1
- package/dist/types/progress-indicator/progress-parts.d.ts.map +1 -1
- package/dist/types/progress-indicator/use-progress-indicator.d.ts.map +1 -1
- package/dist/types/prompt-composer/prompt-composer.d.ts.map +1 -1
- package/dist/types/prose/prose-parts.d.ts.map +1 -1
- package/dist/types/prose/prose-scroll.d.ts.map +1 -1
- package/dist/types/prose/prose.d.ts.map +1 -1
- package/dist/types/radio-group/radio-group-parts.d.ts.map +1 -1
- package/dist/types/radio-group/radio-group.d.ts.map +1 -1
- package/dist/types/rating/rating-display.d.ts.map +1 -1
- package/dist/types/rating/rating-summary.d.ts.map +1 -1
- package/dist/types/rating/rating.d.ts.map +1 -1
- package/dist/types/result-state/result-state-parts.d.ts.map +1 -1
- package/dist/types/result-state/result-state.d.ts.map +1 -1
- package/dist/types/saved-views/saved-views.d.ts.map +1 -1
- package/dist/types/scroll-area/scroll-area.d.ts.map +1 -1
- package/dist/types/section/section-parts.d.ts.map +1 -1
- package/dist/types/section/section.d.ts.map +1 -1
- package/dist/types/segmented-control/segmented-control-parts.d.ts.map +1 -1
- package/dist/types/segmented-control/segmented-control.d.ts.map +1 -1
- package/dist/types/select/select-items.d.ts.map +1 -1
- package/dist/types/select/select-parts.d.ts.map +1 -1
- package/dist/types/select/select-tags.d.ts.map +1 -1
- package/dist/types/side-navigation/side-navigation-parts.d.ts.map +1 -1
- package/dist/types/side-navigation/side-navigation.d.ts.map +1 -1
- package/dist/types/skeleton/skeleton-region.d.ts.map +1 -1
- package/dist/types/skeleton/skeleton-text.d.ts.map +1 -1
- package/dist/types/skeleton/skeleton.d.ts.map +1 -1
- package/dist/types/slider/slider.d.ts.map +1 -1
- package/dist/types/sparkline/sparkline.d.ts.map +1 -1
- package/dist/types/split-button/split-button-parts.d.ts.map +1 -1
- package/dist/types/split-button/split-button.d.ts.map +1 -1
- package/dist/types/splitter/splitter.d.ts.map +1 -1
- package/dist/types/stack/stack.d.ts.map +1 -1
- package/dist/types/stat-card/stat-card-delta.d.ts.map +1 -1
- package/dist/types/stat-card/stat-card-parts.d.ts.map +1 -1
- package/dist/types/stat-card/stat-card-value.d.ts.map +1 -1
- package/dist/types/stat-card/stat-card.d.ts.map +1 -1
- package/dist/types/status-indicator/status-indicator.d.ts.map +1 -1
- package/dist/types/stepper/stepper-parts.d.ts.map +1 -1
- package/dist/types/stepper/stepper.d.ts.map +1 -1
- package/dist/types/switch/switch.d.ts.map +1 -1
- package/dist/types/table/table-content.d.ts.map +1 -1
- package/dist/types/table/table-filter.d.ts.map +1 -1
- package/dist/types/table/table-parts.d.ts.map +1 -1
- package/dist/types/table/table.d.ts.map +1 -1
- package/dist/types/table-of-contents/table-of-contents-parts.d.ts.map +1 -1
- package/dist/types/table-of-contents/table-of-contents.d.ts.map +1 -1
- package/dist/types/tabs/tabs-parts.d.ts.map +1 -1
- package/dist/types/tabs/tabs.d.ts.map +1 -1
- package/dist/types/tag/tag-button.d.ts.map +1 -1
- package/dist/types/tag/tag-chip.d.ts +2 -2
- package/dist/types/tag/tag-chip.d.ts.map +1 -1
- package/dist/types/tag/tag-group.d.ts.map +1 -1
- package/dist/types/tag/tag-link.d.ts.map +1 -1
- package/dist/types/tag/tag-toggle.d.ts.map +1 -1
- package/dist/types/tags-input/tags-input-chips.d.ts.map +1 -1
- package/dist/types/tags-input/tags-input.d.ts +7 -1
- package/dist/types/tags-input/tags-input.d.ts.map +1 -1
- package/dist/types/tags-input/tags-input.types.d.ts +10 -0
- package/dist/types/tags-input/tags-input.types.d.ts.map +1 -1
- package/dist/types/text-field/text-field.d.ts.map +1 -1
- package/dist/types/textarea/textarea.d.ts.map +1 -1
- package/dist/types/time-field/time-field.d.ts.map +1 -1
- package/dist/types/time-picker/time-picker.d.ts.map +1 -1
- package/dist/types/time-range-picker/time-range-picker.d.ts.map +1 -1
- package/dist/types/timeline/timeline-parts.d.ts.map +1 -1
- package/dist/types/timeline/timeline.d.ts.map +1 -1
- package/dist/types/toast/toast-parts.d.ts.map +1 -1
- package/dist/types/toast/toast.d.ts.map +1 -1
- package/dist/types/toggle/toggle.d.ts.map +1 -1
- package/dist/types/toggle-group/toggle-group-parts.d.ts.map +1 -1
- package/dist/types/toggle-group/toggle-group.d.ts.map +1 -1
- package/dist/types/toolbar/toolbar-overflow.d.ts.map +1 -1
- package/dist/types/toolbar/toolbar-parts.d.ts.map +1 -1
- package/dist/types/toolbar/toolbar.d.ts.map +1 -1
- package/dist/types/tooltip/tooltip-parts.d.ts.map +1 -1
- package/dist/types/top-navigation/top-navigation-parts.d.ts.map +1 -1
- package/dist/types/top-navigation/top-navigation.d.ts.map +1 -1
- package/dist/types/tour/tour-parts.d.ts.map +1 -1
- package/dist/types/tour/tour.d.ts.map +1 -1
- package/dist/types/transfer/transfer.d.ts.map +1 -1
- package/dist/types/tree/tree-parts.d.ts.map +1 -1
- package/dist/types/tree/tree.d.ts.map +1 -1
- package/dist/types/typography/heading.d.ts +2 -2
- package/dist/types/typography/heading.d.ts.map +1 -1
- package/dist/types/typography/text.d.ts.map +1 -1
- package/dist/types/upload/upload-viewer.d.ts.map +1 -1
- package/dist/types/upload/upload.d.ts.map +1 -1
- package/dist/types/visually-hidden/visually-hidden.d.ts.map +1 -1
- package/dist/types/wizard/wizard-parts.d.ts.map +1 -1
- package/dist/types/wizard/wizard.d.ts.map +1 -1
- package/dist/typography-DLiIuMKf.js +93 -0
- package/dist/typography.js +1 -1
- package/dist/upload-CKwUxRtB.js +648 -0
- package/dist/upload.js +1 -1
- package/dist/visually-hidden-Dlnpzic3.js +15 -0
- package/dist/visually-hidden.js +1 -1
- package/dist/wizard-gMgYFSLO.js +838 -0
- package/dist/wizard.js +1 -1
- package/package.json +6 -6
- package/dist/accordion-lCqrmQ3w.js +0 -143
- package/dist/action-sheet-DD477dAw.js +0 -347
- package/dist/alert-CP62p9Ul.js +0 -159
- package/dist/app-shell-DNdZ5ys0.js +0 -840
- package/dist/aspect-ratio-C76l-aoY.js +0 -40
- package/dist/attachment-DdBbQcEB.js +0 -302
- package/dist/avatar-BnlE5jjr.js +0 -100
- package/dist/avatar-group-4rBj99tz.js +0 -47
- package/dist/badge-C6rbwVpu.js +0 -94
- package/dist/breadcrumb-Bf01N4wK.js +0 -218
- package/dist/button-Db9f3Bxn.js +0 -99
- package/dist/button-group-Det_nYor.js +0 -50
- package/dist/calendar-xcoBnHpK.js +0 -436
- package/dist/card-CpVu8PyZ.js +0 -102
- package/dist/carousel-BPi-Y5yF.js +0 -498
- package/dist/chart-04i6NZQA.js +0 -968
- package/dist/checkbox-B4Sb1eXj.js +0 -139
- package/dist/checkbox-group-LpGMuq9w.js +0 -108
- package/dist/code-block-CTNiyt0U.js +0 -269
- package/dist/collapsible-F-K36XbF.js +0 -217
- package/dist/color-picker-amz8XfXm.js +0 -504
- package/dist/column-manager-DonEo9wp.js +0 -585
- package/dist/combobox-C1D5doWM.js +0 -885
- package/dist/container-CjxY6rYv.js +0 -46
- package/dist/context-menu-g3DMZKR3.js +0 -150
- package/dist/currency-field-Dti9JFu0.js +0 -455
- package/dist/date-field-DEauLQVL.js +0 -290
- package/dist/date-picker-C22jlzUv.js +0 -308
- package/dist/date-range-picker-BUKoddmL.js +0 -483
- package/dist/datetime-field-Bptwvuip.js +0 -411
- package/dist/datetime-range-picker--JtLnGQ2.js +0 -1000
- package/dist/description-list-IYLnFgHT.js +0 -232
- package/dist/dialog-Ds0LJWE_.js +0 -515
- package/dist/divider-D36Jqo0J.js +0 -33
- package/dist/drawer-DZ_29U6H.js +0 -760
- package/dist/field-BxQFpOXS.js +0 -365
- package/dist/field-group-DcN_hiZN.js +0 -138
- package/dist/filter-bar-BKKqH0ui.js +0 -1335
- package/dist/fullscreen-CF0UN4mv.js +0 -187
- package/dist/grid-CIkG_2IQ.js +0 -25
- package/dist/highlight-0Qw23QPp.js +0 -57
- package/dist/hover-card-DpVzwvDJ.js +0 -214
- package/dist/icon-T9Yt4tnm.js +0 -73
- package/dist/icon-button-CCWkCDMs.js +0 -213
- package/dist/inline-D_IjcJ1n.js +0 -16
- package/dist/inline-message-C4a-A2mw.js +0 -91
- package/dist/kbd-eFSWTKxN.js +0 -100
- package/dist/link-TjvRl2VQ.js +0 -87
- package/dist/list-WsQ6ZzCa.js +0 -91
- package/dist/list-item-DpCwZIrd.js +0 -123
- package/dist/listbox-D0MJcAMm.js +0 -615
- package/dist/loading-overlay-RRsNK1FN.js +0 -208
- package/dist/markdown-IiVoh6yi.js +0 -295
- package/dist/menu-parts-BpQu2s4z.js +0 -813
- package/dist/menubar-rpNcgIrw.js +0 -156
- package/dist/message-Cp0rLCyW.js +0 -430
- package/dist/message-scroller-UZjFpflz.js +0 -214
- package/dist/navigation-menu-parts-Cn-OAadu.js +0 -492
- package/dist/notification-center-CGEEHcRA.js +0 -485
- package/dist/number-field-DXk1TAXA.js +0 -342
- package/dist/page-QP8Zyz8-.js +0 -167
- package/dist/page-header-BP_Wt3eS.js +0 -367
- package/dist/pagination-DWJc521r.js +0 -292
- package/dist/popover-DEp8Bf3e.js +0 -495
- package/dist/progress-indicator-DwvUSFFs.js +0 -269
- package/dist/prompt-composer-DdcU3S3L.js +0 -259
- package/dist/prose-CkeNYS0X.js +0 -91
- package/dist/radio-group-D8csBZ8Z.js +0 -140
- package/dist/rating-rI3b5zII.js +0 -459
- package/dist/result-state-CZsQfdN4.js +0 -126
- package/dist/saved-views-DB2IIdhH.js +0 -446
- package/dist/scroll-area-DQ_ansLu.js +0 -112
- package/dist/section-Be7dX9MC.js +0 -176
- package/dist/segmented-control-C-PzkTtg.js +0 -153
- package/dist/select-BUylPwpb.js +0 -995
- package/dist/side-navigation-BnUKTrtd.js +0 -744
- package/dist/skeleton-2LSpg84Z.js +0 -143
- package/dist/slider-fp7kyg-6.js +0 -256
- package/dist/sparkline-rY7HIFE4.js +0 -131
- package/dist/split-button-p97Bd5wM.js +0 -135
- package/dist/splitter-Bg3UgmbV.js +0 -289
- package/dist/stack-BEFavbRs.js +0 -15
- package/dist/stat-card-BG7uLytP.js +0 -244
- package/dist/status-indicator-BOjpXkU5.js +0 -73
- package/dist/stepper-DQJuRWqR.js +0 -253
- package/dist/switch-aVoc4C2F.js +0 -138
- package/dist/table-of-contents-DfAeYtFJ.js +0 -461
- package/dist/tabs-HWmvOKM4.js +0 -355
- package/dist/tag-DjtW53xN.js +0 -365
- package/dist/tags-input-pbv6x1Pi.js +0 -625
- package/dist/text-field-CbQ6UCAP.js +0 -195
- package/dist/textarea-DJSfhrXH.js +0 -99
- package/dist/time-field-DeKrogZG.js +0 -355
- package/dist/time-range-picker-Fdb70Zj_.js +0 -751
- package/dist/timeline-DH_02ysz.js +0 -421
- package/dist/toast-BTN_F9No.js +0 -468
- package/dist/toggle-CBFhM4Jh.js +0 -64
- package/dist/toggle-group-i7JPO8BM.js +0 -142
- package/dist/toolbar-U-CFEb1c.js +0 -240
- package/dist/tooltip-CgjIROUy.js +0 -410
- package/dist/top-navigation-BjIRQfkK.js +0 -739
- package/dist/tour-BTdt716T.js +0 -799
- package/dist/transfer--UOQVeKE.js +0 -596
- package/dist/tree-C6fYJqT9.js +0 -783
- package/dist/typography-B2iaigEC.js +0 -92
- package/dist/upload-DGmsz9Hw.js +0 -613
- package/dist/visually-hidden-CE6u5JLW.js +0 -14
- package/dist/wizard-BxA08vXt.js +0 -815
package/dist/docs/timeline.md
CHANGED
|
@@ -21,14 +21,14 @@ import {
|
|
|
21
21
|
Excerpt — not a complete module
|
|
22
22
|
|
|
23
23
|
```tsx
|
|
24
|
-
<Timeline label="
|
|
24
|
+
<Timeline label="Invoice activity" locale="en-US" timeZone="America/Sao_Paulo">
|
|
25
25
|
<TimelineItem
|
|
26
26
|
actor="Ana Ribeiro"
|
|
27
|
-
description="
|
|
27
|
+
description="Draft INV-4821 for Solaris Freight."
|
|
28
28
|
time="2026-09-08T09:12:00Z"
|
|
29
|
-
title="
|
|
29
|
+
title="Invoice created"
|
|
30
30
|
/>
|
|
31
|
-
<TimelineItem current time="2026-09-14T10:32:00Z" title="
|
|
31
|
+
<TimelineItem current time="2026-09-14T10:32:00Z" title="Paid" tone="success" />
|
|
32
32
|
</Timeline>;
|
|
33
33
|
```
|
|
34
34
|
|
|
@@ -38,13 +38,13 @@ Excerpt — not a complete module
|
|
|
38
38
|
| --- | --- | --- |
|
|
39
39
|
| `root` | div | yes |
|
|
40
40
|
| `fresh` | button | no |
|
|
41
|
-
| `list` | ol,
|
|
42
|
-
| `group` | li,
|
|
43
|
-
| `group-label` | h2
|
|
41
|
+
| `list` | ol, or div with role="feed" | yes |
|
|
42
|
+
| `group` | li, or div in the feed | no |
|
|
43
|
+
| `group-label` | h2 to h6, by level | no |
|
|
44
44
|
| `group-trigger` | button | no |
|
|
45
45
|
| `group-indicator` | span | no |
|
|
46
|
-
| `group-list` | ol,
|
|
47
|
-
| `item` | li,
|
|
46
|
+
| `group-list` | ol, or div in the feed | no |
|
|
47
|
+
| `item` | li, or article in the feed | yes |
|
|
48
48
|
| `opposite` | div | no |
|
|
49
49
|
| `rail` | div | yes |
|
|
50
50
|
| `marker` | span | yes |
|
|
@@ -55,69 +55,69 @@ Excerpt — not a complete module
|
|
|
55
55
|
| `time` | time | no |
|
|
56
56
|
| `description` | div | no |
|
|
57
57
|
| `actions` | div | no |
|
|
58
|
-
| `more` | button,
|
|
58
|
+
| `more` | button, or div while loading | no |
|
|
59
59
|
| `empty` | div | no |
|
|
60
60
|
|
|
61
61
|
## Props
|
|
62
62
|
|
|
63
63
|
| Name | Type | Default | Applies to | Description |
|
|
64
64
|
| --- | --- | --- | --- | --- |
|
|
65
|
-
| `mode` | `'list' \| 'feed'` | list | Timeline |
|
|
66
|
-
| `orientation` | `'vertical' \| 'horizontal'` | vertical | Timeline |
|
|
67
|
-
| `placement` | `'end' \| 'start' \| 'alternate'` | end | Timeline |
|
|
68
|
-
| `order` | `'oldest-first' \| 'newest-first'` | oldest-first | Timeline |
|
|
69
|
-
| `variant` | `'solid' \| 'outline' \| 'subtle' \| 'plain'` | subtle | Timeline |
|
|
70
|
-
| `tone` | `'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | secondary | Timeline |
|
|
71
|
-
| `size` | `'sm' \| 'md' \| 'lg'` | md | Timeline |
|
|
72
|
-
| `growing` | `'none' \| 'button' \| 'scroll'` | none | Timeline |
|
|
73
|
-
| `timeFormat` | `'absolute' \| 'relative'` | absolute | Timeline |
|
|
74
|
-
| `locale` | `string` | — | Timeline | BCP 47
|
|
75
|
-
| `timeZone` | `string` | — | Timeline |
|
|
76
|
-
| `now` | `number` | — | Timeline |
|
|
77
|
-
| `level` | `2 \| 3 \| 4 \| 5 \| 6` | 3 | Timeline |
|
|
78
|
-
| `reflow` | `boolean` | true | Timeline |
|
|
79
|
-
| `autoComplete` | `boolean` | false | Timeline |
|
|
80
|
-
| `loading` | `boolean` | false | Timeline |
|
|
81
|
-
| `freshCount` | `number` | 0 | Timeline |
|
|
82
|
-
| `count` | `number` | — | Timeline |
|
|
83
|
-
| `label` | `string` | — | Timeline |
|
|
84
|
-
| `labelledBy` | `string` | — | Timeline |
|
|
85
|
-
| `empty` | `ReactNode` | — | Timeline |
|
|
86
|
-
| `messages` | `PartialMessages<TimelineMessages>` | — | Timeline |
|
|
87
|
-
| `label` | `ReactNode` | — | TimelineGroup |
|
|
88
|
-
| `collapsible` | `boolean` | false | TimelineGroup |
|
|
89
|
-
| `open` | `boolean` | — | TimelineGroup |
|
|
90
|
-
| `defaultOpen` | `boolean` | true | TimelineGroup |
|
|
91
|
-
| `level` | `2 \| 3 \| 4 \| 5 \| 6` | — | TimelineGroup |
|
|
92
|
-
| `title` | `ReactNode` | — | TimelineItem |
|
|
93
|
-
| `description` | `ReactNode` | — | TimelineItem |
|
|
94
|
-
| `actor` | `ReactNode` | — | TimelineItem |
|
|
95
|
-
| `time` | `PlainDateTime \| string` | — | TimelineItem |
|
|
96
|
-
| `timeLabel` | `ReactNode` | — | TimelineItem |
|
|
97
|
-
| `marker` | `ReactNode` | — | TimelineItem |
|
|
98
|
-
| `opposite` | `ReactNode` | — | TimelineItem |
|
|
99
|
-
| `actions` | `ReactNode` | — | TimelineItem |
|
|
100
|
-
| `current` | `boolean` | false | TimelineItem |
|
|
101
|
-
| `complete` | `boolean` | — | TimelineItem |
|
|
102
|
-
| `loading` | `boolean` | false | TimelineItem |
|
|
103
|
-
| `connector` | `'solid' \| 'dashed' \| 'none'` | — | TimelineItem |
|
|
104
|
-
| `side` | `'start' \| 'end'` | — | TimelineItem |
|
|
105
|
-
| `tone` | `TimelineTone` | — | TimelineItem |
|
|
106
|
-
| `variant` | `TimelineVariant` | — | TimelineItem |
|
|
107
|
-
| `value` | `PlainDateTime \| string` | — | TimelineTime |
|
|
108
|
-
| `render` | `(props) => ReactNode` | — | Timeline, TimelineGroup, TimelineItem |
|
|
109
|
-
| `ref` | `Ref<HTMLElement>` | — |
|
|
110
|
-
| `useTimeline()` | `() => TimelineContextValue` | — |
|
|
111
|
-
| `TimelineTime` | `{ value, format, locale, timeZone, now }` | — |
|
|
112
|
-
| `TimelineDefaultsProvider` | `mode \| orientation \| placement \| order \| variant \| tone \| size \| growing \| timeFormat \| timeZone \| now \| level` | — |
|
|
65
|
+
| `mode` | `'list' \| 'feed'` | list | Timeline | An ordered list, or the APG Feed pattern |
|
|
66
|
+
| `orientation` | `'vertical' \| 'horizontal'` | vertical | Timeline | A column, or a row that scrolls and reflows |
|
|
67
|
+
| `placement` | `'end' \| 'start' \| 'alternate'` | end | Timeline | Which side of the line the body lives on |
|
|
68
|
+
| `order` | `'oldest-first' \| 'newest-first'` | oldest-first | Timeline | What the list is; decides where autoComplete cuts. Never reorders the array |
|
|
69
|
+
| `variant` | `'solid' \| 'outline' \| 'subtle' \| 'plain'` | subtle | Timeline | The marker appearance, inherited by the events |
|
|
70
|
+
| `tone` | `'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | secondary | Timeline | The marker tone, inherited by the events |
|
|
71
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | md | Timeline | The step of the marker and the type |
|
|
72
|
+
| `growing` | `'none' \| 'button' \| 'scroll'` | none | Timeline | How the end of what was loaded asks for more |
|
|
73
|
+
| `timeFormat` | `'absolute' \| 'relative'` | absolute | Timeline | How the time is written; relative keeps the absolute value in title |
|
|
74
|
+
| `locale` | `string` | — | Timeline | BCP 47 for the times; without it, the current locale (SlottedProvider) |
|
|
75
|
+
| `timeZone` | `string` | — | Timeline | The time zone an instant is written in; without it, the runtime’s |
|
|
76
|
+
| `now` | `number` | — | Timeline | The instant a relative reading counts from, in epoch milliseconds; without it, the clock at render |
|
|
77
|
+
| `level` | `2 \| 3 \| 4 \| 5 \| 6` | 3 | Timeline | The level of the group headings |
|
|
78
|
+
| `reflow` | `boolean` | true | Timeline | Whether horizontal and alternate reflow below thirty rems |
|
|
79
|
+
| `autoComplete` | `boolean` | false | Timeline | Marks the events on the past side of the current one complete, and dashes the future |
|
|
80
|
+
| `loading` | `boolean` | false | Timeline | More events on the way: aria-busy on the feed, ring at the end |
|
|
81
|
+
| `freshCount` | `number` | 0 | Timeline | How many new events the pill holds |
|
|
82
|
+
| `count` | `number` | — | Timeline | The total, for aria-setsize; without it, -1 while the list can grow |
|
|
83
|
+
| `label` | `string` | — | Timeline | The accessible name of the list |
|
|
84
|
+
| `labelledBy` | `string` | — | Timeline | The id of the element that names the list |
|
|
85
|
+
| `empty` | `ReactNode` | — | Timeline | What takes the place of the empty list |
|
|
86
|
+
| `messages` | `PartialMessages<TimelineMessages>` | — | Timeline | Words over the catalog of the current locale, key by key: the family’s seven messages |
|
|
87
|
+
| `label` | `ReactNode` | — | TimelineGroup | The period name, as a heading |
|
|
88
|
+
| `collapsible` | `boolean` | false | TimelineGroup | Whether the heading is a button that folds the group |
|
|
89
|
+
| `open` | `boolean` | — | TimelineGroup | Present means controlled, for the life of the group |
|
|
90
|
+
| `defaultOpen` | `boolean` | true | TimelineGroup | Where an uncontrolled group starts, read once |
|
|
91
|
+
| `level` | `2 \| 3 \| 4 \| 5 \| 6` | — | TimelineGroup | The level of this heading, over the root’s |
|
|
92
|
+
| `title` | `ReactNode` | — | TimelineItem | The event name |
|
|
93
|
+
| `description` | `ReactNode` | — | TimelineItem | The second line |
|
|
94
|
+
| `actor` | `ReactNode` | — | TimelineItem | Who did it |
|
|
95
|
+
| `time` | `PlainDateTime \| string` | — | TimelineItem | When: ISO instant or wall-clock value |
|
|
96
|
+
| `timeLabel` | `ReactNode` | — | TimelineItem | The text in place of the formatted time |
|
|
97
|
+
| `marker` | `ReactNode` | — | TimelineItem | What the marker holds in place of the dot |
|
|
98
|
+
| `opposite` | `ReactNode` | — | TimelineItem | The other side of the line |
|
|
99
|
+
| `actions` | `ReactNode` | — | TimelineItem | The row of controls |
|
|
100
|
+
| `current` | `boolean` | false | TimelineItem | The event the reader is at: aria-current |
|
|
101
|
+
| `complete` | `boolean` | — | TimelineItem | Complete; wins over the derivation |
|
|
102
|
+
| `loading` | `boolean` | false | TimelineItem | Still arriving: the marker spins the ring |
|
|
103
|
+
| `connector` | `'solid' \| 'dashed' \| 'none'` | — | TimelineItem | The line after this event |
|
|
104
|
+
| `side` | `'start' \| 'end'` | — | TimelineItem | The side under alternate; parity without it |
|
|
105
|
+
| `tone` | `TimelineTone` | — | TimelineItem | The tone of this event, over the root’s |
|
|
106
|
+
| `variant` | `TimelineVariant` | — | TimelineItem | The appearance of this event, over the root’s |
|
|
107
|
+
| `value` | `PlainDateTime \| string` | — | TimelineTime | The machine value, written in datetime |
|
|
108
|
+
| `render` | `(props) => ReactNode` | — | Timeline, TimelineGroup, TimelineItem | Replaces the rendered element. Every data attribute is handed over, and a feed article keeps its role. |
|
|
109
|
+
| `ref` | `Ref<HTMLElement>` | — | every part | Reaches the element |
|
|
110
|
+
| `useTimeline()` | `() => TimelineContextValue` | — | inside a Timeline | The resolved axes, the messages, and focusItem(index) — moving focus to a feed article, the action a prop does not express |
|
|
111
|
+
| `TimelineTime` | `{ value, format, locale, timeZone, now }` | — | anywhere | The time part alone, for an opposite column or a table cell; reads the root when there is one |
|
|
112
|
+
| `TimelineDefaultsProvider` | `mode \| orientation \| placement \| order \| variant \| tone \| size \| growing \| timeFormat \| timeZone \| now \| level` | — | Application | Decides the fourteen once for everything below; a prop on the timeline wins |
|
|
113
113
|
|
|
114
114
|
## Events
|
|
115
115
|
|
|
116
116
|
| Name | Payload | When |
|
|
117
117
|
| --- | --- | --- |
|
|
118
|
-
| `onOpenChange` | `(open: boolean, request: ChangeRequest<boolean>)` |
|
|
119
|
-
| `onLoadMore` | `(reason: "pointer" \| "keyboard" \| "scroll", event?)` |
|
|
120
|
-
| `onReveal` | `(reason: "pointer" \| "keyboard", event?)` |
|
|
118
|
+
| `onOpenChange` | `(open: boolean, request: ChangeRequest<boolean>)` | On TimelineGroup, before the group opens or closes. The request carries the previous value, the reason — pointer, keyboard or programmatic — and the source event; cancelling it moves nothing. |
|
|
119
|
+
| `onLoadMore` | `(reason: "pointer" \| "keyboard" \| "scroll", event?)` | When the reader presses the load-more button, or when the sentinel enters the scroller under growing="scroll". There is no value to hold: the consumer appends to the array. |
|
|
120
|
+
| `onReveal` | `(reason: "pointer" \| "keyboard", event?)` | When the reader presses the new-events pill. The consumer joins the events it was holding to the array and sets freshCount to zero. |
|
|
121
121
|
|
|
122
122
|
## Axes and defaults
|
|
123
123
|
|
|
@@ -137,12 +137,12 @@ Excerpt — not a complete module
|
|
|
137
137
|
|
|
138
138
|
## Rules
|
|
139
139
|
|
|
140
|
-
-
|
|
141
|
-
-
|
|
142
|
-
-
|
|
143
|
-
-
|
|
144
|
-
-
|
|
145
|
-
-
|
|
140
|
+
- In list the list is an ol and each event an li: the sequence and the set size come from the platform without a line of ARIA, and the keyboard is that of the links and buttons the consumer writes. There is no invented role on a list that does not grow.
|
|
141
|
+
- In feed the list is role="feed" and each event an article with tabindex="0", aria-posinset, aria-setsize — the declared total, the loaded count when the list does not grow, -1 when it can grow — aria-labelledby with title, actor and time in that order, and aria-describedby with the description. It is the APG Feed pattern item by item, and an li does not accept the article role: so the element changes with the mode.
|
|
142
|
+
- The current event carries aria-current="true" and a visually-hidden element with the current message after the title, because not every screen reader speaks aria-current inside an article. Complete and loading are shapes — a disc with a check, the spinner ring — and not colors only.
|
|
143
|
+
- A collapsible group is the Disclosure pattern: the heading contains a button with aria-expanded and aria-controls, and the closed list receives hidden without leaving the DOM. The button name is the period followed by ", Show events" or ", Hide events": the expand and collapse messages bring their own separator.
|
|
144
|
+
- The time is always a time element with datetime, the value the screen reader and the search engine read; the text follows the declared locale and time zone, and a relative reading leaves the absolute one in title.
|
|
145
|
+
- New events are announced in polite once per count change, and stay behind a button until the reader asks for them, so nothing moves under what is being read.
|
|
146
146
|
|
|
147
147
|
## Tokens
|
|
148
148
|
|
|
@@ -150,23 +150,23 @@ Excerpt — not a complete module
|
|
|
150
150
|
|
|
151
151
|
## Examples
|
|
152
152
|
|
|
153
|
-
###
|
|
153
|
+
### A feed that is a feed
|
|
154
154
|
|
|
155
|
-
|
|
155
|
+
With mode="feed" the list is role="feed" and each event an article with aria-posinset, aria-setsize and the label read from the title, the actor and the time. Tab stops on each article; PageDown and PageUp jump between them.
|
|
156
156
|
|
|
157
157
|
Excerpt — not a complete module
|
|
158
158
|
|
|
159
159
|
```tsx
|
|
160
|
-
<Timeline count={120} growing="button" label="
|
|
160
|
+
<Timeline count={120} growing="button" label="Activity" mode="feed" onLoadMore={load}>
|
|
161
161
|
{events.map((event) => (
|
|
162
162
|
<TimelineItem key={event.id} {...event} />
|
|
163
163
|
))}
|
|
164
164
|
</Timeline>;
|
|
165
165
|
```
|
|
166
166
|
|
|
167
|
-
###
|
|
167
|
+
### Which side of the line
|
|
168
168
|
|
|
169
|
-
end
|
|
169
|
+
end is the default; start mirrors the row; alternate puts the line in the middle and the events take turns. The opposite part always takes the side the body does not take, and below thirty rems alternate falls back to one side.
|
|
170
170
|
|
|
171
171
|
Excerpt — not a complete module
|
|
172
172
|
|
|
@@ -174,14 +174,14 @@ Excerpt — not a complete module
|
|
|
174
174
|
<Timeline placement="alternate">
|
|
175
175
|
<TimelineItem
|
|
176
176
|
opposite={<TimelineTime value="2026-06-02T00:00:00Z" />}
|
|
177
|
-
title="2.12 —
|
|
177
|
+
title="2.12 — Recurring invoices"
|
|
178
178
|
/>
|
|
179
179
|
</Timeline>;
|
|
180
180
|
```
|
|
181
181
|
|
|
182
|
-
###
|
|
182
|
+
### A row of events
|
|
183
183
|
|
|
184
|
-
horizontal
|
|
184
|
+
horizontal turns the line on its side, with equal columns that scroll on the inline axis when there are more events than width. Below thirty rems of its own width it becomes a column again; reflow={false} turns that off.
|
|
185
185
|
|
|
186
186
|
Excerpt — not a complete module
|
|
187
187
|
|
|
@@ -191,68 +191,68 @@ Excerpt — not a complete module
|
|
|
191
191
|
</Timeline>;
|
|
192
192
|
```
|
|
193
193
|
|
|
194
|
-
###
|
|
194
|
+
### The order is declared, never reversed
|
|
195
195
|
|
|
196
|
-
order
|
|
196
|
+
order says what the list is and does not reorder the array: the consumer sorts. The order decides where autoComplete cuts — in oldest-first the past is before the current event, in newest-first after it.
|
|
197
197
|
|
|
198
198
|
Excerpt — not a complete module
|
|
199
199
|
|
|
200
200
|
```tsx
|
|
201
201
|
<Timeline autoComplete order="newest-first">
|
|
202
|
-
<TimelineItem title="
|
|
203
|
-
<TimelineItem current title="
|
|
204
|
-
<TimelineItem title="
|
|
202
|
+
<TimelineItem title="Delivered" />
|
|
203
|
+
<TimelineItem current title="In transit" />
|
|
204
|
+
<TimelineItem title="Packed" />
|
|
205
205
|
</Timeline>;
|
|
206
206
|
```
|
|
207
207
|
|
|
208
|
-
###
|
|
208
|
+
### What an event can be
|
|
209
209
|
|
|
210
|
-
|
|
210
|
+
Each state is a shape as well as a color: pending is the shape of the variant, current is a filled disc with a ring, complete is a filled disc with a cut-out check, loading is the spinner at the size of the dot. autoComplete derives complete for the past side of the current event and dashes the future.
|
|
211
211
|
|
|
212
212
|
Excerpt — not a complete module
|
|
213
213
|
|
|
214
214
|
```tsx
|
|
215
215
|
<Timeline autoComplete tone="accent">
|
|
216
|
-
<TimelineItem title="
|
|
217
|
-
<TimelineItem current title="
|
|
218
|
-
<TimelineItem title="
|
|
219
|
-
<TimelineItem loading title="
|
|
216
|
+
<TimelineItem title="Order confirmed" />
|
|
217
|
+
<TimelineItem current title="In transit" />
|
|
218
|
+
<TimelineItem title="Out for delivery" />
|
|
219
|
+
<TimelineItem loading title="Delivered" />
|
|
220
220
|
</Timeline>;
|
|
221
221
|
```
|
|
222
222
|
|
|
223
|
-
###
|
|
223
|
+
### Appearance and size
|
|
224
224
|
|
|
225
|
-
variant
|
|
225
|
+
variant on the root or per event: outline separates the marker from the line in any scheme, solid fills, subtle is a background with a thin edge, plain is the dot without a ring for a row of small events. tone paints the marker with one of the five tones; size picks the step.
|
|
226
226
|
|
|
227
227
|
Excerpt — not a complete module
|
|
228
228
|
|
|
229
229
|
```tsx
|
|
230
230
|
<Timeline size="sm" variant="plain">
|
|
231
231
|
<TimelineItem title="Commit 4f2a" />
|
|
232
|
-
<TimelineItem title="
|
|
232
|
+
<TimelineItem title="Tests failed" tone="danger" variant="solid" />
|
|
233
233
|
</Timeline>;
|
|
234
234
|
```
|
|
235
235
|
|
|
236
|
-
###
|
|
236
|
+
### Grouping by period
|
|
237
237
|
|
|
238
|
-
|
|
238
|
+
The consumer groups, because the period belongs to the domain. A group is a heading of the declared level over its own list; collapsible turns the heading into a button with aria-expanded, and the closed list stays in the DOM with hidden.
|
|
239
239
|
|
|
240
240
|
Excerpt — not a complete module
|
|
241
241
|
|
|
242
242
|
```tsx
|
|
243
243
|
<Timeline level={3}>
|
|
244
|
-
<TimelineGroup collapsible label="
|
|
245
|
-
<TimelineItem title="
|
|
244
|
+
<TimelineGroup collapsible label="Today">
|
|
245
|
+
<TimelineItem title="Paid" />
|
|
246
246
|
</TimelineGroup>
|
|
247
|
-
<TimelineGroup collapsible defaultOpen={false} label="
|
|
248
|
-
<TimelineItem title="
|
|
247
|
+
<TimelineGroup collapsible defaultOpen={false} label="Last week">
|
|
248
|
+
<TimelineItem title="Sent" />
|
|
249
249
|
</TimelineGroup>
|
|
250
250
|
</Timeline>;
|
|
251
251
|
```
|
|
252
252
|
|
|
253
|
-
###
|
|
253
|
+
### Loading more
|
|
254
254
|
|
|
255
|
-
growing="button"
|
|
255
|
+
growing="button" puts a button at the end of what was loaded and asks with pointer or keyboard; growing="scroll" asks with scroll when the end enters the scroller. While loading, the end shows the ring and the root is aria-busy.
|
|
256
256
|
|
|
257
257
|
Excerpt — not a complete module
|
|
258
258
|
|
|
@@ -262,9 +262,9 @@ Excerpt — not a complete module
|
|
|
262
262
|
</Timeline>;
|
|
263
263
|
```
|
|
264
264
|
|
|
265
|
-
###
|
|
265
|
+
### New events while the reader reads
|
|
266
266
|
|
|
267
|
-
|
|
267
|
+
A feed that inserts at the top pushes what is being read. With freshCount, the family holds the new events behind a pill, announces the count in polite, and onReveal is the moment the consumer joins them to the array. The pill leaves with a transition, and focus that was on it moves to the first revealed event.
|
|
268
268
|
|
|
269
269
|
Excerpt — not a complete module
|
|
270
270
|
|
|
@@ -274,73 +274,73 @@ Excerpt — not a complete module
|
|
|
274
274
|
</Timeline>;
|
|
275
275
|
```
|
|
276
276
|
|
|
277
|
-
###
|
|
277
|
+
### Machine time, explicit time zone
|
|
278
278
|
|
|
279
|
-
time
|
|
279
|
+
time accepts an ISO instant with a zone designator, written in the declared timeZone, or a wall-clock value without a zone, written as it is. datetime always carries the machine value; timeFormat="relative" writes "2 hours ago" and keeps the absolute value in title.
|
|
280
280
|
|
|
281
281
|
Excerpt — not a complete module
|
|
282
282
|
|
|
283
283
|
```tsx
|
|
284
|
-
<SlottedProvider locale="
|
|
284
|
+
<SlottedProvider locale="en-US">
|
|
285
285
|
<TimelineDefaultsProvider now={Date.now()} timeZone="America/Sao_Paulo">
|
|
286
286
|
<Timeline timeFormat="relative">
|
|
287
|
-
<TimelineItem time="2026-09-14T10:32:00Z" title="
|
|
287
|
+
<TimelineItem time="2026-09-14T10:32:00Z" title="Paid" />
|
|
288
288
|
</Timeline>
|
|
289
289
|
</TimelineDefaultsProvider>
|
|
290
290
|
</SlottedProvider>;
|
|
291
291
|
```
|
|
292
292
|
|
|
293
|
-
###
|
|
293
|
+
### Content the family did not choose
|
|
294
294
|
|
|
295
|
-
|
|
295
|
+
A nine-word title, an unbreakable reference, an Arabic title, an avatar in the marker, an event without a title. The marker never leaves the first line and the line never leaves the center.
|
|
296
296
|
|
|
297
297
|
Excerpt — not a complete module
|
|
298
298
|
|
|
299
299
|
```tsx
|
|
300
300
|
<TimelineItem
|
|
301
301
|
marker={<Avatar name="Ana Ribeiro" />}
|
|
302
|
-
title="
|
|
302
|
+
title="Approved the revised quote for the shipment program"
|
|
303
303
|
/>;
|
|
304
304
|
```
|
|
305
305
|
|
|
306
|
-
###
|
|
306
|
+
### Composition
|
|
307
307
|
|
|
308
|
-
|
|
308
|
+
The title is whatever the consumer gives it — a Link — and the actions are buttons of the button family. Expandable content is a Collapsible inside the body. useTimeline() gives focusItem for the feed, and TimelineDefaultsProvider decides once for the application.
|
|
309
309
|
|
|
310
310
|
Excerpt — not a complete module
|
|
311
311
|
|
|
312
312
|
```tsx
|
|
313
313
|
<TimelineItem
|
|
314
|
-
actions={<Button size="sm">
|
|
315
|
-
title={<Link href="/
|
|
314
|
+
actions={<Button size="sm">Retry</Button>}
|
|
315
|
+
title={<Link href="/invoices/4821">Payment failed</Link>}
|
|
316
316
|
>
|
|
317
317
|
<Collapsible variant="plain">
|
|
318
|
-
<Collapsible.Trigger>
|
|
319
|
-
<Collapsible.Panel>
|
|
318
|
+
<Collapsible.Trigger>View the issuer response</Collapsible.Trigger>
|
|
319
|
+
<Collapsible.Panel>Code 05: do not honor.</Collapsible.Panel>
|
|
320
320
|
</Collapsible>
|
|
321
321
|
</TimelineItem>;
|
|
322
322
|
```
|
|
323
323
|
|
|
324
|
-
###
|
|
324
|
+
### No events
|
|
325
325
|
|
|
326
|
-
|
|
326
|
+
Without items and without loading, the empty part takes the place of the list with the family message or with whatever the consumer projects — a result-state, for example.
|
|
327
327
|
|
|
328
328
|
Excerpt — not a complete module
|
|
329
329
|
|
|
330
330
|
```tsx
|
|
331
|
-
<Timeline empty={<ResultState status="empty" title="
|
|
331
|
+
<Timeline empty={<ResultState status="empty" title="No events yet" />} />;
|
|
332
332
|
```
|
|
333
333
|
|
|
334
|
-
###
|
|
334
|
+
### Keyboard
|
|
335
335
|
|
|
336
|
-
|
|
336
|
+
In list the keyboard is the platform’s: Tab goes through the links and buttons of the body. In feed, Tab stops on each article, PageDown and PageUp jump between articles, Control+End and Control+Home leave the feed for the next or previous focusable element.
|
|
337
337
|
|
|
338
338
|
Excerpt — not a complete module
|
|
339
339
|
|
|
340
340
|
```tsx
|
|
341
|
-
// "
|
|
342
|
-
//
|
|
343
|
-
<Timeline label="
|
|
341
|
+
// "Paid, Solaris Freight, 2 hours ago, article 1 of 3" — title, actor and time,
|
|
342
|
+
// and the position, because each article carries aria-labelledby and aria-posinset.
|
|
343
|
+
<Timeline label="Activity" mode="feed">
|
|
344
344
|
{events}
|
|
345
345
|
</Timeline>;
|
|
346
346
|
```
|