@ds-mo/ui 12.4.1 → 12.6.0

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

@@ -0,0 +1,15 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsMobileBarNav as DsMobileBarNavElement, defineCustomElement as defineDsMobileBarNav } from "@ds-mo/ui/dist/components/ds-mobile-bar-nav.js";
+export const DsMobileBarNav = /*@__PURE__*/ createComponent({
+    tagName: 'ds-mobile-bar-nav',
+    elementClass: DsMobileBarNavElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsSheetNavToggle: 'dsSheetNavToggle',
+        onDsDestinationChange: 'dsDestinationChange'
+    },
+    defineCustomElement: defineDsMobileBarNav
+});

package/dist/react/ds-mobile-header.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 DsMobileHeaderCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsMobileHeader as DsMobileHeaderElement } from "@ds-mo/ui/dist/components/ds-mobile-header.js";
+export type DsMobileHeaderEvents = {
+    onDsSectionChange: EventName<DsMobileHeaderCustomEvent<string>>;
+    onDsSubsectionChange: EventName<DsMobileHeaderCustomEvent<string>>;
+};
+export declare const DsMobileHeader: StencilReactComponent<DsMobileHeaderElement, DsMobileHeaderEvents, Components.DsMobileHeader>;

package/dist/react/ds-mobile-header.js

@@ -0,0 +1,15 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsMobileHeader as DsMobileHeaderElement, defineCustomElement as defineDsMobileHeader } from "@ds-mo/ui/dist/components/ds-mobile-header.js";
+export const DsMobileHeader = /*@__PURE__*/ createComponent({
+    tagName: 'ds-mobile-header',
+    elementClass: DsMobileHeaderElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsSectionChange: 'dsSectionChange',
+        onDsSubsectionChange: 'dsSubsectionChange'
+    },
+    defineCustomElement: defineDsMobileHeader
+});

package/dist/react/ds-mobile-section-switcher.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 DsMobileSectionSwitcherCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsMobileSectionSwitcher as DsMobileSectionSwitcherElement } from "@ds-mo/ui/dist/components/ds-mobile-section-switcher.js";
+export type DsMobileSectionSwitcherEvents = {
+    onDsChange: EventName<DsMobileSectionSwitcherCustomEvent<string>>;
+};
+export declare const DsMobileSectionSwitcher: StencilReactComponent<DsMobileSectionSwitcherElement, DsMobileSectionSwitcherEvents, Components.DsMobileSectionSwitcher>;

package/dist/react/ds-mobile-section-switcher.js

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

package/dist/react/ds-mobile-sheet-nav.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 '@stencil/react-output-target/runtime';
+import { type DsMobileSheetNavCustomEvent, type NavChromeStyle } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsMobileSheetNav as DsMobileSheetNavElement } from "@ds-mo/ui/dist/components/ds-mobile-sheet-nav.js";
+export type DsMobileSheetNavEvents = {
+    onDsAreaSelect: EventName<DsMobileSheetNavCustomEvent<string>>;
+    onDsBrowseContextChange: EventName<DsMobileSheetNavCustomEvent<NavChromeStyle>>;
+    onDsClose: EventName<DsMobileSheetNavCustomEvent<void>>;
+};
+export declare const DsMobileSheetNav: StencilReactComponent<DsMobileSheetNavElement, DsMobileSheetNavEvents, Components.DsMobileSheetNav>;

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

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

package/dist/styles/control-elevation.css

@@ -0,0 +1,40 @@
+/*
+ * Elevated wrapper chrome for controls whose opaque child surface can cover
+ * the inset highlight in a combined `--effect-elevation-*` box shadow.
+ *
+ * Import `@ds-mo/ui/control-elevation.css`, apply `.ds-control-elevation`, and
+ * select one level modifier. The owner still supplies layout, radius, surface,
+ * and any backdrop blur. Keep wrapped controls' optional resting borders off.
+ */
+
+.ds-control-elevation {
+  position: relative;
+  overflow: visible;
+  box-shadow: var(--ds-control-elevation-shadow, none);
+}
+
+.ds-control-elevation::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  /* Topmost local chrome: above selected, focus, error, hover, and press strokes. */
+  z-index: 4;
+  border-radius: inherit;
+  box-shadow: var(--ds-control-elevation-highlight, none);
+  pointer-events: none;
+}
+
+.ds-control-elevation--sm {
+  --ds-control-elevation-shadow: var(--effect-shadow-elevated-sm);
+  --ds-control-elevation-highlight: var(--effect-highlight-elevated-sm);
+}
+
+.ds-control-elevation--md {
+  --ds-control-elevation-shadow: var(--effect-shadow-elevated-md);
+  --ds-control-elevation-highlight: var(--effect-highlight-elevated-md);
+}
+
+.ds-control-elevation--floating {
+  --ds-control-elevation-shadow: var(--effect-shadow-elevated-floating);
+  --ds-control-elevation-highlight: var(--effect-highlight-elevated-floating);
+}

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { ShellResponsiveMode } from '../../shell/shell-responsive';
 import type { BarWorkflowStep, BarWorkflowSubmitAction } from './bar-workflow-types';
 export declare class BarWorkflow {
     /** The workflow's single visible h1. */
@@ -19,6 +20,8 @@ export declare class BarWorkflow {
     submitAction: BarWorkflowSubmitAction;
     /** Prevent advancing while the current step is incomplete or invalid. */
     isNextInactive: boolean;
+    /** Explicit shell breakpoint presentation. Mobile keeps the same controlled workflow state. */
+    responsiveMode: ShellResponsiveMode;
     /** Emitted when Exit is activated. */
     dsExit: EventEmitter<MouseEvent>;
     /** Emitted with the target previous or next step id. The component never mutates value. */
@@ -32,6 +35,9 @@ export declare class BarWorkflow {
     private get resolvedHeading();
     private handlePrevious;
     private handleNext;
+    private renderSubmit;
+    private renderMobile;
+    private renderDesktop;
     render(): any;
 }
 //# sourceMappingURL=BarWorkflow.d.ts.map

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

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { type ControlWidth } from '../../utils';
 export type ButtonUnfilledBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'translucent' | 'inverted' | 'media' | 'always-dark';
 export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';
-export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
+export type ButtonUnfilledSize = 'lg' | 'md' | 'sm' | 'xs';
 export type ButtonUnfilledWidth = ControlWidth;
 export type ButtonUnfilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 export declare class ButtonUnfilled {

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

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

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

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

package/dist/types/components/MobileBarNav/mobile-bar-nav-types.d.ts

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

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

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type TabItem } from '../TabGroup/tab-item-utils';
+import type { MobileHeaderHeadingLevel, MobileHeaderTone } from './mobile-header-types';
+export declare class MobileHeader {
+    /** Static title used when no peer sections are supplied. */
+    heading: string;
+    /** Semantic heading level for the active mobile screen. */
+    headingLevel: MobileHeaderHeadingLevel;
+    /** Controlled peer sections. Their selected label replaces the static title. */
+    sections: TabItem[];
+    /** JSON fallback for `sections`. */
+    sectionsJson: string;
+    /** Controlled selected section id. */
+    value: string;
+    /** Accessible name for the section chooser. */
+    sectionsAriaLabel: string;
+    /** Controlled child sections within the selected page or detail screen. */
+    subsections: TabItem[];
+    /** JSON fallback for `subsections`. */
+    subsectionsJson: string;
+    /** Controlled selected child-section id. */
+    subvalue: string;
+    /** Accessible name for the child-section chooser. */
+    subsectionsAriaLabel: string;
+    /** Default page chrome or bold-brand workflow chrome. */
+    tone: MobileHeaderTone;
+    /** Section selection intent. */
+    dsSectionChange: EventEmitter<string>;
+    /** Child-section selection intent. */
+    dsSubsectionChange: EventEmitter<string>;
+    private parseSections;
+    private get resolvedSections();
+    private get resolvedSubsections();
+    private get selectedLabel();
+    private handleSectionChange;
+    private handleSubsectionChange;
+    render(): any;
+}
+//# sourceMappingURL=MobileHeader.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { MobileHeaderHeadingLevel, MobileHeaderSectionItem, MobileHeaderTone, } from './mobile-header-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/MobileHeader/mobile-header-types.d.ts

@@ -0,0 +1,5 @@
+import type { TabItem } from '../TabGroup/tab-item-utils';
+export type MobileHeaderTone = 'default' | 'brand';
+export type MobileHeaderHeadingLevel = 'h1' | 'h2';
+export type MobileHeaderSectionItem = TabItem;
+//# sourceMappingURL=mobile-header-types.d.ts.map

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

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type TabItem } from '../TabGroup/tab-item-utils';
+export declare class MobileSectionSwitcher {
+    el: HTMLElement;
+    /** Ordered controlled sections. Divider entries group the popup menu. */
+    sections: TabItem[];
+    /** JSON fallback for `sections`. */
+    sectionsJson: string;
+    /** Controlled selected section id. */
+    value: string;
+    /** Accessible name for the section chooser. */
+    navigationLabel: string;
+    /** Selection intent. The route, tool, or workflow owner updates `value`. */
+    dsChange: EventEmitter<string>;
+    private menuOpen;
+    private initialFocusVisible;
+    private readonly instanceId;
+    private readonly triggerId;
+    private readonly menuId;
+    private triggerEl;
+    private get resolvedSections();
+    private get selectableSections();
+    private get selectedIndex();
+    private get selectedSection();
+    private get hasPrevious();
+    private get hasNext();
+    private get triggerAriaLabel();
+    private get menuSections();
+    handleSectionsChange(): void;
+    private toggleMenu;
+    private closeMenu;
+    private handleSelect;
+    render(): any;
+}
+//# sourceMappingURL=MobileSectionSwitcher.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { MobileSectionItem } from './mobile-section-switcher-types';
+export { resolveMobileSectionPosition, type MobileSectionPosition, } from './mobile-section-switcher-utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/MobileSectionSwitcher/mobile-section-switcher-types.d.ts

@@ -0,0 +1,4 @@
+import type { TabItem } from '../TabGroup/tab-item-utils';
+/** Ordered mobile sections. Dividers group the tap menu but do not participate in selection. */
+export type MobileSectionItem = TabItem;
+//# sourceMappingURL=mobile-section-switcher-types.d.ts.map

package/dist/types/components/MobileSectionSwitcher/mobile-section-switcher-utils.d.ts

@@ -0,0 +1,10 @@
+import { type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';
+export interface MobileSectionPosition {
+    selectedIndex: number;
+    selected?: TabItemTab;
+    hasPrevious: boolean;
+    hasNext: boolean;
+}
+/** Resolve ordered selectable neighbors while ignoring visual divider entries. */
+export declare function resolveMobileSectionPosition(sections: TabItem[], value: string): MobileSectionPosition;
+//# sourceMappingURL=mobile-section-switcher-utils.d.ts.map

package/dist/types/components/{ShellMobileNav/ShellMobileNav.d.ts → MobileSheetNav/MobileSheetNav.d.ts}

@@ -1,15 +1,13 @@
 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 {
+export declare class MobileSheetNav {
     el: HTMLElement;
     open: boolean;
     browseContext: NavChromeStyle;
     dashboardGroups: PanelNavGroup[];
     settingsGroups: PanelNavGroup[];
     currentUrl: string;
-    heading: string;
     navigationLabel: string;
     dashboardLabel: string;
     settingsLabel: string;
@@ -17,7 +15,6 @@ export declare class ShellMobileNav {
     helpLabel: string;
     dsAreaSelect: EventEmitter<string>;
     dsBrowseContextChange: EventEmitter<NavChromeStyle>;
-    dsAuxiliarySelect: EventEmitter<ShellMobileNavAuxiliaryDetail>;
     dsClose: EventEmitter<void>;
     private get groups();
     private get items();
@@ -25,8 +22,9 @@ export declare class ShellMobileNav {
     handleOpenChange(open: boolean): void;
     handleKeyDown(event: KeyboardEvent): void;
     private handleContextChange;
-    private selectAuxiliary;
-    private renderGroup;
+    private renderItem;
+    private renderLogo;
+    private renderHeaderDestination;
     render(): any;
 }
-//# sourceMappingURL=ShellMobileNav.d.ts.map
+//# sourceMappingURL=MobileSheetNav.d.ts.map

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

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,7 +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';
+import { type MobileDestination, type ShellResponsiveMode } from '../../shell/shell-responsive';
 export declare class ShellApp {
     /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
     navStyle: NavChromeStyle;
@@ -13,9 +13,9 @@ export declare class ShellApp {
     /** 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;
+    mobileDestination: MobileDestination;
+    /** Controlled full-stage Mobile Sheet Nav state. */
+    mobileSheetNavOpen: boolean;
     /** Emitted after crossing the fixed 768px or 1200px shell boundaries. */
     dsResponsiveModeChange: EventEmitter<{
         mode: ShellResponsiveMode;

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

@@ -1,3 +1,4 @@
+import type { ShellResponsiveMode } from '../../shell/shell-responsive';
 import type { ShellPageCapacity, ShellPageContentInset, ShellPageHeaderPresentation } from './shell-page-types';
 export declare class ShellPage {
     private static readonly MAX_HEADER_REVEAL_FRAMES;
@@ -9,6 +10,8 @@ export declare class ShellPage {
     headerCapacity?: ShellPageCapacity;
     /** Standard page gutters, or no inset for full-bleed page content. */
     contentInset: ShellPageContentInset;
+    /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */
+    responsiveMode: ShellResponsiveMode;
     private pageTopVisible;
     private sentinelEl;
     private spacerEl;
@@ -23,6 +26,7 @@ export declare class ShellPage {
     private headerGeometryFrame;
     private scrollRoot;
     handleHeaderContractChange(): void;
+    handleResponsiveModeChange(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;