@ds-mo/ui 13.14.0 → 13.16.0

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

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

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

@@ -334,7 +334,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
+          "@ds-mo/tokens ^6.2.1",
           "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -349,7 +349,7 @@
   "files": [
     {
       "path": "src/wc/components/Text/Text.css",
-      "content": "@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family: var(--typography-font-family);\n}\n\n:host(:where(.ds-text--inline-box)) {\n  display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n  display: block;\n  width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  text-decoration: inherit;\n  font-style: inherit;\n  font-variant-numeric: inherit;\n  font-feature-settings: inherit;\n  -webkit-user-select: inherit;\n  user-select: inherit;\n  white-space: inherit;\n  text-wrap: inherit;\n  overflow-wrap: inherit;\n  word-break: inherit;\n  /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n     text node — overflow/text-overflow are not inherited by default. */\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary)   { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary)  { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-quaternary) { color: var(--color-foreground-quaternary); }\n:host(.ds-text--color-brand)     { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative)  { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive)  { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning)   { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution)   { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai)        { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold)   { color: var(--color-foreground-on-bold-background-primary); }\n/*\n * The inherit state intentionally has no declaration. `color` inherits\n * naturally, while omitting a host rule lets an owning component apply a\n * semantic token directly to ds-text without depending on stylesheet order.\n */\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n  text-decoration: underline;\n  text-decoration-color: var(--color-foreground-tertiary);\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration: underline dotted;\n  text-decoration-color: var(--color-foreground-tertiary);\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left)   { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right)  { text-align: right; }\n",
+      "content": "@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family: var(--typography-font-family-ui);\n}\n\n:host(:where(.ds-text--inline-box)) {\n  display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n  display: block;\n  width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  text-decoration: inherit;\n  font-style: inherit;\n  font-variant-numeric: inherit;\n  font-feature-settings: inherit;\n  -webkit-user-select: inherit;\n  user-select: inherit;\n  white-space: inherit;\n  text-wrap: inherit;\n  overflow-wrap: inherit;\n  word-break: inherit;\n  /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n     text node — overflow/text-overflow are not inherited by default. */\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary)   { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary)  { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-quaternary) { color: var(--color-foreground-quaternary); }\n:host(.ds-text--color-brand)     { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative)  { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive)  { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning)   { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution)   { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai)        { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold)   { color: var(--color-foreground-on-bold-background-primary); }\n/*\n * The inherit state intentionally has no declaration. `color` inherits\n * naturally, while omitting a host rule lets an owning component apply a\n * semantic token directly to ds-text without depending on stylesheet order.\n */\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n  text-decoration: underline;\n  text-decoration-color: var(--color-foreground-tertiary);\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration: underline dotted;\n  text-decoration-color: var(--color-foreground-tertiary);\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left)   { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right)  { text-align: right; }\n",
       "type": "registry:ui"
     },
     {

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

@@ -307,7 +307,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: manager, swipeDirections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
+          "@ds-mo/tokens ^6.2.1",
           "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -49,6 +49,8 @@
         "The owning chart mounts the callout when a local interaction starts and unmounts it when that interaction ends.",
         "Coordinate updates track within one mounted interaction session without restarting the show delay.",
         "Placement flips horizontally or vertically when the rendered callout approaches a viewport edge.",
+        "The heading and rows use the same medium-density section-heading and control-frame anatomy as menu-style choice content.",
+        "When any grouped row supplies a swatch, every row reserves the shared leading icon zone so mixed-swatch labels and trailing values stay aligned.",
         "Placement is chosen as a quadrant rather than computed as coordinates: the component measures its own rendered rect and flips its side and align props, which CSS consumes. It therefore does not use the shared anchored-position utilities, which resolve an anchor element into x and y.",
         "This separation is deliberate. The callout follows the pointer instead of an element, so it has no anchor rect to resolve; adopting the shared geometry would mean rewriting its CSS to consume coordinates for no behavioral gain.",
         "Reduced motion preserves the final visible state without an opacity transition."
@@ -224,7 +226,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.0.0",
+          "@ds-mo/tokens ^6.2.1",
           "@ds-mo/icons ^6.6.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
@@ -241,12 +243,12 @@
   "files": [
     {
       "path": "src/wc/components/TooltipChart/TooltipChart.css",
-      "content": "@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  padding: var(--dimension-space-050);\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__heading {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding-inline: calc(\n    var(--ds-control-padding-inline, var(--dimension-space-075)) +\n      var(--ds-control-label-inset, var(--dimension-space-025))\n  );\n}\n\n.tooltip-chart__items {\n  display: grid;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label {\n  margin-inline-end: var(--dimension-space-050);\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-chart--visible) {\n  animation: tooltip-chart-fade-in var(--effect-motion-short-2) forwards;\n}\n\n.tooltip-chart__item {\n  width: 100%;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.tooltip-chart__items {\n  display: contents;\n}\n\n.tooltip-chart__swatch-box {\n  pointer-events: none;\n}\n\n.tooltip-chart__swatch {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  flex: none;\n  border-radius: var(--dimension-radius-half);\n  background: var(--ds-tooltip-chart-swatch);\n}\n\n.tooltip-chart__value {\n  margin-inline-start: auto;\n  text-align: end;\n}\n\n.tooltip-chart__label,\n.tooltip-chart__value {\n  flex: none;\n}\n\n@keyframes tooltip-chart-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-chart--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/TooltipChart/TooltipChart.tsx",
-      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveCssTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipChartSide = 'left' | 'right';\nexport type TooltipChartAlign = 'top' | 'bottom';\n\nexport interface TooltipChartItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * polar arc, …). A composition may suppress it when a visible legend already\n * surfaces the same value.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-chart',\n  styleUrl: 'TooltipChart.css',\n  scoped: true,\n})\nexport class TooltipChart {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Optional heading for grouped chart focus. */\n  @Prop() heading?: string;\n  /** Multi-row content. When supplied, this replaces the legacy label/value row. */\n  @Prop() items?: TooltipChartItem[];\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipChartSide = 'right';\n  @State() private align: TooltipChartAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipChartSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipChartAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n    return (\n      <Host\n        class={{\n          'tooltip-chart': true,\n          'tooltip-chart--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        {this.heading && (\n          <ds-text\n            class=\"tooltip-chart__heading\"\n            as=\"span\"\n            variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n            emphasis\n            color=\"var(--color-foreground-primary)\"\n          >\n            {this.heading}\n          </ds-text>\n        )}\n        <div class=\"tooltip-chart__items\">\n          {(this.items ?? [{ label: this.label, value: this.value }]).map((item, index) => (\n            <div class=\"tooltip-chart__item ds-control-frame ds-control--md\" key={`${item.label}-${index}`}>\n              {item.color && (\n                <span class=\"tooltip-chart__swatch-box ds-control-icon-box\" aria-hidden=\"true\">\n                  <span\n                    class=\"tooltip-chart__swatch\"\n                    style={{ '--ds-tooltip-chart-swatch': item.color }}\n                  />\n                </span>\n              )}\n              <ds-text\n                class=\"tooltip-chart__label ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                color=\"var(--color-foreground-secondary)\"\n              >\n                {item.label}\n              </ds-text>\n              <ds-text\n                class=\"tooltip-chart__value ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                emphasis\n                color=\"var(--color-foreground-primary)\"\n              >\n                {item.value}\n              </ds-text>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveCssTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipChartSide = 'left' | 'right';\nexport type TooltipChartAlign = 'top' | 'bottom';\n\nexport interface TooltipChartItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * polar arc, …). A composition may suppress it when a visible legend already\n * surfaces the same value.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-chart',\n  styleUrl: 'TooltipChart.css',\n  scoped: true,\n})\nexport class TooltipChart {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Optional heading for grouped chart focus. */\n  @Prop() heading?: string;\n  /** Multi-row content. When supplied, this replaces the legacy label/value row. */\n  @Prop() items?: TooltipChartItem[];\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipChartSide = 'right';\n  @State() private align: TooltipChartAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipChartSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipChartAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const rows = this.items ?? [{ label: this.label, value: this.value }];\n    const usesSwatches = rows.some(item => Boolean(item.color));\n\n    return (\n      <Host\n        class={{\n          'tooltip-chart': true,\n          'tooltip-chart--visible': this.visible,\n          'ds-chrome-column': true,\n          'ds-chrome-space--sm': true,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        {this.heading && (\n          <ds-text\n            class=\"tooltip-chart__heading ds-control-section-heading ds-control--md\"\n            as=\"span\"\n            variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n            emphasis\n            color=\"var(--color-foreground-primary)\"\n          >\n            {this.heading}\n          </ds-text>\n        )}\n        <div class=\"tooltip-chart__items\">\n          {rows.map((item, index) => (\n            <div class=\"tooltip-chart__item ds-control-frame ds-control--md\" key={`${item.label}-${index}`}>\n              {usesSwatches && (\n                <span class=\"tooltip-chart__swatch-box ds-control-icon-box\" aria-hidden=\"true\">\n                  {item.color && (\n                    <span\n                      class=\"tooltip-chart__swatch\"\n                      style={{ '--ds-tooltip-chart-swatch': item.color }}\n                    />\n                  )}\n                </span>\n              )}\n              <ds-text\n                class=\"tooltip-chart__label ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                color=\"var(--color-foreground-secondary)\"\n              >\n                {item.label}\n              </ds-text>\n              <ds-text\n                class=\"tooltip-chart__value ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                emphasis\n                color=\"var(--color-foreground-primary)\"\n              >\n                {item.value}\n              </ds-text>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

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

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

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

package/dist/react/components.d.ts

@@ -3,6 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 export { DsAgentActivity } from "./ds-agent-activity.js";
+export { DsAgentQuestionnaire } from "./ds-agent-questionnaire.js";
 export { DsAgentResponse } from "./ds-agent-response.js";
 export { DsAgentSourceList } from "./ds-agent-source-list.js";
 export { DsAgentToolCall } from "./ds-agent-tool-call.js";

package/dist/react/components.js

@@ -4,6 +4,7 @@
  */
 /* eslint-disable */
 export { DsAgentActivity } from "./ds-agent-activity.js";
+export { DsAgentQuestionnaire } from "./ds-agent-questionnaire.js";
 export { DsAgentResponse } from "./ds-agent-response.js";
 export { DsAgentSourceList } from "./ds-agent-source-list.js";
 export { DsAgentToolCall } from "./ds-agent-tool-call.js";

package/dist/react/ds-agent-questionnaire.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 './react-runtime.js';
+import { type AgentQuestionnaireAnswerEventDetail, type AgentQuestionnaireCancelEventDetail, type DsAgentQuestionnaireCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsAgentQuestionnaire as DsAgentQuestionnaireElement } from "@ds-mo/ui/dist/components/ds-agent-questionnaire.js";
+export type DsAgentQuestionnaireEvents = {
+    onDsAnswer: EventName<DsAgentQuestionnaireCustomEvent<AgentQuestionnaireAnswerEventDetail>>;
+    onDsCancel: EventName<DsAgentQuestionnaireCustomEvent<AgentQuestionnaireCancelEventDetail>>;
+};
+export declare const DsAgentQuestionnaire: StencilReactComponent<DsAgentQuestionnaireElement, DsAgentQuestionnaireEvents, Components.DsAgentQuestionnaire, 'requestId' | 'questions'>;

package/dist/react/ds-agent-questionnaire.js

@@ -0,0 +1,15 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsAgentQuestionnaire as DsAgentQuestionnaireElement, defineCustomElement as defineDsAgentQuestionnaire } from "@ds-mo/ui/dist/components/ds-agent-questionnaire.js";
+export const DsAgentQuestionnaire = /*@__PURE__*/ createComponent({
+    tagName: 'ds-agent-questionnaire',
+    elementClass: DsAgentQuestionnaireElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsAnswer: 'dsAnswer',
+        onDsCancel: 'dsCancel'
+    },
+    defineCustomElement: defineDsAgentQuestionnaire
+});

package/dist/react/ds-agent-source-list.d.ts

@@ -2,8 +2,13 @@
  * 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 './react-runtime.js';
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsAgentSourceListCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsAgentSourceList as DsAgentSourceListElement } from "@ds-mo/ui/dist/components/ds-agent-source-list.js";
-export type DsAgentSourceListEvents = NonNullable<unknown>;
+export type DsAgentSourceListEvents = {
+    onDsOpenChange: EventName<DsAgentSourceListCustomEvent<{
+        open: boolean;
+    }>>;
+};
 export declare const DsAgentSourceList: StencilReactComponent<DsAgentSourceListElement, DsAgentSourceListEvents, Components.DsAgentSourceList>;

package/dist/react/ds-agent-source-list.js

@@ -7,6 +7,6 @@ export const DsAgentSourceList = /*@__PURE__*/ createComponent({
     elementClass: DsAgentSourceListElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {},
+    events: { onDsOpenChange: 'dsOpenChange' },
     defineCustomElement: defineDsAgentSourceList
 });

package/dist/react/ds-agent-tool-call.d.ts

@@ -2,8 +2,13 @@
  * 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 './react-runtime.js';
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsAgentToolCallCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsAgentToolCall as DsAgentToolCallElement } from "@ds-mo/ui/dist/components/ds-agent-tool-call.js";
-export type DsAgentToolCallEvents = NonNullable<unknown>;
+export type DsAgentToolCallEvents = {
+    onDsOpenChange: EventName<DsAgentToolCallCustomEvent<{
+        open: boolean;
+    }>>;
+};
 export declare const DsAgentToolCall: StencilReactComponent<DsAgentToolCallElement, DsAgentToolCallEvents, Components.DsAgentToolCall>;

package/dist/react/ds-agent-tool-call.js

@@ -7,6 +7,6 @@ export const DsAgentToolCall = /*@__PURE__*/ createComponent({
     elementClass: DsAgentToolCallElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {},
+    events: { onDsOpenChange: 'dsOpenChange' },
     defineCustomElement: defineDsAgentToolCall
 });

package/dist/styles/prose.css

@@ -16,11 +16,16 @@
   overflow-wrap: anywhere;
 }
 
+:where(.ds-prose)
+  > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  max-inline-size: var(--ds-prose-text-max-inline-size, 100%);
+}
+
 :where(.ds-prose)
   :where(p, ul, ol, dl, blockquote, figure, figcaption, table):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   margin: 0;
   color: inherit;
-  font-family: var(--typography-font-family);
+  font-family: var(--typography-font-family-ui);
   font-size: var(--typography-fontsize-md);
   font-weight: var(--typography-weight-regular);
   line-height: var(--typography-lineheight-md);
@@ -31,7 +36,7 @@
   :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   margin: 0;
   color: var(--color-foreground-primary);
-  font-family: var(--typography-font-family);
+  font-family: var(--typography-font-family-ui);
   font-weight: var(--typography-weight-semibold);
 }
 
@@ -130,8 +135,14 @@
   padding: var(--dimension-space-012) var(--dimension-space-025);
   border-radius: var(--dimension-radius-025);
   background: var(--color-background-secondary);
-  font-family: var(--typography-fontfamily-mono);
+  font-family: var(
+    --typography-font-family-code,
+    'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',
+    Menlo, Monaco, Consolas, 'Liberation Mono', monospace
+  );
   font-size: var(--typography-fontsize-sm);
+  font-variant-ligatures: var(--ds-code-font-variant-ligatures, normal);
+  font-weight: var(--typography-weight-regular);
   line-height: var(--typography-lineheight-sm);
   letter-spacing: var(--typography-letterspacing-none);
 }
@@ -147,8 +158,14 @@
   border-radius: var(--dimension-radius-050);
   background: var(--color-background-strong-neutral);
   color: var(--color-foreground-faint-neutral);
-  font-family: var(--typography-fontfamily-mono);
+  font-family: var(
+    --typography-font-family-code,
+    'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',
+    Menlo, Monaco, Consolas, 'Liberation Mono', monospace
+  );
   font-size: var(--typography-fontsize-sm);
+  font-variant-ligatures: var(--ds-code-font-variant-ligatures, normal);
+  font-weight: var(--typography-weight-regular);
   line-height: var(--typography-lineheight-sm);
   letter-spacing: var(--typography-letterspacing-none);
   tab-size: 2;

package/dist/styles/table.css

@@ -15,6 +15,7 @@
     var(--dimension-space-075) - var(--dimension-space-025)
   );
   --_table-cell-track-label-inset: var(--dimension-space-025);
+  --_table-caption-bar-block-size: var(--dimension-size-600);
   --_table-image-block-size: calc(
     var(--dimension-size-800) - var(--dimension-space-200)
   );
@@ -69,6 +70,25 @@
   user-select: none;
 }
 
+:where(.ds-table--bounded) {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-block-size: 0;
+  block-size: 100%;
+}
+
+:where(.ds-table--viewport-fit) {
+  block-size: var(--_table-viewport-fit-current-block-size, 100%);
+  min-block-size: var(--_table-viewport-fit-current-block-size, 100%);
+}
+
+:where(.ds-table--bounded .ds-table__frame),
+:where(.ds-table--bounded .ds-table__viewport) {
+  min-block-size: 0;
+  block-size: 100%;
+  max-block-size: none;
+}
+
 :where(.ds-table__frame) {
   position: relative;
   timeline-scope: --ds-table-inline-scroll;
@@ -81,6 +101,15 @@
   background: var(--_table-surface);
 }
 
+/*
+ * Contained tables own a hard visual viewport. Clip table-owned overlays and
+ * elastic-scroll paint to that frame without introducing another scrollport;
+ * the nested viewport remains the only element that scrolls.
+ */
+:where(.ds-table--contained-scroll .ds-table__frame) {
+  overflow: clip;
+}
+
 :where(.ds-table__viewport) {
   box-sizing: border-box;
   max-block-size: var(--ds-table-max-block-size, none);
@@ -104,6 +133,14 @@
   outline-offset: calc(-1 * var(--dimension-stroke-width-025));
 }
 
+:where(.ds-table--viewport-fit-pending .ds-table__viewport) {
+  overflow-y: hidden;
+}
+
+:where(.ds-table--viewport-fit-settled .ds-table__viewport) {
+  overscroll-behavior-y: none;
+}
+
 :where(.ds-table__table) {
   box-sizing: border-box;
   inline-size: 100%;
@@ -132,24 +169,87 @@
   display: flex;
   align-items: center;
   inline-size: 100%;
-  min-block-size: var(--dimension-size-600);
-  block-size: var(--dimension-size-600);
-  padding-inline: var(--_table-cell-padding-inline);
+  min-block-size: var(--_table-caption-bar-block-size);
+  block-size: var(--_table-caption-bar-block-size);
+  padding: var(--dimension-space-100);
+  gap: var(--dimension-space-100);
   background: var(--_table-surface);
   text-align: start;
 }
 
 :where(.ds-table__caption-bar) {
-  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border);
+  border-start-start-radius: var(--_table-radius);
+  border-start-end-radius: var(--_table-radius);
+  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-column-border);
   color: var(--color-foreground-primary);
 }
 
+:where(.ds-table--caption-visible .ds-table__frame),
+:where(.ds-table--caption-visible .ds-table__viewport) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+:where(.ds-table__bar-leading),
+:where(.ds-table__bar-trailing) {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  min-inline-size: 0;
+  gap: var(--dimension-space-100);
+}
+
+:where(.ds-table__bar-trailing) {
+  margin-inline-start: auto;
+}
+
+:where(.ds-table__bar-leading[hidden], .ds-table__bar-trailing[hidden]) {
+  display: none;
+}
+
+:where(.ds-table__bar-copy) {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: var(--ds-control-padding-inline, var(--dimension-space-075));
+}
+
+:where(.ds-table__bar-copy > slot) {
+  display: contents;
+}
+
+:where(.ds-table__bar-copy > slot)::slotted(*) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.ds-table__bar-text) {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  block-size: var(--ds-control-height, var(--dimension-size-400));
+  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));
+}
+
 /* Optional controlled result summary. */
 :where(.ds-table__footer) {
-  border-block-start: var(--dimension-stroke-width-012) solid var(--_table-border);
+  border-end-start-radius: var(--_table-radius);
+  border-end-end-radius: var(--_table-radius);
+  border-block-start: var(--dimension-stroke-width-012) solid var(--_table-column-border);
   color: var(--color-foreground-secondary);
 }
 
+:where(.ds-table--footer-visible .ds-table__frame),
+:where(.ds-table--footer-visible .ds-table__viewport) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 :where(.ds-table__selection-column) {
   inline-size: var(--_table-selection-column-inline-size);
   width: var(--_table-selection-column-inline-size);
@@ -170,13 +270,13 @@
 :where(.ds-table--contained-sticky-header .ds-table__head) {
   position: sticky;
   inset-block-start: 0;
-  z-index: 2;
+  z-index: 6;
 }
 
 :where(.ds-table__document-sticky-header) {
   position: sticky;
   inset-block-start: var(--ds-table-sticky-header-offset, 0);
-  z-index: 3;
+  z-index: 6;
   block-size: var(--_table-header-min-block-size);
   margin-block-end: calc(-1 * var(--_table-header-min-block-size));
   max-inline-size: 100%;
@@ -185,6 +285,38 @@
   background: var(--_table-header-surface);
 }
 
+:where(.ds-table--document-sticky-header.ds-table--caption-visible > .ds-table__caption-bar) {
+  position: sticky;
+  inset-block-start: var(--ds-table-sticky-header-offset, 0);
+  z-index: 3;
+}
+
+:where(.ds-table--document-sticky-header.ds-table--caption-visible .ds-table__document-sticky-header) {
+  inset-block-start: calc(
+    var(--ds-table-sticky-header-offset, 0px) + var(--_table-caption-bar-block-size)
+  );
+}
+
+:where(.ds-table__sticky-group) {
+  position: absolute;
+  inset-block-start: var(--_table-sticky-group-top, 0);
+  inset-inline-start: 0;
+  z-index: 5;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--_table-row-min-block-size);
+  overflow: hidden;
+  will-change: inset-block-start;
+}
+
+:where(.ds-table__sticky-group .ds-table__group-content) {
+  position: relative;
+}
+
+:where(.ds-table__group-cell--sticky-source-hidden) {
+  visibility: hidden;
+}
+
 :where(.ds-table__sticky-header-table) {
   block-size: var(--_table-header-min-block-size);
   transform: translate3d(calc(-1 * var(--ds-table-inline-scroll-offset, 0px)), 0, 0);
@@ -929,7 +1061,8 @@
   display: none;
 }
 
-:where(.ds-table__table--selectable .ds-table__group-content) {
+:where(.ds-table__table--selectable .ds-table__group-content),
+:where(.ds-table__sticky-group--selectable .ds-table__group-content) {
   /* Selection lane is the real 40px column — don't add start pad or flex gap. */
   gap: 0;
   padding-inline-start: 0;
@@ -965,7 +1098,8 @@
   padding-inline: var(--dimension-space-050);
 }
 
-:where(.ds-table__table--selectable .ds-table__group-copy) {
+:where(.ds-table__table--selectable .ds-table__group-copy),
+:where(.ds-table__sticky-group--selectable .ds-table__group-copy) {
   padding-inline-start: calc(
     var(--dimension-space-100) + var(--_table-cell-track-label-inset)
   );
@@ -985,11 +1119,24 @@
 
 :where(.ds-table__load-cell),
 :where(.ds-table__state-cell) {
-  padding: var(--dimension-space-200) var(--_table-cell-padding-inline);
+  padding: 0;
   background: var(--_table-surface);
   text-align: center;
 }
 
+:where(.ds-table__viewport-band) {
+  position: sticky;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--ds-table-visible-inline-size, 100%);
+  max-inline-size: var(--ds-table-visible-inline-size, 100%);
+  padding: var(--dimension-space-200) var(--_table-cell-padding-inline);
+  background: var(--_table-surface);
+}
+
 :where(.ds-table__load-content) {
   /* Match md ButtonUnfilled height so text-only / loading / button states share one box. */
   box-sizing: border-box;
@@ -1019,6 +1166,10 @@
   block-size: calc(var(--dimension-size-800) * 2);
 }
 
+:where(.ds-table__state-band) {
+  min-block-size: calc(var(--dimension-size-800) * 2);
+}
+
 :where(.ds-table__skeleton-row) {
   pointer-events: none;
 }

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { AgentQuestion, AgentQuestionAnswer, AgentQuestionnaireAnswerEventDetail, AgentQuestionnaireCancelEventDetail, AgentQuestionnaireLabels, AgentQuestionnaireStatus } from '../conversation-types';
+export declare class AgentQuestionnaire {
+    el: HTMLElement;
+    requestId: string;
+    questions: AgentQuestion[];
+    answers: AgentQuestionAnswer[];
+    status: AgentQuestionnaireStatus;
+    errorMessage?: string;
+    allowCancel: boolean;
+    labels?: Partial<AgentQuestionnaireLabels>;
+    dsAnswer: EventEmitter<AgentQuestionnaireAnswerEventDetail>;
+    dsCancel: EventEmitter<AgentQuestionnaireCancelEventDetail>;
+    private currentStep;
+    private drafts;
+    private validation;
+    private readonly instanceId;
+    private readonly otherValue;
+    private answerPending;
+    private resetScheduled;
+    private draftRequestId?;
+    private answersSnapshot;
+    private waitingForRequestAnswers;
+    componentWillLoad(): void;
+    handleQuestionnaireInputChange(): void;
+    handleStatusChange(status: AgentQuestionnaireStatus): void;
+    setFocus(): Promise<void>;
+    private get copy();
+    private get disabled();
+    private resetDraft;
+    private scheduleDraftReset;
+    private focusCurrentControl;
+    private updateDraft;
+    private validate;
+    private move;
+    private next;
+    private skip;
+    private submit;
+    private validateWithoutFocus;
+    private progressLabel;
+    private selectSingle;
+    private renderSingleChoice;
+    private renderMultipleChoice;
+    private renderOtherInput;
+    private renderQuestion;
+    private renderAnswered;
+    render(): any;
+}
+//# sourceMappingURL=AgentQuestionnaire.d.ts.map

package/dist/types/components/AgentQuestionnaire/agent-questionnaire-model.d.ts

@@ -0,0 +1,13 @@
+import type { AgentQuestion, AgentQuestionAnswer } from '../conversation-types';
+export interface AgentQuestionDraft {
+    value: string | string[];
+    otherSelected: boolean;
+    otherText: string;
+    skipped: boolean;
+}
+export type AgentQuestionDrafts = Record<string, AgentQuestionDraft>;
+export declare function createQuestionnaireDrafts(questions: AgentQuestion[], answers: AgentQuestionAnswer[]): AgentQuestionDrafts;
+export declare function normalizeQuestionAnswer(question: AgentQuestion, draft: AgentQuestionDraft): AgentQuestionAnswer;
+export declare function validateQuestionDraft(question: AgentQuestion, draft: AgentQuestionDraft): string | undefined;
+export declare function formatQuestionAnswer(question: AgentQuestion, answer: AgentQuestionAnswer | undefined): string;
+//# sourceMappingURL=agent-questionnaire-model.d.ts.map