@ds-mo/ui 11.0.0 → 12.0.0

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

@@ -2,15 +2,79 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "tooltip-data-viz",
   "title": "TooltipDataViz",
-  "description": "Positioned value/label callout for chart hover interactions (bar, line point, …).\nDonut charts skip this — legend sync already surfaces the hovered slice.\nUnlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\ncharts hover-highlight data that lives inside an SVG, so the chart itself computes\nthe anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n\nRenders `position: absolute` — place inside a `position: relative` chart wrapper,\nwith `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\nof the anchor (matching cursor-following tooltips), flipping to whichever side/edge\nkeeps it on-screen.\n\nMount (or remount) when a hover session starts so `delay` applies once per hover;\nkeep the instance mounted while the cursor moves so tracking stays instant.",
+  "description": "Chart-owned, non-interactive label and value callout positioned from pointer or focused-mark coordinates inside a visualization wrapper.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
     "distribution": "npm",
     "storybook": "https://zainadeel.github.io/compomo/?path=/story/tooltip-data-viz",
     "source": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
-    "intentStatus": "migration-pending",
-    "intent": null,
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "specialized",
+      "status": "experimental",
+      "summary": "Chart-owned, non-interactive label and value callout positioned from pointer or focused-mark coordinates inside a visualization wrapper.",
+      "useWhen": [
+        "A chart needs immediate visual value feedback for a genuinely hovered or keyboard-focused mark.",
+        "The anchor lives inside SVG or chart coordinates rather than on a slotted HTML trigger.",
+        "The owning chart can mount the callout for one interaction session and update its coordinates while tracking."
+      ],
+      "avoidWhen": [
+        "A normal control or text trigger needs supplemental explanation; use Tooltip.",
+        "The content needs links, actions, focus, or touch-primary disclosure.",
+        "An externally synchronized highlight has no genuine local pointer or keyboard interaction.",
+        "The callout would be the only accessible source of an essential value."
+      ],
+      "alternatives": [
+        {
+          "when": "A slotted control or text trigger needs a conventional tooltip.",
+          "component": "component:ds-tooltip",
+          "reason": "Tooltip owns trigger semantics, focus behavior, and anchored overlay lifecycle."
+        },
+        {
+          "when": "Donut details should remain continuously visible beside the chart.",
+          "component": "component:ds-chart-legend",
+          "reason": "A visible legend avoids redundant transient slice callouts."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-chart-bar",
+        "component:ds-chart-line",
+        "component:ds-chart-donut"
+      ],
+      "accessibility": [
+        "The callout is presentation-only and never replaces the owning chart mark's accessible label or an adjacent data summary.",
+        "Keyboard-focused marks receive the same visual feedback as pointer-hovered marks.",
+        "The callout never receives focus or contains interactive descendants."
+      ],
+      "states": [
+        "The owning chart mounts the callout when a local interaction starts and unmounts it when that interaction ends.",
+        "Coordinate updates track within one mounted interaction session without restarting the show delay.",
+        "Placement flips horizontally or vertically when the rendered callout approaches a viewport edge.",
+        "Reduced motion preserves the final visible state without an opacity transition."
+      ],
+      "responsiveBehavior": [
+        "Render inside a positioned chart wrapper and pass coordinates relative to that wrapper.",
+        "Keep labels concise enough for the single-line callout; persistent or long explanations belong outside the chart."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "The owning chart computes coordinates and conditionally mounts the component; applications should not use it as a standalone overlay."
+        ],
+        "react": [
+          "Keep callout lifecycle and coordinates inside the chart wrapper rather than application-global tooltip state."
+        ],
+        "angular": [
+          "Keep callout lifecycle and coordinates inside the chart wrapper rather than application-global tooltip state."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook example",
+          "path": "src/wc/components/TooltipDataViz/TooltipDataViz.stories.ts"
+        }
+      ]
+    },
     "api": {
       "props": {
         "delay": {
@@ -151,7 +215,7 @@
     },
     {
       "path": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
-      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point, …).\n * Donut charts skip this — legend sync already surfaces the hovered slice.\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-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\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: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = '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: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <ds-text\n            class=\"tooltip-data-viz__label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"var(--color-translucent-foreground-secondary)\"\n          >\n            {this.label}\n          </ds-text>\n          <ds-text\n            class=\"tooltip-data-viz__value\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"var(--color-translucent-foreground-primary)\"\n          >\n            {this.value}\n          </ds-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point,\n * standalone donut slice, …). Donut compositions suppress it when a visible\n * legend already surfaces the hovered slice.\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-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\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: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = '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: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <ds-text\n            class=\"tooltip-data-viz__label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"var(--color-translucent-foreground-secondary)\"\n          >\n            {this.label}\n          </ds-text>\n          <ds-text\n            class=\"tooltip-data-viz__value\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"var(--color-translucent-foreground-primary)\"\n          >\n            {this.value}\n          </ds-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/react/components.d.ts

@@ -6,11 +6,11 @@ export { DsAgentActivity } from "./ds-agent-activity.js";
 export { DsAgentResponse } from "./ds-agent-response.js";
 export { DsAgentSourceList } from "./ds-agent-source-list.js";
 export { DsAgentToolCall } from "./ds-agent-tool-call.js";
-export { DsAppShell } from "./ds-app-shell.js";
 export { DsAttachmentList } from "./ds-attachment-list.js";
 export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBarNav } from "./ds-bar-nav.js";
+export { DsBarTitle } from "./ds-bar-title.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
@@ -47,8 +47,10 @@ export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadio } from "./ds-radio.js";
 export { DsSelectMulti } from "./ds-select-multi.js";
 export { DsSelect } from "./ds-select.js";
+export { DsShellApp } from "./ds-shell-app.js";
 export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
 export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
+export { DsShellPage } from "./ds-shell-page.js";
 export { DsSkeleton } from "./ds-skeleton.js";
 export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";

package/dist/react/components.js

@@ -7,11 +7,11 @@ export { DsAgentActivity } from "./ds-agent-activity.js";
 export { DsAgentResponse } from "./ds-agent-response.js";
 export { DsAgentSourceList } from "./ds-agent-source-list.js";
 export { DsAgentToolCall } from "./ds-agent-tool-call.js";
-export { DsAppShell } from "./ds-app-shell.js";
 export { DsAttachmentList } from "./ds-attachment-list.js";
 export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBarNav } from "./ds-bar-nav.js";
+export { DsBarTitle } from "./ds-bar-title.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
@@ -48,8 +48,10 @@ export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadio } from "./ds-radio.js";
 export { DsSelectMulti } from "./ds-select-multi.js";
 export { DsSelect } from "./ds-select.js";
+export { DsShellApp } from "./ds-shell-app.js";
 export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
 export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
+export { DsShellPage } from "./ds-shell-page.js";
 export { DsSkeleton } from "./ds-skeleton.js";
 export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";

package/dist/react/ds-bar-title.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { type DsBarTitleCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBarTitle as DsBarTitleElement } from "@ds-mo/ui/dist/components/ds-bar-title.js";
+export type DsBarTitleEvents = {
+    onDsBack: EventName<DsBarTitleCustomEvent<MouseEvent>>;
+    onDsSectionChange: EventName<DsBarTitleCustomEvent<string>>;
+    onDsAction: EventName<DsBarTitleCustomEvent<string>>;
+};
+export declare const DsBarTitle: StencilReactComponent<DsBarTitleElement, DsBarTitleEvents, Components.DsBarTitle, 'heading'>;

package/dist/react/ds-bar-title.js

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsBarTitle as DsBarTitleElement, defineCustomElement as defineDsBarTitle } from "@ds-mo/ui/dist/components/ds-bar-title.js";
+export const DsBarTitle = /*@__PURE__*/ createComponent({
+    tagName: 'ds-bar-title',
+    elementClass: DsBarTitleElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsBack: 'dsBack',
+        onDsSectionChange: 'dsSectionChange',
+        onDsAction: 'dsAction'
+    },
+    defineCustomElement: defineDsBarTitle
+});

package/dist/react/{ds-app-shell.d.ts → ds-shell-app.d.ts}

@@ -4,6 +4,6 @@
  */
 import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
 import type { Components } from "@ds-mo/ui/dist/components";
-import { DsAppShell as DsAppShellElement } from "@ds-mo/ui/dist/components/ds-app-shell.js";
-export type DsAppShellEvents = NonNullable<unknown>;
-export declare const DsAppShell: StencilReactComponent<DsAppShellElement, DsAppShellEvents, Components.DsAppShell>;
+import { DsShellApp as DsShellAppElement } from "@ds-mo/ui/dist/components/ds-shell-app.js";
+export type DsShellAppEvents = NonNullable<unknown>;
+export declare const DsShellApp: StencilReactComponent<DsShellAppElement, DsShellAppEvents, Components.DsShellApp>;

package/dist/react/ds-shell-app.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellApp as DsShellAppElement, defineCustomElement as defineDsShellApp } from "@ds-mo/ui/dist/components/ds-shell-app.js";
+export const DsShellApp = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-app',
+    elementClass: DsShellAppElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineDsShellApp
+});

package/dist/react/ds-shell-page.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellPage as DsShellPageElement } from "@ds-mo/ui/dist/components/ds-shell-page.js";
+export type DsShellPageEvents = NonNullable<unknown>;
+export declare const DsShellPage: StencilReactComponent<DsShellPageElement, DsShellPageEvents, Components.DsShellPage>;

package/dist/react/ds-shell-page.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellPage as DsShellPageElement, defineCustomElement as defineDsShellPage } from "@ds-mo/ui/dist/components/ds-shell-page.js";
+export const DsShellPage = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-page',
+    elementClass: DsShellPageElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineDsShellPage
+});

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

@@ -16,7 +16,7 @@ export declare class Badge {
     hasRing: boolean;
     /**
      * Ring samples the shell gradient stack (base fill + wash) instead of a flat
-     * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;
+     * `box-shadow`. Auto-enabled under an ShellApp with an active gradient preset;
      * set `gradient-background` to opt in/out explicitly.
      *
      * The attribute must NOT start with `on` — Stencil's setAccessor routes any

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

@@ -0,0 +1,71 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type BarTitleActionItem, type BarTitlePrimaryAction, type BarTitleSectionItem, type BarTitleVariant } from './bar-title-types';
+export declare class BarTitle {
+    /** The page's single visible h1. */
+    heading: string;
+    /** Optional supporting copy shown in the expanded presentation. */
+    description: string;
+    /** Show the leading page-level Back action. */
+    showBack: boolean;
+    /** Accessible name for the leading Back action. */
+    backAriaLabel: string;
+    /** Visible parent-page label used by the expanded Back breadcrumb. */
+    backLabel: string;
+    /** Optional page sections exposed through the active-section menu. */
+    sections: BarTitleSectionItem[];
+    /** Id of the active page section. */
+    value: string;
+    /** Accessible name for the page-section menu. */
+    sectionsAriaLabel: string;
+    /** The one highest-emphasis page action. */
+    primaryAction: BarTitlePrimaryAction | null;
+    /** Secondary page actions shown in the overflow menu. Dividers create groups. */
+    actions: BarTitleActionItem[];
+    /** Accessible name for the page-actions menu. */
+    actionsAriaLabel: string;
+    /** Explicit visual/capacity variant. ShellPage owns automatic selection. */
+    variant: BarTitleVariant;
+    /** Emitted when the leading Back action is activated. */
+    dsBack: EventEmitter<MouseEvent>;
+    /** Emitted with the newly selected page-section id. */
+    dsSectionChange: EventEmitter<string>;
+    /** Emitted with the activated primary or overflow action id. */
+    dsAction: EventEmitter<string>;
+    private sectionMenuOpen;
+    private actionMenuOpen;
+    private sectionMenuInitialFocusVisible;
+    private actionMenuInitialFocusVisible;
+    private readonly instanceId;
+    private readonly sectionMenuTriggerId;
+    private readonly sectionMenuId;
+    private readonly actionMenuTriggerId;
+    private readonly actionMenuId;
+    private sectionTriggerEl;
+    private actionTriggerEl;
+    handleSectionsChange(): void;
+    handleActionsChange(): void;
+    private get compact();
+    private get primaryCollapsed();
+    private get selectableSections();
+    private get hasSectionSelector();
+    private get effectiveValue();
+    private get selectedSectionLabel();
+    private get sectionTriggerAriaLabel();
+    private groupsFromItems;
+    private get sectionMenuSections();
+    private get selectableActions();
+    private get showActionMenuTrigger();
+    private actionMenuItem;
+    private get actionMenuSections();
+    private toggleSectionMenu;
+    private closeSectionMenu;
+    private handleSectionSelect;
+    private toggleActionMenu;
+    private closeActionMenu;
+    private handleActionSelect;
+    private renderSectionSelector;
+    private renderActions;
+    private renderBack;
+    render(): any;
+}
+//# sourceMappingURL=BarTitle.d.ts.map

package/dist/types/components/BarTitle/bar-title-types.d.ts

@@ -0,0 +1,29 @@
+import type { ButtonFilledContrast, ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';
+export interface BarTitleSection {
+    id: string;
+    label: string;
+    isInactive?: boolean;
+}
+export interface BarTitleDivider {
+    type: 'divider';
+}
+export type BarTitleSectionItem = BarTitleSection | BarTitleDivider;
+export interface BarTitleAction {
+    id: string;
+    label: string;
+    isInactive?: boolean;
+    isDestructive?: boolean;
+}
+export interface BarTitlePrimaryAction extends BarTitleAction {
+    icon?: string;
+    intent?: ButtonFilledIntent;
+    contrast?: ButtonFilledContrast;
+    isLoading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    collapse?: BarTitlePrimaryActionCollapse;
+}
+export type BarTitleActionItem = BarTitleAction | BarTitleDivider;
+export type BarTitleVariant = 'expanded' | 'compact' | 'constrained';
+export type BarTitlePrimaryActionCollapse = 'auto' | 'never';
+export declare function isBarTitleDivider(item: BarTitleSectionItem | BarTitleActionItem): item is BarTitleDivider;
+//# sourceMappingURL=bar-title-types.d.ts.map

package/dist/types/components/BarTitle/index.d.ts

@@ -0,0 +1,2 @@
+export type { BarTitleAction, BarTitleActionItem, BarTitleDivider, BarTitlePrimaryActionCollapse, BarTitlePrimaryAction, BarTitleSection, BarTitleSectionItem, BarTitleVariant, } from './bar-title-types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,7 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ControlWidth } from '../../utils';
+import type { ChoiceBackground } from '../../utils/choice-list';
 export type ButtonFilledIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive' | 'guide' | 'walkthrough';
 export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
+export type ButtonFilledBackground = ChoiceBackground;
 export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
 export type ButtonFilledSize = 'md' | 'sm' | 'xs';
 export type ButtonFilledWidth = ControlWidth;
@@ -27,6 +29,13 @@ export declare class ButtonFilled {
      * bold → faint, strong → medium, medium → strong, faint → bold.
      */
     contrast: ButtonFilledContrast;
+    /** Show a 1px secondary inset border. */
+    hasBorder: boolean;
+    /**
+     * Actual parent surface context for the optional inset border color only.
+     * Omit on primary and secondary surfaces.
+     */
+    background: ButtonFilledBackground | undefined;
     /** Use the half-radius treatment instead of the default control radius. */
     rounded: boolean;
     /** Disables interaction. */

package/dist/types/components/ButtonFilled/index.d.ts

@@ -1,2 +1,2 @@
-export type { ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth, } from './ButtonFilled';
+export type { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth, } from './ButtonFilled';
 //# sourceMappingURL=index.d.ts.map

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

@@ -18,6 +18,7 @@ export declare class CardDataVizDonut {
     private hasLegendSlot;
     componentWillRender(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     private handleChartHover;
     private handleLegendHover;

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

@@ -19,6 +19,11 @@ export declare class ChartDonut {
     cornerRadius: number | string;
     /** Gap between slices, in degrees. */
     gap: number;
+    /**
+     * Show a chart-owned value callout for genuine pointer or keyboard focus.
+     * Disable when a visible legend already owns persistent label and value detail.
+     */
+    showTooltip: boolean;
     /** Primary center value; defaults to the sum of `data` values (e.g. "187", "40.9%"). */
     centerValue: string | undefined;
     /** Secondary caption below the center value (e.g. "Total", "Normal"). Rendered uppercase. */
@@ -27,8 +32,8 @@ export declare class ChartDonut {
      * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling
      * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.
      * Falls back to this component's own pointer/focus hover when unset.
-     * Slice hover dims peer slices and emits `dsSliceHover` for legend sync — no data-viz
-     * tooltip (the legend already surfaces label/value).
+     * Slice hover dims peer slices and emits `dsSliceHover` for legend sync. External
+     * highlight never opens the local tooltip.
      */
     activeLabel: string | null;
     private hoveredLabel;
@@ -37,6 +42,8 @@ export declare class ChartDonut {
     private displayedCaptionText;
     /** Measured fill diameter when `size` is unset. */
     private measuredSize;
+    private tooltipX;
+    private tooltipY;
     /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */
     dsSliceHover: EventEmitter<ChartDatum | null>;
     private valueTextEl?;
@@ -56,6 +63,9 @@ export declare class ChartDonut {
     private applyAvailableSize;
     private teardownResizeObserver;
     private handleHover;
+    private get tooltipDatum();
+    private updateTooltipFromPointer;
+    private updateTooltipFromSvgPoint;
     componentDidRender(): void;
     render(): any;
 }

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

@@ -48,11 +48,13 @@ export declare class Menu {
     private closeTimer;
     private itemEls;
     private positionRetryRaf;
+    private livePositionRaf;
     private listenersReady;
     /** Last content actually painted while open; retained unchanged through exit motion. */
     private lastRenderedSections;
     private closingSections;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     onOpenChange(isOpen: boolean): void;
     onAnchorChange(): void;
@@ -75,6 +77,9 @@ export declare class Menu {
     /** Rich preference content is a non-modal dialog, not an ARIA action menu. */
     private get hasCompositeSections();
     private cancelPositionRetry;
+    private cancelLivePositionUpdate;
+    /** Reposition after the current scroll/layout frame without hiding the open popup. */
+    private scheduleLivePositionUpdate;
     /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */
     private schedulePositionUpdate;
     /** @returns `true` when anchor and popup were found and `pos` was updated. */

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

@@ -47,7 +47,7 @@ export declare class PanelNav {
     dsNavSelect: EventEmitter<string>;
     /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */
     dsNavToggle: EventEmitter<boolean>;
-    /** Bubbling lifecycle — `ds-app-shell` pauses chrome metrics during width motion. */
+    /** Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion. */
     dsChromeTransitionStart: EventEmitter<ChromeTransitionDetail>;
     dsChromeTransitionEnd: EventEmitter<ChromeTransitionDetail>;
     /** Emitted when the footer left button (gear / dashboard) is clicked. */

package/dist/types/components/{AppShell/AppShell.d.ts → ShellApp/ShellApp.d.ts}

@@ -1,6 +1,6 @@
 import type { NavChromeStyle } from '../../shell/nav-chrome';
 import { type ShellGradientPreset } from '../../shell/shell-gradient-presets';
-export declare class AppShell {
+export declare class ShellApp {
     /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
     navStyle: NavChromeStyle;
     /**
@@ -8,7 +8,7 @@ export declare class AppShell {
      * presets use token-based washes that adapt to the active color theme.
      */
     gradientPreset: ShellGradientPreset;
-    /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N/? toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */
+    /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */
     shortcutsEnabled: boolean;
     el: HTMLElement;
     private toolsFullscreen;
@@ -47,4 +47,4 @@ export declare class AppShell {
     private syncChrome;
     render(): any;
 }
-//# sourceMappingURL=AppShell.d.ts.map
+//# sourceMappingURL=ShellApp.d.ts.map

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

@@ -0,0 +1,37 @@
+import type { ShellPageContentInset, ShellPageHeaderPresentation } from './shell-page-types';
+export declare class ShellPage {
+    el: HTMLElement;
+    /** Automatic container/scroll behavior, or an explicit header variant override. */
+    headerPresentation: ShellPageHeaderPresentation;
+    /** Standard page gutters, or no inset for full-bleed page content. */
+    contentInset: ShellPageContentInset;
+    private capacity;
+    private pageTopVisible;
+    private sentinelEl;
+    private spacerEl;
+    private headerEl;
+    private expandedHeaderHeight;
+    private resizeObserver;
+    private headerResizeObserver;
+    private scrollRoot;
+    private readonly layoutCoalescer;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private get effectiveVariant();
+    private get isScrollCompacted();
+    private connectObservers;
+    private composedParent;
+    private findScrollRoot;
+    private connectScrollRoot;
+    private handleScroll;
+    private findHeader;
+    private syncCapacity;
+    private get compactHeaderHeight();
+    private setSpacerHeight;
+    private syncHeaderVariant;
+    private observeHeader;
+    private handleHeaderSlotChange;
+    render(): any;
+}
+//# sourceMappingURL=ShellPage.d.ts.map

package/dist/types/components/ShellPage/index.d.ts

@@ -0,0 +1,3 @@
+export { ShellPage } from './ShellPage';
+export type { ShellPageCapacity, ShellPageContentInset, ShellPageHeaderPresentation, } from './shell-page-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ShellPage/shell-page-responsive.d.ts

@@ -0,0 +1,12 @@
+import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';
+import type { BarTitleVariant } from '../BarTitle/bar-title-types';
+export interface ShellPageCapacityOptions {
+    inlineSize: number;
+    compactAt: number;
+    constrainedAt: number;
+    hysteresis: number;
+    previous: ShellPageCapacity | null;
+}
+export declare function resolveShellPageCapacity({ inlineSize, compactAt, constrainedAt, hysteresis, previous, }: ShellPageCapacityOptions): ShellPageCapacity;
+export declare function resolveShellPageHeaderVariant(presentation: ShellPageHeaderPresentation, capacity: ShellPageCapacity, pageTopVisible: boolean): BarTitleVariant;
+//# sourceMappingURL=shell-page-responsive.d.ts.map

package/dist/types/components/ShellPage/shell-page-types.d.ts

@@ -0,0 +1,5 @@
+import type { BarTitleVariant } from '../BarTitle/bar-title-types';
+export type ShellPageHeaderPresentation = 'auto' | BarTitleVariant;
+export type ShellPageContentInset = 'default' | 'none';
+export type ShellPageCapacity = 'roomy' | 'compact' | 'constrained';
+//# sourceMappingURL=shell-page-types.d.ts.map

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

@@ -1,8 +1,9 @@
 export type TooltipDataVizSide = 'left' | 'right';
 export type TooltipDataVizAlign = 'top' | 'bottom';
 /**
- * Positioned value/label callout for chart hover interactions (bar, line point, …).
- * Donut charts skip this — legend sync already surfaces the hovered slice.
+ * Positioned value/label callout for chart hover interactions (bar, line point,
+ * standalone donut slice, …). Donut compositions suppress it when a visible
+ * legend already surfaces the hovered slice.
  * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —
  * charts hover-highlight data that lives inside an SVG, so the chart itself computes
  * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.