@ds-mo/ui 16.1.1 → 16.1.3

package/dist/mcp-data/registry/chart-legend.json

@@ -42,12 +42,12 @@
       ],
       "accessibility": [
         "Rows remain non-interactive unless the item supplies an actual link destination.",
-        "Optional highlight changes opacity only and never moves focus or announces selection.",
+        "Optional highlighting dims peer swatches while preserving text contrast; it never moves focus or announces selection.",
         "Keep full labels available when visible text truncates, and retain stable tabular numeric columns.",
         "Do not rely on swatch color alone; every entry requires a meaningful visible label."
       ],
       "states": [
-        "Local pointer or focus interaction and external chart highlight remain separate; both may dim peers, but only a real link row receives navigation affordances.",
+        "Local pointer or focus interaction and external chart highlight remain separate; both may dim peer swatches, but only a real link row receives navigation affordances.",
         "Disable local hover highlighting for static keys such as a line-chart legend; externally controlled activeLabel highlighting and genuine link affordances remain available.",
         "Hover synchronization is temporary emphasis, never filtering, toggling, or selected state.",
         "Percentage values use one consistent precision across the complete legend.",
@@ -94,7 +94,7 @@
           "default": "null",
           "required": false,
           "mutable": false,
-          "description": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\nchart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\nrows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\nsince that's reserved for a real pointer/keyboard interaction on this row."
+          "description": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\nchart's `dsSliceHover` event to keep chart and legend hover in sync. Dims the other\nrows' swatches while keeping their text fully readable. It never shows the hover-fill,\nsince that's reserved for a real pointer/keyboard interaction on this row."
         },
         "direction": {
           "type": "ChartLegendDirection",
@@ -176,7 +176,7 @@
         "default": "null",
         "required": false,
         "mutable": false,
-        "description": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\nchart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\nrows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\nsince that's reserved for a real pointer/keyboard interaction on this row."
+        "description": "Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\nchart's `dsSliceHover` event to keep chart and legend hover in sync. Dims the other\nrows' swatches while keeping their text fully readable. It never shows the hover-fill,\nsince that's reserved for a real pointer/keyboard interaction on this row."
       },
       "direction": {
         "type": "ChartLegendDirection",
@@ -278,7 +278,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -294,12 +294,12 @@
   "files": [
     {
       "path": "src/wc/components/ChartLegend/ChartLegend.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family-ui);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--dimmed {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__item {\n    transition: none;\n  }\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  min-width: 0;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n}\n\n@media (forced-colors: active) {\n  .chart-legend__swatch {\n    forced-color-adjust: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family-ui);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so optional highlight/link\n   affordances cover the whole row while children align to the shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600);\n  column-gap: var(--dimension-space-075);\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical.chart-legend--show-percentage) .chart-legend__list {\n  grid-template-columns: auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n  gap: var(--dimension-space-100);\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n/* Highlight the swatches without reducing contrast for labels and numeric details. */\n.chart-legend__item--dimmed .chart-legend__swatch {\n  opacity: var(--effect-opacity-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chart-legend__swatch {\n    transition: none;\n  }\n}\n\n.chart-legend__label {\n  min-width: 0;\n}\n\n.chart-legend__percentage {\n  width: 100%;\n  min-width: 0;\n  text-align: right;\n}\n\n.chart-legend__value {\n  width: 100%;\n  text-align: right;\n  min-width: 0;\n}\n\n@media (forced-colors: active) {\n  .chart-legend__swatch {\n    forced-color-adjust: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ChartLegend/ChartLegend.tsx",
-      "content": "import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, formatPercentage, resolveSafeUrl } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\nexport type ChartLegendPercentageDecimals = 1 | 2;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartLegendItem[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  @Prop() locale: string | undefined;\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /** Fixed number of decimal places shown for percentages. */\n  @Prop() percentageDecimals: ChartLegendPercentageDecimals = 1;\n  /** Let local pointer/focus movement highlight one item and emit `dsItemHover`. */\n  @Prop() highlightOnHover: boolean = true;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  @Watch('highlightOnHover')\n  handleHighlightOnHoverChange(enabled: boolean) {\n    if (!enabled) this.hoveredLabel = null;\n  }\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. an application-owned chart focus state).\n    const highlightLabel = this.activeLabel ?? (this.highlightOnHover ? this.hoveredLabel : null);\n\n    return (\n      <Host\n        class={{\n          'chart-legend': true,\n          [`chart-legend--${this.direction}`]: true,\n          'chart-legend--show-percentage': this.showPercentage,\n        }}\n      >\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul\n          class=\"chart-legend__list\"\n          onMouseLeave={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n        >\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const href = resolveSafeUrl(item.href);\n            const RowTag = href ? 'a' : 'div';\n            const percentage =\n              item.value != null\n                ? formatPercentage(\n                    total ? item.value / total : 0,\n                    this.percentageDecimals,\n                    this.locale\n                  )\n                : '';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!href,\n                    'chart-legend__item--dimmed': isDimmed,\n                    'ds-control--md': true,\n                    'ds-interaction-fill': this.highlightOnHover || !!href,\n                    'ds-focus-ring-inset': !!href,\n                  }}\n                  href={href}\n                  onClick={href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n                  onFocus={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n                  onBlur={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span\n                      class=\"chart-legend__swatch\"\n                      style={{ backgroundColor: item.color ?? categoryColor(i) }}\n                    />\n                  </span>\n                  <ds-text\n                    class=\"chart-legend__label\"\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    lineTruncation={1}\n                    title={item.label}\n                  >\n                    {item.label}\n                  </ds-text>\n                  {item.value != null && (\n                    <ds-text\n                      class=\"chart-legend__value\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={String(item.value)}\n                    >\n                      {formatCompactNumber(item.value, this.locale)}\n                    </ds-text>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <ds-text\n                      class=\"chart-legend__percentage\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={percentage}\n                    >\n                      {percentage}\n                    </ds-text>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, formatPercentage, resolveSafeUrl } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\nexport type ChartLegendPercentageDecimals = 1 | 2;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartLegendItem[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  @Prop() locale: string | undefined;\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /** Fixed number of decimal places shown for percentages. */\n  @Prop() percentageDecimals: ChartLegendPercentageDecimals = 1;\n  /** Let local pointer/focus movement highlight one item and emit `dsItemHover`. */\n  @Prop() highlightOnHover: boolean = true;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Dims the other\n   * rows' swatches while keeping their text fully readable. It never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  @Watch('highlightOnHover')\n  handleHighlightOnHoverChange(enabled: boolean) {\n    if (!enabled) this.hoveredLabel = null;\n  }\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. an application-owned chart focus state).\n    const highlightLabel = this.activeLabel ?? (this.highlightOnHover ? this.hoveredLabel : null);\n\n    return (\n      <Host\n        class={{\n          'chart-legend': true,\n          [`chart-legend--${this.direction}`]: true,\n          'chart-legend--show-percentage': this.showPercentage,\n        }}\n      >\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul\n          class=\"chart-legend__list\"\n          onMouseLeave={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n        >\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const href = resolveSafeUrl(item.href);\n            const RowTag = href ? 'a' : 'div';\n            const percentage =\n              item.value != null\n                ? formatPercentage(\n                    total ? item.value / total : 0,\n                    this.percentageDecimals,\n                    this.locale\n                  )\n                : '';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!href,\n                    'chart-legend__item--dimmed': isDimmed,\n                    'ds-control--md': true,\n                    'ds-interaction-fill': this.highlightOnHover || !!href,\n                    'ds-focus-ring-inset': !!href,\n                  }}\n                  href={href}\n                  onClick={href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n                  onFocus={this.highlightOnHover ? () => this.handleHover(item) : undefined}\n                  onBlur={this.highlightOnHover ? () => this.handleHover(null) : undefined}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span\n                      class=\"chart-legend__swatch\"\n                      style={{ backgroundColor: item.color ?? categoryColor(i) }}\n                    />\n                  </span>\n                  <ds-text\n                    class=\"chart-legend__label\"\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    lineTruncation={1}\n                    title={item.label}\n                  >\n                    {item.label}\n                  </ds-text>\n                  {item.value != null && (\n                    <ds-text\n                      class=\"chart-legend__value\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={String(item.value)}\n                    >\n                      {formatCompactNumber(item.value, this.locale)}\n                    </ds-text>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <ds-text\n                      class=\"chart-legend__percentage\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      align=\"right\"\n                      fontFeature=\"tabular-nums\"\n                      title={percentage}\n                    >\n                      {percentage}\n                    </ds-text>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -240,7 +240,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/checkbox-group.json

@@ -141,7 +141,12 @@
       },
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot"
+        }
+      ]
     },
     "props": {
       "ariaDescribedby": {
@@ -189,7 +194,12 @@
     },
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "The default slot"
+      }
+    ],
     "exports": {
       "customElement": "ds-checkbox-group",
       "react": "DsCheckboxGroup",
@@ -218,7 +228,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -430,7 +430,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -338,7 +338,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/code-block.json

@@ -164,7 +164,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/conversation-list-item.json

@@ -164,7 +164,17 @@
         }
       ],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "actions"
+        },
+        {
+          "name": "leading"
+        },
+        {
+          "name": "trailing"
+        }
+      ]
     },
     "props": {
       "actionsOpen": {
@@ -253,7 +263,17 @@
       }
     ],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "actions"
+      },
+      {
+        "name": "leading"
+      },
+      {
+        "name": "trailing"
+      }
+    ],
     "exports": {
       "customElement": "ds-conversation-list-item",
       "react": "DsConversationListItem",
@@ -282,7 +302,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/conversation-list-section.json

@@ -76,7 +76,12 @@
       },
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot"
+        }
+      ]
     },
     "props": {
       "heading": {
@@ -100,7 +105,12 @@
     },
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "The default slot"
+      }
+    ],
     "exports": {
       "customElement": "ds-conversation-list-section",
       "react": "DsConversationListSection",
@@ -129,7 +139,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -57,12 +57,34 @@
       "props": {},
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot"
+        },
+        {
+          "name": "actions"
+        },
+        {
+          "name": "empty"
+        }
+      ]
     },
     "props": {},
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "The default slot"
+      },
+      {
+        "name": "actions"
+      },
+      {
+        "name": "empty"
+      }
+    ],
     "exports": {
       "customElement": "ds-conversation-list",
       "react": "DsConversationList",
@@ -91,7 +113,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -370,7 +370,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -488,7 +488,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -352,7 +352,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -574,7 +574,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/data-saved-views.json

@@ -419,7 +419,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -349,7 +349,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -245,7 +245,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -113,7 +113,20 @@
       },
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "leading"
+        },
+        {
+          "name": "search"
+        },
+        {
+          "name": "start"
+        },
+        {
+          "name": "trailing"
+        }
+      ]
     },
     "props": {
       "borderless": {
@@ -137,7 +150,20 @@
     },
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "leading"
+      },
+      {
+        "name": "search"
+      },
+      {
+        "name": "start"
+      },
+      {
+        "name": "trailing"
+      }
+    ],
     "exports": {
       "customElement": "ds-data-toolbar",
       "react": "DsDataToolbar",
@@ -166,7 +192,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -209,7 +209,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/empty-state.json

@@ -195,7 +195,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -153,7 +153,12 @@
       },
       "events": [],
       "methods": [],
-      "slots": []
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot"
+        }
+      ]
     },
     "props": {
       "description": {
@@ -209,7 +214,12 @@
     },
     "events": [],
     "methods": [],
-    "slots": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "The default slot"
+      }
+    ],
     "exports": {
       "customElement": "ds-field",
       "react": "DsField",
@@ -238,7 +248,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/filter-menu.json

@@ -900,7 +900,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }