@ds-mo/ui 12.3.0 → 12.4.0

package/dist/react/ds-shell-mobile-nav.js

@@ -0,0 +1,17 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellMobileNav as DsShellMobileNavElement, defineCustomElement as defineDsShellMobileNav } from "@ds-mo/ui/dist/components/ds-shell-mobile-nav.js";
+export const DsShellMobileNav = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-mobile-nav',
+    elementClass: DsShellMobileNavElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsAreaSelect: 'dsAreaSelect',
+        onDsBrowseContextChange: 'dsBrowseContextChange',
+        onDsAuxiliarySelect: 'dsAuxiliarySelect',
+        onDsClose: 'dsClose'
+    },
+    defineCustomElement: defineDsShellMobileNav
+});

package/dist/react/ds-shell-mobile-section-nav.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 '@stencil/react-output-target/runtime';
+import { type DsShellMobileSectionNavCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellMobileSectionNav as DsShellMobileSectionNavElement } from "@ds-mo/ui/dist/components/ds-shell-mobile-section-nav.js";
+export type DsShellMobileSectionNavEvents = {
+    onDsTabChange: EventName<DsShellMobileSectionNavCustomEvent<string>>;
+};
+export declare const DsShellMobileSectionNav: StencilReactComponent<DsShellMobileSectionNavElement, DsShellMobileSectionNavEvents, Components.DsShellMobileSectionNav>;

package/dist/react/ds-shell-mobile-section-nav.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellMobileSectionNav as DsShellMobileSectionNavElement, defineCustomElement as defineDsShellMobileSectionNav } from "@ds-mo/ui/dist/components/ds-shell-mobile-section-nav.js";
+export const DsShellMobileSectionNav = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-mobile-section-nav',
+    elementClass: DsShellMobileSectionNavElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsTabChange: 'dsTabChange' },
+    defineCustomElement: defineDsShellMobileSectionNav
+});

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

@@ -0,0 +1,25 @@
+/**
+ * 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 '@stencil/react-output-target/runtime';
+import { type DsShellToolsCustomEvent, type PanelToolsToolId } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellTools as DsShellToolsElement } from "@ds-mo/ui/dist/components/ds-shell-tools.js";
+export type DsShellToolsEvents = {
+    onDsToolChange: EventName<DsShellToolsCustomEvent<{
+        id: PanelToolsToolId;
+        selected: boolean;
+    }>>;
+    onDsPresentationChange: EventName<DsShellToolsCustomEvent<{
+        presentation: 'drawer' | 'fullscreen';
+    }>>;
+    onDsHeaderBack: EventName<DsShellToolsCustomEvent<{
+        tool: PanelToolsToolId;
+    }>>;
+    onDsHeaderAction: EventName<DsShellToolsCustomEvent<{
+        tool: PanelToolsToolId;
+        id: string;
+    }>>;
+};
+export declare const DsShellTools: StencilReactComponent<DsShellToolsElement, DsShellToolsEvents, Components.DsShellTools>;

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

@@ -0,0 +1,17 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellTools as DsShellToolsElement, defineCustomElement as defineDsShellTools } from "@ds-mo/ui/dist/components/ds-shell-tools.js";
+export const DsShellTools = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-tools',
+    elementClass: DsShellToolsElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsToolChange: 'dsToolChange',
+        onDsPresentationChange: 'dsPresentationChange',
+        onDsHeaderBack: 'dsHeaderBack',
+        onDsHeaderAction: 'dsHeaderAction'
+    },
+    defineCustomElement: defineDsShellTools
+});

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

@@ -1,5 +1,7 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
 import { type ShellGradientPreset } from '../../shell/shell-gradient-presets';
+import { type ShellMobileDestination, type ShellResponsiveMode } from '../../shell/shell-responsive';
 export declare class ShellApp {
     /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
     navStyle: NavChromeStyle;
@@ -10,9 +12,19 @@ export declare class ShellApp {
     gradientPreset: ShellGradientPreset;
     /** 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. */
     shortcutsEnabled: boolean;
+    /** Controlled mobile surface shown above the persistent bottom bar. */
+    mobileDestination: ShellMobileDestination;
+    /** Controlled full-stage mobile navigation-pane state. */
+    mobileNavigationOpen: boolean;
+    /** Emitted after crossing the fixed 768px or 1200px shell boundaries. */
+    dsResponsiveModeChange: EventEmitter<{
+        mode: ShellResponsiveMode;
+    }>;
     el: HTMLElement;
     private toolsFullscreen;
+    private resolvedMode;
     private resizeObserver;
+    private hasLoaded;
     private readonly panelNavTransition;
     private readonly chromeSyncCoalescer;
     private panelWidthTokens;
@@ -20,17 +32,21 @@ export declare class ShellApp {
     private cachedViewportHeight;
     private onWindowResize;
     private onVisualViewportChange;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     handleToolsPresentation(event: CustomEvent<{
         presentation?: string;
     }>): void;
     disconnectedCallback(): void;
     onShellPropsChange(): void;
+    onMobileStateChange(_next: unknown, previous: unknown): void;
+    private updateResponsiveMode;
     private onChromeTransitionStart;
     private onChromeTransitionEnd;
     /** Coalesce ResizeObserver bursts to one layout read per frame. */
     private scheduleChromeSync;
     private syncSlottedNavStyle;
+    private syncSlottedMobileState;
     private connectMetricsObserver;
     private connectViewportListeners;
     private disconnectViewportListeners;

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

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ShellMobileDestination } from '../../shell/shell-responsive';
+import type { PanelNavItem } from '../PanelNav/panel-nav-types';
+import type { ShellMobileBarDestinationDetail } from './shell-mobile-bar-types';
+export declare class ShellMobileBar {
+    el: HTMLElement;
+    activeDestination: ShellMobileDestination;
+    currentArea: PanelNavItem;
+    navigationExpanded: boolean;
+    menuLabel: string;
+    searchLabel: string;
+    agentsLabel: string;
+    inboxLabel: string;
+    searchDot: boolean;
+    agentsDot: boolean;
+    inboxDot: boolean;
+    dsNavigationToggle: EventEmitter<boolean>;
+    dsDestinationChange: EventEmitter<ShellMobileBarDestinationDetail>;
+    private destinationConfig;
+    private selectDestination;
+    focusDestination(destination: ShellMobileDestination | 'navigation'): Promise<void>;
+    private renderDestination;
+    render(): any;
+}
+//# sourceMappingURL=ShellMobileBar.d.ts.map

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

@@ -0,0 +1,4 @@
+export type { ShellMobileBarDestinationDetail } from './shell-mobile-bar-types';
+export type { PanelNavItem } from '../PanelNav/panel-nav-types';
+export type { ShellMobileDestination } from '../../shell/shell-responsive';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ShellMobileBar/shell-mobile-bar-types.d.ts

@@ -0,0 +1,5 @@
+import type { ShellMobileDestination } from '../../shell/shell-responsive';
+export interface ShellMobileBarDestinationDetail {
+    destination: ShellMobileDestination;
+}
+//# sourceMappingURL=shell-mobile-bar-types.d.ts.map

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { NavChromeStyle } from '../../shell/nav-chrome';
+import type { PanelNavGroup } from '../PanelNav/panel-nav-types';
+import type { ShellMobileNavAuxiliaryDetail } from './shell-mobile-nav-types';
+export declare class ShellMobileNav {
+    el: HTMLElement;
+    open: boolean;
+    browseContext: NavChromeStyle;
+    dashboardGroups: PanelNavGroup[];
+    settingsGroups: PanelNavGroup[];
+    currentUrl: string;
+    heading: string;
+    navigationLabel: string;
+    dashboardLabel: string;
+    settingsLabel: string;
+    accountLabel: string;
+    helpLabel: string;
+    dsAreaSelect: EventEmitter<string>;
+    dsBrowseContextChange: EventEmitter<NavChromeStyle>;
+    dsAuxiliarySelect: EventEmitter<ShellMobileNavAuxiliaryDetail>;
+    dsClose: EventEmitter<void>;
+    private get groups();
+    private get items();
+    private get activeId();
+    handleOpenChange(open: boolean): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private handleContextChange;
+    private selectAuxiliary;
+    private renderGroup;
+    render(): any;
+}
+//# sourceMappingURL=ShellMobileNav.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { ShellMobileNavAuxiliaryDetail, ShellMobileNavAuxiliaryId, } from './shell-mobile-nav-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ShellMobileNav/shell-mobile-nav-types.d.ts

@@ -0,0 +1,6 @@
+export type ShellMobileNavAuxiliaryId = 'account' | 'help';
+export interface ShellMobileNavAuxiliaryDetail {
+    id: ShellMobileNavAuxiliaryId;
+    anchor: HTMLElement;
+}
+//# sourceMappingURL=shell-mobile-nav-types.d.ts.map

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

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BarNavTab } from '../BarNav/bar-nav-types';
+export declare class ShellMobileSectionNav {
+    el: HTMLElement;
+    /** Route sections shared with the corresponding desktop BarNav. */
+    tabs: BarNavTab[];
+    /** JSON fallback for `tabs`. */
+    tabsJson: string;
+    /** Controlled selected tab when URL-derived selection is unavailable. */
+    value: string;
+    /** Active primary-area label shown when the route has no section row. */
+    heading: string | undefined;
+    /** Section base path used to derive the selected route tab. */
+    basePath: string;
+    /** Current application route. */
+    currentUrl: string;
+    navigationLabel: string;
+    /** Route intent; the application owns navigation. */
+    dsTabChange: EventEmitter<string>;
+    private lastScrolledValue;
+    private get resolvedTabs();
+    private get urlState();
+    private get effectiveValue();
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    private scrollSelectedIntoView;
+    private selectTab;
+    render(): any;
+}
+//# sourceMappingURL=ShellMobileSectionNav.d.ts.map

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

@@ -0,0 +1,2 @@
+export { ShellMobileSectionNav } from './ShellMobileSectionNav';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type PanelToolsHeaders, type PanelToolsItem, type PanelToolsToolId } from '../PanelTools/panel-tools-types';
+import { type ShellResponsiveMode } from '../../shell/shell-responsive';
+export declare class ShellTools {
+    el: HTMLElement;
+    /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */
+    responsiveMode: ShellResponsiveMode;
+    open: boolean;
+    activeTool: PanelToolsToolId | '';
+    presentation: 'drawer' | 'fullscreen';
+    fullscreenHeaderMode: 'shared' | 'split';
+    items: PanelToolsItem[];
+    itemsJson: string;
+    headers: PanelToolsHeaders;
+    headersJson: string;
+    storageKey: string;
+    toolsLabel: string;
+    toolShortcutsLabel: string;
+    inboxLabel: string;
+    inboxNavigationLabel: string;
+    dsToolChange: EventEmitter<{
+        id: PanelToolsToolId;
+        selected: boolean;
+    }>;
+    dsPresentationChange: EventEmitter<{
+        presentation: 'drawer' | 'fullscreen';
+    }>;
+    dsHeaderBack: EventEmitter<{
+        tool: PanelToolsToolId;
+    }>;
+    dsHeaderAction: EventEmitter<{
+        tool: PanelToolsToolId;
+        id: string;
+    }>;
+    private panelToolsEl;
+    private get resolvedItems();
+    private get availableInboxTools();
+    private get mobileActiveTool();
+    componentWillLoad(): void;
+    handleItemsChange(): void;
+    private reconcileAvailability;
+    private resolvedHeaders;
+    private activeHeader;
+    private activateMobileTool;
+    private selectInboxTool;
+    private handlePanelToolChange;
+    private handlePanelPresentationChange;
+    private handleMobileHeaderAction;
+    /** Match PanelTools' imperative activation contract in every responsive mode. */
+    activateTool(id: PanelToolsToolId): Promise<void>;
+    /** Close the active global tool surface. */
+    closeDrawer(): Promise<void>;
+    /** Focus an application-owned action in the visible shared tool header. */
+    focusHeaderAction(id: string): Promise<void>;
+    private renderForwardedSlots;
+    private renderDesktop;
+    private renderMobileHeader;
+    private renderMobile;
+    render(): any;
+}
+//# sourceMappingURL=ShellTools.d.ts.map

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

@@ -0,0 +1,3 @@
+export { ShellTools } from './ShellTools';
+export type { PanelToolsHeaderAction, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId, } from '../PanelTools/panel-tools-types';
+//# sourceMappingURL=index.d.ts.map