@ds-mo/ui 3.2.0 → 3.2.1
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/.build-stamp +1 -1
- package/dist/agent.json +233 -34
- package/dist/docs/components.json +1 -1
- package/package.json +1 -1
package/dist/.build-stamp
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1783825797406
|
package/dist/agent.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"package": "@ds-mo/ui",
|
|
4
|
-
"packageVersion": "3.2.
|
|
4
|
+
"packageVersion": "3.2.1",
|
|
5
5
|
"kind": "components",
|
|
6
6
|
"entries": [
|
|
7
7
|
{
|
|
@@ -9,31 +9,21 @@
|
|
|
9
9
|
"tag": "ds-app-shell",
|
|
10
10
|
"name": "app-shell",
|
|
11
11
|
"title": "AppShell",
|
|
12
|
-
"summary": "
|
|
12
|
+
"summary": "The single required workspace root for standard authenticated application pages, coordinating primary and secondary navigation, tools chrome, responsive composition, content geometry, shared styling, and shell behavior.",
|
|
13
13
|
"intentStatus": "complete",
|
|
14
14
|
"intent": {
|
|
15
15
|
"audience": "specialized",
|
|
16
16
|
"status": "stable",
|
|
17
|
-
"summary": "
|
|
17
|
+
"summary": "The single required workspace root for standard authenticated application pages, coordinating primary and secondary navigation, tools chrome, responsive composition, content geometry, shared styling, and shell behavior.",
|
|
18
18
|
"useWhen": [
|
|
19
|
-
"Building
|
|
20
|
-
"
|
|
19
|
+
"Building any standard authenticated product or workspace page with CompoMo.",
|
|
20
|
+
"PanelNav, BarNav, PanelTools, page content, shared chrome, responsive behavior, and shell shortcuts must be composed as one application frame.",
|
|
21
|
+
"Future application templates need the supported base-page composition boundary."
|
|
21
22
|
],
|
|
22
23
|
"avoidWhen": [
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
"alternatives": [
|
|
27
|
-
{
|
|
28
|
-
"when": "Only a top-level section tab row is needed.",
|
|
29
|
-
"component": "component:ds-bar-nav",
|
|
30
|
-
"reason": "BarNav can be used without the complete workspace shell."
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"when": "Only persistent left-side destination navigation is needed.",
|
|
34
|
-
"component": "component:ds-panel-nav",
|
|
35
|
-
"reason": "PanelNav owns left navigation without requiring the full shell composition."
|
|
36
|
-
}
|
|
24
|
+
"Building authentication, onboarding, public, marketing, print, error, or intentionally focused full-screen experiences that require a different layout.",
|
|
25
|
+
"Another AppShell already exists in the page; applications must render exactly one and must never nest AppShells.",
|
|
26
|
+
"Building content inside an existing AppShell; render the page content rather than another shell."
|
|
37
27
|
],
|
|
38
28
|
"commonlyComposedWith": [
|
|
39
29
|
"component:ds-panel-nav",
|
|
@@ -44,27 +34,44 @@
|
|
|
44
34
|
"pattern:application-shell"
|
|
45
35
|
],
|
|
46
36
|
"accessibility": [
|
|
47
|
-
"Keep
|
|
37
|
+
"Keep primary destinations in PanelNav and secondary route sections in BarNav.",
|
|
38
|
+
"Ensure the default content region contains the page's single main landmark.",
|
|
39
|
+
"Keep PanelNav, BarNav, and PanelTools chrome available in the shell's supported desktop and tablet compositions.",
|
|
48
40
|
"Do not override browser keyboard chords when enabling shell shortcuts.",
|
|
49
|
-
"
|
|
41
|
+
"Require Search and Help as the minimum PanelTools actions and provide accessible labels for every tool.",
|
|
42
|
+
"Preserve focus and accessible names across navigation, collapse, overflow, and responsive presentation changes."
|
|
50
43
|
],
|
|
51
44
|
"states": [
|
|
52
|
-
"
|
|
53
|
-
"
|
|
45
|
+
"Render exactly one AppShell as the workspace root and never nest it.",
|
|
46
|
+
"PanelNav, BarNav, and PanelTools are required shell regions; PanelTools contains at least Search and Help even when no additional product tools apply.",
|
|
47
|
+
"The application router owns the current route, authorization filtering, Dashboard or Settings context, destination collections, section collections, and localized content labels.",
|
|
48
|
+
"AppShell propagates navStyle and coordinates layout, gradient alignment, transitions, metrics, shortcuts, and responsive composition.",
|
|
49
|
+
"Dashboard represents day-to-day operational work while Settings represents administrative and configuration work; route state selects the context.",
|
|
50
|
+
"Update PanelNav groups, BarNav tabs and heading, navStyle, basePath, and currentUrl atomically from one resolved route state.",
|
|
51
|
+
"BarNav remains present: it shows route-section tabs when available and the active PanelNav destination label as heading otherwise.",
|
|
52
|
+
"The application filters unauthorized destinations, sections, and tools before passing them into shell components."
|
|
54
53
|
],
|
|
55
54
|
"responsiveBehavior": [
|
|
56
|
-
"
|
|
57
|
-
"
|
|
55
|
+
"AppShell owns the fixed system breakpoints and resolves desktop at 1200px and wider, tablet from 768px through 1199px, and mobile below 768px.",
|
|
56
|
+
"On desktop, PanelNav defaults expanded, permits user collapse or expansion, and respects the locally persisted desktop preference.",
|
|
57
|
+
"On tablet, AppShell keeps PanelNav permanently collapsed and prevents user expansion without overwriting the desktop preference.",
|
|
58
|
+
"On mobile, AppShell remains the page root but replaces PanelNav and desktop navigation composition with a future dedicated mobile navigation design.",
|
|
59
|
+
"Keep PanelNav width, BarNav height, PanelTools chrome, and main-content origin stable except during intentional responsive or collapse transitions.",
|
|
60
|
+
"The current runtime does not yet implement the complete desktop, tablet, and mobile composition contract; consuming applications must enforce missing breakpoint behavior until AppShell provides it."
|
|
58
61
|
],
|
|
59
62
|
"frameworkCaveats": {
|
|
60
63
|
"customElements": [
|
|
61
|
-
"Assign complex navigation
|
|
64
|
+
"Assign complex navigation and tool collections as JavaScript properties on the slotted components.",
|
|
65
|
+
"Stamp route-derived nav-style before components connect when deterministic first paint is required."
|
|
62
66
|
],
|
|
63
67
|
"react": [
|
|
64
|
-
"Use generated wrappers
|
|
68
|
+
"Use generated wrappers and preserve native slot names for PanelNav, BarNav, PanelTools, and main content.",
|
|
69
|
+
"Resolve all shell inputs from one router state before rendering the composition."
|
|
65
70
|
],
|
|
66
71
|
"angular": [
|
|
67
|
-
"
|
|
72
|
+
"Use generated standalone adapters and preserve slot attributes in templates.",
|
|
73
|
+
"Bind complex inputs as properties and update navigation inputs atomically from one resolved router state.",
|
|
74
|
+
"Bind both nav-style attributes and properties when deterministic first paint is required."
|
|
68
75
|
]
|
|
69
76
|
},
|
|
70
77
|
"references": [
|
|
@@ -79,6 +86,10 @@
|
|
|
79
86
|
{
|
|
80
87
|
"label": "Framework integration",
|
|
81
88
|
"path": "docs/framework-integration.md"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"label": "Application shell contract",
|
|
92
|
+
"path": "agent/patterns/application-shell/pattern.agent.json"
|
|
82
93
|
}
|
|
83
94
|
]
|
|
84
95
|
},
|
|
@@ -243,9 +254,101 @@
|
|
|
243
254
|
"tag": "ds-bar-nav",
|
|
244
255
|
"name": "bar-nav",
|
|
245
256
|
"title": "BarNav",
|
|
246
|
-
"summary": "
|
|
247
|
-
"intentStatus": "
|
|
248
|
-
"intent":
|
|
257
|
+
"summary": "Required secondary route navigation within AppShell, showing peer sections of the active PanelNav destination or its destination label when no section tabs apply.",
|
|
258
|
+
"intentStatus": "complete",
|
|
259
|
+
"intent": {
|
|
260
|
+
"audience": "specialized",
|
|
261
|
+
"status": "stable",
|
|
262
|
+
"summary": "Required secondary route navigation within AppShell, showing peer sections of the active PanelNav destination or its destination label when no section tabs apply.",
|
|
263
|
+
"useWhen": [
|
|
264
|
+
"Rendering the required secondary navigation region inside AppShell.",
|
|
265
|
+
"The active primary destination has peer route sections that users can navigate between.",
|
|
266
|
+
"The active primary destination has no route sections or is showing a detail route and its destination label must preserve the BarNav region."
|
|
267
|
+
],
|
|
268
|
+
"avoidWhen": [
|
|
269
|
+
"Primary application destinations are being rendered; use PanelNav instead.",
|
|
270
|
+
"A third navigation level is needed; BarNav is never tertiary navigation.",
|
|
271
|
+
"The choices switch local content without navigating routes; use TabGroup instead.",
|
|
272
|
+
"Document-style tabs need reordering, pinning, closing, or user customization.",
|
|
273
|
+
"BarNav would be mounted outside the application's single AppShell."
|
|
274
|
+
],
|
|
275
|
+
"alternatives": [
|
|
276
|
+
{
|
|
277
|
+
"when": "The choices are the application's top-level destinations.",
|
|
278
|
+
"component": "component:ds-panel-nav",
|
|
279
|
+
"reason": "PanelNav exclusively owns primary application navigation."
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
"when": "The choices switch local content without changing routes.",
|
|
283
|
+
"component": "component:ds-tab-group",
|
|
284
|
+
"reason": "TabGroup owns local view selection and tab semantics."
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"when": "The choices are temporary commands or contextual options.",
|
|
288
|
+
"component": "component:ds-menu",
|
|
289
|
+
"reason": "Menu owns transient action and option collections."
|
|
290
|
+
}
|
|
291
|
+
],
|
|
292
|
+
"commonlyComposedWith": [
|
|
293
|
+
"component:ds-app-shell",
|
|
294
|
+
"component:ds-panel-nav",
|
|
295
|
+
"component:ds-panel-tools"
|
|
296
|
+
],
|
|
297
|
+
"patterns": [
|
|
298
|
+
"pattern:application-shell"
|
|
299
|
+
],
|
|
300
|
+
"accessibility": [
|
|
301
|
+
"Use concise localized labels for every route section.",
|
|
302
|
+
"Keep section navigation keyboard accessible through the generated TabGroupNav behavior and overflow menu.",
|
|
303
|
+
"Preserve the selected route state when sections move between the visible row and overflow menu.",
|
|
304
|
+
"Use notification dots only as supplemental status and not as the sole indication of important information.",
|
|
305
|
+
"Pass the active PanelNav destination label through heading whenever section tabs are absent or hidden."
|
|
306
|
+
],
|
|
307
|
+
"states": [
|
|
308
|
+
"BarNav is the second and final application navigation level; it never replaces PanelNav and never becomes tertiary navigation.",
|
|
309
|
+
"The host router owns the current route; prefer currentUrl with basePath so BarNav derives the selected section.",
|
|
310
|
+
"Use value only when URL-derived selection is unavailable.",
|
|
311
|
+
"The consuming application supplies heading from the active PanelNav destination; BarNav does not inspect PanelNav to derive it.",
|
|
312
|
+
"When no sections apply, retain the BarNav region and show heading rather than shifting the main content upward.",
|
|
313
|
+
"On non-tab detail routes, show the parent PanelNav destination label in BarNav while the detail-page title remains in page content.",
|
|
314
|
+
"Dividers and groups visually organize peer route sections only and do not create hierarchy.",
|
|
315
|
+
"The application filters unauthorized sections before passing tabs to BarNav.",
|
|
316
|
+
"Dashboard and Settings route state updates PanelNav groups, BarNav tabs, heading, basePath, currentUrl, and navStyle as one coordinated change."
|
|
317
|
+
],
|
|
318
|
+
"responsiveBehavior": [
|
|
319
|
+
"Keep the BarNav region present so shell height and main-content origin remain stable across routes.",
|
|
320
|
+
"Allow the built-in overflow behavior to move trailing sections into Menu when the available width is insufficient.",
|
|
321
|
+
"The active section does not need to remain visible in the tab row when it moves into overflow because page content supplies the page title.",
|
|
322
|
+
"Do not infer mobile navigation behavior from desktop BarNav; future AppShell mobile composition may use a different navigation design."
|
|
323
|
+
],
|
|
324
|
+
"frameworkCaveats": {
|
|
325
|
+
"customElements": [
|
|
326
|
+
"Assign tabs as a JavaScript property for structured data; tabs-json is the string fallback.",
|
|
327
|
+
"Update tabs, heading, basePath, currentUrl, and navStyle from the same resolved route state."
|
|
328
|
+
],
|
|
329
|
+
"react": [
|
|
330
|
+
"Pass tabs as an array through the generated React wrapper and synchronize currentUrl and basePath with the host router."
|
|
331
|
+
],
|
|
332
|
+
"angular": [
|
|
333
|
+
"Import DsBarNav from @ds-mo/ui/angular/ds-bar-nav and bind tabs as a property.",
|
|
334
|
+
"Bind heading to the active PanelNav destination label and update route inputs atomically."
|
|
335
|
+
]
|
|
336
|
+
},
|
|
337
|
+
"references": [
|
|
338
|
+
{
|
|
339
|
+
"label": "Executable Storybook examples",
|
|
340
|
+
"path": "src/wc/components/BarNav/BarNav.stories.ts"
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"label": "Framework and routing integration",
|
|
344
|
+
"path": "docs/framework-integration.md"
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"label": "Application shell composition",
|
|
348
|
+
"path": "agent/patterns/application-shell/pattern.agent.json"
|
|
349
|
+
}
|
|
350
|
+
]
|
|
351
|
+
},
|
|
249
352
|
"api": {
|
|
250
353
|
"props": {
|
|
251
354
|
"basePath": {
|
|
@@ -1602,9 +1705,105 @@
|
|
|
1602
1705
|
"tag": "ds-panel-nav",
|
|
1603
1706
|
"name": "panel-nav",
|
|
1604
1707
|
"title": "PanelNav",
|
|
1605
|
-
"summary": "
|
|
1606
|
-
"intentStatus": "
|
|
1607
|
-
"intent":
|
|
1708
|
+
"summary": "The single persistent primary navigation for an application, providing grouped top-level destinations, active-route state, standard dashboard/settings switching, user access, and collapsible desktop and tablet presentation.",
|
|
1709
|
+
"intentStatus": "complete",
|
|
1710
|
+
"intent": {
|
|
1711
|
+
"audience": "specialized",
|
|
1712
|
+
"status": "stable",
|
|
1713
|
+
"summary": "The single persistent primary navigation for an application, providing grouped top-level destinations, active-route state, standard dashboard/settings switching, user access, and collapsible desktop and tablet presentation.",
|
|
1714
|
+
"useWhen": [
|
|
1715
|
+
"Building the one primary navigation surface for an application that uses the CompoMo system.",
|
|
1716
|
+
"Top-level destinations must remain consistently available while the application's page content changes.",
|
|
1717
|
+
"Primary destinations need visual grouping, icons, notification indicators, active-route state, and expanded or collapsed presentation."
|
|
1718
|
+
],
|
|
1719
|
+
"avoidWhen": [
|
|
1720
|
+
"A second navigation surface is needed within the same application; an application must have only one PanelNav.",
|
|
1721
|
+
"The choices represent sections within the active primary destination; use BarNav instead.",
|
|
1722
|
+
"The choices switch local content without changing the application's primary destination; use TabGroup instead.",
|
|
1723
|
+
"The interaction performs a command or presents temporary contextual choices; use a button or Menu instead.",
|
|
1724
|
+
"Building navigation below the mobile breakpoint; use the application's dedicated mobile navigation component instead."
|
|
1725
|
+
],
|
|
1726
|
+
"alternatives": [
|
|
1727
|
+
{
|
|
1728
|
+
"when": "The choices represent route sections within the active primary destination.",
|
|
1729
|
+
"component": "component:ds-bar-nav",
|
|
1730
|
+
"reason": "BarNav owns secondary section navigation within the destination selected by PanelNav."
|
|
1731
|
+
},
|
|
1732
|
+
{
|
|
1733
|
+
"when": "The choices switch local content without changing the application's primary destination.",
|
|
1734
|
+
"component": "component:ds-tab-group",
|
|
1735
|
+
"reason": "TabGroup owns local view selection and tab semantics."
|
|
1736
|
+
},
|
|
1737
|
+
{
|
|
1738
|
+
"when": "The choices are commands or temporary contextual actions.",
|
|
1739
|
+
"component": "component:ds-menu",
|
|
1740
|
+
"reason": "Menu owns transient action and option collections rather than persistent destinations."
|
|
1741
|
+
}
|
|
1742
|
+
],
|
|
1743
|
+
"commonlyComposedWith": [
|
|
1744
|
+
"component:ds-app-shell",
|
|
1745
|
+
"component:ds-bar-nav",
|
|
1746
|
+
"component:ds-panel-tools",
|
|
1747
|
+
"component:ds-menu"
|
|
1748
|
+
],
|
|
1749
|
+
"patterns": [
|
|
1750
|
+
"pattern:application-shell"
|
|
1751
|
+
],
|
|
1752
|
+
"accessibility": [
|
|
1753
|
+
"Give every primary destination a concise visible label and an icon that supports rather than replaces that label.",
|
|
1754
|
+
"Provide localized dashboard, settings, account, navigation, collapse, and expand labels.",
|
|
1755
|
+
"Preserve accessible destination names when the panel is collapsed to icon-only presentation.",
|
|
1756
|
+
"Use notification dots as supplemental status and never as the only indication of important information.",
|
|
1757
|
+
"Keep the standard dashboard/settings switch and user/account entry available in the footer."
|
|
1758
|
+
],
|
|
1759
|
+
"states": [
|
|
1760
|
+
"Render exactly one PanelNav per application; it owns primary application destinations and no other navigation role.",
|
|
1761
|
+
"The host router owns the current route; prefer currentUrl for active destination matching and use activeId only when route matching is unavailable.",
|
|
1762
|
+
"Use anchor mode for native links or routers that intercept anchors; use event mode when the host performs navigation from dsNavSelect.",
|
|
1763
|
+
"Groups visually organize top-level destinations only and must not be interpreted as nested or expandable navigation.",
|
|
1764
|
+
"Dashboard presents day-to-day operational destinations; Settings presents administrative and configuration destinations.",
|
|
1765
|
+
"The standard footer switches the entire destination collection and navStyle between Dashboard and Settings and exposes the user/account entry.",
|
|
1766
|
+
"The host owns the external user menu opened from dsNavUserAction.",
|
|
1767
|
+
"On desktop, allow user-controlled expand and collapse and persist the preference with storageKey when cross-session persistence is appropriate."
|
|
1768
|
+
],
|
|
1769
|
+
"responsiveBehavior": [
|
|
1770
|
+
"At 1200px and wider, default to expanded, allow the user to expand or collapse, and restore the locally persisted desktop preference when available.",
|
|
1771
|
+
"From 768px through 1199px, present PanelNav permanently collapsed and do not allow user expansion.",
|
|
1772
|
+
"Below 768px, the consuming application replaces PanelNav with a dedicated mobile navigation component; PanelNav does not own mobile navigation.",
|
|
1773
|
+
"AppShell permanently owns responsive composition: it determines shell mode, enforces tablet collapse, and replaces PanelNav with future mobile navigation below 768px.",
|
|
1774
|
+
"The current breakpoint prop can auto-collapse PanelNav but does not enforce the complete tablet lock; AppShell or the consuming application must currently enforce that lock.",
|
|
1775
|
+
"Collapsed presentation must preserve destination ordering, active state, notification status, and accessible names."
|
|
1776
|
+
],
|
|
1777
|
+
"frameworkCaveats": {
|
|
1778
|
+
"customElements": [
|
|
1779
|
+
"Assign groups as a JavaScript property for structured data; a JSON string attribute is also supported.",
|
|
1780
|
+
"Set nav-style before the element connects when first-paint style must match the current route."
|
|
1781
|
+
],
|
|
1782
|
+
"react": [
|
|
1783
|
+
"Pass groups as an array through the generated React wrapper and synchronize currentUrl with the host router.",
|
|
1784
|
+
"AppShell owns mobile replacement and currently enforces the tablet expansion lock."
|
|
1785
|
+
],
|
|
1786
|
+
"angular": [
|
|
1787
|
+
"Import DsPanelNav from @ds-mo/ui/angular/ds-panel-nav and bind groups as a property.",
|
|
1788
|
+
"Bind both the nav-style attribute and navStyle property when first-paint route styling must be deterministic.",
|
|
1789
|
+
"AppShell owns mobile replacement and currently enforces the tablet expansion lock."
|
|
1790
|
+
]
|
|
1791
|
+
},
|
|
1792
|
+
"references": [
|
|
1793
|
+
{
|
|
1794
|
+
"label": "Executable Storybook examples",
|
|
1795
|
+
"path": "src/wc/components/PanelNav/PanelNav.stories.ts"
|
|
1796
|
+
},
|
|
1797
|
+
{
|
|
1798
|
+
"label": "Framework and routing integration",
|
|
1799
|
+
"path": "docs/framework-integration.md"
|
|
1800
|
+
},
|
|
1801
|
+
{
|
|
1802
|
+
"label": "Application shell composition",
|
|
1803
|
+
"path": "agent/patterns/application-shell/pattern.agent.json"
|
|
1804
|
+
}
|
|
1805
|
+
]
|
|
1806
|
+
},
|
|
1608
1807
|
"api": {
|
|
1609
1808
|
"props": {
|
|
1610
1809
|
"accountLabel": {
|