@ds-mo/ui 14.27.0 → 14.28.0

package/dist/mcp-data/registry/registry.json

@@ -2385,6 +2385,136 @@
         "text"
       ]
     },
+    {
+      "name": "card-navigation",
+      "title": "CardNavigation",
+      "description": "Settings-style navigation surface with a native destination link, optional supporting copy, a fixed ChevronRight affordance, and an optional application-owned body.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-navigation",
+        "source": "src/wc/components/CardNavigation/CardNavigation.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "stable",
+          "summary": "Settings-style navigation surface with a native destination link, optional supporting copy, a fixed ChevronRight affordance, and an optional application-owned body.",
+          "useWhen": [
+            "A settings page needs a card that leads to a deeper settings destination.",
+            "A compact destination card needs the complete surface to act as one link.",
+            "A settings summary must remain visible in a body while only the card header navigates."
+          ],
+          "avoidWhen": [
+            "The card edits its contents in place; use CardSetting for the edit-save-cancel workflow.",
+            "The destination is an action without a navigable URL.",
+            "The surface contains a chart, legend, metric visualization, or other data-visualization composition."
+          ],
+          "alternatives": [
+            {
+              "when": "The section switches between read-only and editable content in place.",
+              "component": "component:ds-card-setting",
+              "reason": "CardSetting owns the controlled edit-save-cancel workflow."
+            },
+            {
+              "when": "The surface contains a chart or specialized data-visualization composition.",
+              "component": "component:ds-card-chart",
+              "reason": "CardChart owns the independently evolving chart-card contract."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-text",
+            "component:ds-card-setting"
+          ],
+          "accessibility": [
+            "CardNavigation renders a native link whenever href resolves to an allowed URL, so Enter activation, link context menus, and modified-click behavior remain available.",
+            "The heading is rendered as an h2 and the optional description contributes to the link's accessible name.",
+            "The ChevronRight icon is decorative because the link text already names the destination.",
+            "Use the content variant only when interactive body content must remain outside the header link; never place interactive descendants inside the navigation-only card.",
+            "dsNavigate is cancelable so client-side routers can prevent native navigation after accepting an unmodified activation."
+          ],
+          "states": [
+            "The native link owns hover, pressed, and focus-visible states across the complete card in navigation-only mode.",
+            "In content mode, the native link owns those interaction states only across the header while the body remains application-owned.",
+            "An empty or unsafe href renders non-interactive card chrome without a false keyboard target.",
+            "The application owns destination loading, authorization, not-found, and recovery states after navigation."
+          ],
+          "responsiveBehavior": [
+            "Choose sm, md, or lg from the parent layout; the surface never exceeds its parent width.",
+            "Supporting copy wraps while the chevron remains visible at the trailing edge.",
+            "The parent owns wrapping, columns, stacking, and breakpoint changes between cards."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Set href to a valid relative or HTTP(S) URL.",
+              "Prevent dsNavigate only when an application router takes ownership of the same activation."
+            ],
+            "react": [
+              "Pass href for native link semantics and use onDsNavigate only when coordinating with a client-side router.",
+              "Use variant content when projecting interactive body content so those controls stay outside the link."
+            ],
+            "angular": [
+              "Bind href and prevent dsNavigate before calling Router.navigateByUrl for unmodified primary activations.",
+              "Use variant content when projecting interactive body content so those controls stay outside the link."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook navigation-only and content examples",
+              "path": "src/wc/components/CardNavigation/CardNavigation.stories.ts"
+            },
+            {
+              "label": "Rendered navigation and interaction coverage",
+              "path": "tests/e2e/card-navigation.spec.ts"
+            }
+          ]
+        },
+        "props": {
+          "cardWidth": {
+            "type": "CardNavigationWidth",
+            "required": false
+          },
+          "description": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "heading": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "string",
+            "required": true
+          },
+          "variant": {
+            "type": "CardNavigationVariant",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsNavigate",
+            "detail": "CardNavigationDetail"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-card-navigation",
+          "react": "DsCardNavigation",
+          "vue": "DsCardNavigation",
+          "angular": "DsCardNavigation"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
+      ],
+      "registryDependencies": [
+        "icon",
+        "text"
+      ]
+    },
     {
       "name": "card-overview",
       "title": "CardOverview",
@@ -2708,6 +2838,123 @@
         "text"
       ]
     },
+    {
+      "name": "card-settings-scope",
+      "title": "CardSettingsScope",
+      "description": "Compact, theme-aware settings context card with inline product-area and profile menu triggers.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-settings-scope",
+        "source": "src/wc/components/CardSettingsScope/CardSettingsScope.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "stable",
+          "summary": "Compact, theme-aware settings context card with inline product-area and profile menu triggers.",
+          "useWhen": [
+            "A settings workspace needs to show and change both its product area and the organization or profile being managed."
+          ],
+          "avoidWhen": [
+            "The content is a reporting period and metrics summary; use CardOverview.",
+            "The card edits settings in place; use CardSetting."
+          ],
+          "commonlyComposedWith": [
+            "component:ds-menu",
+            "component:ds-card-setting"
+          ],
+          "accessibility": [
+            "Both scope values are native buttons with popup relationships and controlled expanded state.",
+            "Use the emitted native anchor for menu placement and focus return.",
+            "An empty informational profiles popup uses dialog semantics.",
+            "The shared text-action recipe supplies brand foreground, hover underline, and keyboard focus indication."
+          ],
+          "states": [
+            "The application owns the selected area, profile, available choices, permissions, and empty-state copy.",
+            "The card reports popup requests without changing selection or expanded state.",
+            "The surface follows the active theme rather than imposing always-dark colors."
+          ],
+          "responsiveBehavior": [
+            "The parent owns sticky positioning and shell offsets.",
+            "The compact sentence wraps when space is constrained so both controls remain available."
+          ],
+          "frameworkCaveats": {
+            "angular": [
+              "Import the generated standalone adapter; bind controlled labels and expanded states and handle dsScopeRequest."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook examples",
+              "path": "src/wc/components/CardSettingsScope/CardSettingsScope.stories.ts"
+            }
+          ]
+        },
+        "props": {
+          "areaControls": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "areaExpanded": {
+            "type": "boolean",
+            "required": false
+          },
+          "areaLabel": {
+            "type": "string",
+            "required": false
+          },
+          "forLabel": {
+            "type": "string",
+            "required": false
+          },
+          "managingLabel": {
+            "type": "string",
+            "required": false
+          },
+          "profileControls": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "profileExpanded": {
+            "type": "boolean",
+            "required": false
+          },
+          "profileLabel": {
+            "type": "string",
+            "required": false
+          },
+          "profilePopup": {
+            "type": "'menu' | 'dialog'",
+            "required": false
+          },
+          "scopeLabel": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsScopeRequest",
+            "detail": "SettingsScopeRequest"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-card-settings-scope",
+          "react": "DsCardSettingsScope",
+          "vue": "DsCardSettingsScope",
+          "angular": "DsCardSettingsScope"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "text"
+      ]
+    },
     {
       "name": "chart",
       "title": "Chart",
@@ -4850,6 +5097,7 @@
             "pattern:menu-trigger"
           ],
           "accessibility": [
+            "An empty choice collection can show informational copy in a focusable non-modal dialog instead of rendering a fake disabled action. Escape and Tab retain the normal popup dismissal and anchor-focus behavior.",
             "Anchor the menu to the control that opens it and return focus to that control when the menu closes.",
             "Open with visible initial focus only when the trigger was activated from the keyboard.",
             "Keep disabled items discoverable only when their unavailable state is meaningful.",
@@ -4931,6 +5179,10 @@
             "type": "HTMLElement | undefined",
             "required": false
           },
+          "emptyMessage": {
+            "type": "string",
+            "required": false
+          },
           "initialFocusVisible": {
             "type": "boolean",
             "required": false
@@ -5546,6 +5798,7 @@
           ],
           "states": [
             "The fixed groups are Menu plus current area, followed by Search, Activity, Messages, and Agents.",
+            "The shell may retain Help in the context position while another global tool is selected; context identity and active selection are independent.",
             "Consumers that intentionally group multiple review tools can replace the Activity destination with Inbox.",
             "Selection promotes foreground to primary without painting a selected fill; unselected destinations use tertiary foreground.",
             "Opening Mobile Sheet Nav replaces the Menu glyph with Cross while preserving its accessible name.",
@@ -5617,6 +5870,10 @@
             "type": "string",
             "required": false
           },
+          "primaryDestination": {
+            "type": "'area' | 'help'",
+            "required": false
+          },
           "searchDot": {
             "type": "boolean",
             "required": false
@@ -5698,8 +5955,10 @@
           "states": [
             "Without multiple sections the center renders heading.",
             "With multiple sections the center renders the controlled MobileSectionSwitcher by default or an explicitly requested segmented TabGroup.",
+            "Primary section switching without subordinate navigation uses the viewport-edge sheet. Headers exposing both peer sections and subordinate views retain their two-level navigation.",
             "The segmented presentation uses the shared fill-width TabGroup contract and divides its centered two-thirds top-bar lane equally between options.",
-            "Optional subsections render in a second row and emit dsSubsectionChange without changing the primary section.",
+            "Optional subsections use a second row by default. When navigation already exposes peer sections, local views can sit beside a stable page title in one row; they never replace that title or its semantic heading.",
+            "The combined local-view presentation joins the page identity and selected subsection in one outlined sheet trigger. The semantic heading remains the page identity, while Back and page actions stay outside the trigger.",
             "Sections represent peer destinations at the current navigation level; subsections represent local views beneath the selected page or detail identity.",
             "Brand tone changes surface and foreground without changing geometry or interaction ownership."
           ],
@@ -5747,6 +6006,10 @@
             "type": "string",
             "required": false
           },
+          "subsectionsPlacement": {
+            "type": "'below' | 'inline' | 'combined'",
+            "required": false
+          },
           "subvalue": {
             "type": "string",
             "required": false
@@ -5791,7 +6054,7 @@
     {
       "name": "mobile-section-switcher",
       "title": "MobileSectionSwitcher",
-      "description": "Controlled mobile section chooser showing the current section, adjacent-position hints, and a complete tap menu.",
+      "description": "Controlled mobile section chooser with a viewport-edge sheet for primary pages and an anchored menu for local views.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -5802,7 +6065,7 @@
         "intent": {
           "audience": "specialized",
           "status": "experimental",
-          "summary": "Controlled mobile section chooser showing the current section, adjacent-position hints, and a complete tap menu.",
+          "summary": "Controlled mobile section chooser with a viewport-edge sheet for primary pages and an anchored menu for local views.",
           "useWhen": [
             "A mobile page or tool header must combine current-page identity with ordered peer-section navigation."
           ],
@@ -5819,13 +6082,16 @@
           "accessibility": [
             "The trigger exposes the current section, popup relationship, and expanded state.",
             "Decorative previous and next position hints are hidden from assistive technology.",
-            "The menu is always available so a future swipe gesture is never the only navigation mechanism.",
+            "The sheet is a native modal top-layer dialog: background content is inert, Escape and backdrop dismiss it, and focus returns to the trigger after exit motion. Arrow keys, Home, End, and initial-letter navigation move among enabled destinations.",
+            "The sheet initially focuses the current enabled destination, uses emphasis for selection, and never adds decorative icons to its rows.",
             "Peer destinations use menuitem semantics with aria-current on the active page; they do not present a radio-control affordance."
           ],
           "states": [
             "Selection is controlled and dsChange reports intent without mutating value.",
             "Dividers group menu items but never participate in previous or next resolution.",
-            "The first and last selectable sections expose only the available neighboring direction."
+            "The anchored local-view menu retains its neighboring-direction hints; the primary-page sheet uses an unfilled perimeter trigger without hints.",
+            "A sheet trigger can combine stable page identity and the current local view, separated by a decorative middle dot. The whole control opens only the supplied local destinations; long page names truncate before crowding out the active view.",
+            "Sheet selection emits navigation intent immediately while exit motion runs independently, so the controlled title can update without waiting for dismissal. Removing the owner or hiding its header closes the top layer without leaving the application blocked."
           ],
           "responsiveBehavior": [
             "Use only in the dedicated mobile header presentation."
@@ -5842,6 +6108,14 @@
             "type": "string",
             "required": false
           },
+          "pageLabel": {
+            "type": "string",
+            "required": false
+          },
+          "presentation": {
+            "type": "'menu' | 'sheet'",
+            "required": false
+          },
           "sections": {
             "type": "TabItem[]",
             "required": false
@@ -5909,7 +6183,10 @@
             "Escape requests dismissal and opening moves focus to the selected or first available area."
           ],
           "states": [
-            "Dashboard and Settings change only the flat destination collection being browsed.",
+            "Dashboard and Settings change only the destination collection being browsed.",
+            "In nested mode, parents with child routes disclose inline without navigating. Only selecting a child emits route intent; parents without children retain direct navigation.",
+            "Nested branches use the same positional divider and staggered child motion as expanded desktop navigation, without adding disclosure chevrons. Dividers separate an expanded branch from its siblings, not from the outside edge of its group.",
+            "Opening the sheet reveals the current route's branch. Collapsed child groups are inert and hidden from assistive technology while the shared navigation motion runs; child targets keep the mobile row density.",
             "Area, Help, and Account events express intent while the application owns navigation and product behavior.",
             "Set routeSelectionActive to false while a global tool owns the mobile stage so the underlying router URL remains available without marking its area current.",
             "Set showAccount to false when account and user preferences already live in the supplied Settings navigation."
@@ -5960,6 +6237,10 @@
             "type": "boolean",
             "required": false
           },
+          "presentation": {
+            "type": "PanelNavPresentation",
+            "required": false
+          },
           "routeSelectionActive": {
             "type": "boolean",
             "required": false
@@ -5989,6 +6270,10 @@
           {
             "name": "dsClose",
             "detail": "void"
+          },
+          {
+            "name": "dsNavChildSelect",
+            "detail": "PanelNavChildSelectDetail"
           }
         ],
         "slots": [],
@@ -8057,8 +8342,9 @@
             "The optional paperTexture property adds a decorative Paper Design texture layer above the gradient or solid chrome frame; its color values are literal shader inputs rather than design tokens.",
             "Dashboard represents day-to-day operational work while Settings represents administrative and configuration work; route state selects the context.",
             "Replace navigation and pageChrome together from one completed route state.",
-            "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.",
+            "When pageChrome.showBack marks a detail depth, mobile chrome combines the page heading and active local subsection in one sheet trigger; peer route tabs remain in desktop BarNav rather than replacing the detail identity.",
             "Route-owned ordered page actions drive both BarTitle and MobileHeader. ShellApp forwards one flat page-action id and owns the derived mobile overflow menu so routes do not duplicate menu state or choices.",
+            "Managed mobile Back and page-action controls use the same large touch density as the mobile navigation header without increasing the shared header height.",
             "Managed ShellApp keeps the selected desktop section-navigation presentation and ShellPage present and owns page header stickiness and the content scroller.",
             "Route-owned pageChrome independently selects ShellPage contentInset, page-header seams, scroll compaction, expanded and compact header-divider visibility, and contentSurface. ShellApp forwards them while resolving whether desktop title geometry is page-local or shell-bar-owned.",
             "The application filters unauthorized destinations, sections, and tools before passing them into shell components."
@@ -8070,9 +8356,9 @@
             "On desktop and tablet, panel section navigation replaces BarNav with compact BarTitle; collapsed PanelNav exposes child sections through its anchored flyout.",
             "When panel section navigation moves BarTitle into the shell bar, routed content starts at the standard 32px desktop or 16px tablet gutter and ShellPage reports no page-local sticky-header height.",
             "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.",
-            "Changing sectionNavigation never changes mobile chrome; the preference may still be edited by an application Settings page.",
+            "The section-navigation preference also selects mobile navigation: bar preserves flat area selection and the header section picker; panel expands child routes inline in MobileSheetNav and combines the page title with any local subsection in one sheet trigger.",
             "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. The sheet exposes the router-derived current area only while the routed area owns the mobile stage, so a global tool never leaves an underlying route highlighted.",
-            "Selecting Help from the managed mobile sheet activates the configured Help tool and promotes Help to the primary mobile destination instead of forwarding it as route navigation.",
+            "Selecting Help from the managed mobile sheet activates the configured Help tool and retains Help as the primary mobile destination across other tool selections until a routed area is selected or navigation changes. This mobile context does not alter desktop or tablet routing.",
             "Set navigation.showMobileAccount to false when the Settings destination collection already includes account and user preferences.",
             "When a suspended mobile document returns to the foreground, ShellApp refreshes the complete stage paint layer without remounting routed content or tool owners.",
             "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.",