@ds-mo/ui 9.2.1 → 11.0.0

package/dist/framework/select-multi-value-accessor.js

@@ -13,8 +13,8 @@ export class SelectMultiValueAccessor extends ValueAccessor {
         this.el.nativeElement.values = values;
         this.lastValue = values;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectMultiValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SelectMultiValueAccessor, isStandalone: true, selector: "ds-select-multi", host: { listeners: { "dsChange": "handleChangeEvent($event.target?.[\"values\"])" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectMultiValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectMultiValueAccessor, isStandalone: true, selector: "ds-select-multi", host: { listeners: { "dsChange": "handleChangeEvent($event.target?.[\"values\"])" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectMultiValueAccessor),
@@ -22,7 +22,7 @@ export class SelectMultiValueAccessor extends ValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectMultiValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectMultiValueAccessor, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ds-select-multi',

package/dist/lib/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { createToastManager, toastManager } from './toast-manager';
+export type { ToastAction, ToastActionContext, ToastActionEventDetail, ToastCloseContext, ToastCloseEventDetail, ToastCloseReason, ToastEventDetail, ToastListener, ToastManager, ToastOptions, ToastPositionerOptions, ToastPriority, ToastPromiseOptions, ToastPromiseValue, ToastRecord, ToastSwipeDirection, ToastTransitionStatus, } from './toast-types';

package/dist/lib/toast/index.js

@@ -0,0 +1,158 @@
+// src/wc/toast/toast-manager.ts
+function resolvePromiseValue(value, input) {
+  const resolved = typeof value === "function" ? value(input) : value;
+  return typeof resolved === "string" ? { description: resolved } : resolved;
+}
+var ToastManagerImpl = class {
+  constructor() {
+    this.records = [];
+    this.listeners = /* @__PURE__ */ new Set();
+    this.nextId = 0;
+  }
+  add(options) {
+    const id = options.id || `ds-toast-${++this.nextId}`;
+    const existingIndex = this.records.findIndex((record2) => record2.id === id);
+    if (!options.title?.trim() && !options.description?.trim()) {
+      console.warn(`[ds-toast] Toast "${id}" should provide a title or description.`);
+    }
+    if (existingIndex >= 0) {
+      const current = this.records[existingIndex];
+      const updated = {
+        ...current,
+        ...options,
+        id,
+        priority: options.priority ?? current.priority,
+        transitionStatus: "active",
+        closeReason: void 0,
+        updateKey: current.updateKey + 1,
+        timerKey: current.timerKey + 1
+      };
+      this.records = [
+        updated,
+        ...this.records.filter((_, index) => index !== existingIndex)
+      ];
+      this.emit();
+      return id;
+    }
+    const record = {
+      ...options,
+      id,
+      priority: options.priority ?? "low",
+      transitionStatus: "starting",
+      updateKey: 0,
+      timerKey: 0
+    };
+    this.records = [record, ...this.records];
+    this.emit();
+    return id;
+  }
+  update(id, updates) {
+    const index = this.records.findIndex((record) => record.id === id);
+    if (index < 0) return;
+    const current = this.records[index];
+    const restartsTimer = Object.prototype.hasOwnProperty.call(updates, "timeout") || current.type === "loading" && updates.type !== void 0 && updates.type !== "loading";
+    const updated = {
+      ...current,
+      ...updates,
+      id,
+      priority: updates.priority ?? current.priority,
+      updateKey: current.updateKey + 1,
+      timerKey: restartsTimer ? current.timerKey + 1 : current.timerKey
+    };
+    this.records = this.records.map(
+      (record, recordIndex) => recordIndex === index ? updated : record
+    );
+    this.emit();
+  }
+  close(id, reason = "programmatic") {
+    const index = this.records.findIndex((record) => record.id === id);
+    if (index < 0 || this.records[index].transitionStatus === "ending") return;
+    const closing = {
+      ...this.records[index],
+      transitionStatus: "ending",
+      closeReason: reason
+    };
+    this.records = this.records.map(
+      (record, recordIndex) => recordIndex === index ? closing : record
+    );
+    this.emit();
+    closing.onClose?.({ id, reason, toast: closing });
+  }
+  closeAll(reason = "programmatic") {
+    for (const record of [...this.records]) this.close(record.id, reason);
+  }
+  async promise(promiseValue, options) {
+    const loading = resolvePromiseValue(options.loading, void 0);
+    const id = this.add({
+      ...loading,
+      type: loading.type ?? "loading",
+      timeout: 0
+    });
+    try {
+      const value = await promiseValue;
+      const success = resolvePromiseValue(options.success, value);
+      this.update(id, {
+        ...success,
+        type: success.type ?? "success",
+        timeout: success.timeout
+      });
+      return value;
+    } catch (error) {
+      const failure = resolvePromiseValue(options.error, error);
+      this.update(id, {
+        ...failure,
+        type: failure.type ?? "error",
+        timeout: failure.timeout
+      });
+      throw error;
+    }
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    listener(this.getSnapshot());
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  getSnapshot() {
+    return this.records.map((record) => ({ ...record }));
+  }
+  activate(id) {
+    const record = this.records.find((candidate) => candidate.id === id);
+    if (!record || record.transitionStatus !== "starting") return;
+    this.records = this.records.map(
+      (candidate) => candidate.id === id ? { ...candidate, transitionStatus: "active" } : candidate
+    );
+    this.emit();
+  }
+  remove(id) {
+    const record = this.records.find((candidate) => candidate.id === id);
+    if (!record || record.transitionStatus !== "ending") return null;
+    const reason = record.closeReason ?? "programmatic";
+    this.records = this.records.filter((candidate) => candidate.id !== id);
+    this.emit();
+    const context = { id, reason, toast: record };
+    return context;
+  }
+  notifyRemove(context) {
+    const { toast } = context;
+    toast.onRemove?.(context);
+  }
+  emit() {
+    const snapshot = this.getSnapshot();
+    for (const listener of this.listeners) listener(snapshot);
+  }
+};
+function createToastManager() {
+  return new ToastManagerImpl();
+}
+var defaultManagerKey = /* @__PURE__ */ Symbol.for("@ds-mo/ui/default-toast-manager");
+var globalScope = globalThis;
+var existingManager = globalScope[defaultManagerKey];
+var toastManager = existingManager ?? createToastManager();
+if (!existingManager) globalScope[defaultManagerKey] = toastManager;
+export {
+  createToastManager,
+  toastManager
+};
+//# sourceMappingURL=index.js.map

package/dist/lib/toast/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/wc/toast/toast-manager.ts"],
+  "sourcesContent": ["import type {\n  ToastCloseContext,\n  ToastCloseReason,\n  ToastListener,\n  ToastManager,\n  ToastOptions,\n  ToastPromiseOptions,\n  ToastPromiseValue,\n  ToastRecord,\n} from './toast-types';\n\nfunction resolvePromiseValue<Value, Data>(\n  value:\n    | ToastPromiseValue<Data>\n    | ((input: Value) => ToastPromiseValue<Data>),\n  input: Value,\n): ToastOptions<Data> {\n  const resolved = typeof value === 'function' ? value(input) : value;\n  return typeof resolved === 'string' ? { description: resolved } : resolved;\n}\n\nclass ToastManagerImpl<Data = unknown> implements ToastManager<Data> {\n  private records: ToastRecord<Data>[] = [];\n  private listeners = new Set<ToastListener<Data>>();\n  private nextId = 0;\n\n  add(options: ToastOptions<Data>): string {\n    const id = options.id || `ds-toast-${++this.nextId}`;\n    const existingIndex = this.records.findIndex(record => record.id === id);\n\n    if (!options.title?.trim() && !options.description?.trim()) {\n      console.warn(`[ds-toast] Toast \"${id}\" should provide a title or description.`);\n    }\n\n    if (existingIndex >= 0) {\n      const current = this.records[existingIndex];\n      const updated: ToastRecord<Data> = {\n        ...current,\n        ...options,\n        id,\n        priority: options.priority ?? current.priority,\n        transitionStatus: 'active',\n        closeReason: undefined,\n        updateKey: current.updateKey + 1,\n        timerKey: current.timerKey + 1,\n      };\n      this.records = [\n        updated,\n        ...this.records.filter((_, index) => index !== existingIndex),\n      ];\n      this.emit();\n      return id;\n    }\n\n    const record: ToastRecord<Data> = {\n      ...options,\n      id,\n      priority: options.priority ?? 'low',\n      transitionStatus: 'starting',\n      updateKey: 0,\n      timerKey: 0,\n    };\n    this.records = [record, ...this.records];\n    this.emit();\n    return id;\n  }\n\n  update(id: string, updates: Partial<ToastOptions<Data>>): void {\n    const index = this.records.findIndex(record => record.id === id);\n    if (index < 0) return;\n    const current = this.records[index];\n    const restartsTimer =\n      Object.prototype.hasOwnProperty.call(updates, 'timeout') ||\n      (current.type === 'loading' && updates.type !== undefined && updates.type !== 'loading');\n    const updated: ToastRecord<Data> = {\n      ...current,\n      ...updates,\n      id,\n      priority: updates.priority ?? current.priority,\n      updateKey: current.updateKey + 1,\n      timerKey: restartsTimer ? current.timerKey + 1 : current.timerKey,\n    };\n    this.records = this.records.map((record, recordIndex) =>\n      recordIndex === index ? updated : record\n    );\n    this.emit();\n  }\n\n  close(id: string, reason: ToastCloseReason = 'programmatic'): void {\n    const index = this.records.findIndex(record => record.id === id);\n    if (index < 0 || this.records[index].transitionStatus === 'ending') return;\n\n    const closing: ToastRecord<Data> = {\n      ...this.records[index],\n      transitionStatus: 'ending',\n      closeReason: reason,\n    };\n    this.records = this.records.map((record, recordIndex) =>\n      recordIndex === index ? closing : record\n    );\n    this.emit();\n    closing.onClose?.({ id, reason, toast: closing });\n  }\n\n  closeAll(reason: ToastCloseReason = 'programmatic'): void {\n    for (const record of [...this.records]) this.close(record.id, reason);\n  }\n\n  async promise<Value>(\n    promiseValue: PromiseLike<Value>,\n    options: ToastPromiseOptions<Value, Data>,\n  ): Promise<Value> {\n    const loading = resolvePromiseValue(options.loading, undefined as Value);\n    const id = this.add({\n      ...loading,\n      type: loading.type ?? 'loading',\n      timeout: 0,\n    });\n\n    try {\n      const value = await promiseValue;\n      const success = resolvePromiseValue(options.success, value);\n      this.update(id, {\n        ...success,\n        type: success.type ?? 'success',\n        timeout: success.timeout,\n      });\n      return value;\n    } catch (error) {\n      const failure = resolvePromiseValue(options.error, error);\n      this.update(id, {\n        ...failure,\n        type: failure.type ?? 'error',\n        timeout: failure.timeout,\n      });\n      throw error;\n    }\n  }\n\n  subscribe(listener: ToastListener<Data>): () => void {\n    this.listeners.add(listener);\n    listener(this.getSnapshot());\n    return () => {\n      this.listeners.delete(listener);\n    };\n  }\n\n  getSnapshot(): readonly ToastRecord<Data>[] {\n    return this.records.map(record => ({ ...record }));\n  }\n\n  activate(id: string): void {\n    const record = this.records.find(candidate => candidate.id === id);\n    if (!record || record.transitionStatus !== 'starting') return;\n    this.records = this.records.map(candidate =>\n      candidate.id === id\n        ? { ...candidate, transitionStatus: 'active' }\n        : candidate\n    );\n    this.emit();\n  }\n\n  remove(id: string): ToastCloseContext<Data> | null {\n    const record = this.records.find(candidate => candidate.id === id);\n    if (!record || record.transitionStatus !== 'ending') return null;\n    const reason = record.closeReason ?? 'programmatic';\n    this.records = this.records.filter(candidate => candidate.id !== id);\n    this.emit();\n    const context: ToastCloseContext<Data> = { id, reason, toast: record };\n    return context;\n  }\n\n  notifyRemove(context: ToastCloseContext<Data>): void {\n    const { toast } = context;\n    toast.onRemove?.(context);\n  }\n\n  private emit(): void {\n    const snapshot = this.getSnapshot();\n    for (const listener of this.listeners) listener(snapshot);\n  }\n}\n\nexport function createToastManager<Data = unknown>(): ToastManager<Data> {\n  return new ToastManagerImpl<Data>();\n}\n\nconst defaultManagerKey = Symbol.for('@ds-mo/ui/default-toast-manager');\nconst globalScope = globalThis as typeof globalThis & Record<PropertyKey, unknown>;\nconst existingManager = globalScope[defaultManagerKey] as ToastManager | undefined;\n\nexport const toastManager: ToastManager =\n  existingManager ?? createToastManager();\n\nif (!existingManager) globalScope[defaultManagerKey] = toastManager;\n"],
+  "mappings": "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",
+  "names": ["record"]
+}

package/dist/lib/toast/toast-manager.d.ts

@@ -0,0 +1,3 @@
+import type { ToastManager } from './toast-types';
+export declare function createToastManager<Data = unknown>(): ToastManager<Data>;
+export declare const toastManager: ToastManager;

package/dist/lib/toast/toast-types.d.ts

@@ -0,0 +1,85 @@
+import type { AnchoredPopupAlign, AnchoredPopupSide } from '../utils/anchored-popup';
+export type ToastPriority = 'low' | 'high';
+export type ToastTransitionStatus = 'starting' | 'active' | 'ending';
+export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
+export type ToastCloseReason = 'timeout' | 'close-button' | 'swipe' | 'escape' | 'programmatic';
+export interface ToastPositionerOptions {
+    /** Element or document id used to position this toast outside the global stack. */
+    anchor: HTMLElement | string;
+    side?: AnchoredPopupSide;
+    align?: AnchoredPopupAlign;
+    sideOffset?: number | string;
+    alignOffset?: number | string;
+}
+export interface ToastActionContext<Data = unknown> {
+    id: string;
+    data: Data | undefined;
+    manager: ToastManager<Data>;
+    originalEvent: MouseEvent;
+}
+export interface ToastAction<Data = unknown> {
+    label: string;
+    ariaLabel?: string;
+    onAction?: (context: ToastActionContext<Data>) => void;
+}
+export interface ToastCloseContext<Data = unknown> {
+    id: string;
+    reason: ToastCloseReason;
+    toast: ToastRecord<Data>;
+}
+export interface ToastOptions<Data = unknown> {
+    id?: string;
+    title?: string;
+    description?: string;
+    /** Styling/state hook, including `loading`, `success`, and `error`. */
+    type?: string;
+    /** Milliseconds, a CSS time/token value, or 0 to keep the toast open. */
+    timeout?: number | string;
+    priority?: ToastPriority;
+    action?: ToastAction<Data>;
+    positioner?: ToastPositionerOptions;
+    data?: Data;
+    onClose?: (context: ToastCloseContext<Data>) => void;
+    onRemove?: (context: ToastCloseContext<Data>) => void;
+}
+export interface ToastRecord<Data = unknown> extends Omit<ToastOptions<Data>, 'id' | 'priority'> {
+    id: string;
+    priority: ToastPriority;
+    transitionStatus: ToastTransitionStatus;
+    updateKey: number;
+    /** Internal timer generation; changes only when countdown timing must restart. */
+    timerKey: number;
+    closeReason?: ToastCloseReason;
+}
+export type ToastPromiseValue<Data = unknown> = string | ToastOptions<Data>;
+export interface ToastPromiseOptions<Value, Data = unknown> {
+    loading: ToastPromiseValue<Data>;
+    success: ToastPromiseValue<Data> | ((value: Value) => ToastPromiseValue<Data>);
+    error: ToastPromiseValue<Data> | ((error: unknown) => ToastPromiseValue<Data>);
+}
+export type ToastListener<Data = unknown> = (records: readonly ToastRecord<Data>[]) => void;
+export interface ToastManager<Data = unknown> {
+    add(options: ToastOptions<Data>): string;
+    update(id: string, updates: Partial<ToastOptions<Data>>): void;
+    close(id: string, reason?: ToastCloseReason): void;
+    closeAll(reason?: ToastCloseReason): void;
+    promise<Value>(promiseValue: PromiseLike<Value>, options: ToastPromiseOptions<Value, Data>): Promise<Value>;
+    subscribe(listener: ToastListener<Data>): () => void;
+    getSnapshot(): readonly ToastRecord<Data>[];
+    /** Component lifecycle hook; consumers should not need to call this. */
+    activate(id: string): void;
+    /** Component lifecycle hook; consumers should not need to call this. */
+    remove(id: string): ToastCloseContext<Data> | null;
+    /** Component lifecycle hook; invokes onRemove after rendered DOM removal. */
+    notifyRemove(context: ToastCloseContext<Data>): void;
+}
+export interface ToastEventDetail<Data = unknown> {
+    id: string;
+    toast: ToastRecord<Data>;
+}
+export interface ToastCloseEventDetail<Data = unknown> extends ToastEventDetail<Data> {
+    reason: ToastCloseReason;
+}
+export interface ToastActionEventDetail<Data = unknown> extends ToastEventDetail<Data> {
+    originalEvent: MouseEvent;
+}

package/dist/mcp-data/registry/agent-activity.json

@@ -127,7 +127,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/agent-response.json

@@ -35,10 +35,11 @@
         "Streaming state supplements rather than replaces meaningful textual status."
       ],
       "states": [
-        "The owner replaces immutable part arrays as scripted or live output changes."
+        "The owner replaces immutable part arrays as scripted or live output changes.",
+        "AgentResponse renders directly in Message without borrowing a plain MessageBubble surface."
       ],
       "responsiveBehavior": [
-        "Rich content uses the wider ghost message treatment while respecting transcript constraints."
+        "Rich content uses the available transcript width while respecting readable measure and overflow constraints."
       ],
       "references": [
         {
@@ -177,7 +178,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -193,8 +194,7 @@
     "agent-tool-call",
     "attachment-list",
     "markdown",
-    "message",
-    "message-bubble"
+    "message"
   ],
   "files": [
     {
@@ -204,7 +204,7 @@
     },
     {
       "path": "src/wc/components/AgentResponse/AgentResponse.tsx",
-      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport type { AgentResponsePart } from '../conversation-types';\n\n@Component({ tag: 'ds-agent-response', styleUrl: 'AgentResponse.css', scoped: true })\nexport class AgentResponse {\n  @Prop() messageId: string = '';\n  @Prop() author: string = '';\n  @Prop() showAuthor: boolean = true;\n  @Prop() timestamp: string = '';\n  @Prop() parts: AgentResponsePart[] = [];\n  @Prop() streaming: boolean = false;\n\n  private renderPart(part: AgentResponsePart) {\n    switch (part.type) {\n      case 'markdown':\n        return (\n          <ds-markdown\n            key={part.id}\n            content={part.content}\n            streaming={part.state === 'streaming'}\n          />\n        );\n      case 'activity':\n        return <ds-agent-activity key={part.id} items={part.items} />;\n      case 'tool':\n        return (\n          <ds-agent-tool-call\n            key={part.id}\n            name={part.name}\n            label={part.label}\n            state={part.state}\n            input={part.input}\n            output={part.output}\n            error={part.error}\n          />\n        );\n      case 'attachments':\n        return <ds-attachment-list key={part.id} items={part.items} />;\n      case 'sources':\n        return <ds-agent-source-list key={part.id} items={part.items} />;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ds-message\n          messageId={this.messageId}\n          direction=\"incoming\"\n          author={this.author}\n          showAuthor={this.showAuthor}\n          timestamp={this.timestamp}\n          streaming={this.streaming}\n        >\n          <slot name=\"avatar\" slot=\"avatar\" />\n          <ds-message-bubble variant=\"ghost\">\n            <div class=\"agent-response\">{this.parts.map(part => this.renderPart(part))}</div>\n          </ds-message-bubble>\n          <slot name=\"footer\" slot=\"footer\" />\n          <slot name=\"actions\" slot=\"actions\" />\n        </ds-message>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport type { AgentResponsePart } from '../conversation-types';\n\n@Component({ tag: 'ds-agent-response', styleUrl: 'AgentResponse.css', scoped: true })\nexport class AgentResponse {\n  @Prop() messageId: string = '';\n  @Prop() author: string = '';\n  @Prop() showAuthor: boolean = true;\n  @Prop() timestamp: string = '';\n  @Prop() parts: AgentResponsePart[] = [];\n  @Prop() streaming: boolean = false;\n\n  private renderPart(part: AgentResponsePart) {\n    switch (part.type) {\n      case 'markdown':\n        return (\n          <ds-markdown\n            key={part.id}\n            content={part.content}\n            streaming={part.state === 'streaming'}\n          />\n        );\n      case 'activity':\n        return <ds-agent-activity key={part.id} items={part.items} />;\n      case 'tool':\n        return (\n          <ds-agent-tool-call\n            key={part.id}\n            name={part.name}\n            label={part.label}\n            state={part.state}\n            input={part.input}\n            output={part.output}\n            error={part.error}\n          />\n        );\n      case 'attachments':\n        return <ds-attachment-list key={part.id} items={part.items} />;\n      case 'sources':\n        return <ds-agent-source-list key={part.id} items={part.items} />;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ds-message\n          messageId={this.messageId}\n          direction=\"incoming\"\n          author={this.author}\n          showAuthor={this.showAuthor}\n          timestamp={this.timestamp}\n          streaming={this.streaming}\n        >\n          <div class=\"agent-response\">{this.parts.map(part => this.renderPart(part))}</div>\n          <slot name=\"footer\" slot=\"footer\" />\n          <slot name=\"actions\" slot=\"actions\" />\n        </ds-message>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/agent-source-list.json

@@ -123,7 +123,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/agent-tool-call.json

@@ -182,7 +182,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/app-shell.json

@@ -184,7 +184,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/attachment-list.json

@@ -107,7 +107,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/avatar.json

@@ -125,7 +125,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/badge.json

@@ -261,7 +261,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/bar-nav.json

@@ -295,7 +295,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/button-filled.json

@@ -355,7 +355,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/button-unfilled.json

@@ -505,7 +505,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/card-data-viz-donut.json

@@ -114,7 +114,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^3.1.1",
-          "@ds-mo/icons ^6.2.0"
+          "@ds-mo/icons ^6.3.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
       }
@@ -136,7 +136,7 @@
     },
     {
       "path": "src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */\ntype SyncableSlot = HTMLElement & { activeLabel?: string | null };\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-donut__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-donut__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-donut__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */\ntype SyncableSlot = HTMLElement & { activeLabel?: string | null };\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card-shell-data-viz`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-donut__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-donut__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-donut__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]