@ds-mo/ui 12.2.0 → 12.3.0

package/dist/mcp-data/registry/shell-page.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "shell-page",
   "title": "ShellPage",
-  "description": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, container-aware BarTitle variants, stable scroll compaction, and optional page-content inset without creating a nested scroll container.",
+  "description": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and optional page-content inset without creating a nested scroll container.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,10 +13,10 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, container-aware BarTitle variants, stable scroll compaction, and optional page-content inset without creating a nested scroll container.",
+      "summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and optional page-content inset without creating a nested scroll container.",
       "useWhen": [
         "Rendering a standard routed page inside ShellApp's default content region.",
-        "BarTitle should expand at a roomy page top, compact after scroll, or use constrained action layout when the page column narrows.",
+        "BarTitle should expand at a roomy page top, compact after scroll, or use constrained action layout when the application shell reports reduced capacity.",
         "BarWorkflow needs sticky page-level placement while remaining compact.",
         "Pages need consistent content gutters with an explicit full-bleed option."
       ],
@@ -53,16 +53,18 @@
         "Responsive variant changes preserve the same heading, controls, accessible names, and keyboard focus targets."
       ],
       "states": [
-        "headerPresentation=auto selects expanded, compact, or constrained from ShellPage's own inline capacity and scroll position.",
+        "headerCapacity=roomy, compact, or constrained is supplied before paint by the owning application shell and describes the page-header space available after viewport and shell-chrome policy are applied.",
+        "headerPresentation=auto selects the matching header variant from headerCapacity and scroll position.",
         "expanded, compact, and constrained are explicit overrides for exceptional layouts and deterministic examples.",
         "contentInset=default supplies standard page gutters; none permits maps, canvases, and other full-bleed content.",
         "The required header slot accepts one BarTitle or BarWorkflow. The default slot owns router output and all page product content."
       ],
       "responsiveBehavior": [
-        "ShellPage observes its own rendered width instead of viewport media queries or ShellApp desktop/tablet modes.",
-        "Roomy pages expand at the top and compact after scroll; medium-capacity pages start compact; narrow pages use the constrained header variant.",
-        "A newly navigated header resolves current page capacity before it is revealed, so persistent tool or navigation chrome cannot flash the expanded presentation first.",
-        "Token-based capacity bands use hysteresis so opening tools or resizing navigation cannot oscillate near a boundary.",
+        "The owning application shell resolves viewport and persistent-chrome state into the explicit headerCapacity prop; ShellPage never guesses the cause of reduced width from its own rendered size.",
+        "Roomy capacity expands at the top and compacts after scroll; compact capacity stays compact; constrained capacity uses the constrained action layout.",
+        "A ShellPage-managed BarTitle remains concealed until headerCapacity is available and its rendered variant matches the resolved presentation, preventing a default-variant flash during route activation.",
+        "Update headerCapacity synchronously with shell layout state so opening tools or crossing application breakpoints cannot briefly render the wrong presentation.",
+        "On roomy pages, the expanded header scrolls upward until its title and action row reaches the compact row position, then snaps variants without moving that shared visual anchor.",
         "Scroll compaction preserves the expanded page flow offset so content never jumps beneath the sticky header.",
         "ShellPage relies on ShellApp's content scroller and never introduces nested scrolling.",
         "BarWorkflow remains compact and is not assigned BarTitle's capacity or scroll variants."
@@ -107,6 +109,14 @@
           "mutable": false,
           "description": "Standard page gutters, or no inset for full-bleed page content."
         },
+        "headerCapacity": {
+          "type": "ShellPageCapacity",
+          "resolvedType": "\"compact\" | \"constrained\" | \"roomy\" | undefined",
+          "attribute": "header-capacity",
+          "required": false,
+          "mutable": false,
+          "description": "Available page-header capacity supplied by the owning application shell."
+        },
         "headerPresentation": {
           "type": "ShellPageHeaderPresentation",
           "resolvedType": "\"auto\" | \"compact\" | \"constrained\" | \"expanded\"",
@@ -114,7 +124,7 @@
           "default": "'auto'",
           "required": false,
           "mutable": false,
-          "description": "Automatic container/scroll behavior, or an explicit header variant override."
+          "description": "Automatic capacity/scroll behavior, or an explicit header variant override."
         }
       },
       "events": [],
@@ -131,6 +141,14 @@
         "mutable": false,
         "description": "Standard page gutters, or no inset for full-bleed page content."
       },
+      "headerCapacity": {
+        "type": "ShellPageCapacity",
+        "resolvedType": "\"compact\" | \"constrained\" | \"roomy\" | undefined",
+        "attribute": "header-capacity",
+        "required": false,
+        "mutable": false,
+        "description": "Available page-header capacity supplied by the owning application shell."
+      },
       "headerPresentation": {
         "type": "ShellPageHeaderPresentation",
         "resolvedType": "\"auto\" | \"compact\" | \"constrained\" | \"expanded\"",
@@ -138,7 +156,7 @@
         "default": "'auto'",
         "required": false,
         "mutable": false,
-        "description": "Automatic container/scroll behavior, or an explicit header variant override."
+        "description": "Automatic capacity/scroll behavior, or an explicit header variant override."
       }
     },
     "events": [],
@@ -181,17 +199,17 @@
   "files": [
     {
       "path": "src/wc/components/ShellPage/ShellPage.css",
-      "content": ":host {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: 0;\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--color-background-primary);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__sticky-header ::slotted(ds-bar-title),\n.shell-page__sticky-header ::slotted(ds-bar-workflow) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--color-background-primary);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n",
+      "content": ":host {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: var(--ds-shell-page-header-travel, 0);\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: var(--ds-shell-page-sticky-offset, 0);\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--color-background-primary);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__sticky-header ::slotted(ds-bar-title),\n.shell-page__sticky-header ::slotted(ds-bar-workflow) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--color-background-primary);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ShellPage/ShellPage.tsx",
-      "content": "import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createRafCoalescer } from '../../shell/chrome-transition';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageCapacity, resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic container/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  @State() private capacity: ShellPageCapacity | null = null;\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private resizeObserver: ResizeObserver | null = null;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n  private readonly layoutCoalescer = createRafCoalescer(() => this.syncCapacity());\n\n  componentDidLoad() {\n    // Resolve the already-laid-out page width before adopting a slotted header.\n    // Waiting for the first ResizeObserver/RAF lets BarTitle paint its default\n    // expanded variant for one frame when persistent shell chrome narrows a\n    // newly navigated page.\n    this.syncCapacity();\n    this.observeHeader(this.findHeader());\n    this.connectObservers();\n    this.connectScrollRoot();\n    this.layoutCoalescer.schedule();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.cancelHeaderReveal();\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n    this.layoutCoalescer.cancel();\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.capacity ?? 'roomy',\n      this.pageTopVisible\n    );\n  }\n\n  private get isScrollCompacted(): boolean {\n    return this.headerPresentation === 'auto' && this.capacity === 'roomy' && !this.pageTopVisible;\n  }\n\n  private connectObservers() {\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => this.layoutCoalescer.schedule());\n      this.resizeObserver.observe(this.el);\n    }\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll') return ancestor as HTMLElement;\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = this.findScrollRoot();\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    this.pageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private syncCapacity() {\n    const inlineSize = this.el.getBoundingClientRect().width;\n    if (inlineSize <= 0) return;\n\n    const compactAt = resolveCssLengthPx('--dimension-panel-width-2xl', 0);\n    const constrainedAt = resolveCssLengthPx('--dimension-panel-width-lg', 0);\n    const hysteresis = resolveCssLengthPx('--dimension-space-100', 0);\n    if (compactAt <= 0 || constrainedAt <= 0) return;\n\n    const next = resolveShellPageCapacity({\n      inlineSize,\n      compactAt,\n      constrainedAt,\n      hysteresis,\n      previous: this.capacity,\n    });\n    if (next !== this.capacity) this.capacity = next;\n    else this.syncHeaderVariant();\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil re-renders within a frame or two of a prop change, but this cap\n    // guarantees the header can never stay hidden indefinitely if that\n    // assumption ever breaks.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (framesRemaining <= 0 || header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    const next = this.effectiveVariant;\n    if (header.variant === 'expanded') {\n      this.expandedHeaderHeight = header.getBoundingClientRect().height;\n    }\n\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (concealUntilSynced && renderedVariantIsStale) {\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) header.variant = next;\n    if (concealUntilSynced && renderedVariantIsStale) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.setSpacerHeight(0);\n\n    if (!header) return;\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        if (header.variant === 'expanded') {\n          this.expandedHeaderHeight = header.getBoundingClientRect().height;\n        }\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    this.syncHeaderVariant(true);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements({ flatten: true })\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"main\"\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__sticky-header\">\n          <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n  private static readonly MAX_HEADER_GEOMETRY_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic capacity/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Available page-header capacity supplied by the owning application shell. */\n  @Prop() headerCapacity?: ShellPageCapacity;\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private stickyHeaderEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private headerTravel = 0;\n  private expandedGeometryFrozen = false;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerMutationObserver: MutationObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private headerGeometryFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n\n  @Watch('headerCapacity')\n  @Watch('headerPresentation')\n  handleHeaderContractChange() {\n    this.syncHeaderVariant(true);\n  }\n\n  componentDidLoad() {\n    this.observeHeader(this.findHeader());\n    this.connectScrollRoot();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  disconnectedCallback() {\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.headerCapacity ?? 'roomy',\n      this.pageTopVisible\n    );\n  }\n\n  private get headerContractResolved(): boolean {\n    return this.headerPresentation !== 'auto' || this.headerCapacity !== undefined;\n  }\n\n  private get isScrollCompacted(): boolean {\n    return (\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy' && !this.pageTopVisible\n    );\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {\n        return ancestor as HTMLElement;\n      }\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    const next = this.findScrollRoot();\n    if (next === this.scrollRoot) return;\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = next;\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    const nextPageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n    if (\n      !nextPageTopVisible &&\n      this.pageTopVisible &&\n      this.headerEl?.classList.contains(this.variantClass('expanded'))\n    ) {\n      this.captureExpandedHeaderGeometry(this.headerEl);\n      this.expandedGeometryFrozen = true;\n    }\n    if (\n      nextPageTopVisible &&\n      this.expandedGeometryFrozen &&\n      this.el.getBoundingClientRect().top >= rootTop\n    ) {\n      this.expandedGeometryFrozen = false;\n      if (this.headerEl?.classList.contains(this.variantClass('expanded'))) {\n        this.captureExpandedHeaderGeometry(this.headerEl);\n      }\n    }\n    this.pageTopVisible = nextPageTopVisible;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private setHeaderTravel(distance: number) {\n    const next = Math.max(0, distance);\n    if (Math.abs(next - this.headerTravel) < 0.5) return;\n    this.headerTravel = next;\n    this.el.style.setProperty('--ds-shell-page-header-travel', `${next}px`);\n    this.handleScroll();\n  }\n\n  private measureHeaderTravel(header: BarTitleElement) {\n    const anchor = header.querySelector<HTMLElement>('[data-shell-page-header-anchor]');\n    const compactHeight = this.compactHeaderHeight;\n    if (!anchor || compactHeight <= 0) return;\n\n    const headerRect = header.getBoundingClientRect();\n    const anchorRect = anchor.getBoundingClientRect();\n    if (headerRect.height <= 0 || anchorRect.height <= 0) return;\n\n    const expandedAnchorTop = anchorRect.top - headerRect.top;\n    const compactAnchorTop = Math.max(0, (compactHeight - anchorRect.height) / 2);\n    this.setHeaderTravel(expandedAnchorTop - compactAnchorTop);\n  }\n\n  private captureExpandedHeaderGeometry(header: BarTitleElement) {\n    this.expandedHeaderHeight = header.getBoundingClientRect().height;\n    this.measureHeaderTravel(header);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private setStickyHeaderOffset(renderedVariant: BarTitleVariant) {\n    this.stickyHeaderEl?.style.setProperty(\n      '--ds-shell-page-sticky-offset',\n      renderedVariant === 'expanded' &&\n        this.headerPresentation === 'auto' &&\n        this.headerCapacity === 'roomy'\n        ? `${-this.headerTravel}px`\n        : '0px'\n    );\n  }\n\n  private syncRenderedHeaderGeometry(header: BarTitleElement) {\n    const renderedVariant = this.effectiveVariant;\n    if (!header.classList.contains(this.variantClass(renderedVariant))) return;\n\n    // Update both flow-preservation pieces before reading layout. Otherwise a\n    // reverse compact → expanded render can briefly contain the tall header and\n    // the compact spacer together, giving browser scroll anchoring a transient\n    // height change to compensate.\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n    this.setStickyHeaderOffset(renderedVariant);\n\n    if (renderedVariant === 'expanded' && !this.expandedGeometryFrozen) {\n      this.captureExpandedHeaderGeometry(header);\n      this.setStickyHeaderOffset(renderedVariant);\n    }\n  }\n\n  private cancelHeaderGeometrySync() {\n    if (this.headerGeometryFrame !== null) cancelAnimationFrame(this.headerGeometryFrame);\n    this.headerGeometryFrame = null;\n  }\n\n  private scheduleHeaderGeometrySync(header: BarTitleElement) {\n    this.cancelHeaderGeometrySync();\n    let framesRemaining = ShellPage.MAX_HEADER_GEOMETRY_FRAMES;\n    let framesElapsed = 0;\n    const sync = () => {\n      if (this.headerEl !== header) return;\n      framesRemaining -= 1;\n      framesElapsed += 1;\n      // In WebKit a child's componentDidLoad can precede its assignment into\n      // the parent's rendered slot. Revalidate after ShellApp has had a frame\n      // to expose the actual content scroller.\n      this.connectScrollRoot();\n      this.syncRenderedHeaderGeometry(header);\n      const geometryReady =\n        this.effectiveVariant !== 'expanded' ||\n        (this.expandedHeaderHeight > 0 && this.headerTravel > 0);\n      if ((geometryReady && framesElapsed >= 2) || framesRemaining <= 0) {\n        this.headerGeometryFrame = null;\n        return;\n      }\n      this.headerGeometryFrame = requestAnimationFrame(sync);\n    };\n    this.headerGeometryFrame = requestAnimationFrame(sync);\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil normally re-renders within a frame or two of a prop change. Stop\n    // polling at the cap, but fail closed: a stale variant must never paint.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      if (framesRemaining <= 0) {\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    if (!this.headerContractResolved) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n      return;\n    }\n\n    const next = this.effectiveVariant;\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (!renderedVariantIsStale) this.syncRenderedHeaderGeometry(header);\n    if (concealUntilSynced) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) header.variant = next;\n    if (concealUntilSynced) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.expandedGeometryFrozen = false;\n    this.setHeaderTravel(0);\n    this.setSpacerHeight(0);\n    this.stickyHeaderEl?.style.setProperty('--ds-shell-page-sticky-offset', '0px');\n\n    if (!header) return;\n    if (header.classList.contains(this.variantClass('expanded'))) {\n      this.captureExpandedHeaderGeometry(header);\n    }\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.headerMutationObserver = new MutationObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerMutationObserver.observe(header, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n    }\n    this.syncHeaderVariant(true);\n    this.scheduleHeaderGeometrySync(header);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements({ flatten: true })\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"main\"\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div\n          ref={el => {\n            this.stickyHeaderEl = el ?? null;\n          }}\n          class=\"shell-page__sticky-header\"\n        >\n          <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/ShellPage/shell-page-responsive.ts",
-      "content": "import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\n\nexport interface ShellPageCapacityOptions {\n  inlineSize: number;\n  compactAt: number;\n  constrainedAt: number;\n  hysteresis: number;\n  previous: ShellPageCapacity | null;\n}\n\nexport function resolveShellPageCapacity({\n  inlineSize,\n  compactAt,\n  constrainedAt,\n  hysteresis,\n  previous,\n}: ShellPageCapacityOptions): ShellPageCapacity {\n  if (previous === null) {\n    if (inlineSize <= constrainedAt) return 'constrained';\n    if (inlineSize <= compactAt) return 'compact';\n    return 'roomy';\n  }\n\n  if (previous === 'constrained') {\n    if (inlineSize <= constrainedAt + hysteresis) return 'constrained';\n    return inlineSize <= compactAt ? 'compact' : 'roomy';\n  }\n\n  if (inlineSize <= constrainedAt) return 'constrained';\n\n  if (previous === 'compact') {\n    return inlineSize <= compactAt + hysteresis ? 'compact' : 'roomy';\n  }\n\n  return inlineSize <= compactAt ? 'compact' : 'roomy';\n}\n\nexport function resolveShellPageHeaderVariant(\n  presentation: ShellPageHeaderPresentation,\n  capacity: ShellPageCapacity,\n  pageTopVisible: boolean\n): BarTitleVariant {\n  if (presentation !== 'auto') return presentation;\n  if (capacity === 'constrained') return 'constrained';\n  if (capacity === 'compact' || !pageTopVisible) return 'compact';\n  return 'expanded';\n}\n",
+      "content": "import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\n\nexport function resolveShellPageHeaderVariant(\n  presentation: ShellPageHeaderPresentation,\n  capacity: ShellPageCapacity,\n  pageTopVisible: boolean\n): BarTitleVariant {\n  if (presentation !== 'auto') return presentation;\n  if (capacity === 'constrained') return 'constrained';\n  if (capacity === 'compact' || !pageTopVisible) return 'compact';\n  return 'expanded';\n}\n",
       "type": "registry:ui"
     },
     {

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

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

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

@@ -29,12 +29,12 @@
         "pattern:conversation"
       ],
       "accessibility": [
-        "Provide concise localized status text that names the participant when that context is not otherwise clear.",
+        "Provide concise localized status text; the standard label is Typing followed by a three-dot ellipsis.",
         "The polite atomic status announces typing without representing it as a message bubble."
       ],
       "states": [
         "TypingIndicator is transient conversation status, never persisted message content.",
-        "Its body-small secondary text may shimmer, while reduced-motion preferences retain a static readable status."
+        "Its body-medium secondary text may shimmer, while reduced-motion preferences retain a static readable status."
       ],
       "responsiveBehavior": [
         "The indicator fills the message content width and wraps only when localized status text requires it."
@@ -52,10 +52,10 @@
           "type": "string",
           "resolvedType": "string",
           "attribute": "label",
-          "default": "'Typing…'",
+          "default": "'Typing...'",
           "required": false,
           "mutable": false,
-          "description": "Concise localized status text, ideally naming the participant who is typing."
+          "description": "Concise localized typing status."
         }
       },
       "events": [],
@@ -67,10 +67,10 @@
         "type": "string",
         "resolvedType": "string",
         "attribute": "label",
-        "default": "'Typing…'",
+        "default": "'Typing...'",
         "required": false,
         "mutable": false,
-        "description": "Concise localized status text, ideally naming the participant who is typing."
+        "description": "Concise localized typing status."
       }
     },
     "events": [],
@@ -120,7 +120,7 @@
     },
     {
       "path": "src/wc/components/TypingIndicator/TypingIndicator.tsx",
-      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-typing-indicator',\n  styleUrl: 'TypingIndicator.css',\n  scoped: true,\n})\nexport class TypingIndicator {\n  /** Concise localized status text, ideally naming the participant who is typing. */\n  @Prop() label: string = 'Typing…';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\" shimmer>\n          {this.label}\n        </ds-text>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-typing-indicator',\n  styleUrl: 'TypingIndicator.css',\n  scoped: true,\n})\nexport class TypingIndicator {\n  /** Concise localized typing status. */\n  @Prop() label: string = 'Typing...';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\" shimmer>\n          {this.label}\n        </ds-text>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/react/components.d.ts

@@ -12,11 +12,15 @@ export { DsBadge } from "./ds-badge.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";
+export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
+export { DsCardDataVizBar } from "./ds-card-data-viz-bar.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
+export { DsCardDataVizLine } from "./ds-card-data-viz-line.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
+export { DsChartBarStacked } from "./ds-chart-bar-stacked.js";
 export { DsChartBar } from "./ds-chart-bar.js";
 export { DsChartDonut } from "./ds-chart-donut.js";
 export { DsChartLegend } from "./ds-chart-legend.js";

package/dist/react/components.js

@@ -13,11 +13,15 @@ export { DsBadge } from "./ds-badge.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";
+export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
+export { DsCardDataVizBar } from "./ds-card-data-viz-bar.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
+export { DsCardDataVizLine } from "./ds-card-data-viz-line.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
+export { DsChartBarStacked } from "./ds-chart-bar-stacked.js";
 export { DsChartBar } from "./ds-chart-bar.js";
 export { DsChartDonut } from "./ds-chart-donut.js";
 export { DsChartLegend } from "./ds-chart-legend.js";

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

@@ -3,11 +3,12 @@
  * 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 BreadcrumbSelectDetail, 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>>;
+    onDsBreadcrumbSelect: EventName<DsBarTitleCustomEvent<BreadcrumbSelectDetail>>;
     onDsSectionChange: EventName<DsBarTitleCustomEvent<string>>;
     onDsAction: EventName<DsBarTitleCustomEvent<string>>;
 };

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

@@ -9,6 +9,7 @@ export const DsBarTitle = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onDsBack: 'dsBack',
+        onDsBreadcrumbSelect: 'dsBreadcrumbSelect',
         onDsSectionChange: 'dsSectionChange',
         onDsAction: 'dsAction'
     },

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

@@ -0,0 +1,12 @@
+/**
+ * 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 BreadcrumbSelectDetail, type DsBreadcrumbCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBreadcrumb as DsBreadcrumbElement } from "@ds-mo/ui/dist/components/ds-breadcrumb.js";
+export type DsBreadcrumbEvents = {
+    onDsSelect: EventName<DsBreadcrumbCustomEvent<BreadcrumbSelectDetail>>;
+};
+export declare const DsBreadcrumb: StencilReactComponent<DsBreadcrumbElement, DsBreadcrumbEvents, Components.DsBreadcrumb>;

package/dist/react/ds-breadcrumb.js

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

package/dist/react/ds-card-data-viz-bar.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 DsCardDataVizBarCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardDataVizBar as DsCardDataVizBarElement } from "@ds-mo/ui/dist/components/ds-card-data-viz-bar.js";
+export type DsCardDataVizBarEvents = {
+    onDsFilterClick: EventName<DsCardDataVizBarCustomEvent<void>>;
+};
+export declare const DsCardDataVizBar: StencilReactComponent<DsCardDataVizBarElement, DsCardDataVizBarEvents, Components.DsCardDataVizBar, 'heading'>;

package/dist/react/ds-card-data-viz-bar.js

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

package/dist/react/ds-card-data-viz-line.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 DsCardDataVizLineCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardDataVizLine as DsCardDataVizLineElement } from "@ds-mo/ui/dist/components/ds-card-data-viz-line.js";
+export type DsCardDataVizLineEvents = {
+    onDsFilterClick: EventName<DsCardDataVizLineCustomEvent<void>>;
+};
+export declare const DsCardDataVizLine: StencilReactComponent<DsCardDataVizLineElement, DsCardDataVizLineEvents, Components.DsCardDataVizLine, 'heading'>;

package/dist/react/ds-card-data-viz-line.js

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

package/dist/react/ds-chart-bar-stacked.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 { DsChartBarStacked as DsChartBarStackedElement } from "@ds-mo/ui/dist/components/ds-chart-bar-stacked.js";
+export type DsChartBarStackedEvents = NonNullable<unknown>;
+export declare const DsChartBarStacked: StencilReactComponent<DsChartBarStackedElement, DsChartBarStackedEvents, Components.DsChartBarStacked>;

package/dist/react/ds-chart-bar-stacked.js

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

package/dist/styles/prose.css

@@ -122,6 +122,7 @@
   :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   color: var(--color-foreground-brand);
   text-decoration: underline;
+  text-decoration-color: var(--color-foreground-tertiary);
 }
 
 :where(.ds-prose)

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

@@ -1,6 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';
 import { type BarTitleActionItem, type BarTitlePrimaryAction, type BarTitleSectionItem, type BarTitleVariant } from './bar-title-types';
 export declare class BarTitle {
+    el: HTMLElement;
     /** The page's single visible h1. */
     heading: string;
     /** Optional supporting copy shown in the expanded presentation. */
@@ -9,8 +11,12 @@ export declare class BarTitle {
     showBack: boolean;
     /** Accessible name for the leading Back action. */
     backAriaLabel: string;
-    /** Visible parent-page label used by the expanded Back breadcrumb. */
+    /** Visible parent-page label used by the expanded breadcrumb when breadcrumbs is empty. */
     backLabel: string;
+    /** Optional expanded ancestor path. Compact variants continue to use the Back action. */
+    breadcrumbs: BreadcrumbItem[];
+    /** Accessible name for the expanded breadcrumb navigation landmark. */
+    breadcrumbAriaLabel: string;
     /** Optional page sections exposed through the active-section menu. */
     sections: BarTitleSectionItem[];
     /** Id of the active page section. */
@@ -27,6 +33,8 @@ export declare class BarTitle {
     variant: BarTitleVariant;
     /** Emitted when the leading Back action is activated. */
     dsBack: EventEmitter<MouseEvent>;
+    /** Emitted when an authored expanded breadcrumb item is activated. */
+    dsBreadcrumbSelect: EventEmitter<BreadcrumbSelectDetail>;
     /** Emitted with the newly selected page-section id. */
     dsSectionChange: EventEmitter<string>;
     /** Emitted with the activated primary or overflow action id. */
@@ -42,9 +50,11 @@ export declare class BarTitle {
     private readonly actionMenuId;
     private sectionTriggerEl;
     private actionTriggerEl;
+    componentWillLoad(): void;
     handleSectionsChange(): void;
     handleActionsChange(): void;
     private get compact();
+    private get expandedBreadcrumbItems();
     /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */
     private get backTooltipLabel();
     private get primaryCollapsed();
@@ -67,6 +77,8 @@ export declare class BarTitle {
     private handleActionSelect;
     private renderSectionSelector;
     private renderActions;
+    private handleBreadcrumbSelect;
+    private renderBreadcrumb;
     private renderBack;
     render(): any;
 }

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

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';
+export declare class Breadcrumb {
+    /** Ordered path from the broadest ancestor to the nearest page. */
+    items: BreadcrumbItem[];
+    /** Accessible name for the breadcrumb navigation landmark. */
+    ariaLabel: string;
+    /** Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation. */
+    dsSelect: EventEmitter<BreadcrumbSelectDetail>;
+    private labelWidths;
+    private collapsedLabels;
+    private navElement?;
+    private listElement?;
+    private measurementElements;
+    private separatorElements;
+    private ellipsisMeasurement?;
+    private resizeObserver?;
+    private observedElement?;
+    private measurementFrame?;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    handleItemsChange(): void;
+    private observeContainer;
+    private scheduleMeasurement;
+    private measureLabels;
+    private handleSelect;
+    private renderItem;
+    render(): any;
+}
+//# sourceMappingURL=Breadcrumb.d.ts.map

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

@@ -0,0 +1,17 @@
+export interface BreadcrumbItem {
+    /** Stable value returned from dsSelect. */
+    id: string;
+    /** Visible caption label. */
+    label: string;
+    /** Optional accessible name when the visible label is not destination-specific enough. */
+    ariaLabel?: string;
+    /** Native destination. Omit when the route owner handles dsSelect. */
+    href?: string;
+    /** Marks this item as the current page and removes its interaction. */
+    isCurrent?: boolean;
+}
+export interface BreadcrumbSelectDetail {
+    item: BreadcrumbItem;
+    originalEvent: MouseEvent;
+}
+//# sourceMappingURL=breadcrumb-types.d.ts.map

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

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';
+export type CardDataVizBarWidth = CardShellDataVizWidth;
+/**
+ * Bar-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart
+ * region and an optional, content-sized static legend.
+ */
+export declare class CardDataVizBar {
+    el: HTMLElement;
+    /** Widget heading shown in the card header. */
+    heading: string;
+    /** Card width token — also sets matching min-height. */
+    cardWidth: CardDataVizBarWidth;
+    filterLabel: string;
+    /** Emits when the header filter control is activated. */
+    dsFilterClick: EventEmitter<void>;
+    private hasChartSlot;
+    private hasLegendSlot;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    private handleFilterClick;
+    render(): any;
+}
+//# sourceMappingURL=CardDataVizBar.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { CardDataVizBarWidth } from './CardDataVizBar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';
+export type CardDataVizLineWidth = CardShellDataVizWidth;
+/**
+ * Line-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart
+ * region and a content-sized, static legend.
+ */
+export declare class CardDataVizLine {
+    el: HTMLElement;
+    /** Widget heading shown in the card header. */
+    heading: string;
+    /** Card width token — also sets matching min-height. */
+    cardWidth: CardDataVizLineWidth;
+    filterLabel: string;
+    /** Emits when the header filter control is activated. */
+    dsFilterClick: EventEmitter<void>;
+    private hasChartSlot;
+    private hasLegendSlot;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    private handleFilterClick;
+    render(): any;
+}
+//# sourceMappingURL=CardDataVizLine.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { CardDataVizLineWidth } from './CardDataVizLine';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,15 @@
+import type { ChartSeries } from '../../utils/chart-types';
+export type ChartBarStackedVariant = 'stacked' | 'percentage';
+export declare class ChartBarStacked {
+    /** Ordered stack series. Set as a JS property (not an HTML attribute). */
+    series: ChartSeries[];
+    /** X-axis labels — must match each series' `data` length. Set as a JS property. */
+    categories: string[];
+    variant: ChartBarStackedVariant;
+    width: number;
+    height: number;
+    private valuesForCategory;
+    private accessibleLabel;
+    render(): any;
+}
+//# sourceMappingURL=ChartBarStacked.d.ts.map