@ds-mo/ui 14.21.0 → 14.22.0

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.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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.21.0",
+  "version": "14.22.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/p-CEnoPUn5.js

@@ -1,2 +0,0 @@
-import{p as e,H as n,c as a,h as s,a as i,t}from"./index.js";import{r as o,p as r,a as d,d as l,s as c,b as v}from"./p-rw0ZxIE4.js";import{c as p}from"./p-CUL5_8JM.js";import{r as h}from"./p-rCeztgVn.js";import{d as f}from"./p-DzPtYdXy.js";import{d as g}from"./p-DSy1oOnd.js";import{d as u}from"./p-Cea7rROU.js";import{d as m}from"./p-0XTyQNRG.js";import{d as b}from"./p-Cd1JnnVK.js";import{d as _}from"./p-pnO8tAYB.js";function x(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--scroll-aware":e.scrollAware===true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:s}=e;if(s===true){a["scroll-edge-fade--at-end"]=true}else if(s&&typeof s==="object"){for(const e of n){if(s[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const y={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const w="data-nav-style";function k(e){if(e==="dashboard"||e==="settings")return e;return undefined}function z(e,n,a){const s=k(n);if(s)return s;const i=typeof document!=="undefined"?document.documentElement.getAttribute(w):null;const t=k(i);if(t)return t;return e}function C(e,n){return e!==n}const A="ds-panel-nav-user-menu-anchor";const I=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation:none}}}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-panel-nav{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const N=()=>`.ds-control--lg.sc-ds-panel-nav,.ds-control--lg.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav,.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav,.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-nav-h,.ds-control--lg.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-nav-h,.ds-chrome-space--sm.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-nav-h,.ds-chrome-space--md.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-nav-h,.ds-chrome-space--lg.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav,.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav,.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav{flex-direction:column}.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-panel-nav:root,.sc-ds-panel-nav-h,.ds-forced-colors-scope.sc-ds-panel-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-nav-h,.ds-focus-ring.sc-ds-panel-nav,.ds-focus-ring-inset.sc-ds-panel-nav-h,.ds-focus-ring-inset.sc-ds-panel-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-panel-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-nav:root,.sc-ds-panel-nav-h,.ds-forced-colors-scope.sc-ds-panel-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-panel-nav-h::after,.ds-interaction-fill--grouped.sc-ds-panel-nav::after,.ds-interaction-fill--grouped.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-panel-nav-h,.ds-interaction-fill--grouped.sc-ds-panel-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-panel-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-panel-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-panel-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-panel-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-panel-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-panel-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-panel-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-scrollbar-hidden.sc-ds-panel-nav-h,.ds-scrollbar-hidden.sc-ds-panel-nav{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-nav-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(     var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px)   );--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur)     var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(     var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms)   );--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur)     var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}ds-shell-app.sc-ds-panel-nav-h:not([gradient-preset='none']) .panel-nav.sc-ds-panel-nav,ds-shell-app:not([gradient-preset='none']) .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-shell-app.shell-app--paper-texture.sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-shell-app.shell-app--paper-texture .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family-ui, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{height:var(--dimension-size-600, 48px);flex-shrink:0;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--breakpoint-locked.sc-ds-panel-nav .panel-nav__header-btn.sc-ds-panel-nav{cursor:default}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}@media (hover: hover) and (pointer: fine){.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden}.panel-nav__sections.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);width:100%}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}ds-text.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;box-sizing:border-box;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;color:var(--_nav-fg-secondary);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;flex:1;min-width:0;height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--ds-control-label-inset)}.panel-nav__item-dot-box.sc-ds-panel-nav{position:absolute;z-index:2;right:var(--dimension-space-075, 6px);top:var(--dimension-space-075, 6px);display:flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);pointer-events:none}.panel-nav__item-dot.sc-ds-panel-nav{transition:transform var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{transform:translate(     calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),     calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))   )}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav ds-text.panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(     var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px)   )}.panel-nav__footer-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav::after{background:var(--_nav-pressed)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav{--ds-interaction-hover:var(--_nav-pressed)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:calc(100% - var(--_nav-padding-x) - var(--_nav-item-height));top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(     var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) +       var(--dimension-space-050, 4px)   );top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}ds-text.panel-nav__user-initial.sc-ds-panel-nav,ds-text.panel-nav__user-initial.ds-text--caption.sc-ds-panel-nav{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%);display:block;width:max-content;max-width:none;min-width:0;text-align:center;color:inherit;pointer-events:none}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const S=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect",7);this.dsNavToggle=a(this,"dsNavToggle",7);this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart",7);this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd",7);this.dsNavFooterAction=a(this,"dsNavFooterAction",7);this.dsNavUserAction=a(this,"dsNavUserAction",7);this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.accountMenuExpanded=false;this.dashboardNavigationLabel="Dashboard navigation";this.settingsNavigationLabel="Settings navigation";this.expandNavigationLabel="Expand navigation";this.collapseNavigationLabel="Collapse navigation";this.navigationItemsLabel="Navigation items";this.renderedStyle="dashboard";this.parsedGroups=[];this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.bodyScrollable=false;this.transitionFallbackTimer=null;this.initialRenderComplete=false;this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return o(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined||!this.initialRenderComplete)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined||!this.initialRenderComplete)return;if(e&&this.rovingIndex===0){this.rovingIndex=this.getFirstRovingIndex()}this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.effectiveBreakpoint()>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=r(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=z(this.navStyle,this.el.getAttribute("nav-style"));this.viewportNarrow=this.isViewportNarrow();if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();if(this.effectiveBreakpoint()>0)this.connectResizeObserver();this.connectScrollRegionObserver();this.updateBodyScrollable();this.initialRenderComplete=true}componentDidRender(){this.updateBodyScrollable()}disconnectedCallback(){this.disconnectResizeObserver();this.disconnectScrollRegionObserver();this.clearCollapseAnimationCompletion(this.el.querySelector(".panel-nav"));this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){if(this.isAnimating)return;this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const n=e?.getBoundingClientRect().width??0;this.clearCollapseAnimationCompletion(e);this.transitionCompletionHandler=n=>{if(n.propertyName==="width"||n.propertyName==="min-width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionCompletionHandler);e?.addEventListener("transitioncancel",this.transitionCompletionHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e);return}if(!e){this.finishCollapseAnimation(e);return}const s=d(getComputedStyle(e));if(s<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),s)}))}))}finishCollapseAnimation(e){const n=this.isAnimating;this.clearCollapseAnimationCompletion(e);if(!n)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"})}clearCollapseAnimationCompletion(e){if(this.transitionCompletionHandler){e?.removeEventListener("transitionend",this.transitionCompletionHandler);e?.removeEventListener("transitioncancel",this.transitionCompletionHandler);this.transitionCompletionHandler=undefined}if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}effectiveBreakpoint(){if(this.breakpoint>0)return this.breakpoint;const e=Number(this.el.getAttribute("breakpoint")??0);return Number.isFinite(e)&&e>0?e:0}isViewportNarrow(){const e=this.effectiveBreakpoint();return typeof window!=="undefined"&&e>0&&window.innerWidth<e}connectResizeObserver(){this.viewportNarrow=this.isViewportNarrow();this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=this.isViewportNarrow()}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}connectScrollRegionObserver(){this.disconnectScrollRegionObserver();if(!this.bodyEl||typeof ResizeObserver==="undefined")return;this.scrollRegionObserver=new ResizeObserver((()=>this.updateBodyScrollable()));this.scrollRegionObserver.observe(this.bodyEl)}disconnectScrollRegionObserver(){this.scrollRegionObserver?.disconnect();this.scrollRegionObserver=undefined}updateBodyScrollable(){const e=Boolean(this.bodyEl&&this.bodyEl.scrollHeight>this.bodyEl.clientHeight+1);if(e!==this.bodyScrollable)this.bodyScrollable=e}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=l(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(C(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(c(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){requestAnimationFrame(a)}};queueMicrotask(a)}applyToggle(e){if(this.viewportNarrow)return;this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFirstRovingIndex(){return this.viewportNarrow?1:0}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.viewportNarrow?null:this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-unfilled")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const n=this.getAllItems().length;const a=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=n){this.handleItemClick(a[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${A}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:y})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const s=this.getUserRovingIndex();const i=this.getFirstRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===s)return;if(n===a)t=s;else t=n+1;break;case"ArrowUp":if(n===i)return;if(n===s)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=s;else return;break;case"ArrowLeft":if(n===s)t=a;else return;break;case"Home":e.preventDefault();t=i;break;case"End":e.preventDefault();t=s;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=v(this.collapsed,this.viewportNarrow);if(e!==null)this.applyToggle(e)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:y})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(p()){this.showEdgeOverlay=true;return}this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const n=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const s=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",a);window.removeEventListener("mouseup",s);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=s;window.addEventListener("mousemove",a);window.addEventListener("mouseup",s)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return s("ds-tooltip",{label:n,side:"right",size:"sm"},s("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const i=e?this.accountLabel:"";const t=s("button",{type:"button",id:A,class:{"panel-nav__item":true,"panel-nav__footer-user":true,"panel-nav__footer-user--menu-expanded":this.accountMenuExpanded,"ds-focus-ring-inset":true,"ds-interaction-fill":true},tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":this.accountLabel,"aria-haspopup":"menu","aria-expanded":String(this.accountMenuExpanded),onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},s("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},n),s("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},s("span",{class:"panel-nav__footer-icon-expanded"},s("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),s("span",{class:"panel-nav__footer-icon-collapsed"},s("ds-icon",{name:"Circle",size:"md",color:"inherit"}),s("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return s("ds-tooltip",{label:i,side:"right",size:"sm"},t)}renderNavItem(e,n,a){const i=e.id===this.effectiveActiveId;const t=n+1;const o=[s("span",{class:"panel-nav__item-icon"},s("ds-icon",{name:e.icon,size:"md",color:"inherit"})),s("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:i,color:"inherit",lineTruncation:1},e.label),e.dot&&s("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},s("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":i,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i?"page":undefined,tabIndex:t===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,t),onFocus:()=>{this.rovingIndex=t}};const d=h(e.href);const l=this.routerMode==="anchor"&&d;const c=l?s("a",{...r,href:d},o):s("button",{...r,type:"button"},o);return s("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},c)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const t=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const d={"panel-nav":true,"ds-control--md":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":t,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return s(i,{key:"403e8c1fc584ba4633fbee7b9d97ba0392af8246",style:{display:"block",position:"relative"}},s("nav",{key:"6d74556e001518e3cdc261cbbb6fc8a9c5c75356",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},s("div",{key:"642c69505cb075d12dd334aeb447f01ff6360ca8",class:"panel-nav__header ds-chrome-row ds-chrome-space--md"},s("button",{key:"6d3ddde5c242237841e0582d2f568768d1d6dc8f",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",disabled:this.viewportNarrow,tabIndex:!this.viewportNarrow&&this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":t?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":t?"false":"true"},s("span",{key:"296c3e080417b0559271e9594eea0a7729c5cc23",class:"panel-nav__header-logo","aria-hidden":"true"},s("svg",{key:"ffab5e40e933ce559d2c9eef6e53d88b8414357d",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},s("path",{key:"9d986b60ef1004f5336f93f0a52c4f6eb97c88f4",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),s("span",{key:"dba84fdd814c9453a1916de01e5a93c87933c0bd",class:"panel-nav__header-toggle","aria-hidden":"true"},s("ds-icon",{key:"cfafa255f4b4af7c0450ff716fb5db027bf16093",name:t?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),s("div",{key:"139d0a0d265a1c6008bf3f3166ed603ffa6e1998",class:{"panel-nav__body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.bodyScrollable,...x({edges:"bottom"})},ref:e=>{const n=e??undefined;if(n===this.bodyEl)return;this.bodyEl=n;this.connectScrollRegionObserver()},role:this.bodyScrollable?"region":undefined,"aria-label":this.bodyScrollable?this.navigationItemsLabel:undefined,tabIndex:this.bodyScrollable?0:undefined},s("div",{key:"f829f479f8479b910b5fe88ee8b9160942749a42",class:"panel-nav__sections"},(()=>{let e=0;return this.parsedGroups.map((n=>s("div",{class:"panel-nav__group"},n.label&&s("ds-text",{class:"panel-nav__group-label ds-control--md",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},n.label),n.items.map((n=>this.renderNavItem(n,e++,t))))))})())),s("div",{key:"d325361aeca08ccb21dcce3b9770f3d2ea573375",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(t,o,r))),!this.viewportNarrow&&s("div",{key:"b033e4a4b32ca2a59acced35d9168f3a1b290f8e",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return I()+N()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],accountMenuExpanded:[4,"account-menu-expanded"],dashboardNavigationLabel:[1,"dashboard-navigation-label"],settingsNavigationLabel:[1,"settings-navigation-label"],expandNavigationLabel:[1,"expand-navigation-label"],collapseNavigationLabel:[1,"collapse-navigation-label"],navigationItemsLabel:[1,"navigation-items-label"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],bodyScrollable:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);S.HOST_PROP_SYNC_BUDGET=8;function D(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(t(e))){customElements.define(t(e),S)}break;case"ds-badge":if(!customElements.get(t(e))){f()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){g()}break;case"ds-icon":if(!customElements.get(t(e))){u()}break;case"ds-loader":if(!customElements.get(t(e))){m()}break;case"ds-text":if(!customElements.get(t(e))){b()}break;case"ds-tooltip":if(!customElements.get(t(e))){_()}break}}))}D();export{S as P,D as d};
-//# sourceMappingURL=p-CEnoPUn5.js.map