@ds-mo/ui 12.0.0 → 12.2.0

package/dist/react/components.d.ts

@@ -11,6 +11,7 @@ export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
+export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
@@ -45,6 +46,7 @@ export { DsPanelToolHeader } from "./ds-panel-tool-header.js";
 export { DsPanelToolSearch } from "./ds-panel-tool-search.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadio } from "./ds-radio.js";
+export { DsScrollOverlay } from "./ds-scroll-overlay.js";
 export { DsSelectMulti } from "./ds-select-multi.js";
 export { DsSelect } from "./ds-select.js";
 export { DsShellApp } from "./ds-shell-app.js";

package/dist/react/components.js

@@ -12,6 +12,7 @@ export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
+export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
@@ -46,6 +47,7 @@ export { DsPanelToolHeader } from "./ds-panel-tool-header.js";
 export { DsPanelToolSearch } from "./ds-panel-tool-search.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadio } from "./ds-radio.js";
+export { DsScrollOverlay } from "./ds-scroll-overlay.js";
 export { DsSelectMulti } from "./ds-select-multi.js";
 export { DsSelect } from "./ds-select.js";
 export { DsShellApp } from "./ds-shell-app.js";

package/dist/react/ds-bar-workflow.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 DsBarWorkflowCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBarWorkflow as DsBarWorkflowElement } from "@ds-mo/ui/dist/components/ds-bar-workflow.js";
+export type DsBarWorkflowEvents = {
+    onDsExit: EventName<DsBarWorkflowCustomEvent<MouseEvent>>;
+    onDsStepChange: EventName<DsBarWorkflowCustomEvent<string>>;
+    onDsSubmit: EventName<DsBarWorkflowCustomEvent<MouseEvent>>;
+};
+export declare const DsBarWorkflow: StencilReactComponent<DsBarWorkflowElement, DsBarWorkflowEvents, Components.DsBarWorkflow, 'heading'>;

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

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsBarWorkflow as DsBarWorkflowElement, defineCustomElement as defineDsBarWorkflow } from "@ds-mo/ui/dist/components/ds-bar-workflow.js";
+export const DsBarWorkflow = /*@__PURE__*/ createComponent({
+    tagName: 'ds-bar-workflow',
+    elementClass: DsBarWorkflowElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsExit: 'dsExit',
+        onDsStepChange: 'dsStepChange',
+        onDsSubmit: 'dsSubmit'
+    },
+    defineCustomElement: defineDsBarWorkflow
+});

package/dist/react/ds-scroll-overlay.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 DsScrollOverlayCustomEvent, type ScrollOverlayScrollDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsScrollOverlay as DsScrollOverlayElement } from "@ds-mo/ui/dist/components/ds-scroll-overlay.js";
+export type DsScrollOverlayEvents = {
+    onDsScroll: EventName<DsScrollOverlayCustomEvent<ScrollOverlayScrollDetail>>;
+};
+export declare const DsScrollOverlay: StencilReactComponent<DsScrollOverlayElement, DsScrollOverlayEvents, Components.DsScrollOverlay>;

package/dist/react/ds-scroll-overlay.js

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

package/dist/styles/prose.css

@@ -0,0 +1,214 @@
+/*
+ * Renderer-neutral document rhythm for safe semantic DOM.
+ *
+ * Import `@ds-mo/ui/prose.css`, then apply `.ds-prose` to a consumer-owned
+ * semantic container. Keep selectors at zero specificity so ordinary product
+ * CSS can override the recipe. `data-ds-prose="off"` opts an entire embedded
+ * product-UI subtree out of prose element styling.
+ */
+
+:where(.ds-prose) {
+  display: block;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  color: inherit;
+  overflow-wrap: anywhere;
+}
+
+:where(.ds-prose)
+  :where(p, ul, ol, dl, blockquote, figure, figcaption, table):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin: 0;
+  color: inherit;
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-md);
+  font-weight: var(--typography-weight-regular);
+  line-height: var(--typography-lineheight-md);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+:where(.ds-prose)
+  :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin: 0;
+  color: var(--color-foreground-primary);
+  font-family: var(--typography-font-family);
+  font-weight: var(--typography-weight-semibold);
+}
+
+:where(.ds-prose)
+  :where(h1, h2):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-size: var(--typography-fontsize-xl);
+  line-height: var(--typography-lineheight-xl);
+  letter-spacing: var(--typography-letterspacing-negative-double);
+}
+
+:where(.ds-prose)
+  :where(h3, h4):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-size: var(--typography-fontsize-lg);
+  line-height: var(--typography-lineheight-lg);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+:where(.ds-prose)
+  :where(h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+/* New blocks own their leading space, so appending streamed content never
+ * changes the style or position of an earlier sibling. */
+:where(.ds-prose) > :where(* + *) {
+  margin-block-start: var(--dimension-space-150);
+}
+
+:where(.ds-prose)
+  > :where(*)
+  + :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-200);
+}
+
+:where(.ds-prose)
+  > :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *))
+  + :where(*) {
+  margin-block-start: var(--dimension-space-100);
+}
+
+:where(.ds-prose)
+  :where(blockquote, li, dd)
+  > :where(* + *):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-050);
+}
+
+:where(.ds-prose)
+  :where(li + li, dt + dd):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-050);
+}
+
+:where(.ds-prose)
+  :where(ul, ol):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding-inline-start: var(--dimension-space-300);
+}
+
+:where(.ds-prose)
+  :where(li > ul, li > ol):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-050);
+}
+
+:where(.ds-prose)
+  :where(li > input[type='checkbox']):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-inline-end: var(--dimension-space-050);
+}
+
+:where(.ds-prose)
+  :where(blockquote):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding-inline-start: var(--dimension-space-150);
+  border-inline-start: var(--dimension-stroke-width-025) solid var(--color-border-secondary);
+  color: var(--color-foreground-secondary);
+}
+
+:where(.ds-prose)
+  :where(strong, b):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-weight: var(--typography-weight-medium);
+}
+
+:where(.ds-prose)
+  :where(h1, h2, h3, h4, h5, h6)
+  :where(strong, b):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-weight: inherit;
+}
+
+:where(.ds-prose)
+  :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  color: var(--color-foreground-brand);
+  text-decoration: underline;
+}
+
+:where(.ds-prose)
+  :where(code):not(:where(pre code, [data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding: var(--dimension-space-012) var(--dimension-space-025);
+  border-radius: var(--dimension-radius-025);
+  background: var(--color-background-secondary);
+  font-family: var(--typography-fontfamily-mono);
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  letter-spacing: var(--typography-letterspacing-none);
+}
+
+:where(.ds-prose)
+  :where(pre):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--dimension-space-150);
+  overflow: auto;
+  border-radius: var(--dimension-radius-050);
+  background: var(--color-background-strong-neutral);
+  color: var(--color-foreground-faint-neutral);
+  font-family: var(--typography-fontfamily-mono);
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  letter-spacing: var(--typography-letterspacing-none);
+  tab-size: 2;
+}
+
+:where(.ds-prose)
+  :where(pre code):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  white-space: pre;
+}
+
+:where(.ds-prose)
+  :where(hr):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin: 0;
+  border: 0;
+  border-block-start: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
+}
+
+:where(.ds-prose__table-scroll) {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+}
+
+:where(.ds-prose)
+  :where(table):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  inline-size: 100%;
+  border-collapse: collapse;
+}
+
+:where(.ds-prose)
+  :where(th, td):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding: var(--dimension-space-075);
+  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
+  text-align: start;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+
+:where(.ds-prose)
+  :where(th):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  color: var(--color-foreground-primary);
+  font-weight: var(--typography-weight-medium);
+}
+
+:where(.ds-prose)
+  :where(img, video, svg):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+:where(.ds-prose)
+  :where(figcaption):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-050);
+  color: var(--color-foreground-secondary);
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  letter-spacing: var(--typography-letterspacing-none);
+}

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

@@ -1,9 +1,12 @@
 import type { IconColor } from '../Icon/Icon';
+export type AvatarSize = 'md' | 'sm' | 'xs';
 export declare class Avatar {
     /** Canonical IcoMo icon name displayed inside the avatar. */
     icon: string;
-    /** Semantic color for the icon. Use primary to surface unread or current identity state. */
+    /** Semantic icon hierarchy. Use primary for stronger emphasis; secondary is the default. */
     iconColor: IconColor;
+    /** Circle and icon density. Maps to 32/20, 24/16, or 16/12 px. */
+    size: AvatarSize;
     /** Optional accessible label. Omit when the surrounding content already conveys the meaning. */
     label: string | undefined;
     render(): any;

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

@@ -45,6 +45,8 @@ export declare class BarTitle {
     handleSectionsChange(): void;
     handleActionsChange(): void;
     private get compact();
+    /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */
+    private get backTooltipLabel();
     private get primaryCollapsed();
     private get selectableSections();
     private get hasSectionSelector();

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

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BarWorkflowStep, BarWorkflowSubmitAction } from './bar-workflow-types';
+export declare class BarWorkflow {
+    /** The workflow's single visible h1. */
+    heading: string;
+    /** Ordered workflow steps. Step state is controlled by the application. */
+    steps: BarWorkflowStep[];
+    /** Id of the current workflow step. Falls back to the first step. */
+    value: string;
+    /** Concise tooltip label for the Exit control. */
+    exitLabel: string;
+    /** Workflow-specific accessible name for Exit. */
+    exitAriaLabel: string;
+    /** Tooltip and accessible name for the previous-step control. */
+    previousLabel: string;
+    /** Tooltip and accessible name for the next-step control. */
+    nextLabel: string;
+    /** The final-step Save or Submit action. */
+    submitAction: BarWorkflowSubmitAction;
+    /** Prevent advancing while the current step is incomplete or invalid. */
+    isNextInactive: boolean;
+    /** Emitted when Exit is activated. */
+    dsExit: EventEmitter<MouseEvent>;
+    /** Emitted with the target previous or next step id. The component never mutates value. */
+    dsStepChange: EventEmitter<string>;
+    /** Emitted when the final Save or Submit control is activated. */
+    dsSubmit: EventEmitter<MouseEvent>;
+    private get currentIndex();
+    private get previousStep();
+    private get nextStep();
+    private get isLastStep();
+    private get resolvedHeading();
+    private handlePrevious;
+    private handleNext;
+    render(): any;
+}
+//# sourceMappingURL=BarWorkflow.d.ts.map

package/dist/types/components/BarWorkflow/bar-workflow-types.d.ts

@@ -0,0 +1,12 @@
+export interface BarWorkflowStep {
+    id: string;
+    label: string;
+    isInactive?: boolean;
+}
+export interface BarWorkflowSubmitAction {
+    label: string;
+    type?: 'button' | 'submit' | 'reset';
+    isInactive?: boolean;
+    isLoading?: boolean;
+}
+//# sourceMappingURL=bar-workflow-types.d.ts.map

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

@@ -1,4 +1,16 @@
+export type ConversationListActionLayout = 'floating' | 'footer';
 export declare class ConversationList {
+    el: HTMLElement;
+    /** Corner icon action or full-width persistent footer action. */
+    actionLayout: ConversationListActionLayout;
+    private viewport?;
+    private content?;
+    private overlay?;
+    private scrollOverlayController?;
+    private emptySlotObserver?;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private syncEmptyStateLayout;
     render(): any;
 }
 //# sourceMappingURL=ConversationList.d.ts.map

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

@@ -11,6 +11,7 @@ export declare class Menu {
     /** Give ordinary rows mutually-exclusive radio-menu semantics using isSelected. */
     selectionMode: MenuSelectionMode;
     sections: MenuSection[];
+    /** Preferred side; placement flips to the opposite side when that offers a better fit. */
     side: MenuSide;
     align: MenuAlign;
     /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */
@@ -46,10 +47,8 @@ export declare class Menu {
     private clickOutsideHandler;
     private scrollResizeHandler;
     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;

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

@@ -11,15 +11,12 @@ export declare class MessageScroller {
     private viewport?;
     private content?;
     private overlay?;
-    private resizeObserver?;
-    private overlayResizeObserver?;
+    private scrollOverlayController?;
     private mutationObserver?;
     private following;
     private atStart;
     private programmatic;
     private previousScrollHeight;
-    private overlayBlockSize;
-    private overlayContentBlockSize;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     scrollToMessage(id: string): Promise<boolean>;
@@ -29,8 +26,6 @@ export declare class MessageScroller {
     private scrollTo;
     private connectObservers;
     private handleContentGrowth;
-    private syncContentFade;
-    private syncOverlayContentBlockSize;
     private applyDefaultPosition;
     private isAtLiveEdge;
     private handleScroll;

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

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface ScrollOverlayScrollDetail {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+export declare class ScrollOverlay {
+    el: HTMLElement;
+    /** Optional accessible name. When provided, the scrollport is a focusable region. */
+    scrollLabel: string | undefined;
+    /** Reports scroll position without exposing the internal scrollport element. */
+    dsScroll: EventEmitter<ScrollOverlayScrollDetail>;
+    private viewport?;
+    private content?;
+    private overlay?;
+    private controller?;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Move the owned scrollport to its beginning. */
+    scrollToStart(): Promise<void>;
+    /** Move the owned scrollport to its live end. */
+    scrollToEnd(): Promise<void>;
+    /** Re-measure footer geometry after an imperative slotted-content update. */
+    refreshOverlay(): Promise<void>;
+    private handleScroll;
+    render(): any;
+}
+//# sourceMappingURL=ScrollOverlay.d.ts.map

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

@@ -1,5 +1,6 @@
 import type { ShellPageContentInset, ShellPageHeaderPresentation } from './shell-page-types';
 export declare class ShellPage {
+    private static readonly MAX_HEADER_REVEAL_FRAMES;
     el: HTMLElement;
     /** Automatic container/scroll behavior, or an explicit header variant override. */
     headerPresentation: ShellPageHeaderPresentation;
@@ -13,6 +14,7 @@ export declare class ShellPage {
     private expandedHeaderHeight;
     private resizeObserver;
     private headerResizeObserver;
+    private headerRevealFrame;
     private scrollRoot;
     private readonly layoutCoalescer;
     componentDidLoad(): void;
@@ -29,6 +31,9 @@ export declare class ShellPage {
     private syncCapacity;
     private get compactHeaderHeight();
     private setSpacerHeight;
+    private variantClass;
+    private cancelHeaderReveal;
+    private revealHeaderWhenSynced;
     private syncHeaderVariant;
     private observeHeader;
     private handleHeaderSlotChange;