@ds-mo/ui 11.1.0 → 12.0.0

package/dist/react/ds-bar-title.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 DsBarTitleCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBarTitle as DsBarTitleElement } from "@ds-mo/ui/dist/components/ds-bar-title.js";
+export type DsBarTitleEvents = {
+    onDsBack: EventName<DsBarTitleCustomEvent<MouseEvent>>;
+    onDsSectionChange: EventName<DsBarTitleCustomEvent<string>>;
+    onDsAction: EventName<DsBarTitleCustomEvent<string>>;
+};
+export declare const DsBarTitle: StencilReactComponent<DsBarTitleElement, DsBarTitleEvents, Components.DsBarTitle, 'heading'>;

package/dist/react/ds-bar-title.js

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsBarTitle as DsBarTitleElement, defineCustomElement as defineDsBarTitle } from "@ds-mo/ui/dist/components/ds-bar-title.js";
+export const DsBarTitle = /*@__PURE__*/ createComponent({
+    tagName: 'ds-bar-title',
+    elementClass: DsBarTitleElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsBack: 'dsBack',
+        onDsSectionChange: 'dsSectionChange',
+        onDsAction: 'dsAction'
+    },
+    defineCustomElement: defineDsBarTitle
+});

package/dist/react/{ds-app-shell.d.ts → ds-shell-app.d.ts}

@@ -4,6 +4,6 @@
  */
 import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
 import type { Components } from "@ds-mo/ui/dist/components";
-import { DsAppShell as DsAppShellElement } from "@ds-mo/ui/dist/components/ds-app-shell.js";
-export type DsAppShellEvents = NonNullable<unknown>;
-export declare const DsAppShell: StencilReactComponent<DsAppShellElement, DsAppShellEvents, Components.DsAppShell>;
+import { DsShellApp as DsShellAppElement } from "@ds-mo/ui/dist/components/ds-shell-app.js";
+export type DsShellAppEvents = NonNullable<unknown>;
+export declare const DsShellApp: StencilReactComponent<DsShellAppElement, DsShellAppEvents, Components.DsShellApp>;

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * 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 { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellPage as DsShellPageElement } from "@ds-mo/ui/dist/components/ds-shell-page.js";
+export type DsShellPageEvents = NonNullable<unknown>;
+export declare const DsShellPage: StencilReactComponent<DsShellPageElement, DsShellPageEvents, Components.DsShellPage>;

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

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

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

@@ -16,7 +16,7 @@ export declare class Badge {
     hasRing: boolean;
     /**
      * Ring samples the shell gradient stack (base fill + wash) instead of a flat
-     * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;
+     * `box-shadow`. Auto-enabled under an ShellApp with an active gradient preset;
      * set `gradient-background` to opt in/out explicitly.
      *
      * The attribute must NOT start with `on` — Stencil's setAccessor routes any

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

@@ -0,0 +1,71 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type BarTitleActionItem, type BarTitlePrimaryAction, type BarTitleSectionItem, type BarTitleVariant } from './bar-title-types';
+export declare class BarTitle {
+    /** The page's single visible h1. */
+    heading: string;
+    /** Optional supporting copy shown in the expanded presentation. */
+    description: string;
+    /** Show the leading page-level Back action. */
+    showBack: boolean;
+    /** Accessible name for the leading Back action. */
+    backAriaLabel: string;
+    /** Visible parent-page label used by the expanded Back breadcrumb. */
+    backLabel: string;
+    /** Optional page sections exposed through the active-section menu. */
+    sections: BarTitleSectionItem[];
+    /** Id of the active page section. */
+    value: string;
+    /** Accessible name for the page-section menu. */
+    sectionsAriaLabel: string;
+    /** The one highest-emphasis page action. */
+    primaryAction: BarTitlePrimaryAction | null;
+    /** Secondary page actions shown in the overflow menu. Dividers create groups. */
+    actions: BarTitleActionItem[];
+    /** Accessible name for the page-actions menu. */
+    actionsAriaLabel: string;
+    /** Explicit visual/capacity variant. ShellPage owns automatic selection. */
+    variant: BarTitleVariant;
+    /** Emitted when the leading Back action is activated. */
+    dsBack: EventEmitter<MouseEvent>;
+    /** Emitted with the newly selected page-section id. */
+    dsSectionChange: EventEmitter<string>;
+    /** Emitted with the activated primary or overflow action id. */
+    dsAction: EventEmitter<string>;
+    private sectionMenuOpen;
+    private actionMenuOpen;
+    private sectionMenuInitialFocusVisible;
+    private actionMenuInitialFocusVisible;
+    private readonly instanceId;
+    private readonly sectionMenuTriggerId;
+    private readonly sectionMenuId;
+    private readonly actionMenuTriggerId;
+    private readonly actionMenuId;
+    private sectionTriggerEl;
+    private actionTriggerEl;
+    handleSectionsChange(): void;
+    handleActionsChange(): void;
+    private get compact();
+    private get primaryCollapsed();
+    private get selectableSections();
+    private get hasSectionSelector();
+    private get effectiveValue();
+    private get selectedSectionLabel();
+    private get sectionTriggerAriaLabel();
+    private groupsFromItems;
+    private get sectionMenuSections();
+    private get selectableActions();
+    private get showActionMenuTrigger();
+    private actionMenuItem;
+    private get actionMenuSections();
+    private toggleSectionMenu;
+    private closeSectionMenu;
+    private handleSectionSelect;
+    private toggleActionMenu;
+    private closeActionMenu;
+    private handleActionSelect;
+    private renderSectionSelector;
+    private renderActions;
+    private renderBack;
+    render(): any;
+}
+//# sourceMappingURL=BarTitle.d.ts.map

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

@@ -0,0 +1,29 @@
+import type { ButtonFilledContrast, ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';
+export interface BarTitleSection {
+    id: string;
+    label: string;
+    isInactive?: boolean;
+}
+export interface BarTitleDivider {
+    type: 'divider';
+}
+export type BarTitleSectionItem = BarTitleSection | BarTitleDivider;
+export interface BarTitleAction {
+    id: string;
+    label: string;
+    isInactive?: boolean;
+    isDestructive?: boolean;
+}
+export interface BarTitlePrimaryAction extends BarTitleAction {
+    icon?: string;
+    intent?: ButtonFilledIntent;
+    contrast?: ButtonFilledContrast;
+    isLoading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    collapse?: BarTitlePrimaryActionCollapse;
+}
+export type BarTitleActionItem = BarTitleAction | BarTitleDivider;
+export type BarTitleVariant = 'expanded' | 'compact' | 'constrained';
+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

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

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

@@ -48,11 +48,13 @@ export declare class Menu {
     private closeTimer;
     private itemEls;
     private positionRetryRaf;
+    private livePositionRaf;
     private listenersReady;
     /** Last content actually painted while open; retained unchanged through exit motion. */
     private lastRenderedSections;
     private closingSections;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     onOpenChange(isOpen: boolean): void;
     onAnchorChange(): void;
@@ -75,6 +77,9 @@ export declare class Menu {
     /** Rich preference content is a non-modal dialog, not an ARIA action menu. */
     private get hasCompositeSections();
     private cancelPositionRetry;
+    private cancelLivePositionUpdate;
+    /** Reposition after the current scroll/layout frame without hiding the open popup. */
+    private scheduleLivePositionUpdate;
     /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */
     private schedulePositionUpdate;
     /** @returns `true` when anchor and popup were found and `pos` was updated. */

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

@@ -47,7 +47,7 @@ export declare class PanelNav {
     dsNavSelect: EventEmitter<string>;
     /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */
     dsNavToggle: EventEmitter<boolean>;
-    /** Bubbling lifecycle — `ds-app-shell` pauses chrome metrics during width motion. */
+    /** Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion. */
     dsChromeTransitionStart: EventEmitter<ChromeTransitionDetail>;
     dsChromeTransitionEnd: EventEmitter<ChromeTransitionDetail>;
     /** Emitted when the footer left button (gear / dashboard) is clicked. */

package/dist/types/components/{AppShell/AppShell.d.ts → ShellApp/ShellApp.d.ts}

@@ -1,6 +1,6 @@
 import type { NavChromeStyle } from '../../shell/nav-chrome';
 import { type ShellGradientPreset } from '../../shell/shell-gradient-presets';
-export declare class AppShell {
+export declare class ShellApp {
     /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
     navStyle: NavChromeStyle;
     /**
@@ -8,7 +8,7 @@ export declare class AppShell {
      * presets use token-based washes that adapt to the active color theme.
      */
     gradientPreset: ShellGradientPreset;
-    /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N/? toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */
+    /** 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;
     el: HTMLElement;
     private toolsFullscreen;
@@ -47,4 +47,4 @@ export declare class AppShell {
     private syncChrome;
     render(): any;
 }
-//# sourceMappingURL=AppShell.d.ts.map
+//# sourceMappingURL=ShellApp.d.ts.map

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

@@ -0,0 +1,37 @@
+import type { ShellPageContentInset, ShellPageHeaderPresentation } from './shell-page-types';
+export declare class ShellPage {
+    el: HTMLElement;
+    /** Automatic container/scroll behavior, or an explicit header variant override. */
+    headerPresentation: ShellPageHeaderPresentation;
+    /** Standard page gutters, or no inset for full-bleed page content. */
+    contentInset: ShellPageContentInset;
+    private capacity;
+    private pageTopVisible;
+    private sentinelEl;
+    private spacerEl;
+    private headerEl;
+    private expandedHeaderHeight;
+    private resizeObserver;
+    private headerResizeObserver;
+    private scrollRoot;
+    private readonly layoutCoalescer;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private get effectiveVariant();
+    private get isScrollCompacted();
+    private connectObservers;
+    private composedParent;
+    private findScrollRoot;
+    private connectScrollRoot;
+    private handleScroll;
+    private findHeader;
+    private syncCapacity;
+    private get compactHeaderHeight();
+    private setSpacerHeight;
+    private syncHeaderVariant;
+    private observeHeader;
+    private handleHeaderSlotChange;
+    render(): any;
+}
+//# sourceMappingURL=ShellPage.d.ts.map

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

@@ -0,0 +1,3 @@
+export { ShellPage } from './ShellPage';
+export type { ShellPageCapacity, ShellPageContentInset, ShellPageHeaderPresentation, } from './shell-page-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ShellPage/shell-page-responsive.d.ts

@@ -0,0 +1,12 @@
+import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';
+import type { BarTitleVariant } from '../BarTitle/bar-title-types';
+export interface ShellPageCapacityOptions {
+    inlineSize: number;
+    compactAt: number;
+    constrainedAt: number;
+    hysteresis: number;
+    previous: ShellPageCapacity | null;
+}
+export declare function resolveShellPageCapacity({ inlineSize, compactAt, constrainedAt, hysteresis, previous, }: ShellPageCapacityOptions): ShellPageCapacity;
+export declare function resolveShellPageHeaderVariant(presentation: ShellPageHeaderPresentation, capacity: ShellPageCapacity, pageTopVisible: boolean): BarTitleVariant;
+//# sourceMappingURL=shell-page-responsive.d.ts.map

package/dist/types/components/ShellPage/shell-page-types.d.ts

@@ -0,0 +1,5 @@
+import type { BarTitleVariant } from '../BarTitle/bar-title-types';
+export type ShellPageHeaderPresentation = 'auto' | BarTitleVariant;
+export type ShellPageContentInset = 'default' | 'none';
+export type ShellPageCapacity = 'roomy' | 'compact' | 'constrained';
+//# sourceMappingURL=shell-page-types.d.ts.map