@ds-mo/ui 15.4.0 → 15.5.0

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

@@ -118,7 +118,7 @@
           "attribute": "locale",
           "required": false,
           "mutable": false,
-          "description": "Locale used by axes and default tooltip formatters."
+          "description": "Locale used by axes and default tooltip formatters. Defaults to English (en-US)."
         },
         "width": {
           "type": "number",
@@ -188,7 +188,7 @@
         "attribute": "locale",
         "required": false,
         "mutable": false,
-        "description": "Locale used by axes and default tooltip formatters."
+        "description": "Locale used by axes and default tooltip formatters. Defaults to English (en-US)."
       },
       "width": {
         "type": "number",
@@ -261,7 +261,7 @@
     },
     {
       "path": "src/wc/components/Chart/Chart.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport type {\n  ChartDefinition,\n  ChartPoint,\n  ChartTooltipItem,\n  ChartTooltipOptions,\n} from '../../utils/chart-grammar';\nimport {\n  compileChartScene,\n  findChartFocus,\n  type ChartScene,\n  type ChartSceneNode,\n} from '../../utils/chart-scene';\nimport { resolveChartTheme } from '../../utils/chart-theme';\n\nconst DEFAULT_WIDTH = 480;\nconst DEFAULT_HEIGHT = 320;\n\nexport type ChartFocusSource = 'pointer' | 'keyboard';\n\nexport interface ChartFocusChangeDetail {\n  primary: ChartPoint | null;\n  points: readonly ChartPoint[];\n  source: ChartFocusSource;\n}\n\ninterface FocusState {\n  primary: ChartPoint;\n  points: ChartPoint[];\n  source: ChartFocusSource;\n}\n\ninterface PointerAnchor {\n  x: number;\n  y: number;\n}\n\n@Component({\n  tag: 'ds-chart',\n  styleUrl: 'Chart.css',\n  scoped: true,\n})\nexport class Chart {\n  @Element() el!: HTMLElement;\n\n  /** Typed chart definition. Set as a JavaScript property, not an HTML attribute. */\n  @Prop() definition!: ChartDefinition;\n  /** Required accessible name for the visualization. */\n  @Prop() label!: string;\n  /** Optional longer accessible description. */\n  @Prop() description?: string;\n  /** Locale used by axes and default tooltip formatters. */\n  @Prop() locale?: string;\n  /** Fixed surface width. Otherwise the chart observes its container. */\n  @Prop() width?: number;\n  /** Product-owned surface height. Wins over aspectRatio. */\n  @Prop() height?: number;\n  /** Derives height from the current width when height is not supplied. */\n  @Prop() aspectRatio?: number;\n\n  /** Fires whenever pointer or keyboard focus resolves to semantic chart points. */\n  @Event() dsChartFocusChange!: EventEmitter<ChartFocusChangeDetail>;\n\n  @State() private surfaceWidth = DEFAULT_WIDTH;\n  @State() private containerHeight?: number;\n  @State() private scene?: ChartScene;\n  @State() private focusState?: FocusState;\n  @State() private pointerAnchor?: PointerAnchor;\n\n  private resizeObserver?: ResizeObserver;\n  private resizeFrame?: number;\n  private compileFrame?: number;\n  private warnedConflictingHeight = false;\n  private measuredLabels = new Map<string, { width: number; height: number }>();\n  private descriptionId = `ds-chart-description-${Math.random().toString(36).slice(2)}`;\n  private clipId = `ds-chart-clip-${Math.random().toString(36).slice(2)}`;\n\n  componentWillLoad() {\n    if (this.width && this.width > 0) this.surfaceWidth = this.width;\n    this.compile();\n  }\n\n  componentDidLoad() {\n    this.connectResizeObserver();\n    this.waitForFonts();\n  }\n\n  componentDidRender() {\n    this.measureRenderedLabels();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame);\n    if (this.compileFrame) cancelAnimationFrame(this.compileFrame);\n  }\n\n  @Watch('definition')\n  @Watch('locale')\n  @Watch('height')\n  @Watch('aspectRatio')\n  onDefinitionInputChange() {\n    this.scheduleCompile();\n  }\n\n  @Watch('width')\n  onWidthChange() {\n    if (this.width && this.width > 0) this.surfaceWidth = this.width;\n    else this.measureHost();\n    this.scheduleCompile();\n  }\n\n  private get surfaceHeight(): number {\n    if (this.height && this.height > 0) {\n      if (this.aspectRatio && !this.warnedConflictingHeight) {\n        this.warnedConflictingHeight = true;\n        console.warn('[ds-chart] height wins when both height and aspectRatio are supplied.');\n      }\n      return this.height;\n    }\n    if (this.aspectRatio && this.aspectRatio > 0) {\n      return Math.max(1, this.surfaceWidth / this.aspectRatio);\n    }\n    return this.containerHeight ?? DEFAULT_HEIGHT;\n  }\n\n  private connectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    if (typeof ResizeObserver === 'undefined') return;\n    this.resizeObserver = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) return;\n      if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame);\n      this.resizeFrame = requestAnimationFrame(() => {\n        this.resizeFrame = undefined;\n        this.applyMeasuredSize(entry.contentRect.width, entry.contentRect.height);\n      });\n    });\n    this.resizeObserver.observe(this.el);\n    this.measureHost();\n  }\n\n  private measureHost() {\n    const bounds = this.el.getBoundingClientRect();\n    this.applyMeasuredSize(bounds.width, bounds.height);\n  }\n\n  private applyMeasuredSize(width: number, height: number) {\n    let changed = false;\n    if (!this.width && width > 0) {\n      const nextWidth = Math.round(width * 100) / 100;\n      if (nextWidth !== this.surfaceWidth) {\n        this.surfaceWidth = nextWidth;\n        changed = true;\n      }\n    }\n    if (!this.height && !this.aspectRatio && height > 0) {\n      const nextHeight = Math.round(height * 100) / 100;\n      if (nextHeight !== this.containerHeight) {\n        this.containerHeight = nextHeight;\n        changed = true;\n      }\n    }\n    if (changed) {\n      this.scheduleCompile();\n    }\n  }\n\n  private scheduleCompile() {\n    if (this.compileFrame) cancelAnimationFrame(this.compileFrame);\n    this.compileFrame = requestAnimationFrame(() => {\n      this.compileFrame = undefined;\n      this.compile();\n    });\n  }\n\n  private compile() {\n    if (!this.definition || !(this.surfaceWidth > 0) || !(this.surfaceHeight > 0)) return;\n    const previousKey = this.focusState?.primary.sceneKey;\n    const scene = compileChartScene(\n      this.definition,\n      this.surfaceWidth,\n      this.surfaceHeight,\n      this.locale ?? document.documentElement.lang ?? 'en',\n      text => this.measuredLabels.get(text) ?? { width: text.length * 7, height: 14 },\n      resolveChartTheme(this.el)\n    );\n    this.scene = scene;\n    if (previousKey) {\n      const restored = scene.points.find(point => point.sceneKey === previousKey);\n      if (restored && this.focusState) {\n        const grouped = findChartFocus(\n          scene.points,\n          scene.focus,\n          restored.x,\n          restored.y,\n          scene.maxFocusDistance,\n          scene.arcHitRegions\n        );\n        this.focusState = grouped ? { ...grouped, source: this.focusState.source } : undefined;\n      } else {\n        this.focusState = undefined;\n      }\n    }\n  }\n\n  private waitForFonts() {\n    if (!document.fonts) return;\n    void document.fonts.ready.then(() => {\n      this.measuredLabels.clear();\n      this.scheduleCompile();\n    });\n  }\n\n  private measureRenderedLabels() {\n    const labels = this.el.querySelectorAll<SVGTextElement>('[data-chart-measure]');\n    let changed = false;\n    labels.forEach(label => {\n      const text = label.textContent ?? '';\n      let box: DOMRect;\n      try {\n        box = label.getBBox();\n      } catch {\n        return;\n      }\n      const previous = this.measuredLabels.get(text);\n      if (\n        !previous ||\n        Math.abs(previous.width - box.width) > 0.5 ||\n        Math.abs(previous.height - box.height) > 0.5\n      ) {\n        this.measuredLabels.set(text, { width: box.width, height: box.height });\n        changed = true;\n      }\n    });\n    if (changed) this.scheduleCompile();\n  }\n\n  private resolveFocus(x: number, y: number, source: ChartFocusSource) {\n    if (!this.scene) return;\n    const result = findChartFocus(\n      this.scene.points,\n      this.scene.focus,\n      x,\n      y,\n      this.scene.maxFocusDistance,\n      this.scene.arcHitRegions\n    );\n    if (!result) {\n      this.clearFocus(source);\n      return;\n    }\n    if (\n      this.focusState?.primary.sceneKey === result.primary.sceneKey &&\n      this.focusState.source === source\n    )\n      return;\n    this.focusState = { ...result, source };\n    this.dsChartFocusChange.emit({ ...result, source });\n  }\n\n  private clearFocus(source: ChartFocusSource) {\n    if (!this.focusState) return;\n    this.focusState = undefined;\n    this.dsChartFocusChange.emit({ primary: null, points: [], source });\n  }\n\n  private onPointerMove = (event: PointerEvent) => {\n    const svg = event.currentTarget as SVGSVGElement;\n    const rect = svg.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    this.pointerAnchor = this.scene?.arcHitRegions.length ? { x, y } : undefined;\n    this.resolveFocus(x, y, 'pointer');\n  };\n\n  private onPointerLeave = () => {\n    this.pointerAnchor = undefined;\n    this.clearFocus('pointer');\n  };\n\n  private keyboardPoints(): ChartPoint[] {\n    if (!this.scene) return [];\n    return [...this.scene.points].sort((a, b) => a.x - b.x || a.y - b.y);\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    const points = this.keyboardPoints();\n    if (points.length === 0) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.clearFocus('keyboard');\n      return;\n    }\n    const current = this.focusState\n      ? points.findIndex(point => point.sceneKey === this.focusState?.primary.sceneKey)\n      : -1;\n    let next: number | undefined;\n    if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = points.length - 1;\n    else if (event.key === 'ArrowRight' || event.key === 'ArrowDown')\n      next = Math.min(points.length - 1, current + 1);\n    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')\n      next = Math.max(0, current < 0 ? 0 : current - 1);\n    else return;\n    event.preventDefault();\n    const point = points[next ?? 0] ?? points[0];\n    this.resolveFocus(point.x, point.y, 'keyboard');\n  };\n\n  private renderNode(node: ChartSceneNode, className = 'chart__mark') {\n    const resolvedClassName = node.className ?? className;\n    const presentation = {\n      fill: node.style.fill,\n      stroke: node.style.stroke,\n      opacity: node.style.opacity,\n      'fill-opacity': node.style.fillOpacity,\n      'stroke-opacity': node.style.strokeOpacity,\n      'stroke-width': node.style.strokeWidth,\n      'stroke-dasharray': node.style.strokeDasharray || undefined,\n    };\n    if (node.type === 'path')\n      return (\n        <path\n          key={node.key}\n          class={resolvedClassName}\n          d={node.d}\n          transform={node.transform}\n          {...presentation}\n        />\n      );\n    if (node.type === 'rect') {\n      return (\n        <rect\n          key={node.key}\n          class={resolvedClassName}\n          x={node.x}\n          y={node.y}\n          width={node.width}\n          height={node.height}\n          rx={node.style.radius}\n          {...presentation}\n        />\n      );\n    }\n    if (node.type === 'circle')\n      return (\n        <circle\n          key={node.key}\n          class={resolvedClassName}\n          cx={node.x}\n          cy={node.y}\n          r={node.radius}\n          {...presentation}\n        />\n      );\n    if (node.type === 'line')\n      return (\n        <line\n          key={node.key}\n          class={resolvedClassName}\n          x1={node.x1}\n          x2={node.x2}\n          y1={node.y1}\n          y2={node.y2}\n          {...presentation}\n        />\n      );\n    return (\n      <text\n        key={node.key}\n        class={node.className ?? `${className} chart__text-mark`}\n        data-chart-measure={node.measure ? '' : undefined}\n        x={node.x}\n        y={node.y}\n        dx={node.dx}\n        dy={node.dy}\n        text-anchor={node.style.textAnchor}\n        font-family={node.style.fontFamily}\n        font-size={node.style.fontSize}\n        font-weight={node.style.fontWeight}\n        dominant-baseline={node.dominantBaseline ?? 'middle'}\n        transform={node.rotate ? `rotate(${node.rotate} ${node.x} ${node.y})` : undefined}\n        {...presentation}\n      >\n        {node.text}\n      </text>\n    );\n  }\n\n  private renderMarkLayers(scene: ChartScene) {\n    const layers: Array<{ clipped: boolean; nodes: ChartSceneNode[] }> = [];\n    scene.nodes.forEach(node => {\n      const clipped = scene.clip && node.clipToPlot !== false;\n      const current = layers[layers.length - 1];\n      if (current?.clipped === clipped) current.nodes.push(node);\n      else layers.push({ clipped, nodes: [node] });\n    });\n    return layers.map((layer, index) => (\n      <g\n        key={`marks-${index}`}\n        class=\"chart__marks\"\n        aria-hidden=\"true\"\n        clip-path={layer.clipped ? `url(#${this.clipId})` : undefined}\n      >\n        {layer.nodes.map(node => this.renderNode(node))}\n      </g>\n    ));\n  }\n\n  private focusedDotPoints(scene: ChartScene): ChartPoint[] {\n    if (!this.focusState) return [];\n    const focusDotPointKeys = new Set(scene.focusDotPointKeys);\n    return this.focusState.points.filter(point => focusDotPointKeys.has(point.sceneKey));\n  }\n\n  private tooltipContent(): { heading?: string; items: ChartTooltipItem[] } | undefined {\n    if (!this.scene || !this.focusState || this.scene.tooltip === false) return undefined;\n    const options: ChartTooltipOptions =\n      typeof this.scene.tooltip === 'object' ? this.scene.tooltip : {};\n    const locale = this.locale ?? document.documentElement.lang ?? 'en';\n    const points = this.focusState.points;\n    const formatValue = (point: ChartPoint) => {\n      const value = point.value ?? point.yValue;\n      return (\n        options.format?.(point, locale) ??\n        (typeof value === 'number'\n          ? new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(value)\n          : String(value))\n      );\n    };\n    return {\n      heading:\n        points.length > 1\n          ? (options.formatGroupHeading?.(points, locale) ?? String(this.focusState.primary.xValue))\n          : undefined,\n      items: points.map(\n        point =>\n          options.formatGroupItem?.(point, locale) ?? {\n            label: point.groupLabel ?? point.markId,\n            value: formatValue(point),\n            color: point.color,\n          }\n      ),\n    };\n  }\n\n  private statusText(): string {\n    const content = this.tooltipContent();\n    if (!content) return '';\n    return [content.heading, ...content.items.map(item => `${item.label}: ${item.value}`)]\n      .filter(Boolean)\n      .join('. ');\n  }\n\n  render() {\n    const scene = this.scene;\n    const tooltip = this.tooltipContent();\n    const focus = this.focusState?.primary;\n    const tooltipAnchor =\n      focus &&\n      this.focusState?.source === 'pointer' &&\n      scene?.arcHitRegions.length &&\n      this.pointerAnchor\n        ? this.pointerAnchor\n        : focus;\n    const focusedDotPoints = scene ? this.focusedDotPoints(scene) : [];\n    const groupedPointFocus =\n      scene?.coordinate === 'cartesian' && scene.focus === 'group-x' && focusedDotPoints.length > 1;\n    const center =\n      focus && scene?.center?.focused\n        ? scene.center.focused(focus, this.locale ?? document.documentElement.lang ?? 'en')\n        : scene?.center;\n    return (\n      <Host\n        class=\"chart\"\n        style={{\n          '--ds-chart-width': this.width ? `${this.width}px` : '100%',\n          '--ds-chart-height':\n            this.height || this.aspectRatio\n              ? `${this.surfaceHeight}px`\n              : 'var(--ds-chart-container-height, 320px)',\n        }}\n      >\n        {this.description && (\n          <span id={this.descriptionId} class=\"chart__description\">\n            {this.description}\n          </span>\n        )}\n        {scene && (\n          /* eslint-disable-next-line compomo/prefer-ds-icon -- SVG is the chart renderer. */\n          <svg\n            class=\"chart__surface\"\n            width={scene.width}\n            height={scene.height}\n            viewBox={`0 0 ${scene.width} ${scene.height}`}\n            role=\"img\"\n            aria-label={this.label || 'Chart'}\n            aria-describedby={this.description ? this.descriptionId : undefined}\n            tabindex={0}\n            onPointerMove={this.onPointerMove}\n            onPointerLeave={this.onPointerLeave}\n            onKeyDown={this.onKeyDown}\n          >\n            <defs aria-hidden=\"true\">\n              <clipPath id={this.clipId}>\n                <rect\n                  x={scene.plot.left}\n                  y={scene.plot.top}\n                  width={scene.plot.width}\n                  height={scene.plot.height}\n                />\n              </clipPath>\n            </defs>\n            <rect\n              class=\"chart__interaction-surface\"\n              x=\"0\"\n              y=\"0\"\n              width={scene.width}\n              height={scene.height}\n              aria-hidden=\"true\"\n            />\n            <g class=\"chart__guides\" aria-hidden=\"true\">\n              {scene.guides.map(node => this.renderNode(node, 'chart__grid chart__polar-guide'))}\n              {scene.yAxis.line && (\n                <line\n                  class=\"chart__axis-line\"\n                  x1={scene.plot.left}\n                  x2={scene.plot.left}\n                  y1={scene.plot.top}\n                  y2={scene.plot.bottom}\n                />\n              )}\n              {scene.yAxis.ticks.map(tick => (\n                <g key={`y-${tick.key}`}>\n                  {scene.yAxis.grid && (\n                    <line\n                      class=\"chart__grid\"\n                      x1={scene.plot.left}\n                      x2={scene.plot.right}\n                      y1={tick.position}\n                      y2={tick.position}\n                    />\n                  )}\n                  <line\n                    class=\"chart__axis-line chart__tick-stub\"\n                    x1={scene.plot.left - scene.yAxis.tickSize}\n                    x2={scene.plot.left}\n                    y1={tick.position}\n                    y2={tick.position}\n                  />\n                  {tick.labelVisible && (\n                    <text\n                      data-chart-measure\n                      class=\"chart__tick chart__tick--y\"\n                      x={scene.plot.left - scene.yAxis.tickSize - scene.yAxis.tickPadding}\n                      y={tick.position}\n                      text-anchor=\"end\"\n                      dominant-baseline=\"middle\"\n                    >\n                      {tick.label}\n                    </text>\n                  )}\n                </g>\n              ))}\n              {scene.xAxis.line && (\n                <line\n                  class=\"chart__axis-line\"\n                  x1={scene.plot.left}\n                  x2={scene.plot.right}\n                  y1={scene.plot.bottom}\n                  y2={scene.plot.bottom}\n                />\n              )}\n              {scene.xAxis.ticks.map(tick => (\n                <g key={`x-${tick.key}`}>\n                  {scene.xAxis.grid && (\n                    <line\n                      class=\"chart__grid\"\n                      x1={tick.position}\n                      x2={tick.position}\n                      y1={scene.plot.top}\n                      y2={scene.plot.bottom}\n                    />\n                  )}\n                  <line\n                    class=\"chart__axis-line chart__tick-stub\"\n                    x1={tick.position}\n                    x2={tick.position}\n                    y1={scene.plot.bottom}\n                    y2={scene.plot.bottom + scene.xAxis.tickSize}\n                  />\n                  {tick.labelVisible && (\n                    <text\n                      data-chart-measure\n                      class=\"chart__tick chart__tick--x\"\n                      x={tick.position}\n                      y={scene.plot.bottom + scene.xAxis.tickSize + scene.xAxis.tickPadding}\n                      text-anchor=\"middle\"\n                      dominant-baseline=\"hanging\"\n                      transform={\n                        scene.xAxis.rotate\n                          ? `rotate(${scene.xAxis.rotate} ${tick.position} ${scene.plot.bottom + scene.xAxis.tickSize + scene.xAxis.tickPadding})`\n                          : undefined\n                      }\n                    >\n                      {tick.label}\n                    </text>\n                  )}\n                </g>\n              ))}\n              {scene.xAxis.label && (\n                <text\n                  class=\"chart__axis-title\"\n                  x={(scene.plot.left + scene.plot.right) / 2}\n                  y={scene.height - 4}\n                  text-anchor=\"middle\"\n                >\n                  {scene.xAxis.label}\n                </text>\n              )}\n              {scene.yAxis.label && (\n                <text\n                  class=\"chart__axis-title\"\n                  x=\"8\"\n                  y={(scene.plot.top + scene.plot.bottom) / 2}\n                  text-anchor=\"middle\"\n                  dominant-baseline=\"middle\"\n                  transform={`rotate(-90 8 ${(scene.plot.top + scene.plot.bottom) / 2})`}\n                >\n                  {scene.yAxis.label}\n                </text>\n              )}\n              {scene.coordinate === 'cartesian' && (\n                <g class=\"chart__plot-frame\">\n                  <line\n                    class=\"chart__plot-boundary chart__plot-boundary--top\"\n                    x1={scene.plot.left}\n                    x2={scene.plot.right}\n                    y1={scene.plot.top}\n                    y2={scene.plot.top}\n                  />\n                  <line\n                    class=\"chart__plot-boundary chart__plot-boundary--right\"\n                    x1={scene.plot.right}\n                    x2={scene.plot.right}\n                    y1={scene.plot.top}\n                    y2={scene.plot.bottom}\n                  />\n                </g>\n              )}\n            </g>\n            {this.renderMarkLayers(scene)}\n            {groupedPointFocus && focus && (\n              <line\n                class=\"chart__focus-guide\"\n                x1={focus.x}\n                x2={focus.x}\n                y1={scene.plot.top}\n                y2={scene.plot.bottom}\n                aria-hidden=\"true\"\n              />\n            )}\n            {focusedDotPoints.map(point => (\n              <circle\n                key={`focus-${point.sceneKey}`}\n                class=\"chart__focus-point\"\n                cx={point.x}\n                cy={point.y}\n                r={scene.focusDotCircleRadius}\n                fill={point.color}\n                stroke=\"var(--color-background-primary)\"\n                stroke-width={scene.focusDotHaloWidth}\n                aria-hidden=\"true\"\n              />\n            ))}\n            {focus && focusedDotPoints.length === 0 && (\n              <circle class=\"chart__focus\" cx={focus.x} cy={focus.y} r=\"6\" aria-hidden=\"true\" />\n            )}\n            {center?.value && (\n              <text\n                class=\"chart__center-value\"\n                x={(scene.plot.left + scene.plot.right) / 2}\n                y={(scene.plot.top + scene.plot.bottom) / 2 - (center.caption ? 10 : 0)}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                aria-hidden=\"true\"\n              >\n                {center.value}\n              </text>\n            )}\n            {center?.caption && (\n              <text\n                class=\"chart__center-caption\"\n                x={(scene.plot.left + scene.plot.right) / 2}\n                y={(scene.plot.top + scene.plot.bottom) / 2 + 14}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                aria-hidden=\"true\"\n              >\n                {center.caption}\n              </text>\n            )}\n          </svg>\n        )}\n        {tooltip && tooltipAnchor && (\n          <ds-tooltip-chart\n            heading={tooltip.heading}\n            items={tooltip.items}\n            x={tooltipAnchor.x}\n            y={tooltipAnchor.y}\n          />\n        )}\n        <span class=\"chart__status\" aria-live=\"polite\" aria-atomic=\"true\">\n          {this.statusText()}\n        </span>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { dateFormatter, numberFormatter, resolveFormatLocale } from '../../utils/intl-formatters';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport type {\n  ChartDefinition,\n  ChartPoint,\n  ChartTooltipItem,\n  ChartTooltipOptions,\n} from '../../utils/chart-grammar';\nimport {\n  compileChartScene,\n  findChartFocus,\n  type ChartScene,\n  type ChartSceneNode,\n} from '../../utils/chart-scene';\nimport { resolveChartTheme } from '../../utils/chart-theme';\n\nconst DEFAULT_WIDTH = 480;\nconst DEFAULT_HEIGHT = 320;\n\nexport type ChartFocusSource = 'pointer' | 'keyboard';\n\nexport interface ChartFocusChangeDetail {\n  primary: ChartPoint | null;\n  points: readonly ChartPoint[];\n  source: ChartFocusSource;\n}\n\ninterface FocusState {\n  primary: ChartPoint;\n  points: ChartPoint[];\n  source: ChartFocusSource;\n}\n\ninterface PointerAnchor {\n  x: number;\n  y: number;\n}\n\n@Component({\n  tag: 'ds-chart',\n  styleUrl: 'Chart.css',\n  scoped: true,\n})\nexport class Chart {\n  @Element() el!: HTMLElement;\n\n  /** Typed chart definition. Set as a JavaScript property, not an HTML attribute. */\n  @Prop() definition!: ChartDefinition;\n  /** Required accessible name for the visualization. */\n  @Prop() label!: string;\n  /** Optional longer accessible description. */\n  @Prop() description?: string;\n  /** Locale used by axes and default tooltip formatters. Defaults to English (en-US). */\n  @Prop() locale?: string;\n  /** Fixed surface width. Otherwise the chart observes its container. */\n  @Prop() width?: number;\n  /** Product-owned surface height. Wins over aspectRatio. */\n  @Prop() height?: number;\n  /** Derives height from the current width when height is not supplied. */\n  @Prop() aspectRatio?: number;\n\n  /** Fires whenever pointer or keyboard focus resolves to semantic chart points. */\n  @Event() dsChartFocusChange!: EventEmitter<ChartFocusChangeDetail>;\n\n  @State() private surfaceWidth = DEFAULT_WIDTH;\n  @State() private containerHeight?: number;\n  @State() private scene?: ChartScene;\n  @State() private focusState?: FocusState;\n  @State() private pointerAnchor?: PointerAnchor;\n\n  private resizeObserver?: ResizeObserver;\n  private resizeFrame?: number;\n  private compileFrame?: number;\n  private hasLoaded = false;\n  private connectionGeneration = 0;\n  private warnedConflictingHeight = false;\n  private measuredScene?: ChartScene;\n  private measuredFont = '';\n  private measuredLabels = new Map<string, { width: number; height: number }>();\n  private descriptionId = `ds-chart-description-${Math.random().toString(36).slice(2)}`;\n  private clipId = `ds-chart-clip-${Math.random().toString(36).slice(2)}`;\n\n  componentWillLoad() {\n    if (this.width && this.width > 0) this.surfaceWidth = this.width;\n    this.compile();\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connect();\n  }\n\n  connectedCallback() {\n    if (this.hasLoaded) this.connect();\n  }\n\n  componentDidRender() {\n    this.measureRenderedLabels();\n  }\n\n  disconnectedCallback() {\n    this.connectionGeneration += 1;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n    if (this.resizeFrame !== undefined) cancelAnimationFrame(this.resizeFrame);\n    if (this.compileFrame !== undefined) cancelAnimationFrame(this.compileFrame);\n    this.resizeFrame = undefined;\n    this.compileFrame = undefined;\n    this.measuredScene = undefined;\n    this.measuredLabels.clear();\n  }\n\n  @Watch('definition')\n  @Watch('locale')\n  @Watch('height')\n  @Watch('aspectRatio')\n  onDefinitionInputChange() {\n    this.scheduleCompile();\n  }\n\n  @Watch('width')\n  onWidthChange() {\n    if (this.width && this.width > 0) this.surfaceWidth = this.width;\n    else this.measureHost();\n    this.scheduleCompile();\n  }\n\n  private get surfaceHeight(): number {\n    if (this.height && this.height > 0) {\n      if (this.aspectRatio && !this.warnedConflictingHeight) {\n        this.warnedConflictingHeight = true;\n        console.warn('[ds-chart] height wins when both height and aspectRatio are supplied.');\n      }\n      return this.height;\n    }\n    if (this.aspectRatio && this.aspectRatio > 0) {\n      return Math.max(1, this.surfaceWidth / this.aspectRatio);\n    }\n    return this.containerHeight ?? DEFAULT_HEIGHT;\n  }\n\n  private connect() {\n    if (!this.el.isConnected) return;\n    // A detached chart may return with new props, dimensions, or inherited fonts.\n    this.measuredLabels.clear();\n    this.connectResizeObserver();\n    this.scheduleCompile();\n    this.waitForFonts();\n  }\n\n  private connectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(entries => {\n        const entry = entries[0];\n        if (!entry || !this.el.isConnected) return;\n        if (this.resizeFrame !== undefined) cancelAnimationFrame(this.resizeFrame);\n        this.resizeFrame = requestAnimationFrame(() => {\n          this.resizeFrame = undefined;\n          this.applyMeasuredSize(entry.contentRect.width, entry.contentRect.height);\n        });\n      });\n      this.resizeObserver.observe(this.el);\n    }\n    this.measureHost();\n  }\n\n  private measureHost() {\n    if (!this.el.isConnected) return;\n    const bounds = this.el.getBoundingClientRect();\n    this.applyMeasuredSize(bounds.width, bounds.height);\n  }\n\n  private applyMeasuredSize(width: number, height: number) {\n    let changed = false;\n    if (!this.width && width > 0) {\n      const nextWidth = Math.round(width * 100) / 100;\n      if (nextWidth !== this.surfaceWidth) {\n        this.surfaceWidth = nextWidth;\n        changed = true;\n      }\n    }\n    if (!this.height && !this.aspectRatio && height > 0) {\n      const nextHeight = Math.round(height * 100) / 100;\n      if (nextHeight !== this.containerHeight) {\n        this.containerHeight = nextHeight;\n        changed = true;\n      }\n    }\n    if (changed) {\n      this.scheduleCompile();\n    }\n  }\n\n  private scheduleCompile() {\n    if (!this.el.isConnected) return;\n    if (this.compileFrame !== undefined) cancelAnimationFrame(this.compileFrame);\n    this.compileFrame = requestAnimationFrame(() => {\n      this.compileFrame = undefined;\n      this.compile();\n    });\n  }\n\n  private compile() {\n    if (!this.definition || !(this.surfaceWidth > 0) || !(this.surfaceHeight > 0)) return;\n    const previousKey = this.focusState?.primary.sceneKey;\n    const usedLabels = new Set<string>();\n    const scene = compileChartScene(\n      this.definition,\n      this.surfaceWidth,\n      this.surfaceHeight,\n      resolveFormatLocale(this.locale),\n      text => {\n        usedLabels.add(text);\n        return this.measuredLabels.get(text) ?? { width: text.length * 7, height: 14 };\n      },\n      resolveChartTheme(this.el)\n    );\n    // Retain only measurements consulted by this definition, including thinned ticks.\n    for (const text of this.measuredLabels.keys()) {\n      if (!usedLabels.has(text)) this.measuredLabels.delete(text);\n    }\n    this.scene = scene;\n    if (previousKey) {\n      const restored = scene.points.find(point => point.sceneKey === previousKey);\n      if (restored && this.focusState) {\n        const grouped = findChartFocus(\n          scene.points,\n          scene.focus,\n          restored.x,\n          restored.y,\n          scene.maxFocusDistance,\n          scene.arcHitRegions\n        );\n        this.focusState = grouped ? { ...grouped, source: this.focusState.source } : undefined;\n      } else {\n        this.focusState = undefined;\n      }\n    }\n  }\n\n  private waitForFonts() {\n    if (!document.fonts) return;\n    const generation = this.connectionGeneration;\n    void document.fonts.ready.then(() => {\n      if (!this.el.isConnected || generation !== this.connectionGeneration) return;\n      this.measuredLabels.clear();\n      this.scheduleCompile();\n    });\n  }\n\n  private measureRenderedLabels() {\n    if (!this.el.isConnected) return;\n    const labels = this.el.querySelectorAll<SVGTextElement>('[data-chart-measure]');\n    // Guide labels share the tick font recipe. A theme change must invalidate\n    // its metrics even when this render only changes focus, rather than the scene.\n    const style = labels[0] ? getComputedStyle(labels[0]) : undefined;\n    const font = style\n      ? [\n          style.font,\n          style.letterSpacing,\n          style.fontFeatureSettings,\n          style.fontVariationSettings,\n          style.textTransform,\n        ].join('|')\n      : '';\n    if (this.measuredScene === this.scene && this.measuredFont === font) return;\n    if (this.measuredFont !== font) this.measuredLabels.clear();\n    this.measuredFont = font;\n    this.measuredScene = this.scene;\n    let changed = false;\n    labels.forEach(label => {\n      const text = label.textContent ?? '';\n      let box: DOMRect;\n      try {\n        box = label.getBBox();\n      } catch {\n        return;\n      }\n      const previous = this.measuredLabels.get(text);\n      if (\n        !previous ||\n        Math.abs(previous.width - box.width) > 0.5 ||\n        Math.abs(previous.height - box.height) > 0.5\n      ) {\n        this.measuredLabels.set(text, { width: box.width, height: box.height });\n        changed = true;\n      }\n    });\n    if (changed) this.scheduleCompile();\n  }\n\n  private resolveFocus(x: number, y: number, source: ChartFocusSource) {\n    if (!this.scene) return;\n    const result = findChartFocus(\n      this.scene.points,\n      this.scene.focus,\n      x,\n      y,\n      this.scene.maxFocusDistance,\n      this.scene.arcHitRegions\n    );\n    if (!result) {\n      this.clearFocus(source);\n      return;\n    }\n    if (\n      this.focusState?.primary.sceneKey === result.primary.sceneKey &&\n      this.focusState.source === source\n    )\n      return;\n    this.focusState = { ...result, source };\n    this.dsChartFocusChange.emit({ ...result, source });\n  }\n\n  private clearFocus(source: ChartFocusSource) {\n    if (!this.focusState) return;\n    this.focusState = undefined;\n    this.dsChartFocusChange.emit({ primary: null, points: [], source });\n  }\n\n  private onPointerMove = (event: PointerEvent) => {\n    const svg = event.currentTarget as SVGSVGElement;\n    const rect = svg.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    this.pointerAnchor = this.scene?.arcHitRegions.length ? { x, y } : undefined;\n    this.resolveFocus(x, y, 'pointer');\n  };\n\n  private onPointerLeave = () => {\n    this.pointerAnchor = undefined;\n    this.clearFocus('pointer');\n  };\n\n  private keyboardPoints(): ChartPoint[] {\n    if (!this.scene) return [];\n    return [...this.scene.points].sort((a, b) => a.x - b.x || a.y - b.y);\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    const points = this.keyboardPoints();\n    if (points.length === 0) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.clearFocus('keyboard');\n      return;\n    }\n    const current = this.focusState\n      ? points.findIndex(point => point.sceneKey === this.focusState?.primary.sceneKey)\n      : -1;\n    let next: number | undefined;\n    if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = points.length - 1;\n    else if (event.key === 'ArrowRight' || event.key === 'ArrowDown')\n      next = Math.min(points.length - 1, current + 1);\n    else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')\n      next = Math.max(0, current < 0 ? 0 : current - 1);\n    else return;\n    event.preventDefault();\n    const point = points[next ?? 0] ?? points[0];\n    this.resolveFocus(point.x, point.y, 'keyboard');\n  };\n\n  private renderNode(node: ChartSceneNode, className = 'chart__mark') {\n    const resolvedClassName = node.className ?? className;\n    const presentation = {\n      fill: node.style.fill,\n      stroke: node.style.stroke,\n      opacity: node.style.opacity,\n      'fill-opacity': node.style.fillOpacity,\n      'stroke-opacity': node.style.strokeOpacity,\n      'stroke-width': node.style.strokeWidth,\n      'stroke-dasharray': node.style.strokeDasharray || undefined,\n    };\n    if (node.type === 'path')\n      return (\n        <path\n          key={node.key}\n          class={resolvedClassName}\n          d={node.d}\n          transform={node.transform}\n          {...presentation}\n        />\n      );\n    if (node.type === 'rect') {\n      return (\n        <rect\n          key={node.key}\n          class={resolvedClassName}\n          x={node.x}\n          y={node.y}\n          width={node.width}\n          height={node.height}\n          rx={node.style.radius}\n          {...presentation}\n        />\n      );\n    }\n    if (node.type === 'circle')\n      return (\n        <circle\n          key={node.key}\n          class={resolvedClassName}\n          cx={node.x}\n          cy={node.y}\n          r={node.radius}\n          {...presentation}\n        />\n      );\n    if (node.type === 'line')\n      return (\n        <line\n          key={node.key}\n          class={resolvedClassName}\n          x1={node.x1}\n          x2={node.x2}\n          y1={node.y1}\n          y2={node.y2}\n          {...presentation}\n        />\n      );\n    return (\n      <text\n        key={node.key}\n        class={node.className ?? `${className} chart__text-mark`}\n        data-chart-measure={node.measure ? '' : undefined}\n        x={node.x}\n        y={node.y}\n        dx={node.dx}\n        dy={node.dy}\n        text-anchor={node.style.textAnchor}\n        font-family={node.style.fontFamily}\n        font-size={node.style.fontSize}\n        font-weight={node.style.fontWeight}\n        dominant-baseline={node.dominantBaseline ?? 'middle'}\n        transform={node.rotate ? `rotate(${node.rotate} ${node.x} ${node.y})` : undefined}\n        {...presentation}\n      >\n        {node.text}\n      </text>\n    );\n  }\n\n  private renderMarkLayers(scene: ChartScene) {\n    const layers: Array<{ clipped: boolean; nodes: ChartSceneNode[] }> = [];\n    scene.nodes.forEach(node => {\n      const clipped = scene.clip && node.clipToPlot !== false;\n      const current = layers[layers.length - 1];\n      if (current?.clipped === clipped) current.nodes.push(node);\n      else layers.push({ clipped, nodes: [node] });\n    });\n    return layers.map((layer, index) => (\n      <g\n        key={`marks-${index}`}\n        class=\"chart__marks\"\n        aria-hidden=\"true\"\n        clip-path={layer.clipped ? `url(#${this.clipId})` : undefined}\n      >\n        {layer.nodes.map(node => this.renderNode(node))}\n      </g>\n    ));\n  }\n\n  private focusedDotPoints(scene: ChartScene): ChartPoint[] {\n    if (!this.focusState) return [];\n    const focusDotPointKeys = new Set(scene.focusDotPointKeys);\n    return this.focusState.points.filter(point => focusDotPointKeys.has(point.sceneKey));\n  }\n\n  private tooltipContent(): { heading?: string; items: ChartTooltipItem[] } | undefined {\n    if (!this.scene || !this.focusState || this.scene.tooltip === false) return undefined;\n    const options: ChartTooltipOptions =\n      typeof this.scene.tooltip === 'object' ? this.scene.tooltip : {};\n    const locale = resolveFormatLocale(this.locale);\n    const points = this.focusState.points;\n    const formatDate = (value: Date) =>\n      dateFormatter(locale, {\n        year: 'numeric',\n        month: 'short',\n        day: 'numeric',\n        timeZone: 'UTC',\n      }).format(value);\n    const formatValue = (point: ChartPoint) => {\n      const value = point.value ?? point.yValue;\n      return (\n        options.format?.(point, locale) ??\n        (typeof value === 'number'\n          ? numberFormatter(locale, { maximumFractionDigits: 2 }).format(value)\n          : value instanceof Date\n            ? formatDate(value)\n            : String(value))\n      );\n    };\n    return {\n      heading:\n        points.length > 1\n          ? (options.formatGroupHeading?.(points, locale) ??\n            (this.focusState.primary.xValue instanceof Date\n              ? formatDate(this.focusState.primary.xValue)\n              : String(this.focusState.primary.xValue)))\n          : undefined,\n      items: points.map(\n        point =>\n          options.formatGroupItem?.(point, locale) ?? {\n            label: point.groupLabel ?? point.markId,\n            value: formatValue(point),\n            color: point.color,\n          }\n      ),\n    };\n  }\n\n  private statusText(content: ReturnType<Chart['tooltipContent']>): string {\n    if (!content) return '';\n    return [content.heading, ...content.items.map(item => `${item.label}: ${item.value}`)]\n      .filter(Boolean)\n      .join('. ');\n  }\n\n  render() {\n    const scene = this.scene;\n    const tooltip = this.tooltipContent();\n    const focus = this.focusState?.primary;\n    const tooltipAnchor =\n      focus &&\n      this.focusState?.source === 'pointer' &&\n      scene?.arcHitRegions.length &&\n      this.pointerAnchor\n        ? this.pointerAnchor\n        : focus;\n    const focusedDotPoints = scene ? this.focusedDotPoints(scene) : [];\n    const groupedPointFocus =\n      scene?.coordinate === 'cartesian' && scene.focus === 'group-x' && focusedDotPoints.length > 1;\n    const center =\n      focus && scene?.center?.focused\n        ? scene.center.focused(focus, resolveFormatLocale(this.locale))\n        : scene?.center;\n    return (\n      <Host\n        class=\"chart\"\n        style={{\n          '--ds-chart-width': this.width ? `${this.width}px` : '100%',\n          '--ds-chart-height':\n            this.height || this.aspectRatio\n              ? `${this.surfaceHeight}px`\n              : 'var(--ds-chart-container-height, 320px)',\n        }}\n      >\n        {this.description && (\n          <span id={this.descriptionId} class=\"chart__description\">\n            {this.description}\n          </span>\n        )}\n        {scene && (\n          /* eslint-disable-next-line compomo/prefer-ds-icon -- SVG is the chart renderer. */\n          <svg\n            class=\"chart__surface\"\n            width={scene.width}\n            height={scene.height}\n            viewBox={`0 0 ${scene.width} ${scene.height}`}\n            role=\"img\"\n            aria-label={this.label || 'Chart'}\n            aria-describedby={this.description ? this.descriptionId : undefined}\n            tabindex={0}\n            onPointerMove={this.onPointerMove}\n            onPointerLeave={this.onPointerLeave}\n            onKeyDown={this.onKeyDown}\n          >\n            <defs aria-hidden=\"true\">\n              <clipPath id={this.clipId}>\n                <rect\n                  x={scene.plot.left}\n                  y={scene.plot.top}\n                  width={scene.plot.width}\n                  height={scene.plot.height}\n                />\n              </clipPath>\n            </defs>\n            <rect\n              class=\"chart__interaction-surface\"\n              x=\"0\"\n              y=\"0\"\n              width={scene.width}\n              height={scene.height}\n              aria-hidden=\"true\"\n            />\n            <g class=\"chart__guides\" aria-hidden=\"true\">\n              {scene.guides.map(node => this.renderNode(node, 'chart__grid chart__polar-guide'))}\n              {scene.yAxis.line && (\n                <line\n                  class=\"chart__axis-line\"\n                  x1={scene.plot.left}\n                  x2={scene.plot.left}\n                  y1={scene.plot.top}\n                  y2={scene.plot.bottom}\n                />\n              )}\n              {scene.yAxis.ticks.map(tick => (\n                <g key={`y-${tick.key}`}>\n                  {scene.yAxis.grid && (\n                    <line\n                      class=\"chart__grid\"\n                      x1={scene.plot.left}\n                      x2={scene.plot.right}\n                      y1={tick.position}\n                      y2={tick.position}\n                    />\n                  )}\n                  <line\n                    class=\"chart__axis-line chart__tick-stub\"\n                    x1={scene.plot.left - scene.yAxis.tickSize}\n                    x2={scene.plot.left}\n                    y1={tick.position}\n                    y2={tick.position}\n                  />\n                  {tick.labelVisible && (\n                    <text\n                      data-chart-measure\n                      class=\"chart__tick chart__tick--y\"\n                      x={scene.plot.left - scene.yAxis.tickSize - scene.yAxis.tickPadding}\n                      y={tick.position}\n                      text-anchor=\"end\"\n                      dominant-baseline=\"middle\"\n                    >\n                      {tick.label}\n                    </text>\n                  )}\n                </g>\n              ))}\n              {scene.xAxis.line && (\n                <line\n                  class=\"chart__axis-line\"\n                  x1={scene.plot.left}\n                  x2={scene.plot.right}\n                  y1={scene.plot.bottom}\n                  y2={scene.plot.bottom}\n                />\n              )}\n              {scene.xAxis.ticks.map(tick => (\n                <g key={`x-${tick.key}`}>\n                  {scene.xAxis.grid && (\n                    <line\n                      class=\"chart__grid\"\n                      x1={tick.position}\n                      x2={tick.position}\n                      y1={scene.plot.top}\n                      y2={scene.plot.bottom}\n                    />\n                  )}\n                  <line\n                    class=\"chart__axis-line chart__tick-stub\"\n                    x1={tick.position}\n                    x2={tick.position}\n                    y1={scene.plot.bottom}\n                    y2={scene.plot.bottom + scene.xAxis.tickSize}\n                  />\n                  {tick.labelVisible && (\n                    <text\n                      data-chart-measure\n                      class=\"chart__tick chart__tick--x\"\n                      x={tick.position}\n                      y={scene.plot.bottom + scene.xAxis.tickSize + scene.xAxis.tickPadding}\n                      text-anchor=\"middle\"\n                      dominant-baseline=\"hanging\"\n                      transform={\n                        scene.xAxis.rotate\n                          ? `rotate(${scene.xAxis.rotate} ${tick.position} ${scene.plot.bottom + scene.xAxis.tickSize + scene.xAxis.tickPadding})`\n                          : undefined\n                      }\n                    >\n                      {tick.label}\n                    </text>\n                  )}\n                </g>\n              ))}\n              {scene.xAxis.label && (\n                <text\n                  class=\"chart__axis-title\"\n                  x={(scene.plot.left + scene.plot.right) / 2}\n                  y={scene.height - 4}\n                  text-anchor=\"middle\"\n                >\n                  {scene.xAxis.label}\n                </text>\n              )}\n              {scene.yAxis.label && (\n                <text\n                  class=\"chart__axis-title\"\n                  x=\"8\"\n                  y={(scene.plot.top + scene.plot.bottom) / 2}\n                  text-anchor=\"middle\"\n                  dominant-baseline=\"middle\"\n                  transform={`rotate(-90 8 ${(scene.plot.top + scene.plot.bottom) / 2})`}\n                >\n                  {scene.yAxis.label}\n                </text>\n              )}\n              {scene.coordinate === 'cartesian' && (\n                <g class=\"chart__plot-frame\">\n                  <line\n                    class=\"chart__plot-boundary chart__plot-boundary--top\"\n                    x1={scene.plot.left}\n                    x2={scene.plot.right}\n                    y1={scene.plot.top}\n                    y2={scene.plot.top}\n                  />\n                  <line\n                    class=\"chart__plot-boundary chart__plot-boundary--right\"\n                    x1={scene.plot.right}\n                    x2={scene.plot.right}\n                    y1={scene.plot.top}\n                    y2={scene.plot.bottom}\n                  />\n                </g>\n              )}\n            </g>\n            {this.renderMarkLayers(scene)}\n            {groupedPointFocus && focus && (\n              <line\n                class=\"chart__focus-guide\"\n                x1={focus.x}\n                x2={focus.x}\n                y1={scene.plot.top}\n                y2={scene.plot.bottom}\n                aria-hidden=\"true\"\n              />\n            )}\n            {focusedDotPoints.map(point => (\n              <circle\n                key={`focus-${point.sceneKey}`}\n                class=\"chart__focus-point\"\n                cx={point.x}\n                cy={point.y}\n                r={scene.focusDotCircleRadius}\n                fill={point.color}\n                stroke=\"var(--color-background-primary)\"\n                stroke-width={scene.focusDotHaloWidth}\n                aria-hidden=\"true\"\n              />\n            ))}\n            {focus && focusedDotPoints.length === 0 && (\n              <circle class=\"chart__focus\" cx={focus.x} cy={focus.y} r=\"6\" aria-hidden=\"true\" />\n            )}\n            {center?.value && (\n              <text\n                class=\"chart__center-value\"\n                x={(scene.plot.left + scene.plot.right) / 2}\n                y={(scene.plot.top + scene.plot.bottom) / 2 - (center.caption ? 10 : 0)}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                aria-hidden=\"true\"\n              >\n                {center.value}\n              </text>\n            )}\n            {center?.caption && (\n              <text\n                class=\"chart__center-caption\"\n                x={(scene.plot.left + scene.plot.right) / 2}\n                y={(scene.plot.top + scene.plot.bottom) / 2 + 14}\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                aria-hidden=\"true\"\n              >\n                {center.caption}\n              </text>\n            )}\n          </svg>\n        )}\n        {tooltip && tooltipAnchor && (\n          <ds-tooltip-chart\n            heading={tooltip.heading}\n            items={tooltip.items}\n            x={tooltipAnchor.x}\n            y={tooltipAnchor.y}\n          />\n        )}\n        <span class=\"chart__status\" aria-live=\"polite\" aria-atomic=\"true\">\n          {this.statusText(tooltip)}\n        </span>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -156,6 +156,14 @@
           "mutable": false,
           "description": "Native disabled state."
         },
+        "form": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "form",
+          "required": false,
+          "mutable": false,
+          "description": "Associates the checkbox with a form by id when rendered outside that form."
+        },
         "hasInteractionFill": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -285,6 +293,14 @@
         "mutable": false,
         "description": "Native disabled state."
       },
+      "form": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "form",
+        "required": false,
+        "mutable": false,
+        "description": "Associates the checkbox with a form by id when rendered outside that form."
+      },
       "hasInteractionFill": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -435,7 +451,7 @@
     },
     {
       "path": "src/wc/components/Checkbox/Checkbox.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport type CheckboxSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Checkbox {\n  @AttachInternals() internals!: ElementInternals;\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n  private descriptionId = `${this.labelId}-description`;\n\n  /** Visible label and accessible name. Omitted only in presentation mode. */\n  @Prop() label!: string;\n  /** Optional supporting description associated with the checkbox. */\n  @Prop() description?: string;\n  /** Current checked state. */\n  @Prop({ mutable: true }) checked: boolean = false;\n  /** Visual and placement density. */\n  @Prop() size: CheckboxSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Submitted value when checked. */\n  @Prop() value: string = 'on';\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require the checkbox to be checked for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required checkbox is unchecked. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Mixed visual state. Activation clears it before toggling checked. */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n  /** Design-system inactive state. */\n  @Prop() isInactive: boolean = false;\n  /** Show full-row hover and pressed feedback for choice-list presentations. */\n  @Prop() hasInteractionFill: boolean = false;\n  /** Visual-only indicator for a composite control that owns selection semantics. */\n  @Prop() presentation: boolean = false;\n\n  /** Emitted after user activation with the new checked state. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  private initialIndeterminate = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.initialIndeterminate = this.indeterminate;\n    this.syncFormValue();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('presentation')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.presentation;\n    setFormControlValue(this.internals, this.checked ? this.value : null, { inactive });\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.indeterminate = this.initialIndeterminate;\n  }\n\n  private handleActivate = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.presentation) return;\n    if (this.indeterminate) this.indeterminate = false;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const isMarked = this.checked || this.indeterminate;\n    const invalid = this.required && !inactive && !this.checked;\n\n    return (\n      <Host\n        role={this.presentation ? undefined : 'checkbox'}\n        aria-checked={\n          this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)\n        }\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-labelledby={this.presentation ? undefined : this.labelId}\n        aria-describedby={!this.presentation && this.description ? this.descriptionId : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          checkbox: true,\n          'checkbox--presentation': this.presentation,\n          'checkbox--described': Boolean(this.description),\n          [`checkbox--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'ds-control-inactive': inactive && !this.presentation,\n          'ds-focus-ring-inset': !this.presentation,\n          'ds-interaction-fill': !inactive && !this.presentation && this.hasInteractionFill,\n        }}\n        onClick={this.presentation ? undefined : this.handleActivate}\n        onKeyDown={this.presentation ? undefined : this.handleKeyDown}\n      >\n        <span class=\"checkbox__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n          <span class={{ box: true, 'box--marked': isMarked }}>\n            {isMarked && (\n              // eslint-disable-next-line compomo/prefer-ds-icon -- Checkbox owns this fixed state-mark geometry.\n              <svg class=\"checkbox__mark\" viewBox=\"0 0 16 16\" fill=\"currentColor\" focusable=\"false\">\n                <path\n                  d={\n                    this.indeterminate\n                      ? 'M12 7.375V8.625H4V7.375H12Z'\n                      : 'M12.9756 4.65527L7.22559 11.4053C7.11258 11.5379 6.94946 11.6169 6.77539 11.624C6.60111 11.631 6.43095 11.5657 6.30762 11.4424L3.05762 8.19238L3.94238 7.30762L6.71289 10.0781L12.0244 3.84473L12.9756 4.65527Z'\n                  }\n                />\n              </svg>\n            )}\n          </span>\n        </span>\n        {!this.presentation && (\n          <span class=\"checkbox__copy ds-interaction-fill__content\">\n            <ds-text\n              class=\"checkbox__label\"\n              as=\"span\"\n              variant={CONTROL_TEXT_VARIANT[this.size]}\n              textId={this.labelId}\n            >\n              {this.label}\n            </ds-text>\n            {this.description ? (\n              <ds-text\n                as=\"span\"\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                color=\"secondary\"\n                textId={this.descriptionId}\n              >\n                {this.description}\n              </ds-text>\n            ) : null}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport type CheckboxSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Checkbox {\n  @AttachInternals() internals!: ElementInternals;\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n  private descriptionId = `${this.labelId}-description`;\n\n  /** Visible label and accessible name. Omitted only in presentation mode. */\n  @Prop() label!: string;\n  /** Optional supporting description associated with the checkbox. */\n  @Prop() description?: string;\n  /** Current checked state. */\n  @Prop({ mutable: true }) checked: boolean = false;\n  /** Visual and placement density. */\n  @Prop() size: CheckboxSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Associates the checkbox with a form by id when rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n  /** Submitted value when checked. */\n  @Prop() value: string = 'on';\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require the checkbox to be checked for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required checkbox is unchecked. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Mixed visual state. Activation clears it before toggling checked. */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n  /** Design-system inactive state. */\n  @Prop() isInactive: boolean = false;\n  /** Show full-row hover and pressed feedback for choice-list presentations. */\n  @Prop() hasInteractionFill: boolean = false;\n  /** Visual-only indicator for a composite control that owns selection semantics. */\n  @Prop() presentation: boolean = false;\n\n  /** Emitted after user activation with the new checked state. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  private initialIndeterminate = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.initialIndeterminate = this.indeterminate;\n    this.syncFormValue();\n  }\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('requiredMessage')\n  @Watch('presentation')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.presentation;\n    // Checkedness cannot be recovered from the submitted value: it may be empty,\n    // and mixed state is independent of whether the checkbox submits a value.\n    const state = JSON.stringify([this.checked, this.indeterminate]);\n    setFormControlValue(this.internals, this.checked ? this.value : null, { inactive, state });\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.indeterminate = this.initialIndeterminate;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state !== 'string') return;\n    try {\n      const restored: unknown = JSON.parse(state);\n      if (\n        Array.isArray(restored) &&\n        restored.length === 2 &&\n        restored.every(value => typeof value === 'boolean')\n      ) {\n        [this.checked, this.indeterminate] = restored;\n      }\n    } catch {\n      // Ignore state that was not serialized by this control.\n    }\n  }\n\n  private handleActivate = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.presentation) return;\n    if (this.indeterminate) this.indeterminate = false;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const isMarked = this.checked || this.indeterminate;\n    const invalid = this.required && !inactive && !this.checked;\n\n    return (\n      <Host\n        role={this.presentation ? undefined : 'checkbox'}\n        aria-checked={\n          this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)\n        }\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-labelledby={this.presentation ? undefined : this.labelId}\n        aria-describedby={!this.presentation && this.description ? this.descriptionId : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          checkbox: true,\n          'checkbox--presentation': this.presentation,\n          'checkbox--described': Boolean(this.description),\n          [`checkbox--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'ds-control-inactive': inactive && !this.presentation,\n          'ds-focus-ring-inset': !this.presentation,\n          'ds-interaction-fill': !inactive && !this.presentation && this.hasInteractionFill,\n        }}\n        onClick={this.presentation ? undefined : this.handleActivate}\n        onKeyDown={this.presentation ? undefined : this.handleKeyDown}\n      >\n        <span class=\"checkbox__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n          <span class={{ box: true, 'box--marked': isMarked }}>\n            {isMarked && (\n              // eslint-disable-next-line compomo/prefer-ds-icon -- Checkbox owns this fixed state-mark geometry.\n              <svg class=\"checkbox__mark\" viewBox=\"0 0 16 16\" fill=\"currentColor\" focusable=\"false\">\n                <path\n                  d={\n                    this.indeterminate\n                      ? 'M12 7.375V8.625H4V7.375H12Z'\n                      : 'M12.9756 4.65527L7.22559 11.4053C7.11258 11.5379 6.94946 11.6169 6.77539 11.624C6.60111 11.631 6.43095 11.5657 6.30762 11.4424L3.05762 8.19238L3.94238 7.30762L6.71289 10.0781L12.0244 3.84473L12.9756 4.65527Z'\n                  }\n                />\n              </svg>\n            )}\n          </span>\n        </span>\n        {!this.presentation && (\n          <span class=\"checkbox__copy ds-interaction-fill__content\">\n            <ds-text\n              class=\"checkbox__label\"\n              as=\"span\"\n              variant={CONTROL_TEXT_VARIANT[this.size]}\n              textId={this.labelId}\n            >\n              {this.label}\n            </ds-text>\n            {this.description ? (\n              <ds-text\n                as=\"span\"\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                color=\"secondary\"\n                textId={this.descriptionId}\n              >\n                {this.description}\n              </ds-text>\n            ) : null}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -110,7 +110,7 @@
     },
     {
       "path": "src/wc/components/ConversationList/ConversationList.tsx",
-      "content": "import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-conversation-list',\n  styleUrl: 'ConversationList.css',\n  scoped: true,\n})\nexport class ConversationList {\n  @Element() el!: HTMLElement;\n\n  private empty?: HTMLElement;\n  private emptySlotObserver?: MutationObserver;\n\n  componentDidLoad(): void {\n    this.syncEmptyStateLayout();\n    this.emptySlotObserver = new MutationObserver(this.syncEmptyStateLayout);\n    this.emptySlotObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback(): void {\n    this.emptySlotObserver?.disconnect();\n  }\n\n  private syncEmptyStateLayout = (): void => {\n    const emptyState = this.el.querySelector<HTMLElement>('[slot=\"empty\"]');\n    if (emptyState && !this.empty?.contains(emptyState)) {\n      // Stencil's scoped-slot runtime does not relocate nodes appended after\n      // hydration. Keep that dynamic fallback aligned with the CSS-owned\n      // wrapper used by declarative slot content.\n      emptyState.style.setProperty('position', 'absolute');\n      emptyState.style.setProperty('inset-block-start', '0');\n      emptyState.style.setProperty('inset-inline', '0');\n      emptyState.style.setProperty('inset-block-end', '0');\n      emptyState.style.setProperty('height', 'auto');\n      emptyState.style.setProperty('box-sizing', 'border-box');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"conversation-list\">\n          <div class=\"conversation-list__viewport\">\n            <div class=\"conversation-list__content\">\n              <slot />\n              <div\n                class=\"conversation-list__empty\"\n                ref={element => {\n                  this.empty = element;\n                }}\n              >\n                <slot name=\"empty\" />\n              </div>\n            </div>\n          </div>\n          <div class=\"conversation-list__actions\">\n            <div class=\"conversation-list__actions-surface ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-conversation-list',\n  styleUrl: 'ConversationList.css',\n  scoped: true,\n})\nexport class ConversationList {\n  @Element() el!: HTMLElement;\n\n  private empty?: HTMLElement;\n  private emptySlotObserver?: MutationObserver;\n  private hasLoaded = false;\n\n  connectedCallback(): void {\n    if (this.hasLoaded) this.observeEmptySlot();\n  }\n\n  componentDidLoad(): void {\n    this.hasLoaded = true;\n    this.observeEmptySlot();\n  }\n\n  private observeEmptySlot(): void {\n    if (!this.el.isConnected) return;\n    this.emptySlotObserver?.disconnect();\n    this.syncEmptyStateLayout();\n    this.emptySlotObserver = new MutationObserver(this.syncEmptyStateLayout);\n    this.emptySlotObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback(): void {\n    this.emptySlotObserver?.disconnect();\n    this.emptySlotObserver = undefined;\n  }\n\n  private syncEmptyStateLayout = (): void => {\n    if (!this.el.isConnected) return;\n    const emptyState = this.el.querySelector<HTMLElement>('[slot=\"empty\"]');\n    if (emptyState && !this.empty?.contains(emptyState)) {\n      // Stencil's scoped-slot runtime does not relocate nodes appended after\n      // hydration. Keep that dynamic fallback aligned with the CSS-owned\n      // wrapper used by declarative slot content.\n      emptyState.style.setProperty('position', 'absolute');\n      emptyState.style.setProperty('inset-block-start', '0');\n      emptyState.style.setProperty('inset-inline', '0');\n      emptyState.style.setProperty('inset-block-end', '0');\n      emptyState.style.setProperty('height', 'auto');\n      emptyState.style.setProperty('box-sizing', 'border-box');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"conversation-list\">\n          <div class=\"conversation-list__viewport\">\n            <div class=\"conversation-list__content\">\n              <slot />\n              <div\n                class=\"conversation-list__empty\"\n                ref={element => {\n                  this.empty = element;\n                }}\n              >\n                <slot name=\"empty\" />\n              </div>\n            </div>\n          </div>\n          <div class=\"conversation-list__actions\">\n            <div class=\"conversation-list__actions-surface ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -376,7 +376,7 @@
     },
     {
       "path": "src/wc/components/DataGroup/DataGroup.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceListSection, ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport type { DataGroupingState, DataSortDirection } from '../Table/table-types';\n\nexport interface TableGroupOrderOption {\n  label: string;\n  direction: DataSortDirection;\n  /** Optional application-owned data point used to order the group sections. */\n  orderBy?: string;\n}\n\nexport interface DataGroupOption {\n  label: string;\n  value: string;\n  description?: string;\n  isInactive?: boolean;\n  /** Product-owned order choices for this grouping data point. */\n  orderOptions?: TableGroupOrderOption[];\n}\n\nconst DEFAULT_ORDER_OPTIONS: TableGroupOrderOption[] = [\n  { label: 'Ascending', direction: 'asc' },\n  { label: 'Descending', direction: 'desc' },\n];\n\nlet tableGroupSeq = 0;\n\n@Component({\n  tag: 'ds-data-group',\n  styleUrl: 'DataGroup.css',\n  scoped: true,\n})\nexport class DataGroup {\n  @Element() private el!: HTMLElement;\n\n  /** Product-owned data points that may group the table. */\n  /** Render content inside a parent-owned surface; the parent owns dismissal and positioning. */\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() vertical: boolean = false;\n  @Prop() embedded: boolean = false;\n  @Prop() options: DataGroupOption[] = [];\n  /** Controlled grouping field and the order of its group sections. */\n  @Prop() grouping: DataGroupingState | null = null;\n  /** Accessible name for the trigger and non-modal dialog. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open = false;\n  /** Empty message kept in the order pane until a grouping data point is selected. */\n  @Prop() emptyMessage = 'Select a group to choose its order.';\n  /** Clear action label. */\n  @Prop() clearLabel = 'Clear';\n\n  /** Requests replacement of the complete controlled grouping state. */\n  @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n  /** Requests removal of the controlled grouping state. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Reports controlled popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n\n  @State() private shouldRender = false;\n  @State() private closing = false;\n  @State() private positionReady = false;\n  @State() private pos = { x: 0, y: 0 };\n  @State() private focusRingVisible = false;\n\n  private readonly componentId = `ds-data-group-${++tableGroupSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly popupId = `${this.componentId}-popup`;\n  private triggerElement: HTMLElement | null = null;\n  private pendingInitialFocusVisible = false;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.triggerElement,\n    getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_CSS_LENGTHS.space050, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: 'end',\n          alignOffsetPx: 0,\n          sectionInsetPx,\n        }),\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    observeResize: true,\n    topLayer: true,\n  });\n\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.triggerElement,\n    getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) clearTimeout(this.closeTimer);\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (this.embedded) return;\n    if (isOpen) {\n      this.teardown();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.focusRingVisible = this.pendingInitialFocusVisible;\n      this.interaction.connect();\n      this.position.observe();\n      this.position.schedule(() => this.focusInitialDataPoint());\n      return;\n    }\n    if (!this.shouldRender) return;\n    this.position.cancel();\n    this.closing = true;\n    this.interaction.disconnect();\n    this.position.unobserve();\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort2,\n      TOKEN_DEFAULTS.animationDurationShort3\n    );\n    if (duration <= 0) this.finishClose();\n    else this.closeTimer = setTimeout(() => this.finishClose(), duration);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.embedded && (event.key === 'Escape' || event.key === 'Tab')) return;\n    if ((!this.shouldRender && !this.embedded) || this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n    if (event.key !== 'Tab' || !this.interaction.tabLeavesPopup(event)) return;\n    event.preventDefault();\n    this.close(false);\n    this.interaction.moveFocusAfterTab(event.shiftKey);\n  }\n\n  private get popupFallbackWidth(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n  }\n\n  private get popupFallbackHeight(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private teardown() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private toggle(fromKeyboard = false) {\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.pendingInitialFocusVisible = fromKeyboard;\n    this.open = true;\n    this.dsOpenChange.emit(true);\n    this.onOpenChange(true);\n  }\n\n  private close(restoreFocus = true) {\n    if (restoreFocus) this.interaction.focusAnchor();\n    this.open = false;\n    this.dsOpenChange.emit(false);\n    this.onOpenChange(false);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.data-group-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.closeTimer = null;\n  }\n\n  private focusInitialDataPoint() {\n    requestAnimationFrame(() => {\n      const selected = this.grouping\n        ? this.el.querySelector<HTMLElement>(\n            `[data-group-value=\"${CSS.escape(this.grouping.fieldId)}\"] [role=\"option\"]`\n          )\n        : null;\n      const initial =\n        selected ??\n        this.el.querySelector<HTMLElement>(\n          '[data-group-value] [role=\"option\"]:not([aria-disabled=\"true\"])'\n        );\n      initial?.focus();\n      this.pendingInitialFocusVisible = false;\n    });\n  }\n\n  private selectData(option: DataGroupOption) {\n    if (option.value === '__none__') {\n      this.dsClear.emit();\n      return;\n    }\n    if (option.isInactive) return;\n    if (this.grouping?.fieldId === option.value) {\n      this.dsGroupChange.emit({ ...this.grouping });\n      return;\n    }\n    const initialOrder = option.orderOptions?.[0];\n    this.dsGroupChange.emit({\n      fieldId: option.value,\n      direction: initialOrder?.direction ?? 'asc',\n      ...(initialOrder?.orderBy ? { orderBy: initialOrder.orderBy } : {}),\n    });\n  }\n\n  private get activeOrderOptions(): TableGroupOrderOption[] {\n    const configured = this.options.find(\n      option => option.value === this.grouping?.fieldId\n    )?.orderOptions;\n    return configured?.length ? configured : DEFAULT_ORDER_OPTIONS;\n  }\n\n  private get selectedOrderIndex(): number {\n    if (!this.grouping) return -1;\n    const exact = this.activeOrderOptions.findIndex(\n      option =>\n        option.direction === this.grouping?.direction && option.orderBy === this.grouping?.orderBy\n    );\n    if (exact >= 0) return exact;\n    if (this.grouping.orderBy === undefined) {\n      return this.activeOrderOptions.findIndex(\n        option => option.direction === this.grouping?.direction\n      );\n    }\n    return -1;\n  }\n\n  private selectOrder(option: TableGroupOrderOption, index: number) {\n    if (!this.grouping || this.selectedOrderIndex === index) return;\n    const grouping: DataGroupingState = {\n      fieldId: this.grouping.fieldId,\n      direction: option.direction,\n    };\n    if (option.orderBy) grouping.orderBy = option.orderBy;\n    this.dsGroupChange.emit(grouping);\n  }\n\n  private moveFocus(\n    event: KeyboardEvent,\n    selector: string,\n    currentIndex: number,\n    oppositeSelector?: string\n  ) {\n    if (oppositeSelector && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\n      event.preventDefault();\n      this.focusRingVisible = true;\n      this.el.querySelector<HTMLElement>(oppositeSelector)?.focus();\n      return;\n    }\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n    event.preventDefault();\n    const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector)).filter(\n      item => item.getAttribute('aria-disabled') !== 'true'\n    );\n    if (!items.length) return;\n    let next: number;\n    if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = items.length - 1;\n    else next = (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;\n    this.focusRingVisible = true;\n    items[next]?.focus();\n  }\n\n  private renderDataOption(option: DataGroupOption, index: number) {\n    const selected =\n      option.value === '__none__' ? !this.grouping : option.value === this.grouping?.fieldId;\n    return (\n      <ChoiceOptionRow\n        id={`${this.componentId}-data-${index}`}\n        option={{ ...option }}\n        selected={selected}\n        active={selected}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={Boolean(option.description)}\n        tabIndex={selected || (!this.grouping && index === 0) ? 0 : -1}\n        onHover={() => {\n          this.focusRingVisible = false;\n        }}\n        onSelect={() => this.selectData(option)}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.selectData(option);\n            return;\n          }\n          this.moveFocus(\n            event,\n            '[data-group-value] [role=\"option\"]',\n            this.options\n              .filter(candidate => !candidate.isInactive)\n              .findIndex(candidate => candidate.value === option.value),\n            this.grouping\n              ? `[data-group-order-index=\"${this.selectedOrderIndex}\"] [role=\"option\"]`\n              : undefined\n          );\n        }}\n      />\n    );\n  }\n\n  private renderOrder(option: TableGroupOrderOption, index: number) {\n    const selected = index === this.selectedOrderIndex;\n    return (\n      <ChoiceOptionRow\n        id={`${this.componentId}-order-${index}`}\n        option={{ label: option.label, value: String(index) }}\n        selected={selected}\n        active={selected}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={false}\n        tabIndex={selected ? 0 : -1}\n        onHover={() => {\n          this.focusRingVisible = false;\n        }}\n        onSelect={() => this.selectOrder(option, index)}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.selectOrder(option, index);\n            return;\n          }\n          this.moveFocus(\n            event,\n            '[data-group-order-index] [role=\"option\"]',\n            index,\n            `[data-group-value=\"${CSS.escape(this.grouping?.fieldId ?? '')}\"] [role=\"option\"]`\n          );\n        }}\n      />\n    );\n  }\n\n  render() {\n    const name = this.ariaLabel?.trim() || 'Group table';\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    return (\n      <Host\n        class={{ 'data-group-vertical': this.vertical }}\n        hidden={this.options.length === 0 ? true : undefined}\n      >\n        {this.options.length && !this.embedded ? (\n          <ds-button-unfilled\n            hasBorder={this.hasBorder}\n            ref={element => {\n              this.triggerElement = (element as HTMLElement) ?? null;\n            }}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"SectionList\"\n            label=\"Group\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            haspopup=\"dialog\"\n            collapseLabel={true}\n            expanded={this.open}\n            surfaceOpen={this.open || this.closing}\n            controls={this.popupId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => this.toggle(event.detail.detail === 0)}\n          />\n        ) : null}\n\n        {this.shouldRender || this.embedded ? (\n          <div\n            id={this.popupId}\n            popover={this.embedded ? undefined : 'manual'}\n            class={{\n              'data-group-popup': true,\n              'ds-choice-popup': !this.embedded,\n              'data-preferences-embedded': this.embedded,\n              'ds-choice-popup--closing': this.closing,\n            }}\n            style={this.embedded ? undefined : popupStyle}\n            role=\"dialog\"\n            aria-label={name}\n          >\n            <div class=\"data-group__body\">\n              <div class=\"data-group__data-pane\">\n                <ChoiceListSection\n                  heading=\"Data\"\n                  ariaLabel=\"Group data\"\n                  className=\"data-group__list\"\n                >\n                  {this.vertical &&\n                    this.renderDataOption({ label: 'No grouping', value: '__none__' }, -1)}\n                  {this.options.map((option, index) => (\n                    <div data-group-value={option.value}>\n                      {this.renderDataOption(option, index)}\n                    </div>\n                  ))}\n                </ChoiceListSection>\n                <div\n                  hidden={this.vertical}\n                  class=\"data-group__footer ds-choice-footer\"\n                  aria-hidden={!this.grouping ? 'true' : undefined}\n                >\n                  <div class=\"ds-choice-footer__content ds-control--md\">\n                    {this.grouping ? (\n                      <button\n                        class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\n                        type=\"button\"\n                        onClick={() => this.dsClear.emit()}\n                      >\n                        <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                          {this.clearLabel}\n                        </ds-text>\n                      </button>\n                    ) : null}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"data-group__order-pane\">\n                {this.grouping ? (\n                  <ChoiceListSection\n                    heading=\"Order\"\n                    ariaLabel=\"Group order\"\n                    className=\"data-group__list\"\n                  >\n                    {this.activeOrderOptions.map((option, index) => (\n                      <div data-group-order-index={index}>{this.renderOrder(option, index)}</div>\n                    ))}\n                  </ChoiceListSection>\n                ) : (\n                  <div class=\"data-group__empty ds-choice-empty ds-empty-region\">\n                    <ds-empty-state body={this.emptyMessage} />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceListSection, ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport type { DataGroupingState, DataSortDirection } from '../Table/table-types';\n\nexport interface TableGroupOrderOption {\n  label: string;\n  direction: DataSortDirection;\n  /** Optional application-owned data point used to order the group sections. */\n  orderBy?: string;\n}\n\nexport interface DataGroupOption {\n  label: string;\n  value: string;\n  description?: string;\n  isInactive?: boolean;\n  /** Product-owned order choices for this grouping data point. */\n  orderOptions?: TableGroupOrderOption[];\n}\n\nconst DEFAULT_ORDER_OPTIONS: TableGroupOrderOption[] = [\n  { label: 'Ascending', direction: 'asc' },\n  { label: 'Descending', direction: 'desc' },\n];\n\nlet tableGroupSeq = 0;\n\n@Component({\n  tag: 'ds-data-group',\n  styleUrl: 'DataGroup.css',\n  scoped: true,\n})\nexport class DataGroup {\n  @Element() private el!: HTMLElement;\n\n  /** Product-owned data points that may group the table. */\n  /** Render content inside a parent-owned surface; the parent owns dismissal and positioning. */\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() vertical: boolean = false;\n  @Prop() embedded: boolean = false;\n  @Prop() options: DataGroupOption[] = [];\n  /** Controlled grouping field and the order of its group sections. */\n  @Prop() grouping: DataGroupingState | null = null;\n  /** Accessible name for the trigger and non-modal dialog. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Controlled popup visibility. */\n  @Prop({ mutable: true }) open = false;\n  /** Empty message kept in the order pane until a grouping data point is selected. */\n  @Prop() emptyMessage = 'Select a group to choose its order.';\n  /** Clear action label. */\n  @Prop() clearLabel = 'Clear';\n\n  /** Requests replacement of the complete controlled grouping state. */\n  @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n  /** Requests removal of the controlled grouping state. */\n  @Event() dsClear!: EventEmitter<void>;\n  /** Reports controlled popup visibility changes. */\n  @Event() dsOpenChange!: EventEmitter<boolean>;\n\n  @State() private shouldRender = false;\n  @State() private closing = false;\n  @State() private positionReady = false;\n  @State() private pos = { x: 0, y: 0 };\n  @State() private focusRingVisible = false;\n\n  private readonly componentId = `ds-data-group-${++tableGroupSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly popupId = `${this.componentId}-popup`;\n  private triggerElement: HTMLElement | null = null;\n  private pendingInitialFocusVisible = false;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private loaded = false;\n  private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.triggerElement,\n    getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_CSS_LENGTHS.space050, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: 'end',\n          alignOffsetPx: 0,\n          sectionInsetPx,\n        }),\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    observeResize: true,\n    topLayer: true,\n  });\n\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.triggerElement,\n    getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n\n  componentDidLoad() {\n    this.loaded = true;\n    if (this.open) this.onOpenChange(true);\n  }\n\n  connectedCallback() {\n    if (this.loaded && this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardown();\n    this.shouldRender = false;\n    this.closing = false;\n    this.positionReady = false;\n    this.pendingInitialFocusVisible = false;\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (this.embedded || !this.loaded || !this.el.isConnected) return;\n    if (isOpen) {\n      this.teardown();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.focusRingVisible = this.pendingInitialFocusVisible;\n      this.interaction.connect();\n      this.position.observe();\n      this.position.schedule(() => this.focusInitialDataPoint());\n      return;\n    }\n    if (!this.shouldRender || this.closing) return;\n    this.tasks.cancel();\n    this.position.cancel();\n    this.closing = true;\n    this.interaction.disconnect();\n    this.position.unobserve();\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort2,\n      TOKEN_DEFAULTS.animationDurationShort3\n    );\n    if (duration <= 0) this.finishClose();\n    else this.closeTimer = setTimeout(() => this.finishClose(), duration);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.embedded && (event.key === 'Escape' || event.key === 'Tab')) return;\n    if ((!this.shouldRender && !this.embedded) || this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n    if (event.key !== 'Tab' || !this.interaction.tabLeavesPopup(event)) return;\n    event.preventDefault();\n    this.close(false);\n    this.interaction.moveFocusAfterTab(event.shiftKey);\n  }\n\n  private get popupFallbackWidth(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n  }\n\n  private get popupFallbackHeight(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private teardown() {\n    this.tasks.cancel();\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private toggle(fromKeyboard = false) {\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.pendingInitialFocusVisible = fromKeyboard;\n    this.open = true;\n    this.dsOpenChange.emit(true);\n    this.onOpenChange(true);\n  }\n\n  private close(restoreFocus = true) {\n    if (restoreFocus) this.interaction.focusAnchor();\n    this.open = false;\n    this.dsOpenChange.emit(false);\n    this.onOpenChange(false);\n  }\n\n  private finishClose() {\n    if (this.open || !this.closing || !this.el.isConnected) return;\n    const popup = this.el.querySelector<HTMLElement>('.data-group-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.closeTimer = null;\n  }\n\n  private focusInitialDataPoint() {\n    this.tasks.frame(() => {\n      if (!this.open || this.closing) return;\n      const selected = this.grouping\n        ? this.el.querySelector<HTMLElement>(\n            `[data-group-value=\"${CSS.escape(this.grouping.fieldId)}\"] [role=\"option\"]`\n          )\n        : null;\n      const initial =\n        selected ??\n        this.el.querySelector<HTMLElement>(\n          '[data-group-value] [role=\"option\"]:not([aria-disabled=\"true\"])'\n        );\n      initial?.focus();\n      this.pendingInitialFocusVisible = false;\n    });\n  }\n\n  private selectData(option: DataGroupOption) {\n    if (option.value === '__none__') {\n      this.dsClear.emit();\n      return;\n    }\n    if (option.isInactive) return;\n    if (this.grouping?.fieldId === option.value) {\n      this.dsGroupChange.emit({ ...this.grouping });\n      return;\n    }\n    const initialOrder = option.orderOptions?.[0];\n    this.dsGroupChange.emit({\n      fieldId: option.value,\n      direction: initialOrder?.direction ?? 'asc',\n      ...(initialOrder?.orderBy ? { orderBy: initialOrder.orderBy } : {}),\n    });\n  }\n\n  private get activeOrderOptions(): TableGroupOrderOption[] {\n    const configured = this.options.find(\n      option => option.value === this.grouping?.fieldId\n    )?.orderOptions;\n    return configured?.length ? configured : DEFAULT_ORDER_OPTIONS;\n  }\n\n  private get selectedOrderIndex(): number {\n    if (!this.grouping) return -1;\n    const exact = this.activeOrderOptions.findIndex(\n      option =>\n        option.direction === this.grouping?.direction && option.orderBy === this.grouping?.orderBy\n    );\n    if (exact >= 0) return exact;\n    if (this.grouping.orderBy === undefined) {\n      return this.activeOrderOptions.findIndex(\n        option => option.direction === this.grouping?.direction\n      );\n    }\n    return -1;\n  }\n\n  private selectOrder(option: TableGroupOrderOption, index: number) {\n    if (!this.grouping || this.selectedOrderIndex === index) return;\n    const grouping: DataGroupingState = {\n      fieldId: this.grouping.fieldId,\n      direction: option.direction,\n    };\n    if (option.orderBy) grouping.orderBy = option.orderBy;\n    this.dsGroupChange.emit(grouping);\n  }\n\n  private moveFocus(\n    event: KeyboardEvent,\n    selector: string,\n    currentIndex: number,\n    oppositeSelector?: string\n  ) {\n    if (oppositeSelector && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\n      event.preventDefault();\n      this.focusRingVisible = true;\n      this.el.querySelector<HTMLElement>(oppositeSelector)?.focus();\n      return;\n    }\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n    event.preventDefault();\n    const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector)).filter(\n      item => item.getAttribute('aria-disabled') !== 'true'\n    );\n    if (!items.length) return;\n    let next: number;\n    if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = items.length - 1;\n    else next = (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;\n    this.focusRingVisible = true;\n    items[next]?.focus();\n  }\n\n  private renderDataOption(option: DataGroupOption, index: number) {\n    const selected =\n      option.value === '__none__' ? !this.grouping : option.value === this.grouping?.fieldId;\n    return (\n      <ChoiceOptionRow\n        id={`${this.componentId}-data-${index}`}\n        option={{ ...option }}\n        selected={selected}\n        active={selected}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={Boolean(option.description)}\n        tabIndex={selected || (!this.grouping && index === 0) ? 0 : -1}\n        onHover={() => {\n          this.focusRingVisible = false;\n        }}\n        onSelect={() => this.selectData(option)}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.selectData(option);\n            return;\n          }\n          this.moveFocus(\n            event,\n            '[data-group-value] [role=\"option\"]',\n            this.options\n              .filter(candidate => !candidate.isInactive)\n              .findIndex(candidate => candidate.value === option.value),\n            this.grouping\n              ? `[data-group-order-index=\"${this.selectedOrderIndex}\"] [role=\"option\"]`\n              : undefined\n          );\n        }}\n      />\n    );\n  }\n\n  private renderOrder(option: TableGroupOrderOption, index: number) {\n    const selected = index === this.selectedOrderIndex;\n    return (\n      <ChoiceOptionRow\n        id={`${this.componentId}-order-${index}`}\n        option={{ label: option.label, value: String(index) }}\n        selected={selected}\n        active={selected}\n        focusRingVisible={this.focusRingVisible}\n        usesSubtext={false}\n        tabIndex={selected ? 0 : -1}\n        onHover={() => {\n          this.focusRingVisible = false;\n        }}\n        onSelect={() => this.selectOrder(option, index)}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            this.selectOrder(option, index);\n            return;\n          }\n          this.moveFocus(\n            event,\n            '[data-group-order-index] [role=\"option\"]',\n            index,\n            `[data-group-value=\"${CSS.escape(this.grouping?.fieldId ?? '')}\"] [role=\"option\"]`\n          );\n        }}\n      />\n    );\n  }\n\n  render() {\n    const name = this.ariaLabel?.trim() || 'Group table';\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    return (\n      <Host\n        class={{ 'data-group-vertical': this.vertical }}\n        hidden={this.options.length === 0 ? true : undefined}\n      >\n        {this.options.length && !this.embedded ? (\n          <ds-button-unfilled\n            hasBorder={this.hasBorder}\n            ref={element => {\n              this.triggerElement = (element as HTMLElement) ?? null;\n            }}\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"SectionList\"\n            label=\"Group\"\n            labelEmphasis={false}\n            pressScale={false}\n            aria-label={name}\n            haspopup=\"dialog\"\n            collapseLabel={true}\n            expanded={this.open}\n            surfaceOpen={this.open || this.closing}\n            controls={this.popupId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => this.toggle(event.detail.detail === 0)}\n          />\n        ) : null}\n\n        {this.shouldRender || this.embedded ? (\n          <div\n            id={this.popupId}\n            popover={this.embedded ? undefined : 'manual'}\n            class={{\n              'data-group-popup': true,\n              'ds-choice-popup': !this.embedded,\n              'data-preferences-embedded': this.embedded,\n              'ds-choice-popup--closing': this.closing,\n            }}\n            style={this.embedded ? undefined : popupStyle}\n            role=\"dialog\"\n            aria-label={name}\n          >\n            <div class=\"data-group__body\">\n              <div class=\"data-group__data-pane\">\n                <ChoiceListSection\n                  heading=\"Data\"\n                  ariaLabel=\"Group data\"\n                  className=\"data-group__list\"\n                >\n                  {this.vertical &&\n                    this.renderDataOption({ label: 'No grouping', value: '__none__' }, -1)}\n                  {this.options.map((option, index) => (\n                    <div data-group-value={option.value}>\n                      {this.renderDataOption(option, index)}\n                    </div>\n                  ))}\n                </ChoiceListSection>\n                <div\n                  hidden={this.vertical}\n                  class=\"data-group__footer ds-choice-footer\"\n                  aria-hidden={!this.grouping ? 'true' : undefined}\n                >\n                  <div class=\"ds-choice-footer__content ds-control--md\">\n                    {this.grouping ? (\n                      <button\n                        class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\n                        type=\"button\"\n                        onClick={() => this.dsClear.emit()}\n                      >\n                        <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                          {this.clearLabel}\n                        </ds-text>\n                      </button>\n                    ) : null}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"data-group__order-pane\">\n                {this.grouping ? (\n                  <ChoiceListSection\n                    heading=\"Order\"\n                    ariaLabel=\"Group order\"\n                    className=\"data-group__list\"\n                  >\n                    {this.activeOrderOptions.map((option, index) => (\n                      <div data-group-order-index={index}>{this.renderOrder(option, index)}</div>\n                    ))}\n                  </ChoiceListSection>\n                ) : (\n                  <div class=\"data-group__empty ds-choice-empty ds-empty-region\">\n                    <ds-empty-state body={this.emptyMessage} />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -584,7 +584,7 @@
     },
     {
       "path": "src/wc/components/DataPreferences/DataPreferences.tsx",
-      "content": "import type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type {\n  FilterMenuFilter,\n  FilterMenuValues,\n  FilterMenuMatchModes,\n  FilterMenuChangeDetail,\n  FilterMenuMatchModeChangeDetail,\n} from '../FilterMenu/FilterMenu';\nimport type {\n  TableColumn,\n  DataSortState,\n  DataSortChangeDetail,\n  DataGroupingState,\n  DataFieldsConfigChangeDetail,\n} from '../Table/table-types';\nimport type { DataGroupOption } from '../DataGroup/DataGroup';\nimport { dataSortMenuSections, nextDataSortStateFromMenuItem } from '../DataSort/data-sort-menu';\nimport {\n  tableColumnCustomizerLabel,\n  tableColumnCustomizerMenuItems,\n  tableDataColumns,\n  toggleTableColumnHidden,\n  resolveTableColumnOrder,\n} from '../Table/table-column-customizer';\nimport {\n  listCustomizerMenuItems,\n  resolveListOrder,\n  toggleListHidden,\n  type ListCustomizerOptions,\n} from '../../utils/list-customizer';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { TOKEN_DEFAULTS } from '../../utils/token-defaults';\n\n/** Toggle-only catalog: every entry may hide and no row carries a drag handle. */\nconst TOGGLE_ONLY_CATALOG: ListCustomizerOptions = { minVisible: 0, reorderable: false };\n\nexport type PreferencesTab = 'filters' | 'sort' | 'group' | 'customize';\nlet preferencesSequence = 0;\n\n@Component({ tag: 'ds-data-preferences', styleUrl: 'DataPreferences.css', scoped: true })\nexport class DataPreferences {\n  @Element() el!: HTMLElement;\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() filters: FilterMenuFilter[] = [];\n  @Prop() values: FilterMenuValues = {};\n  @Prop() matchModes: FilterMenuMatchModes = {};\n  @Prop() activeFilterId: string | undefined;\n  @Prop() fields: DataField[] = [];\n  /** Additional toggle options in the column customizer. */\n  @Prop() customizeOptions: MenuItemData[] = [];\n  @Prop() customizeSections: MenuSection[] = [];\n  /** Accessible name for the Customize menu. */\n  @Prop() customizeLabel: string = 'Customize table';\n  /**\n   * Section header above the catalog rows. Defaults to Columns when\n   * customizeOptions supply a second section, matching the table.\n   */\n  @Prop() catalogHeader?: string;\n  /**\n   * Drag-reorder the catalog rows and keep the last visible entry locked, as a\n   * table requires. Pass false for a catalog that only shows and hides, where\n   * every entry may be hidden and rows carry no drag handle.\n   */\n  @Prop() catalogReorderable: boolean = true;\n  @Event() dsCustomizeOptionChange!: EventEmitter<string>;\n  /** Optional sort fields when they differ from customizable content. */\n  @Prop() sortColumns?: TableColumn[];\n  @Prop() sort: DataSortState | null = null;\n  @Prop() groupingOptions: DataGroupOption[] = [];\n  @Prop() grouping: DataGroupingState | null = null;\n  @Prop() hiddenFieldIds: string[] = [];\n  @Prop() fieldOrder: string[] = [];\n  /** Render shared content without its popup or trigger. */\n  @Prop() embedded = false;\n  @Prop() activeTab: PreferencesTab = 'filters';\n  @Event() dsPreferencesTabChange!: EventEmitter<PreferencesTab>;\n  @Prop() label = 'Configure view';\n  @Event() dsFilterChange!: EventEmitter<FilterMenuChangeDetail>;\n  @Event() dsFilterMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\n  @Event() dsActiveFilterChange!: EventEmitter<string>;\n  @Event() dsFiltersClear!: EventEmitter<void>;\n  @Event() dsSortChange!: EventEmitter<DataSortChangeDetail>;\n  @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n  @Event() dsGroupClear!: EventEmitter<void>;\n  @Event() dsFieldsConfigChange!: EventEmitter<DataFieldsConfigChangeDetail>;\n\n  /** Catalog rows as domain-neutral items, so a non-table catalog needs no column shape. */\n  private catalogItems(): { id: string; label: string }[] {\n    return tableDataColumns(this.fields).map(column => ({\n      id: column.id,\n      label: tableColumnCustomizerLabel(column),\n    }));\n  }\n  @State() private open = false;\n  @State() private tab: PreferencesTab = 'filters';\n  @State() private pos = { x: 0, y: 0 };\n  @State() private ready = false;\n  private readonly popupId = `ds-data-preferences-${++preferencesSequence}`;\n  private trigger?: HTMLDsButtonUnfilledElement;\n  private popup?: HTMLElement;\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.trigger ?? null,\n    getPopup: () => this.popup ?? null,\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      const collisionRect = resolveAnchoredOverlayBoundaryRect(anchor);\n      const pad = resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8);\n      popup.style.maxWidth = `${Math.max(0, Math.min(window.innerWidth, collisionRect?.width ?? window.innerWidth) - pad * 2)}px`;\n      popup.style.maxHeight = `${Math.max(0, Math.min(window.innerHeight, collisionRect?.height ?? window.innerHeight) - pad * 2)}px`;\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth,\n        popupHeight: popup.offsetHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, 4),\n        alignOffsetPx: 0,\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.ready = true;\n    },\n    topLayer: true,\n    observeResize: true,\n    observeAnchorMotion: true,\n    liveUpdate: 'double-frame',\n  });\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.trigger ?? null,\n    getPopup: () => this.popup ?? null,\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n  }\n  private close() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.popup?.matches(':popover-open')) this.popup.hidePopover();\n    this.open = false;\n    void this.trigger?.setFocus();\n  }\n  private toggle() {\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.open = true;\n    this.ready = false;\n    this.position.observe();\n    this.interaction.connect();\n    this.position.schedule(async () => {\n      await this.popup?.querySelector('ds-tab-group')?.componentOnReady?.();\n      requestAnimationFrame(() => {\n        if (this.open)\n          this.popup?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')?.focus();\n      });\n    });\n  }\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent) {\n    if (this.embedded || !this.open || event.defaultPrevented) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close();\n    } else if (event.key === 'Tab' && this.interaction.tabLeavesPopup(event)) {\n      event.preventDefault();\n      this.close();\n      this.interaction.moveFocusAfterTab(event.shiftKey);\n    }\n  }\n  private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>) {\n    event.stopPropagation();\n    emitter.emit(event.detail);\n  }\n  render() {\n    const currentTab = this.embedded ? this.activeTab : this.tab;\n    const tabs = ['filters', 'sort', 'group', 'customize'].map(id => ({\n      id,\n      label: id === 'filters' ? 'Filters' : id[0].toUpperCase() + id.slice(1),\n      panelId: `${this.popupId}-${id}`,\n    }));\n    return (\n      <Host>\n        {!this.embedded && (\n          <ds-tooltip label={this.label} side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              hasBorder={this.hasBorder}\n              ref={el => {\n                this.trigger = el;\n              }}\n              variant=\"icon\"\n              icon=\"Preferences\"\n              size=\"md\"\n              ariaLabel={this.label}\n              haspopup=\"dialog\"\n              expanded={this.open}\n              surfaceOpen={this.open}\n              controls={this.popupId}\n              onDsClick={() => this.toggle()}\n            />\n          </ds-tooltip>\n        )}\n        {(this.open || this.embedded) && (\n          <div\n            ref={el => {\n              this.popup = el;\n            }}\n            id={this.popupId}\n            popover={this.embedded ? undefined : 'manual'}\n            role={this.embedded ? undefined : 'dialog'}\n            aria-label={this.label}\n            class={{\n              'data-preferences': !this.embedded,\n              'data-preferences-panel': this.embedded,\n            }}\n            style={\n              this.embedded\n                ? undefined\n                : {\n                    left: `${this.pos.x}px`,\n                    top: `${this.pos.y}px`,\n                    visibility: this.ready ? 'visible' : 'hidden',\n                  }\n            }\n          >\n            <div class=\"data-preferences__tabs\">\n              <ds-tab-group\n                ariaLabel=\"Table preference sections\"\n                size=\"md\"\n                presentation={this.embedded ? 'segmented' : 'tabs'}\n                width={this.embedded ? 'fill' : 'hug'}\n                tabs={tabs}\n                value={currentTab}\n                onDsChange={event => {\n                  event.stopPropagation();\n                  this.tab = event.detail as PreferencesTab;\n                  this.dsPreferencesTabChange.emit(this.tab);\n                }}\n              />\n            </div>\n            <div\n              class=\"data-preferences__body\"\n              id={`${this.popupId}-${currentTab}`}\n              role=\"tabpanel\"\n              aria-label={tabs.find(tab => tab.id === currentTab)?.label}\n            >\n              <div hidden={currentTab !== 'filters'}>\n                <ds-filter-menu\n                  embedded\n                  vertical={this.embedded}\n                  applyRequired={!this.embedded}\n                  filters={this.filters}\n                  values={this.values}\n                  matchModes={this.matchModes}\n                  activeFilterId={this.activeFilterId}\n                  footerLayout=\"categories-clear\"\n                  onDsChange={e => this.forward(e, this.dsFilterChange)}\n                  onDsMatchModeChange={e => this.forward(e, this.dsFilterMatchModeChange)}\n                  onDsActiveFilterChange={e => this.forward(e, this.dsActiveFilterChange)}\n                  onDsClear={e => this.forward(e, this.dsFiltersClear)}\n                />\n              </div>\n              {currentTab === 'sort' && (\n                <ds-menu\n                  embedded\n                  menuLabel=\"Sort table\"\n                  sections={dataSortMenuSections(this.sortColumns ?? this.fields, this.sort)}\n                  onDsSelect={e => {\n                    e.stopPropagation();\n                    this.dsSortChange.emit({\n                      sort: nextDataSortStateFromMenuItem(\n                        this.sortColumns ?? this.fields,\n                        this.sort,\n                        e.detail\n                      ),\n                    });\n                  }}\n                />\n              )}\n              {currentTab === 'group' && (\n                <ds-data-group\n                  embedded\n                  vertical={this.embedded}\n                  options={this.groupingOptions}\n                  grouping={this.grouping}\n                  onDsGroupChange={e => this.forward(e, this.dsGroupChange)}\n                  onDsClear={e => this.forward(e, this.dsGroupClear)}\n                />\n              )}\n              {currentTab === 'customize' && (\n                <ds-menu\n                  embedded\n                  menuLabel={this.customizeLabel}\n                  sections={[\n                    ...(this.fields.length\n                      ? [\n                          {\n                            header:\n                              this.catalogHeader ??\n                              (this.customizeOptions.length ? 'Columns' : undefined),\n                            items: this.catalogReorderable\n                              ? tableColumnCustomizerMenuItems(\n                                  this.fields,\n                                  this.hiddenFieldIds,\n                                  this.fieldOrder\n                                )\n                              : listCustomizerMenuItems(\n                                  this.catalogItems(),\n                                  this.hiddenFieldIds,\n                                  this.fieldOrder,\n                                  TOGGLE_ONLY_CATALOG\n                                ),\n                          },\n                        ]\n                      : []),\n                    ...this.customizeSections,\n                    ...(this.customizeOptions.length\n                      ? [{ header: 'Options', items: this.customizeOptions }]\n                      : []),\n                  ]}\n                  onDsSelect={e => {\n                    e.stopPropagation();\n                    if (!e.detail.value || e.detail.isInactive) return;\n                    if (\n                      [\n                        ...this.customizeOptions,\n                        ...this.customizeSections.flatMap(section =>\n                          'items' in section ? section.items : []\n                        ),\n                      ].some(option => option.value === e.detail.value)\n                    ) {\n                      this.dsCustomizeOptionChange.emit(e.detail.value);\n                      return;\n                    }\n                    if (!this.catalogReorderable) {\n                      const ids = this.catalogItems().map(item => item.id);\n                      this.dsFieldsConfigChange.emit({\n                        hiddenFieldIds: toggleListHidden(\n                          ids,\n                          this.hiddenFieldIds,\n                          e.detail.value,\n                          TOGGLE_ONLY_CATALOG\n                        ),\n                        fieldOrder: resolveListOrder(ids, this.fieldOrder),\n                      });\n                      return;\n                    }\n                    this.dsFieldsConfigChange.emit({\n                      hiddenFieldIds: toggleTableColumnHidden(\n                        this.fields,\n                        this.hiddenFieldIds,\n                        e.detail.value\n                      ),\n                      fieldOrder: resolveTableColumnOrder(this.fields, this.fieldOrder),\n                    });\n                  }}\n                  onDsReorder={e => {\n                    e.stopPropagation();\n                    if (!this.catalogReorderable) return;\n                    this.dsFieldsConfigChange.emit({\n                      hiddenFieldIds: this.hiddenFieldIds,\n                      fieldOrder: e.detail.items\n                        .filter(item => item.reorderable)\n                        .map(item => item.value!)\n                        .filter(Boolean),\n                    });\n                  }}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import type { DataField } from '../../utils/data-field';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type {\n  FilterMenuFilter,\n  FilterMenuValues,\n  FilterMenuMatchModes,\n  FilterMenuChangeDetail,\n  FilterMenuMatchModeChangeDetail,\n} from '../FilterMenu/FilterMenu';\nimport type {\n  TableColumn,\n  DataSortState,\n  DataSortChangeDetail,\n  DataGroupingState,\n  DataFieldsConfigChangeDetail,\n} from '../Table/table-types';\nimport type { DataGroupOption } from '../DataGroup/DataGroup';\nimport { dataSortMenuSections, nextDataSortStateFromMenuItem } from '../DataSort/data-sort-menu';\nimport {\n  tableColumnCustomizerLabel,\n  tableColumnCustomizerMenuItems,\n  tableDataColumns,\n  toggleTableColumnHidden,\n  resolveTableColumnOrder,\n} from '../Table/table-column-customizer';\nimport {\n  listCustomizerMenuItems,\n  resolveListOrder,\n  toggleListHidden,\n  type ListCustomizerOptions,\n} from '../../utils/list-customizer';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport { TOKEN_DEFAULTS } from '../../utils/token-defaults';\n\n/** Toggle-only catalog: every entry may hide and no row carries a drag handle. */\nconst TOGGLE_ONLY_CATALOG: ListCustomizerOptions = { minVisible: 0, reorderable: false };\n\nexport type PreferencesTab = 'filters' | 'sort' | 'group' | 'customize';\nlet preferencesSequence = 0;\n\n@Component({ tag: 'ds-data-preferences', styleUrl: 'DataPreferences.css', scoped: true })\nexport class DataPreferences {\n  @Element() el!: HTMLElement;\n  /** Show the trigger border. */\n  @Prop() hasBorder: boolean = true;\n  @Prop() filters: FilterMenuFilter[] = [];\n  @Prop() values: FilterMenuValues = {};\n  @Prop() matchModes: FilterMenuMatchModes = {};\n  @Prop() activeFilterId: string | undefined;\n  @Prop() fields: DataField[] = [];\n  /** Additional toggle options in the column customizer. */\n  @Prop() customizeOptions: MenuItemData[] = [];\n  @Prop() customizeSections: MenuSection[] = [];\n  /** Accessible name for the Customize menu. */\n  @Prop() customizeLabel: string = 'Customize table';\n  /**\n   * Section header above the catalog rows. Defaults to Columns when\n   * customizeOptions supply a second section, matching the table.\n   */\n  @Prop() catalogHeader?: string;\n  /**\n   * Drag-reorder the catalog rows and keep the last visible entry locked, as a\n   * table requires. Pass false for a catalog that only shows and hides, where\n   * every entry may be hidden and rows carry no drag handle.\n   */\n  @Prop() catalogReorderable: boolean = true;\n  @Event() dsCustomizeOptionChange!: EventEmitter<string>;\n  /** Optional sort fields when they differ from customizable content. */\n  @Prop() sortColumns?: TableColumn[];\n  @Prop() sort: DataSortState | null = null;\n  @Prop() groupingOptions: DataGroupOption[] = [];\n  @Prop() grouping: DataGroupingState | null = null;\n  @Prop() hiddenFieldIds: string[] = [];\n  @Prop() fieldOrder: string[] = [];\n  /** Render shared content without its popup or trigger. */\n  @Prop() embedded = false;\n  @Prop() activeTab: PreferencesTab = 'filters';\n  @Event() dsPreferencesTabChange!: EventEmitter<PreferencesTab>;\n  @Prop() label = 'Configure view';\n  @Event() dsFilterChange!: EventEmitter<FilterMenuChangeDetail>;\n  @Event() dsFilterMatchModeChange!: EventEmitter<FilterMenuMatchModeChangeDetail>;\n  @Event() dsActiveFilterChange!: EventEmitter<string>;\n  @Event() dsFiltersClear!: EventEmitter<void>;\n  @Event() dsSortChange!: EventEmitter<DataSortChangeDetail>;\n  @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n  @Event() dsGroupClear!: EventEmitter<void>;\n  @Event() dsFieldsConfigChange!: EventEmitter<DataFieldsConfigChangeDetail>;\n\n  /** Catalog rows as domain-neutral items, so a non-table catalog needs no column shape. */\n  private catalogItems(): { id: string; label: string }[] {\n    return tableDataColumns(this.fields).map(column => ({\n      id: column.id,\n      label: tableColumnCustomizerLabel(column),\n    }));\n  }\n  @State() private open = false;\n  @State() private tab: PreferencesTab = 'filters';\n  @State() private pos = { x: 0, y: 0 };\n  @State() private ready = false;\n  private readonly popupId = `ds-data-preferences-${++preferencesSequence}`;\n  private trigger?: HTMLDsButtonUnfilledElement;\n  private popup?: HTMLElement;\n  private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.trigger ?? null,\n    getPopup: () => this.popup ?? null,\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      const collisionRect = resolveAnchoredOverlayBoundaryRect(anchor);\n      const pad = resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8);\n      popup.style.maxWidth = `${Math.max(0, Math.min(window.innerWidth, collisionRect?.width ?? window.innerWidth) - pad * 2)}px`;\n      popup.style.maxHeight = `${Math.max(0, Math.min(window.innerHeight, collisionRect?.height ?? window.innerHeight) - pad * 2)}px`;\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth,\n        popupHeight: popup.offsetHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, 4),\n        alignOffsetPx: 0,\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space100, 8),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.ready = true;\n    },\n    topLayer: true,\n    observeResize: true,\n    observeAnchorMotion: true,\n    liveUpdate: 'double-frame',\n  });\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.trigger ?? null,\n    getPopup: () => this.popup ?? null,\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close(),\n  });\n  disconnectedCallback() {\n    this.close(false);\n  }\n  private close(restoreFocus = true) {\n    this.tasks.cancel();\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.popup?.matches(':popover-open')) this.popup.hidePopover();\n    this.open = false;\n    this.ready = false;\n    if (restoreFocus) void this.trigger?.setFocus();\n  }\n  private toggle() {\n    if (!this.el.isConnected) return;\n    if (this.open) {\n      this.close();\n      return;\n    }\n    this.open = true;\n    this.ready = false;\n    this.position.observe();\n    this.interaction.connect();\n    this.position.schedule(async () => {\n      const focus = this.tasks.guard(() => {\n        this.tasks.frame(() => {\n          if (this.open)\n            this.popup?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')?.focus();\n        });\n      });\n      await this.popup?.querySelector('ds-tab-group')?.componentOnReady?.();\n      focus();\n    });\n  }\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent) {\n    if (this.embedded || !this.open || event.defaultPrevented) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close();\n    } else if (event.key === 'Tab' && this.interaction.tabLeavesPopup(event)) {\n      event.preventDefault();\n      this.close();\n      this.interaction.moveFocusAfterTab(event.shiftKey);\n    }\n  }\n  private forward<T>(event: CustomEvent<T>, emitter: EventEmitter<T>) {\n    event.stopPropagation();\n    emitter.emit(event.detail);\n  }\n  render() {\n    const currentTab = this.embedded ? this.activeTab : this.tab;\n    const tabs = ['filters', 'sort', 'group', 'customize'].map(id => ({\n      id,\n      label: id === 'filters' ? 'Filters' : id[0].toUpperCase() + id.slice(1),\n      panelId: `${this.popupId}-${id}`,\n    }));\n    return (\n      <Host>\n        {!this.embedded && (\n          <ds-tooltip label={this.label} side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              hasBorder={this.hasBorder}\n              ref={el => {\n                this.trigger = el;\n              }}\n              variant=\"icon\"\n              icon=\"Preferences\"\n              size=\"md\"\n              ariaLabel={this.label}\n              haspopup=\"dialog\"\n              expanded={this.open}\n              surfaceOpen={this.open}\n              controls={this.popupId}\n              onDsClick={() => this.toggle()}\n            />\n          </ds-tooltip>\n        )}\n        {(this.open || this.embedded) && (\n          <div\n            ref={el => {\n              this.popup = el;\n            }}\n            id={this.popupId}\n            popover={this.embedded ? undefined : 'manual'}\n            role={this.embedded ? undefined : 'dialog'}\n            aria-label={this.label}\n            class={{\n              'data-preferences': !this.embedded,\n              'data-preferences-panel': this.embedded,\n            }}\n            style={\n              this.embedded\n                ? undefined\n                : {\n                    left: `${this.pos.x}px`,\n                    top: `${this.pos.y}px`,\n                    visibility: this.ready ? 'visible' : 'hidden',\n                  }\n            }\n          >\n            <div class=\"data-preferences__tabs\">\n              <ds-tab-group\n                ariaLabel=\"Table preference sections\"\n                size=\"md\"\n                presentation={this.embedded ? 'segmented' : 'tabs'}\n                width={this.embedded ? 'fill' : 'hug'}\n                tabs={tabs}\n                value={currentTab}\n                onDsChange={event => {\n                  event.stopPropagation();\n                  this.tab = event.detail as PreferencesTab;\n                  this.dsPreferencesTabChange.emit(this.tab);\n                }}\n              />\n            </div>\n            <div\n              class=\"data-preferences__body\"\n              id={`${this.popupId}-${currentTab}`}\n              role=\"tabpanel\"\n              aria-label={tabs.find(tab => tab.id === currentTab)?.label}\n            >\n              <div hidden={currentTab !== 'filters'}>\n                <ds-filter-menu\n                  embedded\n                  vertical={this.embedded}\n                  applyRequired={!this.embedded}\n                  filters={this.filters}\n                  values={this.values}\n                  matchModes={this.matchModes}\n                  activeFilterId={this.activeFilterId}\n                  footerLayout=\"categories-clear\"\n                  onDsChange={e => this.forward(e, this.dsFilterChange)}\n                  onDsMatchModeChange={e => this.forward(e, this.dsFilterMatchModeChange)}\n                  onDsActiveFilterChange={e => this.forward(e, this.dsActiveFilterChange)}\n                  onDsClear={e => this.forward(e, this.dsFiltersClear)}\n                />\n              </div>\n              {currentTab === 'sort' && (\n                <ds-menu\n                  embedded\n                  menuLabel=\"Sort table\"\n                  sections={dataSortMenuSections(this.sortColumns ?? this.fields, this.sort)}\n                  onDsSelect={e => {\n                    e.stopPropagation();\n                    this.dsSortChange.emit({\n                      sort: nextDataSortStateFromMenuItem(\n                        this.sortColumns ?? this.fields,\n                        this.sort,\n                        e.detail\n                      ),\n                    });\n                  }}\n                />\n              )}\n              {currentTab === 'group' && (\n                <ds-data-group\n                  embedded\n                  vertical={this.embedded}\n                  options={this.groupingOptions}\n                  grouping={this.grouping}\n                  onDsGroupChange={e => this.forward(e, this.dsGroupChange)}\n                  onDsClear={e => this.forward(e, this.dsGroupClear)}\n                />\n              )}\n              {currentTab === 'customize' && (\n                <ds-menu\n                  embedded\n                  menuLabel={this.customizeLabel}\n                  sections={[\n                    ...(this.fields.length\n                      ? [\n                          {\n                            header:\n                              this.catalogHeader ??\n                              (this.customizeOptions.length ? 'Columns' : undefined),\n                            items: this.catalogReorderable\n                              ? tableColumnCustomizerMenuItems(\n                                  this.fields,\n                                  this.hiddenFieldIds,\n                                  this.fieldOrder\n                                )\n                              : listCustomizerMenuItems(\n                                  this.catalogItems(),\n                                  this.hiddenFieldIds,\n                                  this.fieldOrder,\n                                  TOGGLE_ONLY_CATALOG\n                                ),\n                          },\n                        ]\n                      : []),\n                    ...this.customizeSections,\n                    ...(this.customizeOptions.length\n                      ? [{ header: 'Options', items: this.customizeOptions }]\n                      : []),\n                  ]}\n                  onDsSelect={e => {\n                    e.stopPropagation();\n                    if (!e.detail.value || e.detail.isInactive) return;\n                    if (\n                      [\n                        ...this.customizeOptions,\n                        ...this.customizeSections.flatMap(section =>\n                          'items' in section ? section.items : []\n                        ),\n                      ].some(option => option.value === e.detail.value)\n                    ) {\n                      this.dsCustomizeOptionChange.emit(e.detail.value);\n                      return;\n                    }\n                    if (!this.catalogReorderable) {\n                      const ids = this.catalogItems().map(item => item.id);\n                      this.dsFieldsConfigChange.emit({\n                        hiddenFieldIds: toggleListHidden(\n                          ids,\n                          this.hiddenFieldIds,\n                          e.detail.value,\n                          TOGGLE_ONLY_CATALOG\n                        ),\n                        fieldOrder: resolveListOrder(ids, this.fieldOrder),\n                      });\n                      return;\n                    }\n                    this.dsFieldsConfigChange.emit({\n                      hiddenFieldIds: toggleTableColumnHidden(\n                        this.fields,\n                        this.hiddenFieldIds,\n                        e.detail.value\n                      ),\n                      fieldOrder: resolveTableColumnOrder(this.fields, this.fieldOrder),\n                    });\n                  }}\n                  onDsReorder={e => {\n                    e.stopPropagation();\n                    if (!this.catalogReorderable) return;\n                    this.dsFieldsConfigChange.emit({\n                      hiddenFieldIds: this.hiddenFieldIds,\n                      fieldOrder: e.detail.items\n                        .filter(item => item.reorderable)\n                        .map(item => item.value!)\n                        .filter(Boolean),\n                    });\n                  }}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]