@ds-mo/ui 14.21.0 → 14.22.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-27T21:50:42",
+  "timestamp": "2026-08-29T02:43:48",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -3164,6 +3164,47 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "placement",
+          "type": "\"page\" | \"shell-bar\"",
+          "complexType": {
+            "original": "BarTitlePlacement",
+            "resolved": "\"page\" | \"shell-bar\"",
+            "references": {
+              "BarTitlePlacement": {
+                "location": "import",
+                "path": "./bar-title-types",
+                "id": "src/wc/components/BarTitle/bar-title-types.ts::BarTitlePlacement",
+                "referenceLocation": "BarTitlePlacement"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "placement",
+          "reflectToAttr": true,
+          "docs": "Page-header placement, or compact application-shell bar placement.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'page'"
+            }
+          ],
+          "default": "'page'",
+          "values": [
+            {
+              "value": "page",
+              "type": "string"
+            },
+            {
+              "value": "shell-bar",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "primaryAction",
           "type": "BarTitlePrimaryAction | null",
@@ -13357,6 +13398,7 @@
         "ds-bar-nav",
         "ds-bar-title",
         "ds-mobile-section-switcher",
+        "ds-panel-nav",
         "ds-table",
         "ds-table-saved-views",
         "ds-table-sort"
@@ -13394,6 +13436,9 @@
         "ds-mobile-section-switcher": [
           "ds-menu"
         ],
+        "ds-panel-nav": [
+          "ds-menu"
+        ],
         "ds-table": [
           "ds-menu"
         ],
@@ -17312,6 +17357,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "activeChildId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "active-child-id",
+          "reflectToAttr": false,
+          "docs": "ID of the active child route when URL matching is unavailable.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "''"
+            }
+          ],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "activeId",
           "type": "string",
@@ -17682,6 +17756,47 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "presentation",
+          "type": "\"flat\" | \"nested\"",
+          "complexType": {
+            "original": "PanelNavPresentation",
+            "resolved": "\"flat\" | \"nested\"",
+            "references": {
+              "PanelNavPresentation": {
+                "location": "import",
+                "path": "./panel-nav-types",
+                "id": "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavPresentation",
+                "referenceLocation": "PanelNavPresentation"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "presentation",
+          "reflectToAttr": true,
+          "docs": "Flat primary destinations, or nested child-route disclosure.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'flat'"
+            }
+          ],
+          "default": "'flat'",
+          "values": [
+            {
+              "value": "flat",
+              "type": "string"
+            },
+            {
+              "value": "nested",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "routerMode",
           "type": "\"anchor\" | \"event\"",
@@ -17936,6 +18051,27 @@
           "docs": "Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion.",
           "docsTags": []
         },
+        {
+          "event": "dsNavChildSelect",
+          "detail": "PanelNavChildSelectDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "PanelNavChildSelectDetail",
+            "resolved": "PanelNavChildSelectDetail",
+            "references": {
+              "PanelNavChildSelectDetail": {
+                "location": "import",
+                "path": "./panel-nav-types",
+                "id": "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavChildSelectDetail",
+                "referenceLocation": "PanelNavChildSelectDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when a nested child route is selected.",
+          "docsTags": []
+        },
         {
           "event": "dsNavFooterAction",
           "detail": "void",
@@ -18013,7 +18149,8 @@
         "ds-button-unfilled",
         "ds-text",
         "ds-icon",
-        "ds-badge"
+        "ds-badge",
+        "ds-menu"
       ],
       "dependencyGraph": {
         "ds-panel-nav": [
@@ -18021,7 +18158,8 @@
           "ds-button-unfilled",
           "ds-text",
           "ds-icon",
-          "ds-badge"
+          "ds-badge",
+          "ds-menu"
         ],
         "ds-tooltip": [
           "ds-text"
@@ -18036,6 +18174,18 @@
         "ds-badge": [
           "ds-text"
         ],
+        "ds-menu": [
+          "ds-text",
+          "ds-swatch-picker",
+          "ds-icon",
+          "ds-tag",
+          "ds-badge",
+          "ds-switch"
+        ],
+        "ds-tag": [
+          "ds-icon",
+          "ds-text"
+        ],
         "ds-shell-app": [
           "ds-panel-nav"
         ]
@@ -22127,6 +22277,47 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "sectionNavigation",
+          "type": "\"bar\" | \"panel\"",
+          "complexType": {
+            "original": "ShellSectionNavigation",
+            "resolved": "\"bar\" | \"panel\"",
+            "references": {
+              "ShellSectionNavigation": {
+                "location": "import",
+                "path": "./shell-app-types",
+                "id": "src/wc/components/ShellApp/shell-app-types.ts::ShellSectionNavigation",
+                "referenceLocation": "ShellSectionNavigation"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "section-navigation",
+          "reflectToAttr": true,
+          "docs": "Desktop/tablet route sections in BarNav, or nested beneath PanelNav parents.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'bar'"
+            }
+          ],
+          "default": "'bar'",
+          "values": [
+            {
+              "value": "bar",
+              "type": "string"
+            },
+            {
+              "value": "panel",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "shortcutsEnabled",
           "type": "boolean",
@@ -22383,6 +22574,27 @@
           "docs": "Managed tool-header Back intent.",
           "docsTags": []
         },
+        {
+          "event": "dsNavChildSelect",
+          "detail": "PanelNavChildSelectDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "PanelNavChildSelectDetail",
+            "resolved": "PanelNavChildSelectDetail",
+            "references": {
+              "PanelNavChildSelectDetail": {
+                "location": "import",
+                "path": "../PanelNav/panel-nav-types",
+                "id": "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavChildSelectDetail",
+                "referenceLocation": "PanelNavChildSelectDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Managed nested PanelNav child-route intent.",
+          "docsTags": []
+        },
         {
           "event": "dsNavFooterAction",
           "detail": "void",
@@ -22577,8 +22789,8 @@
         "ds-mobile-bar-nav",
         "ds-tooltip",
         "ds-button-unfilled",
-        "ds-shell-page",
         "ds-bar-title",
+        "ds-shell-page",
         "ds-mobile-header"
       ],
       "dependencyGraph": {
@@ -22591,8 +22803,8 @@
           "ds-mobile-bar-nav",
           "ds-tooltip",
           "ds-button-unfilled",
-          "ds-shell-page",
           "ds-bar-title",
+          "ds-shell-page",
           "ds-mobile-header"
         ],
         "ds-panel-nav": [
@@ -22600,7 +22812,8 @@
           "ds-button-unfilled",
           "ds-text",
           "ds-icon",
-          "ds-badge"
+          "ds-badge",
+          "ds-menu"
         ],
         "ds-tooltip": [
           "ds-text"
@@ -22615,12 +22828,6 @@
         "ds-badge": [
           "ds-text"
         ],
-        "ds-bar-nav": [
-          "ds-text",
-          "ds-badge",
-          "ds-button-unfilled",
-          "ds-menu"
-        ],
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
@@ -22633,6 +22840,12 @@
           "ds-icon",
           "ds-text"
         ],
+        "ds-bar-nav": [
+          "ds-text",
+          "ds-badge",
+          "ds-button-unfilled",
+          "ds-menu"
+        ],
         "ds-shell-tools": [
           "ds-panel-tools",
           "ds-mobile-header",
@@ -22878,6 +23091,47 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "desktopHeaderPlacement",
+          "type": "\"page\" | \"shell-bar\"",
+          "complexType": {
+            "original": "ShellPageDesktopHeaderPlacement",
+            "resolved": "\"page\" | \"shell-bar\"",
+            "references": {
+              "ShellPageDesktopHeaderPlacement": {
+                "location": "import",
+                "path": "./shell-page-types",
+                "id": "src/wc/components/ShellPage/shell-page-types.ts::ShellPageDesktopHeaderPlacement",
+                "referenceLocation": "ShellPageDesktopHeaderPlacement"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "desktop-header-placement",
+          "reflectToAttr": true,
+          "docs": "Desktop title chrome is rendered in this page or externally in the shell bar.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'page'"
+            }
+          ],
+          "default": "'page'",
+          "values": [
+            {
+              "value": "page",
+              "type": "string"
+            },
+            {
+              "value": "shell-bar",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "headerCapacity",
           "type": "\"compact\" | \"constrained\" | \"roomy\" | undefined",
@@ -33323,6 +33577,11 @@
       "docstring": "",
       "path": "src/wc/components/BarTitle/bar-title-types.ts"
     },
+    "src/wc/components/BarTitle/bar-title-types.ts::BarTitlePlacement": {
+      "declaration": "export type BarTitlePlacement = 'page' | 'shell-bar';",
+      "docstring": "",
+      "path": "src/wc/components/BarTitle/bar-title-types.ts"
+    },
     "src/wc/components/Breadcrumb/breadcrumb-types.ts::BreadcrumbSelectDetail": {
       "declaration": "export interface BreadcrumbSelectDetail {\n  item: BreadcrumbItem;\n  originalEvent: MouseEvent;\n}",
       "docstring": "",
@@ -33409,7 +33668,7 @@
       "path": "src/wc/shell/shell-responsive.ts"
     },
     "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavItem": {
-      "declaration": "export interface PanelNavItem {\n  id: string;\n  icon: string;\n  label: string;\n  /** Show a notification dot badge on the item */\n  dot?: boolean;\n  /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.\n   *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */\n  href?: string;\n}",
+      "declaration": "export interface PanelNavItem {\n  id: string;\n  icon: string;\n  label: string;\n  /** Show a notification dot badge on the item */\n  dot?: boolean;\n  /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.\n   *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */\n  href?: string;\n  /** Optional route sections. Parents with children resolve through a child, not their own href. */\n  children?: PanelNavChildItem[];\n}",
       "docstring": "",
       "path": "src/wc/components/PanelNav/panel-nav-types.ts"
     },
@@ -33453,11 +33712,21 @@
       "docstring": "Complete next controlled state emitted for a page or page-size request.",
       "path": "src/wc/components/Pagination/pagination-types.ts"
     },
+    "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavPresentation": {
+      "declaration": "export type PanelNavPresentation = 'flat' | 'nested';",
+      "docstring": "",
+      "path": "src/wc/components/PanelNav/panel-nav-types.ts"
+    },
     "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavRouterMode": {
       "declaration": "export type PanelNavRouterMode = 'anchor' | 'event';",
       "docstring": "",
       "path": "src/wc/components/PanelNav/panel-nav-types.ts"
     },
+    "src/wc/components/PanelNav/panel-nav-types.ts::PanelNavChildSelectDetail": {
+      "declaration": "export interface PanelNavChildSelectDetail {\n  parentId: string;\n  childId: string;\n  href?: string;\n}",
+      "docstring": "Navigation intent for a child route rendered inline or in the collapsed flyout.",
+      "path": "src/wc/components/PanelNav/panel-nav-types.ts"
+    },
     "src/wc/shell/chrome-transition.ts::ChromeTransitionDetail": {
       "declaration": "export interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\n  /** Panel-tools drawer motion direction; omitted for panel-nav. */\n  phase?: 'opening' | 'closing';\n}",
       "docstring": "",
@@ -33513,6 +33782,11 @@
       "docstring": "Router-owned application navigation supplied to managed ShellApp.\nShellApp renders the responsive chrome but never performs route changes.",
       "path": "src/wc/components/ShellApp/shell-app-types.ts"
     },
+    "src/wc/components/ShellApp/shell-app-types.ts::ShellSectionNavigation": {
+      "declaration": "export type ShellSectionNavigation = 'bar' | 'panel';",
+      "docstring": "",
+      "path": "src/wc/components/ShellApp/shell-app-types.ts"
+    },
     "src/wc/components/ShellApp/shell-app-types.ts::ShellPageChromeConfig": {
       "declaration": "export interface ShellPageChromeConfig {\n  heading?: string;\n  /** Desktop/tablet route-navigation heading when it differs from the page h1. */\n  routeHeading?: string;\n  description?: string;\n  headingLevel?: 'h1' | 'h2';\n  tabs?: BarNavTab[];\n  value?: string;\n  basePath?: string;\n  currentUrl?: string;\n  sectionsAriaLabel?: string;\n  subsections?: BarNavTab[];\n  subvalue?: string;\n  subsectionsAriaLabel?: string;\n  showBack?: boolean;\n  backAriaLabel?: string;\n  backIcon?: string;\n  backLabel?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  breadcrumbAriaLabel?: string;\n  primaryAction?: BarTitlePrimaryAction | null;\n  actions?: BarTitleActionItem[];\n  /** Icon actions rendered in the mobile header's trailing lane. */\n  mobileActions?: PanelToolsHeaderAction[];\n  actionsAriaLabel?: string;\n  tone?: MobileHeaderTone;\n  contentInset?: ShellPageContentInset;\n  /** Remove only the content gutter adjacent to the page header. */\n  contentInsetBlockStart?: ShellPageContentInset;\n  /** Exact roomy block-start content inset when the responsive default is not appropriate. */\n  contentInsetBlockStartSize?: string;\n  /** Exact block-start content inset while page-title capacity is compact or constrained. */\n  compactContentInsetBlockStartSize?: string;\n  /** Allow a roomy page title to compact in response to page scrolling. */\n  scrollCompaction?: boolean;\n  /** Draw the divider beneath the desktop/tablet page title. */\n  showHeaderDivider?: boolean;\n  /** Override divider visibility while the page title is compact or constrained. */\n  showCompactHeaderDivider?: boolean;\n  /** Canvas surface painted by ShellPage around and beneath routed content. */\n  contentSurface?: ShellPageContentSurface;\n}",
       "docstring": "Route-owned page chrome. The same data drives desktop BarNav/BarTitle and\nthe intentionally different mobile MobileHeader presentation.",
@@ -33538,6 +33812,11 @@
       "docstring": "",
       "path": "src/wc/components/ShellPage/shell-page-types.ts"
     },
+    "src/wc/components/ShellPage/shell-page-types.ts::ShellPageDesktopHeaderPlacement": {
+      "declaration": "export type ShellPageDesktopHeaderPlacement = 'page' | 'shell-bar';",
+      "docstring": "",
+      "path": "src/wc/components/ShellPage/shell-page-types.ts"
+    },
     "src/wc/components/ShellPage/shell-page-types.ts::ShellPageContentInset": {
       "declaration": "export type ShellPageContentInset = 'default' | 'none';",
       "docstring": "",

package/dist/lib/components/BarTitle/bar-title-types.d.ts

@@ -24,5 +24,6 @@ export interface BarTitlePrimaryAction extends BarTitleAction {
 }
 export type BarTitleActionItem = BarTitleAction | BarTitleDivider;
 export type BarTitleVariant = 'expanded' | 'compact' | 'constrained';
+export type BarTitlePlacement = 'page' | 'shell-bar';
 export type BarTitlePrimaryActionCollapse = 'auto' | 'never';
 export declare function isBarTitleDivider(item: BarTitleSectionItem | BarTitleActionItem): item is BarTitleDivider;

package/dist/lib/components/Menu/menu-placement.d.ts

@@ -24,6 +24,19 @@ export declare const PANEL_NAV_USER_MENU_PLACEMENT: {
     readonly sideOffset: "calc(var(--dimension-space-100) + var(--dimension-space-050))";
     readonly alignOffset: 0;
 };
+/**
+ * Canonical placement for PanelNav's collapsed child-route flyout.
+ * The parent control is 8px inside the panel edge, so a 12px side offset leaves
+ * a 4px visual gap outside the panel. Start choice-cell alignment places the
+ * first flyout row on the same block axis as its parent control.
+ */
+export declare const PANEL_NAV_CHILD_MENU_PLACEMENT: {
+    readonly side: "right";
+    readonly align: "start";
+    readonly anchorAlignment: "choice-cell";
+    readonly sideOffset: "calc(var(--dimension-space-100) + var(--dimension-space-050))";
+    readonly alignOffset: 0;
+};
 /**
  * Canonical placement for a menu opened by a PanelTools header action.
  * Matches BarNav overflow: the 32px trigger is 8px inside the 48px header, so

package/dist/lib/components/PanelNav/panel-nav-types.d.ts

@@ -3,6 +3,17 @@ import { PANEL_NAV_USER_MENU_PLACEMENT } from '../Menu/menu-placement';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
 export type { NavChromeStyle };
 export type PanelNavRouterMode = 'anchor' | 'event';
+export type PanelNavPresentation = 'flat' | 'nested';
+export interface PanelNavChildItem {
+    id: string;
+    label: string;
+    /** Show a notification dot badge on the child route. */
+    dot?: boolean;
+    /** Prevent activation while keeping the route visible. */
+    isInactive?: boolean;
+    /** Route path used for URL matching and native anchor navigation. */
+    href?: string;
+}
 export interface PanelNavItem {
     id: string;
     icon: string;
@@ -12,6 +23,8 @@ export interface PanelNavItem {
     /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.
      *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */
     href?: string;
+    /** Optional route sections. Parents with children resolve through a child, not their own href. */
+    children?: PanelNavChildItem[];
 }
 export interface PanelNavGroup {
     id?: string;
@@ -26,4 +39,10 @@ export interface PanelNavUserActionDetail {
     /** Recommended `ds-menu` placement — spread onto external user menu instance. */
     menuPlacement: MenuPlacement;
 }
+/** Navigation intent for a child route rendered inline or in the collapsed flyout. */
+export interface PanelNavChildSelectDetail {
+    parentId: string;
+    childId: string;
+    href?: string;
+}
 export { PANEL_NAV_USER_MENU_PLACEMENT };

package/dist/lib/components/ShellApp/shell-app-types.d.ts

@@ -7,6 +7,7 @@ import type { PanelToolsHeaders, PanelToolsHeaderAction, PanelToolsItem } from '
 import type { NavChromeStyle } from '../../shell/nav-chrome';
 import type { ShellPageContentInset, ShellPageContentSurface } from '../ShellPage/shell-page-types';
 export type ShellAppComposition = 'managed' | 'slotted';
+export type ShellSectionNavigation = 'bar' | 'panel';
 /**
  * Router-owned application navigation supplied to managed ShellApp.
  * ShellApp renders the responsive chrome but never performs route changes.

package/dist/lib/components/ShellPage/shell-page-types.d.ts

@@ -1,5 +1,6 @@
 import type { BarTitleVariant } from '../BarTitle/bar-title-types';
 export type ShellPageHeaderPresentation = 'auto' | BarTitleVariant;
+export type ShellPageDesktopHeaderPlacement = 'page' | 'shell-bar';
 export type ShellPageContentInset = 'default' | 'none';
 export type ShellPageContentSurface = 'primary' | 'secondary';
 export type ShellPageCapacity = 'roomy' | 'compact' | 'constrained';

package/dist/lib/shell/index.d.ts

@@ -1,8 +1,8 @@
 export type { NavChromeStyle } from './nav-chrome';
-export type { PanelNavGroup, PanelNavItem } from '../components/PanelNav/panel-nav-types';
+export type { PanelNavChildItem, PanelNavChildSelectDetail, PanelNavGroup, PanelNavItem, PanelNavPresentation, } from '../components/PanelNav/panel-nav-types';
 export type { BarNavTab } from '../components/BarNav/bar-nav-types';
-export type { ShellPageContentInset, ShellPageContentSurface, } from '../components/ShellPage/shell-page-types';
-export type { ShellAppComposition, ShellNavigationConfig, ShellNavigationSelectDetail, ShellPageChromeConfig, ShellToolsConfig, } from '../components/ShellApp/shell-app-types';
+export type { ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, } from '../components/ShellPage/shell-page-types';
+export type { ShellAppComposition, ShellNavigationConfig, ShellNavigationSelectDetail, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig, } from '../components/ShellApp/shell-app-types';
 export type { PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolHeaderActionDetail, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId, } from '../components/PanelTools/panel-tools-types';
 export { PANEL_TOOLS_DEFAULT_ITEMS } from '../components/PanelTools/panel-tools-types';
 export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, } from './nav-chrome';