@ds-mo/ui 13.3.0 → 13.5.0

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

@@ -6,17 +6,17 @@ export declare class CardOverview {
     variant: CardOverviewVariant;
     /** Intrinsic responsive layout, or a page-owned single-column stack. */
     layout: CardOverviewLayout;
-    /** Leading summary block. Omit to render the bar without a headline figure. */
+    /** Optional nonselectable safety score rendered as the first grid cell. */
     score: OverviewScore | undefined;
-    /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */
+    /** Fixed current date or range. Replaced by content in the `period` slot. */
     periodLabel: string;
-    /** Comparison caption, for example `vs Previous period`. */
+    /** Copy between the current period and comparison control, usually `vs.`. */
     comparisonLabel: string;
-    /** Measures rendered in the responsive grid. Only the first six are shown. */
+    /** Measures rendered in the responsive grid. Only the first seven are shown. */
     metrics: OverviewMetric[];
     /**
      * Width a metric cell may shrink to before the grid drops a column. The grid
-     * reflows and then stacks from this alone, so no measurement is required.
+     * uses this threshold while choosing an evenly distributed column count.
      */
     metricMinWidth: string;
     /** Replace the score and metrics with skeletons while data resolves. */
@@ -28,9 +28,8 @@ export declare class CardOverview {
     /**
      * Page-controlled visual collapse from the full card (`0`) toward its 48px
      * compact handoff height (`1`). The component preserves its expanded flow
-     * height, keeps elevation on the shrinking surface, and clips translated
-     * content internally. The page still owns sticky positioning and the final
-     * swap to `variant="compact"`.
+     * height, keeps the period bar stationary, and moves/clips the grid beneath
+     * it. The page still owns sticky positioning and the final compact handoff.
      */
     scrollCollapseProgress: number;
     /** Emitted when a metric that is not inactive is activated. */
@@ -38,16 +37,18 @@ export declare class CardOverview {
     /** Roving tab stop across selectable metrics. */
     private focusedMetricIndex;
     private expandedHeight;
+    private gridColumns;
     private layoutEl?;
     private layoutResizeObserver;
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
-    private get hasScore();
     private get visibleMetrics();
+    private get visibleCellCount();
     private get resolvedScrollCollapseProgress();
     private get scrollCollapseGeometry();
     private observeLayout;
+    private updateLayoutGeometry;
     /** Index of the roving tab stop, skipping inactive metrics. */
     private get rovingIndex();
     private selectMetric;
@@ -59,7 +60,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/CardOverview/card-overview-controller.d.ts

@@ -1,16 +1,28 @@
-import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';
+import type { CardOverviewVariant, OverviewMetric, SafetyScoreLevel } from './card-overview-types';
 export interface CardOverviewCollapseGeometry {
     active: boolean;
     expandedHeight: number;
     offset: number;
     visibleHeight: number;
 }
+/**
+ * Choose the densest column count that fits without leaving an incomplete row
+ * for even cell totals. Odd totals retain the densest fitting layout and may
+ * therefore leave an orphan in the final row.
+ */
+export declare function resolveOverviewGridColumns(options: {
+    cellCount: number;
+    availableWidth: number;
+    minCellWidth: number;
+    maxColumns?: number;
+}): number;
 export declare function resolveCardOverviewCollapseGeometry(options: {
     variant: CardOverviewVariant;
     progress: number;
     expandedHeight: number;
     compactHeight: number;
 }): CardOverviewCollapseGeometry;
+export declare function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined;
 export declare function resolveOverviewRovingIndex(metrics: readonly OverviewMetric[], focusedIndex: number): number;
 export declare function findNextOverviewMetricIndex(metrics: readonly OverviewMetric[], from: number, step: -1 | 1): number;
 //# sourceMappingURL=card-overview-controller.d.ts.map

package/dist/types/components/CardOverview/card-overview-types.d.ts

@@ -1,6 +1,7 @@
 import type { MetricTrend } from '../../utils/metric-change';
 export type CardOverviewVariant = 'default' | 'compact';
 export type CardOverviewLayout = 'auto' | 'stacked';
+export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';
 /**
  * Leading summary block — the headline figure the rest of the bar contextualises.
  *
@@ -8,13 +9,18 @@ export type CardOverviewLayout = 'auto' | 'stacked';
  * product decision rather than a design-system one.
  */
 export interface OverviewScore {
-    /** Category above the figure, for example `Safety score`. */
+    /** Category before the trend and figure, for example `Safety score`. */
     label: string;
     /** Display-ready headline figure. */
     value: string | number;
     /** Change against the comparison period. Omit when there is nothing to report. */
     trend?: MetricTrend;
-    /** Qualitative band beneath the figure, for example `Good (67–83)`. */
+    /**
+     * Safety score color level. Numeric values from 0–100 infer fair (0–50),
+     * good (51–80), or excellent (81–100) when this is omitted.
+     */
+    level?: SafetyScoreLevel;
+    /** @deprecated Ignored. The redesigned score cell no longer renders a band. */
     band?: string;
 }
 /** One measure in the overview grid. */

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

@@ -1,2 +1,2 @@
-export type { CardOverviewLayout, CardOverviewVariant, OverviewMetric, OverviewScore, } from './card-overview-types';
+export type { CardOverviewLayout, CardOverviewVariant, OverviewMetric, OverviewScore, SafetyScoreLevel, } from './card-overview-types';
 //# sourceMappingURL=index.d.ts.map

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/Input/Input.d.ts

@@ -29,7 +29,7 @@ export declare class Input {
     size: InputSize;
     /** Width fit — fill the parent (default) or hug the available content. */
     width: InputWidth;
-    /** Show the standard inset border. */
+    /** Show the standard inset border, including focused and invalid strokes. */
     hasBorder: boolean;
     /** Optional leading icon name. */
     icon: string | undefined;

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/Select/Select.d.ts

@@ -40,7 +40,7 @@ export declare class Select {
     isLoading: boolean;
     /** Show the selected interaction fill when a valid value exists. */
     activeFill: boolean;
-    /** Show the surface-aware inset border. */
+    /** Show the surface-aware inset border, including focused and invalid strokes. */
     hasBorder: boolean;
     /** Optional trigger prefix icon name. */
     icon: string | undefined;

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 {