@ds-mo/ui 14.21.0 → 14.22.1

package/dist/types/components/PanelNav/PanelNav.d.ts

@@ -1,8 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { ChromeTransitionDetail } from '../../shell/chrome-transition';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
-import { type PanelNavGroup, type PanelNavRouterMode, type PanelNavUserActionDetail } from './panel-nav-types';
+import { type PanelNavChildSelectDetail, type PanelNavGroup, type PanelNavPresentation, type PanelNavRouterMode, type PanelNavUserActionDetail } from './panel-nav-types';
 export declare class PanelNav {
+    private readonly instanceId;
     /** Style slot: `dashboard` or `settings`. Colors match for now;
      *  class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`. */
     navStyle: NavChromeStyle;
@@ -10,12 +11,16 @@ export declare class PanelNav {
     disableViewTransition: boolean;
     /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */
     groups: string | PanelNavGroup[];
+    /** Flat primary destinations, or nested child-route disclosure. */
+    presentation: PanelNavPresentation;
     /** How items with `href` render:
      *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.
      *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */
     routerMode: PanelNavRouterMode;
     /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */
     activeId: string;
+    /** ID of the active child route when URL matching is unavailable. */
+    activeChildId: string;
     /** Whether the nav is in collapsed (icon-only) state.
      *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */
     collapsed: boolean;
@@ -45,6 +50,8 @@ export declare class PanelNav {
     navigationItemsLabel: string;
     /** Emitted when a nav item is clicked. Detail = the item's `id`. */
     dsNavSelect: EventEmitter<string>;
+    /** Emitted when a nested child route is selected. */
+    dsNavChildSelect: EventEmitter<PanelNavChildSelectDetail>;
     /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */
     dsNavToggle: EventEmitter<boolean>;
     /** Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion. */
@@ -61,7 +68,12 @@ export declare class PanelNav {
     private rovingIndex;
     private viewportNarrow;
     private urlDerivedActiveId;
+    private urlDerivedActiveChildId;
     private bodyScrollable;
+    private expandedParentId;
+    private flyoutParentId;
+    private flyoutOpen;
+    private flyoutInitialFocusVisible;
     private transitionCompletionHandler?;
     private transitionFallbackTimer;
     private resizeObserver?;
@@ -80,11 +92,14 @@ export declare class PanelNav {
     /** The ID that should be treated as active. `currentUrl` matching takes precedence
      *  over `activeId` when both are present. */
     private get effectiveActiveId();
+    private get effectiveActiveChildId();
+    private get collapsedPresentation();
     private get effectiveDisableViewTransition();
     onCollapsedChange(_next: boolean, prev: boolean | undefined): void;
     onViewportNarrowChange(next: boolean, prev: boolean | undefined): void;
     onBreakpointChange(): void;
     onGroupsChange(val: string | PanelNavGroup[]): void;
+    onPresentationChange(): void;
     onActiveIdChange(): void;
     onCurrentUrlChange(): void;
     onNavStyleChange(newVal: NavChromeStyle): void;
@@ -105,6 +120,7 @@ export declare class PanelNav {
     /** Derive active ID from the current URL by matching item `href` values.
      *  Uses longest segment-boundary prefix match. */
     private syncActiveFromUrl;
+    private syncExpandedParent;
     /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */
     private syncHostPropsIfNeeded;
     /** Poll across animation frames — host props may land without triggering @Watch. */
@@ -112,6 +128,7 @@ export declare class PanelNav {
     /** Centralised toggle: updates the desktop preference unless breakpoint-locked. */
     private applyToggle;
     private getAllItems;
+    private getVisibleRovingEntries;
     private getFirstRovingIndex;
     private getFooterRovingIndex;
     private getUserRovingIndex;
@@ -120,6 +137,14 @@ export declare class PanelNav {
     private activateRovingIndex;
     private handleRovingKeyDown;
     private handleItemClick;
+    private emitChildSelect;
+    private followFlyoutAnchor;
+    private activateParent;
+    private parentAnchorId;
+    private childListId;
+    private closeFlyout;
+    private handleFlyoutAfterClose;
+    private handleFlyoutSelect;
     private handleToggle;
     /** Toggle the desktop preference. No-op while the breakpoint locks the panel collapsed. */
     toggleCollapsed(): Promise<void>;
@@ -131,7 +156,9 @@ export declare class PanelNav {
     private handleResizeHandleMouseDown;
     private renderFooterAction;
     private renderFooterUser;
-    private renderNavItem;
+    private renderParentItem;
+    private renderChildItem;
+    private renderFlyout;
     render(): any;
 }
 //# sourceMappingURL=PanelNav.d.ts.map

package/dist/types/components/PanelNav/index.d.ts

@@ -1,5 +1,5 @@
-export type { PanelNavRouterMode, PanelNavItem, PanelNavGroup, PanelNavUserActionDetail, } from './panel-nav-types';
+export type { PanelNavRouterMode, PanelNavChildItem, PanelNavChildSelectDetail, PanelNavItem, PanelNavPresentation, PanelNavGroup, PanelNavUserActionDetail, } from './panel-nav-types';
 export { PANEL_NAV_USER_MENU_ANCHOR_ID, PANEL_NAV_USER_MENU_PLACEMENT } from './panel-nav-types';
 export type { NavChromeStyle } from '../../shell/nav-chrome';
-export { NAV_STYLE_HINT_ATTR, setNavStyleHint, clearNavStyleHint, resolvePanelNavStyle, shouldResyncPanelNavStyle, deriveActiveIdFromUrl, parsePanelNavGroups, } from './panel-nav-utils';
+export { NAV_STYLE_HINT_ATTR, setNavStyleHint, clearNavStyleHint, resolvePanelNavStyle, shouldResyncPanelNavStyle, deriveActiveIdFromUrl, derivePanelNavSelectionFromUrl, firstEnabledPanelNavChild, parsePanelNavGroups, } from './panel-nav-utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/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,5 +39,11 @@ 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 };
 //# sourceMappingURL=panel-nav-types.d.ts.map

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

@@ -1,10 +1,18 @@
-import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';
+import type { PanelNavChildItem, PanelNavGroup, PanelNavItem } from './panel-nav-types';
 import { NAV_STYLE_HINT_ATTR, clearNavStyleHint, readNavStyleAttr, resolveNavChromeStyle, setNavStyleHint, shouldResyncNavChromeStyle } from '../../shell/nav-chrome';
 export type { NavChromeStyle } from '../../shell/nav-chrome';
 export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle as resolvePanelNavStyle, shouldResyncNavChromeStyle as shouldResyncPanelNavStyle, };
 /** Whether `path` matches `href` at a segment boundary (exact or child path). */
 export declare function hrefMatchesPath(path: string, href: string): boolean;
-/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */
+export interface PanelNavSelection {
+    parentId: string;
+    childId: string;
+}
+/** First child that can receive navigation intent. */
+export declare function firstEnabledPanelNavChild(children: PanelNavChildItem[] | undefined): PanelNavChildItem | undefined;
+/** Derive active parent and child ids using longest segment-boundary URL matching. */
+export declare function derivePanelNavSelectionFromUrl(path: string, items: PanelNavItem[]): PanelNavSelection;
+/** Derive the active top-level nav item id from a URL. */
 export declare function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string;
 /** Total nav item count across all groups. */
 export declare function countPanelNavItems(groups: PanelNavGroup[]): number;

package/dist/types/components/ShellApp/ShellApp.d.ts

@@ -4,8 +4,9 @@ import type { PanelToolsToolId } from '../PanelTools/panel-tools-types';
 import type { BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';
 import { type ShellGradientPreset } from '../../shell/shell-gradient-presets';
 import { type MobileDestination, type ShellResponsiveMode } from '../../shell/shell-responsive';
+import type { PanelNavChildSelectDetail } from '../PanelNav/panel-nav-types';
 import type { PanelNavUserActionDetail } from '../PanelNav/panel-nav-types';
-import type { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellToolsConfig } from './shell-app-types';
+import type { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig } from './shell-app-types';
 import type { PaperTextureConfig } from '../PaperTexture/paper-texture-types';
 export declare class ShellApp {
     private static readonly FOREGROUND_REFRESH_MS;
@@ -13,6 +14,8 @@ export declare class ShellApp {
     composition: ShellAppComposition;
     /** Router-owned navigation data used by managed composition. */
     navigation: ShellNavigationConfig;
+    /** Desktop/tablet route sections in BarNav, or nested beneath PanelNav parents. */
+    sectionNavigation: ShellSectionNavigation;
     /** Route-owned page title and section data used by managed composition. */
     pageChrome: ShellPageChromeConfig;
     /** Product-owned global tool definitions used by managed composition. */
@@ -40,6 +43,8 @@ export declare class ShellApp {
     dsNavSelect: EventEmitter<string>;
     /** Managed desktop BarNav or mobile section-selection intent. */
     dsTabChange: EventEmitter<string>;
+    /** Managed nested PanelNav child-route intent. */
+    dsNavChildSelect: EventEmitter<PanelNavChildSelectDetail>;
     /** Managed page-subsection intent from BarTitle or MobileHeader. */
     dsSubsectionChange: EventEmitter<string>;
     /** Managed page-level Back intent. */
@@ -97,6 +102,7 @@ export declare class ShellApp {
     private get effectiveMobileSheetNavOpen();
     private get resolvedNavigationGroups();
     private get resolvedToolItems();
+    private get resolvedPageTabs();
     private get availableInboxTools();
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -143,6 +149,7 @@ export declare class ShellApp {
     /** Request drawer or fullscreen presentation for the active managed tool. */
     setToolPresentation(presentation: 'drawer' | 'fullscreen'): Promise<void>;
     private handleManagedNavSelect;
+    private handleManagedNavChildSelect;
     private handleManagedTabChange;
     private handleManagedPageBack;
     private handleManagedBreadcrumbSelect;
@@ -167,12 +174,15 @@ export declare class ShellApp {
     private renderPaperTexture;
     private renderManagedPanelNav;
     private renderManagedBarNav;
+    private renderManagedTopBar;
     private renderManagedToolSlots;
     private renderManagedTools;
     private renderManagedMobileSheetNav;
     private renderManagedMobileBarNav;
     private renderManagedMobileLeading;
     private renderManagedMobileActions;
+    private get barTitleSections();
+    private renderManagedBarTitle;
     private renderManagedPage;
     private renderSlottedShell;
     render(): any;

package/dist/types/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/types/components/ShellPage/ShellPage.d.ts

@@ -1,5 +1,5 @@
 import type { ShellResponsiveMode } from '../../shell/shell-responsive';
-import type { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation } from './shell-page-types';
+import type { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, ShellPageHeaderPresentation } from './shell-page-types';
 export declare class ShellPage {
     private static readonly MAX_HEADER_REVEAL_FRAMES;
     private static readonly MAX_HEADER_GEOMETRY_FRAMES;
@@ -8,6 +8,8 @@ export declare class ShellPage {
     headerPresentation: ShellPageHeaderPresentation;
     /** Available page-header capacity supplied by the owning application shell. */
     headerCapacity?: ShellPageCapacity;
+    /** Desktop title chrome is rendered in this page or externally in the shell bar. */
+    desktopHeaderPlacement: ShellPageDesktopHeaderPlacement;
     /** Standard page gutters, or no inset for full-bleed page content. */
     contentInset: ShellPageContentInset;
     /** Preserve the responsive side/end gutters while allowing content to meet the header. */
@@ -40,12 +42,15 @@ export declare class ShellPage {
     private hasLoaded;
     handleHeaderContractChange(): void;
     handleResponsiveModeChange(): void;
+    handleDesktopHeaderPlacementChange(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private connectRuntime;
     private get effectiveVariant();
+    private get desktopHeaderExternal();
+    private get effectiveScrollCompaction();
     private get headerContractResolved();
     private get isScrollCompacted();
     private get contentInsetStyles();

package/dist/types/components/ShellPage/index.d.ts

@@ -1,3 +1,3 @@
 export { ShellPage } from './ShellPage';
-export type { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation, } from './shell-page-types';
+export type { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, ShellPageHeaderPresentation, } from './shell-page-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/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/types/components/Table/Table.d.ts

@@ -163,6 +163,7 @@ export declare class Table {
     private readonly groupSentinelEls;
     private previousModelWarning;
     private modelWarningQueued;
+    private initialModelWarningFrame;
     private hasLoaded;
     private renderedModel;
     private stickyGroupConnected;
@@ -195,6 +196,7 @@ export declare class Table {
     handleStructureChange(): void;
     handleDataChange(): void;
     handleTotalCountChange(): void;
+    handleCaptionChange(): void;
     handleLoadIdentityChange(): void;
     handleVirtualIndexReset(): void;
     handleLazyConfigurationChange(): void;
@@ -239,6 +241,7 @@ export declare class Table {
     private get resolvedHeight();
     private warnModelIssues;
     private scheduleModelIssueWarning;
+    private scheduleInitialModelIssueWarning;
     private emitSort;
     private sortButtonLabel;
     private emitRowSelection;

package/dist/types/components.d.ts

@@ -13,7 +13,7 @@ import { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } f
 import { NavChromeStyle } from "./shell/nav-chrome";
 import { BarNavTab } from "./components/BarNav/bar-nav-types";
 import { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
-import { BarTitleActionItem, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
+import { BarTitleActionItem, BarTitlePlacement, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
 import { BarWorkflowStep, BarWorkflowSubmitAction } from "./components/BarWorkflow/bar-workflow-types";
 import { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
 import { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledPopup, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
@@ -41,7 +41,7 @@ import { MenuSelectionMode, MenuSize } from "./components/Menu/Menu";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { MessageBubbleVariant } from "./components/MessageBubble/MessageBubble";
 import { ButtonFilledIntent as ButtonFilledIntent1 } from "./components/ButtonFilled/ButtonFilled";
-import { PanelNavGroup, PanelNavItem, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
+import { PanelNavChildSelectDetail, PanelNavGroup, PanelNavItem, PanelNavPresentation, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 import { MobileBarNavDestinationDetail } from "./components/MobileBarNav/mobile-bar-nav-types";
 import { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeaderTone } from "./components/MobileHeader/mobile-header-types";
 import { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
@@ -56,9 +56,9 @@ import { PaperTextureConfig } from "./components/PaperTexture/paper-texture-type
 import { RadioOption, RadioSize } from "./components/Radio/Radio";
 import { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
 import { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectOptionSubtextActionDetail, SelectPopupAlign, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
-import { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
+import { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
 import { ShellGradientPreset } from "./shell/shell-gradient-presets";
-import { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
+import { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
 import { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
@@ -83,7 +83,7 @@ export { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } f
 export { NavChromeStyle } from "./shell/nav-chrome";
 export { BarNavTab } from "./components/BarNav/bar-nav-types";
 export { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
-export { BarTitleActionItem, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
+export { BarTitleActionItem, BarTitlePlacement, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
 export { BarWorkflowStep, BarWorkflowSubmitAction } from "./components/BarWorkflow/bar-workflow-types";
 export { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
 export { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledPopup, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
@@ -111,7 +111,7 @@ export { MenuSelectionMode, MenuSize } from "./components/Menu/Menu";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { MessageBubbleVariant } from "./components/MessageBubble/MessageBubble";
 export { ButtonFilledIntent as ButtonFilledIntent1 } from "./components/ButtonFilled/ButtonFilled";
-export { PanelNavGroup, PanelNavItem, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
+export { PanelNavChildSelectDetail, PanelNavGroup, PanelNavItem, PanelNavPresentation, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 export { MobileBarNavDestinationDetail } from "./components/MobileBarNav/mobile-bar-nav-types";
 export { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeaderTone } from "./components/MobileHeader/mobile-header-types";
 export { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
@@ -126,9 +126,9 @@ export { PaperTextureConfig } from "./components/PaperTexture/paper-texture-type
 export { RadioOption, RadioSize } from "./components/Radio/Radio";
 export { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
 export { SelectBackground, SelectIndicator, SelectOption, SelectOptionActionDetail, SelectOptionSubtextActionDetail, SelectPopupAlign, SelectSection, SelectSize, SelectValue, SelectWidth } from "./components/Select/Select";
-export { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
+export { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
 export { ShellGradientPreset } from "./shell/shell-gradient-presets";
-export { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
+export { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
 export { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
@@ -459,6 +459,11 @@ export namespace Components {
           * The page's single visible h1.
          */
         "heading": string;
+        /**
+          * Page-header placement, or compact application-shell bar placement.
+          * @default 'page'
+         */
+        "placement": BarTitlePlacement;
         /**
           * The one highest-emphasis page action.
           * @default null
@@ -2014,6 +2019,11 @@ export namespace Components {
           * @default false
          */
         "accountMenuExpanded": boolean;
+        /**
+          * ID of the active child route when URL matching is unavailable.
+          * @default ''
+         */
+        "activeChildId": string;
         /**
           * ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set.
           * @default ''
@@ -2070,6 +2080,11 @@ export namespace Components {
           * @default 'Navigation items'
          */
         "navigationItemsLabel": string;
+        /**
+          * Flat primary destinations, or nested child-route disclosure.
+          * @default 'flat'
+         */
+        "presentation": PanelNavPresentation;
         /**
           * How items with `href` render: - `anchor` (default): native `<a href>` — works with routers that intercept anchors. - `event`: always `<button>`; host handles navigation via `dsNavSelect`.
           * @default 'anchor'
@@ -2614,6 +2629,11 @@ export namespace Components {
           * Optional decorative Paper Design texture layered above the shell wash.
          */
         "paperTexture"?: PaperTextureConfig;
+        /**
+          * Desktop/tablet route sections in BarNav, or nested beneath PanelNav parents.
+          * @default 'bar'
+         */
+        "sectionNavigation": ShellSectionNavigation;
         /**
           * Request drawer or fullscreen presentation for the active managed tool.
          */
@@ -2653,6 +2673,11 @@ export namespace Components {
           * @default 'primary'
          */
         "contentSurface": ShellPageContentSurface;
+        /**
+          * Desktop title chrome is rendered in this page or externally in the shell bar.
+          * @default 'page'
+         */
+        "desktopHeaderPlacement": ShellPageDesktopHeaderPlacement;
         /**
           * Available page-header capacity supplied by the owning application shell.
          */
@@ -4608,6 +4633,7 @@ declare global {
     };
     interface HTMLDsPanelNavElementEventMap {
         "dsNavSelect": string;
+        "dsNavChildSelect": PanelNavChildSelectDetail;
         "dsNavToggle": boolean;
         "dsChromeTransitionStart": ChromeTransitionDetail;
         "dsChromeTransitionEnd": ChromeTransitionDetail;
@@ -4778,6 +4804,7 @@ declare global {
         "dsResponsiveModeChange": { mode: ShellResponsiveMode };
         "dsNavSelect": string;
         "dsTabChange": string;
+        "dsNavChildSelect": PanelNavChildSelectDetail;
         "dsSubsectionChange": string;
         "dsPageBack": MouseEvent;
         "dsBreadcrumbSelect": BreadcrumbSelectDetail;
@@ -5558,6 +5585,11 @@ declare namespace LocalJSX {
           * Emitted with the newly selected page-section id.
          */
         "onDsSectionChange"?: (event: DsBarTitleCustomEvent<string>) => void;
+        /**
+          * Page-header placement, or compact application-shell bar placement.
+          * @default 'page'
+         */
+        "placement"?: BarTitlePlacement;
         /**
           * The one highest-emphasis page action.
           * @default null
@@ -7240,6 +7272,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "accountMenuExpanded"?: boolean;
+        /**
+          * ID of the active child route when URL matching is unavailable.
+          * @default ''
+         */
+        "activeChildId"?: string;
         /**
           * ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set.
           * @default ''
@@ -7301,6 +7338,10 @@ declare namespace LocalJSX {
           * Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion.
          */
         "onDsChromeTransitionStart"?: (event: DsPanelNavCustomEvent<ChromeTransitionDetail>) => void;
+        /**
+          * Emitted when a nested child route is selected.
+         */
+        "onDsNavChildSelect"?: (event: DsPanelNavCustomEvent<PanelNavChildSelectDetail>) => void;
         /**
           * Emitted when the footer left button (gear / dashboard) is clicked.
          */
@@ -7317,6 +7358,11 @@ declare namespace LocalJSX {
           * Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`.
          */
         "onDsNavUserAction"?: (event: DsPanelNavCustomEvent<PanelNavUserActionDetail>) => void;
+        /**
+          * Flat primary destinations, or nested child-route disclosure.
+          * @default 'flat'
+         */
+        "presentation"?: PanelNavPresentation;
         /**
           * How items with `href` render: - `anchor` (default): native `<a href>` — works with routers that intercept anchors. - `event`: always `<button>`; host handles navigation via `dsNavSelect`.
           * @default 'anchor'
@@ -7895,6 +7941,10 @@ declare namespace LocalJSX {
           * Managed tool-header Back intent.
          */
         "onDsHeaderBack"?: (event: DsShellAppCustomEvent<{ tool: PanelToolsToolId }>) => void;
+        /**
+          * Managed nested PanelNav child-route intent.
+         */
+        "onDsNavChildSelect"?: (event: DsShellAppCustomEvent<PanelNavChildSelectDetail>) => void;
         /**
           * Managed account-footer action intent.
          */
@@ -7944,6 +7994,11 @@ declare namespace LocalJSX {
           * Optional decorative Paper Design texture layered above the shell wash.
          */
         "paperTexture"?: PaperTextureConfig;
+        /**
+          * Desktop/tablet route sections in BarNav, or nested beneath PanelNav parents.
+          * @default 'bar'
+         */
+        "sectionNavigation"?: ShellSectionNavigation;
         /**
           * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
           * @default true
@@ -7979,6 +8034,11 @@ declare namespace LocalJSX {
           * @default 'primary'
          */
         "contentSurface"?: ShellPageContentSurface;
+        /**
+          * Desktop title chrome is rendered in this page or externally in the shell bar.
+          * @default 'page'
+         */
+        "desktopHeaderPlacement"?: ShellPageDesktopHeaderPlacement;
         /**
           * Available page-header capacity supplied by the owning application shell.
          */
@@ -9224,6 +9284,7 @@ declare namespace LocalJSX {
         "sectionsAriaLabel": string;
         "actionsAriaLabel": string;
         "variant": BarTitleVariant;
+        "placement": BarTitlePlacement;
         "showDivider": boolean;
         "showCompactDivider": boolean;
     }
@@ -9600,8 +9661,10 @@ declare namespace LocalJSX {
         "navStyle": NavChromeStyle;
         "disableViewTransition": boolean;
         "groups": string | PanelNavGroup[];
+        "presentation": PanelNavPresentation;
         "routerMode": PanelNavRouterMode;
         "activeId": string;
+        "activeChildId": string;
         "collapsed": boolean;
         "breakpoint": number;
         "storageKey": string;
@@ -9713,6 +9776,7 @@ declare namespace LocalJSX {
     }
     interface DsShellAppAttributes {
         "composition": ShellAppComposition;
+        "sectionNavigation": ShellSectionNavigation;
         "navStyle": NavChromeStyle;
         "gradientPreset": ShellGradientPreset;
         "shortcutsEnabled": boolean;
@@ -9722,6 +9786,7 @@ declare namespace LocalJSX {
     interface DsShellPageAttributes {
         "headerPresentation": ShellPageHeaderPresentation;
         "headerCapacity": ShellPageCapacity;
+        "desktopHeaderPlacement": ShellPageDesktopHeaderPlacement;
         "contentInset": ShellPageContentInset;
         "contentInsetBlockStart": ShellPageContentInset;
         "contentInsetBlockStartSize": string;

package/dist/types/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';

package/dist/vue/ds-bar-title.js

@@ -18,6 +18,7 @@ export const DsBarTitle = /*@__PURE__*/ defineContainer('ds-bar-title', defineDs
     'actions',
     'actionsAriaLabel',
     'variant',
+    'placement',
     'showDivider',
     'showCompactDivider',
     'dsBack',

package/dist/vue/ds-panel-nav.js

@@ -7,8 +7,10 @@ export const DsPanelNav = /*@__PURE__*/ defineContainer('ds-panel-nav', defineDs
     'navStyle',
     'disableViewTransition',
     'groups',
+    'presentation',
     'routerMode',
     'activeId',
+    'activeChildId',
     'collapsed',
     'breakpoint',
     'storageKey',
@@ -25,6 +27,7 @@ export const DsPanelNav = /*@__PURE__*/ defineContainer('ds-panel-nav', defineDs
     'collapseNavigationLabel',
     'navigationItemsLabel',
     'dsNavSelect',
+    'dsNavChildSelect',
     'dsNavToggle',
     'dsChromeTransitionStart',
     'dsChromeTransitionEnd',
@@ -32,6 +35,7 @@ export const DsPanelNav = /*@__PURE__*/ defineContainer('ds-panel-nav', defineDs
     'dsNavUserAction'
 ], [
     'dsNavSelect',
+    'dsNavChildSelect',
     'dsNavToggle',
     'dsChromeTransitionStart',
     'dsChromeTransitionEnd',

package/dist/vue/ds-shell-app.js

@@ -6,6 +6,7 @@ import { defineCustomElement as defineDsShellApp } from '@ds-mo/ui/components/ds
 export const DsShellApp = /*@__PURE__*/ defineContainer('ds-shell-app', defineDsShellApp, [
     'composition',
     'navigation',
+    'sectionNavigation',
     'pageChrome',
     'tools',
     'navStyle',
@@ -17,6 +18,7 @@ export const DsShellApp = /*@__PURE__*/ defineContainer('ds-shell-app', defineDs
     'dsResponsiveModeChange',
     'dsNavSelect',
     'dsTabChange',
+    'dsNavChildSelect',
     'dsSubsectionChange',
     'dsPageBack',
     'dsBreadcrumbSelect',
@@ -32,6 +34,7 @@ export const DsShellApp = /*@__PURE__*/ defineContainer('ds-shell-app', defineDs
     'dsResponsiveModeChange',
     'dsNavSelect',
     'dsTabChange',
+    'dsNavChildSelect',
     'dsSubsectionChange',
     'dsPageBack',
     'dsBreadcrumbSelect',

package/dist/vue/ds-shell-page.js

@@ -6,6 +6,7 @@ import { defineCustomElement as defineDsShellPage } from '@ds-mo/ui/components/d
 export const DsShellPage = /*@__PURE__*/ defineContainer('ds-shell-page', defineDsShellPage, [
     'headerPresentation',
     'headerCapacity',
+    'desktopHeaderPlacement',
     'contentInset',
     'contentInsetBlockStart',
     'contentInsetBlockStartSize',