@ds-mo/ui 13.11.0 → 13.12.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 +6 -3
- package/dist/agent.json +306 -16
- package/dist/angular/ds-mobile-header.d.ts +1 -1
- package/dist/angular/ds-mobile-header.js +3 -3
- package/dist/angular/ds-shell-page.d.ts +1 -1
- package/dist/angular/ds-shell-page.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.d.ts +28 -0
- package/dist/angular/ds-table.js +54 -0
- package/dist/angular/ds-tag.d.ts +1 -1
- package/dist/angular/ds-tag.js +3 -3
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -0
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- 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-bar-workflow.js.map +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-menu.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-panel-sub-nav.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.d.ts +11 -0
- package/dist/components/ds-table.js +2 -0
- package/dist/components/ds-table.js.map +1 -0
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-tag.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-typing-indicator.js +1 -1
- package/dist/components/index.d.ts +30 -0
- package/dist/components/p-BFXN4ioL.js +2 -0
- package/dist/components/p-BFXN4ioL.js.map +1 -0
- package/dist/components/{p-DgglLVCj.js → p-BYre-ZDg.js} +2 -2
- package/dist/components/p-B_eqa09C.js +2 -0
- package/dist/components/p-B_eqa09C.js.map +1 -0
- package/dist/components/{p-BnGJrBPG.js → p-Bj7KrXzw.js} +2 -2
- package/dist/components/p-BxJurXEn.js +2 -0
- package/dist/components/p-BxJurXEn.js.map +1 -0
- package/dist/components/{p-Dg9qiMDa.js → p-C9StMCWg.js} +2 -2
- package/dist/components/p-CE82aQZr.js +2 -0
- package/dist/components/p-CE82aQZr.js.map +1 -0
- package/dist/components/p-CFNG0K3m.js +2 -0
- package/dist/components/p-CFNG0K3m.js.map +1 -0
- package/dist/components/{p-BQ7Nzx9A.js → p-Ch5yT3UA.js} +2 -2
- package/dist/components/{p-DJGdoPMG.js → p-DKftz0O8.js} +2 -2
- package/dist/components/p-DxygUurH.js +2 -0
- package/dist/components/p-DxygUurH.js.map +1 -0
- package/dist/components/{p-DCN04sgt.js → p-x9jO4lZ7.js} +2 -2
- package/dist/components/{p-DCN04sgt.js.map → p-x9jO4lZ7.js.map} +1 -1
- package/dist/docs/components.json +1567 -74
- package/dist/lib/components/MobileHeader/mobile-header-types.d.ts +3 -2
- package/dist/lib/components/ShellApp/shell-app-types.d.ts +4 -1
- package/dist/lib/components/ShellPage/shell-page-types.d.ts +5 -0
- package/dist/lib/shell/index.d.ts +1 -0
- package/dist/mcp-data/registry/bar-title.json +2 -1
- package/dist/mcp-data/registry/card-overview.json +1 -1
- package/dist/mcp-data/registry/mobile-header.json +48 -10
- package/dist/mcp-data/registry/mobile-sheet-nav.json +2 -2
- package/dist/mcp-data/registry/registry.json +308 -15
- package/dist/mcp-data/registry/shell-app.json +6 -3
- package/dist/mcp-data/registry/shell-page.json +32 -8
- package/dist/mcp-data/registry/shell-tools.json +4 -4
- package/dist/mcp-data/registry/tab-group.json +22 -2
- package/dist/mcp-data/registry/table.json +758 -0
- package/dist/mcp-data/registry/tag.json +22 -3
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-table.d.ts +16 -0
- package/dist/react/ds-table.js +18 -0
- package/dist/styles/table.css +677 -0
- package/dist/types/components/MobileHeader/MobileHeader.d.ts +8 -3
- package/dist/types/components/MobileHeader/index.d.ts +1 -1
- package/dist/types/components/MobileHeader/mobile-header-types.d.ts +3 -2
- package/dist/types/components/ShellApp/ShellApp.d.ts +8 -0
- package/dist/types/components/ShellApp/shell-app-types.d.ts +4 -1
- package/dist/types/components/ShellPage/ShellPage.d.ts +3 -1
- package/dist/types/components/ShellPage/index.d.ts +1 -1
- package/dist/types/components/ShellPage/shell-page-types.d.ts +1 -0
- package/dist/types/components/TabGroup/TabGroup.d.ts +3 -0
- package/dist/types/components/Table/Table.d.ts +115 -0
- package/dist/types/components/Table/index.d.ts +2 -0
- package/dist/types/components/Table/table-model.d.ts +29 -0
- package/dist/types/components/Table/table-types.d.ts +178 -0
- package/dist/types/components/Tag/Tag.d.ts +2 -0
- package/dist/types/components.d.ts +406 -8
- package/dist/types/shell/index.d.ts +1 -0
- package/package.json +3 -2
- package/dist/components/p-B_nHX-BW.js +0 -2
- package/dist/components/p-B_nHX-BW.js.map +0 -1
- package/dist/components/p-CVmtbj-6.js +0 -2
- package/dist/components/p-CVmtbj-6.js.map +0 -1
- package/dist/components/p-DW9p068S.js +0 -2
- package/dist/components/p-DW9p068S.js.map +0 -1
- package/dist/components/p-Xftomzsv.js +0 -2
- package/dist/components/p-Xftomzsv.js.map +0 -1
- package/dist/components/p-iyiOFsws.js +0 -2
- package/dist/components/p-iyiOFsws.js.map +0 -1
- /package/dist/components/{p-DgglLVCj.js.map → p-BYre-ZDg.js.map} +0 -0
- /package/dist/components/{p-BnGJrBPG.js.map → p-Bj7KrXzw.js.map} +0 -0
- /package/dist/components/{p-Dg9qiMDa.js.map → p-C9StMCWg.js.map} +0 -0
- /package/dist/components/{p-BQ7Nzx9A.js.map → p-Ch5yT3UA.js.map} +0 -0
- /package/dist/components/{p-DJGdoPMG.js.map → p-DKftz0O8.js.map} +0 -0
|
@@ -1044,6 +1044,7 @@
|
|
|
1044
1044
|
"responsiveBehavior": [
|
|
1045
1045
|
"BarTitle does not observe viewport, shell, scroll, or container state. Its owner selects an explicit variant.",
|
|
1046
1046
|
"ShellPage is the standard owner for automatic expanded, compact, and constrained selection.",
|
|
1047
|
+
"When ShellPage owns BarTitle on a secondary desktop or tablet page, its expanded, compact, and constrained presentations all match that canvas; the separate MobileHeader component remains primary.",
|
|
1047
1048
|
"Compact titles use the shared compact-header geometry and md control inset so top-level headings align with BarNav and inline Back geometry aligns with PanelToolHeader. Long headings and section labels truncate independently while Back and action controls retain complete hit targets and accessible names.",
|
|
1048
1049
|
"A never-collapse primary action remains visible in constrained mode; the title and section label yield space first."
|
|
1049
1050
|
],
|
|
@@ -2052,7 +2053,7 @@
|
|
|
2052
2053
|
"Omit score to render a centered Score unavailable cell with a tertiary border and no score fill. Set scoreErrorMessage to replace that copy while the measures remain readable.",
|
|
2053
2054
|
"Loading replaces the score and measures with skeletons and does not alter the slotted period control. When measures are already supplied, their count preserves the resolved grid shape; otherwise five measure placeholders join the score in the standard six-cell grid.",
|
|
2054
2055
|
"At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
|
|
2055
|
-
"The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary.",
|
|
2056
|
+
"The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary and allowClear false because both controls always require one selected reporting period.",
|
|
2056
2057
|
"A numeric safety score infers fair from 0–50, good from 51–80, and excellent from 81–100. The level can be supplied explicitly when the displayed value is not numeric. The deprecated band field is ignored.",
|
|
2057
2058
|
"The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. The display value removes 8px from both block edges of its line box so it does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
|
|
2058
2059
|
"During page-controlled scroll collapse, the component preserves its expanded flow height and stationary reporting bar while the metric grid moves and clips beneath it. Elevation remains fitted to the visible surface.",
|
|
@@ -4886,6 +4887,7 @@
|
|
|
4886
4887
|
],
|
|
4887
4888
|
"commonlyComposedWith": [
|
|
4888
4889
|
"component:ds-mobile-section-switcher",
|
|
4890
|
+
"component:ds-tab-group",
|
|
4889
4891
|
"component:ds-shell-page",
|
|
4890
4892
|
"component:ds-shell-tools"
|
|
4891
4893
|
],
|
|
@@ -4894,19 +4896,19 @@
|
|
|
4894
4896
|
],
|
|
4895
4897
|
"accessibility": [
|
|
4896
4898
|
"Static screens render a real h1 or h2 according to headingLevel.",
|
|
4897
|
-
"Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger.",
|
|
4899
|
+
"Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger or named segmented TabGroup.",
|
|
4898
4900
|
"Subsections use a separately named navigation landmark and never replace the semantic page identity.",
|
|
4899
4901
|
"Leading and trailing slotted icon actions retain their own accessible names and tooltips."
|
|
4900
4902
|
],
|
|
4901
4903
|
"states": [
|
|
4902
4904
|
"Without multiple sections the center renders heading.",
|
|
4903
|
-
"With multiple sections the center renders the controlled MobileSectionSwitcher.",
|
|
4905
|
+
"With multiple sections the center renders the controlled MobileSectionSwitcher by default or an explicitly requested segmented TabGroup.",
|
|
4904
4906
|
"Optional subsections render in a second row and emit dsSubsectionChange without changing the primary section.",
|
|
4905
4907
|
"Sections represent peer destinations at the current navigation level; subsections represent local views beneath the selected page or detail identity.",
|
|
4906
4908
|
"Brand tone changes surface and foreground without changing geometry or interaction ownership."
|
|
4907
4909
|
],
|
|
4908
4910
|
"responsiveBehavior": [
|
|
4909
|
-
"The primary
|
|
4911
|
+
"The primary 56px lane matches the Mobile Sheet Nav header and Mobile Bar Nav; optional subsections add one subordinate 48px lane.",
|
|
4910
4912
|
"Equal flexible side lanes keep the center mathematically aligned when actions are asymmetric."
|
|
4911
4913
|
],
|
|
4912
4914
|
"references": [
|
|
@@ -4926,13 +4928,21 @@
|
|
|
4926
4928
|
"required": false
|
|
4927
4929
|
},
|
|
4928
4930
|
"sections": {
|
|
4929
|
-
"type": "
|
|
4931
|
+
"type": "TabGroupItem[]",
|
|
4930
4932
|
"required": false
|
|
4931
4933
|
},
|
|
4932
4934
|
"sectionsAriaLabel": {
|
|
4933
4935
|
"type": "string",
|
|
4934
4936
|
"required": false
|
|
4935
4937
|
},
|
|
4938
|
+
"sectionsPresentation": {
|
|
4939
|
+
"type": "MobileHeaderSectionsPresentation",
|
|
4940
|
+
"required": false
|
|
4941
|
+
},
|
|
4942
|
+
"sectionsSize": {
|
|
4943
|
+
"type": "TabGroupSize",
|
|
4944
|
+
"required": false
|
|
4945
|
+
},
|
|
4936
4946
|
"subsections": {
|
|
4937
4947
|
"type": "TabItem[]",
|
|
4938
4948
|
"required": false
|
|
@@ -4977,6 +4987,7 @@
|
|
|
4977
4987
|
],
|
|
4978
4988
|
"registryDependencies": [
|
|
4979
4989
|
"mobile-section-switcher",
|
|
4990
|
+
"tab-group",
|
|
4980
4991
|
"text"
|
|
4981
4992
|
]
|
|
4982
4993
|
},
|
|
@@ -5105,7 +5116,7 @@
|
|
|
5105
5116
|
],
|
|
5106
5117
|
"responsiveBehavior": [
|
|
5107
5118
|
"The pane fills the mobile content stage while the bottom bar remains available.",
|
|
5108
|
-
"The sheet header and scrollable navigation body each use the shared 8px chrome inset;
|
|
5119
|
+
"The sheet header and scrollable navigation body each use the shared 8px chrome inset; the context TabGroup and primary controls share a 40px height and 24px icon scale.",
|
|
5109
5120
|
"Dashboard and Settings preserve their supplied visual groups with an 8px gap between destinations inside a section and a 32px gap between sections."
|
|
5110
5121
|
],
|
|
5111
5122
|
"references": [
|
|
@@ -6760,6 +6771,7 @@
|
|
|
6760
6771
|
"Replace navigation and pageChrome together from one completed route state.",
|
|
6761
6772
|
"When pageChrome.showBack marks a detail depth, mobile chrome keeps the page heading as its identity and presents only local subsections; peer route tabs remain in desktop BarNav rather than replacing the detail heading.",
|
|
6762
6773
|
"Managed ShellApp keeps BarNav and ShellPage presentations present and owns page header stickiness and the content scroller.",
|
|
6774
|
+
"Route-owned pageChrome selects ShellPage contentInset and contentSurface independently; ShellApp forwards both without making page-specific layout or surface decisions.",
|
|
6763
6775
|
"The application filters unauthorized destinations, sections, and tools before passing them into shell components."
|
|
6764
6776
|
],
|
|
6765
6777
|
"responsiveBehavior": [
|
|
@@ -6767,6 +6779,8 @@
|
|
|
6767
6779
|
"On desktop, PanelNav defaults expanded, permits user collapse or expansion, and respects the locally persisted desktop preference.",
|
|
6768
6780
|
"On tablet, ShellApp keeps PanelNav permanently collapsed and prevents user expansion without overwriting the desktop preference.",
|
|
6769
6781
|
"On mobile, ShellApp hides and inerts desktop chrome, uses a solid primary stage, and composes MobileHeader, MobileSheetNav, ShellTools, and the persistent MobileBarNav around the same application-owned content.",
|
|
6782
|
+
"Opening MobileSheetNav temporarily overlays the active routed page or global tool; closing it without selecting an area restores that same destination and its nested state.",
|
|
6783
|
+
"When a suspended mobile document returns to the foreground, ShellApp refreshes the complete stage paint layer without remounting routed content or tool owners.",
|
|
6770
6784
|
"When the application enables viewport-fit=cover, ShellApp reserves the shared top safe-area inset once for the complete mobile stage; nested routed, sheet, and tool headers must not add a second top inset.",
|
|
6771
6785
|
"A slotted Banner remains below the top safe-area inset and above routed, navigation, fullscreen-tool, and mobile global-surface presentations.",
|
|
6772
6786
|
"Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
|
|
@@ -6930,7 +6944,7 @@
|
|
|
6930
6944
|
{
|
|
6931
6945
|
"name": "shell-page",
|
|
6932
6946
|
"title": "ShellPage",
|
|
6933
|
-
"description": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and
|
|
6947
|
+
"description": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
|
|
6934
6948
|
"type": "registry:ui",
|
|
6935
6949
|
"meta": {
|
|
6936
6950
|
"library": "@ds-mo/ui",
|
|
@@ -6941,12 +6955,13 @@
|
|
|
6941
6955
|
"intent": {
|
|
6942
6956
|
"audience": "general",
|
|
6943
6957
|
"status": "stable",
|
|
6944
|
-
"summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and
|
|
6958
|
+
"summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
|
|
6945
6959
|
"useWhen": [
|
|
6946
6960
|
"Rendering a standard routed page inside ShellApp's default content region.",
|
|
6947
6961
|
"BarTitle should expand at a roomy page top, compact after scroll, or use constrained action layout when the application shell reports reduced capacity.",
|
|
6948
6962
|
"BarWorkflow needs sticky page-level placement while remaining compact.",
|
|
6949
|
-
"Pages need consistent content gutters with an explicit full-bleed option."
|
|
6963
|
+
"Pages need consistent content gutters with an explicit full-bleed option.",
|
|
6964
|
+
"The page canvas surrounding routed content must use either the primary or secondary application surface."
|
|
6950
6965
|
],
|
|
6951
6966
|
"avoidWhen": [
|
|
6952
6967
|
"Building authentication, onboarding, public, modal, drawer, or intentionally focused fullscreen layouts outside the standard ShellApp page region.",
|
|
@@ -6985,6 +7000,8 @@
|
|
|
6985
7000
|
"headerPresentation=auto selects the matching header variant from headerCapacity and scroll position.",
|
|
6986
7001
|
"expanded, compact, and constrained are explicit overrides for exceptional layouts and deterministic examples.",
|
|
6987
7002
|
"contentInset=default supplies standard page gutters; none permits maps, canvases, and other full-bleed content.",
|
|
7003
|
+
"contentSurface=primary keeps the standard page canvas; secondary paints both the inset gutter and the canvas beneath routed content. Desktop and tablet BarTitle chrome matches that canvas in expanded, compact, and constrained presentations; MobileHeader remains primary.",
|
|
7004
|
+
"contentInset and contentSurface are independent: either surface supports standard responsive gutters or a full-bleed page-owned layout.",
|
|
6988
7005
|
"The header slot accepts one desktop BarTitle or BarWorkflow; mobile-header accepts the corresponding MobileHeader presentation. The default slot owns router output and all page product content."
|
|
6989
7006
|
],
|
|
6990
7007
|
"responsiveBehavior": [
|
|
@@ -6993,7 +7010,10 @@
|
|
|
6993
7010
|
"A ShellPage-managed BarTitle remains concealed until headerCapacity is available and its rendered variant matches the resolved presentation, preventing a default-variant flash during route activation.",
|
|
6994
7011
|
"responsiveMode=mobile hides and inerts the desktop header, exposes mobile-header, and disables desktop scroll-compaction geometry.",
|
|
6995
7012
|
"Update headerCapacity synchronously with shell layout state so opening tools or crossing application breakpoints cannot briefly render the wrong presentation.",
|
|
6996
|
-
"The default content inset is 32px in desktop mode and 16px in tablet and mobile modes
|
|
7013
|
+
"The default content inset is balanced on every side: 32px in desktop mode and 16px in tablet and mobile modes.",
|
|
7014
|
+
"The selected content surface persists unchanged across desktop, tablet, and mobile modes.",
|
|
7015
|
+
"On a secondary desktop or tablet page, BarTitle matches the page canvas across capacity and scroll-driven variant changes; the separate mobile-header presentation remains primary.",
|
|
7016
|
+
"The flow-preservation spacer follows contentSurface so compacting a secondary page cannot expose a primary strip before its content.",
|
|
6997
7017
|
"On roomy pages, the expanded header scrolls upward until its title and action row reaches the compact row position, while its bottom divider progressively extends from the expanded inset to edge-to-edge; it then snaps variants without moving that shared visual anchor.",
|
|
6998
7018
|
"Scroll compaction preserves the expanded page flow offset so content never jumps beneath the sticky header.",
|
|
6999
7019
|
"ShellPage relies on ShellApp's content scroller and never introduces nested scrolling.",
|
|
@@ -7006,7 +7026,7 @@
|
|
|
7006
7026
|
],
|
|
7007
7027
|
"react": [
|
|
7008
7028
|
"Render the desktop header with slot=header and DsMobileHeader with slot=mobile-header inside DsShellPage.",
|
|
7009
|
-
"Use contentInset none only for deliberately full-bleed page products."
|
|
7029
|
+
"Use contentInset none only for deliberately full-bleed page products, and choose contentSurface independently from the page's spacing model."
|
|
7010
7030
|
],
|
|
7011
7031
|
"angular": [
|
|
7012
7032
|
"Import the generated standalone DsShellPage adapter with the desktop header and DsMobileHeader, preserve both header slots, and place router-outlet in the default slot.",
|
|
@@ -7033,6 +7053,10 @@
|
|
|
7033
7053
|
"type": "ShellPageContentInset",
|
|
7034
7054
|
"required": false
|
|
7035
7055
|
},
|
|
7056
|
+
"contentSurface": {
|
|
7057
|
+
"type": "ShellPageContentSurface",
|
|
7058
|
+
"required": false
|
|
7059
|
+
},
|
|
7036
7060
|
"headerCapacity": {
|
|
7037
7061
|
"type": "ShellPageCapacity",
|
|
7038
7062
|
"required": false
|
|
@@ -7093,7 +7117,7 @@
|
|
|
7093
7117
|
"component:ds-shell-app",
|
|
7094
7118
|
"component:ds-panel-tool-header",
|
|
7095
7119
|
"component:ds-mobile-header",
|
|
7096
|
-
"component:ds-
|
|
7120
|
+
"component:ds-tab-group",
|
|
7097
7121
|
"component:ds-mobile-bar-nav"
|
|
7098
7122
|
],
|
|
7099
7123
|
"patterns": [
|
|
@@ -7102,7 +7126,7 @@
|
|
|
7102
7126
|
"accessibility": [
|
|
7103
7127
|
"Only the active mobile tool view participates in focus or the accessibility tree.",
|
|
7104
7128
|
"Header Back and application-owned header actions preserve the PanelTools event contract.",
|
|
7105
|
-
"Inbox uses
|
|
7129
|
+
"Mobile Inbox uses a named label-only TabGroup for Stacks and Activity; Messages remains a direct mobile destination."
|
|
7106
7130
|
],
|
|
7107
7131
|
"states": [
|
|
7108
7132
|
"The application owns open and activeTool and replaces headers when tool depth changes.",
|
|
@@ -7112,7 +7136,7 @@
|
|
|
7112
7136
|
],
|
|
7113
7137
|
"responsiveBehavior": [
|
|
7114
7138
|
"Desktop and tablet compose PanelTools-compatible rail and drawer chrome.",
|
|
7115
|
-
"Mobile renders one centered MobileHeader for every tool; Stacks and Activity use Inbox
|
|
7139
|
+
"Mobile renders one centered MobileHeader for every tool; Stacks and Activity use the large segmented Inbox control, while Messages remains a direct tool destination."
|
|
7116
7140
|
],
|
|
7117
7141
|
"frameworkCaveats": {
|
|
7118
7142
|
"customElements": [
|
|
@@ -7928,6 +7952,7 @@
|
|
|
7928
7952
|
"The parent owns the canonical selected value and adjacent view visibility, and should update both from dsChange.",
|
|
7929
7953
|
"A missing, empty, inactive, or unknown selected value is invalid when enabled tabs exist; the component does not choose a fallback selection.",
|
|
7930
7954
|
"Selection is singular and follows keyboard focus.",
|
|
7955
|
+
"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.",
|
|
7931
7956
|
"Use one consistent content variant across every selectable tab in a group.",
|
|
7932
7957
|
"Omitted background is for primary and secondary surfaces; pass the faint context explicitly on faint surfaces.",
|
|
7933
7958
|
"Only the omitted default context emphasizes visible selected label text and keeps the filled track; explicit faint follows the other surface contexts with a transparent track, stable text weight, surface border, and neutral active fill.",
|
|
@@ -7935,6 +7960,7 @@
|
|
|
7935
7960
|
],
|
|
7936
7961
|
"responsiveBehavior": [
|
|
7937
7962
|
"The component remains a single horizontal row and does not become vertical or wrap.",
|
|
7963
|
+
"Use the large size when a mobile composition aligns the group with 40px shell controls; size does not change automatically at a breakpoint.",
|
|
7938
7964
|
"The consuming layout owns narrow-width placement and overflow, or replaces the row with a more suitable navigation pattern."
|
|
7939
7965
|
],
|
|
7940
7966
|
"frameworkCaveats": {
|
|
@@ -7969,6 +7995,10 @@
|
|
|
7969
7995
|
"type": "TabBackground | undefined",
|
|
7970
7996
|
"required": false
|
|
7971
7997
|
},
|
|
7998
|
+
"size": {
|
|
7999
|
+
"type": "TabGroupSize",
|
|
8000
|
+
"required": false
|
|
8001
|
+
},
|
|
7972
8002
|
"tabs": {
|
|
7973
8003
|
"type": "TabGroupItem[]",
|
|
7974
8004
|
"required": false
|
|
@@ -8002,6 +8032,264 @@
|
|
|
8002
8032
|
"text"
|
|
8003
8033
|
]
|
|
8004
8034
|
},
|
|
8035
|
+
{
|
|
8036
|
+
"name": "table",
|
|
8037
|
+
"title": "Table",
|
|
8038
|
+
"description": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
|
|
8039
|
+
"type": "registry:ui",
|
|
8040
|
+
"meta": {
|
|
8041
|
+
"library": "@ds-mo/ui",
|
|
8042
|
+
"distribution": "npm",
|
|
8043
|
+
"storybook": "https://zainadeel.github.io/compomo/?path=/story/table",
|
|
8044
|
+
"source": "src/wc/components/Table/Table.tsx",
|
|
8045
|
+
"intentStatus": "complete",
|
|
8046
|
+
"intent": {
|
|
8047
|
+
"audience": "general",
|
|
8048
|
+
"status": "experimental",
|
|
8049
|
+
"summary": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
|
|
8050
|
+
"useWhen": [
|
|
8051
|
+
"A structured dataset needs native row and column relationships, optional one-level grouping, or comparable values across records.",
|
|
8052
|
+
"An application needs controlled sorting, loaded-row selection, or lazy loading while retaining ownership of the data query and transformations.",
|
|
8053
|
+
"A product table needs a token-backed recipe whose individual header, group, row, cell, selection, state, and load-more layers remain easy to restyle."
|
|
8054
|
+
],
|
|
8055
|
+
"avoidWhen": [
|
|
8056
|
+
"Content is primarily editorial prose; use semantic product-owned markup with the prose recipe instead.",
|
|
8057
|
+
"A small label/value set reads more clearly as a list, description list, or card.",
|
|
8058
|
+
"The interface requires tree-grid behavior, nested grouping, inline cell editing, row reordering, column pinning, or virtualization; those are outside this first contract.",
|
|
8059
|
+
"The application expects the component to fetch, paginate, sort, group, or mutate records internally."
|
|
8060
|
+
],
|
|
8061
|
+
"commonlyComposedWith": [
|
|
8062
|
+
"component:ds-empty-state",
|
|
8063
|
+
"component:ds-skeleton",
|
|
8064
|
+
"component:ds-loader",
|
|
8065
|
+
"component:ds-button-unfilled",
|
|
8066
|
+
"component:ds-tag",
|
|
8067
|
+
"component:ds-icon"
|
|
8068
|
+
],
|
|
8069
|
+
"accessibility": [
|
|
8070
|
+
"The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty even when it is visually hidden.",
|
|
8071
|
+
"Sorting controls remain buttons inside column headers. Member-row sort uses aria-sort, while independent group order is described by the grouped header control.",
|
|
8072
|
+
"Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window.",
|
|
8073
|
+
"Scrollable table regions become keyboard focusable and named only when overflow exists.",
|
|
8074
|
+
"Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state."
|
|
8075
|
+
],
|
|
8076
|
+
"states": [
|
|
8077
|
+
"Columns, rows, groups, grouping, sorting, selected row IDs, and lazy-loading state are controlled inputs. Events communicate intent and never mutate those inputs.",
|
|
8078
|
+
"Grouping supports one level. The application supplies ordered groups and ordered member rows; group order and member-row sort are independent controls.",
|
|
8079
|
+
"An active member sort toggles only between ascending and descending; activating a different sortable label moves sorting to that key. Applications may still clear the controlled sort state explicitly. The grouped column toggles ascending and descending group order without clearing member sort.",
|
|
8080
|
+
"Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",
|
|
8081
|
+
"Initial loading uses row-shaped skeletons. Empty and initial error states remain inside the table. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states.",
|
|
8082
|
+
"Lazy loading replaces pagination. The application owns requests, cancellation, cursors, deduplication, appended records, and query identity; loadIdentity resets the component request guard.",
|
|
8083
|
+
"Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Single-track text, selection, tag-only, icon-only, Action, Empty, and Blank cells resolve a 40px base contract while multi-track cells grow downward. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled inside 8px padding, default to unbordered, and emit row, column, and action identities through dsCellAction. Image cells render a 52px-high bordered preview inside 6px outer padding, establishing a 64px row, and 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 variant hooks keep every cell family independently styleable.",
|
|
8084
|
+
"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."
|
|
8085
|
+
],
|
|
8086
|
+
"responsiveBehavior": [
|
|
8087
|
+
"The table keeps native semantics at narrow widths and scrolls horizontally instead of transforming into cards.",
|
|
8088
|
+
"Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space.",
|
|
8089
|
+
"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.",
|
|
8090
|
+
"Column headers use one 32px geometry. Body rows use a 40px single-track minimum; cell-specific outer padding and track geometry align text, selection, Tag, icon, Action, Empty, Blank, and Image primitives while additional tracks grow downward.",
|
|
8091
|
+
"Long content truncates by default and can opt into wrapping at the column or cell level."
|
|
8092
|
+
],
|
|
8093
|
+
"frameworkCaveats": {
|
|
8094
|
+
"customElements": [
|
|
8095
|
+
"Assign columns, rows, groups, grouping, sort, and selectedRowIds through JavaScript properties rather than HTML attribute strings.",
|
|
8096
|
+
"Replace controlled property values in response to dsSortChange, dsGroupingChange, dsSelectionChange, and dsLoadMore."
|
|
8097
|
+
],
|
|
8098
|
+
"react": [
|
|
8099
|
+
"Pass new array and state-object references when the controlled data or query state changes.",
|
|
8100
|
+
"Apply emitted sort, grouping, selection, action, or loading detail to application state and perform data transformations in the owning layer."
|
|
8101
|
+
],
|
|
8102
|
+
"angular": [
|
|
8103
|
+
"Bind complex table inputs as properties and update the controlled values from the corresponding output events.",
|
|
8104
|
+
"Keep server cursor, query lifecycle, and cell-action handling in the owning service or container."
|
|
8105
|
+
]
|
|
8106
|
+
},
|
|
8107
|
+
"references": [
|
|
8108
|
+
{
|
|
8109
|
+
"label": "Storybook review matrix",
|
|
8110
|
+
"path": "src/wc/components/Table/Table.stories.ts"
|
|
8111
|
+
},
|
|
8112
|
+
{
|
|
8113
|
+
"label": "Public visual recipe",
|
|
8114
|
+
"path": "src/wc/styles/table.css"
|
|
8115
|
+
}
|
|
8116
|
+
]
|
|
8117
|
+
},
|
|
8118
|
+
"props": {
|
|
8119
|
+
"caption": {
|
|
8120
|
+
"type": "string",
|
|
8121
|
+
"required": true
|
|
8122
|
+
},
|
|
8123
|
+
"captionVisibility": {
|
|
8124
|
+
"type": "TableCaptionVisibility",
|
|
8125
|
+
"required": false
|
|
8126
|
+
},
|
|
8127
|
+
"columns": {
|
|
8128
|
+
"type": "TableColumn[]",
|
|
8129
|
+
"required": false
|
|
8130
|
+
},
|
|
8131
|
+
"emptyBody": {
|
|
8132
|
+
"type": "string",
|
|
8133
|
+
"required": false
|
|
8134
|
+
},
|
|
8135
|
+
"emptyCellLabel": {
|
|
8136
|
+
"type": "string",
|
|
8137
|
+
"required": false
|
|
8138
|
+
},
|
|
8139
|
+
"emptyHeading": {
|
|
8140
|
+
"type": "string",
|
|
8141
|
+
"required": false
|
|
8142
|
+
},
|
|
8143
|
+
"endOfResultsLabel": {
|
|
8144
|
+
"type": "string",
|
|
8145
|
+
"required": false
|
|
8146
|
+
},
|
|
8147
|
+
"error": {
|
|
8148
|
+
"type": "boolean",
|
|
8149
|
+
"required": false
|
|
8150
|
+
},
|
|
8151
|
+
"errorBody": {
|
|
8152
|
+
"type": "string",
|
|
8153
|
+
"required": false
|
|
8154
|
+
},
|
|
8155
|
+
"errorHeading": {
|
|
8156
|
+
"type": "string",
|
|
8157
|
+
"required": false
|
|
8158
|
+
},
|
|
8159
|
+
"grouping": {
|
|
8160
|
+
"type": "TableGroupingState | null",
|
|
8161
|
+
"required": false
|
|
8162
|
+
},
|
|
8163
|
+
"groups": {
|
|
8164
|
+
"type": "TableGroup[]",
|
|
8165
|
+
"required": false
|
|
8166
|
+
},
|
|
8167
|
+
"hasMore": {
|
|
8168
|
+
"type": "boolean",
|
|
8169
|
+
"required": false
|
|
8170
|
+
},
|
|
8171
|
+
"lazyLoading": {
|
|
8172
|
+
"type": "boolean",
|
|
8173
|
+
"required": false
|
|
8174
|
+
},
|
|
8175
|
+
"loadIdentity": {
|
|
8176
|
+
"type": "string | number",
|
|
8177
|
+
"required": false
|
|
8178
|
+
},
|
|
8179
|
+
"loadMoreError": {
|
|
8180
|
+
"type": "string | undefined",
|
|
8181
|
+
"required": false
|
|
8182
|
+
},
|
|
8183
|
+
"loadMoreLabel": {
|
|
8184
|
+
"type": "string",
|
|
8185
|
+
"required": false
|
|
8186
|
+
},
|
|
8187
|
+
"loadMoreMode": {
|
|
8188
|
+
"type": "TableLoadMoreMode",
|
|
8189
|
+
"required": false
|
|
8190
|
+
},
|
|
8191
|
+
"loadMoreThreshold": {
|
|
8192
|
+
"type": "number",
|
|
8193
|
+
"required": false
|
|
8194
|
+
},
|
|
8195
|
+
"loading": {
|
|
8196
|
+
"type": "boolean",
|
|
8197
|
+
"required": false
|
|
8198
|
+
},
|
|
8199
|
+
"loadingMore": {
|
|
8200
|
+
"type": "boolean",
|
|
8201
|
+
"required": false
|
|
8202
|
+
},
|
|
8203
|
+
"loadingMoreLabel": {
|
|
8204
|
+
"type": "string",
|
|
8205
|
+
"required": false
|
|
8206
|
+
},
|
|
8207
|
+
"maxHeight": {
|
|
8208
|
+
"type": "string | number | undefined",
|
|
8209
|
+
"required": false
|
|
8210
|
+
},
|
|
8211
|
+
"retryLabel": {
|
|
8212
|
+
"type": "string",
|
|
8213
|
+
"required": false
|
|
8214
|
+
},
|
|
8215
|
+
"rows": {
|
|
8216
|
+
"type": "TableRow[]",
|
|
8217
|
+
"required": false
|
|
8218
|
+
},
|
|
8219
|
+
"rowsLoadedLabel": {
|
|
8220
|
+
"type": "string",
|
|
8221
|
+
"required": false
|
|
8222
|
+
},
|
|
8223
|
+
"scrollLabel": {
|
|
8224
|
+
"type": "string | undefined",
|
|
8225
|
+
"required": false
|
|
8226
|
+
},
|
|
8227
|
+
"selectedRowIds": {
|
|
8228
|
+
"type": "string[]",
|
|
8229
|
+
"required": false
|
|
8230
|
+
},
|
|
8231
|
+
"selectionMode": {
|
|
8232
|
+
"type": "TableSelectionMode",
|
|
8233
|
+
"required": false
|
|
8234
|
+
},
|
|
8235
|
+
"skeletonRows": {
|
|
8236
|
+
"type": "number",
|
|
8237
|
+
"required": false
|
|
8238
|
+
},
|
|
8239
|
+
"sort": {
|
|
8240
|
+
"type": "TableSortState | null",
|
|
8241
|
+
"required": false
|
|
8242
|
+
},
|
|
8243
|
+
"stickyHeader": {
|
|
8244
|
+
"type": "boolean",
|
|
8245
|
+
"required": false
|
|
8246
|
+
}
|
|
8247
|
+
},
|
|
8248
|
+
"events": [
|
|
8249
|
+
{
|
|
8250
|
+
"name": "dsCellAction",
|
|
8251
|
+
"detail": "TableCellActionDetail"
|
|
8252
|
+
},
|
|
8253
|
+
{
|
|
8254
|
+
"name": "dsGroupingChange",
|
|
8255
|
+
"detail": "TableGroupingChangeDetail"
|
|
8256
|
+
},
|
|
8257
|
+
{
|
|
8258
|
+
"name": "dsLoadMore",
|
|
8259
|
+
"detail": "TableLoadMoreDetail"
|
|
8260
|
+
},
|
|
8261
|
+
{
|
|
8262
|
+
"name": "dsSelectionChange",
|
|
8263
|
+
"detail": "TableSelectionChangeDetail"
|
|
8264
|
+
},
|
|
8265
|
+
{
|
|
8266
|
+
"name": "dsSortChange",
|
|
8267
|
+
"detail": "TableSortChangeDetail"
|
|
8268
|
+
}
|
|
8269
|
+
],
|
|
8270
|
+
"slots": [],
|
|
8271
|
+
"exports": {
|
|
8272
|
+
"customElement": "ds-table",
|
|
8273
|
+
"react": "DsTable",
|
|
8274
|
+
"angular": "DsTable"
|
|
8275
|
+
}
|
|
8276
|
+
},
|
|
8277
|
+
"dependencies": [
|
|
8278
|
+
"@ds-mo/ui",
|
|
8279
|
+
"@ds-mo/tokens",
|
|
8280
|
+
"@ds-mo/icons"
|
|
8281
|
+
],
|
|
8282
|
+
"registryDependencies": [
|
|
8283
|
+
"button-unfilled",
|
|
8284
|
+
"checkbox",
|
|
8285
|
+
"empty-state",
|
|
8286
|
+
"icon",
|
|
8287
|
+
"loader",
|
|
8288
|
+
"skeleton",
|
|
8289
|
+
"tag",
|
|
8290
|
+
"text"
|
|
8291
|
+
]
|
|
8292
|
+
},
|
|
8005
8293
|
{
|
|
8006
8294
|
"name": "tag",
|
|
8007
8295
|
"title": "Tag",
|
|
@@ -8066,12 +8354,13 @@
|
|
|
8066
8354
|
"Warning signals higher urgency or risk than caution, which asks for attention before a possible issue.",
|
|
8067
8355
|
"Contrast changes visual prominence without changing semantic intent or parent surface context.",
|
|
8068
8356
|
"Rounded is an optional visual style with no semantic difference.",
|
|
8357
|
+
"isInset opts into reduced outer geometry only when Tag is nested inside a control of the same density; semantic styling, typography, icons, gaps, radius, and interaction remain unchanged.",
|
|
8069
8358
|
"Labels stay on one line and truncate only when the owner supplies a maximum width.",
|
|
8070
8359
|
"Omitted interactive renders static metadata with no focus, event, or suffix. Interactive adds the fixed ChevronUpDown suffix and emits dsClick without toggling expanded internally.",
|
|
8071
8360
|
"isInactive disables only the interactive button and applies the shared inactive treatment."
|
|
8072
8361
|
],
|
|
8073
8362
|
"responsiveBehavior": [
|
|
8074
|
-
"The owner selects md, sm, or xs density to match its local layout and owns collection wrapping, overflow, and condensation.",
|
|
8363
|
+
"The owner selects md, sm, or xs density to match its local layout and owns collection wrapping, overflow, and condensation. Use isInset only for same-density control nesting.",
|
|
8075
8364
|
"Tag does not change size or behavior automatically at breakpoints."
|
|
8076
8365
|
],
|
|
8077
8366
|
"frameworkCaveats": {
|
|
@@ -8121,6 +8410,10 @@
|
|
|
8121
8410
|
"type": "boolean",
|
|
8122
8411
|
"required": false
|
|
8123
8412
|
},
|
|
8413
|
+
"isInset": {
|
|
8414
|
+
"type": "boolean",
|
|
8415
|
+
"required": false
|
|
8416
|
+
},
|
|
8124
8417
|
"label": {
|
|
8125
8418
|
"type": "string",
|
|
8126
8419
|
"required": true
|