@ds-mo/ui 9.2.1 → 11.0.0

package/dist/mcp-data/registry/typing-indicator.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "typing-indicator",
+  "title": "TypingIndicator",
+  "description": "Dedicated transient status for another participant actively composing a message.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/typing-indicator",
+    "source": "src/wc/components/TypingIndicator/TypingIndicator.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Dedicated transient status for another participant actively composing a message.",
+      "useWhen": [
+        "An agent or person-to-person conversation needs to show that another participant is currently typing."
+      ],
+      "avoidWhen": [
+        "An operation is loading or streaming a response; use Loader or the owning region's busy state.",
+        "The status represents persisted message content; use Message and MessageBubble."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-message",
+        "component:ds-message-scroller"
+      ],
+      "patterns": [
+        "pattern:conversation"
+      ],
+      "accessibility": [
+        "Provide concise localized status text that names the participant when that context is not otherwise clear.",
+        "The polite atomic status announces typing without representing it as a message bubble."
+      ],
+      "states": [
+        "TypingIndicator is transient conversation status, never persisted message content.",
+        "Its body-small secondary text may shimmer, while reduced-motion preferences retain a static readable status."
+      ],
+      "responsiveBehavior": [
+        "The indicator fills the message content width and wraps only when localized status text requires it."
+      ],
+      "references": [
+        {
+          "label": "Storybook example",
+          "path": "src/wc/components/TypingIndicator/TypingIndicator.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "'Typing…'",
+          "required": false,
+          "mutable": false,
+          "description": "Concise localized status text, ideally naming the participant who is typing."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "'Typing…'",
+        "required": false,
+        "mutable": false,
+        "description": "Concise localized status text, ideally naming the participant who is typing."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-typing-indicator",
+      "react": "DsTypingIndicator",
+      "angular": "DsTypingIndicator"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-typing-indicator.js';",
+        "example": "<ds-typing-indicator></ds-typing-indicator>"
+      },
+      "react": {
+        "import": "import { DsTypingIndicator } from '@ds-mo/ui/react';",
+        "example": "<DsTypingIndicator />"
+      },
+      "angular": {
+        "import": "import { DsTypingIndicator } from '@ds-mo/ui/angular/ds-typing-indicator';",
+        "example": "<ds-typing-indicator></ds-typing-indicator>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.3.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/TypingIndicator/TypingIndicator.css",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/TypingIndicator/TypingIndicator.tsx",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-typing-indicator',\n  styleUrl: 'TypingIndicator.css',\n  scoped: true,\n})\nexport class TypingIndicator {\n  /** Concise localized status text, ideally naming the participant who is typing. */\n  @Prop() label: string = 'Typing…';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\" shimmer>\n          {this.label}\n        </ds-text>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/react/components.d.ts

@@ -10,14 +10,12 @@ export { DsAppShell } from "./ds-app-shell.js";
 export { DsAttachmentList } from "./ds-attachment-list.js";
 export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
-export { DsBanner } from "./ds-banner.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
-export { DsCard } from "./ds-card.js";
 export { DsChartBar } from "./ds-chart-bar.js";
 export { DsChartDonut } from "./ds-chart-donut.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
@@ -58,5 +56,7 @@ export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";
+export { DsToast } from "./ds-toast.js";
 export { DsTooltipDataViz } from "./ds-tooltip-data-viz.js";
 export { DsTooltip } from "./ds-tooltip.js";
+export { DsTypingIndicator } from "./ds-typing-indicator.js";

package/dist/react/components.js

@@ -11,14 +11,12 @@ export { DsAppShell } from "./ds-app-shell.js";
 export { DsAttachmentList } from "./ds-attachment-list.js";
 export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
-export { DsBanner } from "./ds-banner.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
-export { DsCard } from "./ds-card.js";
 export { DsChartBar } from "./ds-chart-bar.js";
 export { DsChartDonut } from "./ds-chart-donut.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
@@ -59,5 +57,7 @@ export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";
+export { DsToast } from "./ds-toast.js";
 export { DsTooltipDataViz } from "./ds-tooltip-data-viz.js";
 export { DsTooltip } from "./ds-tooltip.js";
+export { DsTypingIndicator } from "./ds-typing-indicator.js";

package/dist/react/ds-card-setting.d.ts

@@ -3,10 +3,10 @@
  * 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 DsCardSettingCustomEvent } from "@ds-mo/ui";
+import { type CardSettingActionDetail, type DsCardSettingCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsCardSetting as DsCardSettingElement } from "@ds-mo/ui/dist/components/ds-card-setting.js";
 export type DsCardSettingEvents = {
-    onDsEditingChange: EventName<DsCardSettingCustomEvent<boolean>>;
+    onDsAction: EventName<DsCardSettingCustomEvent<CardSettingActionDetail>>;
 };
 export declare const DsCardSetting: StencilReactComponent<DsCardSettingElement, DsCardSettingEvents, Components.DsCardSetting, 'heading'>;

package/dist/react/ds-card-setting.js

@@ -7,6 +7,6 @@ export const DsCardSetting = /*@__PURE__*/ createComponent({
     elementClass: DsCardSettingElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onDsEditingChange: 'dsEditingChange' },
+    events: { onDsAction: 'dsAction' },
     defineCustomElement: defineDsCardSetting
 });

package/dist/react/ds-modal.d.ts

@@ -3,10 +3,11 @@
  * 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 DsModalCustomEvent } from "@ds-mo/ui";
+import { type DsModalCustomEvent, type ModalCloseDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsModal as DsModalElement } from "@ds-mo/ui/dist/components/ds-modal.js";
 export type DsModalEvents = {
-    onDsClose: EventName<DsModalCustomEvent<void>>;
+    onDsClose: EventName<DsModalCustomEvent<ModalCloseDetail>>;
+    onDsAfterClose: EventName<DsModalCustomEvent<void>>;
 };
 export declare const DsModal: StencilReactComponent<DsModalElement, DsModalEvents, Components.DsModal, 'heading'>;

package/dist/react/ds-modal.js

@@ -7,6 +7,9 @@ export const DsModal = /*@__PURE__*/ createComponent({
     elementClass: DsModalElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onDsClose: 'dsClose' },
+    events: {
+        onDsClose: 'dsClose',
+        onDsAfterClose: 'dsAfterClose'
+    },
     defineCustomElement: defineDsModal
 });

package/dist/react/ds-toast.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 DsToastCustomEvent, type ToastActionEventDetail, type ToastCloseEventDetail, type ToastEventDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsToast as DsToastElement } from "@ds-mo/ui/dist/components/ds-toast.js";
+export type DsToastEvents = {
+    onDsToastClose: EventName<DsToastCustomEvent<ToastCloseEventDetail>>;
+    onDsToastRemove: EventName<DsToastCustomEvent<ToastEventDetail>>;
+    onDsToastAction: EventName<DsToastCustomEvent<ToastActionEventDetail>>;
+};
+export declare const DsToast: StencilReactComponent<DsToastElement, DsToastEvents, Components.DsToast>;

package/dist/react/ds-toast.js

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsToast as DsToastElement, defineCustomElement as defineDsToast } from "@ds-mo/ui/dist/components/ds-toast.js";
+export const DsToast = /*@__PURE__*/ createComponent({
+    tagName: 'ds-toast',
+    elementClass: DsToastElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsToastClose: 'dsToastClose',
+        onDsToastRemove: 'dsToastRemove',
+        onDsToastAction: 'dsToastAction'
+    },
+    defineCustomElement: defineDsToast
+});

package/dist/react/{ds-card.d.ts → ds-typing-indicator.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 { DsCard as DsCardElement } from "@ds-mo/ui/dist/components/ds-card.js";
-export type DsCardEvents = NonNullable<unknown>;
-export declare const DsCard: StencilReactComponent<DsCardElement, DsCardEvents, Components.DsCard, 'heading'>;
+import { DsTypingIndicator as DsTypingIndicatorElement } from "@ds-mo/ui/dist/components/ds-typing-indicator.js";
+export type DsTypingIndicatorEvents = NonNullable<unknown>;
+export declare const DsTypingIndicator: StencilReactComponent<DsTypingIndicatorElement, DsTypingIndicatorEvents, Components.DsTypingIndicator>;

package/dist/react/ds-typing-indicator.js

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

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

@@ -1,6 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { CardWidth } from '../Card/Card';
-export type CardSettingWidth = CardWidth;
+export type CardSettingWidth = 'sm' | 'md' | 'lg';
+export type CardSettingAction = 'edit' | 'save' | 'cancel';
+export interface CardSettingActionDetail {
+    action: CardSettingAction;
+    originalEvent: MouseEvent;
+}
 export declare class CardSetting {
     /** Section heading shown in the card header. */
     heading: string;
@@ -15,10 +19,9 @@ export declare class CardSetting {
     editLabel: string;
     cancelLabel: string;
     saveLabel: string;
-    /** Emits when the user enters or exits edit mode. */
-    dsEditingChange: EventEmitter<boolean>;
-    private enterEdit;
-    private exitEdit;
+    /** Emits a controlled edit, save, or cancel request. */
+    dsAction: EventEmitter<CardSettingActionDetail>;
+    private emitAction;
     render(): any;
 }
 //# sourceMappingURL=CardSetting.d.ts.map

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

@@ -1,2 +1,2 @@
-export type { CardSettingWidth } from './CardSetting';
+export type { CardSettingAction, CardSettingActionDetail, CardSettingWidth, } from './CardSetting';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +1,4 @@
-export type MessageBubbleVariant = 'primary' | 'secondary' | 'ghost' | 'error';
+export type MessageBubbleVariant = 'user' | 'received';
 export declare class MessageBubble {
     variant: MessageBubbleVariant;
     render(): any;

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

@@ -1,35 +1,38 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export type ModalWidth = 'sm' | 'md' | 'lg';
+export type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';
+export interface ModalCloseDetail {
+    reason: ModalCloseReason;
+    originalEvent: Event;
+}
 export declare class Modal {
     el: HTMLElement;
     open: boolean;
     heading: string;
-    subtitle: string | undefined;
+    closeAriaLabel: string;
     modalWidth: ModalWidth | string;
-    private shouldRender;
+    /** Optional id reference for explanatory content in the default slot. */
+    ariaDescribedby: string | undefined;
     private closing;
-    dsClose: EventEmitter<void>;
-    private instanceId;
+    private hasFooter;
+    /** Emitted when an internal dismissal control requests that the modal close. */
+    dsClose: EventEmitter<ModalCloseDetail>;
+    /** Emitted after exit motion completes, the top layer closes, and focus is restored. */
+    dsAfterClose: EventEmitter<void>;
     private titleId;
-    private subtitleId;
+    private dialogEl;
     private previousFocus;
-    private escapeHandler;
-    private tabHandler;
     private closeTimer;
-    private inertedElements;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     onOpenChange(isOpen: boolean): void;
-    private focusFirst;
-    private getFocusables;
-    private setupListeners;
-    private teardownListeners;
-    private close;
-    private handleBackdropMouseDown;
-    private get isTopModal();
-    /** Inert every sibling branch outside the modal without assuming it is a body child. */
-    private activateModal;
-    private deactivateModal;
+    private focusClose;
+    private clearCloseTimer;
+    private requestClose;
+    private updateFooterPresence;
+    private handleCancel;
+    private handleBackdropPointerDown;
+    private handleKeyDown;
     private get resolvedWidth();
     private get closeAnimationMs();
     private finishClose;

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

@@ -0,0 +1,106 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ToastActionEventDetail, type ToastCloseEventDetail, type ToastEventDetail, type ToastManager, type ToastSwipeDirection } from '../../toast';
+export declare class Toast {
+    el: HTMLElement;
+    /** Manager that supplies toast records. Assign as a JavaScript property. */
+    manager: ToastManager;
+    /** Maximum visible global-stack records. Limited records remain mounted and inert. */
+    limit: number;
+    /** Default auto-dismiss delay. Use 0 for persistent records. */
+    timeout: number | string;
+    /** Accessible label for the notification region. */
+    label: string;
+    /** Localized accessible label for every toast close action. */
+    closeLabel: string;
+    /** Allowed swipe-to-dismiss directions. Assign as a JavaScript property. */
+    swipeDirections: ToastSwipeDirection[];
+    private records;
+    private expanded;
+    private keyboardActive;
+    private swipe;
+    private layoutVersion;
+    dsToastClose: EventEmitter<ToastCloseEventDetail>;
+    dsToastRemove: EventEmitter<ToastEventDetail>;
+    dsToastAction: EventEmitter<ToastActionEventDetail>;
+    private readonly instanceId;
+    private readonly domIds;
+    private readonly timers;
+    private readonly closeWatchdogs;
+    private readonly closeFrames;
+    private readonly closeEvents;
+    private readonly activationFrames;
+    private readonly pauseReasons;
+    private readonly hoveredIds;
+    private readonly heights;
+    private readonly measuredUpdateKeys;
+    private readonly anchoredPositions;
+    private readonly dismissedSwipeDirections;
+    private readonly observedElements;
+    private readonly pendingRemovals;
+    private unsubscribe;
+    private attachedManager;
+    private previousFocus;
+    private resizeObserver;
+    private mutationObserver;
+    private layoutFrame;
+    private activeSwipe;
+    private nextDomId;
+    private connected;
+    private pendingHoverLeave;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    private connect;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    onManagerChange(next: ToastManager): void;
+    onTimeoutChange(): void;
+    private attachManager;
+    private detachManager;
+    private resetManagerState;
+    private syncObservedElements;
+    private flushPendingRemovals;
+    private syncLifecycle;
+    private syncTimers;
+    private resolveToastTimeout;
+    private startToastTimer;
+    private pauseTimers;
+    private resumeTimers;
+    private get isPaused();
+    private clearToastTimer;
+    private clearAllTimers;
+    private beginRemoval;
+    private completeRemoval;
+    private handleAnimationComplete;
+    private bindAnimationCancel;
+    private handleWindowBlur;
+    private handleWindowFocus;
+    private handleVisibilityChange;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleDocumentKeyDown;
+    private handleRegionKeyDown;
+    private get regionElement();
+    private restorePreviousFocus;
+    private moveFocusAfterClose;
+    private handleAction;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private handlePointerCancel;
+    private cancelSwipe;
+    private get touchAction();
+    private handleWindowResize;
+    private scheduleLayout;
+    private measureNaturalHeight;
+    private measureLayout;
+    private resolveAnchor;
+    private positionerElement;
+    private ensureDomId;
+    private get activeRecords();
+    private globalLayout;
+    private renderToast;
+    render(): any;
+}
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection, } from '../../toast';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,6 @@
+export declare class TypingIndicator {
+    /** Concise localized status text, ideally naming the participant who is typing. */
+    label: string;
+    render(): any;
+}
+//# sourceMappingURL=TypingIndicator.d.ts.map