@ds-mo/ui 15.4.0 → 15.5.0

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

@@ -276,7 +276,7 @@
     },
     {
       "path": "src/wc/components/TooltipChart/TooltipChart.tsx",
-      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveCssTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipChartSide = 'left' | 'right';\nexport type TooltipChartAlign = 'top' | 'bottom';\n\nexport interface TooltipChartItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * polar arc, …). A composition may suppress it when a visible legend already\n * surfaces the same value.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-chart',\n  styleUrl: 'TooltipChart.css',\n  scoped: true,\n})\nexport class TooltipChart {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Optional heading for grouped chart focus. */\n  @Prop() heading?: string;\n  /** Multi-row content. When supplied, this replaces the legacy label/value row. */\n  @Prop() items?: TooltipChartItem[];\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipChartSide = 'right';\n  @State() private align: TooltipChartAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipChartSide =\n      rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipChartAlign =\n      rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX =\n      this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY =\n      this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const rows = this.items ?? [{ label: this.label, value: this.value }];\n    const usesSwatches = rows.some(item => Boolean(item.color));\n\n    return (\n      <Host\n        class={{\n          'tooltip-chart': true,\n          'tooltip-chart--visible': this.visible,\n          'ds-chrome-column': true,\n          'ds-chrome-space--sm': true,\n        }}\n        style={{\n          left: `${this.x}px`,\n          top: `${this.y}px`,\n          transform: `translate(${translateX}, ${translateY})`,\n        }}\n      >\n        {this.heading && (\n          <ds-text\n            class=\"tooltip-chart__heading ds-control-section-heading ds-control--md\"\n            as=\"span\"\n            variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n            emphasis\n            color=\"var(--color-foreground-primary)\"\n          >\n            {this.heading}\n          </ds-text>\n        )}\n        <div class=\"tooltip-chart__items\">\n          {rows.map((item, index) => (\n            <div\n              class=\"tooltip-chart__item ds-control-frame ds-control--md\"\n              key={`${item.label}-${index}`}\n            >\n              {usesSwatches && (\n                <span class=\"tooltip-chart__swatch-box ds-control-icon-box\" aria-hidden=\"true\">\n                  {item.color && (\n                    <span\n                      class=\"tooltip-chart__swatch\"\n                      style={{ '--ds-tooltip-chart-swatch': item.color }}\n                    />\n                  )}\n                </span>\n              )}\n              <ds-text\n                class=\"tooltip-chart__label ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                color=\"var(--color-foreground-secondary)\"\n              >\n                {item.label}\n              </ds-text>\n              <ds-text\n                class=\"tooltip-chart__value ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                emphasis\n                color=\"var(--color-foreground-primary)\"\n              >\n                {item.value}\n              </ds-text>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveCssTimeMs,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipChartSide = 'left' | 'right';\nexport type TooltipChartAlign = 'top' | 'bottom';\n\nexport interface TooltipChartItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * polar arc, …). A composition may suppress it when a visible legend already\n * surfaces the same value.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-chart',\n  styleUrl: 'TooltipChart.css',\n  scoped: true,\n})\nexport class TooltipChart {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Optional heading for grouped chart focus. */\n  @Prop() heading?: string;\n  /** Multi-row content. When supplied, this replaces the legacy label/value row. */\n  @Prop() items?: TooltipChartItem[];\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipChartSide = 'right';\n  @State() private align: TooltipChartAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private loaded = false;\n  private placementFrame?: number;\n  private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n  connectedCallback() {\n    if (!this.loaded) return;\n    this.scheduleShow();\n    this.onAnchorChange();\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n    this.tasks.cancel();\n    this.placementFrame = undefined;\n    this.visible = false;\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    this.tasks.cancelFrame(this.placementFrame);\n    this.placementFrame = this.tasks.frame(() => {\n      this.placementFrame = undefined;\n      this.calculatePlacement();\n    });\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    if (!this.el.isConnected) return;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(\n      this.tasks.guard(() => {\n        this.delayTimer = null;\n        this.visible = true;\n        this.onAnchorChange();\n      }),\n      ms\n    );\n  }\n\n  private calculatePlacement() {\n    if (!this.el.isConnected) return;\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipChartSide =\n      rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipChartAlign =\n      rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX =\n      this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY =\n      this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const rows = this.items ?? [{ label: this.label, value: this.value }];\n    const usesSwatches = rows.some(item => Boolean(item.color));\n\n    return (\n      <Host\n        class={{\n          'tooltip-chart': true,\n          'tooltip-chart--visible': this.visible,\n          'ds-chrome-column': true,\n          'ds-chrome-space--sm': true,\n        }}\n        style={{\n          left: `${this.x}px`,\n          top: `${this.y}px`,\n          transform: `translate(${translateX}, ${translateY})`,\n        }}\n      >\n        {this.heading && (\n          <ds-text\n            class=\"tooltip-chart__heading ds-control-section-heading ds-control--md\"\n            as=\"span\"\n            variant={CONTROL_SUPPORTING_TEXT_VARIANT.md}\n            emphasis\n            color=\"var(--color-foreground-primary)\"\n          >\n            {this.heading}\n          </ds-text>\n        )}\n        <div class=\"tooltip-chart__items\">\n          {rows.map((item, index) => (\n            <div\n              class=\"tooltip-chart__item ds-control-frame ds-control--md\"\n              key={`${item.label}-${index}`}\n            >\n              {usesSwatches && (\n                <span class=\"tooltip-chart__swatch-box ds-control-icon-box\" aria-hidden=\"true\">\n                  {item.color && (\n                    <span\n                      class=\"tooltip-chart__swatch\"\n                      style={{ '--ds-tooltip-chart-swatch': item.color }}\n                    />\n                  )}\n                </span>\n              )}\n              <ds-text\n                class=\"tooltip-chart__label ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                color=\"var(--color-foreground-secondary)\"\n              >\n                {item.label}\n              </ds-text>\n              <ds-text\n                class=\"tooltip-chart__value ds-control-label-box\"\n                as=\"span\"\n                variant={CONTROL_TEXT_VARIANT.md}\n                emphasis\n                color=\"var(--color-foreground-primary)\"\n              >\n                {item.value}\n              </ds-text>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/react/ds-table.d.ts

@@ -3,10 +3,12 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DataFieldsConfigChangeDetail, type DataSortChangeDetail, type DsTableCustomEvent, type PaginationChangeDetail, type TableCellActionDetail, type TableDataModeChangeDetail, type TableGroupCollapseChangeDetail, type TableGroupLoadMoreDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail } from "@ds-mo/ui";
+import { type DataFieldsConfigChangeDetail, type DataSortChangeDetail, type DsTableCustomEvent, type PaginationChangeDetail, type TableCellActionDetail, type TableCellRange, type TableCellsChangeDetail, type TableDataModeChangeDetail, type TableGroupCollapseChangeDetail, type TableGroupLoadMoreDetail, type TableLoadMoreDetail, type TableRowActivateDetail, type TableSelectionChangeDetail } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTable as DsTableElement } from "@ds-mo/ui/dist/components/ds-table.js";
 export type DsTableEvents = {
+    onDsCellRangeChange: EventName<DsTableCustomEvent<TableCellRange>>;
+    onDsCellsChange: EventName<DsTableCustomEvent<TableCellsChangeDetail>>;
     onDsCustomizeOptionChange: EventName<DsTableCustomEvent<string>>;
     onDsSortChange: EventName<DsTableCustomEvent<DataSortChangeDetail>>;
     onDsGroupCollapseChange: EventName<DsTableCustomEvent<TableGroupCollapseChangeDetail>>;

package/dist/react/ds-table.js

@@ -8,6 +8,8 @@ export const DsTable = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
+        onDsCellRangeChange: 'dsCellRangeChange',
+        onDsCellsChange: 'dsCellsChange',
         onDsCustomizeOptionChange: 'dsCustomizeOptionChange',
         onDsSortChange: 'dsSortChange',
         onDsGroupCollapseChange: 'dsGroupCollapseChange',

package/dist/styles/table.css

@@ -45,6 +45,7 @@
   --_table-border-strong: var(--ds-table-border-strong, var(--color-border-secondary));
   --_table-radius: var(--ds-table-radius, var(--ds-radius-table, var(--dimension-radius-050)));
   --_table-header-min-block-size: var(--ds-table-header-min-block-size, var(--dimension-size-400));
+  --_table-head-block-size: var(--_table-header-min-block-size);
   --_table-row-min-block-size: var(--ds-table-row-min-block-size, var(--dimension-size-500));
   --_table-cell-padding-block: var(--ds-table-cell-padding-block, var(--dimension-space-100));
   --_table-cell-padding-inline: var(--ds-table-cell-padding-inline, var(--dimension-space-100));
@@ -126,6 +127,12 @@
   outline: none;
 }
 
+/* The virtual controller owns anchoring while row identities recycle in place.
+ * Native anchoring can otherwise move the viewport back to a recycled row's old position. */
+:where(.ds-table__viewport:has(> .ds-table__table--windowed)) {
+  overflow-anchor: none;
+}
+
 :where(.ds-table--document-sticky-header .ds-table__viewport) {
   scrollbar-gutter: auto;
 }
@@ -453,8 +460,8 @@
   position: sticky;
   inset-block-start: var(--ds-table-sticky-header-offset, 0);
   z-index: 6;
-  block-size: var(--_table-header-min-block-size);
-  margin-block-end: calc(-1 * var(--_table-header-min-block-size));
+  block-size: var(--_table-head-block-size);
+  margin-block-end: calc(-1 * var(--_table-head-block-size));
   max-inline-size: 100%;
   overflow: hidden;
   border-radius: var(--_table-radius) var(--_table-radius) 0 0;
@@ -491,7 +498,7 @@
 }
 
 :where(.ds-table--contained-sticky-header .ds-table__sticky-group) {
-  inset-block-start: var(--_table-header-min-block-size);
+  inset-block-start: var(--_table-head-block-size);
   transform: translateY(var(--_table-sticky-group-push, 0));
   will-change: transform;
 }
@@ -505,7 +512,7 @@
 }
 
 :where(.ds-table__sticky-header-table) {
-  block-size: var(--_table-header-min-block-size);
+  block-size: var(--_table-head-block-size);
   transform: translate3d(calc(-1 * var(--ds-table-inline-scroll-offset, 0px)), 0, 0);
   will-change: transform;
 }
@@ -655,7 +662,9 @@
   border-inline-start: 0;
 }
 
-:where(.ds-table__header-cell + .ds-table__header-cell)::before {
+/* Row-spanned lanes break DOM adjacency; pinned edges below still own their divider. */
+:where(.ds-table__header-cell + .ds-table__header-cell)::before,
+:where(.ds-table__header-cell--after-rowspan)::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -1238,6 +1247,10 @@
 
 :where(.ds-table__row--disabled) {
   color: var(--color-foreground-tertiary);
+}
+
+:where(.ds-table__row--disabled .ds-table__cell-content),
+:where(.ds-table__cell[data-cell-editable='false'] .ds-table__cell-content) {
   opacity: var(--effect-opacity-medium);
 }
 
@@ -1260,11 +1273,11 @@
 }
 
 :where(.ds-table__cell--sticky-start) {
-  inset-inline-start: 0;
+  inset-inline-start: var(--_table-pin-offset, 0);
 }
 
 :where(.ds-table__cell--sticky-end) {
-  inset-inline-end: 0;
+  inset-inline-end: var(--_table-pin-offset, 0);
 }
 
 :where(.ds-table__header-cell.ds-table__cell--sticky-start),
@@ -1385,7 +1398,7 @@
 /* Each real section owns one sticky row and its own push-off boundary. */
 :where(.ds-table--contained-sticky-header .ds-table__group-row--native-sticky) {
   position: sticky;
-  inset-block-start: var(--_table-header-min-block-size);
+  inset-block-start: var(--_table-head-block-size);
   z-index: 5;
 }
 
@@ -1831,3 +1844,387 @@
 :where(.ds-table__cell-tag-separator) {
   flex: none;
 }
+
+:where(.ds-table--super-headers) {
+  --_table-head-block-size: calc(2 * var(--_table-header-min-block-size));
+}
+
+:where(.ds-table__super-header-cell)::after {
+  background: var(--_table-column-border);
+}
+
+:where(.ds-table__header-cell--rowspan) {
+  vertical-align: bottom;
+}
+
+/* Share the body tracks across both header rows, including real row spans. */
+:where(.ds-table__table--native-group-sticky > .ds-table__head--multirow) {
+  display: grid;
+  grid-template-columns: var(--_table-grid-template-columns);
+  grid-template-rows: repeat(2, var(--_table-header-min-block-size));
+}
+:where(.ds-table__table--native-group-sticky .ds-table__head--multirow > .ds-table__header-row) {
+  display: contents;
+}
+:where(.ds-table__table--native-group-sticky .ds-table__header-cell--rowspan) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+:where(.ds-table__sticky-edge--internal)::after {
+  display: none;
+}
+
+/* A covered body lane breaks DOM adjacency with the preceding pinned checkbox. */
+:where(.ds-table__cell--after-covered) {
+  --ds-interaction-group-divider-inline-start-width: var(--dimension-stroke-width-012);
+  --ds-interaction-group-divider-inline-start-color: var(--_table-column-border);
+}
+
+/* Move the complete content stack, never individual text, icon, tag or action tracks. */
+:where(.ds-table__cell[data-vertical-align='middle']) {
+  vertical-align: middle;
+}
+:where(.ds-table__cell[data-vertical-align='bottom']) {
+  vertical-align: bottom;
+}
+:where(.ds-table__table--native-group-sticky .ds-table__cell[data-vertical-align]) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+:where(.ds-table__table--native-group-sticky .ds-table__cell[data-vertical-align='middle']) {
+  justify-content: center;
+}
+:where(.ds-table__table--native-group-sticky .ds-table__cell[data-vertical-align='bottom']) {
+  justify-content: flex-end;
+}
+:where(.ds-table__cell-highlight) {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+  outline: var(--dimension-stroke-width-050) solid
+    var(--_table-cell-intent, var(--color-border-secondary));
+  outline-offset: calc(-1 * var(--dimension-stroke-width-050));
+  /* Clip only this decorative layer: a left-only outline without affecting
+   * the cell's content, layout, keyboard focus ring, or pinned borders. */
+  clip-path: inset(0 calc(100% - var(--dimension-stroke-width-050)) 0 0);
+}
+:where(.ds-table__cell[data-cell-highlight='brand']) {
+  --_table-cell-intent: var(--color-border-bold-brand);
+}
+:where(.ds-table__cell[data-cell-highlight='negative']) {
+  --_table-cell-intent: var(--color-border-bold-negative);
+}
+:where(.ds-table__cell[data-cell-highlight='positive']) {
+  --_table-cell-intent: var(--color-border-bold-positive);
+}
+:where(.ds-table__cell[data-cell-highlight='warning']) {
+  --_table-cell-intent: var(--color-border-bold-warning);
+}
+:where(.ds-table__cell[data-cell-highlight='caution']) {
+  --_table-cell-intent: var(--color-border-bold-caution);
+}
+:where(.ds-table__cell[data-cell-borders~='start']) {
+  border-inline-start: var(--dimension-stroke-width-012) solid var(--_table-border-strong);
+}
+:where(.ds-table__cell[data-cell-borders~='end']) {
+  border-inline-end: var(--dimension-stroke-width-012) solid var(--_table-border-strong);
+}
+:where(.ds-table__cell[data-cell-borders~='top']) {
+  border-block-start: var(--dimension-stroke-width-012) solid var(--_table-border-strong);
+}
+:where(.ds-table__cell[data-cell-borders~='bottom']) {
+  border-block-end: var(--dimension-stroke-width-012) solid var(--_table-border-strong);
+}
+:where(.ds-table__cell-flag) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-block-size: var(--_table-cell-track-min-block-size);
+  inline-size: var(--_table-cell-track-min-block-size);
+  margin-inline-start: var(--dimension-space-050);
+}
+:where(.ds-table__card-label) {
+  display: none;
+}
+:where(.ds-table__card-field-divider),
+:where(.ds-table__card-action-divider) {
+  display: none;
+}
+
+/* Keep every field reachable when pinned lanes consume the complete viewport. */
+:where(.ds-table__frame[data-pins-crowded='true'] .ds-table__cell--sticky-start),
+:where(.ds-table__frame[data-pins-crowded='true'] .ds-table__cell--sticky-end) {
+  --ds-interaction-position: relative;
+  position: relative;
+  inset-inline: auto;
+  transform: none;
+  animation: none;
+}
+:where(.ds-table__frame[data-pins-crowded='true'] .ds-table__sticky-edge)::after {
+  display: none;
+}
+
+/* A single semantic table and the same controls survive the layout switch. */
+:where(.ds-table--cards-active > .ds-table__caption-bar),
+:where(.ds-table--cards-active > .ds-table__footer),
+:where(.ds-table--cards-active .ds-table__frame),
+:where(.ds-table--cards-active .ds-table__viewport) {
+  border-radius: 0;
+}
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__table) {
+  display: block;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  padding: var(--dimension-space-200) var(--dimension-space-200) 0;
+}
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__head),
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__body) {
+  display: block;
+}
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__head) {
+  /* Keep static semantic column labels, but no visible or focusable header UI. */
+  position: absolute;
+  inline-size: var(--dimension-stroke-width-012);
+  block-size: var(--dimension-stroke-width-012);
+  overflow: hidden;
+  clip-path: inset(50%);
+  pointer-events: none;
+}
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__row) {
+  display: grid;
+  position: relative;
+  /* WebKit can retain the table-row intrinsic size after changing to a card,
+   * clipping visible fields and skipping the absolutely positioned checkbox.
+   * Bounded datasets still use the existing recycled row window. */
+  content-visibility: visible;
+  contain-intrinsic-block-size: none;
+  box-sizing: border-box;
+  grid-template-columns: minmax(0, 1fr);
+  margin-block-end: var(--dimension-space-200);
+  padding: var(--dimension-space-100) var(--dimension-space-050);
+  border: var(--dimension-stroke-width-012) solid var(--_table-column-border);
+  border-radius: var(--ds-radius-card);
+  isolation: isolate;
+}
+:where(.ds-table--cards-active .ds-table__row)::before,
+:where(.ds-table--cards-active .ds-table__row)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+:where(.ds-table--cards-active .ds-table__row)::before {
+  z-index: 0;
+}
+:where(.ds-table--cards-active .ds-table__row)::after {
+  z-index: 3;
+}
+:where(.ds-table--cards-active .ds-table__row--selected)::before {
+  background: var(--_table-row-selected);
+}
+:where(.ds-table--cards-active .ds-table__row[data-surface-open='true'])::before {
+  background: var(--_table-row-pressed);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where(.ds-table--cards-active .ds-table__row--interactive:hover)::after {
+    background: var(--_table-row-hover);
+  }
+}
+:where(.ds-table--cards-active .ds-table__row--interactive:active)::after {
+  background: var(--_table-row-pressed);
+}
+:where(.ds-table--cards-active .ds-table__cell)::before,
+:where(.ds-table--cards-active .ds-table__cell)::after {
+  display: none;
+}
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__cell),
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__header-cell) {
+  --ds-interaction-position: relative;
+  display: block;
+  position: relative;
+  inset-inline: auto;
+  inline-size: auto;
+  max-inline-size: none;
+  width: auto;
+  max-width: none;
+  block-size: auto;
+}
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__card-label) {
+  display: block;
+  padding-inline: var(--_table-cell-track-padding-inline);
+  margin-block-end: var(--dimension-space-100);
+}
+:where(.ds-table--cards-active .ds-table__selection-cell),
+:where(.ds-table--cards-active .ds-table__cell--card-action) {
+  --ds-interaction-position: absolute;
+  --ds-interaction-z-index: 3;
+  --ds-interaction-group-divider-width: 0;
+  position: absolute;
+  z-index: 3;
+  inset-block-start: var(--dimension-space-100);
+  inline-size: var(--_table-selection-column-inline-size);
+  border: 0;
+  background: transparent;
+}
+:where(.ds-table--cards-active .ds-table__selection-cell) {
+  inset-inline-end: calc(
+    var(--dimension-space-100) + var(--_table-card-action-count, 0) *
+      var(--_table-selection-column-inline-size)
+  );
+}
+:where(.ds-table--cards-active .ds-table__cell--card-action) {
+  inset-inline-end: calc(
+    var(--dimension-space-100) +
+      (var(--_table-card-action-count, 1) - var(--_table-card-action-index, 0) - 1) *
+      var(--_table-selection-column-inline-size)
+  );
+}
+:where(.ds-table--cards-active .ds-table__cell--card-first) {
+  padding-inline-end: calc(
+    var(--dimension-space-100) + var(--_table-card-control-count, 0) *
+      var(--_table-selection-column-inline-size)
+  );
+}
+:where(.ds-table--cards-active .ds-table__card-field-divider) {
+  display: block;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: calc(var(--_table-cell-padding-inline) + var(--_table-cell-track-padding-inline));
+  block-size: var(--dimension-stroke-width-012);
+  background: var(--_table-column-border);
+  pointer-events: none;
+}
+:where(.ds-table--cards-active .ds-table__card-action-divider) {
+  display: block;
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: calc(var(--dimension-space-100) + var(--dimension-space-025));
+  block-size: var(--dimension-size-250);
+  inline-size: var(--dimension-stroke-width-012);
+  background: var(--_table-column-border);
+  pointer-events: none;
+}
+:where(.ds-table--cards-active .ds-table__cell--tag > .ds-table__cell-content),
+:where(.ds-table--cards-active .ds-table__cell--tags > .ds-table__cell-content),
+:where(.ds-table--cards-active .ds-table__cell--icon > .ds-table__cell-content),
+:where(.ds-table--cards-active .ds-table__cell--image > .ds-table__cell-content) {
+  padding-inline: var(--_table-cell-track-padding-inline);
+}
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__cell) {
+  --ds-interaction-group-divider-inline-start-width: 0;
+  --ds-interaction-group-divider-width: 0;
+  border: 0;
+  background: transparent;
+}
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] colgroup),
+:where(
+  .ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__elastic-spacer-cell
+),
+:where(.ds-table--responsive-cards .ds-table__frame[data-narrow='true'] .ds-table__sticky-edge) {
+  display: none;
+}
+:where(.ds-table__cell[role='gridcell']:not([aria-selected='true']):focus) {
+  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
+  outline-offset: calc(-1 * var(--dimension-stroke-width-025));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where(
+    .ds-table__cell[role='gridcell'][data-cell-editable='true']:not([aria-selected='true']):not(
+        [data-cell-editing='true']
+      ):hover
+  ) {
+    --ds-interaction-group-fill: var(--_table-row-hover);
+  }
+}
+:where(
+  .ds-table__cell[role='gridcell'][data-cell-editable='true']:not([aria-selected='true']):not(
+      [data-cell-editing='true']
+    ):active
+) {
+  --ds-interaction-group-fill: var(--_table-row-pressed);
+}
+:where(.ds-table__cell[data-cell-editable='false']) {
+  --ds-interaction-group-fill: transparent;
+}
+:where(.ds-table__edit-trigger) {
+  position: absolute;
+  inset-block-start: var(--dimension-space-100);
+  inset-inline-end: var(--dimension-space-100);
+  z-index: 4;
+  background: var(--_table-surface);
+  border-radius: var(--ds-radius-control);
+  opacity: 0;
+  pointer-events: none;
+}
+:where(.ds-table__cell:focus-within .ds-table__edit-trigger) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :where(.ds-table__cell:hover .ds-table__edit-trigger) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (hover: none) {
+  :where(.ds-table__edit-trigger) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+:where(.ds-table__cell-editor) {
+  box-sizing: border-box;
+  flex: 1 0 auto;
+  inline-size: calc(100% + var(--dimension-space-100));
+  min-inline-size: 0;
+  /* md control text starts 8px in; cancel 4px to preserve the table's 4px track inset.
+     Its 32px frame similarly occupies the existing 24px track without growing the row. */
+  margin: calc(-1 * var(--dimension-space-050));
+}
+:where(.ds-table__select-indicator) {
+  flex: 0 0 auto;
+  align-self: center;
+  margin-inline-start: var(--dimension-space-050);
+  margin-inline-end: var(--dimension-space-025);
+}
+/* Paint above the cell's interaction layers so the outline cannot be covered by dividers. */
+:where(.ds-table__cell[aria-selected='true'])::after,
+:where(.ds-table__cell[data-cell-editing='true'])::after {
+  outline: var(--dimension-stroke-width-018) solid var(--color-border-bold-brand);
+  outline-offset: calc(-1 * var(--dimension-stroke-width-018));
+}
+
+@media (forced-colors: active) {
+  :where(.ds-table__row--disabled .ds-table__cell-content),
+  :where(.ds-table__cell[data-cell-editable='false'] .ds-table__cell-content) {
+    opacity: 1;
+    color: var(--ds-forced-color-disabled);
+  }
+  :where(.ds-table__card-field-divider) {
+    border-block-start: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);
+  }
+  :where(.ds-table__card-action-divider) {
+    border-inline-start: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);
+  }
+  :where(.ds-table__cell-highlight) {
+    outline-color: var(--ds-forced-color-content);
+  }
+  :where(.ds-table__cell[role='gridcell']:focus) {
+    outline-color: var(--ds-forced-color-selected);
+  }
+  :where(.ds-table__cell[aria-selected='true'])::after,
+  :where(.ds-table__cell[data-cell-editing='true'])::after {
+    outline: var(--dimension-stroke-width-018) solid var(--ds-forced-color-selected);
+    outline-offset: calc(-1 * var(--dimension-stroke-width-018));
+  }
+}

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

@@ -18,8 +18,11 @@ export declare class AgentToolCall {
     private hasPlainTextResult;
     private hasDetails;
     private slotObserver?;
+    private hasLoaded;
     componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    private observeSlots;
     disconnectedCallback(): void;
     private syncSlots;
     private serialize;

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

@@ -31,6 +31,7 @@ export declare class Banner {
     private loaded;
     private transitionTimer;
     private closePending;
+    connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

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

@@ -47,6 +47,8 @@ export declare class BarNav {
     private visibleTabListEl;
     private probeTabListEl;
     private resizeObserver;
+    private hasLoaded;
+    private readonly connectionTasks;
     private intrinsicWidthRetryCount;
     private tabLayoutPendingFrames;
     private readonly panelNavTransition;
@@ -68,7 +70,9 @@ export declare class BarNav {
     onMenuOpenChange(open: boolean): void;
     onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined): void;
     componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    private connectResources;
     componentDidRender(): void;
     disconnectedCallback(): void;
     private bindChromeTransitionListeners;

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

@@ -60,6 +60,8 @@ export declare class BarPageTitle {
     private probeRowEl;
     private visibleTabListEl;
     private resizeObserver;
+    private hasLoaded;
+    private readonly connectionTasks;
     private intrinsicWidthRetryCount;
     private tabLayoutPendingFrames;
     private readonly panelNavTransition;
@@ -67,7 +69,9 @@ export declare class BarPageTitle {
     private readonly overflowCoalescer;
     private chromeTransitionShell;
     componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    private connectResources;
     componentDidRender(): void;
     disconnectedCallback(): void;
     handleSectionsChange(next: BarTitleSectionItem[], prev: BarTitleSectionItem[]): void;

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';
 export declare class Breadcrumb {
+    el: HTMLElement;
     /** Ordered path from the broadest ancestor to the nearest page. */
     items: BreadcrumbItem[];
     /** Accessible name for the breadcrumb navigation landmark. */
@@ -17,7 +18,11 @@ export declare class Breadcrumb {
     private resizeObserver?;
     private observedElement?;
     private measurementFrame?;
+    private hasLoaded;
+    private readonly connectionTasks;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    private connectResources;
     componentDidRender(): void;
     disconnectedCallback(): void;
     handleItemsChange(): void;

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

@@ -12,6 +12,7 @@ export declare class Calendar {
     autoFocus: boolean;
     dsChange: EventEmitter<string>;
     private month;
+    private focusedDay;
     private pendingStart;
     private previewEnd;
     private heldRange;
@@ -20,6 +21,7 @@ export declare class Calendar {
     onValueChange(): void;
     setFocus(): Promise<void>;
     private anchorDate;
+    private isUnavailable;
     private isDisabled;
     private moveMonth;
     private selectDate;

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

@@ -41,8 +41,11 @@ export declare class CardOverview {
     private layoutEl?;
     private layoutResizeObserver;
     private layoutResizeFrame;
+    private hasLoaded;
+    private readonly connectionTasks;
     /** The node the observer is bound to, which a later render can replace. */
     private observedLayoutEl?;
+    connectedCallback(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;