@ds-mo/ui 14.19.1 → 14.21.0
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/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +405 -36
- package/dist/angular/ds-chip.d.ts +1 -1
- package/dist/angular/ds-chip.js +3 -3
- package/dist/angular/ds-filter-menu.d.ts +7 -1
- package/dist/angular/ds-filter-menu.js +7 -4
- package/dist/angular/ds-input.d.ts +1 -1
- package/dist/angular/ds-input.js +3 -3
- package/dist/angular/ds-tab-group.d.ts +1 -1
- package/dist/angular/ds-tab-group.js +3 -3
- package/dist/angular/ds-table-filter.d.ts +7 -1
- package/dist/angular/ds-table-filter.js +7 -4
- package/dist/angular/ds-table-group.d.ts +29 -0
- package/dist/angular/ds-table-group.js +48 -0
- package/dist/angular/ds-table-search.d.ts +20 -0
- package/dist/angular/ds-table-search.js +49 -0
- package/dist/angular/ds-table.d.ts +1 -1
- package/dist/angular/ds-table.js +3 -3
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +2 -0
- package/dist/angular/proxies.d.ts +2 -0
- package/dist/angular/proxies.js +2 -0
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-action.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-breadcrumb.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-chip.js.map +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-mobile-bar-nav.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tool-search.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-paper-texture.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-swatch-picker.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table-filter.js +1 -1
- package/dist/components/ds-table-filter.js.map +1 -1
- package/dist/components/ds-table-group.d.ts +11 -0
- package/dist/components/ds-table-group.js +2 -0
- package/dist/components/ds-table-group.js.map +1 -0
- package/dist/components/ds-table-saved-views.js +1 -1
- package/dist/components/ds-table-search.d.ts +11 -0
- package/dist/components/ds-table-search.js +2 -0
- package/dist/components/ds-table-search.js.map +1 -0
- package/dist/components/ds-table-sort.js +1 -1
- package/dist/components/ds-table-sort.js.map +1 -1
- package/dist/components/ds-table-toolbar.js +1 -1
- package/dist/components/ds-table-toolbar.js.map +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-tooltip-chart.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/{p-Bf7PZJPT.js → p-5Z4oYuiK.js} +2 -2
- package/dist/components/{p-DsgEY6mZ.js → p-6rB0eAda.js} +2 -2
- package/dist/components/{p-DZv2g9Pe.js → p-9ykZwPlI.js} +2 -2
- package/dist/components/{p-BHhmB9-4.js → p-B0kSlcaw.js} +2 -2
- package/dist/components/{p-BmlGeaY8.js → p-B1wMpt1z.js} +2 -2
- package/dist/components/p-BEttT0UB.js +2 -0
- package/dist/components/p-BEttT0UB.js.map +1 -0
- package/dist/components/p-BFit8o0r.js +2 -0
- package/dist/components/p-BFit8o0r.js.map +1 -0
- package/dist/components/{p-fRDzpfi9.js → p-BXv6RpoF.js} +2 -2
- package/dist/components/{p-CFsLF-ts.js → p-BbG7nOcz.js} +2 -2
- package/dist/components/{p-vrotWZxt.js → p-Bc_z1UwJ.js} +2 -2
- package/dist/components/{p-Bx5BSd6F.js → p-BcxidW9k.js} +2 -2
- package/dist/components/{p-BNq9fr9S.js → p-Bd8I2oXN.js} +2 -2
- package/dist/components/{p-D-MWvpg6.js → p-Bjq1KP_Y.js} +2 -2
- package/dist/components/p-Bjq1KP_Y.js.map +1 -0
- package/dist/components/{p-DW5Ita-P.js → p-BnTPuV3x.js} +2 -2
- package/dist/components/{p-DW5Ita-P.js.map → p-BnTPuV3x.js.map} +1 -1
- package/dist/components/p-BqVXMEJm.js +2 -0
- package/dist/components/p-BqVXMEJm.js.map +1 -0
- package/dist/components/{p-DdH7b4JF.js → p-CBymzuOO.js} +2 -2
- package/dist/components/{p-BjRD57w3.js → p-CE2b5GPu.js} +2 -2
- package/dist/components/{p-CRSwNbPk.js → p-CEnoPUn5.js} +2 -2
- package/dist/components/p-CFkZSDwI.js +2 -0
- package/dist/components/{p-CKtJ6FHM.js.map → p-CFkZSDwI.js.map} +1 -1
- package/dist/components/{p-Bb4KnRy0.js → p-CTH3dSYg.js} +2 -2
- package/dist/components/{p-1YHFQeI7.js → p-CUL5_8JM.js} +2 -2
- package/dist/components/{p-BubgDQlb.js → p-CZ144LS5.js} +2 -2
- package/dist/components/{p-B-HsfQOK.js → p-Cd1JnnVK.js} +2 -2
- package/dist/components/p-CeKa4VbU.js +2 -0
- package/dist/components/{p-Crz606uD.js.map → p-CeKa4VbU.js.map} +1 -1
- package/dist/components/{p-Bx1IHqJb.js → p-Cnsvgx1M.js} +2 -2
- package/dist/components/{p-BYFS2qWb.js → p-CpeJMKJ5.js} +2 -2
- package/dist/components/{p-Cxr0IQjC.js → p-CzbsTZt7.js} +2 -2
- package/dist/components/{p-D7v6Na7U.js → p-D36EmETH.js} +2 -2
- package/dist/components/{p-DFC0sRM-.js → p-DI8DUozc.js} +2 -2
- package/dist/components/{p-DIqT1m2r.js → p-DSy1oOnd.js} +2 -2
- package/dist/components/{p-DIqT1m2r.js.map → p-DSy1oOnd.js.map} +1 -1
- package/dist/components/{p-DQBT1Jkf.js → p-DbLLH3hr.js} +2 -2
- package/dist/components/{p-Drnyq8z7.js → p-Dit6JmAK.js} +2 -2
- package/dist/components/{p-caLOcQUK.js → p-DzPtYdXy.js} +2 -2
- package/dist/components/{p-Do8wbFff.js → p-XaCYqck3.js} +2 -2
- package/dist/components/{p-DKt_8s-U.js → p-Y5_MkCFn.js} +2 -2
- package/dist/components/{p-DBYCwq9L.js → p-YDxDyedE.js} +2 -2
- package/dist/components/{p-DmWoFSGs.js → p-_C-XRpCB.js} +2 -2
- package/dist/components/{p-Demfba7T.js → p-bHnk8t5I.js} +2 -2
- package/dist/components/p-hYjmOPCI.js +2 -0
- package/dist/components/p-hYjmOPCI.js.map +1 -0
- package/dist/components/{p-ChfVRPHw.js → p-pUOA3iDG.js} +2 -2
- package/dist/components/p-pnO8tAYB.js +2 -0
- package/dist/components/{p-Cp5Hr7Vz.js.map → p-pnO8tAYB.js.map} +1 -1
- package/dist/components/{p-B6WQre5D.js → p-pxN8JGEh.js} +2 -2
- package/dist/components/p-pxN8JGEh.js.map +1 -0
- package/dist/components/{p-BWwiCvep.js → p-rw0ZxIE4.js} +2 -2
- package/dist/components/{p-B4wTnsUL.js → p-w9fkkwL2.js} +2 -2
- package/dist/components/p-x5u5Ueli.js +2 -0
- package/dist/components/{p-BeA6Jv-3.js.map → p-x5u5Ueli.js.map} +1 -1
- package/dist/docs/components.json +1400 -44
- package/dist/lib/utils/date-filter-value.d.ts +57 -0
- package/dist/lib/utils/index.d.ts +2 -0
- package/dist/lib/utils/index.js +67 -0
- package/dist/lib/utils/index.js.map +3 -3
- package/dist/mcp-data/registry/button-filled.json +1 -0
- package/dist/mcp-data/registry/button-unfilled.json +1 -0
- package/dist/mcp-data/registry/chip.json +39 -2
- package/dist/mcp-data/registry/filter-menu.json +134 -14
- package/dist/mcp-data/registry/input.json +54 -2
- package/dist/mcp-data/registry/panel-tool-search.json +4 -5
- package/dist/mcp-data/registry/registry.json +410 -35
- package/dist/mcp-data/registry/select.json +1 -0
- package/dist/mcp-data/registry/tab-group.json +21 -2
- package/dist/mcp-data/registry/table-filter.json +83 -11
- package/dist/mcp-data/registry/table-group.json +301 -0
- package/dist/mcp-data/registry/table-search.json +343 -0
- package/dist/mcp-data/registry/table-sort.json +1 -1
- package/dist/mcp-data/registry/table-toolbar.json +7 -6
- package/dist/mcp-data/registry/table.json +55 -17
- package/dist/react/components.d.ts +2 -0
- package/dist/react/components.js +2 -0
- package/dist/react/ds-filter-menu.d.ts +2 -1
- package/dist/react/ds-filter-menu.js +1 -0
- package/dist/react/ds-table-filter.d.ts +2 -1
- package/dist/react/ds-table-filter.js +1 -0
- package/dist/react/ds-table-group.d.ts +14 -0
- package/dist/react/ds-table-group.js +16 -0
- package/dist/react/ds-table-search.d.ts +14 -0
- package/dist/react/ds-table-search.js +16 -0
- package/dist/styles/table.css +46 -0
- package/dist/types/components/Chip/Chip.d.ts +5 -0
- package/dist/types/components/FilterMenu/FilterMenu.d.ts +46 -1
- package/dist/types/components/FilterMenu/filter-menu-calendar.d.ts +13 -0
- package/dist/types/components/Input/Input.d.ts +6 -0
- package/dist/types/components/TabGroup/TabGroup.d.ts +2 -0
- package/dist/types/components/Table/Table.d.ts +6 -0
- package/dist/types/components/Table/index.d.ts +1 -1
- package/dist/types/components/Table/table-cell-model.d.ts +11 -1
- package/dist/types/components/Table/table-highlight.d.ts +12 -0
- package/dist/types/components/Table/table-model.d.ts +6 -5
- package/dist/types/components/Table/table-render-model.d.ts +1 -1
- package/dist/types/components/Table/table-row-view.d.ts +4 -1
- package/dist/types/components/Table/table-types.d.ts +22 -4
- package/dist/types/components/Table/table-virtual-model.d.ts +2 -0
- package/dist/types/components/TableFilter/TableFilter.d.ts +9 -1
- package/dist/types/components/TableGroup/TableGroup.d.ts +60 -0
- package/dist/types/components/TableSearch/TableSearch.d.ts +56 -0
- package/dist/types/components/TableSearch/table-search-model.d.ts +10 -0
- package/dist/types/components/TableSearch/table-search-types.d.ts +10 -0
- package/dist/types/components.d.ts +410 -8
- package/dist/types/utils/choice-list-parts.d.ts +11 -1
- package/dist/types/utils/date-filter-value.d.ts +58 -0
- package/dist/types/utils/index.d.ts +2 -0
- package/dist/types/utils/select-controller.d.ts +1 -1
- package/dist/vue/components.d.ts +2 -0
- package/dist/vue/components.js +2 -0
- package/dist/vue/ds-chip.js +2 -0
- package/dist/vue/ds-filter-menu.js +7 -0
- package/dist/vue/ds-input.js +3 -0
- package/dist/vue/ds-tab-group.js +1 -0
- package/dist/vue/ds-table-filter.js +5 -0
- package/dist/vue/ds-table-group.d.ts +3 -0
- package/dist/vue/ds-table-group.js +20 -0
- package/dist/vue/ds-table-search.d.ts +3 -0
- package/dist/vue/ds-table-search.js +22 -0
- package/dist/vue/ds-table.js +2 -0
- package/package.json +1 -1
- package/dist/components/p-B6WQre5D.js.map +0 -1
- package/dist/components/p-BeA6Jv-3.js +0 -2
- package/dist/components/p-CKtJ6FHM.js +0 -2
- package/dist/components/p-Cp5Hr7Vz.js +0 -2
- package/dist/components/p-CpUXubax.js +0 -2
- package/dist/components/p-CpUXubax.js.map +0 -1
- package/dist/components/p-Crz606uD.js +0 -2
- package/dist/components/p-D-MWvpg6.js.map +0 -1
- package/dist/components/p-DA5H_Iq_.js +0 -2
- package/dist/components/p-DA5H_Iq_.js.map +0 -1
- package/dist/components/p-Djxw2FjZ.js +0 -2
- package/dist/components/p-Djxw2FjZ.js.map +0 -1
- /package/dist/components/{p-Bf7PZJPT.js.map → p-5Z4oYuiK.js.map} +0 -0
- /package/dist/components/{p-DsgEY6mZ.js.map → p-6rB0eAda.js.map} +0 -0
- /package/dist/components/{p-DZv2g9Pe.js.map → p-9ykZwPlI.js.map} +0 -0
- /package/dist/components/{p-BHhmB9-4.js.map → p-B0kSlcaw.js.map} +0 -0
- /package/dist/components/{p-BmlGeaY8.js.map → p-B1wMpt1z.js.map} +0 -0
- /package/dist/components/{p-fRDzpfi9.js.map → p-BXv6RpoF.js.map} +0 -0
- /package/dist/components/{p-CFsLF-ts.js.map → p-BbG7nOcz.js.map} +0 -0
- /package/dist/components/{p-vrotWZxt.js.map → p-Bc_z1UwJ.js.map} +0 -0
- /package/dist/components/{p-Bx5BSd6F.js.map → p-BcxidW9k.js.map} +0 -0
- /package/dist/components/{p-BNq9fr9S.js.map → p-Bd8I2oXN.js.map} +0 -0
- /package/dist/components/{p-DdH7b4JF.js.map → p-CBymzuOO.js.map} +0 -0
- /package/dist/components/{p-BjRD57w3.js.map → p-CE2b5GPu.js.map} +0 -0
- /package/dist/components/{p-CRSwNbPk.js.map → p-CEnoPUn5.js.map} +0 -0
- /package/dist/components/{p-Bb4KnRy0.js.map → p-CTH3dSYg.js.map} +0 -0
- /package/dist/components/{p-1YHFQeI7.js.map → p-CUL5_8JM.js.map} +0 -0
- /package/dist/components/{p-BubgDQlb.js.map → p-CZ144LS5.js.map} +0 -0
- /package/dist/components/{p-B-HsfQOK.js.map → p-Cd1JnnVK.js.map} +0 -0
- /package/dist/components/{p-Bx1IHqJb.js.map → p-Cnsvgx1M.js.map} +0 -0
- /package/dist/components/{p-BYFS2qWb.js.map → p-CpeJMKJ5.js.map} +0 -0
- /package/dist/components/{p-Cxr0IQjC.js.map → p-CzbsTZt7.js.map} +0 -0
- /package/dist/components/{p-D7v6Na7U.js.map → p-D36EmETH.js.map} +0 -0
- /package/dist/components/{p-DFC0sRM-.js.map → p-DI8DUozc.js.map} +0 -0
- /package/dist/components/{p-DQBT1Jkf.js.map → p-DbLLH3hr.js.map} +0 -0
- /package/dist/components/{p-Drnyq8z7.js.map → p-Dit6JmAK.js.map} +0 -0
- /package/dist/components/{p-caLOcQUK.js.map → p-DzPtYdXy.js.map} +0 -0
- /package/dist/components/{p-Do8wbFff.js.map → p-XaCYqck3.js.map} +0 -0
- /package/dist/components/{p-DKt_8s-U.js.map → p-Y5_MkCFn.js.map} +0 -0
- /package/dist/components/{p-DBYCwq9L.js.map → p-YDxDyedE.js.map} +0 -0
- /package/dist/components/{p-DmWoFSGs.js.map → p-_C-XRpCB.js.map} +0 -0
- /package/dist/components/{p-Demfba7T.js.map → p-bHnk8t5I.js.map} +0 -0
- /package/dist/components/{p-ChfVRPHw.js.map → p-pUOA3iDG.js.map} +0 -0
- /package/dist/components/{p-BWwiCvep.js.map → p-rw0ZxIE4.js.map} +0 -0
- /package/dist/components/{p-B4wTnsUL.js.map → p-w9fkkwL2.js.map} +0 -0
|
@@ -1828,6 +1828,7 @@
|
|
|
1828
1828
|
],
|
|
1829
1829
|
"states": [
|
|
1830
1830
|
"Every size applies one complete control-density recipe across frame height, inline padding, icon zone, text-container inset, gap, and radius.",
|
|
1831
|
+
"Every button has a minimum inline size equal to its resolved height. Short labels therefore form a square control while longer labels continue to hug their content.",
|
|
1831
1832
|
"Set isInset only when the button is nested inside a same-size control. The default single inset removes 4px overall; insetDepth double removes 8px overall so the parent can add 4px per edge while preserving its outer alignment box. Double inset falls back to single at xs to protect minimum icon geometry.",
|
|
1832
1833
|
"Use only one filled action per local decision area; render all secondary actions with ButtonUnfilled.",
|
|
1833
1834
|
"Choose brand or neutral for general commands. Reserve positive, negative, warning, and caution for matching action consequences, and AI, guide, or walkthrough for actions that enter those feature experiences.",
|
|
@@ -2045,6 +2046,7 @@
|
|
|
2045
2046
|
],
|
|
2046
2047
|
"states": [
|
|
2047
2048
|
"Every size applies one complete control-density recipe across frame height, inline padding, icon zone, text-container inset, gap, and radius.",
|
|
2049
|
+
"Every button has a minimum inline size equal to its resolved height. Short labels therefore form a square control while longer labels continue to hug their content.",
|
|
2048
2050
|
"Set isInset only when the button is nested inside a same-size control. The default single inset removes 4px overall; insetDepth double removes 8px overall so the parent can add 4px per edge while preserving its outer alignment box. Double inset falls back to single at xs to protect minimum icon geometry.",
|
|
2049
2051
|
"A true pressed toggle and owner-controlled isActive emphasis share the selected visual treatment, but only pressed supplies toggle semantics and dsChange.",
|
|
2050
2052
|
"General content UI keeps the selected interaction fill and border for pressed or active emphasis.",
|
|
@@ -3135,6 +3137,7 @@
|
|
|
3135
3137
|
"The dismiss action is the chip's only interaction, and the parent owns data mutation after dsRemove.",
|
|
3136
3138
|
"Long labels remain on one line and truncate only when the consuming layout supplies a maximum width; otherwise the chip sizes to its content.",
|
|
3137
3139
|
"Rounded shape is a visual choice and does not change semantics or interaction.",
|
|
3140
|
+
"isInset opts into reduced outer geometry only when Chip is nested inside a control of the same density. The dismiss button applies the same inset depth again inside the Chip's already-reduced height, and its trailing padding matches the resulting top and bottom space. The default single inset removes 4px overall; insetDepth double removes 8px overall and falls back to single at xs.",
|
|
3138
3141
|
"Chip is designed only for primary surfaces and has no surface-context API."
|
|
3139
3142
|
],
|
|
3140
3143
|
"responsiveBehavior": [
|
|
@@ -3160,10 +3163,18 @@
|
|
|
3160
3163
|
]
|
|
3161
3164
|
},
|
|
3162
3165
|
"props": {
|
|
3166
|
+
"insetDepth": {
|
|
3167
|
+
"type": "ControlInsetDepth",
|
|
3168
|
+
"required": false
|
|
3169
|
+
},
|
|
3163
3170
|
"isInactive": {
|
|
3164
3171
|
"type": "boolean",
|
|
3165
3172
|
"required": false
|
|
3166
3173
|
},
|
|
3174
|
+
"isInset": {
|
|
3175
|
+
"type": "boolean",
|
|
3176
|
+
"required": false
|
|
3177
|
+
},
|
|
3167
3178
|
"label": {
|
|
3168
3179
|
"type": "string",
|
|
3169
3180
|
"required": true
|
|
@@ -3904,7 +3915,7 @@
|
|
|
3904
3915
|
{
|
|
3905
3916
|
"name": "filter-menu",
|
|
3906
3917
|
"title": "FilterMenu",
|
|
3907
|
-
"description": "Controlled two-pane filter select with menu-recipe category navigation, single- and multiple-choice, boolean,
|
|
3918
|
+
"description": "Controlled two-pane filter select with menu-recipe category navigation, local option search for non-date categories, single- and multiple-choice, boolean, semantic relative-date and fixed-range filters, selected counts, and a clear action.",
|
|
3908
3919
|
"type": "registry:ui",
|
|
3909
3920
|
"meta": {
|
|
3910
3921
|
"library": "@ds-mo/ui",
|
|
@@ -3915,7 +3926,7 @@
|
|
|
3915
3926
|
"intent": {
|
|
3916
3927
|
"audience": "general",
|
|
3917
3928
|
"status": "stable",
|
|
3918
|
-
"summary": "Controlled two-pane filter select with menu-recipe category navigation, single- and multiple-choice, boolean,
|
|
3929
|
+
"summary": "Controlled two-pane filter select with menu-recipe category navigation, local option search for non-date categories, single- and multiple-choice, boolean, semantic relative-date and fixed-range filters, selected counts, and a clear action.",
|
|
3919
3930
|
"useWhen": [
|
|
3920
3931
|
"A compact trigger must expose several filter families without turning the toolbar into many separate controls.",
|
|
3921
3932
|
"Users need to move between persistent filter categories while editing the selected category in a second pane."
|
|
@@ -3945,16 +3956,23 @@
|
|
|
3945
3956
|
"accessibility": [
|
|
3946
3957
|
"The built-in select trigger exposes combobox semantics with a dialog popup, synchronizes expanded state, holds the pressed interaction wash without changing resting foreground while open, and restores focus after dismissal.",
|
|
3947
3958
|
"The category pane is a vertical tab list. Arrow Up and Arrow Down wrap, Home and End jump, Arrow Right enters the option pane, and Arrow Left returns to the active category.",
|
|
3959
|
+
"Every non-date category begins with a labelled search field. Arrow Down and Arrow Up enter the first or last visible option, while Left and Right retain native text-caret behavior. Search matches option labels and descriptions without changing selected values.",
|
|
3948
3960
|
"Escape and outside activation close the popup and restore trigger focus. Tab moves through option controls and closes only when it leaves the popup boundary.",
|
|
3961
|
+
"Date filters expose containerless Range and Relative tabs in a secondary-background header with 4px padding around the 32px medium control. Relative presets use listbox semantics; the range calendar exposes a labelled grid, one tab stop, arrow-key day navigation, Home and End week navigation, and Page Up or Page Down month navigation. After a range start is chosen, pointer hover and keyboard focus preview the possible inclusive range without changing selection semantics.",
|
|
3949
3962
|
"When an external trigger is inside an open shadow tree, pass its HTMLElement through anchor so outside activation, focus return, and Tab continuation use the composed tree.",
|
|
3950
|
-
"The trigger count reports active filter categories.
|
|
3963
|
+
"The trigger count reports active filter categories. Multiple-choice category tags report individual selected criteria, while an applied Date category uses a visual dot because its value is singular. The default summary footer announces the total; the categories-clear footer recipe reserves a visually empty category-pane action row and exposes its divider and only Clear when criteria are active."
|
|
3951
3964
|
],
|
|
3952
3965
|
"states": [
|
|
3953
|
-
"The application owns filters, values, activeFilterId, and open. Replace controlled objects and arrays after dsChange, dsActiveFilterChange, dsClear, or dsClose.",
|
|
3954
|
-
"Single filters return a string, multiple filters return ordered string arrays, boolean filters return a boolean, and date filters return a
|
|
3966
|
+
"The application owns filters, values, matchModes, activeFilterId, and open. Replace controlled objects and arrays after dsChange, dsMatchModeChange, dsActiveFilterChange, dsClear, or dsClose.",
|
|
3967
|
+
"Single filters return a string, multiple filters return ordered string arrays, boolean filters return a boolean, and date filters return a serializable semantic string.",
|
|
3968
|
+
"Multiple filters expose a right-pane footer reading Limit results to any or all selected. any is the default OR mode. Activating the blue mode word requests the opposite controlled mode through dsMatchModeChange; the application owns the corresponding query semantics.",
|
|
3969
|
+
"Non-date option search is internal, scoped independently per category while the popup remains open, and reset after the popup closes. An unmatched query shows the configurable noResultsText empty state. Date uses its Relative and Range modes instead of option search.",
|
|
3970
|
+
"Date values are serializable semantic strings: relative:<preset> preserves a relative choice for future resolution and range:<start>/<end> preserves fixed inclusive ISO calendar dates. A legacy YYYY-MM-DD value is interpreted as a one-day range.",
|
|
3971
|
+
"Relative presets are Today, Yesterday, and the last 7, 14, 30, 60, or 90 inclusive calendar days. Applications resolve them against their current product date and time-zone policy by using resolveDateFilterRange from @ds-mo/ui/utils.",
|
|
3972
|
+
"Range selection applies the first date immediately as a one-day range; while an end is pending, that selected start retains its bold treatment and hovering or focusing another day paints the rest of the provisional inclusive span faint without emitting a value. A second activation completes an ordered inclusive range and gives both edges the bold treatment. A new activation after completion starts a replacement range.",
|
|
3955
3973
|
"Selection applies immediately and does not close the popup.",
|
|
3956
3974
|
"Changing category replaces the option-pane subtree so checkbox and other option visuals mount in their new state instead of transitioning from the previous category's row state.",
|
|
3957
|
-
"The trigger reports how many filter categories have selections
|
|
3975
|
+
"The trigger reports how many filter categories have selections. footerLayout=summary adds a full-width selected-count footer only while values are selected; footerLayout=categories-clear always reserves the category-pane footer height while keeping its inactive divider hidden, then reveals the divider and only its left-aligned Clear action while values are selected."
|
|
3958
3976
|
],
|
|
3959
3977
|
"responsiveBehavior": [
|
|
3960
3978
|
"The popup defaults to the large menu-width token and clamps to the nearest data-ds-overlay-boundary rectangle or the viewport fallback.",
|
|
@@ -3964,13 +3982,13 @@
|
|
|
3964
3982
|
],
|
|
3965
3983
|
"frameworkCaveats": {
|
|
3966
3984
|
"customElements": [
|
|
3967
|
-
"Assign filters and
|
|
3985
|
+
"Assign filters, values, and matchModes as JavaScript properties after the element is defined."
|
|
3968
3986
|
],
|
|
3969
3987
|
"react": [
|
|
3970
|
-
"Pass filters and
|
|
3988
|
+
"Pass filters, values, and matchModes as controlled props and handle onDsChange, onDsMatchModeChange, onDsActiveFilterChange, onDsClear, and onDsClose."
|
|
3971
3989
|
],
|
|
3972
3990
|
"angular": [
|
|
3973
|
-
"Use property bindings for filters and
|
|
3991
|
+
"Use property bindings for filters, values, and matchModes and event bindings for dsChange, dsMatchModeChange, dsActiveFilterChange, dsClear, and dsClose."
|
|
3974
3992
|
]
|
|
3975
3993
|
},
|
|
3976
3994
|
"references": [
|
|
@@ -4029,6 +4047,10 @@
|
|
|
4029
4047
|
"type": "FilterMenuFilter[]",
|
|
4030
4048
|
"required": false
|
|
4031
4049
|
},
|
|
4050
|
+
"footerLayout": {
|
|
4051
|
+
"type": "FilterMenuFooterLayout",
|
|
4052
|
+
"required": false
|
|
4053
|
+
},
|
|
4032
4054
|
"hasBorder": {
|
|
4033
4055
|
"type": "boolean",
|
|
4034
4056
|
"required": false
|
|
@@ -4045,6 +4067,10 @@
|
|
|
4045
4067
|
"type": "string | undefined",
|
|
4046
4068
|
"required": false
|
|
4047
4069
|
},
|
|
4070
|
+
"matchModes": {
|
|
4071
|
+
"type": "FilterMenuMatchModes",
|
|
4072
|
+
"required": false
|
|
4073
|
+
},
|
|
4048
4074
|
"menuLabel": {
|
|
4049
4075
|
"type": "string",
|
|
4050
4076
|
"required": false
|
|
@@ -4053,10 +4079,22 @@
|
|
|
4053
4079
|
"type": "string",
|
|
4054
4080
|
"required": false
|
|
4055
4081
|
},
|
|
4082
|
+
"noResultsText": {
|
|
4083
|
+
"type": "string",
|
|
4084
|
+
"required": false
|
|
4085
|
+
},
|
|
4056
4086
|
"open": {
|
|
4057
4087
|
"type": "boolean",
|
|
4058
4088
|
"required": false
|
|
4059
4089
|
},
|
|
4090
|
+
"searchPlaceholder": {
|
|
4091
|
+
"type": "string",
|
|
4092
|
+
"required": false
|
|
4093
|
+
},
|
|
4094
|
+
"showSelectedCount": {
|
|
4095
|
+
"type": "boolean",
|
|
4096
|
+
"required": false
|
|
4097
|
+
},
|
|
4060
4098
|
"side": {
|
|
4061
4099
|
"type": "AnchoredSide",
|
|
4062
4100
|
"required": false
|
|
@@ -4103,6 +4141,10 @@
|
|
|
4103
4141
|
"name": "dsClose",
|
|
4104
4142
|
"detail": "void"
|
|
4105
4143
|
},
|
|
4144
|
+
{
|
|
4145
|
+
"name": "dsMatchModeChange",
|
|
4146
|
+
"detail": "FilterMenuMatchModeChangeDetail"
|
|
4147
|
+
},
|
|
4106
4148
|
{
|
|
4107
4149
|
"name": "dsOpenChange",
|
|
4108
4150
|
"detail": "boolean"
|
|
@@ -4122,9 +4164,13 @@
|
|
|
4122
4164
|
"@ds-mo/icons"
|
|
4123
4165
|
],
|
|
4124
4166
|
"registryDependencies": [
|
|
4167
|
+
"badge",
|
|
4125
4168
|
"button-unfilled",
|
|
4126
4169
|
"checkbox",
|
|
4170
|
+
"empty-state",
|
|
4127
4171
|
"icon",
|
|
4172
|
+
"input",
|
|
4173
|
+
"tab-group",
|
|
4128
4174
|
"tag",
|
|
4129
4175
|
"text",
|
|
4130
4176
|
"tooltip"
|
|
@@ -4312,10 +4358,12 @@
|
|
|
4312
4358
|
],
|
|
4313
4359
|
"states": [
|
|
4314
4360
|
"Every size applies one complete control-density recipe across frame height, inline padding, icon zones, text-container inset, gap, and radius; supporting error content follows the shared 4px field flow.",
|
|
4315
|
-
"The normal field boundary uses the shared secondary inset border. Focus promotes it to the thicker bold-brand inset stroke, while error uses the thicker bold-negative inset stroke without changing geometry. Set hasBorder to false only in chrome that supplies enough surrounding structure;
|
|
4361
|
+
"The normal field boundary uses the shared secondary inset border. Focus promotes it to the thicker bold-brand inset stroke, while error uses the thicker bold-negative inset stroke without changing geometry. Set hasBorder to false only in chrome that supplies enough surrounding structure; set hasInteractionFill to false when that containing chrome also owns hover and pressed feedback.",
|
|
4316
4362
|
"Placeholder text is secondary at rest and quaternary while the editable field is focused because it becomes decorative once typing begins. Single-line placeholder and entered value text truncate with an ellipsis when the field is narrower than its content.",
|
|
4317
4363
|
"Entered values use the parent surface's primary foreground; prefix icons, suffix content, and resting placeholder text use its secondary foreground.",
|
|
4318
4364
|
"Search fields show a standard borderless CrossCircle icon action only while they contain a value. Clearing emits the empty value and restores focus to the native field.",
|
|
4365
|
+
"Search fields disable browser autocomplete history, automatic capitalization, autocorrection, and spellchecking by default so browser-owned suggestions do not compete with product-owned results. Consumers can explicitly provide autoComplete when a different native history behavior is required.",
|
|
4366
|
+
"Search fields used with owned result sets forward aria-controls and aria-activedescendant to the native field so keyboard focus can remain in the query while assistive technology tracks the active result.",
|
|
4319
4367
|
"The suffix slot is for compact units or decorations. The optional leading icon is decorative and does not replace the field label.",
|
|
4320
4368
|
"Use autoComplete, inputMode, and enterKeyHint to provide browser and virtual-keyboard hints without changing the value's semantic type.",
|
|
4321
4369
|
"Number fields preserve native spinbutton semantics, keyboard stepping, and min/max constraint behavior while dsChange continues to report the native string value. Two borderless inset chevron actions split the available inner height, disable independently at their numeric bound, and restore focus to the spinbutton after pointer activation.",
|
|
@@ -4355,6 +4403,14 @@
|
|
|
4355
4403
|
]
|
|
4356
4404
|
},
|
|
4357
4405
|
"props": {
|
|
4406
|
+
"ariaActiveDescendant": {
|
|
4407
|
+
"type": "string | undefined",
|
|
4408
|
+
"required": false
|
|
4409
|
+
},
|
|
4410
|
+
"ariaControls": {
|
|
4411
|
+
"type": "string | undefined",
|
|
4412
|
+
"required": false
|
|
4413
|
+
},
|
|
4358
4414
|
"ariaDescribedby": {
|
|
4359
4415
|
"type": "string | undefined",
|
|
4360
4416
|
"required": false
|
|
@@ -4403,6 +4459,10 @@
|
|
|
4403
4459
|
"type": "boolean",
|
|
4404
4460
|
"required": false
|
|
4405
4461
|
},
|
|
4462
|
+
"hasInteractionFill": {
|
|
4463
|
+
"type": "boolean",
|
|
4464
|
+
"required": false
|
|
4465
|
+
},
|
|
4406
4466
|
"icon": {
|
|
4407
4467
|
"type": "string | undefined",
|
|
4408
4468
|
"required": false
|
|
@@ -6846,13 +6906,12 @@
|
|
|
6846
6906
|
},
|
|
6847
6907
|
"dependencies": [
|
|
6848
6908
|
"@ds-mo/ui",
|
|
6849
|
-
"@ds-mo/tokens"
|
|
6850
|
-
"@ds-mo/icons"
|
|
6909
|
+
"@ds-mo/tokens"
|
|
6851
6910
|
],
|
|
6852
6911
|
"registryDependencies": [
|
|
6853
6912
|
"button-unfilled",
|
|
6854
6913
|
"divider",
|
|
6855
|
-
"
|
|
6914
|
+
"input",
|
|
6856
6915
|
"text",
|
|
6857
6916
|
"tooltip"
|
|
6858
6917
|
]
|
|
@@ -7708,6 +7767,7 @@
|
|
|
7708
7767
|
"checkbox",
|
|
7709
7768
|
"empty-state",
|
|
7710
7769
|
"icon",
|
|
7770
|
+
"input",
|
|
7711
7771
|
"loader",
|
|
7712
7772
|
"text",
|
|
7713
7773
|
"tooltip"
|
|
@@ -9006,6 +9066,7 @@
|
|
|
9006
9066
|
"A missing, empty, inactive, or unknown selected value is invalid when enabled tabs exist; the component does not choose a fallback selection.",
|
|
9007
9067
|
"Selection is singular and follows keyboard focus.",
|
|
9008
9068
|
"Width follows the shared control contract: hug keeps the track content-sized, while fill occupies the parent width and distributes available space equally across selectable segments; dividers remain fixed-width separators.",
|
|
9069
|
+
"hasContainer defaults to true. Set it to false only when a parent surface owns the track background and boundary; the outer fill, border, and inset disappear while selected-pill, interaction, focus, density, and keyboard behavior remain unchanged.",
|
|
9009
9070
|
"Small, medium, and large use the shared 24px, 32px, and 40px control-density recipes for the outer track. Each segment uses the same-size inset recipe at 20px, 28px, and 36px while preserving that density's typography, icon, gap, and label metrics.",
|
|
9010
9071
|
"Use one consistent content variant across every selectable tab in a group.",
|
|
9011
9072
|
"Omitted background is for primary and secondary surfaces; pass the faint context explicitly on faint surfaces.",
|
|
@@ -9049,6 +9110,10 @@
|
|
|
9049
9110
|
"type": "TabBackground | undefined",
|
|
9050
9111
|
"required": false
|
|
9051
9112
|
},
|
|
9113
|
+
"hasContainer": {
|
|
9114
|
+
"type": "boolean",
|
|
9115
|
+
"required": false
|
|
9116
|
+
},
|
|
9052
9117
|
"size": {
|
|
9053
9118
|
"type": "TabGroupSize",
|
|
9054
9119
|
"required": false
|
|
@@ -9094,7 +9159,7 @@
|
|
|
9094
9159
|
{
|
|
9095
9160
|
"name": "table",
|
|
9096
9161
|
"title": "Table",
|
|
9097
|
-
"description": "Semantic, controlled data table with durable visual primitives for cell geometry, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
|
|
9162
|
+
"description": "Semantic, controlled data table with durable visual primitives for cell geometry, wrapping multiple-Tag cells, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
|
|
9098
9163
|
"type": "registry:ui",
|
|
9099
9164
|
"meta": {
|
|
9100
9165
|
"library": "@ds-mo/ui",
|
|
@@ -9105,7 +9170,7 @@
|
|
|
9105
9170
|
"intent": {
|
|
9106
9171
|
"audience": "general",
|
|
9107
9172
|
"status": "stable",
|
|
9108
|
-
"summary": "Semantic, controlled data table with durable visual primitives for cell geometry, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
|
|
9173
|
+
"summary": "Semantic, controlled data table with durable visual primitives for cell geometry, wrapping multiple-Tag cells, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
|
|
9109
9174
|
"useWhen": [
|
|
9110
9175
|
"A structured dataset needs native row and column relationships, optional one-level grouping, or comparable values across records.",
|
|
9111
9176
|
"An application needs controlled sorting, loaded-row selection, infinite loading, pagination, virtual row recycling, or opted-in table-owned data-mode and column controls while retaining ownership of the data query, catalog, and persistence.",
|
|
@@ -9140,15 +9205,16 @@
|
|
|
9140
9205
|
"The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the data scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and share one horizontal caption overflow row with table-owned actions inside the component-owned 8px inset. Table caption buttons keep pressed interaction paint without physically scaling. When columnCustomizer is enabled, the table adds a trailing Customize control named Customize table. Its label uses regular weight and its resting foreground remains neutral when hidden or reordered columns differ from the catalog default. The control is icon-label at typical widths and the icon-only Table menu button below 900px, where a tooltip preserves the Customize label. The always-icon-only table-variant control also exposes its label through a tooltip. Otherwise the header slot receives the complete content width.",
|
|
9141
9206
|
"The data-mode switcher is the shared Menu of the table's supported infinite, pagination, and virtual modes. It uses an Ellipses trigger. The switcher is the final caption-bar action; when the column customizer is also present, a decorative vertical divider separates the two controls. dataMode remains controlled, and the application responds to change intent by supplying the matching records, pagination state, loading behavior, and query consequences. Escape, dismissal, and selection return focus to the trigger.",
|
|
9142
9207
|
"The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Action columns and the selection checkbox never appear in the menu. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
|
|
9143
|
-
"Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-table-sort in the toolbar trailing cluster is the matching menu of Data and Direction sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; the
|
|
9208
|
+
"Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-table-sort in the toolbar trailing cluster is the matching menu of Data and Direction sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; ds-table-group controls the grouping data point and ascending or descending group-section order while the application supplies the resulting groups. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
|
|
9144
9209
|
"Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. In virtual mode the supplied in-memory rows are that loaded set, including rows whose DOM is recycled. When grouping is active with multi-selection, each group section header also exposes a checkbox that selects or clears that group's selectable loaded rows.",
|
|
9145
9210
|
"Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection, action, overflow-menu, or primary-text link controls.",
|
|
9146
9211
|
"Scrollable table regions become keyboard focusable and named only when overflow exists.",
|
|
9147
9212
|
"Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state. In grouped tables, announcements name the independently loading group.",
|
|
9213
|
+
"Applications may pass their controlled literal search terms through highlightTerms after applying their own filtering. When TableSearch scopes the query, pass the same selected field identities through highlightFieldIds. A compound column maps its ordered headerSegments to primary, secondary-run, and tertiary-run data points; simple columns map their column ID to every owned text track. With no highlightFieldIds every text track remains eligible. Matching text is rendered with semantic mark elements, so the emphasis is identifiable independently of its faint-brand background and bold-brand foreground. Highlight markup preserves source order, the cell's complete accessible text, and does not create extra announcements.",
|
|
9148
9214
|
"Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Virtual mode shows a total-only summary and ignores displayedCount. Pagination mode instead renders a named Pagination control with a compact selected-size total, vertical divider, and page position; range changes are announced independently with complete phrasing. Unmodified Left and Right Arrow request the adjacent page while focus is inside a paginated table or on a containing page scroller that owns it; editable fields, choice controls, sliders, open menus, and modified key combinations retain their own keyboard behavior. A table-owned footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy. Nested dialog footers are ignored."
|
|
9149
9215
|
],
|
|
9150
9216
|
"states": [
|
|
9151
|
-
"Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenColumnIds or columnOrder differ from the catalog default; the configured state remains visible inside the Menu. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
|
|
9217
|
+
"Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, highlightTerms, highlightFieldIds, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. highlightTerms only marks matching table-owned text and never filters rows, changes query semantics, or highlights Tag labels. highlightFieldIds optionally narrows that marking to matching column IDs or compound header-segment sort keys. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenColumnIds or columnOrder differ from the catalog default; the configured state remains visible inside the Menu. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
|
|
9152
9218
|
"Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Virtual mode shows totals only, for example Critical · 166, because there is no loaded window. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
|
|
9153
9219
|
"When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last, cannot be hidden, and remain absent from the customizer Menu, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
|
|
9154
9220
|
"An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
|
|
@@ -9158,7 +9224,7 @@
|
|
|
9158
9224
|
"When pagination enables Fit to page on a bounded table, the table proposes the number of complete top-level rows that fit below its column header. Grouped tables count group headers only; member rows never affect capacity. Selecting Fit captures that numeric snapshot. A changed fitIdentity requests one fresh snapshot for a new query shape, while viewport resizing alone does not change the active controlled page size.",
|
|
9159
9225
|
"Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
|
|
9160
9226
|
"Row selection owns the single sticky start lane. One explicitly sized application column can own the sticky end lane, or the start lane when selection is absent. Each sticky boundary owns one fixed divider and a row-clipped directional shadow that paints into the adjacent scrolling columns only while more inline content remains beyond that edge.",
|
|
9161
|
-
"Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 62px and three-track cells grow to 84px. Tracks stack with a 2px gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 62px row and three wrapped lines share the 84px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 84px row and three secondary lines share a 106px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill fills the body-small slot. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type and
|
|
9227
|
+
"Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, wrapping multiple-Tag content, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 62px and three-track cells grow to 84px. Every later track adds 22px, so four tracks resolve to 106px, five to 128px, and the sequence may continue. Tracks stack with a 2px gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 62px row and three wrapped lines share the 84px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 84px row and three secondary lines share a 106px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill fills the body-small slot. Multiple-Tag cells use `kind: 'tags'`, a positive `tracks` count, and small single-inset Tags that wrap naturally at the column edge. Their 2px block inset creates the 24px first track and each later wrapped line adds a 20px track plus the shared 2px gap. The tallest cell establishes the native row height, so all sibling cells match even at four, five, or more tracks; virtual tables use the declared count as the initial estimate and measure responsive wrapping after paint. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type, variant, and track-count hooks keep every cell family independently styleable.",
|
|
9162
9228
|
"The public @ds-mo/ui/table.css export is the authoritative zero-specificity visual recipe. Override its --ds-table-* properties or target its stable element classes for product-specific styling."
|
|
9163
9229
|
],
|
|
9164
9230
|
"responsiveBehavior": [
|
|
@@ -9167,14 +9233,14 @@
|
|
|
9167
9233
|
"stickyHeader follows the active vertical scroll owner: a maxHeight, height, or fitViewport table keeps its native header and group sections inside one bounded table scrollport, while a document-flow table retains a semantic native header and renders a sticky control header whose columns follow the body's native inline scroll timeline. Consumers set --ds-table-sticky-header-offset when page chrome occupies an unbounded document scrollport edge. When the 48px table header bar is visible, it sticks at that external offset and the column header stacks immediately below it.",
|
|
9168
9234
|
"fitViewport uses viewportInsetBlockStart and viewportInsetBlockEnd to describe compact surrounding chrome and page gutters relative to the nearest vertical scroll owner. Before the table reaches that compact position, its host reserves the eventual height while the visible composition grows and vertical input remains owned by the outer page. Once settled, the internal table viewport becomes the vertical scroll owner. Bounded grouped tables use browser-native sticky section rows inside real block row-group boundaries, so scroll and resize do not run component JavaScript or trigger reactive section swaps. Document-flow tables retain the synchronized visual lane required by their separate horizontal scrollport.",
|
|
9169
9235
|
"Without maxHeight the table grows the document and automatic lazy loading observes the browser viewport. Horizontal scrolling chains vertical wheel and trackpad movement to the page instead of trapping it.",
|
|
9170
|
-
"Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space. Set imageTracks on an image column to derive its fixed width from the matching 1-, 2-, or 3-track 16:9 image geometry plus table cell padding instead of copying a numeric width.",
|
|
9236
|
+
"Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space. When every visible data column is explicitly sized, one internal presentational spacer absorbs unused inline space without stretching the final data column and collapses to zero when those widths introduce horizontal overflow. The spacer sits before trailing action and sticky-end lanes so those controls remain at the visible edge. Set imageTracks on an image column to derive its fixed width from the matching 1-, 2-, or 3-track 16:9 image geometry plus table cell padding instead of copying a numeric width.",
|
|
9171
9237
|
"Prefer the named xs through xl column sizes, which resolve through TokoMo's table-column width tokens; numeric pixel sizes remain an escape hatch for exceptional application-owned widths.",
|
|
9172
|
-
"Column headers use one 32px geometry. Body rows use a 40px single-track minimum with shared 8px cell padding; additional
|
|
9238
|
+
"Column headers use one 32px geometry. Body rows use a 40px single-track minimum with shared 8px cell padding; every additional track adds 22px and grows the complete native row so sibling cells match. Image previews fill the same content box as their declared track count. Wrapping multiple-Tag cells may declare any positive track count. The second text track and the third text track share one subdued body-small recipe so line 3 lines up with line 2.",
|
|
9173
9239
|
"Long content truncates to one line by default. Hover (or keyboard-focus a primary link) shows the omitted value in one table-owned tooltip when that track overflows. maxLines 2 or 3 wrap onto the named 2-track and 3-track row heights, then ellipsize with the same tooltip. wrap: true remains unlimited and does not show a truncation tooltip. Wrapping 1-track primary occupies the named 2-track and 3-track row heights instead of a private line-height scale. Wrapping secondary on a 2-track cell occupies the named 3-track row and a 106px fourth track for three lines."
|
|
9174
9240
|
],
|
|
9175
9241
|
"frameworkCaveats": {
|
|
9176
9242
|
"customElements": [
|
|
9177
|
-
"Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, hiddenColumnIds, columnOrder, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
|
|
9243
|
+
"Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, highlightTerms, highlightFieldIds, hiddenColumnIds, columnOrder, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
|
|
9178
9244
|
"dataMode=virtual recycles row DOM over the supplied in-memory rows or groups and requires height, maxHeight, or fitViewport. It does not fetch or paginate.",
|
|
9179
9245
|
"When an action cell supplies items, the table opens one shared ds-menu from the Ellipses trigger; dsCellAction fires for the selected command, not for opening or closing the menu.",
|
|
9180
9246
|
"When columnCustomizer is enabled, the Table trigger opens the same shared ds-menu of reorderable switch rows; toggling a switch or reordering a row emits dsColumnsConfigChange and does not close the menu.",
|
|
@@ -9330,6 +9396,14 @@
|
|
|
9330
9396
|
"type": "string[]",
|
|
9331
9397
|
"required": false
|
|
9332
9398
|
},
|
|
9399
|
+
"highlightFieldIds": {
|
|
9400
|
+
"type": "string[]",
|
|
9401
|
+
"required": false
|
|
9402
|
+
},
|
|
9403
|
+
"highlightTerms": {
|
|
9404
|
+
"type": "string[]",
|
|
9405
|
+
"required": false
|
|
9406
|
+
},
|
|
9333
9407
|
"infiniteModeLabel": {
|
|
9334
9408
|
"type": "string",
|
|
9335
9409
|
"required": false
|
|
@@ -9512,7 +9586,7 @@
|
|
|
9512
9586
|
{
|
|
9513
9587
|
"name": "table-filter",
|
|
9514
9588
|
"title": "TableFilter",
|
|
9515
|
-
"description": "Standard table-toolbar Filter control that owns the shared trigger, filter
|
|
9589
|
+
"description": "Standard table-toolbar Filter control that owns the shared trigger, searchable non-date filter options, accessible defaults, and compact-caption behavior while the application controls data and values.",
|
|
9516
9590
|
"type": "registry:ui",
|
|
9517
9591
|
"meta": {
|
|
9518
9592
|
"library": "@ds-mo/ui",
|
|
@@ -9523,10 +9597,10 @@
|
|
|
9523
9597
|
"intent": {
|
|
9524
9598
|
"audience": "general",
|
|
9525
9599
|
"status": "stable",
|
|
9526
|
-
"summary": "Standard table-toolbar Filter control that owns the shared trigger, filter
|
|
9600
|
+
"summary": "Standard table-toolbar Filter control that owns the shared trigger, searchable non-date filter options, accessible defaults, and compact-caption behavior while the application controls data and values.",
|
|
9527
9601
|
"useWhen": [
|
|
9528
9602
|
"A table toolbar should expose the standard singular Filter control and shared filter-menu interaction.",
|
|
9529
|
-
"A product supplies filter definitions and controlled values but should not recreate the toolbar trigger,
|
|
9603
|
+
"A product supplies filter definitions and controlled values but should not recreate the toolbar trigger, category navigation, or responsive treatment."
|
|
9530
9604
|
],
|
|
9531
9605
|
"avoidWhen": [
|
|
9532
9606
|
"Filtering is unrelated to a table or structured result set; use ds-filter-menu directly.",
|
|
@@ -9553,11 +9627,15 @@
|
|
|
9553
9627
|
"accessibility": [
|
|
9554
9628
|
"The trigger is an icon-label combobox named Filter table unless a product aria-label supplies the table context. Compact caption widths preserve that accessible name after the visible label and chevron are omitted.",
|
|
9555
9629
|
"The popup retains ds-filter-menu category navigation, option semantics, focus entry, dismissal, and focus return, and aligns its start edge with the trigger.",
|
|
9556
|
-
"Localize label, menuLabel, categoriesLabel, and
|
|
9630
|
+
"Localize label, menuLabel, categoriesLabel, clearLabel, searchPlaceholder, and noResultsText together so visible and accessible wording remains consistent."
|
|
9557
9631
|
],
|
|
9558
9632
|
"states": [
|
|
9559
|
-
"filters, values, and activeFilterId are controlled. dsChange, dsClear, and dsActiveFilterChange report intent without changing those inputs; the application applies query consequences and returns replacement values.",
|
|
9560
|
-
"The visible trigger label
|
|
9633
|
+
"filters, values, matchModes, and activeFilterId are controlled. dsChange, dsMatchModeChange, dsClear, and dsActiveFilterChange report intent without changing those inputs; the application applies query consequences and returns replacement values.",
|
|
9634
|
+
"The visible trigger label stays singular Filter without appending an active-count suffix. Active criteria promote only the visible label from secondary to primary, matching the other table caption controls without redefining generic button active semantics.",
|
|
9635
|
+
"The popup reserves a visually empty footer row inside the category pane for every state. Active criteria reveal its divider and only a left-aligned Clear action, without adding popup height or showing redundant selected-count copy; the option pane retains its full column.",
|
|
9636
|
+
"Every multiple-choice category exposes a right-pane footer where the blue any or all word toggles its controlled match mode. any is the default OR mode; the application applies the requested mode to its query.",
|
|
9637
|
+
"Every non-date category exposes a 40px secondary-background search header that filters its displayed option labels and descriptions without changing controlled filter values. Date retains only its Relative and Range header.",
|
|
9638
|
+
"Date categories use the shared compact-header Range and Relative experience. Persist relative values semantically and resolve them from the product's current date whenever rows or saved views are applied.",
|
|
9561
9639
|
"Popup visibility follows the same mutable open and dsOpenChange contract as ds-filter-menu."
|
|
9562
9640
|
],
|
|
9563
9641
|
"responsiveBehavior": [
|
|
@@ -9566,13 +9644,13 @@
|
|
|
9566
9644
|
],
|
|
9567
9645
|
"frameworkCaveats": {
|
|
9568
9646
|
"customElements": [
|
|
9569
|
-
"Assign filters, values, and activeFilterId as JavaScript properties. Replace controlled values in response to dsChange and dsClear."
|
|
9647
|
+
"Assign filters, values, matchModes, and activeFilterId as JavaScript properties. Replace controlled values and modes in response to dsChange, dsMatchModeChange, and dsClear."
|
|
9570
9648
|
],
|
|
9571
9649
|
"react": [
|
|
9572
|
-
"Keep filters and
|
|
9650
|
+
"Keep filters, values, and matchModes in application state and replace them from the typed dsChange, dsMatchModeChange, and dsClear events."
|
|
9573
9651
|
],
|
|
9574
9652
|
"angular": [
|
|
9575
|
-
"Import the generated DsTableFilter adapter, bind filters and
|
|
9653
|
+
"Import the generated DsTableFilter adapter, bind filters, values, and matchModes, and handle dsChange, dsMatchModeChange, dsClear, and dsActiveFilterChange."
|
|
9576
9654
|
]
|
|
9577
9655
|
},
|
|
9578
9656
|
"references": [
|
|
@@ -9611,14 +9689,26 @@
|
|
|
9611
9689
|
"type": "string",
|
|
9612
9690
|
"required": false
|
|
9613
9691
|
},
|
|
9692
|
+
"matchModes": {
|
|
9693
|
+
"type": "FilterMenuMatchModes",
|
|
9694
|
+
"required": false
|
|
9695
|
+
},
|
|
9614
9696
|
"menuLabel": {
|
|
9615
9697
|
"type": "string | null",
|
|
9616
9698
|
"required": false
|
|
9617
9699
|
},
|
|
9700
|
+
"noResultsText": {
|
|
9701
|
+
"type": "string",
|
|
9702
|
+
"required": false
|
|
9703
|
+
},
|
|
9618
9704
|
"open": {
|
|
9619
9705
|
"type": "boolean",
|
|
9620
9706
|
"required": false
|
|
9621
9707
|
},
|
|
9708
|
+
"searchPlaceholder": {
|
|
9709
|
+
"type": "string",
|
|
9710
|
+
"required": false
|
|
9711
|
+
},
|
|
9622
9712
|
"values": {
|
|
9623
9713
|
"type": "FilterMenuValues",
|
|
9624
9714
|
"required": false
|
|
@@ -9645,6 +9735,10 @@
|
|
|
9645
9735
|
"name": "dsClose",
|
|
9646
9736
|
"detail": "void"
|
|
9647
9737
|
},
|
|
9738
|
+
{
|
|
9739
|
+
"name": "dsMatchModeChange",
|
|
9740
|
+
"detail": "FilterMenuMatchModeChangeDetail"
|
|
9741
|
+
},
|
|
9648
9742
|
{
|
|
9649
9743
|
"name": "dsOpenChange",
|
|
9650
9744
|
"detail": "boolean"
|
|
@@ -9666,6 +9760,141 @@
|
|
|
9666
9760
|
"filter-menu"
|
|
9667
9761
|
]
|
|
9668
9762
|
},
|
|
9763
|
+
{
|
|
9764
|
+
"name": "table-group",
|
|
9765
|
+
"title": "TableGroup",
|
|
9766
|
+
"description": "Two-panel toolbar control for choosing one table grouping data point and the ascending or descending order of its group sections.",
|
|
9767
|
+
"type": "registry:ui",
|
|
9768
|
+
"meta": {
|
|
9769
|
+
"library": "@ds-mo/ui",
|
|
9770
|
+
"distribution": "npm",
|
|
9771
|
+
"storybook": "https://zainadeel.github.io/compomo/?path=/story/table-group",
|
|
9772
|
+
"source": "src/wc/components/TableGroup/TableGroup.tsx",
|
|
9773
|
+
"intentStatus": "complete",
|
|
9774
|
+
"intent": {
|
|
9775
|
+
"audience": "general",
|
|
9776
|
+
"status": "stable",
|
|
9777
|
+
"summary": "Two-panel toolbar control for choosing one table grouping data point and the ascending or descending order of its group sections.",
|
|
9778
|
+
"useWhen": [
|
|
9779
|
+
"A table toolbar needs explicit control of one grouping level and its section order.",
|
|
9780
|
+
"Grouping data-point labels differ from compact table-header labels."
|
|
9781
|
+
],
|
|
9782
|
+
"avoidWhen": [
|
|
9783
|
+
"The table is not groupable.",
|
|
9784
|
+
"The application expects the component to rearrange rows or create group sections internally."
|
|
9785
|
+
],
|
|
9786
|
+
"alternatives": [
|
|
9787
|
+
{
|
|
9788
|
+
"when": "The choice is one submitted form value with no dependent order pane.",
|
|
9789
|
+
"component": "component:ds-select",
|
|
9790
|
+
"reason": "Select owns form-value semantics rather than table grouping state."
|
|
9791
|
+
}
|
|
9792
|
+
],
|
|
9793
|
+
"commonlyComposedWith": [
|
|
9794
|
+
"component:ds-table",
|
|
9795
|
+
"component:ds-table-toolbar",
|
|
9796
|
+
"component:ds-table-filter",
|
|
9797
|
+
"component:ds-table-sort"
|
|
9798
|
+
],
|
|
9799
|
+
"patterns": [
|
|
9800
|
+
"pattern:menu-trigger"
|
|
9801
|
+
],
|
|
9802
|
+
"accessibility": [
|
|
9803
|
+
"The trigger opens a named non-modal dialog. Data and Order are independently named single-selection listboxes.",
|
|
9804
|
+
"Up and Down move within the focused pane. Right moves from Data to Order when a group is active, Left returns to the selected Data row, and Escape closes the dialog and restores trigger focus.",
|
|
9805
|
+
"The right pane remains present before a group is active as one complete empty state without the Order heading, and explains that a group must be selected."
|
|
9806
|
+
],
|
|
9807
|
+
"states": [
|
|
9808
|
+
"options and grouping are controlled. dsGroupChange reports a complete TableGroupingState and dsClear requests null grouping without mutating either input.",
|
|
9809
|
+
"Selecting a new data point starts its order at ascending. Re-selecting the active data point preserves its direction.",
|
|
9810
|
+
"Selecting a data point or direction applies immediately and leaves the dialog open so the other pane can be changed."
|
|
9811
|
+
],
|
|
9812
|
+
"responsiveBehavior": [
|
|
9813
|
+
"Use in the trailing region of ds-table-toolbar.",
|
|
9814
|
+
"The trigger uses the shared caption-control button behavior and becomes icon-only in compact named table containers.",
|
|
9815
|
+
"Both panes remain present and their choice lists scroll within the collision-constrained popup."
|
|
9816
|
+
],
|
|
9817
|
+
"frameworkCaveats": {
|
|
9818
|
+
"customElements": [
|
|
9819
|
+
"Assign options and grouping as JavaScript properties and replace grouping from dsGroupChange or dsClear."
|
|
9820
|
+
],
|
|
9821
|
+
"react": [
|
|
9822
|
+
"Keep grouping in application state and replace it from dsGroupChange; set it to null from dsClear."
|
|
9823
|
+
],
|
|
9824
|
+
"angular": [
|
|
9825
|
+
"Import the generated DsTableGroup adapter and bind options and grouping as properties."
|
|
9826
|
+
]
|
|
9827
|
+
},
|
|
9828
|
+
"references": [
|
|
9829
|
+
{
|
|
9830
|
+
"label": "Review states",
|
|
9831
|
+
"path": "src/wc/components/TableGroup/TableGroup.stories.ts"
|
|
9832
|
+
},
|
|
9833
|
+
{
|
|
9834
|
+
"label": "Toolbar composition owner",
|
|
9835
|
+
"path": "src/wc/components/TableToolbar/TableToolbar.agent.json"
|
|
9836
|
+
}
|
|
9837
|
+
]
|
|
9838
|
+
},
|
|
9839
|
+
"props": {
|
|
9840
|
+
"ariaLabel": {
|
|
9841
|
+
"type": "string | null",
|
|
9842
|
+
"required": false
|
|
9843
|
+
},
|
|
9844
|
+
"clearLabel": {
|
|
9845
|
+
"type": "string",
|
|
9846
|
+
"required": false
|
|
9847
|
+
},
|
|
9848
|
+
"emptyMessage": {
|
|
9849
|
+
"type": "string",
|
|
9850
|
+
"required": false
|
|
9851
|
+
},
|
|
9852
|
+
"grouping": {
|
|
9853
|
+
"type": "TableGroupingState | null",
|
|
9854
|
+
"required": false
|
|
9855
|
+
},
|
|
9856
|
+
"open": {
|
|
9857
|
+
"type": "boolean",
|
|
9858
|
+
"required": false
|
|
9859
|
+
},
|
|
9860
|
+
"options": {
|
|
9861
|
+
"type": "TableGroupOption[]",
|
|
9862
|
+
"required": false
|
|
9863
|
+
}
|
|
9864
|
+
},
|
|
9865
|
+
"events": [
|
|
9866
|
+
{
|
|
9867
|
+
"name": "dsClear",
|
|
9868
|
+
"detail": "void"
|
|
9869
|
+
},
|
|
9870
|
+
{
|
|
9871
|
+
"name": "dsGroupChange",
|
|
9872
|
+
"detail": "TableGroupingState"
|
|
9873
|
+
},
|
|
9874
|
+
{
|
|
9875
|
+
"name": "dsOpenChange",
|
|
9876
|
+
"detail": "boolean"
|
|
9877
|
+
}
|
|
9878
|
+
],
|
|
9879
|
+
"slots": [],
|
|
9880
|
+
"exports": {
|
|
9881
|
+
"customElement": "ds-table-group",
|
|
9882
|
+
"react": "DsTableGroup",
|
|
9883
|
+
"vue": "DsTableGroup",
|
|
9884
|
+
"angular": "DsTableGroup"
|
|
9885
|
+
}
|
|
9886
|
+
},
|
|
9887
|
+
"dependencies": [
|
|
9888
|
+
"@ds-mo/ui",
|
|
9889
|
+
"@ds-mo/tokens"
|
|
9890
|
+
],
|
|
9891
|
+
"registryDependencies": [
|
|
9892
|
+
"button-unfilled",
|
|
9893
|
+
"empty-state",
|
|
9894
|
+
"input",
|
|
9895
|
+
"text"
|
|
9896
|
+
]
|
|
9897
|
+
},
|
|
9669
9898
|
{
|
|
9670
9899
|
"name": "table-saved-views",
|
|
9671
9900
|
"title": "TableSavedViews",
|
|
@@ -9817,6 +10046,151 @@
|
|
|
9817
10046
|
"select"
|
|
9818
10047
|
]
|
|
9819
10048
|
},
|
|
10049
|
+
{
|
|
10050
|
+
"name": "table-search",
|
|
10051
|
+
"title": "TableSearch",
|
|
10052
|
+
"description": "Controlled table-search editor with slash-invoked field scoping, removable inset field Chips, and an input-focused listbox keyboard model.",
|
|
10053
|
+
"type": "registry:ui",
|
|
10054
|
+
"meta": {
|
|
10055
|
+
"library": "@ds-mo/ui",
|
|
10056
|
+
"distribution": "npm",
|
|
10057
|
+
"storybook": "https://zainadeel.github.io/compomo/?path=/story/table-search",
|
|
10058
|
+
"source": "src/wc/components/TableSearch/TableSearch.tsx",
|
|
10059
|
+
"intentStatus": "complete",
|
|
10060
|
+
"intent": {
|
|
10061
|
+
"audience": "general",
|
|
10062
|
+
"status": "stable",
|
|
10063
|
+
"summary": "Controlled table-search editor with slash-invoked field scoping, removable inset field Chips, and an input-focused listbox keyboard model.",
|
|
10064
|
+
"useWhen": [
|
|
10065
|
+
"A data-table search needs optional field-specific scopes without replacing the application's filtering logic.",
|
|
10066
|
+
"People should be able to add one or more searchable data points through a slash command while continuing to type one free-text query."
|
|
10067
|
+
],
|
|
10068
|
+
"avoidWhen": [
|
|
10069
|
+
"A plain global text search is sufficient; use Input with type search.",
|
|
10070
|
+
"The choices are persistent filters with independent values; use TableFilter or Select instead.",
|
|
10071
|
+
"The component is expected to inspect records, build a search index, or filter rows internally."
|
|
10072
|
+
],
|
|
10073
|
+
"commonlyComposedWith": [
|
|
10074
|
+
"component:ds-table",
|
|
10075
|
+
"component:ds-table-toolbar",
|
|
10076
|
+
"component:ds-chip",
|
|
10077
|
+
"component:ds-button-unfilled",
|
|
10078
|
+
"component:ds-icon"
|
|
10079
|
+
],
|
|
10080
|
+
"accessibility": [
|
|
10081
|
+
"The native search input remains the one Tab stop and exposes combobox, expanded, controls, and active-descendant relationships to the field listbox.",
|
|
10082
|
+
"Typing slash opens the field listbox without inserting slash into the table query. Text typed while it is open filters data points by complete label, Up and Down change the active match, Enter selects it, Escape closes it, and Left and Right retain native text-cursor behavior because focus never leaves the input. Backspace edits the field-picker query first and closes the listbox when that query is empty.",
|
|
10083
|
+
"The query disables browser autocomplete history, automatic capitalization, autocorrection, and spellchecking so browser-owned suggestions never obscure the product-owned field menu or table results.",
|
|
10084
|
+
"Selected field Chips have individually labeled remove actions and are also described by the search input. Polite announcements report additions, removals, and clearing without duplicating the visible query.",
|
|
10085
|
+
"The slash suffix is a labeled double-inset md button excluded from sequential keyboard navigation; the search input exposes the same action through aria-keyshortcuts and its description.",
|
|
10086
|
+
"The clear action removes both free text and every selected field. It restores focus to the search input; each Chip's own remove action remains scoped to that field."
|
|
10087
|
+
],
|
|
10088
|
+
"states": [
|
|
10089
|
+
"value and selectedFieldIds are controlled. columns supplies the same table catalog used by Table and TableSort; dataLabel provides the complete out-of-context name while header and header segment label may remain compact. dsChange reports query edits, dsFieldsChange reports the next ordered field identities, and dsClear reports a complete clear. The component never filters rows or mutates consumer inputs.",
|
|
10090
|
+
"The field menu excludes already-selected identities and closes after one selection. Typing slash again reopens the remaining fields so multiple scopes can be added.",
|
|
10091
|
+
"Selected scopes render as neutral md Chips using the double-inset recipe so they remain 24px high inside the 32px md search control and each can be removed directly.",
|
|
10092
|
+
"Backspace edits a non-empty field-picker query, then closes the open slash listbox when that query is empty. When the table query is empty and the listbox is already closed, the next Backspace removes the last selected field. Ordinary Backspace edits table query text when the listbox is closed.",
|
|
10093
|
+
"Duplicate, blank, and unknown field identities are ignored for presentation. Selected fields preserve the consumer's order.",
|
|
10094
|
+
"Inactive search leaves the tab order, closes the field listbox, and does not emit query or field changes."
|
|
10095
|
+
],
|
|
10096
|
+
"responsiveBehavior": [
|
|
10097
|
+
"The control fills the available inline size supplied by the table toolbar search slot. Selected Chips and the editable query share one horizontal editor lane so the md control does not grow vertically.",
|
|
10098
|
+
"The field popup enters the top layer, aligns its first choice cell with the search control, flips or clamps to the viewport or nearest overlay boundary, and scrolls internally when its catalog is taller than available space.",
|
|
10099
|
+
"Long selected field labels truncate inside their Chips while the input remains available at the inline end of the editor lane. Both suffix actions resolve to the same 24px height as selected Chips. Clear follows the standard md Input recipe—a non-inset sm icon button—while slash is a double-inset md label button. Slash remains rightmost; when query text exposes Clear, a vertical divider separates the two actions."
|
|
10100
|
+
],
|
|
10101
|
+
"frameworkCaveats": {
|
|
10102
|
+
"customElements": [
|
|
10103
|
+
"Assign columns and selectedFieldIds through JavaScript properties and replace controlled values from dsChange and dsFieldsChange.",
|
|
10104
|
+
"Keep field IDs aligned with the application search index; the component treats IDs as opaque values."
|
|
10105
|
+
],
|
|
10106
|
+
"react": [
|
|
10107
|
+
"Pass new array references for columns and selectedFieldIds and update controlled state from onDsChange and onDsFieldsChange."
|
|
10108
|
+
],
|
|
10109
|
+
"angular": [
|
|
10110
|
+
"Import DsTableSearch, bind columns, selectedFieldIds, and value, then update application signals from dsChange and dsFieldsChange."
|
|
10111
|
+
]
|
|
10112
|
+
},
|
|
10113
|
+
"references": [
|
|
10114
|
+
{
|
|
10115
|
+
"label": "Storybook interaction states",
|
|
10116
|
+
"path": "src/wc/components/TableSearch/TableSearch.stories.ts"
|
|
10117
|
+
},
|
|
10118
|
+
{
|
|
10119
|
+
"label": "Toolbar composition owner",
|
|
10120
|
+
"path": "src/wc/components/TableToolbar/TableToolbar.agent.json"
|
|
10121
|
+
}
|
|
10122
|
+
]
|
|
10123
|
+
},
|
|
10124
|
+
"props": {
|
|
10125
|
+
"ariaLabel": {
|
|
10126
|
+
"type": "string",
|
|
10127
|
+
"required": false
|
|
10128
|
+
},
|
|
10129
|
+
"clearLabel": {
|
|
10130
|
+
"type": "string",
|
|
10131
|
+
"required": false
|
|
10132
|
+
},
|
|
10133
|
+
"columns": {
|
|
10134
|
+
"type": "TableColumn[]",
|
|
10135
|
+
"required": false
|
|
10136
|
+
},
|
|
10137
|
+
"fieldMenuLabel": {
|
|
10138
|
+
"type": "string",
|
|
10139
|
+
"required": false
|
|
10140
|
+
},
|
|
10141
|
+
"isInactive": {
|
|
10142
|
+
"type": "boolean",
|
|
10143
|
+
"required": false
|
|
10144
|
+
},
|
|
10145
|
+
"placeholder": {
|
|
10146
|
+
"type": "string",
|
|
10147
|
+
"required": false
|
|
10148
|
+
},
|
|
10149
|
+
"selectedFieldIds": {
|
|
10150
|
+
"type": "string[]",
|
|
10151
|
+
"required": false
|
|
10152
|
+
},
|
|
10153
|
+
"value": {
|
|
10154
|
+
"type": "string",
|
|
10155
|
+
"required": false
|
|
10156
|
+
}
|
|
10157
|
+
},
|
|
10158
|
+
"events": [
|
|
10159
|
+
{
|
|
10160
|
+
"name": "dsChange",
|
|
10161
|
+
"detail": "string"
|
|
10162
|
+
},
|
|
10163
|
+
{
|
|
10164
|
+
"name": "dsClear",
|
|
10165
|
+
"detail": "void"
|
|
10166
|
+
},
|
|
10167
|
+
{
|
|
10168
|
+
"name": "dsFieldsChange",
|
|
10169
|
+
"detail": "TableSearchFieldsChangeDetail"
|
|
10170
|
+
}
|
|
10171
|
+
],
|
|
10172
|
+
"slots": [],
|
|
10173
|
+
"exports": {
|
|
10174
|
+
"customElement": "ds-table-search",
|
|
10175
|
+
"react": "DsTableSearch",
|
|
10176
|
+
"vue": "DsTableSearch",
|
|
10177
|
+
"angular": "DsTableSearch"
|
|
10178
|
+
}
|
|
10179
|
+
},
|
|
10180
|
+
"dependencies": [
|
|
10181
|
+
"@ds-mo/ui",
|
|
10182
|
+
"@ds-mo/tokens",
|
|
10183
|
+
"@ds-mo/icons"
|
|
10184
|
+
],
|
|
10185
|
+
"registryDependencies": [
|
|
10186
|
+
"button-unfilled",
|
|
10187
|
+
"chip",
|
|
10188
|
+
"divider",
|
|
10189
|
+
"empty-state",
|
|
10190
|
+
"icon",
|
|
10191
|
+
"text"
|
|
10192
|
+
]
|
|
10193
|
+
},
|
|
9820
10194
|
{
|
|
9821
10195
|
"name": "table-sort",
|
|
9822
10196
|
"title": "TableSort",
|
|
@@ -9964,6 +10338,7 @@
|
|
|
9964
10338
|
"component:ds-divider",
|
|
9965
10339
|
"component:ds-input",
|
|
9966
10340
|
"component:ds-table-filter",
|
|
10341
|
+
"component:ds-table-group",
|
|
9967
10342
|
"component:ds-select",
|
|
9968
10343
|
"component:ds-table-sort",
|
|
9969
10344
|
"component:ds-button-unfilled"
|
|
@@ -9977,24 +10352,24 @@
|
|
|
9977
10352
|
"states": [
|
|
9978
10353
|
"The component owns layout only. It never mutates slotted control props, values, menus, loading, persistence, or consequences. Use ds-table-saved-views and ds-table-filter when those interactions need the shared CompoMo behavior while application data and persistence remain external.",
|
|
9979
10354
|
"Buttons in the toolbar keep their hover and pressed interaction paint without physically scaling, so pointer feedback does not disturb the stable caption geometry.",
|
|
9980
|
-
"The start cluster is followed by a decorative vertical divider, then Search, optional leading controls, and one trailing action cluster. The start cluster and divider hide when nothing is projected. Search is a dedicated slot that hides when nothing is projected. Empty leading or trailing clusters add no placeholder chrome. Search is the only toolbar region that shrinks; all action controls retain their control geometry and align directly before the table-owned actions.",
|
|
10355
|
+
"The start cluster is followed by a decorative vertical divider, then Search, optional leading controls, and one trailing action cluster. The start cluster and divider hide when nothing is projected. Search is a dedicated slot that hides when nothing is projected and grows to consume available row space. Empty leading or trailing clusters add no placeholder chrome. Search is the only toolbar region that grows and shrinks; all action controls retain their control geometry and align directly before the table-owned actions.",
|
|
9981
10356
|
"Column customizer and data-mode switching stay table-owned caption actions. Do not recreate those menus in the toolbar. When slotted into a table header, the table caption owns overflow for the complete toolbar and table-owned action row."
|
|
9982
10357
|
],
|
|
9983
10358
|
"responsiveBehavior": [
|
|
9984
10359
|
"The start cluster, search, trailing Filter/Sort/Group, and table caption trailing actions stay on one line. Saved views hug their current trigger content up to the compact menu-width token rather than reserving that full width; long names truncate while the dirty dot stays visible. Filter, Sort, and Group triggers cap at the same token, and Sort and Group popups keep that compact menu-width floor. A standalone toolbar owns its horizontal scrolling; inside a table, the complete caption row is the single overflow owner so table-owned actions never remain pinned over scrolling toolbar controls.",
|
|
9985
|
-
"
|
|
10360
|
+
"Search consumes the row space left between fixed control groups and flexes smaller when the complete row needs space. Inside a named ds-table container narrower than 900px, ds-table-filter, ds-table-group, and ds-table-sort omit their labels and chevrons; each exposes its label through a hover and keyboard-focus tooltip. Empty leading and trailing slot groups do not add spacing. Active filtering promotes its prefix icon to primary. Group and Sort keep resting secondary chrome. Table-owned Customize also becomes the icon-only Table menu button at that width with the same tooltip behavior.",
|
|
9986
10361
|
"The scrollbar is visually suppressed without removing touch, trackpad, mouse-wheel, or keyboard scrolling from the overflow container.",
|
|
9987
10362
|
"Trailing controls remain grouped after leading controls; the toolbar does not collapse controls into an application-specific overflow menu."
|
|
9988
10363
|
],
|
|
9989
10364
|
"frameworkCaveats": {
|
|
9990
10365
|
"customElements": [
|
|
9991
|
-
"Project saved views through slot=start, search through slot=search, additional left-side middle controls through slot=leading, and ds-table-filter,
|
|
10366
|
+
"Project saved views through slot=start, search through slot=search, additional left-side middle controls through slot=leading, and ds-table-filter, ds-table-group, and ds-table-sort through slot=trailing. Provide contextual accessible names when Table controls is insufficient."
|
|
9992
10367
|
],
|
|
9993
10368
|
"react": [
|
|
9994
|
-
"Set slot=start, slot=search, slot=leading, or slot=trailing on each child control. Use ds-table-filter for the standard Filter
|
|
10369
|
+
"Set slot=start, slot=search, slot=leading, or slot=trailing on each child control. Use ds-table-filter and ds-table-group for the standard Filter and Group recipes, and keep values and event handlers in the application."
|
|
9995
10370
|
],
|
|
9996
10371
|
"angular": [
|
|
9997
|
-
"Set slot=start, slot=search, slot=leading, or slot=trailing on each child control, use DsTableFilter for the standard Filter
|
|
10372
|
+
"Set slot=start, slot=search, slot=leading, or slot=trailing on each child control, use DsTableFilter and DsTableGroup for the standard Filter and Group recipes, and import the generated adapters."
|
|
9998
10373
|
]
|
|
9999
10374
|
},
|
|
10000
10375
|
"references": [
|