@ds-mo/ui 14.20.0 → 14.22.0

package/dist/react/components.d.ts

@@ -67,7 +67,9 @@ export { DsSwatchPicker } from "./ds-swatch-picker.js";
 export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTableFilter } from "./ds-table-filter.js";
+export { DsTableGroup } from "./ds-table-group.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
+export { DsTableSearch } from "./ds-table-search.js";
 export { DsTableSort } from "./ds-table-sort.js";
 export { DsTableToolbar } from "./ds-table-toolbar.js";
 export { DsTable } from "./ds-table.js";

package/dist/react/components.js

@@ -68,7 +68,9 @@ export { DsSwatchPicker } from "./ds-swatch-picker.js";
 export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTableFilter } from "./ds-table-filter.js";
+export { DsTableGroup } from "./ds-table-group.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
+export { DsTableSearch } from "./ds-table-search.js";
 export { DsTableSort } from "./ds-table-sort.js";
 export { DsTableToolbar } from "./ds-table-toolbar.js";
 export { DsTable } from "./ds-table.js";

package/dist/react/ds-filter-menu.d.ts

@@ -3,12 +3,13 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsFilterMenuCustomEvent, type FilterMenuChangeDetail } from "@ds-mo/ui";
+import { type DsFilterMenuCustomEvent, type FilterMenuChangeDetail, type FilterMenuMatchModeChangeDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsFilterMenu as DsFilterMenuElement } from "@ds-mo/ui/dist/components/ds-filter-menu.js";
 export type DsFilterMenuEvents = {
     onDsChange: EventName<DsFilterMenuCustomEvent<FilterMenuChangeDetail>>;
     onDsClear: EventName<DsFilterMenuCustomEvent<void>>;
+    onDsMatchModeChange: EventName<DsFilterMenuCustomEvent<FilterMenuMatchModeChangeDetail>>;
     onDsActiveFilterChange: EventName<DsFilterMenuCustomEvent<string>>;
     onDsClose: EventName<DsFilterMenuCustomEvent<void>>;
     onDsOpenChange: EventName<DsFilterMenuCustomEvent<boolean>>;

package/dist/react/ds-filter-menu.js

@@ -10,6 +10,7 @@ export const DsFilterMenu = /*@__PURE__*/ createComponent({
     events: {
         onDsChange: 'dsChange',
         onDsClear: 'dsClear',
+        onDsMatchModeChange: 'dsMatchModeChange',
         onDsActiveFilterChange: 'dsActiveFilterChange',
         onDsClose: 'dsClose',
         onDsOpenChange: 'dsOpenChange',

package/dist/react/ds-panel-nav.d.ts

@@ -3,11 +3,12 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type ChromeTransitionDetail, type DsPanelNavCustomEvent, type PanelNavUserActionDetail } from "@ds-mo/ui";
+import { type ChromeTransitionDetail, type DsPanelNavCustomEvent, type PanelNavChildSelectDetail, type PanelNavUserActionDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsPanelNav as DsPanelNavElement } from "@ds-mo/ui/dist/components/ds-panel-nav.js";
 export type DsPanelNavEvents = {
     onDsNavSelect: EventName<DsPanelNavCustomEvent<string>>;
+    onDsNavChildSelect: EventName<DsPanelNavCustomEvent<PanelNavChildSelectDetail>>;
     onDsNavToggle: EventName<DsPanelNavCustomEvent<boolean>>;
     onDsChromeTransitionStart: EventName<DsPanelNavCustomEvent<ChromeTransitionDetail>>;
     onDsChromeTransitionEnd: EventName<DsPanelNavCustomEvent<ChromeTransitionDetail>>;

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

@@ -9,6 +9,7 @@ export const DsPanelNav = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onDsNavSelect: 'dsNavSelect',
+        onDsNavChildSelect: 'dsNavChildSelect',
         onDsNavToggle: 'dsNavToggle',
         onDsChromeTransitionStart: 'dsChromeTransitionStart',
         onDsChromeTransitionEnd: 'dsChromeTransitionEnd',

package/dist/react/ds-shell-app.d.ts

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type BreadcrumbSelectDetail, type DsShellAppCustomEvent, type NavChromeStyle, type PanelNavUserActionDetail, type PanelToolsToolId, type ShellResponsiveMode } from "@ds-mo/ui";
+import { type BreadcrumbSelectDetail, type DsShellAppCustomEvent, type NavChromeStyle, type PanelNavChildSelectDetail, type PanelNavUserActionDetail, type PanelToolsToolId, type ShellResponsiveMode } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsShellApp as DsShellAppElement } from "@ds-mo/ui/dist/components/ds-shell-app.js";
 export type DsShellAppEvents = {
@@ -12,6 +12,7 @@ export type DsShellAppEvents = {
     }>>;
     onDsNavSelect: EventName<DsShellAppCustomEvent<string>>;
     onDsTabChange: EventName<DsShellAppCustomEvent<string>>;
+    onDsNavChildSelect: EventName<DsShellAppCustomEvent<PanelNavChildSelectDetail>>;
     onDsSubsectionChange: EventName<DsShellAppCustomEvent<string>>;
     onDsPageBack: EventName<DsShellAppCustomEvent<MouseEvent>>;
     onDsBreadcrumbSelect: EventName<DsShellAppCustomEvent<BreadcrumbSelectDetail>>;

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

@@ -11,6 +11,7 @@ export const DsShellApp = /*@__PURE__*/ createComponent({
         onDsResponsiveModeChange: 'dsResponsiveModeChange',
         onDsNavSelect: 'dsNavSelect',
         onDsTabChange: 'dsTabChange',
+        onDsNavChildSelect: 'dsNavChildSelect',
         onDsSubsectionChange: 'dsSubsectionChange',
         onDsPageBack: 'dsPageBack',
         onDsBreadcrumbSelect: 'dsBreadcrumbSelect',

package/dist/react/ds-table-filter.d.ts

@@ -3,12 +3,13 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsTableFilterCustomEvent, type FilterMenuChangeDetail } from "@ds-mo/ui";
+import { type DsTableFilterCustomEvent, type FilterMenuChangeDetail, type FilterMenuMatchModeChangeDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTableFilter as DsTableFilterElement } from "@ds-mo/ui/dist/components/ds-table-filter.js";
 export type DsTableFilterEvents = {
     onDsChange: EventName<DsTableFilterCustomEvent<FilterMenuChangeDetail>>;
     onDsClear: EventName<DsTableFilterCustomEvent<void>>;
+    onDsMatchModeChange: EventName<DsTableFilterCustomEvent<FilterMenuMatchModeChangeDetail>>;
     onDsActiveFilterChange: EventName<DsTableFilterCustomEvent<string>>;
     onDsClose: EventName<DsTableFilterCustomEvent<void>>;
     onDsOpenChange: EventName<DsTableFilterCustomEvent<boolean>>;

package/dist/react/ds-table-filter.js

@@ -10,6 +10,7 @@ export const DsTableFilter = /*@__PURE__*/ createComponent({
     events: {
         onDsChange: 'dsChange',
         onDsClear: 'dsClear',
+        onDsMatchModeChange: 'dsMatchModeChange',
         onDsActiveFilterChange: 'dsActiveFilterChange',
         onDsClose: 'dsClose',
         onDsOpenChange: 'dsOpenChange',

package/dist/react/ds-table-group.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsTableGroupCustomEvent, type TableGroupingState } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTableGroup as DsTableGroupElement } from "@ds-mo/ui/dist/components/ds-table-group.js";
+export type DsTableGroupEvents = {
+    onDsGroupChange: EventName<DsTableGroupCustomEvent<TableGroupingState>>;
+    onDsClear: EventName<DsTableGroupCustomEvent<void>>;
+    onDsOpenChange: EventName<DsTableGroupCustomEvent<boolean>>;
+};
+export declare const DsTableGroup: StencilReactComponent<DsTableGroupElement, DsTableGroupEvents, Components.DsTableGroup>;

package/dist/react/ds-table-group.js

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTableGroup as DsTableGroupElement, defineCustomElement as defineDsTableGroup } from "@ds-mo/ui/dist/components/ds-table-group.js";
+export const DsTableGroup = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-group',
+    elementClass: DsTableGroupElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsGroupChange: 'dsGroupChange',
+        onDsClear: 'dsClear',
+        onDsOpenChange: 'dsOpenChange'
+    },
+    defineCustomElement: defineDsTableGroup
+});

package/dist/react/ds-table-search.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsTableSearchCustomEvent, type TableSearchFieldsChangeDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTableSearch as DsTableSearchElement } from "@ds-mo/ui/dist/components/ds-table-search.js";
+export type DsTableSearchEvents = {
+    onDsChange: EventName<DsTableSearchCustomEvent<string>>;
+    onDsFieldsChange: EventName<DsTableSearchCustomEvent<TableSearchFieldsChangeDetail>>;
+    onDsClear: EventName<DsTableSearchCustomEvent<void>>;
+};
+export declare const DsTableSearch: StencilReactComponent<DsTableSearchElement, DsTableSearchEvents, Components.DsTableSearch>;

package/dist/react/ds-table-search.js

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTableSearch as DsTableSearchElement, defineCustomElement as defineDsTableSearch } from "@ds-mo/ui/dist/components/ds-table-search.js";
+export const DsTableSearch = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-search',
+    elementClass: DsTableSearchElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsChange: 'dsChange',
+        onDsFieldsChange: 'dsFieldsChange',
+        onDsClear: 'dsClear'
+    },
+    defineCustomElement: defineDsTableSearch
+});

package/dist/styles/table.css

@@ -432,6 +432,18 @@
   width: var(--dimension-size-500);
 }
 
+:where(.ds-table__elastic-spacer-column) {
+  inline-size: auto;
+  width: auto;
+}
+
+:where(.ds-table__elastic-spacer-cell) {
+  min-inline-size: 0;
+  inline-size: auto;
+  width: auto;
+  padding: 0;
+}
+
 :where(.ds-table__head) {
   position: relative;
   z-index: 1;
@@ -903,6 +915,35 @@
   min-block-size: 0;
 }
 
+/*
+ * Multiple Tags use the 20px small single-inset control so each wrapped line
+ * occupies one later-track slot. The 2px block inset forms the 24px first
+ * track; subsequent lines add a 20px track and 2px gap, preserving the named
+ * row ladder for any declared number of tracks.
+ */
+:where(.ds-table__cell--tags .ds-table__cell-content) {
+  min-block-size: 0;
+}
+
+:where(.ds-table__cell-tags) {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: center;
+  gap: var(--dimension-space-025);
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  min-block-size: var(--_table-cell-tags-min-block-size, var(--_table-cell-track-min-block-size));
+  padding-block: var(--dimension-space-025);
+}
+
+:where(.ds-table__cell-tags > ds-tag) {
+  flex: none;
+  max-inline-size: 100%;
+}
+
 :where(.ds-table__cell-tag-stack) {
   display: flex;
   flex-direction: column;
@@ -1057,6 +1098,11 @@
   overflow-wrap: anywhere;
 }
 
+:where(.ds-table__match) {
+  background-color: var(--color-background-faint-brand);
+  color: var(--color-foreground-bold-brand);
+}
+
 /*
  * Wrapping tracks must be block boxes so ds-text line-clamp (a -webkit-box
  * inner) can grow onto later tracks. Flex + line-clamp otherwise collapses

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';
-import { type BarTitleActionItem, type BarTitlePrimaryAction, type BarTitleSectionItem, type BarTitleVariant } from './bar-title-types';
+import { type BarTitleActionItem, type BarTitlePrimaryAction, type BarTitleSectionItem, type BarTitlePlacement, type BarTitleVariant } from './bar-title-types';
 export declare class BarTitle {
     el: HTMLElement;
     /** The page's single visible h1. */
@@ -31,6 +31,8 @@ export declare class BarTitle {
     actionsAriaLabel: string;
     /** Explicit visual/capacity variant. ShellPage owns automatic selection. */
     variant: BarTitleVariant;
+    /** Page-header placement, or compact application-shell bar placement. */
+    placement: BarTitlePlacement;
     /** Draw the page-title divider beneath the header. */
     showDivider: boolean;
     /** Override divider visibility for compact and constrained variants. */
@@ -58,6 +60,7 @@ export declare class BarTitle {
     handleSectionsChange(): void;
     handleActionsChange(): void;
     private get compact();
+    private get effectiveVariant();
     private get dividerVisible();
     private get expandedBreadcrumbItems();
     /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */

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

@@ -24,6 +24,7 @@ export interface BarTitlePrimaryAction extends BarTitleAction {
 }
 export type BarTitleActionItem = BarTitleAction | BarTitleDivider;
 export type BarTitleVariant = 'expanded' | 'compact' | 'constrained';
+export type BarTitlePlacement = 'page' | 'shell-bar';
 export type BarTitlePrimaryActionCollapse = 'auto' | 'never';
 export declare function isBarTitleDivider(item: BarTitleSectionItem | BarTitleActionItem): item is BarTitleDivider;
 //# sourceMappingURL=bar-title-types.d.ts.map

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

@@ -1,2 +1,2 @@
-export type { BarTitleAction, BarTitleActionItem, BarTitleDivider, BarTitlePrimaryActionCollapse, BarTitlePrimaryAction, BarTitleSection, BarTitleSectionItem, BarTitleVariant, } from './bar-title-types';
+export type { BarTitleAction, BarTitleActionItem, BarTitleDivider, BarTitlePrimaryActionCollapse, BarTitlePrimaryAction, BarTitleSection, BarTitleSectionItem, BarTitlePlacement, BarTitleVariant, } from './bar-title-types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type ControlInsetDepth } from '../../utils';
 /**
  * Semantic chip state — replaces Tag’s intent × contrast matrix.
  * - `default` — neutral faint
@@ -18,6 +19,10 @@ export declare class Chip {
     /** Semantic color state. @default 'default' */
     state: ChipState;
     size: ChipSize;
+    /** Use reduced outer geometry when nested inside a control of the same size. */
+    isInset: boolean;
+    /** Single removes 4px overall; double removes 8px overall (xs stays single). */
+    insetDepth: ControlInsetDepth;
     rounded: boolean;
     maxWidth: string | number | undefined;
     isInactive: boolean;

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

@@ -5,6 +5,7 @@ export type FilterMenuFilterKind = 'single' | 'multiple' | 'boolean' | 'date';
 export type FilterMenuSize = 'lg' | 'md' | 'sm' | 'xs';
 export type FilterMenuWidth = ControlWidth;
 export type FilterMenuFooterLayout = 'summary' | 'categories-clear';
+export type FilterMenuMatchMode = 'any' | 'all';
 export interface FilterMenuOption {
     label: string;
     value: string;
@@ -23,10 +24,15 @@ export interface FilterMenuFilter {
 }
 export type FilterMenuValue = string[] | boolean | string;
 export type FilterMenuValues = Record<string, FilterMenuValue | undefined>;
+export type FilterMenuMatchModes = Record<string, FilterMenuMatchMode | undefined>;
 export interface FilterMenuChangeDetail {
     filterId: string;
     value: FilterMenuValue;
 }
+export interface FilterMenuMatchModeChangeDetail {
+    filterId: string;
+    mode: FilterMenuMatchMode;
+}
 export declare class FilterMenu {
     el: HTMLElement;
     /** Controlled popup visibility. */
@@ -58,6 +64,8 @@ export declare class FilterMenu {
     filters: FilterMenuFilter[];
     /** Controlled values keyed by filter id. */
     values: FilterMenuValues;
+    /** Controlled any/all match mode keyed by multiple-choice filter id. Defaults to any. */
+    matchModes: FilterMenuMatchModes;
     /** Controlled category shown in the option pane. */
     activeFilterId: string | undefined;
     /** External trigger element to position against. */
@@ -82,6 +90,10 @@ export declare class FilterMenu {
     categoriesLabel: string;
     /** Footer action and date-clear accessible label. */
     clearLabel: string;
+    /** Placeholder shown in each non-date option search header. */
+    searchPlaceholder: string;
+    /** Empty-state text shown when an option search has no matches. */
+    noResultsText: string;
     /** Footer recipe: full-width selected summary or reserved category-pane Clear action. */
     footerLayout: FilterMenuFooterLayout;
     /** Show a visible focus ring on initial entry after keyboard activation. */
@@ -96,10 +108,14 @@ export declare class FilterMenu {
     private dateModeByFilter;
     private calendarMonthByFilter;
     private pendingRangeStartByFilter;
+    private previewRangeEndByFilter;
+    private optionQueryByFilter;
     /** Requests a controlled value replacement without closing the popup. */
     dsChange: EventEmitter<FilterMenuChangeDetail>;
     /** Requests that the consumer clear every filter value. */
     dsClear: EventEmitter<void>;
+    /** Requests a controlled any/all mode replacement for a multiple-choice filter. */
+    dsMatchModeChange: EventEmitter<FilterMenuMatchModeChangeDetail>;
     /** Requests a controlled active-category replacement. */
     dsActiveFilterChange: EventEmitter<string>;
     /** Requests that the controlled popup close. */
@@ -146,6 +162,11 @@ export declare class FilterMenu {
     private handleCategoryKeyDown;
     private handlePanelKeyDown;
     private handleOptionKeyDown;
+    private optionMatchesQuery;
+    private visibleOptions;
+    private booleanOption;
+    private setOptionQuery;
+    private handleOptionSearchKeyDown;
     private toggleMultiple;
     private selectOption;
     private dateMode;
@@ -153,17 +174,22 @@ export declare class FilterMenu {
     private calendarMonth;
     private moveCalendarMonth;
     private selectCalendarDate;
+    private previewCalendarRange;
+    private clearCalendarRangePreview;
     private focusCalendarDate;
     private handleCalendarDayKeyDown;
     private renderRelativeDateOptions;
     private renderDateCalendar;
     private renderDateFilter;
+    private renderOptionSearch;
+    private renderNoOptionResults;
     private renderOptions;
     private get captionIconOnly();
     private syncCaptionCompactObserver;
     private disconnectCaptionCompactObserver;
     private renderCaptionTooltip;
     private renderFooter;
+    private renderMatchModeFooter;
     render(): any;
 }
 //# sourceMappingURL=FilterMenu.d.ts.map

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

@@ -40,6 +40,8 @@ export declare class Input {
     width: InputWidth;
     /** Show the standard inset border, including focused and invalid strokes. */
     hasBorder: boolean;
+    /** Show the standard hover and pressed fill when the field is not embedded in interactive chrome. */
+    hasInteractionFill: boolean;
     /** Optional leading icon name. */
     icon: string | undefined;
     isInactive: boolean;
@@ -51,6 +53,10 @@ export declare class Input {
     ariaLabel: string | null;
     ariaLabelledby: string | undefined;
     ariaDescribedby: string | undefined;
+    /** Identifies the results or popup controlled by the editable field. */
+    ariaControls: string | undefined;
+    /** Identifies the active descendant while focus remains in the editable field. */
+    ariaActiveDescendant: string | undefined;
     dsChange: EventEmitter<string>;
     dsClear: EventEmitter<void>;
     private initialValue;

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

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

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

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

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

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

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

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

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

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