@ds-mo/ui 12.1.0 → 12.2.0

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type BarTitleActionItem, type BarTitleMode, type BarTitlePrimaryAction, type BarTitleSectionItem, type BarTitleVariant } from './bar-title-types';
+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;
@@ -25,8 +25,6 @@ export declare class BarTitle {
     actionsAriaLabel: string;
     /** Explicit visual/capacity variant. ShellPage owns automatic selection. */
     variant: BarTitleVariant;
-    /** Semantic page-header treatment. Editor mode uses bold-brand create/edit chrome. */
-    mode: BarTitleMode;
     /** Emitted when the leading Back action is activated. */
     dsBack: EventEmitter<MouseEvent>;
     /** Emitted with the newly selected page-section id. */
@@ -47,7 +45,6 @@ export declare class BarTitle {
     handleSectionsChange(): void;
     handleActionsChange(): void;
     private get compact();
-    private get editor();
     /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */
     private get backTooltipLabel();
     private get primaryCollapsed();

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

@@ -24,7 +24,6 @@ export interface BarTitlePrimaryAction extends BarTitleAction {
 }
 export type BarTitleActionItem = BarTitleAction | BarTitleDivider;
 export type BarTitleVariant = 'expanded' | 'compact' | 'constrained';
-export type BarTitleMode = 'default' | 'editor';
 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/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