@ds-mo/ui 13.2.0 → 13.4.0

package/dist/react/ds-skeleton.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsSkeleton as DsSkeletonElement, defineCustomElement as defineDsSkeleton } from "@ds-mo/ui/dist/components/ds-skeleton.js";
 export const DsSkeleton = /*@__PURE__*/ createComponent({

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

@@ -2,7 +2,7 @@
  * 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 { EventName, StencilReactComponent } from './react-runtime.js';
 import { type DsSliderCustomEvent, type SliderValue } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsSlider as DsSliderElement } from "@ds-mo/ui/dist/components/ds-slider.js";

package/dist/react/ds-slider.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsSlider as DsSliderElement, defineCustomElement as defineDsSlider } from "@ds-mo/ui/dist/components/ds-slider.js";
 export const DsSlider = /*@__PURE__*/ createComponent({

package/dist/react/ds-swatch-picker.d.ts

@@ -2,7 +2,7 @@
  * 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 { EventName, StencilReactComponent } from './react-runtime.js';
 import { type DsSwatchPickerCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsSwatchPicker as DsSwatchPickerElement } from "@ds-mo/ui/dist/components/ds-swatch-picker.js";

package/dist/react/ds-swatch-picker.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsSwatchPicker as DsSwatchPickerElement, defineCustomElement as defineDsSwatchPicker } from "@ds-mo/ui/dist/components/ds-swatch-picker.js";
 export const DsSwatchPicker = /*@__PURE__*/ createComponent({

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

@@ -2,7 +2,7 @@
  * 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 { EventName, StencilReactComponent } from './react-runtime.js';
 import { type DsSwitchCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsSwitch as DsSwitchElement } from "@ds-mo/ui/dist/components/ds-switch.js";

package/dist/react/ds-switch.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsSwitch as DsSwitchElement, defineCustomElement as defineDsSwitch } from "@ds-mo/ui/dist/components/ds-switch.js";
 export const DsSwitch = /*@__PURE__*/ createComponent({

package/dist/react/ds-tab-group.d.ts

@@ -2,7 +2,7 @@
  * 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 { EventName, StencilReactComponent } from './react-runtime.js';
 import { type DsTabGroupCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTabGroup as DsTabGroupElement } from "@ds-mo/ui/dist/components/ds-tab-group.js";

package/dist/react/ds-tab-group.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsTabGroup as DsTabGroupElement, defineCustomElement as defineDsTabGroup } from "@ds-mo/ui/dist/components/ds-tab-group.js";
 export const DsTabGroup = /*@__PURE__*/ createComponent({

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

@@ -2,7 +2,7 @@
  * 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 { EventName, StencilReactComponent } from './react-runtime.js';
 import { type DsTagCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTag as DsTagElement } from "@ds-mo/ui/dist/components/ds-tag.js";

package/dist/react/ds-tag.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsTag as DsTagElement, defineCustomElement as defineDsTag } from "@ds-mo/ui/dist/components/ds-tag.js";
 export const DsTag = /*@__PURE__*/ createComponent({

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

@@ -2,7 +2,7 @@
  * 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 { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsText as DsTextElement } from "@ds-mo/ui/dist/components/ds-text.js";
 export type DsTextEvents = NonNullable<unknown>;

package/dist/react/ds-text.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsText as DsTextElement, defineCustomElement as defineDsText } from "@ds-mo/ui/dist/components/ds-text.js";
 export const DsText = /*@__PURE__*/ createComponent({

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

@@ -2,7 +2,7 @@
  * 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 { EventName, StencilReactComponent } from './react-runtime.js';
 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";

package/dist/react/ds-toast.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 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({

package/dist/react/ds-tooltip-data-viz.d.ts

@@ -2,7 +2,7 @@
  * 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 { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTooltipDataViz as DsTooltipDataVizElement } from "@ds-mo/ui/dist/components/ds-tooltip-data-viz.js";
 export type DsTooltipDataVizEvents = NonNullable<unknown>;

package/dist/react/ds-tooltip-data-viz.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsTooltipDataViz as DsTooltipDataVizElement, defineCustomElement as defineDsTooltipDataViz } from "@ds-mo/ui/dist/components/ds-tooltip-data-viz.js";
 export const DsTooltipDataViz = /*@__PURE__*/ createComponent({

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

@@ -2,7 +2,7 @@
  * 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 { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTooltip as DsTooltipElement } from "@ds-mo/ui/dist/components/ds-tooltip.js";
 export type DsTooltipEvents = NonNullable<unknown>;

package/dist/react/ds-tooltip.js

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 import React from 'react';
 import { DsTooltip as DsTooltipElement, defineCustomElement as defineDsTooltip } from "@ds-mo/ui/dist/components/ds-tooltip.js";
 export const DsTooltip = /*@__PURE__*/ createComponent({

package/dist/react/ds-typing-indicator.d.ts

@@ -2,7 +2,7 @@
  * 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 { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTypingIndicator as DsTypingIndicatorElement } from "@ds-mo/ui/dist/components/ds-typing-indicator.js";
 export type DsTypingIndicatorEvents = NonNullable<unknown>;

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

@@ -1,5 +1,5 @@
 'use client';
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from './react-runtime.js';
 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({

package/dist/react/react-runtime.d.ts

@@ -0,0 +1,17 @@
+import type { EventName, Options } from '@lit/react';
+import type React from 'react';
+type EventNames = Record<string, EventName | string>;
+type StencilProps<I extends HTMLElement, E extends EventNames, C, R extends keyof C = never> = Omit<React.HTMLAttributes<I>, keyof E> & Partial<{
+    [K in keyof E]: E[K] extends EventName<infer T> ? (event: T) => void : (event: Event) => void;
+}> & Required<Pick<C, R>> & Partial<Omit<C, R>> & React.RefAttributes<I>;
+/** React component type emitted by Stencil's React output target. */
+export type StencilReactComponent<I extends HTMLElement, E extends EventNames = Record<never, never>, C = Omit<I, keyof HTMLElement>, R extends keyof C = never> = React.FunctionComponent<StencilProps<I, E, C, R>>;
+/**
+ * Defines a Stencil custom element and adapts it to React through Lit's
+ * custom-element bridge. Component rendering remains owned by Stencil.
+ */
+export declare function createComponent<I extends HTMLElement, E extends EventNames = Record<never, never>, C = Omit<I, keyof HTMLElement>, R extends keyof C = never>({ defineCustomElement, tagName, transformTag, ...options }: Options<I, E> & {
+    defineCustomElement: () => void;
+    transformTag?: (tagName: string) => string;
+}): StencilReactComponent<I, E, C, R>;
+export {};

package/dist/react/react-runtime.js

@@ -0,0 +1,13 @@
+import { createComponent as createLitComponent } from '@lit/react';
+/**
+ * Defines a Stencil custom element and adapts it to React through Lit's
+ * custom-element bridge. Component rendering remains owned by Stencil.
+ */
+export function createComponent({ defineCustomElement, tagName, transformTag, ...options }) {
+    defineCustomElement?.();
+    const resolvedTagName = transformTag ? transformTag(tagName) : tagName;
+    return createLitComponent({
+        ...options,
+        tagName: resolvedTagName,
+    });
+}

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

@@ -1,4 +1,4 @@
-import type { AgentResponsePart } from '../conversation-types';
+import type { AgentResponsePart, MessageMetadataVisibility } from '../conversation-types';
 export declare class AgentResponse {
     messageId: string;
     author: string;
@@ -6,6 +6,8 @@ export declare class AgentResponse {
     timestamp: string;
     parts: AgentResponsePart[];
     streaming: boolean;
+    /** Controls whether the complete message metadata footer is persistent or revealed through hover/focus. */
+    metadataVisibility: MessageMetadataVisibility;
     private renderPart;
     render(): any;
 }

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

@@ -59,7 +59,7 @@ export declare class CardOverview {
      * loading state holds the same shape and rhythm as the resolved content.
      *
      * `background` is always passed so the base and shimmer follow the card's
-     * inverted surface in both themes.
+     * permanently dark surface in both themes.
      */
     private bar;
     /**

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

@@ -3,7 +3,9 @@ export declare class CodeBlock {
     language: string;
     filename: string;
     private copied;
-    private copiedTimer?;
+    private readonly copyFeedback;
+    connectedCallback(): void;
+    handleCodeChange(): void;
     disconnectedCallback(): void;
     private copy;
     render(): any;

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

@@ -1,4 +1,4 @@
-import type { MessageDeliveryState, MessageDirection, MessageGroupPosition } from '../conversation-types';
+import type { MessageDeliveryState, MessageDirection, MessageGroupPosition, MessageMetadataVisibility } from '../conversation-types';
 export declare class Message {
     messageId: string;
     direction: MessageDirection;
@@ -10,8 +10,11 @@ export declare class Message {
     timestamp: string;
     deliveryState: MessageDeliveryState | undefined;
     streaming: boolean;
+    /** Controls whether the complete metadata footer is persistent or revealed through hover/focus. */
+    metadataVisibility: MessageMetadataVisibility;
     scrollAnchor: boolean;
     private formattedTimestamp;
+    private renderMetadataActions;
     render(): any;
 }
 //# sourceMappingURL=Message.d.ts.map

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

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { MessageCopyResultEventDetail, MessageFeedback } from '../conversation-types';
+export declare class MessageActions {
+    copyText: string | undefined;
+    feedbackEnabled: boolean;
+    feedback: MessageFeedback | undefined;
+    private copied;
+    dsCopyResult: EventEmitter<MessageCopyResultEventDetail>;
+    dsFeedbackChange: EventEmitter<MessageFeedback | undefined>;
+    private readonly copyFeedback;
+    connectedCallback(): void;
+    handleCopyTextChange(): void;
+    disconnectedCallback(): void;
+    private copy;
+    private changeFeedback;
+    render(): any;
+}
+//# sourceMappingURL=MessageActions.d.ts.map

package/dist/types/components/conversation-types.d.ts

@@ -2,6 +2,11 @@ export type ConversationItemState = 'default' | 'busy' | 'error';
 export type MessageDirection = 'incoming' | 'outgoing' | 'system';
 export type MessageGroupPosition = 'single' | 'first' | 'middle' | 'last';
 export type MessageDeliveryState = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+export type MessageMetadataVisibility = 'always' | 'hover';
+export type MessageFeedback = 'positive' | 'negative';
+export interface MessageCopyResultEventDetail {
+    status: 'success' | 'error';
+}
 export type MessageScrollerPosition = 'start' | 'end' | 'last-anchor';
 export type MessageComposerStatus = 'ready' | 'submitted' | 'streaming' | 'error';
 export interface ConversationAttachment {

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, ConversationAttachment, ConversationItemState, MessageComposerStatus, MessageDeliveryState, MessageDirection, MessageGroupPosition, MessageScrollerPosition } from "./components/conversation-types";
+import { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, ConversationAttachment, ConversationItemState, MessageComposerStatus, MessageCopyResultEventDetail, MessageDeliveryState, MessageDirection, MessageFeedback, MessageGroupPosition, MessageMetadataVisibility, MessageScrollerPosition } from "./components/conversation-types";
 import { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
 import { AvatarSize } from "./components/Avatar/Avatar";
 import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
@@ -61,7 +61,7 @@ import { TabBackground } from "./components/TabGroup/TabGroup";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
-export { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, ConversationAttachment, ConversationItemState, MessageComposerStatus, MessageDeliveryState, MessageDirection, MessageGroupPosition, MessageScrollerPosition } from "./components/conversation-types";
+export { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, ConversationAttachment, ConversationItemState, MessageComposerStatus, MessageCopyResultEventDetail, MessageDeliveryState, MessageDirection, MessageFeedback, MessageGroupPosition, MessageMetadataVisibility, MessageScrollerPosition } from "./components/conversation-types";
 export { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
 export { AvatarSize } from "./components/Avatar/Avatar";
 export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
@@ -141,6 +141,11 @@ export namespace Components {
           * @default ''
          */
         "messageId": string;
+        /**
+          * Controls whether the complete message metadata footer is persistent or revealed through hover/focus.
+          * @default 'always'
+         */
+        "metadataVisibility": MessageMetadataVisibility;
         /**
           * @default []
          */
@@ -1331,6 +1336,11 @@ export namespace Components {
           * @default ''
          */
         "messageId": string;
+        /**
+          * Controls whether the complete metadata footer is persistent or revealed through hover/focus.
+          * @default 'always'
+         */
+        "metadataVisibility": MessageMetadataVisibility;
         /**
           * @default false
          */
@@ -1350,6 +1360,14 @@ export namespace Components {
          */
         "timestamp": string;
     }
+    interface DsMessageActions {
+        "copyText": string | undefined;
+        "feedback": MessageFeedback | undefined;
+        /**
+          * @default false
+         */
+        "feedbackEnabled": boolean;
+    }
     interface DsMessageBubble {
         /**
           * @default 'received'
@@ -2765,6 +2783,10 @@ export interface DsMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsMenuElement;
 }
+export interface DsMessageActionsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsMessageActionsElement;
+}
 export interface DsMessageComposerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsMessageComposerElement;
@@ -3271,6 +3293,24 @@ declare global {
         prototype: HTMLDsMessageElement;
         new (): HTMLDsMessageElement;
     };
+    interface HTMLDsMessageActionsElementEventMap {
+        "dsCopyResult": MessageCopyResultEventDetail;
+        "dsFeedbackChange": MessageFeedback | undefined;
+    }
+    interface HTMLDsMessageActionsElement extends Components.DsMessageActions, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsMessageActionsElementEventMap>(type: K, listener: (this: HTMLDsMessageActionsElement, ev: DsMessageActionsCustomEvent<HTMLDsMessageActionsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsMessageActionsElementEventMap>(type: K, listener: (this: HTMLDsMessageActionsElement, ev: DsMessageActionsCustomEvent<HTMLDsMessageActionsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsMessageActionsElement: {
+        prototype: HTMLDsMessageActionsElement;
+        new (): HTMLDsMessageActionsElement;
+    };
     interface HTMLDsMessageBubbleElement extends Components.DsMessageBubble, HTMLStencilElement {
     }
     var HTMLDsMessageBubbleElement: {
@@ -3822,6 +3862,7 @@ declare global {
         "ds-markdown": HTMLDsMarkdownElement;
         "ds-menu": HTMLDsMenuElement;
         "ds-message": HTMLDsMessageElement;
+        "ds-message-actions": HTMLDsMessageActionsElement;
         "ds-message-bubble": HTMLDsMessageBubbleElement;
         "ds-message-composer": HTMLDsMessageComposerElement;
         "ds-message-scroller": HTMLDsMessageScrollerElement;
@@ -3880,6 +3921,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "messageId"?: string;
+        /**
+          * Controls whether the complete message metadata footer is persistent or revealed through hover/focus.
+          * @default 'always'
+         */
+        "metadataVisibility"?: MessageMetadataVisibility;
         /**
           * @default []
          */
@@ -5155,6 +5201,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "messageId"?: string;
+        /**
+          * Controls whether the complete metadata footer is persistent or revealed through hover/focus.
+          * @default 'always'
+         */
+        "metadataVisibility"?: MessageMetadataVisibility;
         /**
           * @default false
          */
@@ -5174,6 +5225,16 @@ declare namespace LocalJSX {
          */
         "timestamp"?: string;
     }
+    interface DsMessageActions {
+        "copyText"?: string | undefined;
+        "feedback"?: MessageFeedback | undefined;
+        /**
+          * @default false
+         */
+        "feedbackEnabled"?: boolean;
+        "onDsCopyResult"?: (event: DsMessageActionsCustomEvent<MessageCopyResultEventDetail>) => void;
+        "onDsFeedbackChange"?: (event: DsMessageActionsCustomEvent<MessageFeedback | undefined>) => void;
+    }
     interface DsMessageBubble {
         /**
           * @default 'received'
@@ -6673,6 +6734,7 @@ declare namespace LocalJSX {
         "showAuthor": boolean;
         "timestamp": string;
         "streaming": boolean;
+        "metadataVisibility": MessageMetadataVisibility;
     }
     interface DsAgentSourceListAttributes {
         "heading": string;
@@ -6968,8 +7030,14 @@ declare namespace LocalJSX {
         "timestamp": string;
         "deliveryState": MessageDeliveryState | undefined;
         "streaming": boolean;
+        "metadataVisibility": MessageMetadataVisibility;
         "scrollAnchor": boolean;
     }
+    interface DsMessageActionsAttributes {
+        "copyText": string | undefined;
+        "feedbackEnabled": boolean;
+        "feedback": MessageFeedback | undefined;
+    }
     interface DsMessageBubbleAttributes {
         "variant": MessageBubbleVariant;
     }
@@ -7318,6 +7386,7 @@ declare namespace LocalJSX {
         "ds-markdown": Omit<DsMarkdown, keyof DsMarkdownAttributes> & { [K in keyof DsMarkdown & keyof DsMarkdownAttributes]?: DsMarkdown[K] } & { [K in keyof DsMarkdown & keyof DsMarkdownAttributes as `attr:${K}`]?: DsMarkdownAttributes[K] } & { [K in keyof DsMarkdown & keyof DsMarkdownAttributes as `prop:${K}`]?: DsMarkdown[K] };
         "ds-menu": Omit<DsMenu, keyof DsMenuAttributes> & { [K in keyof DsMenu & keyof DsMenuAttributes]?: DsMenu[K] } & { [K in keyof DsMenu & keyof DsMenuAttributes as `attr:${K}`]?: DsMenuAttributes[K] } & { [K in keyof DsMenu & keyof DsMenuAttributes as `prop:${K}`]?: DsMenu[K] };
         "ds-message": Omit<DsMessage, keyof DsMessageAttributes> & { [K in keyof DsMessage & keyof DsMessageAttributes]?: DsMessage[K] } & { [K in keyof DsMessage & keyof DsMessageAttributes as `attr:${K}`]?: DsMessageAttributes[K] } & { [K in keyof DsMessage & keyof DsMessageAttributes as `prop:${K}`]?: DsMessage[K] };
+        "ds-message-actions": Omit<DsMessageActions, keyof DsMessageActionsAttributes> & { [K in keyof DsMessageActions & keyof DsMessageActionsAttributes]?: DsMessageActions[K] } & { [K in keyof DsMessageActions & keyof DsMessageActionsAttributes as `attr:${K}`]?: DsMessageActionsAttributes[K] } & { [K in keyof DsMessageActions & keyof DsMessageActionsAttributes as `prop:${K}`]?: DsMessageActions[K] };
         "ds-message-bubble": Omit<DsMessageBubble, keyof DsMessageBubbleAttributes> & { [K in keyof DsMessageBubble & keyof DsMessageBubbleAttributes]?: DsMessageBubble[K] } & { [K in keyof DsMessageBubble & keyof DsMessageBubbleAttributes as `attr:${K}`]?: DsMessageBubbleAttributes[K] } & { [K in keyof DsMessageBubble & keyof DsMessageBubbleAttributes as `prop:${K}`]?: DsMessageBubble[K] };
         "ds-message-composer": Omit<DsMessageComposer, keyof DsMessageComposerAttributes> & { [K in keyof DsMessageComposer & keyof DsMessageComposerAttributes]?: DsMessageComposer[K] } & { [K in keyof DsMessageComposer & keyof DsMessageComposerAttributes as `attr:${K}`]?: DsMessageComposerAttributes[K] } & { [K in keyof DsMessageComposer & keyof DsMessageComposerAttributes as `prop:${K}`]?: DsMessageComposer[K] };
         "ds-message-scroller": Omit<DsMessageScroller, keyof DsMessageScrollerAttributes> & { [K in keyof DsMessageScroller & keyof DsMessageScrollerAttributes]?: DsMessageScroller[K] } & { [K in keyof DsMessageScroller & keyof DsMessageScrollerAttributes as `attr:${K}`]?: DsMessageScrollerAttributes[K] } & { [K in keyof DsMessageScroller & keyof DsMessageScrollerAttributes as `prop:${K}`]?: DsMessageScroller[K] };
@@ -7405,6 +7474,7 @@ declare module "@stencil/core" {
             "ds-markdown": LocalJSX.IntrinsicElements["ds-markdown"] & JSXBase.HTMLAttributes<HTMLDsMarkdownElement>;
             "ds-menu": LocalJSX.IntrinsicElements["ds-menu"] & JSXBase.HTMLAttributes<HTMLDsMenuElement>;
             "ds-message": LocalJSX.IntrinsicElements["ds-message"] & JSXBase.HTMLAttributes<HTMLDsMessageElement>;
+            "ds-message-actions": LocalJSX.IntrinsicElements["ds-message-actions"] & JSXBase.HTMLAttributes<HTMLDsMessageActionsElement>;
             "ds-message-bubble": LocalJSX.IntrinsicElements["ds-message-bubble"] & JSXBase.HTMLAttributes<HTMLDsMessageBubbleElement>;
             "ds-message-composer": LocalJSX.IntrinsicElements["ds-message-composer"] & JSXBase.HTMLAttributes<HTMLDsMessageComposerElement>;
             "ds-message-scroller": LocalJSX.IntrinsicElements["ds-message-scroller"] & JSXBase.HTMLAttributes<HTMLDsMessageScrollerElement>;

package/dist/types/utils/clipboard.d.ts

@@ -0,0 +1,31 @@
+export interface ClipboardWriter {
+    writeText(text: string): Promise<void>;
+}
+export interface ClipboardFeedbackScheduler {
+    setTimeout(callback: () => void, delay: number): unknown;
+    clearTimeout(handle: unknown): void;
+}
+export declare function writeClipboardText(text: string, clipboard?: ClipboardWriter | undefined): Promise<boolean>;
+/**
+ * Owns temporary copied feedback for controls that execute browser clipboard writes.
+ *
+ * A monotonically increasing request id prevents a late clipboard promise from
+ * mutating a disconnected owner, stale content, or a newer copy request.
+ */
+export declare class ClipboardFeedbackController {
+    private readonly onCopiedChange;
+    private readonly copiedDuration;
+    private readonly scheduler;
+    private active;
+    private copied;
+    private requestId;
+    private timer;
+    constructor(onCopiedChange: (copied: boolean) => void, copiedDuration?: number, scheduler?: ClipboardFeedbackScheduler);
+    connect(): void;
+    disconnect(): void;
+    reset(): void;
+    copy(text: string, clipboard?: ClipboardWriter | undefined): Promise<boolean | undefined>;
+    private clearTimer;
+    private setCopied;
+}
+//# sourceMappingURL=clipboard.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "13.2.0",
+  "version": "13.4.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -111,8 +111,7 @@
     "@ds-mo/tokens": "^5.1.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "rxjs": "^7.8.0",
-    "@stencil/react-output-target": ">=1.6 <2"
+    "rxjs": "^7.8.0"
   },
   "peerDependenciesMeta": {
     "@angular/core": {
@@ -129,9 +128,6 @@
     },
     "rxjs": {
       "optional": true
-    },
-    "@stencil/react-output-target": {
-      "optional": true
     }
   },
   "devDependencies": {
@@ -189,6 +185,7 @@
     "dist/components/**/*.js"
   ],
   "dependencies": {
+    "@lit/react": "^1.0.8",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",

package/dist/components/p-6qXDqCj_.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,h as a,a as t,t as i}from"./index.js";import{d}from"./p-Ay1AX7Ql.js";const n=()=>`.sc-ds-message-h{display:block;box-sizing:border-box;content-visibility:auto;contain-intrinsic-size:auto var(--dimension-size-800);-webkit-user-select:none;user-select:none}.message-host--group-middle.sc-ds-message-h,.message-host--group-last.sc-ds-message-h{margin-block-start:calc(var(--dimension-space-050) - var(--dimension-space-300))}.message.sc-ds-message{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:0;width:100%;box-sizing:border-box}.message--outgoing.sc-ds-message{grid-template-columns:minmax(0, 1fr) auto}.message__header.sc-ds-message:empty,.message__footer.sc-ds-message:empty,.message__actions.sc-ds-message:empty{display:none}.message__actions.sc-ds-message:not(:empty){margin-inline-start:var(--dimension-space-075)}.message__body.sc-ds-message{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050)}.message--incoming.sc-ds-message .message__body.sc-ds-message{width:100%}.message--outgoing.sc-ds-message .message__body.sc-ds-message{align-items:flex-end}.message--outgoing.sc-ds-message .message__header.sc-ds-message{display:none}.message--system.sc-ds-message .message__body.sc-ds-message{align-items:center}.message__header.sc-ds-message,.message__footer.sc-ds-message,.message__actions.sc-ds-message{display:flex;align-items:center;gap:var(--dimension-space-050)}.message__content.sc-ds-message{width:100%;min-width:0;-webkit-user-select:text;user-select:text}.message--outgoing.sc-ds-message .message__content.sc-ds-message{display:flex;justify-content:flex-end}.message__footer.sc-ds-message time.sc-ds-message{display:inline-flex}.message--group-middle.sc-ds-message .message__header.sc-ds-message,.message--group-last.sc-ds-message .message__header.sc-ds-message{display:none}.message--group-first.sc-ds-message .message__footer.sc-ds-message,.message--group-middle.sc-ds-message .message__footer.sc-ds-message{display:none}`;const c={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Failed to send"};const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.messageId="";this.direction="incoming";this.groupPosition="single";this.author="";this.showAuthor=true;this.timestamp="";this.streaming=false;this.scrollAnchor=false}formattedTimestamp(){if(!this.timestamp)return"";const e=Date.parse(this.timestamp);if(Number.isNaN(e))return this.timestamp;return new Intl.DateTimeFormat(undefined,{hour:"numeric",minute:"2-digit"}).format(new Date(e))}render(){const e=this.deliveryState?c[this.deliveryState]:"";const s=this.formattedTimestamp();return a(t,{key:"02650aa73a12be1040165b470840315e17a29391",class:`message-host--group-${this.groupPosition}`,"data-message-id":this.messageId||undefined,"data-scroll-anchor":this.scrollAnchor?"true":undefined,"aria-busy":this.streaming?"true":undefined},a("article",{key:"56f3cb7580cd163206a8b230d14d1bedec46c7cd",class:{message:true,[`message--${this.direction}`]:true,[`message--group-${this.groupPosition}`]:true},"aria-label":this.author?`Message from ${this.author}`:"Message"},a("div",{key:"5442f9e927e357e30854a673624f69287c3579e8",class:"message__body"},a("div",{key:"509c5d39ad6e14a1cac901977f7fd9b2a7894ffe",class:"message__header"},a("slot",{key:"63e9f398213a69e06ac7cef9cb2dc5d0500bad1e",name:"header"}),this.author&&this.showAuthor?a("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"primary"},this.author):null),a("div",{key:"e1e30acca4c8094d4c7bec41ddb731ae27d83584",class:"message__content"},a("slot",{key:"b1e5d3010be6a3adf1322dec6c000ac8600aea42"})),a("div",{key:"cdbe4e1c1ec457bf9cefa22cae6faad04cb44369",class:"message__footer"},a("slot",{key:"f473303e22698c99733a3ceeeabecb8428a25e02",name:"footer"}),e?a("ds-text",{as:"span",variant:"text-caption",color:this.deliveryState==="failed"?"negative":"secondary"},e):null,this.deliveryState==="failed"&&s?a("ds-text",{as:"span",variant:"text-caption",color:"tertiary","aria-hidden":"true"},"·"):null,s?a("time",{dateTime:this.timestamp},a("ds-text",{as:"span",variant:"text-caption",color:"secondary"},s)):null)),a("div",{key:"85e128c5a9b392bb68cc7c2b7161215fe0de3e92",class:"message__actions"},a("slot",{key:"15c3dabf43498ae978b8e60131bfe7745cef98ec",name:"actions"}))))}static get style(){return n()}},[262,"ds-message",{messageId:[513,"message-id"],direction:[513],groupPosition:[1,"group-position"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],deliveryState:[1,"delivery-state"],streaming:[4],scrollAnchor:[516,"scroll-anchor"]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-message","ds-text"];e.forEach((e=>{switch(e){case"ds-message":if(!customElements.get(i(e))){customElements.define(i(e),m)}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}o();export{m as M,o as d};
-//# sourceMappingURL=p-6qXDqCj_.js.map

package/dist/components/p-6qXDqCj_.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["messageCss","DELIVERY_LABELS","sending","sent","delivered","read","failed","Message","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","messageId","direction","groupPosition","author","showAuthor","timestamp","streaming","scrollAnchor","formattedTimestamp","parsed","Date","parse","Number","isNaN","Intl","DateTimeFormat","undefined","hour","minute","format","render","delivery","deliveryState","h","Host","key","class","message","name","as","variant","emphasis","color","dateTime"],"sources":["src/wc/components/Message/Message.css?tag=ds-message&encapsulation=scoped","src/wc/components/Message/Message.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--dimension-size-800);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(.message-host--group-middle),\n:host(.message-host--group-last) {\n  margin-block-start: calc(var(--dimension-space-050) - var(--dimension-space-300));\n}\n\n.message {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.message--outgoing {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.message__header:empty,\n.message__footer:empty,\n.message__actions:empty {\n  display: none;\n}\n\n.message__actions:not(:empty) {\n  margin-inline-start: var(--dimension-space-075);\n}\n\n.message__body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\n.message--incoming .message__body {\n  width: 100%;\n}\n\n.message--outgoing .message__body {\n  align-items: flex-end;\n}\n\n.message--outgoing .message__header {\n  display: none;\n}\n\n.message--system .message__body {\n  align-items: center;\n}\n\n.message__header,\n.message__footer,\n.message__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n.message__content {\n  width: 100%;\n  min-width: 0;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message--outgoing .message__content {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.message__footer time {\n  display: inline-flex;\n}\n\n.message--group-middle .message__header,\n.message--group-last .message__header {\n  display: none;\n}\n\n.message--group-first .message__footer,\n.message--group-middle .message__footer {\n  display: none;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport type {\n  MessageDeliveryState,\n  MessageDirection,\n  MessageGroupPosition,\n} from '../conversation-types';\n\nconst DELIVERY_LABELS: Record<MessageDeliveryState, string> = {\n  sending: 'Sending',\n  sent: 'Sent',\n  delivered: 'Delivered',\n  read: 'Read',\n  failed: 'Failed to send',\n};\n\n@Component({\n  tag: 'ds-message',\n  styleUrl: 'Message.css',\n  scoped: true,\n})\nexport class Message {\n  @Prop({ reflect: true }) messageId: string = '';\n  @Prop({ reflect: true }) direction: MessageDirection = 'incoming';\n  @Prop() groupPosition: MessageGroupPosition = 'single';\n  @Prop() author: string = '';\n  /** Keep author semantics while allowing products with self-evident roles to hide the visible label. */\n  @Prop() showAuthor: boolean = true;\n  /** ISO timestamp. */\n  @Prop() timestamp: string = '';\n  @Prop() deliveryState: MessageDeliveryState | undefined;\n  @Prop() streaming: boolean = false;\n  @Prop({ reflect: true }) scrollAnchor: boolean = false;\n\n  private formattedTimestamp(): string {\n    if (!this.timestamp) return '';\n    const parsed = Date.parse(this.timestamp);\n    if (Number.isNaN(parsed)) return this.timestamp;\n    return new Intl.DateTimeFormat(undefined, {\n      hour: 'numeric',\n      minute: '2-digit',\n    }).format(new Date(parsed));\n  }\n\n  render() {\n    const delivery = this.deliveryState ? DELIVERY_LABELS[this.deliveryState] : '';\n    const formattedTimestamp = this.formattedTimestamp();\n    return (\n      <Host\n        class={`message-host--group-${this.groupPosition}`}\n        data-message-id={this.messageId || undefined}\n        data-scroll-anchor={this.scrollAnchor ? 'true' : undefined}\n        aria-busy={this.streaming ? 'true' : undefined}\n      >\n        <article\n          class={{\n            message: true,\n            [`message--${this.direction}`]: true,\n            [`message--group-${this.groupPosition}`]: true,\n          }}\n          aria-label={this.author ? `Message from ${this.author}` : 'Message'}\n        >\n          <div class=\"message__body\">\n            <div class=\"message__header\">\n              <slot name=\"header\" />\n              {this.author && this.showAuthor ? (\n                <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"primary\">\n                  {this.author}\n                </ds-text>\n              ) : null}\n            </div>\n            <div class=\"message__content\">\n              <slot />\n            </div>\n            <div class=\"message__footer\">\n              <slot name=\"footer\" />\n              {delivery ? (\n                <ds-text\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color={this.deliveryState === 'failed' ? 'negative' : 'secondary'}\n                >\n                  {delivery}\n                </ds-text>\n              ) : null}\n              {this.deliveryState === 'failed' && formattedTimestamp ? (\n                <ds-text as=\"span\" variant=\"text-caption\" color=\"tertiary\" aria-hidden=\"true\">\n                  ·\n                </ds-text>\n              ) : null}\n              {formattedTimestamp ? (\n                <time dateTime={this.timestamp}>\n                  <ds-text as=\"span\" variant=\"text-caption\" color=\"secondary\">\n                    {formattedTimestamp}\n                  </ds-text>\n                </time>\n              ) : null}\n            </div>\n          </div>\n          <div class=\"message__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0FAAA,MAAMA,EAAa,IAAM,o3DCOzB,MAAMC,EAAwD,CAC5DC,QAAS,UACTC,KAAM,OACNC,UAAW,YACXC,KAAM,OACNC,OAAQ,kB,MAQGC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,4CAM2BC,KAAAC,UAAoB,GACpBD,KAAAE,UAA8B,WAC/CF,KAAAG,cAAsC,SACtCH,KAAAI,OAAiB,GAEjBJ,KAAAK,WAAsB,KAEtBL,KAAAM,UAAoB,GAEpBN,KAAAO,UAAqB,MACJP,KAAAQ,aAAwB,KA0ElD,CAxES,kBAAAC,GACN,IAAKT,KAAKM,UAAW,MAAO,GAC5B,MAAMI,EAASC,KAAKC,MAAMZ,KAAKM,WAC/B,GAAIO,OAAOC,MAAMJ,GAAS,OAAOV,KAAKM,UACtC,OAAO,IAAIS,KAAKC,eAAeC,UAAW,CACxCC,KAAM,UACNC,OAAQ,YACPC,OAAO,IAAIT,KAAKD,G,CAGrB,MAAAW,GACE,MAAMC,EAAWtB,KAAKuB,cAAgBlC,EAAgBW,KAAKuB,eAAiB,GAC5E,MAAMd,EAAqBT,KAAKS,qBAChC,OACEe,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,uBAAuB3B,KAAKG,gBAAe,kBACjCH,KAAKC,WAAagB,UAAS,qBACxBjB,KAAKQ,aAAe,OAASS,UAAS,YAC/CjB,KAAKO,UAAY,OAASU,WAErCO,EAAA,WAAAE,IAAA,2CACEC,MAAO,CACLC,QAAS,KACT,CAAC,YAAY5B,KAAKE,aAAc,KAChC,CAAC,kBAAkBF,KAAKG,iBAAkB,MAC3C,aACWH,KAAKI,OAAS,gBAAgBJ,KAAKI,SAAW,WAE1DoB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACV7B,KAAKI,QAAUJ,KAAKK,WACnBmB,EAAA,WAASM,GAAG,OAAOC,QAAQ,kBAAkBC,SAAQ,KAACC,MAAM,WACzDjC,KAAKI,QAEN,MAENoB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACVP,EACCE,EAAA,WACEM,GAAG,OACHC,QAAQ,eACRE,MAAOjC,KAAKuB,gBAAkB,SAAW,WAAa,aAErDD,GAED,KACHtB,KAAKuB,gBAAkB,UAAYd,EAClCe,EAAA,WAASM,GAAG,OAAOC,QAAQ,eAAeE,MAAM,WAAU,cAAa,QAAM,KAG3E,KACHxB,EACCe,EAAA,QAAMU,SAAUlC,KAAKM,WACnBkB,EAAA,WAASM,GAAG,OAAOC,QAAQ,eAAeE,MAAM,aAC7CxB,IAGH,OAGRe,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,c","ignoreList":[]}