@ds-mo/ui 12.9.0 → 13.0.0

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

@@ -224,7 +224,7 @@
     },
     {
       "path": "src/wc/components/ShellPage/ShellPage.tsx",
-      "content": "import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ShellResponsiveMode } from '../../shell/shell-responsive';\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  /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\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  @Watch('responsiveMode')\n  handleResponsiveModeChange() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n  }\n\n  componentDidLoad() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : 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.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\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    this.syncHeaderDividerInset(rootTop);\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 syncHeaderDividerInset(rootTop?: number) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    const ownsScrollTransition =\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy';\n    const expandedInset = resolveCssLengthPx('--dimension-space-400', 0);\n    if (\n      !ownsScrollTransition ||\n      !this.sentinelEl ||\n      !this.scrollRoot ||\n      this.headerTravel <= 0 ||\n      expandedInset <= 0\n    ) {\n      header.style.removeProperty('--ds-bar-title-divider-inset');\n      return;\n    }\n\n    const scrollRootTop =\n      rootTop ??\n      (this.scrollRoot === window\n        ? 0\n        : (this.scrollRoot as HTMLElement).getBoundingClientRect().top);\n    const remainingTravel = this.sentinelEl.getBoundingClientRect().top - scrollRootTop;\n    const progress = Math.min(1, Math.max(0, 1 - remainingTravel / this.headerTravel));\n    header.style.setProperty('--ds-bar-title-divider-inset', `${expandedInset * (1 - progress)}px`);\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    this.syncHeaderDividerInset();\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?.style.removeProperty('--ds-bar-title-divider-inset');\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    if (this.responsiveMode === 'mobile') return;\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements()\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\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--mobile': mobile,\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          <div\n            class=\"shell-page__desktop-header\"\n            hidden={mobile}\n            aria-hidden={mobile ? 'true' : undefined}\n            inert={mobile ? true : undefined}\n          >\n            <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n          </div>\n          <div\n            class=\"shell-page__mobile-header\"\n            hidden={!mobile}\n            aria-hidden={!mobile ? 'true' : undefined}\n            inert={!mobile ? true : undefined}\n          >\n            <slot name=\"mobile-header\" />\n          </div>\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 type { ShellResponsiveMode } from '../../shell/shell-responsive';\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  /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\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 reconnectFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n  private hasLoaded = false;\n\n  @Watch('headerCapacity')\n  @Watch('headerPresentation')\n  handleHeaderContractChange() {\n    this.syncHeaderVariant(true);\n  }\n\n  @Watch('responsiveMode')\n  handleResponsiveModeChange() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.connectRuntime();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  connectedCallback() {\n    if (!this.hasLoaded) return;\n    if (this.reconnectFrame !== null) cancelAnimationFrame(this.reconnectFrame);\n    this.reconnectFrame = requestAnimationFrame(() => {\n      this.reconnectFrame = null;\n      if (this.el.isConnected) this.connectRuntime();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.reconnectFrame !== null) cancelAnimationFrame(this.reconnectFrame);\n    this.reconnectFrame = null;\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n  }\n\n  private connectRuntime() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n    this.connectScrollRoot();\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 get scrollRootResolved(): boolean {\n    const shell = this.el.closest('ds-shell-app');\n    if (!shell) return true;\n    const expected = shell.querySelector<HTMLElement>('.shell-app__content');\n    return expected !== null && this.scrollRoot === expected;\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.syncHeaderDividerInset(rootTop);\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 syncHeaderDividerInset(rootTop?: number) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    const ownsScrollTransition =\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy';\n    const expandedInset = resolveCssLengthPx('--dimension-space-400', 0);\n    if (\n      !ownsScrollTransition ||\n      !this.sentinelEl ||\n      !this.scrollRoot ||\n      this.headerTravel <= 0 ||\n      expandedInset <= 0\n    ) {\n      header.style.removeProperty('--ds-bar-title-divider-inset');\n      return;\n    }\n\n    const scrollRootTop =\n      rootTop ??\n      (this.scrollRoot === window\n        ? 0\n        : (this.scrollRoot as HTMLElement).getBoundingClientRect().top);\n    const remainingTravel = this.sentinelEl.getBoundingClientRect().top - scrollRootTop;\n    const progress = Math.min(1, Math.max(0, 1 - remainingTravel / this.headerTravel));\n    header.style.setProperty('--ds-bar-title-divider-inset', `${expandedInset * (1 - progress)}px`);\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 (\n        (geometryReady && this.scrollRootResolved && framesElapsed >= 2) ||\n        framesRemaining <= 0\n      ) {\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    this.syncHeaderDividerInset();\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?.style.removeProperty('--ds-bar-title-divider-inset');\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        childList: true,\n        subtree: true,\n      });\n    }\n    this.syncHeaderVariant(true);\n    this.scheduleHeaderGeometrySync(header);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    if (this.responsiveMode === 'mobile') return;\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements()\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\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--mobile': mobile,\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          <div\n            class=\"shell-page__desktop-header\"\n            hidden={mobile}\n            aria-hidden={mobile ? 'true' : undefined}\n            inert={mobile ? true : undefined}\n          >\n            <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n          </div>\n          <div\n            class=\"shell-page__mobile-header\"\n            hidden={!mobile}\n            aria-hidden={!mobile ? 'true' : undefined}\n            inert={!mobile ? true : undefined}\n          >\n            <slot name=\"mobile-header\" />\n          </div>\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"
     },
     {

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

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "shell-tools",
   "title": "ShellTools",
-  "description": "Responsive persistent host for shell tools, adapting PanelTools rail and drawer chrome to full-stage mobile Search, Agents, and Inbox surfaces.",
+  "description": "Responsive persistent host for explicitly defined global tools, adapting PanelTools desktop/tablet chrome to configured mobile destinations and groups.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -12,10 +12,10 @@
     "intentStatus": "complete",
     "intent": {
       "audience": "specialized",
-      "status": "experimental",
-      "summary": "Responsive persistent host for shell tools, adapting PanelTools rail and drawer chrome to full-stage mobile Search, Agents, and Inbox surfaces.",
+      "status": "stable",
+      "summary": "Responsive persistent host for explicitly defined global tools, adapting PanelTools desktop/tablet chrome to configured mobile destinations and groups.",
       "useWhen": [
-        "A ShellApp must preserve the same Search, Agents, Messages, Stacks, Activity, and Help product owners across desktop, tablet, and mobile."
+        "A ShellApp must preserve the same product-owned global tool views across desktop, tablet, and mobile."
       ],
       "avoidWhen": [
         "The tools exist only in desktop and tablet chrome; PanelTools remains supported for that case.",
@@ -25,7 +25,7 @@
         {
           "when": "Only legacy rail and drawer behavior is required.",
           "component": "component:ds-panel-tools",
-          "reason": "PanelTools remains the backward-compatible desktop and tablet primitive."
+          "reason": "PanelTools is the direct desktop and tablet rail-and-drawer primitive."
         }
       ],
       "commonlyComposedWith": [
@@ -45,7 +45,8 @@
       ],
       "states": [
         "The application owns open and activeTool and replaces headers when tool depth changes.",
-        "Messages, Stacks, and Activity map to one mobile Inbox destination while retaining the actual active tool id.",
+        "Items with mobileDestination inbox map to one mobile Inbox destination while retaining the actual active tool id; the canonical recipe groups Messages, Stacks, and Activity.",
+        "Stable tool ids own named slots; label, order, rail placement, shortcut, and mobile destination are explicit item data.",
         "Switching responsive mode must not recreate application-owned slotted product elements."
       ],
       "responsiveBehavior": [
@@ -78,7 +79,7 @@
       "props": {
         "activeTool": {
           "type": "PanelToolsToolId | ''",
-          "resolvedType": "\"\" | \"activity\" | \"agents\" | \"help\" | \"messages\" | \"search\" | \"stacks\"",
+          "resolvedType": "string",
           "attribute": "active-tool",
           "default": "''",
           "required": false,
@@ -94,19 +95,11 @@
         },
         "headers": {
           "type": "PanelToolsHeaders",
-          "resolvedType": "\"activity\" | \"agents\" | \"help\" | \"messages\" | \"search\" | \"stacks\" | PanelToolsHeaderConfig",
+          "resolvedType": "PanelToolsHeaderConfig | string",
           "default": "{}",
           "required": false,
           "mutable": false
         },
-        "headersJson": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "headers-json",
-          "default": "''",
-          "required": false,
-          "mutable": false
-        },
         "inboxLabel": {
           "type": "string",
           "resolvedType": "string",
@@ -130,14 +123,6 @@
           "required": false,
           "mutable": false
         },
-        "itemsJson": {
-          "type": "string",
-          "resolvedType": "string",
-          "attribute": "items-json",
-          "default": "''",
-          "required": false,
-          "mutable": false
-        },
         "open": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -240,7 +225,7 @@
     "props": {
       "activeTool": {
         "type": "PanelToolsToolId | ''",
-        "resolvedType": "\"\" | \"activity\" | \"agents\" | \"help\" | \"messages\" | \"search\" | \"stacks\"",
+        "resolvedType": "string",
         "attribute": "active-tool",
         "default": "''",
         "required": false,
@@ -256,19 +241,11 @@
       },
       "headers": {
         "type": "PanelToolsHeaders",
-        "resolvedType": "\"activity\" | \"agents\" | \"help\" | \"messages\" | \"search\" | \"stacks\" | PanelToolsHeaderConfig",
+        "resolvedType": "PanelToolsHeaderConfig | string",
         "default": "{}",
         "required": false,
         "mutable": false
       },
-      "headersJson": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "headers-json",
-        "default": "''",
-        "required": false,
-        "mutable": false
-      },
       "inboxLabel": {
         "type": "string",
         "resolvedType": "string",
@@ -292,14 +269,6 @@
         "required": false,
         "mutable": false
       },
-      "itemsJson": {
-        "type": "string",
-        "resolvedType": "string",
-        "attribute": "items-json",
-        "default": "''",
-        "required": false,
-        "mutable": false
-      },
       "open": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -446,7 +415,7 @@
     },
     {
       "path": "src/wc/components/ShellTools/ShellTools.tsx",
-      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_TOOL_IDS,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n  parsePanelToolsItems,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\nconst MOBILE_VIEW_ORDER: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n  'help',\n];\n\n@Component({\n  tag: 'ds-shell-tools',\n  styleUrl: 'ShellTools.css',\n  scoped: true,\n})\nexport class ShellTools {\n  @Element() el!: HTMLElement;\n\n  /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n  @Prop() items: PanelToolsItem[] = [];\n  @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n  @Prop() headers: PanelToolsHeaders = {};\n  @Prop({ attribute: 'headers-json' }) headersJson: string = '';\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n\n    /*\n     * Consumers update ShellTools and their slotted master/detail layout in the\n     * same render. Forward the request immediately so PanelTools can conceal\n     * its surface until its matching render class commits on the next frame.\n     */\n    if (this.panelToolsEl && this.panelToolsEl.getAttribute('presentation') !== next) {\n      this.panelToolsEl.setAttribute('presentation', next);\n    }\n  }\n\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n\n  private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n  private get resolvedItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedItems\n      .filter(item => !item.isInactive && isShellInboxTool(item.id))\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  private get mobileActiveTool(): PanelToolsToolId | '' {\n    if (!isShellInboxTool(this.activeTool)) return this.activeTool;\n    return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n  }\n\n  componentWillLoad() {\n    this.reconcileAvailability();\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  handleItemsChange() {\n    this.reconcileAvailability();\n  }\n\n  private reconcileAvailability() {\n    const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    if (Object.keys(this.headers).length) return this.headers;\n    if (!this.headersJson.trim()) return {};\n    try {\n      const parsed = JSON.parse(this.headersJson);\n      return parsed && typeof parsed === 'object' && !Array.isArray(parsed)\n        ? (parsed as PanelToolsHeaders)\n        : {};\n    } catch {\n      return {};\n    }\n  }\n\n  private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n    return this.resolvedHeaders()[tool] ?? {};\n  }\n\n  private activateMobileTool(id: PanelToolsToolId) {\n    const item = this.resolvedItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  }\n\n  private selectInboxTool = (event: CustomEvent<string>) => {\n    const id = event.detail;\n    if (!isShellInboxTool(id) || id === this.mobileActiveTool) return;\n    this.open = true;\n    this.activeTool = id;\n    this.dsToolChange.emit({ id, selected: true });\n  };\n\n  private handlePanelToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    this.activeTool = event.detail.id;\n    this.open = event.detail.selected;\n  };\n\n  private handlePanelPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    this.presentation = event.detail.presentation;\n  };\n\n  private handleMobileHeaderAction = (\n    tool: PanelToolsToolId,\n    id: string,\n    event: CustomEvent<MouseEvent>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool, id });\n  };\n\n  /** Match PanelTools' imperative activation contract in every responsive mode. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.activateTool(id);\n      return;\n    }\n    this.activateMobileTool(id);\n  }\n\n  /** Close the active global tool surface. */\n  @Method()\n  async closeDrawer() {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.closeDrawer();\n      return;\n    }\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) this.dsToolChange.emit({ id, selected: false });\n  }\n\n  /** Focus an application-owned action in the visible shared tool header. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.focusHeaderAction(id);\n      return;\n    }\n    const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private renderForwardedSlots() {\n    return PANEL_TOOLS_TOOL_IDS.flatMap(id => [\n      <slot name={id} slot={id} />,\n      <slot name={`${id}-view`} slot={`${id}-view`} />,\n    ]);\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"shell-tools__desktop\">\n        <ds-panel-tools\n          open={this.open}\n          activeTool={this.activeTool}\n          presentation={this.presentation}\n          fullscreenHeaderMode={this.fullscreenHeaderMode}\n          items={this.resolvedItems}\n          headers={this.resolvedHeaders()}\n          storageKey={this.storageKey}\n          toolsLabel={this.toolsLabel}\n          toolShortcutsLabel={this.toolShortcutsLabel}\n          ref={element => {\n            this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n          }}\n          onDsToolChange={this.handlePanelToolChange}\n          onDsPresentationChange={this.handlePanelPresentationChange}\n        >\n          {this.renderForwardedSlots()}\n        </ds-panel-tools>\n      </div>\n    );\n  }\n\n  private renderMobileHeader(tool: PanelToolsToolId) {\n    const header = this.activeHeader(tool);\n    const configuredTitle = header.title?.trim();\n    const title = configuredTitle || PANEL_TOOLS_LABELS[tool];\n    const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n    const sections =\n      isShellInboxTool(tool) && !header.showBack\n        ? this.availableInboxTools.map(id => ({\n            id,\n            label: PANEL_TOOLS_LABELS[id],\n          }))\n        : [];\n\n    return (\n      <ds-mobile-header\n        class=\"shell-tools__mobile-header\"\n        heading={title}\n        headingLevel=\"h2\"\n        sections={sections}\n        value={tool}\n        sectionsAriaLabel={this.inboxNavigationLabel}\n        onDsSectionChange={this.selectInboxTool}\n      >\n        {header.showBack ? (\n          <ds-tooltip\n            slot=\"leading\"\n            label={header.backAriaLabel || 'Back'}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={header.backIcon || 'ChevronLeft'}\n              size=\"md\"\n              aria-label={header.backAriaLabel || 'Back'}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={() => this.dsHeaderBack.emit({ tool })}\n            />\n          </ds-tooltip>\n        ) : null}\n        {actions.map(action => (\n          <ds-tooltip\n            slot=\"trailing\"\n            key={action.id}\n            label={action.ariaLabel}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              id={action.triggerId || undefined}\n              data-header-action-id={action.id}\n              variant=\"icon\"\n              icon={action.icon}\n              size=\"md\"\n              aria-label={action.ariaLabel}\n              haspopup={action.haspopup}\n              controls={action.controls}\n              expanded={action.expanded}\n              pressed={action.pressed}\n              isActive={!!action.expanded}\n              isInactive={action.isInactive}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.handleMobileHeaderAction(tool, action.id, event)}\n            />\n          </ds-tooltip>\n        ))}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderMobile() {\n    const tool = this.mobileActiveTool;\n    return (\n      <div\n        class=\"shell-tools__mobile\"\n        aria-hidden={this.open && tool ? undefined : 'true'}\n        inert={this.open && tool ? undefined : true}\n      >\n        {tool ? this.renderMobileHeader(tool) : null}\n        <div class=\"shell-tools__mobile-body\">\n          {MOBILE_VIEW_ORDER.map(id => {\n            const active = this.open && id === tool;\n            return (\n              <div\n                class={{\n                  'shell-tools__view': true,\n                  'shell-tools__view--active': active,\n                }}\n                hidden={!active}\n                aria-hidden={active ? undefined : 'true'}\n                inert={active ? undefined : true}\n              >\n                <slot name={`${id}-view`}>\n                  <slot name={id} />\n                </slot>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role={\n          mobile\n            ? this.presentation === 'fullscreen'\n              ? 'dialog'\n              : 'complementary'\n            : undefined\n        }\n        aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={mobile ? this.toolsLabel : undefined}\n      >\n        {mobile ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  PANEL_TOOLS_LABELS,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n  orderPanelToolsItems,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-tools',\n  styleUrl: 'ShellTools.css',\n  scoped: true,\n})\nexport class ShellTools {\n  @Element() el!: HTMLElement;\n\n  /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n  @Prop() items: PanelToolsItem[] = [];\n  @Prop() headers: PanelToolsHeaders = {};\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n\n    /*\n     * Consumers update ShellTools and their slotted master/detail layout in the\n     * same render. Forward the request immediately so PanelTools can conceal\n     * its surface until its matching render class commits on the next frame.\n     */\n    if (this.panelToolsEl && this.panelToolsEl.getAttribute('presentation') !== next) {\n      this.panelToolsEl.setAttribute('presentation', next);\n    }\n  }\n\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n\n  private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n  private get resolvedItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedItems\n      .filter(\n        item =>\n          !item.isInactive &&\n          (item.mobileDestination === 'inbox' || isShellInboxTool(item.id))\n      )\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  private get mobileViewOrder(): PanelToolsToolId[] {\n    return orderPanelToolsItems(this.resolvedItems).map(item => item.id);\n  }\n\n  private toolLabel(id: PanelToolsToolId): string {\n    const item = this.resolvedItems.find(candidate => candidate.id === id);\n    return (\n      item?.label ??\n      item?.ariaLabel ??\n      PANEL_TOOLS_LABELS[id as keyof typeof PANEL_TOOLS_LABELS] ??\n      id\n    );\n  }\n\n  private get mobileActiveTool(): PanelToolsToolId | '' {\n    const item = this.resolvedItems.find(candidate => candidate.id === this.activeTool);\n    const inbox =\n      item?.mobileDestination === 'inbox' || isShellInboxTool(this.activeTool);\n    if (!inbox) return this.activeTool;\n    return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n  }\n\n  componentWillLoad() {\n    this.reconcileAvailability();\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.reconcileAvailability();\n  }\n\n  private reconcileAvailability() {\n    const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n    return this.resolvedHeaders()[tool] ?? {};\n  }\n\n  private activateMobileTool(id: PanelToolsToolId) {\n    const item = this.resolvedItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  }\n\n  private selectInboxTool = (event: CustomEvent<string>) => {\n    const id = event.detail;\n    if (!this.availableInboxTools.includes(id) || id === this.mobileActiveTool) return;\n    this.open = true;\n    this.activeTool = id;\n    this.dsToolChange.emit({ id, selected: true });\n  };\n\n  private handlePanelToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    this.activeTool = event.detail.id;\n    this.open = event.detail.selected;\n  };\n\n  private handlePanelPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    this.presentation = event.detail.presentation;\n  };\n\n  private handleMobileHeaderAction = (\n    tool: PanelToolsToolId,\n    id: string,\n    event: CustomEvent<MouseEvent>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool, id });\n  };\n\n  /** Match PanelTools' imperative activation contract in every responsive mode. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.activateTool(id);\n      return;\n    }\n    this.activateMobileTool(id);\n  }\n\n  /** Close the active global tool surface. */\n  @Method()\n  async closeDrawer() {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.closeDrawer();\n      return;\n    }\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) this.dsToolChange.emit({ id, selected: false });\n  }\n\n  /** Focus an application-owned action in the visible shared tool header. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.focusHeaderAction(id);\n      return;\n    }\n    const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private renderForwardedSlots() {\n    return this.mobileViewOrder.flatMap(id => [\n      <slot name={id} slot={id} />,\n      <slot name={`${id}-view`} slot={`${id}-view`} />,\n    ]);\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"shell-tools__desktop\">\n        <ds-panel-tools\n          open={this.open}\n          activeTool={this.activeTool}\n          presentation={this.presentation}\n          fullscreenHeaderMode={this.fullscreenHeaderMode}\n          items={this.resolvedItems}\n          headers={this.resolvedHeaders()}\n          storageKey={this.storageKey}\n          toolsLabel={this.toolsLabel}\n          toolShortcutsLabel={this.toolShortcutsLabel}\n          ref={element => {\n            this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n          }}\n          onDsToolChange={this.handlePanelToolChange}\n          onDsPresentationChange={this.handlePanelPresentationChange}\n        >\n          {this.renderForwardedSlots()}\n        </ds-panel-tools>\n      </div>\n    );\n  }\n\n  private renderMobileHeader(tool: PanelToolsToolId) {\n    const header = this.activeHeader(tool);\n    const configuredTitle = header.title?.trim();\n    const title = configuredTitle || this.toolLabel(tool);\n    const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n    const sections =\n      isShellInboxTool(tool) && !header.showBack\n        ? this.availableInboxTools.map(id => ({\n            id,\n            label: this.toolLabel(id),\n          }))\n        : [];\n\n    return (\n      <ds-mobile-header\n        class=\"shell-tools__mobile-header\"\n        heading={title}\n        headingLevel=\"h2\"\n        sections={sections}\n        value={tool}\n        sectionsAriaLabel={this.inboxNavigationLabel}\n        onDsSectionChange={this.selectInboxTool}\n      >\n        {header.showBack ? (\n          <ds-tooltip\n            slot=\"leading\"\n            label={header.backAriaLabel || 'Back'}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={header.backIcon || 'ChevronLeft'}\n              size=\"md\"\n              aria-label={header.backAriaLabel || 'Back'}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={() => this.dsHeaderBack.emit({ tool })}\n            />\n          </ds-tooltip>\n        ) : null}\n        {actions.map(action => (\n          <ds-tooltip\n            slot=\"trailing\"\n            key={action.id}\n            label={action.ariaLabel}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              id={action.triggerId || undefined}\n              data-header-action-id={action.id}\n              variant=\"icon\"\n              icon={action.icon}\n              size=\"md\"\n              aria-label={action.ariaLabel}\n              haspopup={action.haspopup}\n              controls={action.controls}\n              expanded={action.expanded}\n              pressed={action.pressed}\n              isActive={!!action.expanded}\n              isInactive={action.isInactive}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.handleMobileHeaderAction(tool, action.id, event)}\n            />\n          </ds-tooltip>\n        ))}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderMobile() {\n    const tool = this.mobileActiveTool;\n    return (\n      <div\n        class=\"shell-tools__mobile\"\n        aria-hidden={this.open && tool ? undefined : 'true'}\n        inert={this.open && tool ? undefined : true}\n      >\n        {tool ? this.renderMobileHeader(tool) : null}\n        <div class=\"shell-tools__mobile-body\">\n          {this.mobileViewOrder.map(id => {\n            const active = this.open && id === tool;\n            return (\n              <div\n                class={{\n                  'shell-tools__view': true,\n                  'shell-tools__view--active': active,\n                }}\n                hidden={!active}\n                aria-hidden={active ? undefined : 'true'}\n                inert={active ? undefined : true}\n              >\n                <slot name={`${id}-view`}>\n                  <slot name={id} />\n                </slot>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role={\n          mobile\n            ? this.presentation === 'fullscreen'\n              ? 'dialog'\n              : 'complementary'\n            : undefined\n        }\n        aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={mobile ? this.toolsLabel : undefined}\n      >\n        {mobile ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -651,7 +651,7 @@
     },
     {
       "path": "src/wc/components/Slider/Slider.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Slider {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n  @Prop({ mutable: true }) value: SliderValue = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Minimum number of steps kept between two range thumbs. */\n  @Prop() minStepsBetweenValues: number = 0;\n  /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n  @Prop() label: string | undefined;\n  /** Show the formatted current value beside the visible label. */\n  @Prop() showValue: boolean = true;\n  @Prop() size: SliderSize = 'md';\n  @Prop() orientation: SliderOrientation = 'horizontal';\n  /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n  @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keep the value focusable and submittable while preventing changes. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop() isInactive: boolean = false;\n  /** Direct accessible name for a single-thumb slider without a visible label. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id references for a visible single-thumb slider label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id references for supporting guidance or error text. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Accessible label for the lower thumb in a range slider. */\n  @Prop() startLabel: string = 'Minimum value';\n  /** Accessible label for the upper thumb in a range slider. */\n  @Prop() endLabel: string = 'Maximum value';\n  /** Human-readable value text for a single slider or both range thumbs. */\n  @Prop() valueText: string | undefined;\n  /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n  @Prop() valueTexts: string[] = [];\n  /** Locale used by Intl.NumberFormat for the visible value. */\n  @Prop() locale: string | undefined;\n  /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n  @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n  @Prop() valuePrefix: string = '';\n  @Prop() valueSuffix: string = '';\n  @Prop() rangeSeparator: string = '–';\n  /** Id applied to the first native range input. */\n  @Prop() inputId: string | undefined;\n\n  /** Emitted continuously while the value changes. */\n  @Event() dsChange!: EventEmitter<SliderValue>;\n  /** Emitted when a pointer or keyboard value change is committed. */\n  @Event() dsCommit!: EventEmitter<SliderValue>;\n\n  @State() private formDisabled = false;\n  @State() private dragging = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private activeThumbIndex = 0;\n  @State() private externalLabelledby: string | undefined;\n\n  private readonly generatedId = `ds-slider-${++sliderId}`;\n  private readonly labelId = `${this.generatedId}-label`;\n  private initialValue: SliderValue = 0;\n  private lastCommittedValue: SliderValue = 0;\n  private pointerId: number | null = null;\n  private pointerStartValue: SliderValue = 0;\n  private controlEl: HTMLDivElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.cloneValue(this.publicValue);\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isDisabled || !this.name) {\n      this.internals.setFormValue(null);\n      return;\n    }\n\n    if (this.isRange) {\n      const data = new FormData();\n      values.forEach(value => data.append(this.name as string, String(value)));\n      this.internals.setFormValue(data, JSON.stringify(values));\n    } else {\n      this.internals.setFormValue(String(values[0]), String(values[0]));\n    }\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.cloneValue(this.initialValue);\n    this.lastCommittedValue = this.cloneValue(this.initialValue);\n    this.dragging = false;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state !== 'string') return;\n    if (this.isRange) {\n      try {\n        const restored = JSON.parse(state);\n        if (Array.isArray(restored)) this.value = restored.map(Number).slice(0, 2);\n      } catch {\n        this.value = this.cloneValue(this.initialValue);\n      }\n    } else {\n      const restored = Number(state);\n      if (Number.isFinite(restored)) this.value = restored;\n    }\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n  }\n\n  @Method()\n  async setFocus(index: number = 0) {\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get isRange(): boolean {\n    return Array.isArray(this.value);\n  }\n\n  private get safeStep(): number {\n    return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n  }\n\n  private get safeMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  private get safeMax(): number {\n    const minimum = this.safeMin;\n    return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n  }\n\n  private get minimumGap(): number {\n    const steps = Number.isFinite(this.minStepsBetweenValues)\n      ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n      : 0;\n    return steps * this.safeStep;\n  }\n\n  private get resolvedValues(): number[] {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    if (!this.isRange) return [this.snap(Number(this.value))];\n\n    const raw = this.value as number[];\n    let lower = this.snap(Number(raw[0] ?? minimum));\n    let upper = this.snap(Number(raw[1] ?? maximum));\n    if (lower > upper) [lower, upper] = [upper, lower];\n\n    const gap = Math.min(this.minimumGap, maximum - minimum);\n    if (upper - lower < gap) {\n      upper = Math.min(maximum, this.snap(lower + gap));\n      lower = Math.max(minimum, this.snap(upper - gap));\n    }\n    return [lower, upper];\n  }\n\n  private get publicValue(): SliderValue {\n    const values = this.resolvedValues;\n    return this.isRange ? [...values] : values[0];\n  }\n\n  private cloneValue(value: SliderValue): SliderValue {\n    return Array.isArray(value) ? [...value] : value;\n  }\n\n  private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n    if (Array.isArray(a) && Array.isArray(b)) {\n      return a.length === b.length && a.every((value, index) => value === b[index]);\n    }\n    return !Array.isArray(a) && !Array.isArray(b) && a === b;\n  }\n\n  private decimalPlaces(value: number): number {\n    const text = String(value).toLowerCase();\n    if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n    return text.includes('.') ? text.split('.')[1].length : 0;\n  }\n\n  private snap(value: number): number {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    const candidate = Number.isFinite(value) ? value : minimum;\n    const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n    const precision = Math.min(10, Math.max(\n      this.decimalPlaces(minimum),\n      this.decimalPlaces(maximum),\n      this.decimalPlaces(this.safeStep),\n    ));\n    return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n  }\n\n  private percent(value: number): number {\n    return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n  }\n\n  private allowedMin(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 1\n      ? Math.min(this.safeMax, values[0] + this.minimumGap)\n      : this.safeMin;\n  }\n\n  private allowedMax(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 0\n      ? Math.max(this.safeMin, values[1] - this.minimumGap)\n      : this.safeMax;\n  }\n\n  private setValueAt(index: number, next: number): boolean {\n    const previous = this.publicValue;\n    const values = this.resolvedValues;\n    const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n    values[index] = constrained;\n    const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n    if (this.valuesEqual(previous, nextValue)) return false;\n\n    this.value = nextValue;\n    this.dsChange.emit(this.cloneValue(nextValue));\n    return true;\n  }\n\n  private commitIfChanged() {\n    const current = this.publicValue;\n    if (this.valuesEqual(current, this.lastCommittedValue)) return;\n    this.lastCommittedValue = this.cloneValue(current);\n    this.dsCommit.emit(this.cloneValue(current));\n  }\n\n  private syncNativeLabels() {\n    if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n    const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n      return label.id;\n    });\n    if (ids.length) this.externalLabelledby = ids.join(' ');\n  }\n\n  private formattedValue(value: number, index: number): string {\n    const authored = this.valueTexts[index] ?? this.valueText;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n    } catch {\n      number = String(value);\n    }\n    return `${this.valuePrefix}${number}${this.valueSuffix}`;\n  }\n\n  private ariaValueText(value: number, index: number): string | undefined {\n    if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n      return this.formattedValue(value, index);\n    }\n    return undefined;\n  }\n\n  private handleNativeInput = (event: Event, index: number) => {\n    const input = event.target as HTMLInputElement;\n    this.activeThumbIndex = index;\n    if (this.readOnly || this.isDisabled) {\n      input.value = String(this.resolvedValues[index]);\n      return;\n    }\n    this.setValueAt(index, Number(input.value));\n  };\n\n  private handleNativeChange = () => {\n    if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.readOnly) return;\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private handleFocus = (index: number) => {\n    this.activeThumbIndex = index;\n    this.focused = true;\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleHostClick = (event: MouseEvent) => {\n    if (event.target !== this.el || this.isDisabled) return;\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n  };\n\n  private pointerPercent(event: PointerEvent): number {\n    const control = this.controlEl;\n    if (!control) return 0;\n    const rect = control.getBoundingClientRect();\n    const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n    const thumbSize = thumb\n      ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n      : 0;\n    // Both alignment modes keep the complete thumb inside the control. Edge\n    // alignment lets the rail span the control while center alignment insets\n    // the rail to the same thumb-center travel.\n    const inset = thumbSize / 2;\n\n    if (this.orientation === 'vertical') {\n      const travel = Math.max(1, rect.height - inset * 2);\n      return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n    }\n\n    const travel = Math.max(1, rect.width - inset * 2);\n    const percent = (event.clientX - rect.left - inset) / travel;\n    return Math.min(1, Math.max(0, percent));\n  }\n\n  private valueFromPointer(event: PointerEvent): number {\n    return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n  }\n\n  private closestThumbIndex(value: number, target: EventTarget | null): number {\n    const targetElement = target instanceof HTMLElement\n      ? target.closest<HTMLElement>('.slider__thumb')\n      : null;\n    if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n    if (!this.isRange) return 0;\n\n    const values = this.resolvedValues;\n    const lowerDistance = Math.abs(value - values[0]);\n    const upperDistance = Math.abs(value - values[1]);\n    if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n    return lowerDistance < upperDistance ? 0 : 1;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n    event.preventDefault();\n    const value = this.valueFromPointer(event);\n    const index = this.closestThumbIndex(value, event.target);\n    this.activeThumbIndex = index;\n    this.pointerId = event.pointerId;\n    this.pointerStartValue = this.cloneValue(this.publicValue);\n    this.dragging = true;\n    this.setValueAt(index, value);\n    this.controlEl?.setPointerCapture(event.pointerId);\n    requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (this.pointerId !== event.pointerId || !this.dragging) return;\n    event.preventDefault();\n    this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n  };\n\n  private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n    if (this.pointerId !== event.pointerId) return;\n    if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n    this.pointerId = null;\n    this.dragging = false;\n    this.touched = true;\n    if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId = index === 0\n      ? this.inputId ?? `${this.generatedId}-input`\n      : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n    const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n    const labelledby = this.isRange\n      ? undefined\n      : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n    const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n    return (\n      <div\n        class={{\n          slider__thumb: true,\n          'slider__thumb--active': index === this.activeThumbIndex,\n        }}\n        data-index={String(index)}\n        style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n      >\n        <input\n          class=\"slider__input\"\n          type=\"range\"\n          id={inputId}\n          min={this.allowedMin(index)}\n          max={this.allowedMax(index)}\n          step={this.safeStep}\n          value={value}\n          disabled={this.isDisabled}\n          aria-label={directLabel}\n          aria-labelledby={labelledby}\n          aria-describedby={this.ariaDescribedby}\n          aria-valuetext={this.ariaValueText(value, index)}\n          aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          onInput={(event: Event) => this.handleNativeInput(event, index)}\n          onChange={this.handleNativeChange}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n      </div>\n    );\n  }\n\n  render() {\n    const values = this.resolvedValues;\n    const first = values[0];\n    const last = values[values.length - 1];\n    const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n    const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n    const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n    return (\n      <Host\n        aria-disabled={this.isDisabled ? 'true' : undefined}\n        class={{\n          slider: true,\n          'ds-field-stack': true,\n          [`slider--${this.size}`]: true,\n          [`slider--${this.orientation}`]: true,\n          [`slider--thumb-${this.thumbAlignment}`]: true,\n          'slider--range': this.isRange,\n          'slider--readonly': this.readOnly,\n          'ds-control-inactive': this.isDisabled,\n        }}\n        data-orientation={this.orientation}\n        data-disabled={this.isDisabled ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-dragging={this.dragging ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-filled=\"\"\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-valid={!this.isDisabled ? '' : undefined}\n        onClick={this.handleHostClick}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"slider__label-row\">\n            {this.label && (\n              <ds-text\n                class=\"slider__label\"\n                as=\"label\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                emphasis\n                for={firstInputId}\n                textId={this.labelId}\n              >\n                {this.label}\n              </ds-text>\n            )}\n            {this.showValue && (\n              <ds-text\n                class=\"slider__value\"\n                as=\"span\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                fontFeature=\"tabular-nums\"\n              >\n                {valueDisplay}\n              </ds-text>\n            )}\n          </div>\n        )}\n        <div\n          class=\"slider__control\"\n          ref={element => { this.controlEl = element ?? null; }}\n          style={{\n            '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n            '--ds-slider-end-pct': String(this.percent(last)),\n          } as Record<string, string>}\n          onPointerDown={this.handlePointerDown}\n          onPointerMove={this.handlePointerMove}\n          onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n          onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n        >\n          <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  restoreNumberArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n} from '../../utils';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Slider {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n  @Prop({ mutable: true }) value: SliderValue = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Minimum number of steps kept between two range thumbs. */\n  @Prop() minStepsBetweenValues: number = 0;\n  /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n  @Prop() label: string | undefined;\n  /** Show the formatted current value beside the visible label. */\n  @Prop() showValue: boolean = true;\n  @Prop() size: SliderSize = 'md';\n  @Prop() orientation: SliderOrientation = 'horizontal';\n  /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n  @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keep the value focusable and submittable while preventing changes. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop() isInactive: boolean = false;\n  /** Direct accessible name for a single-thumb slider without a visible label. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id references for a visible single-thumb slider label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id references for supporting guidance or error text. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Accessible label for the lower thumb in a range slider. */\n  @Prop() startLabel: string = 'Minimum value';\n  /** Accessible label for the upper thumb in a range slider. */\n  @Prop() endLabel: string = 'Maximum value';\n  /** Human-readable value text for a single slider or both range thumbs. */\n  @Prop() valueText: string | undefined;\n  /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n  @Prop() valueTexts: string[] = [];\n  /** Locale used by Intl.NumberFormat for the visible value. */\n  @Prop() locale: string | undefined;\n  /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n  @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n  @Prop() valuePrefix: string = '';\n  @Prop() valueSuffix: string = '';\n  @Prop() rangeSeparator: string = '–';\n  /** Id applied to the first native range input. */\n  @Prop() inputId: string | undefined;\n\n  /** Emitted continuously while the value changes. */\n  @Event() dsChange!: EventEmitter<SliderValue>;\n  /** Emitted when a pointer or keyboard value change is committed. */\n  @Event() dsCommit!: EventEmitter<SliderValue>;\n\n  @State() private formDisabled = false;\n  @State() private dragging = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private activeThumbIndex = 0;\n  @State() private externalLabelledby: string | undefined;\n\n  private readonly generatedId = `ds-slider-${++sliderId}`;\n  private readonly labelId = `${this.generatedId}-label`;\n  private initialValue: SliderValue = 0;\n  private lastCommittedValue: SliderValue = 0;\n  private pointerId: number | null = null;\n  private pointerStartValue: SliderValue = 0;\n  private controlEl: HTMLDivElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.cloneValue(this.publicValue);\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isRange) {\n      setRepeatedFormControlValue(this.internals, this.name, values, {\n        inactive: this.isDisabled,\n      });\n    } else {\n      const value = String(values[0]);\n      setFormControlValue(this.internals, this.name ? value : null, {\n        inactive: this.isDisabled,\n        state: value,\n      });\n    }\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.cloneValue(this.initialValue);\n    this.lastCommittedValue = this.cloneValue(this.initialValue);\n    this.dragging = false;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (this.isRange) {\n      const restored = restoreNumberArrayFormState(state, 2);\n      this.value = restored.length\n        ? restored\n        : this.cloneValue(this.initialValue);\n    } else {\n      const restored = Number(restoreStringFormState(state, 'NaN'));\n      if (Number.isFinite(restored)) this.value = restored;\n    }\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n  }\n\n  @Method()\n  async setFocus(index: number = 0) {\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get isRange(): boolean {\n    return Array.isArray(this.value);\n  }\n\n  private get safeStep(): number {\n    return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n  }\n\n  private get safeMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  private get safeMax(): number {\n    const minimum = this.safeMin;\n    return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n  }\n\n  private get minimumGap(): number {\n    const steps = Number.isFinite(this.minStepsBetweenValues)\n      ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n      : 0;\n    return steps * this.safeStep;\n  }\n\n  private get resolvedValues(): number[] {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    if (!this.isRange) return [this.snap(Number(this.value))];\n\n    const raw = this.value as number[];\n    let lower = this.snap(Number(raw[0] ?? minimum));\n    let upper = this.snap(Number(raw[1] ?? maximum));\n    if (lower > upper) [lower, upper] = [upper, lower];\n\n    const gap = Math.min(this.minimumGap, maximum - minimum);\n    if (upper - lower < gap) {\n      upper = Math.min(maximum, this.snap(lower + gap));\n      lower = Math.max(minimum, this.snap(upper - gap));\n    }\n    return [lower, upper];\n  }\n\n  private get publicValue(): SliderValue {\n    const values = this.resolvedValues;\n    return this.isRange ? [...values] : values[0];\n  }\n\n  private cloneValue(value: SliderValue): SliderValue {\n    return Array.isArray(value) ? [...value] : value;\n  }\n\n  private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n    if (Array.isArray(a) && Array.isArray(b)) {\n      return a.length === b.length && a.every((value, index) => value === b[index]);\n    }\n    return !Array.isArray(a) && !Array.isArray(b) && a === b;\n  }\n\n  private decimalPlaces(value: number): number {\n    const text = String(value).toLowerCase();\n    if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n    return text.includes('.') ? text.split('.')[1].length : 0;\n  }\n\n  private snap(value: number): number {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    const candidate = Number.isFinite(value) ? value : minimum;\n    const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n    const precision = Math.min(10, Math.max(\n      this.decimalPlaces(minimum),\n      this.decimalPlaces(maximum),\n      this.decimalPlaces(this.safeStep),\n    ));\n    return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n  }\n\n  private percent(value: number): number {\n    return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n  }\n\n  private allowedMin(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 1\n      ? Math.min(this.safeMax, values[0] + this.minimumGap)\n      : this.safeMin;\n  }\n\n  private allowedMax(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 0\n      ? Math.max(this.safeMin, values[1] - this.minimumGap)\n      : this.safeMax;\n  }\n\n  private setValueAt(index: number, next: number): boolean {\n    const previous = this.publicValue;\n    const values = this.resolvedValues;\n    const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n    values[index] = constrained;\n    const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n    if (this.valuesEqual(previous, nextValue)) return false;\n\n    this.value = nextValue;\n    this.dsChange.emit(this.cloneValue(nextValue));\n    return true;\n  }\n\n  private commitIfChanged() {\n    const current = this.publicValue;\n    if (this.valuesEqual(current, this.lastCommittedValue)) return;\n    this.lastCommittedValue = this.cloneValue(current);\n    this.dsCommit.emit(this.cloneValue(current));\n  }\n\n  private syncNativeLabels() {\n    if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n    const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n      return label.id;\n    });\n    if (ids.length) this.externalLabelledby = ids.join(' ');\n  }\n\n  private formattedValue(value: number, index: number): string {\n    const authored = this.valueTexts[index] ?? this.valueText;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n    } catch {\n      number = String(value);\n    }\n    return `${this.valuePrefix}${number}${this.valueSuffix}`;\n  }\n\n  private ariaValueText(value: number, index: number): string | undefined {\n    if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n      return this.formattedValue(value, index);\n    }\n    return undefined;\n  }\n\n  private handleNativeInput = (event: Event, index: number) => {\n    const input = event.target as HTMLInputElement;\n    this.activeThumbIndex = index;\n    if (this.readOnly || this.isDisabled) {\n      input.value = String(this.resolvedValues[index]);\n      return;\n    }\n    this.setValueAt(index, Number(input.value));\n  };\n\n  private handleNativeChange = () => {\n    if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.readOnly) return;\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private handleFocus = (index: number) => {\n    this.activeThumbIndex = index;\n    this.focused = true;\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleHostClick = (event: MouseEvent) => {\n    if (event.target !== this.el || this.isDisabled) return;\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n  };\n\n  private pointerPercent(event: PointerEvent): number {\n    const control = this.controlEl;\n    if (!control) return 0;\n    const rect = control.getBoundingClientRect();\n    const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n    const thumbSize = thumb\n      ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n      : 0;\n    // Both alignment modes keep the complete thumb inside the control. Edge\n    // alignment lets the rail span the control while center alignment insets\n    // the rail to the same thumb-center travel.\n    const inset = thumbSize / 2;\n\n    if (this.orientation === 'vertical') {\n      const travel = Math.max(1, rect.height - inset * 2);\n      return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n    }\n\n    const travel = Math.max(1, rect.width - inset * 2);\n    const percent = (event.clientX - rect.left - inset) / travel;\n    return Math.min(1, Math.max(0, percent));\n  }\n\n  private valueFromPointer(event: PointerEvent): number {\n    return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n  }\n\n  private closestThumbIndex(value: number, target: EventTarget | null): number {\n    const targetElement = target instanceof HTMLElement\n      ? target.closest<HTMLElement>('.slider__thumb')\n      : null;\n    if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n    if (!this.isRange) return 0;\n\n    const values = this.resolvedValues;\n    const lowerDistance = Math.abs(value - values[0]);\n    const upperDistance = Math.abs(value - values[1]);\n    if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n    return lowerDistance < upperDistance ? 0 : 1;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n    event.preventDefault();\n    const value = this.valueFromPointer(event);\n    const index = this.closestThumbIndex(value, event.target);\n    this.activeThumbIndex = index;\n    this.pointerId = event.pointerId;\n    this.pointerStartValue = this.cloneValue(this.publicValue);\n    this.dragging = true;\n    this.setValueAt(index, value);\n    this.controlEl?.setPointerCapture(event.pointerId);\n    requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (this.pointerId !== event.pointerId || !this.dragging) return;\n    event.preventDefault();\n    this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n  };\n\n  private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n    if (this.pointerId !== event.pointerId) return;\n    if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n    this.pointerId = null;\n    this.dragging = false;\n    this.touched = true;\n    if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId = index === 0\n      ? this.inputId ?? `${this.generatedId}-input`\n      : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n    const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n    const labelledby = this.isRange\n      ? undefined\n      : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n    const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n    return (\n      <div\n        class={{\n          slider__thumb: true,\n          'slider__thumb--active': index === this.activeThumbIndex,\n        }}\n        data-index={String(index)}\n        style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n      >\n        <input\n          class=\"slider__input\"\n          type=\"range\"\n          id={inputId}\n          min={this.allowedMin(index)}\n          max={this.allowedMax(index)}\n          step={this.safeStep}\n          value={value}\n          disabled={this.isDisabled}\n          aria-label={directLabel}\n          aria-labelledby={labelledby}\n          aria-describedby={this.ariaDescribedby}\n          aria-valuetext={this.ariaValueText(value, index)}\n          aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          onInput={(event: Event) => this.handleNativeInput(event, index)}\n          onChange={this.handleNativeChange}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n      </div>\n    );\n  }\n\n  render() {\n    const values = this.resolvedValues;\n    const first = values[0];\n    const last = values[values.length - 1];\n    const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n    const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n    const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n    return (\n      <Host\n        aria-disabled={this.isDisabled ? 'true' : undefined}\n        class={{\n          slider: true,\n          'ds-field-stack': true,\n          [`slider--${this.size}`]: true,\n          [`slider--${this.orientation}`]: true,\n          [`slider--thumb-${this.thumbAlignment}`]: true,\n          'slider--range': this.isRange,\n          'slider--readonly': this.readOnly,\n          'ds-control-inactive': this.isDisabled,\n        }}\n        data-orientation={this.orientation}\n        data-disabled={this.isDisabled ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-dragging={this.dragging ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-filled=\"\"\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-valid={!this.isDisabled ? '' : undefined}\n        onClick={this.handleHostClick}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"slider__label-row\">\n            {this.label && (\n              <ds-text\n                class=\"slider__label\"\n                as=\"label\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                emphasis\n                for={firstInputId}\n                textId={this.labelId}\n              >\n                {this.label}\n              </ds-text>\n            )}\n            {this.showValue && (\n              <ds-text\n                class=\"slider__value\"\n                as=\"span\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                fontFeature=\"tabular-nums\"\n              >\n                {valueDisplay}\n              </ds-text>\n            )}\n          </div>\n        )}\n        <div\n          class=\"slider__control\"\n          ref={element => { this.controlEl = element ?? null; }}\n          style={{\n            '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n            '--ds-slider-end-pct': String(this.percent(last)),\n          } as Record<string, string>}\n          onPointerDown={this.handlePointerDown}\n          onPointerMove={this.handlePointerMove}\n          onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n          onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n        >\n          <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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

@@ -354,7 +354,7 @@
     },
     {
       "path": "src/wc/components/Switch/Switch.tsx",
-      "content": "import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { DEFAULT_REQUIRED_MESSAGE, setRequiredValidity } from '../../utils';\n\nexport type SwitchSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.presentation) this.focused = true;\n  };\n\n  private handleBlur = () => {\n    if (this.presentation) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && !this.checked;\n    const dirty = this.checked !== this.initialChecked;\n    // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-focused={!this.presentation && this.focused ? '' : undefined}\n        data-filled={!this.presentation && this.checked ? '' : undefined}\n        data-dirty={!this.presentation && dirty ? '' : undefined}\n        data-touched={!this.presentation && this.touched ? '' : undefined}\n        data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n        data-invalid={!this.presentation && invalid ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--lg': this.size === 'lg',\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { DEFAULT_REQUIRED_MESSAGE, setFormControlValue, setRequiredValidity } from '../../utils';\n\nexport type SwitchSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    setFormControlValue(this.internals, submissionValue, { inactive, state });\n\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.presentation) this.focused = true;\n  };\n\n  private handleBlur = () => {\n    if (this.presentation) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && !this.checked;\n    const dirty = this.checked !== this.initialChecked;\n    // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-focused={!this.presentation && this.focused ? '' : undefined}\n        data-filled={!this.presentation && this.checked ? '' : undefined}\n        data-dirty={!this.presentation && dirty ? '' : undefined}\n        data-touched={!this.presentation && this.touched ? '' : undefined}\n        data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n        data-invalid={!this.presentation && invalid ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--lg': this.size === 'lg',\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/react/components.d.ts

@@ -15,13 +15,9 @@ 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 { DsCardDataViz } from "./ds-card-data-viz.js";
 export { DsCardOverview } from "./ds-card-overview.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";
@@ -56,11 +52,8 @@ export { DsPanelToolSearch } from "./ds-panel-tool-search.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadio } from "./ds-radio.js";
 export { DsScrollOverlay } from "./ds-scroll-overlay.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 { DsShellTools } from "./ds-shell-tools.js";
 export { DsSkeleton } from "./ds-skeleton.js";

package/dist/react/components.js

@@ -16,13 +16,9 @@ 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 { DsCardDataViz } from "./ds-card-data-viz.js";
 export { DsCardOverview } from "./ds-card-overview.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";
@@ -57,11 +53,8 @@ export { DsPanelToolSearch } from "./ds-panel-tool-search.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadio } from "./ds-radio.js";
 export { DsScrollOverlay } from "./ds-scroll-overlay.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 { DsShellTools } from "./ds-shell-tools.js";
 export { DsSkeleton } from "./ds-skeleton.js";

package/dist/react/ds-card-data-viz.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 DsCardDataVizCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardDataViz as DsCardDataVizElement } from "@ds-mo/ui/dist/components/ds-card-data-viz.js";
+export type DsCardDataVizEvents = {
+    onDsFilterClick: EventName<DsCardDataVizCustomEvent<void>>;
+};
+export declare const DsCardDataViz: StencilReactComponent<DsCardDataVizElement, DsCardDataVizEvents, Components.DsCardDataViz, 'heading'>;

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

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

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

@@ -3,14 +3,13 @@
  * 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 DsMenuCustomEvent, type MenuItemData, type ShellGradientPreset } from "@ds-mo/ui";
+import { type DsMenuCustomEvent, type MenuItemData } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsMenu as DsMenuElement } from "@ds-mo/ui/dist/components/ds-menu.js";
 export type DsMenuEvents = {
     onDsClose: EventName<DsMenuCustomEvent<void>>;
     onDsAfterClose: EventName<DsMenuCustomEvent<void>>;
     onDsSelect: EventName<DsMenuCustomEvent<MenuItemData>>;
-    onDsGradientSelect: EventName<DsMenuCustomEvent<ShellGradientPreset>>;
     onDsSwatchSelect: EventName<DsMenuCustomEvent<string>>;
 };
 export declare const DsMenu: StencilReactComponent<DsMenuElement, DsMenuEvents, Components.DsMenu>;

package/dist/react/ds-menu.js

@@ -11,7 +11,6 @@ export const DsMenu = /*@__PURE__*/ createComponent({
         onDsClose: 'dsClose',
         onDsAfterClose: 'dsAfterClose',
         onDsSelect: 'dsSelect',
-        onDsGradientSelect: 'dsGradientSelect',
         onDsSwatchSelect: 'dsSwatchSelect'
     },
     defineCustomElement: defineDsMenu

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

@@ -3,11 +3,11 @@
  * 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 DsSelectCustomEvent } from "@ds-mo/ui";
+import { type DsSelectCustomEvent, type SelectValue } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsSelect as DsSelectElement } from "@ds-mo/ui/dist/components/ds-select.js";
 export type DsSelectEvents = {
-    onDsChange: EventName<DsSelectCustomEvent<string>>;
+    onDsChange: EventName<DsSelectCustomEvent<SelectValue>>;
     onDsClear: EventName<DsSelectCustomEvent<void>>;
     onDsOpenChange: EventName<DsSelectCustomEvent<boolean>>;
 };

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

@@ -3,12 +3,35 @@
  * 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 DsShellAppCustomEvent, type ShellResponsiveMode } from "@ds-mo/ui";
+import { type BreadcrumbSelectDetail, type DsShellAppCustomEvent, type NavChromeStyle, type PanelNavUserActionDetail, type PanelToolsToolId, type ShellResponsiveMode } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsShellApp as DsShellAppElement } from "@ds-mo/ui/dist/components/ds-shell-app.js";
 export type DsShellAppEvents = {
     onDsResponsiveModeChange: EventName<DsShellAppCustomEvent<{
         mode: ShellResponsiveMode;
     }>>;
+    onDsNavSelect: EventName<DsShellAppCustomEvent<string>>;
+    onDsTabChange: EventName<DsShellAppCustomEvent<string>>;
+    onDsSubsectionChange: EventName<DsShellAppCustomEvent<string>>;
+    onDsPageBack: EventName<DsShellAppCustomEvent<MouseEvent>>;
+    onDsBreadcrumbSelect: EventName<DsShellAppCustomEvent<BreadcrumbSelectDetail>>;
+    onDsPageAction: EventName<DsShellAppCustomEvent<string>>;
+    onDsToolChange: EventName<DsShellAppCustomEvent<{
+        id: PanelToolsToolId;
+        selected: boolean;
+    }>>;
+    onDsHeaderBack: EventName<DsShellAppCustomEvent<{
+        tool: PanelToolsToolId;
+    }>>;
+    onDsHeaderAction: EventName<DsShellAppCustomEvent<{
+        tool: PanelToolsToolId;
+        id: string;
+    }>>;
+    onDsPresentationChange: EventName<DsShellAppCustomEvent<{
+        presentation: 'drawer' | 'fullscreen';
+    }>>;
+    onDsBrowseContextChange: EventName<DsShellAppCustomEvent<NavChromeStyle>>;
+    onDsNavFooterAction: EventName<DsShellAppCustomEvent<void>>;
+    onDsNavUserAction: EventName<DsShellAppCustomEvent<PanelNavUserActionDetail>>;
 };
 export declare const DsShellApp: StencilReactComponent<DsShellAppElement, DsShellAppEvents, Components.DsShellApp>;