@ds-mo/ui 12.5.0 → 12.6.0

package/dist/types/components.d.ts

@@ -14,6 +14,7 @@ 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 { BarWorkflowStep, BarWorkflowSubmitAction } from "./components/BarWorkflow/bar-workflow-types";
+import { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
 import { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
 import { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
 import { CardDataVizBarWidth } from "./components/CardDataVizBar/CardDataVizBar";
@@ -38,8 +39,11 @@ import { ChoicePopupAnchorAlignment } from "./utils";
 import { ShellGradientPreset } from "./shell/shell-gradient-presets";
 import { MessageBubbleVariant } from "./components/MessageBubble/MessageBubble";
 import { ButtonFilledIntent as ButtonFilledIntent1 } from "./components/ButtonFilled/ButtonFilled";
-import { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
 import { PanelNavGroup, PanelNavItem, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
+import { MobileBarNavDestinationDetail } from "./components/MobileBarNav/mobile-bar-nav-types";
+import { MobileHeaderHeadingLevel, MobileHeaderTone } from "./components/MobileHeader/mobile-header-types";
+import { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
+import { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
 import { ChromeTransitionDetail } from "./shell/chrome-transition";
 import { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
@@ -48,10 +52,7 @@ import { RadioOption, RadioSize } from "./components/Radio/Radio";
 import { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
 import { SelectBackground, SelectOption, SelectSection, SelectSize, SelectWidth } from "./components/Select/Select";
 import { SelectMultiBackground, SelectMultiOption, SelectMultiSection, SelectMultiSize, SelectMultiWidth } from "./components/SelectMulti/SelectMulti";
-import { ShellMobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
 import { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
-import { ShellMobileBarDestinationDetail } from "./components/ShellMobileBar/shell-mobile-bar-types";
-import { ShellMobileNavAuxiliaryDetail } from "./components/ShellMobileNav/shell-mobile-nav-types";
 import { ShellPageCapacity, ShellPageContentInset, 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";
@@ -59,7 +60,6 @@ import { ControlSize } from "./utils/control-text";
 import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
 import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 import { SwitchSize } from "./components/Switch/Switch";
-import { TabGroupItem } from "./components/TabGroup/tab-item-utils";
 import { TabBackground } from "./components/TabGroup/TabGroup";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
@@ -73,6 +73,7 @@ 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 { BarWorkflowStep, BarWorkflowSubmitAction } from "./components/BarWorkflow/bar-workflow-types";
+export { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
 export { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
 export { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
 export { CardDataVizBarWidth } from "./components/CardDataVizBar/CardDataVizBar";
@@ -97,8 +98,11 @@ export { ChoicePopupAnchorAlignment } from "./utils";
 export { ShellGradientPreset } from "./shell/shell-gradient-presets";
 export { MessageBubbleVariant } from "./components/MessageBubble/MessageBubble";
 export { ButtonFilledIntent as ButtonFilledIntent1 } from "./components/ButtonFilled/ButtonFilled";
-export { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
 export { PanelNavGroup, PanelNavItem, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
+export { MobileBarNavDestinationDetail } from "./components/MobileBarNav/mobile-bar-nav-types";
+export { MobileHeaderHeadingLevel, MobileHeaderTone } from "./components/MobileHeader/mobile-header-types";
+export { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
+export { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
 export { ChromeTransitionDetail } from "./shell/chrome-transition";
 export { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
@@ -107,10 +111,7 @@ export { RadioOption, RadioSize } from "./components/Radio/Radio";
 export { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
 export { SelectBackground, SelectOption, SelectSection, SelectSize, SelectWidth } from "./components/Select/Select";
 export { SelectMultiBackground, SelectMultiOption, SelectMultiSection, SelectMultiSize, SelectMultiWidth } from "./components/SelectMulti/SelectMulti";
-export { ShellMobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
 export { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
-export { ShellMobileBarDestinationDetail } from "./components/ShellMobileBar/shell-mobile-bar-types";
-export { ShellMobileNavAuxiliaryDetail } from "./components/ShellMobileNav/shell-mobile-nav-types";
 export { ShellPageCapacity, ShellPageContentInset, 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";
@@ -118,7 +119,6 @@ export { ControlSize } from "./utils/control-text";
 export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
 export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 export { SwitchSize } from "./components/Switch/Switch";
-export { TabGroupItem } from "./components/TabGroup/tab-item-utils";
 export { TabBackground } from "./components/TabGroup/TabGroup";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 export { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
@@ -411,6 +411,11 @@ export namespace Components {
           * @default 'Previous step'
          */
         "previousLabel": string;
+        /**
+          * Explicit shell breakpoint presentation. Mobile keeps the same controlled workflow state.
+          * @default 'desktop'
+         */
+        "responsiveMode": ShellResponsiveMode;
         /**
           * Ordered workflow steps. Step state is controlled by the application.
           * @default []
@@ -1363,6 +1368,174 @@ export namespace Components {
         "scrollToMessage": (id: string) => Promise<boolean>;
         "scrollToStart": () => Promise<void>;
     }
+    interface DsMobileBarNav {
+        /**
+          * @default 'area'
+         */
+        "activeDestination": MobileDestination;
+        /**
+          * @default false
+         */
+        "agentsDot": boolean;
+        /**
+          * @default 'Agents'
+         */
+        "agentsLabel": string;
+        /**
+          * @default {     id: 'tracking',     icon: 'MapPage',     label: 'Tracking',   }
+         */
+        "currentArea": PanelNavItem;
+        "focusDestination": (destination: MobileDestination | "sheet-nav") => Promise<void>;
+        /**
+          * @default 'Help & Support'
+         */
+        "helpLabel": string;
+        /**
+          * @default false
+         */
+        "inboxDot": boolean;
+        /**
+          * @default 'Inbox'
+         */
+        "inboxLabel": string;
+        /**
+          * @default 'Menu'
+         */
+        "menuLabel": string;
+        /**
+          * @default false
+         */
+        "searchDot": boolean;
+        /**
+          * @default 'Search'
+         */
+        "searchLabel": string;
+        /**
+          * @default false
+         */
+        "sheetNavExpanded": boolean;
+    }
+    interface DsMobileHeader {
+        /**
+          * Static title used when no peer sections are supplied.
+          * @default ''
+         */
+        "heading": string;
+        /**
+          * Semantic heading level for the active mobile screen.
+          * @default 'h1'
+         */
+        "headingLevel": MobileHeaderHeadingLevel;
+        /**
+          * Controlled peer sections. Their selected label replaces the static title.
+          * @default []
+         */
+        "sections": TabItem[];
+        /**
+          * Accessible name for the section chooser.
+          * @default 'Change page section'
+         */
+        "sectionsAriaLabel": string;
+        /**
+          * JSON fallback for `sections`.
+          * @default ''
+         */
+        "sectionsJson": string;
+        /**
+          * Controlled child sections within the selected page or detail screen.
+          * @default []
+         */
+        "subsections": TabItem[];
+        /**
+          * Accessible name for the child-section chooser.
+          * @default 'Change page subsection'
+         */
+        "subsectionsAriaLabel": string;
+        /**
+          * JSON fallback for `subsections`.
+          * @default ''
+         */
+        "subsectionsJson": string;
+        /**
+          * Controlled selected child-section id.
+          * @default ''
+         */
+        "subvalue": string;
+        /**
+          * Default page chrome or bold-brand workflow chrome.
+          * @default 'default'
+         */
+        "tone": MobileHeaderTone;
+        /**
+          * Controlled selected section id.
+          * @default ''
+         */
+        "value": string;
+    }
+    interface DsMobileSectionSwitcher {
+        /**
+          * Accessible name for the section chooser.
+          * @default 'Change page section'
+         */
+        "navigationLabel": string;
+        /**
+          * Ordered controlled sections. Divider entries group the popup menu.
+          * @default []
+         */
+        "sections": TabItem[];
+        /**
+          * JSON fallback for `sections`.
+          * @default ''
+         */
+        "sectionsJson": string;
+        /**
+          * Controlled selected section id.
+          * @default ''
+         */
+        "value": string;
+    }
+    interface DsMobileSheetNav {
+        /**
+          * @default 'Account'
+         */
+        "accountLabel": string;
+        /**
+          * @default 'dashboard'
+         */
+        "browseContext": NavChromeStyle;
+        /**
+          * @default ''
+         */
+        "currentUrl": string;
+        /**
+          * @default []
+         */
+        "dashboardGroups": PanelNavGroup[];
+        /**
+          * @default 'Dashboard'
+         */
+        "dashboardLabel": string;
+        /**
+          * @default 'Help & Support'
+         */
+        "helpLabel": string;
+        /**
+          * @default 'Application navigation'
+         */
+        "navigationLabel": string;
+        /**
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * @default []
+         */
+        "settingsGroups": PanelNavGroup[];
+        /**
+          * @default 'Settings'
+         */
+        "settingsLabel": string;
+    }
     interface DsModal {
         /**
           * Optional id reference for explanatory content in the default slot.
@@ -2052,12 +2225,12 @@ export namespace Components {
           * Controlled mobile surface shown above the persistent bottom bar.
           * @default 'area'
          */
-        "mobileDestination": ShellMobileDestination;
+        "mobileDestination": MobileDestination;
         /**
-          * Controlled full-stage mobile navigation-pane state.
+          * Controlled full-stage Mobile Sheet Nav state.
           * @default false
          */
-        "mobileNavigationOpen": boolean;
+        "mobileSheetNavOpen": boolean;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
           * @default 'dashboard'
@@ -2106,130 +2279,6 @@ export namespace Components {
          */
         "selected": boolean;
     }
-    interface DsShellMobileBar {
-        /**
-          * @default 'area'
-         */
-        "activeDestination": ShellMobileDestination;
-        /**
-          * @default false
-         */
-        "agentsDot": boolean;
-        /**
-          * @default 'Agents'
-         */
-        "agentsLabel": string;
-        /**
-          * @default {     id: 'tracking',     icon: 'MapPage',     label: 'Tracking',   }
-         */
-        "currentArea": PanelNavItem;
-        "focusDestination": (destination: ShellMobileDestination | "navigation") => Promise<void>;
-        /**
-          * @default false
-         */
-        "inboxDot": boolean;
-        /**
-          * @default 'Inbox'
-         */
-        "inboxLabel": string;
-        /**
-          * @default 'Menu'
-         */
-        "menuLabel": string;
-        /**
-          * @default false
-         */
-        "navigationExpanded": boolean;
-        /**
-          * @default false
-         */
-        "searchDot": boolean;
-        /**
-          * @default 'Search'
-         */
-        "searchLabel": string;
-    }
-    interface DsShellMobileNav {
-        /**
-          * @default 'Account'
-         */
-        "accountLabel": string;
-        /**
-          * @default 'dashboard'
-         */
-        "browseContext": NavChromeStyle;
-        /**
-          * @default ''
-         */
-        "currentUrl": string;
-        /**
-          * @default []
-         */
-        "dashboardGroups": PanelNavGroup[];
-        /**
-          * @default 'Dashboard'
-         */
-        "dashboardLabel": string;
-        /**
-          * @default 'Navigation'
-         */
-        "heading": string;
-        /**
-          * @default 'Help & Support'
-         */
-        "helpLabel": string;
-        /**
-          * @default 'Application navigation'
-         */
-        "navigationLabel": string;
-        /**
-          * @default false
-         */
-        "open": boolean;
-        /**
-          * @default []
-         */
-        "settingsGroups": PanelNavGroup[];
-        /**
-          * @default 'Settings'
-         */
-        "settingsLabel": string;
-    }
-    interface DsShellMobileSectionNav {
-        /**
-          * Section base path used to derive the selected route tab.
-          * @default ''
-         */
-        "basePath": string;
-        /**
-          * Current application route.
-          * @default ''
-         */
-        "currentUrl": string;
-        /**
-          * Active primary-area label shown when the route has no section row.
-         */
-        "heading": string | undefined;
-        /**
-          * @default 'Section navigation'
-         */
-        "navigationLabel": string;
-        /**
-          * Route sections shared with the corresponding desktop BarNav.
-          * @default []
-         */
-        "tabs": BarNavTab[];
-        /**
-          * JSON fallback for `tabs`.
-          * @default ''
-         */
-        "tabsJson": string;
-        /**
-          * Controlled selected tab when URL-derived selection is unavailable.
-          * @default ''
-         */
-        "value": string;
-    }
     interface DsShellPage {
         /**
           * Standard page gutters, or no inset for full-bleed page content.
@@ -2245,6 +2294,11 @@ export namespace Components {
           * @default 'auto'
          */
         "headerPresentation": ShellPageHeaderPresentation;
+        /**
+          * Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot.
+          * @default 'desktop'
+         */
+        "responsiveMode": ShellResponsiveMode;
     }
     interface DsShellTools {
         /**
@@ -2861,6 +2915,22 @@ export interface DsMessageScrollerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsMessageScrollerElement;
 }
+export interface DsMobileBarNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsMobileBarNavElement;
+}
+export interface DsMobileHeaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsMobileHeaderElement;
+}
+export interface DsMobileSectionSwitcherCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsMobileSectionSwitcherElement;
+}
+export interface DsMobileSheetNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsMobileSheetNavElement;
+}
 export interface DsModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsModalElement;
@@ -2913,18 +2983,6 @@ export interface DsShellGradientSwatchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsShellGradientSwatchElement;
 }
-export interface DsShellMobileBarCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsShellMobileBarElement;
-}
-export interface DsShellMobileNavCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsShellMobileNavElement;
-}
-export interface DsShellMobileSectionNavCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsShellMobileSectionNavElement;
-}
 export interface DsShellToolsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsShellToolsElement;
@@ -3451,6 +3509,78 @@ declare global {
         prototype: HTMLDsMessageScrollerElement;
         new (): HTMLDsMessageScrollerElement;
     };
+    interface HTMLDsMobileBarNavElementEventMap {
+        "dsSheetNavToggle": boolean;
+        "dsDestinationChange": MobileBarNavDestinationDetail;
+    }
+    interface HTMLDsMobileBarNavElement extends Components.DsMobileBarNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsMobileBarNavElementEventMap>(type: K, listener: (this: HTMLDsMobileBarNavElement, ev: DsMobileBarNavCustomEvent<HTMLDsMobileBarNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsMobileBarNavElementEventMap>(type: K, listener: (this: HTMLDsMobileBarNavElement, ev: DsMobileBarNavCustomEvent<HTMLDsMobileBarNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsMobileBarNavElement: {
+        prototype: HTMLDsMobileBarNavElement;
+        new (): HTMLDsMobileBarNavElement;
+    };
+    interface HTMLDsMobileHeaderElementEventMap {
+        "dsSectionChange": string;
+        "dsSubsectionChange": string;
+    }
+    interface HTMLDsMobileHeaderElement extends Components.DsMobileHeader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsMobileHeaderElementEventMap>(type: K, listener: (this: HTMLDsMobileHeaderElement, ev: DsMobileHeaderCustomEvent<HTMLDsMobileHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsMobileHeaderElementEventMap>(type: K, listener: (this: HTMLDsMobileHeaderElement, ev: DsMobileHeaderCustomEvent<HTMLDsMobileHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsMobileHeaderElement: {
+        prototype: HTMLDsMobileHeaderElement;
+        new (): HTMLDsMobileHeaderElement;
+    };
+    interface HTMLDsMobileSectionSwitcherElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsMobileSectionSwitcherElement extends Components.DsMobileSectionSwitcher, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsMobileSectionSwitcherElementEventMap>(type: K, listener: (this: HTMLDsMobileSectionSwitcherElement, ev: DsMobileSectionSwitcherCustomEvent<HTMLDsMobileSectionSwitcherElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsMobileSectionSwitcherElementEventMap>(type: K, listener: (this: HTMLDsMobileSectionSwitcherElement, ev: DsMobileSectionSwitcherCustomEvent<HTMLDsMobileSectionSwitcherElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsMobileSectionSwitcherElement: {
+        prototype: HTMLDsMobileSectionSwitcherElement;
+        new (): HTMLDsMobileSectionSwitcherElement;
+    };
+    interface HTMLDsMobileSheetNavElementEventMap {
+        "dsAreaSelect": string;
+        "dsBrowseContextChange": NavChromeStyle;
+        "dsClose": void;
+    }
+    interface HTMLDsMobileSheetNavElement extends Components.DsMobileSheetNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsMobileSheetNavElementEventMap>(type: K, listener: (this: HTMLDsMobileSheetNavElement, ev: DsMobileSheetNavCustomEvent<HTMLDsMobileSheetNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsMobileSheetNavElementEventMap>(type: K, listener: (this: HTMLDsMobileSheetNavElement, ev: DsMobileSheetNavCustomEvent<HTMLDsMobileSheetNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsMobileSheetNavElement: {
+        prototype: HTMLDsMobileSheetNavElement;
+        new (): HTMLDsMobileSheetNavElement;
+    };
     interface HTMLDsModalElementEventMap {
         "dsClose": ModalCloseDetail;
         "dsAfterClose": void;
@@ -3707,61 +3837,6 @@ declare global {
         prototype: HTMLDsShellGradientSwatchElement;
         new (): HTMLDsShellGradientSwatchElement;
     };
-    interface HTMLDsShellMobileBarElementEventMap {
-        "dsNavigationToggle": boolean;
-        "dsDestinationChange": ShellMobileBarDestinationDetail;
-    }
-    interface HTMLDsShellMobileBarElement extends Components.DsShellMobileBar, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsShellMobileBarElementEventMap>(type: K, listener: (this: HTMLDsShellMobileBarElement, ev: DsShellMobileBarCustomEvent<HTMLDsShellMobileBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsShellMobileBarElementEventMap>(type: K, listener: (this: HTMLDsShellMobileBarElement, ev: DsShellMobileBarCustomEvent<HTMLDsShellMobileBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLDsShellMobileBarElement: {
-        prototype: HTMLDsShellMobileBarElement;
-        new (): HTMLDsShellMobileBarElement;
-    };
-    interface HTMLDsShellMobileNavElementEventMap {
-        "dsAreaSelect": string;
-        "dsBrowseContextChange": NavChromeStyle;
-        "dsAuxiliarySelect": ShellMobileNavAuxiliaryDetail;
-        "dsClose": void;
-    }
-    interface HTMLDsShellMobileNavElement extends Components.DsShellMobileNav, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsShellMobileNavElementEventMap>(type: K, listener: (this: HTMLDsShellMobileNavElement, ev: DsShellMobileNavCustomEvent<HTMLDsShellMobileNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsShellMobileNavElementEventMap>(type: K, listener: (this: HTMLDsShellMobileNavElement, ev: DsShellMobileNavCustomEvent<HTMLDsShellMobileNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLDsShellMobileNavElement: {
-        prototype: HTMLDsShellMobileNavElement;
-        new (): HTMLDsShellMobileNavElement;
-    };
-    interface HTMLDsShellMobileSectionNavElementEventMap {
-        "dsTabChange": string;
-    }
-    interface HTMLDsShellMobileSectionNavElement extends Components.DsShellMobileSectionNav, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsShellMobileSectionNavElementEventMap>(type: K, listener: (this: HTMLDsShellMobileSectionNavElement, ev: DsShellMobileSectionNavCustomEvent<HTMLDsShellMobileSectionNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLDsShellMobileSectionNavElementEventMap>(type: K, listener: (this: HTMLDsShellMobileSectionNavElement, ev: DsShellMobileSectionNavCustomEvent<HTMLDsShellMobileSectionNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLDsShellMobileSectionNavElement: {
-        prototype: HTMLDsShellMobileSectionNavElement;
-        new (): HTMLDsShellMobileSectionNavElement;
-    };
     interface HTMLDsShellPageElement extends Components.DsShellPage, HTMLStencilElement {
     }
     var HTMLDsShellPageElement: {
@@ -3995,6 +4070,10 @@ declare global {
         "ds-message-bubble": HTMLDsMessageBubbleElement;
         "ds-message-composer": HTMLDsMessageComposerElement;
         "ds-message-scroller": HTMLDsMessageScrollerElement;
+        "ds-mobile-bar-nav": HTMLDsMobileBarNavElement;
+        "ds-mobile-header": HTMLDsMobileHeaderElement;
+        "ds-mobile-section-switcher": HTMLDsMobileSectionSwitcherElement;
+        "ds-mobile-sheet-nav": HTMLDsMobileSheetNavElement;
         "ds-modal": HTMLDsModalElement;
         "ds-panel-nav": HTMLDsPanelNavElement;
         "ds-panel-sub-nav": HTMLDsPanelSubNavElement;
@@ -4008,9 +4087,6 @@ declare global {
         "ds-shell-app": HTMLDsShellAppElement;
         "ds-shell-gradient-picker": HTMLDsShellGradientPickerElement;
         "ds-shell-gradient-swatch": HTMLDsShellGradientSwatchElement;
-        "ds-shell-mobile-bar": HTMLDsShellMobileBarElement;
-        "ds-shell-mobile-nav": HTMLDsShellMobileNavElement;
-        "ds-shell-mobile-section-nav": HTMLDsShellMobileSectionNavElement;
         "ds-shell-page": HTMLDsShellPageElement;
         "ds-shell-tools": HTMLDsShellToolsElement;
         "ds-skeleton": HTMLDsSkeletonElement;
@@ -4348,6 +4424,11 @@ declare namespace LocalJSX {
           * @default 'Previous step'
          */
         "previousLabel"?: string;
+        /**
+          * Explicit shell breakpoint presentation. Mobile keeps the same controlled workflow state.
+          * @default 'desktop'
+         */
+        "responsiveMode"?: ShellResponsiveMode;
         /**
           * Ordered workflow steps. Step state is controlled by the application.
           * @default []
@@ -5361,6 +5442,190 @@ declare namespace LocalJSX {
         "messagesLabel"?: string;
         "onDsReachStart"?: (event: DsMessageScrollerCustomEvent<void>) => void;
     }
+    interface DsMobileBarNav {
+        /**
+          * @default 'area'
+         */
+        "activeDestination"?: MobileDestination;
+        /**
+          * @default false
+         */
+        "agentsDot"?: boolean;
+        /**
+          * @default 'Agents'
+         */
+        "agentsLabel"?: string;
+        /**
+          * @default {     id: 'tracking',     icon: 'MapPage',     label: 'Tracking',   }
+         */
+        "currentArea"?: PanelNavItem;
+        /**
+          * @default 'Help & Support'
+         */
+        "helpLabel"?: string;
+        /**
+          * @default false
+         */
+        "inboxDot"?: boolean;
+        /**
+          * @default 'Inbox'
+         */
+        "inboxLabel"?: string;
+        /**
+          * @default 'Menu'
+         */
+        "menuLabel"?: string;
+        "onDsDestinationChange"?: (event: DsMobileBarNavCustomEvent<MobileBarNavDestinationDetail>) => void;
+        "onDsSheetNavToggle"?: (event: DsMobileBarNavCustomEvent<boolean>) => void;
+        /**
+          * @default false
+         */
+        "searchDot"?: boolean;
+        /**
+          * @default 'Search'
+         */
+        "searchLabel"?: string;
+        /**
+          * @default false
+         */
+        "sheetNavExpanded"?: boolean;
+    }
+    interface DsMobileHeader {
+        /**
+          * Static title used when no peer sections are supplied.
+          * @default ''
+         */
+        "heading"?: string;
+        /**
+          * Semantic heading level for the active mobile screen.
+          * @default 'h1'
+         */
+        "headingLevel"?: MobileHeaderHeadingLevel;
+        /**
+          * Section selection intent.
+         */
+        "onDsSectionChange"?: (event: DsMobileHeaderCustomEvent<string>) => void;
+        /**
+          * Child-section selection intent.
+         */
+        "onDsSubsectionChange"?: (event: DsMobileHeaderCustomEvent<string>) => void;
+        /**
+          * Controlled peer sections. Their selected label replaces the static title.
+          * @default []
+         */
+        "sections"?: TabItem[];
+        /**
+          * Accessible name for the section chooser.
+          * @default 'Change page section'
+         */
+        "sectionsAriaLabel"?: string;
+        /**
+          * JSON fallback for `sections`.
+          * @default ''
+         */
+        "sectionsJson"?: string;
+        /**
+          * Controlled child sections within the selected page or detail screen.
+          * @default []
+         */
+        "subsections"?: TabItem[];
+        /**
+          * Accessible name for the child-section chooser.
+          * @default 'Change page subsection'
+         */
+        "subsectionsAriaLabel"?: string;
+        /**
+          * JSON fallback for `subsections`.
+          * @default ''
+         */
+        "subsectionsJson"?: string;
+        /**
+          * Controlled selected child-section id.
+          * @default ''
+         */
+        "subvalue"?: string;
+        /**
+          * Default page chrome or bold-brand workflow chrome.
+          * @default 'default'
+         */
+        "tone"?: MobileHeaderTone;
+        /**
+          * Controlled selected section id.
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface DsMobileSectionSwitcher {
+        /**
+          * Accessible name for the section chooser.
+          * @default 'Change page section'
+         */
+        "navigationLabel"?: string;
+        /**
+          * Selection intent. The route, tool, or workflow owner updates `value`.
+         */
+        "onDsChange"?: (event: DsMobileSectionSwitcherCustomEvent<string>) => void;
+        /**
+          * Ordered controlled sections. Divider entries group the popup menu.
+          * @default []
+         */
+        "sections"?: TabItem[];
+        /**
+          * JSON fallback for `sections`.
+          * @default ''
+         */
+        "sectionsJson"?: string;
+        /**
+          * Controlled selected section id.
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface DsMobileSheetNav {
+        /**
+          * @default 'Account'
+         */
+        "accountLabel"?: string;
+        /**
+          * @default 'dashboard'
+         */
+        "browseContext"?: NavChromeStyle;
+        /**
+          * @default ''
+         */
+        "currentUrl"?: string;
+        /**
+          * @default []
+         */
+        "dashboardGroups"?: PanelNavGroup[];
+        /**
+          * @default 'Dashboard'
+         */
+        "dashboardLabel"?: string;
+        /**
+          * @default 'Help & Support'
+         */
+        "helpLabel"?: string;
+        /**
+          * @default 'Application navigation'
+         */
+        "navigationLabel"?: string;
+        "onDsAreaSelect"?: (event: DsMobileSheetNavCustomEvent<string>) => void;
+        "onDsBrowseContextChange"?: (event: DsMobileSheetNavCustomEvent<NavChromeStyle>) => void;
+        "onDsClose"?: (event: DsMobileSheetNavCustomEvent<void>) => void;
+        /**
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * @default []
+         */
+        "settingsGroups"?: PanelNavGroup[];
+        /**
+          * @default 'Settings'
+         */
+        "settingsLabel"?: string;
+    }
     interface DsModal {
         /**
           * Optional id reference for explanatory content in the default slot.
@@ -6124,12 +6389,12 @@ declare namespace LocalJSX {
           * Controlled mobile surface shown above the persistent bottom bar.
           * @default 'area'
          */
-        "mobileDestination"?: ShellMobileDestination;
+        "mobileDestination"?: MobileDestination;
         /**
-          * Controlled full-stage mobile navigation-pane state.
+          * Controlled full-stage Mobile Sheet Nav state.
           * @default false
          */
-        "mobileNavigationOpen"?: boolean;
+        "mobileSheetNavOpen"?: boolean;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
           * @default 'dashboard'
@@ -6184,139 +6449,6 @@ declare namespace LocalJSX {
          */
         "selected"?: boolean;
     }
-    interface DsShellMobileBar {
-        /**
-          * @default 'area'
-         */
-        "activeDestination"?: ShellMobileDestination;
-        /**
-          * @default false
-         */
-        "agentsDot"?: boolean;
-        /**
-          * @default 'Agents'
-         */
-        "agentsLabel"?: string;
-        /**
-          * @default {     id: 'tracking',     icon: 'MapPage',     label: 'Tracking',   }
-         */
-        "currentArea"?: PanelNavItem;
-        /**
-          * @default false
-         */
-        "inboxDot"?: boolean;
-        /**
-          * @default 'Inbox'
-         */
-        "inboxLabel"?: string;
-        /**
-          * @default 'Menu'
-         */
-        "menuLabel"?: string;
-        /**
-          * @default false
-         */
-        "navigationExpanded"?: boolean;
-        "onDsDestinationChange"?: (event: DsShellMobileBarCustomEvent<ShellMobileBarDestinationDetail>) => void;
-        "onDsNavigationToggle"?: (event: DsShellMobileBarCustomEvent<boolean>) => void;
-        /**
-          * @default false
-         */
-        "searchDot"?: boolean;
-        /**
-          * @default 'Search'
-         */
-        "searchLabel"?: string;
-    }
-    interface DsShellMobileNav {
-        /**
-          * @default 'Account'
-         */
-        "accountLabel"?: string;
-        /**
-          * @default 'dashboard'
-         */
-        "browseContext"?: NavChromeStyle;
-        /**
-          * @default ''
-         */
-        "currentUrl"?: string;
-        /**
-          * @default []
-         */
-        "dashboardGroups"?: PanelNavGroup[];
-        /**
-          * @default 'Dashboard'
-         */
-        "dashboardLabel"?: string;
-        /**
-          * @default 'Navigation'
-         */
-        "heading"?: string;
-        /**
-          * @default 'Help & Support'
-         */
-        "helpLabel"?: string;
-        /**
-          * @default 'Application navigation'
-         */
-        "navigationLabel"?: string;
-        "onDsAreaSelect"?: (event: DsShellMobileNavCustomEvent<string>) => void;
-        "onDsAuxiliarySelect"?: (event: DsShellMobileNavCustomEvent<ShellMobileNavAuxiliaryDetail>) => void;
-        "onDsBrowseContextChange"?: (event: DsShellMobileNavCustomEvent<NavChromeStyle>) => void;
-        "onDsClose"?: (event: DsShellMobileNavCustomEvent<void>) => void;
-        /**
-          * @default false
-         */
-        "open"?: boolean;
-        /**
-          * @default []
-         */
-        "settingsGroups"?: PanelNavGroup[];
-        /**
-          * @default 'Settings'
-         */
-        "settingsLabel"?: string;
-    }
-    interface DsShellMobileSectionNav {
-        /**
-          * Section base path used to derive the selected route tab.
-          * @default ''
-         */
-        "basePath"?: string;
-        /**
-          * Current application route.
-          * @default ''
-         */
-        "currentUrl"?: string;
-        /**
-          * Active primary-area label shown when the route has no section row.
-         */
-        "heading"?: string | undefined;
-        /**
-          * @default 'Section navigation'
-         */
-        "navigationLabel"?: string;
-        /**
-          * Route intent; the application owns navigation.
-         */
-        "onDsTabChange"?: (event: DsShellMobileSectionNavCustomEvent<string>) => void;
-        /**
-          * Route sections shared with the corresponding desktop BarNav.
-          * @default []
-         */
-        "tabs"?: BarNavTab[];
-        /**
-          * JSON fallback for `tabs`.
-          * @default ''
-         */
-        "tabsJson"?: string;
-        /**
-          * Controlled selected tab when URL-derived selection is unavailable.
-          * @default ''
-         */
-        "value"?: string;
-    }
     interface DsShellPage {
         /**
           * Standard page gutters, or no inset for full-bleed page content.
@@ -6332,6 +6464,11 @@ declare namespace LocalJSX {
           * @default 'auto'
          */
         "headerPresentation"?: ShellPageHeaderPresentation;
+        /**
+          * Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot.
+          * @default 'desktop'
+         */
+        "responsiveMode"?: ShellResponsiveMode;
     }
     interface DsShellTools {
         /**
@@ -6961,6 +7098,7 @@ declare namespace LocalJSX {
         "previousLabel": string;
         "nextLabel": string;
         "isNextInactive": boolean;
+        "responsiveMode": ShellResponsiveMode;
     }
     interface DsBreadcrumbAttributes {
         "ariaLabel": string;
@@ -7212,6 +7350,44 @@ declare namespace LocalJSX {
         "defaultPosition": MessageScrollerPosition;
         "messagesLabel": string;
     }
+    interface DsMobileBarNavAttributes {
+        "activeDestination": MobileDestination;
+        "sheetNavExpanded": boolean;
+        "menuLabel": string;
+        "searchLabel": string;
+        "agentsLabel": string;
+        "inboxLabel": string;
+        "helpLabel": string;
+        "searchDot": boolean;
+        "agentsDot": boolean;
+        "inboxDot": boolean;
+    }
+    interface DsMobileHeaderAttributes {
+        "heading": string;
+        "headingLevel": MobileHeaderHeadingLevel;
+        "sectionsJson": string;
+        "value": string;
+        "sectionsAriaLabel": string;
+        "subsectionsJson": string;
+        "subvalue": string;
+        "subsectionsAriaLabel": string;
+        "tone": MobileHeaderTone;
+    }
+    interface DsMobileSectionSwitcherAttributes {
+        "sectionsJson": string;
+        "value": string;
+        "navigationLabel": string;
+    }
+    interface DsMobileSheetNavAttributes {
+        "open": boolean;
+        "browseContext": NavChromeStyle;
+        "currentUrl": string;
+        "navigationLabel": string;
+        "dashboardLabel": string;
+        "settingsLabel": string;
+        "accountLabel": string;
+        "helpLabel": string;
+    }
     interface DsModalAttributes {
         "open": boolean;
         "heading": string;
@@ -7360,8 +7536,8 @@ declare namespace LocalJSX {
         "navStyle": NavChromeStyle;
         "gradientPreset": ShellGradientPreset;
         "shortcutsEnabled": boolean;
-        "mobileDestination": ShellMobileDestination;
-        "mobileNavigationOpen": boolean;
+        "mobileDestination": MobileDestination;
+        "mobileSheetNavOpen": boolean;
     }
     interface DsShellGradientPickerAttributes {
         "value": ShellGradientPreset;
@@ -7373,40 +7549,11 @@ declare namespace LocalJSX {
         "isInactive": boolean;
         "ariaLabel": string | null;
     }
-    interface DsShellMobileBarAttributes {
-        "activeDestination": ShellMobileDestination;
-        "navigationExpanded": boolean;
-        "menuLabel": string;
-        "searchLabel": string;
-        "agentsLabel": string;
-        "inboxLabel": string;
-        "searchDot": boolean;
-        "agentsDot": boolean;
-        "inboxDot": boolean;
-    }
-    interface DsShellMobileNavAttributes {
-        "open": boolean;
-        "browseContext": NavChromeStyle;
-        "currentUrl": string;
-        "heading": string;
-        "navigationLabel": string;
-        "dashboardLabel": string;
-        "settingsLabel": string;
-        "accountLabel": string;
-        "helpLabel": string;
-    }
-    interface DsShellMobileSectionNavAttributes {
-        "tabsJson": string;
-        "value": string;
-        "heading": string | undefined;
-        "basePath": string;
-        "currentUrl": string;
-        "navigationLabel": string;
-    }
     interface DsShellPageAttributes {
         "headerPresentation": ShellPageHeaderPresentation;
         "headerCapacity": ShellPageCapacity;
         "contentInset": ShellPageContentInset;
+        "responsiveMode": ShellResponsiveMode;
     }
     interface DsShellToolsAttributes {
         "responsiveMode": ShellResponsiveMode;
@@ -7583,6 +7730,10 @@ declare namespace LocalJSX {
         "ds-message-bubble": Omit<DsMessageBubble, keyof DsMessageBubbleAttributes> & { [K in keyof DsMessageBubble & keyof DsMessageBubbleAttributes]?: DsMessageBubble[K] } & { [K in keyof DsMessageBubble & keyof DsMessageBubbleAttributes as `attr:${K}`]?: DsMessageBubbleAttributes[K] } & { [K in keyof DsMessageBubble & keyof DsMessageBubbleAttributes as `prop:${K}`]?: DsMessageBubble[K] };
         "ds-message-composer": Omit<DsMessageComposer, keyof DsMessageComposerAttributes> & { [K in keyof DsMessageComposer & keyof DsMessageComposerAttributes]?: DsMessageComposer[K] } & { [K in keyof DsMessageComposer & keyof DsMessageComposerAttributes as `attr:${K}`]?: DsMessageComposerAttributes[K] } & { [K in keyof DsMessageComposer & keyof DsMessageComposerAttributes as `prop:${K}`]?: DsMessageComposer[K] };
         "ds-message-scroller": Omit<DsMessageScroller, keyof DsMessageScrollerAttributes> & { [K in keyof DsMessageScroller & keyof DsMessageScrollerAttributes]?: DsMessageScroller[K] } & { [K in keyof DsMessageScroller & keyof DsMessageScrollerAttributes as `attr:${K}`]?: DsMessageScrollerAttributes[K] } & { [K in keyof DsMessageScroller & keyof DsMessageScrollerAttributes as `prop:${K}`]?: DsMessageScroller[K] };
+        "ds-mobile-bar-nav": Omit<DsMobileBarNav, keyof DsMobileBarNavAttributes> & { [K in keyof DsMobileBarNav & keyof DsMobileBarNavAttributes]?: DsMobileBarNav[K] } & { [K in keyof DsMobileBarNav & keyof DsMobileBarNavAttributes as `attr:${K}`]?: DsMobileBarNavAttributes[K] } & { [K in keyof DsMobileBarNav & keyof DsMobileBarNavAttributes as `prop:${K}`]?: DsMobileBarNav[K] };
+        "ds-mobile-header": Omit<DsMobileHeader, keyof DsMobileHeaderAttributes> & { [K in keyof DsMobileHeader & keyof DsMobileHeaderAttributes]?: DsMobileHeader[K] } & { [K in keyof DsMobileHeader & keyof DsMobileHeaderAttributes as `attr:${K}`]?: DsMobileHeaderAttributes[K] } & { [K in keyof DsMobileHeader & keyof DsMobileHeaderAttributes as `prop:${K}`]?: DsMobileHeader[K] };
+        "ds-mobile-section-switcher": Omit<DsMobileSectionSwitcher, keyof DsMobileSectionSwitcherAttributes> & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes]?: DsMobileSectionSwitcher[K] } & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes as `attr:${K}`]?: DsMobileSectionSwitcherAttributes[K] } & { [K in keyof DsMobileSectionSwitcher & keyof DsMobileSectionSwitcherAttributes as `prop:${K}`]?: DsMobileSectionSwitcher[K] };
+        "ds-mobile-sheet-nav": Omit<DsMobileSheetNav, keyof DsMobileSheetNavAttributes> & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes]?: DsMobileSheetNav[K] } & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes as `attr:${K}`]?: DsMobileSheetNavAttributes[K] } & { [K in keyof DsMobileSheetNav & keyof DsMobileSheetNavAttributes as `prop:${K}`]?: DsMobileSheetNav[K] };
         "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
         "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
         "ds-panel-sub-nav": Omit<DsPanelSubNav, keyof DsPanelSubNavAttributes> & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes]?: DsPanelSubNav[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `attr:${K}`]?: DsPanelSubNavAttributes[K] } & { [K in keyof DsPanelSubNav & keyof DsPanelSubNavAttributes as `prop:${K}`]?: DsPanelSubNav[K] };
@@ -7596,9 +7747,6 @@ declare namespace LocalJSX {
         "ds-shell-app": Omit<DsShellApp, keyof DsShellAppAttributes> & { [K in keyof DsShellApp & keyof DsShellAppAttributes]?: DsShellApp[K] } & { [K in keyof DsShellApp & keyof DsShellAppAttributes as `attr:${K}`]?: DsShellAppAttributes[K] } & { [K in keyof DsShellApp & keyof DsShellAppAttributes as `prop:${K}`]?: DsShellApp[K] };
         "ds-shell-gradient-picker": Omit<DsShellGradientPicker, keyof DsShellGradientPickerAttributes> & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes]?: DsShellGradientPicker[K] } & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes as `attr:${K}`]?: DsShellGradientPickerAttributes[K] } & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes as `prop:${K}`]?: DsShellGradientPicker[K] };
         "ds-shell-gradient-swatch": Omit<DsShellGradientSwatch, keyof DsShellGradientSwatchAttributes> & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes]?: DsShellGradientSwatch[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `attr:${K}`]?: DsShellGradientSwatchAttributes[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `prop:${K}`]?: DsShellGradientSwatch[K] };
-        "ds-shell-mobile-bar": Omit<DsShellMobileBar, keyof DsShellMobileBarAttributes> & { [K in keyof DsShellMobileBar & keyof DsShellMobileBarAttributes]?: DsShellMobileBar[K] } & { [K in keyof DsShellMobileBar & keyof DsShellMobileBarAttributes as `attr:${K}`]?: DsShellMobileBarAttributes[K] } & { [K in keyof DsShellMobileBar & keyof DsShellMobileBarAttributes as `prop:${K}`]?: DsShellMobileBar[K] };
-        "ds-shell-mobile-nav": Omit<DsShellMobileNav, keyof DsShellMobileNavAttributes> & { [K in keyof DsShellMobileNav & keyof DsShellMobileNavAttributes]?: DsShellMobileNav[K] } & { [K in keyof DsShellMobileNav & keyof DsShellMobileNavAttributes as `attr:${K}`]?: DsShellMobileNavAttributes[K] } & { [K in keyof DsShellMobileNav & keyof DsShellMobileNavAttributes as `prop:${K}`]?: DsShellMobileNav[K] };
-        "ds-shell-mobile-section-nav": Omit<DsShellMobileSectionNav, keyof DsShellMobileSectionNavAttributes> & { [K in keyof DsShellMobileSectionNav & keyof DsShellMobileSectionNavAttributes]?: DsShellMobileSectionNav[K] } & { [K in keyof DsShellMobileSectionNav & keyof DsShellMobileSectionNavAttributes as `attr:${K}`]?: DsShellMobileSectionNavAttributes[K] } & { [K in keyof DsShellMobileSectionNav & keyof DsShellMobileSectionNavAttributes as `prop:${K}`]?: DsShellMobileSectionNav[K] };
         "ds-shell-page": Omit<DsShellPage, keyof DsShellPageAttributes> & { [K in keyof DsShellPage & keyof DsShellPageAttributes]?: DsShellPage[K] } & { [K in keyof DsShellPage & keyof DsShellPageAttributes as `attr:${K}`]?: DsShellPageAttributes[K] } & { [K in keyof DsShellPage & keyof DsShellPageAttributes as `prop:${K}`]?: DsShellPage[K] };
         "ds-shell-tools": Omit<DsShellTools, keyof DsShellToolsAttributes> & { [K in keyof DsShellTools & keyof DsShellToolsAttributes]?: DsShellTools[K] } & { [K in keyof DsShellTools & keyof DsShellToolsAttributes as `attr:${K}`]?: DsShellToolsAttributes[K] } & { [K in keyof DsShellTools & keyof DsShellToolsAttributes as `prop:${K}`]?: DsShellTools[K] };
         "ds-skeleton": Omit<DsSkeleton, keyof DsSkeletonAttributes> & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes]?: DsSkeleton[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `attr:${K}`]?: DsSkeletonAttributes[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `prop:${K}`]?: DsSkeleton[K] };
@@ -7687,6 +7835,10 @@ declare module "@stencil/core" {
             "ds-message-bubble": LocalJSX.IntrinsicElements["ds-message-bubble"] & JSXBase.HTMLAttributes<HTMLDsMessageBubbleElement>;
             "ds-message-composer": LocalJSX.IntrinsicElements["ds-message-composer"] & JSXBase.HTMLAttributes<HTMLDsMessageComposerElement>;
             "ds-message-scroller": LocalJSX.IntrinsicElements["ds-message-scroller"] & JSXBase.HTMLAttributes<HTMLDsMessageScrollerElement>;
+            "ds-mobile-bar-nav": LocalJSX.IntrinsicElements["ds-mobile-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsMobileBarNavElement>;
+            "ds-mobile-header": LocalJSX.IntrinsicElements["ds-mobile-header"] & JSXBase.HTMLAttributes<HTMLDsMobileHeaderElement>;
+            "ds-mobile-section-switcher": LocalJSX.IntrinsicElements["ds-mobile-section-switcher"] & JSXBase.HTMLAttributes<HTMLDsMobileSectionSwitcherElement>;
+            "ds-mobile-sheet-nav": LocalJSX.IntrinsicElements["ds-mobile-sheet-nav"] & JSXBase.HTMLAttributes<HTMLDsMobileSheetNavElement>;
             "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
             "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
             "ds-panel-sub-nav": LocalJSX.IntrinsicElements["ds-panel-sub-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelSubNavElement>;
@@ -7706,9 +7858,6 @@ declare module "@stencil/core" {
              * @deprecated Use `ds-swatch-picker`; individual swatches are implementation detail.
              */
             "ds-shell-gradient-swatch": LocalJSX.IntrinsicElements["ds-shell-gradient-swatch"] & JSXBase.HTMLAttributes<HTMLDsShellGradientSwatchElement>;
-            "ds-shell-mobile-bar": LocalJSX.IntrinsicElements["ds-shell-mobile-bar"] & JSXBase.HTMLAttributes<HTMLDsShellMobileBarElement>;
-            "ds-shell-mobile-nav": LocalJSX.IntrinsicElements["ds-shell-mobile-nav"] & JSXBase.HTMLAttributes<HTMLDsShellMobileNavElement>;
-            "ds-shell-mobile-section-nav": LocalJSX.IntrinsicElements["ds-shell-mobile-section-nav"] & JSXBase.HTMLAttributes<HTMLDsShellMobileSectionNavElement>;
             "ds-shell-page": LocalJSX.IntrinsicElements["ds-shell-page"] & JSXBase.HTMLAttributes<HTMLDsShellPageElement>;
             "ds-shell-tools": LocalJSX.IntrinsicElements["ds-shell-tools"] & JSXBase.HTMLAttributes<HTMLDsShellToolsElement>;
             "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;