@ds-mo/ui 12.3.0 → 12.4.1

package/dist/components/ds-shell-page.js.map

@@ -1 +1 @@
-{"version":3,"names":["resolveShellPageHeaderVariant","presentation","capacity","pageTopVisible","shellPageCss","ShellPage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headerPresentation","contentInset","sentinelEl","spacerEl","stickyHeaderEl","headerEl","expandedHeaderHeight","headerTravel","expandedGeometryFrozen","headerResizeObserver","headerMutationObserver","headerRevealFrame","headerGeometryFrame","scrollRoot","handleScroll","rootTop","window","getBoundingClientRect","top","nextPageTopVisible","classList","contains","variantClass","captureExpandedHeaderGeometry","el","handleHeaderSlotChange","event","slot","target","header","assignedElements","flatten","find","element","tagName","toLowerCase","observeHeader","handleHeaderContractChange","syncHeaderVariant","componentDidLoad","findHeader","connectScrollRoot","componentDidRender","disconnectedCallback","disconnect","cancelHeaderReveal","cancelHeaderGeometrySync","removeEventListener","effectiveVariant","headerCapacity","headerContractResolved","undefined","isScrollCompacted","composedParent","assignedSlot","parentElement","findScrollRoot","ancestor","document","documentElement","overflow","getComputedStyle","overflowY","next","addEventListener","passive","querySelector","compactHeaderHeight","resolveCssLengthPx","setHeaderTravel","distance","Math","max","abs","style","setProperty","measureHeaderTravel","anchor","compactHeight","headerRect","anchorRect","height","expandedAnchorTop","compactAnchorTop","setSpacerHeight","variant","setStickyHeaderOffset","renderedVariant","syncRenderedHeaderGeometry","cancelAnimationFrame","scheduleHeaderGeometrySync","framesRemaining","MAX_HEADER_GEOMETRY_FRAMES","framesElapsed","sync","geometryReady","requestAnimationFrame","removeAttribute","revealHeaderWhenSynced","MAX_HEADER_REVEAL_FRAMES","reveal","concealUntilSynced","setAttribute","renderedVariantIsStale","ResizeObserver","observe","MutationObserver","attributes","attributeFilter","render","h","Host","key","role","class","ref","name","onSlotchange"],"sources":["src/wc/components/ShellPage/shell-page-responsive.ts","src/wc/components/ShellPage/ShellPage.css?tag=ds-shell-page&encapsulation=scoped","src/wc/components/ShellPage/ShellPage.tsx"],"sourcesContent":["import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\n\nexport function resolveShellPageHeaderVariant(\n  presentation: ShellPageHeaderPresentation,\n  capacity: ShellPageCapacity,\n  pageTopVisible: boolean\n): BarTitleVariant {\n  if (presentation !== 'auto') return presentation;\n  if (capacity === 'constrained') return 'constrained';\n  if (capacity === 'compact' || !pageTopVisible) return 'compact';\n  return 'expanded';\n}\n",":host {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: var(--ds-shell-page-header-travel, 0);\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: var(--ds-shell-page-sticky-offset, 0);\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--color-background-primary);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__sticky-header ::slotted(ds-bar-title),\n.shell-page__sticky-header ::slotted(ds-bar-workflow) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--color-background-primary);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n  private static readonly MAX_HEADER_GEOMETRY_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic capacity/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Available page-header capacity supplied by the owning application shell. */\n  @Prop() headerCapacity?: ShellPageCapacity;\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private stickyHeaderEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private headerTravel = 0;\n  private expandedGeometryFrozen = false;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerMutationObserver: MutationObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private headerGeometryFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n\n  @Watch('headerCapacity')\n  @Watch('headerPresentation')\n  handleHeaderContractChange() {\n    this.syncHeaderVariant(true);\n  }\n\n  componentDidLoad() {\n    this.observeHeader(this.findHeader());\n    this.connectScrollRoot();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  disconnectedCallback() {\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.headerCapacity ?? 'roomy',\n      this.pageTopVisible\n    );\n  }\n\n  private get headerContractResolved(): boolean {\n    return this.headerPresentation !== 'auto' || this.headerCapacity !== undefined;\n  }\n\n  private get isScrollCompacted(): boolean {\n    return (\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy' && !this.pageTopVisible\n    );\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {\n        return ancestor as HTMLElement;\n      }\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    const next = this.findScrollRoot();\n    if (next === this.scrollRoot) return;\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = next;\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    const nextPageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n    if (\n      !nextPageTopVisible &&\n      this.pageTopVisible &&\n      this.headerEl?.classList.contains(this.variantClass('expanded'))\n    ) {\n      this.captureExpandedHeaderGeometry(this.headerEl);\n      this.expandedGeometryFrozen = true;\n    }\n    if (\n      nextPageTopVisible &&\n      this.expandedGeometryFrozen &&\n      this.el.getBoundingClientRect().top >= rootTop\n    ) {\n      this.expandedGeometryFrozen = false;\n      if (this.headerEl?.classList.contains(this.variantClass('expanded'))) {\n        this.captureExpandedHeaderGeometry(this.headerEl);\n      }\n    }\n    this.pageTopVisible = nextPageTopVisible;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private setHeaderTravel(distance: number) {\n    const next = Math.max(0, distance);\n    if (Math.abs(next - this.headerTravel) < 0.5) return;\n    this.headerTravel = next;\n    this.el.style.setProperty('--ds-shell-page-header-travel', `${next}px`);\n    this.handleScroll();\n  }\n\n  private measureHeaderTravel(header: BarTitleElement) {\n    const anchor = header.querySelector<HTMLElement>('[data-shell-page-header-anchor]');\n    const compactHeight = this.compactHeaderHeight;\n    if (!anchor || compactHeight <= 0) return;\n\n    const headerRect = header.getBoundingClientRect();\n    const anchorRect = anchor.getBoundingClientRect();\n    if (headerRect.height <= 0 || anchorRect.height <= 0) return;\n\n    const expandedAnchorTop = anchorRect.top - headerRect.top;\n    const compactAnchorTop = Math.max(0, (compactHeight - anchorRect.height) / 2);\n    this.setHeaderTravel(expandedAnchorTop - compactAnchorTop);\n  }\n\n  private captureExpandedHeaderGeometry(header: BarTitleElement) {\n    this.expandedHeaderHeight = header.getBoundingClientRect().height;\n    this.measureHeaderTravel(header);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private setStickyHeaderOffset(renderedVariant: BarTitleVariant) {\n    this.stickyHeaderEl?.style.setProperty(\n      '--ds-shell-page-sticky-offset',\n      renderedVariant === 'expanded' &&\n        this.headerPresentation === 'auto' &&\n        this.headerCapacity === 'roomy'\n        ? `${-this.headerTravel}px`\n        : '0px'\n    );\n  }\n\n  private syncRenderedHeaderGeometry(header: BarTitleElement) {\n    const renderedVariant = this.effectiveVariant;\n    if (!header.classList.contains(this.variantClass(renderedVariant))) return;\n\n    // Update both flow-preservation pieces before reading layout. Otherwise a\n    // reverse compact → expanded render can briefly contain the tall header and\n    // the compact spacer together, giving browser scroll anchoring a transient\n    // height change to compensate.\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n    this.setStickyHeaderOffset(renderedVariant);\n\n    if (renderedVariant === 'expanded' && !this.expandedGeometryFrozen) {\n      this.captureExpandedHeaderGeometry(header);\n      this.setStickyHeaderOffset(renderedVariant);\n    }\n  }\n\n  private cancelHeaderGeometrySync() {\n    if (this.headerGeometryFrame !== null) cancelAnimationFrame(this.headerGeometryFrame);\n    this.headerGeometryFrame = null;\n  }\n\n  private scheduleHeaderGeometrySync(header: BarTitleElement) {\n    this.cancelHeaderGeometrySync();\n    let framesRemaining = ShellPage.MAX_HEADER_GEOMETRY_FRAMES;\n    let framesElapsed = 0;\n    const sync = () => {\n      if (this.headerEl !== header) return;\n      framesRemaining -= 1;\n      framesElapsed += 1;\n      // In WebKit a child's componentDidLoad can precede its assignment into\n      // the parent's rendered slot. Revalidate after ShellApp has had a frame\n      // to expose the actual content scroller.\n      this.connectScrollRoot();\n      this.syncRenderedHeaderGeometry(header);\n      const geometryReady =\n        this.effectiveVariant !== 'expanded' ||\n        (this.expandedHeaderHeight > 0 && this.headerTravel > 0);\n      if ((geometryReady && framesElapsed >= 2) || framesRemaining <= 0) {\n        this.headerGeometryFrame = null;\n        return;\n      }\n      this.headerGeometryFrame = requestAnimationFrame(sync);\n    };\n    this.headerGeometryFrame = requestAnimationFrame(sync);\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil normally re-renders within a frame or two of a prop change. Stop\n    // polling at the cap, but fail closed: a stale variant must never paint.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      if (framesRemaining <= 0) {\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    if (!this.headerContractResolved) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n      return;\n    }\n\n    const next = this.effectiveVariant;\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (!renderedVariantIsStale) this.syncRenderedHeaderGeometry(header);\n    if (concealUntilSynced) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) header.variant = next;\n    if (concealUntilSynced) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.expandedGeometryFrozen = false;\n    this.setHeaderTravel(0);\n    this.setSpacerHeight(0);\n    this.stickyHeaderEl?.style.setProperty('--ds-shell-page-sticky-offset', '0px');\n\n    if (!header) return;\n    if (header.classList.contains(this.variantClass('expanded'))) {\n      this.captureExpandedHeaderGeometry(header);\n    }\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.headerMutationObserver = new MutationObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerMutationObserver.observe(header, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n    }\n    this.syncHeaderVariant(true);\n    this.scheduleHeaderGeometrySync(header);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements({ flatten: true })\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"main\"\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div\n          ref={el => {\n            this.stickyHeaderEl = el ?? null;\n          }}\n          class=\"shell-page__sticky-header\"\n        >\n          <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["resolveShellPageHeaderVariant","presentation","capacity","pageTopVisible","shellPageCss","ShellPage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headerPresentation","contentInset","sentinelEl","spacerEl","stickyHeaderEl","headerEl","expandedHeaderHeight","headerTravel","expandedGeometryFrozen","headerResizeObserver","headerMutationObserver","headerRevealFrame","headerGeometryFrame","scrollRoot","handleScroll","rootTop","window","getBoundingClientRect","top","nextPageTopVisible","classList","contains","variantClass","captureExpandedHeaderGeometry","el","handleHeaderSlotChange","event","slot","target","header","assignedElements","find","element","tagName","toLowerCase","observeHeader","handleHeaderContractChange","syncHeaderVariant","componentDidLoad","findHeader","connectScrollRoot","componentDidRender","disconnectedCallback","disconnect","cancelHeaderReveal","cancelHeaderGeometrySync","removeEventListener","effectiveVariant","headerCapacity","headerContractResolved","undefined","isScrollCompacted","composedParent","assignedSlot","parentElement","findScrollRoot","ancestor","document","documentElement","overflow","getComputedStyle","overflowY","next","addEventListener","passive","querySelector","compactHeaderHeight","resolveCssLengthPx","setHeaderTravel","distance","Math","max","abs","style","setProperty","measureHeaderTravel","anchor","compactHeight","headerRect","anchorRect","height","expandedAnchorTop","compactAnchorTop","setSpacerHeight","variant","setStickyHeaderOffset","renderedVariant","syncRenderedHeaderGeometry","cancelAnimationFrame","scheduleHeaderGeometrySync","framesRemaining","MAX_HEADER_GEOMETRY_FRAMES","framesElapsed","sync","geometryReady","requestAnimationFrame","removeAttribute","revealHeaderWhenSynced","MAX_HEADER_REVEAL_FRAMES","reveal","concealUntilSynced","setAttribute","renderedVariantIsStale","ResizeObserver","observe","MutationObserver","attributes","attributeFilter","render","h","Host","key","role","class","ref","name","onSlotchange"],"sources":["src/wc/components/ShellPage/shell-page-responsive.ts","src/wc/components/ShellPage/ShellPage.css?tag=ds-shell-page&encapsulation=scoped","src/wc/components/ShellPage/ShellPage.tsx"],"sourcesContent":["import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\n\nexport function resolveShellPageHeaderVariant(\n  presentation: ShellPageHeaderPresentation,\n  capacity: ShellPageCapacity,\n  pageTopVisible: boolean\n): BarTitleVariant {\n  if (presentation !== 'auto') return presentation;\n  if (capacity === 'constrained') return 'constrained';\n  if (capacity === 'compact' || !pageTopVisible) return 'compact';\n  return 'expanded';\n}\n",":host {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: var(--ds-shell-page-header-travel, 0);\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: var(--ds-shell-page-sticky-offset, 0);\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--color-background-primary);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__sticky-header ::slotted(ds-bar-title),\n.shell-page__sticky-header ::slotted(ds-bar-workflow) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--color-background-primary);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n  private static readonly MAX_HEADER_GEOMETRY_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic capacity/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Available page-header capacity supplied by the owning application shell. */\n  @Prop() headerCapacity?: ShellPageCapacity;\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private stickyHeaderEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private headerTravel = 0;\n  private expandedGeometryFrozen = false;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerMutationObserver: MutationObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private headerGeometryFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n\n  @Watch('headerCapacity')\n  @Watch('headerPresentation')\n  handleHeaderContractChange() {\n    this.syncHeaderVariant(true);\n  }\n\n  componentDidLoad() {\n    this.observeHeader(this.findHeader());\n    this.connectScrollRoot();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  disconnectedCallback() {\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.headerCapacity ?? 'roomy',\n      this.pageTopVisible\n    );\n  }\n\n  private get headerContractResolved(): boolean {\n    return this.headerPresentation !== 'auto' || this.headerCapacity !== undefined;\n  }\n\n  private get isScrollCompacted(): boolean {\n    return (\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy' && !this.pageTopVisible\n    );\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {\n        return ancestor as HTMLElement;\n      }\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    const next = this.findScrollRoot();\n    if (next === this.scrollRoot) return;\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = next;\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    const nextPageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n    if (\n      !nextPageTopVisible &&\n      this.pageTopVisible &&\n      this.headerEl?.classList.contains(this.variantClass('expanded'))\n    ) {\n      this.captureExpandedHeaderGeometry(this.headerEl);\n      this.expandedGeometryFrozen = true;\n    }\n    if (\n      nextPageTopVisible &&\n      this.expandedGeometryFrozen &&\n      this.el.getBoundingClientRect().top >= rootTop\n    ) {\n      this.expandedGeometryFrozen = false;\n      if (this.headerEl?.classList.contains(this.variantClass('expanded'))) {\n        this.captureExpandedHeaderGeometry(this.headerEl);\n      }\n    }\n    this.pageTopVisible = nextPageTopVisible;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private setHeaderTravel(distance: number) {\n    const next = Math.max(0, distance);\n    if (Math.abs(next - this.headerTravel) < 0.5) return;\n    this.headerTravel = next;\n    this.el.style.setProperty('--ds-shell-page-header-travel', `${next}px`);\n    this.handleScroll();\n  }\n\n  private measureHeaderTravel(header: BarTitleElement) {\n    const anchor = header.querySelector<HTMLElement>('[data-shell-page-header-anchor]');\n    const compactHeight = this.compactHeaderHeight;\n    if (!anchor || compactHeight <= 0) return;\n\n    const headerRect = header.getBoundingClientRect();\n    const anchorRect = anchor.getBoundingClientRect();\n    if (headerRect.height <= 0 || anchorRect.height <= 0) return;\n\n    const expandedAnchorTop = anchorRect.top - headerRect.top;\n    const compactAnchorTop = Math.max(0, (compactHeight - anchorRect.height) / 2);\n    this.setHeaderTravel(expandedAnchorTop - compactAnchorTop);\n  }\n\n  private captureExpandedHeaderGeometry(header: BarTitleElement) {\n    this.expandedHeaderHeight = header.getBoundingClientRect().height;\n    this.measureHeaderTravel(header);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private setStickyHeaderOffset(renderedVariant: BarTitleVariant) {\n    this.stickyHeaderEl?.style.setProperty(\n      '--ds-shell-page-sticky-offset',\n      renderedVariant === 'expanded' &&\n        this.headerPresentation === 'auto' &&\n        this.headerCapacity === 'roomy'\n        ? `${-this.headerTravel}px`\n        : '0px'\n    );\n  }\n\n  private syncRenderedHeaderGeometry(header: BarTitleElement) {\n    const renderedVariant = this.effectiveVariant;\n    if (!header.classList.contains(this.variantClass(renderedVariant))) return;\n\n    // Update both flow-preservation pieces before reading layout. Otherwise a\n    // reverse compact → expanded render can briefly contain the tall header and\n    // the compact spacer together, giving browser scroll anchoring a transient\n    // height change to compensate.\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n    this.setStickyHeaderOffset(renderedVariant);\n\n    if (renderedVariant === 'expanded' && !this.expandedGeometryFrozen) {\n      this.captureExpandedHeaderGeometry(header);\n      this.setStickyHeaderOffset(renderedVariant);\n    }\n  }\n\n  private cancelHeaderGeometrySync() {\n    if (this.headerGeometryFrame !== null) cancelAnimationFrame(this.headerGeometryFrame);\n    this.headerGeometryFrame = null;\n  }\n\n  private scheduleHeaderGeometrySync(header: BarTitleElement) {\n    this.cancelHeaderGeometrySync();\n    let framesRemaining = ShellPage.MAX_HEADER_GEOMETRY_FRAMES;\n    let framesElapsed = 0;\n    const sync = () => {\n      if (this.headerEl !== header) return;\n      framesRemaining -= 1;\n      framesElapsed += 1;\n      // In WebKit a child's componentDidLoad can precede its assignment into\n      // the parent's rendered slot. Revalidate after ShellApp has had a frame\n      // to expose the actual content scroller.\n      this.connectScrollRoot();\n      this.syncRenderedHeaderGeometry(header);\n      const geometryReady =\n        this.effectiveVariant !== 'expanded' ||\n        (this.expandedHeaderHeight > 0 && this.headerTravel > 0);\n      if ((geometryReady && framesElapsed >= 2) || framesRemaining <= 0) {\n        this.headerGeometryFrame = null;\n        return;\n      }\n      this.headerGeometryFrame = requestAnimationFrame(sync);\n    };\n    this.headerGeometryFrame = requestAnimationFrame(sync);\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil normally re-renders within a frame or two of a prop change. Stop\n    // polling at the cap, but fail closed: a stale variant must never paint.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      if (framesRemaining <= 0) {\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    if (!this.headerContractResolved) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n      return;\n    }\n\n    const next = this.effectiveVariant;\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (!renderedVariantIsStale) this.syncRenderedHeaderGeometry(header);\n    if (concealUntilSynced) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) header.variant = next;\n    if (concealUntilSynced) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.expandedGeometryFrozen = false;\n    this.setHeaderTravel(0);\n    this.setSpacerHeight(0);\n    this.stickyHeaderEl?.style.setProperty('--ds-shell-page-sticky-offset', '0px');\n\n    if (!header) return;\n    if (header.classList.contains(this.variantClass('expanded'))) {\n      this.captureExpandedHeaderGeometry(header);\n    }\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.headerMutationObserver = new MutationObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerMutationObserver.observe(header, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n    }\n    this.syncHeaderVariant(true);\n    this.scheduleHeaderGeometrySync(header);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements()\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"main\"\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div\n          ref={el => {\n            this.stickyHeaderEl = el ?? null;\n          }}\n          class=\"shell-page__sticky-header\"\n        >\n          <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-shell-tools.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsShellTools extends Components.DsShellTools, HTMLElement {}
+export const DsShellTools: {
+    prototype: DsShellTools;
+    new (): DsShellTools;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-shell-tools.js

@@ -0,0 +1,2 @@
+import{p as s,H as e,c as t,h as o,a as i,t as l}from"./index.js";import{p as a,r,a as n,b as h,c as d,d as c}from"./p-CgHTNfC1.js";import{i as m,r as u}from"./p-BrusnEYP.js";import{d as b}from"./p-CH6cNXXF.js";import{d as f}from"./p-CoYFJD-w.js";import{d as p}from"./p-BAfG3M8z.js";import{d as g}from"./p-Cpr3K41-.js";import{d as v}from"./p-CtD24EyI.js";import{d as _}from"./p-PZ6R_nGI.js";import{d as k}from"./p-BwGnhInj.js";import{d as w}from"./p-BPS9VExm.js";const y=()=>`.sc-ds-shell-tools-h{display:block;min-width:0;min-height:0;height:100%;background:transparent}[responsive-mode='mobile'].sc-ds-shell-tools-h{width:100%;background:var(--color-background-primary)}.shell-tools__desktop.sc-ds-shell-tools,.shell-tools__desktop.sc-ds-shell-tools ds-panel-tools.sc-ds-shell-tools,.shell-tools__mobile.sc-ds-shell-tools{display:block;min-width:0;min-height:0;height:100%}.shell-tools__mobile.sc-ds-shell-tools{display:grid;grid-template-rows:auto auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__inbox-nav.sc-ds-shell-tools{padding:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background:var(--color-background-primary)}.shell-tools__mobile-body.sc-ds-shell-tools,.shell-tools__view.sc-ds-shell-tools{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body.sc-ds-shell-tools{overflow:hidden}.shell-tools__view.sc-ds-shell-tools{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden].sc-ds-shell-tools{display:none}.shell-tools__view.sc-ds-shell-tools-s>*,.shell-tools__view .sc-ds-shell-tools-s>*{min-height:0}`;const C=["search","agents","messages","stacks","activity","help"];const j=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.itemsJson="";this.headers={};this.headersJson="";this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=s=>{const e=s.detail;if(!m(e)||e===this.mobileActiveTool)return;this.open=true;this.activeTool=e;this.dsToolChange.emit({id:e,selected:true})};this.handlePanelToolChange=s=>{this.activeTool=s.detail.id;this.open=s.detail.selected};this.handlePanelPresentationChange=s=>{this.presentation=s.detail.presentation};this.handleMobileHeaderAction=(s,e)=>{e.stopPropagation();this.dsHeaderAction.emit({tool:s,id:e.detail.id})}}get resolvedItems(){return a(this.items,this.itemsJson)}get availableInboxTools(){return this.resolvedItems.filter((s=>!s.isInactive&&m(s.id))).map((s=>s.id))}get mobileActiveTool(){if(!m(this.activeTool))return this.activeTool;return u(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const s=r(this.resolvedItems,this.open,this.activeTool);this.open=s.open;this.activeTool=s.activeTool}resolvedHeaders(){if(Object.keys(this.headers).length)return this.headers;if(!this.headersJson.trim())return{};try{const s=JSON.parse(this.headersJson);return s&&typeof s==="object"&&!Array.isArray(s)?s:{}}catch{return{}}}activeHeader(s){return this.resolvedHeaders()[s]??{}}activateMobileTool(s){const e=this.resolvedItems.find((e=>e.id===s));if(!e||e.isInactive)return;const t=n(this.open,this.activeTool,s);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:s,selected:t.selected})}async activateTool(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(s));return}this.activateMobileTool(s)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const s=this.activeTool;this.open=false;if(s)this.dsToolChange.emit({id:s,selected:false})}async focusHeaderAction(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(s));return}const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}renderForwardedSlots(){return h.flatMap((s=>[o("slot",{name:s,slot:s}),o("slot",{name:`${s}-view`,slot:`${s}-view`})]))}renderDesktop(){return o("div",{class:"shell-tools__desktop"},o("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:s=>{this.panelToolsEl=s},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange},this.renderForwardedSlots()))}renderMobileHeader(s){const e=this.activeHeader(s);const t=e.title?.trim();const i=m(s)?e.showBack&&t?t:this.inboxLabel:t||d[s];const l=(e.actions??[]).filter((s=>s.id!=="fullscreen"));return o("ds-panel-tool-header",{class:"shell-tools__mobile-header",heading:i,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=l},onDsBack:()=>this.dsHeaderBack.emit({tool:s}),onDsAction:e=>this.handleMobileHeaderAction(s,e)})}renderMobile(){const s=this.mobileActiveTool;const e=this.availableInboxTools.map((s=>({id:s,label:d[s]})));return o("div",{class:"shell-tools__mobile","aria-hidden":this.open&&s?undefined:"true",inert:this.open&&s?undefined:true},s?this.renderMobileHeader(s):null,s&&m(s)&&e.length?o("div",{class:"shell-tools__inbox-nav"},o("ds-tab-group",{tabs:e,value:s,"aria-label":this.inboxNavigationLabel,onDsChange:this.selectInboxTool})):null,o("div",{class:"shell-tools__mobile-body"},C.map((e=>{const t=this.open&&e===s;return o("div",{class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},o("slot",{name:`${e}-view`},o("slot",{name:e})))}))))}render(){const s=this.responsiveMode==="mobile";return o(i,{key:"c6ede759c0a0404bc87aa34b25a80d4963afcb5e",role:s?this.presentation==="fullscreen"?"dialog":"complementary":undefined,"aria-modal":s&&this.presentation==="fullscreen"?"true":undefined,"aria-label":s?this.toolsLabel:undefined},s?this.renderMobile():this.renderDesktop())}get el(){return this}static get watchers(){return{items:[{handleItemsChange:0}],itemsJson:[{handleItemsChange:0}]}}static get style(){return y()}},[262,"ds-shell-tools",{responsiveMode:[513,"responsive-mode"],open:[1540],activeTool:[1537,"active-tool"],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],items:[16],itemsJson:[1,"items-json"],headers:[16],headersJson:[1,"headers-json"],storageKey:[1,"storage-key"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],inboxLabel:[1,"inbox-label"],inboxNavigationLabel:[1,"inbox-navigation-label"],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},undefined,{items:[{handleItemsChange:0}],itemsJson:[{handleItemsChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const s=["ds-shell-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-panel-tools","ds-tab-group","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-tools":if(!customElements.get(l(s))){customElements.define(l(s),j)}break;case"ds-badge":if(!customElements.get(l(s))){b()}break;case"ds-button-unfilled":if(!customElements.get(l(s))){f()}break;case"ds-icon":if(!customElements.get(l(s))){p()}break;case"ds-loader":if(!customElements.get(l(s))){g()}break;case"ds-panel-tool-header":if(!customElements.get(l(s))){v()}break;case"ds-panel-tools":if(!customElements.get(l(s))){c()}break;case"ds-tab-group":if(!customElements.get(l(s))){_()}break;case"ds-text":if(!customElements.get(l(s))){k()}break;case"ds-tooltip":if(!customElements.get(l(s))){w()}break}}))}x();const E=j;const I=x;export{E as DsShellTools,I as defineCustomElement};
+//# sourceMappingURL=ds-shell-tools.js.map

package/dist/components/ds-shell-tools.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shellToolsCss","MOBILE_VIEW_ORDER","ShellTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","responsiveMode","open","activeTool","presentation","fullscreenHeaderMode","items","itemsJson","headers","headersJson","storageKey","toolsLabel","toolShortcutsLabel","inboxLabel","inboxNavigationLabel","panelToolsEl","selectInboxTool","event","id","detail","isShellInboxTool","mobileActiveTool","dsToolChange","emit","selected","handlePanelToolChange","handlePanelPresentationChange","handleMobileHeaderAction","tool","stopPropagation","dsHeaderAction","resolvedItems","parsePanelToolsItems","availableInboxTools","filter","item","isInactive","map","resolveAvailableInboxTool","componentWillLoad","reconcileAvailability","handleItemsChange","next","reconcilePanelToolsAvailability","resolvedHeaders","Object","keys","length","trim","parsed","JSON","parse","Array","isArray","activeHeader","activateMobileTool","find","entry","resolvePanelToolActivation","activateTool","closeDrawer","focusHeaderAction","action","el","querySelector","CSS","escape","setFocus","renderForwardedSlots","PANEL_TOOLS_TOOL_IDS","flatMap","h","name","slot","renderDesktop","class","ref","element","onDsToolChange","onDsPresentationChange","renderMobileHeader","header","configuredTitle","title","showBack","PANEL_TOOLS_LABELS","actions","heading","backIcon","backAriaLabel","showMenu","toolHeader","onDsBack","dsHeaderBack","onDsAction","renderMobile","inboxTabs","label","undefined","inert","tabs","value","onDsChange","active","hidden","render","mobile","Host","key","role"],"sources":["src/wc/components/ShellTools/ShellTools.css?tag=ds-shell-tools&encapsulation=scoped","src/wc/components/ShellTools/ShellTools.tsx"],"sourcesContent":[":host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: transparent;\n}\n\n:host([responsive-mode='mobile']) {\n  width: 100%;\n  background: var(--color-background-primary);\n}\n\n.shell-tools__desktop,\n.shell-tools__desktop ds-panel-tools,\n.shell-tools__mobile {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.shell-tools__mobile {\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr);\n  background: var(--color-background-primary);\n}\n\n.shell-tools__inbox-nav {\n  padding: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background: var(--color-background-primary);\n}\n\n.shell-tools__mobile-body,\n.shell-tools__view {\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.shell-tools__mobile-body {\n  overflow: hidden;\n}\n\n.shell-tools__view {\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n.shell-tools__view[hidden] {\n  display: none;\n}\n\n.shell-tools__view ::slotted(*) {\n  min-height: 0;\n}\n","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 PanelToolsHeaderAction,\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  @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    event: CustomEvent<{ id: string }>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool, id: event.detail.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 = isShellInboxTool(tool)\n      ? header.showBack && configuredTitle\n        ? configuredTitle\n        : this.inboxLabel\n      : configuredTitle || PANEL_TOOLS_LABELS[tool];\n    const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n\n    return (\n      <ds-panel-tool-header\n        class=\"shell-tools__mobile-header\"\n        heading={title}\n        showBack={header.showBack ?? false}\n        backIcon={header.backIcon || 'ChevronLeft'}\n        backAriaLabel={header.backAriaLabel || 'Back'}\n        showMenu={false}\n        ref={element => {\n          const toolHeader = element as\n            | (HTMLDsPanelToolHeaderElement & { actions: PanelToolsHeaderAction[] })\n            | undefined;\n          if (toolHeader) toolHeader.actions = actions;\n        }}\n        onDsBack={() => this.dsHeaderBack.emit({ tool })}\n        onDsAction={(event: CustomEvent<{ id: string }>) =>\n          this.handleMobileHeaderAction(tool, event)}\n      />\n    );\n  }\n\n  private renderMobile() {\n    const tool = this.mobileActiveTool;\n    const inboxTabs = this.availableInboxTools.map(id => ({\n      id,\n      label: PANEL_TOOLS_LABELS[id],\n    }));\n\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        {tool && isShellInboxTool(tool) && inboxTabs.length ? (\n          <div class=\"shell-tools__inbox-nav\">\n            <ds-tab-group\n              tabs={inboxTabs}\n              value={tool}\n              aria-label={this.inboxNavigationLabel}\n              onDsChange={this.selectInboxTool}\n            />\n          </div>\n        ) : 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"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-swatch-picker.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-Bi_bxbih.js";const t=o;const i=s;export{t as DsSwatchPicker,i as defineCustomElement};
+import{S as o,d as s}from"./p-Biz6xo-z.js";const t=o;const p=s;export{t as DsSwatchPicker,p as defineCustomElement};
 //# sourceMappingURL=ds-swatch-picker.js.map

package/dist/components/ds-tab-group.js

@@ -1,2 +1,2 @@
-import{p as o,H as r,c as t,h as n,a as s,t as a}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-CH6cNXXF.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-BwGnhInj.js";const u=()=>`.ds-control--md.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group,.ds-control--sm.sc-ds-tab-group-h,.ds-control--sm.sc-ds-tab-group,.ds-control--xs.sc-ds-tab-group-h,.ds-control--xs.sc-ds-tab-group{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tab-group-h,.ds-control--sm.sc-ds-tab-group{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tab-group-h,.ds-control--xs.sc-ds-tab-group{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-tab-group-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-h:focus-visible,.ds-focus-ring.sc-ds-tab-group:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-h:focus-visible,.ds-focus-ring-inset.sc-ds-tab-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tab-group:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-tab-group-h,.ds-interaction-fill.sc-ds-tab-group{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before,.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before{z-index:1}.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-tab-group-h,.ds-interaction-fill--bordered.sc-ds-tab-group{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tab-group-h,.ds-interaction-fill--selected.sc-ds-tab-group{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tab-group-h>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill.sc-ds-tab-group>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill__content.sc-ds-tab-group{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-tab-group-h,.ds-interaction-fill--on-faint.sc-ds-tab-group{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tab-group-h,.ds-interaction-fill--on-medium.sc-ds-tab-group{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-tab-group-h,.ds-interaction-fill--on-bold.sc-ds-tab-group{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-tab-group-h,.ds-interaction-fill--on-strong.sc-ds-tab-group{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-tab-group-h,.ds-interaction-fill--on-translucent.sc-ds-tab-group{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-tab-group-h,.ds-interaction-fill--on-inverted.sc-ds-tab-group{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-tab-group-h,.ds-interaction-fill--on-media.sc-ds-tab-group{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-tab-group-h,.ds-interaction-fill--on-always-dark.sc-ds-tab-group{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-tab-group-h,.ds-interaction-fill--on-navigation.sc-ds-tab-group{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-tab-group-h,.ds-control-inactive.sc-ds-tab-group{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-h{display:block;--_tab-group-surface-border:var(--color-border-tertiary);--_tab-group-divider:var(--color-border-secondary)}.tab-group-host--on-medium.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-medium-background-tertiary);--_tab-group-divider:var(--color-border-on-medium-background-secondary)}.tab-group-host--on-bold.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-bold-background-tertiary);--_tab-group-divider:var(--color-border-on-bold-background-secondary)}.tab-group-host--on-strong.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-strong-background-tertiary);--_tab-group-divider:var(--color-border-on-strong-background-secondary)}.tab-group-host--on-translucent.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-translucent-border-tertiary);--_tab-group-divider:var(--color-translucent-border-secondary)}.tab-group-host--on-inverted.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-inverted-border-tertiary);--_tab-group-divider:var(--color-inverted-border-secondary)}.tab-group-host--on-media.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-media-border-tertiary);--_tab-group-divider:var(--color-media-border-secondary)}.tab-group-host--on-always-dark.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-always-dark-border-tertiary);--_tab-group-divider:var(--color-always-dark-border-secondary)}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-group-host--surface.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{background-color:transparent}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);padding:0 var(--ds-control-padding-inline);background-color:transparent;border:none;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--ds-control-height);min-width:var(--dimension-size-400);box-sizing:border-box;--_dot:var(--color-foreground-bold-brand)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--_tab-group-surface-border)}.tab-group-host--surface.sc-ds-tab-group-h .tab--selected.sc-ds-tab-group{background-color:var(--ds-interaction-active)}.tab--selected.sc-ds-tab-group:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.tab__content.sc-ds-tab-group{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);min-width:0}.tab__content--dot.sc-ds-tab-group{padding-right:var(--dimension-space-050)}.tab__label.sc-ds-tab-group{padding:0 var(--ds-control-label-inset);white-space:nowrap}.tab__icon.sc-ds-tab-group{flex-shrink:0}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;z-index:2;pointer-events:none}.on-medium.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-secondary)}.on-medium.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-primary)}.on-bold.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-primary)}.on-translucent.sc-ds-tab-group{color:var(--color-translucent-foreground-secondary)}.on-translucent.tab--selected.sc-ds-tab-group{color:var(--color-translucent-foreground-primary)}.on-inverted.sc-ds-tab-group{color:var(--color-inverted-foreground-secondary)}.on-inverted.tab--selected.sc-ds-tab-group{color:var(--color-inverted-foreground-primary)}.on-media.sc-ds-tab-group{color:var(--color-media-foreground-secondary)}.on-media.tab--selected.sc-ds-tab-group{color:var(--color-media-foreground-primary)}.on-always-dark.sc-ds-tab-group{color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--_tab-group-divider)}`;const b=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value="";this.tabs=[];this.ariaLabel=null}get selectableTabs(){return i(this.tabs)}get focusableTabId(){return this.selectableTabs.some((o=>o.id===this.value&&!o.isInactive))?this.value:this.selectableTabs.find((o=>!o.isInactive))?.id??""}selectTab(o,r){this.value=o;this.dsChange.emit(o);if(r?.focus!==false){this.focusTab(o)}}focusTab(o){const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}onValueChange(o,r){if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const n=this.selectableTabs.some((r=>r.id===o&&!r.isInactive))?o:this.focusableTabId;const s=this.el.querySelector(`[data-tab-id="${n}"]`);if(s){s.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const n=t.length;for(let s=0;s<n;s++){const a=(o+r*(s+1)+n*(s+1))%n;if(!t[a]?.isInactive)return a}return o}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;const t=o.target?.closest("[data-tab-id]")?.dataset["tabId"];const n=r.findIndex((o=>o.id===(t??this.focusableTabId)));let s=null;if(o.key==="ArrowRight"){s=this.findEnabled(n,1)}else if(o.key==="ArrowLeft"){s=this.findEnabled(n,-1)}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));s=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));s=o===-1?null:r.length-1-o}if(s!==null){o.preventDefault();const t=r[s];this.selectTab(t.id)}}getBgClass(){if(!this.background)return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();const r=this.focusableTabId;return n(s,{key:"41adb6c391d2df7690e0e426af1e12f5e3efc56c",class:{"tab-group-host":true,"tab-group-host--surface":!!o,[`tab-group-host--${o}`]:!!o}},n("div",{key:"422d7454a366e3ea756275ba6a35b02f7a4e7aa4",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map(((t,s)=>{if(e(t)){return n("div",{key:`divider-${s}`,class:"tab-divider","aria-hidden":"true"},n("div",{class:"tab-divider__line"}))}const a=t.id===this.value;const i=t.variant??"label";const d=i==="icon"||i==="icon-label";const c=i==="label"||i==="icon-label";const l=a&&!o;return n("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":a,"ds-control--sm":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--on-faint":o==="on-faint","ds-interaction-fill--on-medium":o==="on-medium","ds-interaction-fill--on-bold":o==="on-bold","ds-interaction-fill--on-strong":o==="on-strong","ds-interaction-fill--on-translucent":o==="on-translucent","ds-interaction-fill--on-inverted":o==="on-inverted","ds-interaction-fill--on-media":o==="on-media","ds-interaction-fill--on-always-dark":o==="on-always-dark","ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-label":i==="icon"?t.label:undefined,"aria-selected":a,"aria-disabled":t.isInactive?"true":undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:t.id===r?0:-1,onClick:()=>!t.isInactive&&this.selectTab(t.id)},n("span",{class:{tab__content:true,[`tab__content--${i}`]:true,"tab__content--dot":!!t.dot}},d&&n("ds-icon",{class:"tab__icon",name:t.icon,size:"sm",color:"inherit"}),c&&n("ds-text",{class:"tab__label",as:"span",variant:"text-body-small",emphasis:l,color:"inherit"},t.label),t.dot&&n("ds-badge",{class:"tab__dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return u()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group","ds-badge","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(a(o))){customElements.define(a(o),b)}break;case"ds-badge":if(!customElements.get(a(o))){d()}break;case"ds-icon":if(!customElements.get(a(o))){c()}break;case"ds-text":if(!customElements.get(a(o))){l()}break}}))}g();const p=b;const v=g;export{p as DsTabGroup,v as defineCustomElement};
+import{T as o,d as s}from"./p-PZ6R_nGI.js";const t=o;const n=s;export{t as DsTabGroup,n as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map

package/dist/components/ds-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","ariaLabel","selectableTabs","getSelectableTabs","focusableTabId","some","tab","id","isInactive","find","selectTab","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","focusId","nextTab","blur","findEnabled","from","step","len","length","n","i","handleKeyDown","e","focusedId","target","closest","dataset","currentIdx","findIndex","t","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabelledby","map","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","size","color","as","emphasis","hasRing"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--dimension-size-400);\n  padding: calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  padding: 0 var(--ds-control-padding-inline);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--ds-control-height);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_dot: var(--color-foreground-bold-brand);\n  /* Hover/press: `.ds-interaction-fill` — fills cover full 24px box (no layout border). */\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--ds-interaction-active);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--_tab-group-divider);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabGroupItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabGroupItem[] = [];\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private get focusableTabId(): string {\n    return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n      ? this.value\n      : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n        ? next\n        : this.focusableTabId;\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset['tabId'];\n    const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n    let nextIdx: number | null = null;\n\n    if (e.key === 'ArrowRight') {\n      nextIdx = this.findEnabled(currentIdx, 1);\n    } else if (e.key === 'ArrowLeft') {\n      nextIdx = this.findEnabled(currentIdx, -1);\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background) return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const focusableTabId = this.focusableTabId;\n\n    return (\n      <Host\n        class={{\n          'tab-group-host': true,\n          'tab-group-host--surface': !!bgClass,\n          [`tab-group-host--${bgClass}`]: !!bgClass,\n        }}\n      >\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class=\"tab-divider\"\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            const variant = tab.variant ?? 'label';\n            const showIcon = variant === 'icon' || variant === 'icon-label';\n            const showLabel = variant === 'label' || variant === 'icon-label';\n            const emphasizeLabel = isSelected && !bgClass;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  'ds-control--sm': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !tab.isInactive,\n                  'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n                  'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n                  'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n                  'ds-interaction-fill--on-media': bgClass === 'on-media',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-label={variant === 'icon' ? tab.label : undefined}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive ? 'true' : undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={tab.id === focusableTabId ? 0 : -1}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__content: true,\n                  [`tab__content--${variant}`]: true,\n                  'tab__content--dot': !!tab.dot,\n                }}>\n                  {showIcon && (\n                    <ds-icon\n                      class=\"tab__icon\"\n                      name={tab.icon}\n                      size=\"sm\"\n                      color=\"inherit\"\n                    />\n                  )}\n                  {showLabel && (\n                    <ds-text\n                      class=\"tab__label\"\n                      as=\"span\"\n                      variant=\"text-body-small\"\n                      emphasis={emphasizeLabel}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                  )}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      hasRing={false}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-toast.js

@@ -1,2 +1,2 @@
-import{p as t,H as s,c as i,h as e,a as n,t as o}from"./index.js";import{c as a}from"./p-B8C_yfLQ.js";import{d as r}from"./p-CH6cNXXF.js";import{d as h}from"./p-CoYFJD-w.js";import{d as c}from"./p-BAfG3M8z.js";import{d}from"./p-Cpr3K41-.js";import{d as l}from"./p-BwGnhInj.js";import{T as f,r as u,b as m}from"./p-Dg3xLna0.js";import{r as p}from"./p-BJMRBHKW.js";function g(t,s){const i=typeof t==="function"?t(s):t;return typeof i==="string"?{description:i}:i}class v{constructor(){this.records=[];this.listeners=new Set;this.nextId=0}add(t){const s=t.id||`ds-toast-${++this.nextId}`;const i=this.records.findIndex((t=>t.id===s));if(!t.title?.trim()&&!t.description?.trim()){console.warn(`[ds-toast] Toast "${s}" should provide a title or description.`)}if(i>=0){const e=this.records[i];const n={...e,...t,id:s,priority:t.priority??e.priority,transitionStatus:"active",closeReason:undefined,updateKey:e.updateKey+1,timerKey:e.timerKey+1};this.records=[n,...this.records.filter(((t,s)=>s!==i))];this.emit();return s}const e={...t,id:s,priority:t.priority??"low",transitionStatus:"starting",updateKey:0,timerKey:0};this.records=[e,...this.records];this.emit();return s}update(t,s){const i=this.records.findIndex((s=>s.id===t));if(i<0)return;const e=this.records[i];const n=Object.prototype.hasOwnProperty.call(s,"timeout")||e.type==="loading"&&s.type!==undefined&&s.type!=="loading";const o={...e,...s,id:t,priority:s.priority??e.priority,updateKey:e.updateKey+1,timerKey:n?e.timerKey+1:e.timerKey};this.records=this.records.map(((t,s)=>s===i?o:t));this.emit()}close(t,s="programmatic"){const i=this.records.findIndex((s=>s.id===t));if(i<0||this.records[i].transitionStatus==="ending")return;const e={...this.records[i],transitionStatus:"ending",closeReason:s};this.records=this.records.map(((t,s)=>s===i?e:t));this.emit();e.onClose?.({id:t,reason:s,toast:e})}closeAll(t="programmatic"){for(const s of[...this.records])this.close(s.id,t)}async promise(t,s){const i=g(s.loading,undefined);const e=this.add({...i,type:i.type??"loading",timeout:0});try{const i=await t;const n=g(s.success,i);this.update(e,{...n,type:n.type??"success",timeout:n.timeout});return i}catch(t){const i=g(s.error,t);this.update(e,{...i,type:i.type??"error",timeout:i.timeout});throw t}}subscribe(t){this.listeners.add(t);t(this.getSnapshot());return()=>{this.listeners.delete(t)}}getSnapshot(){return this.records.map((t=>({...t})))}activate(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="starting")return;this.records=this.records.map((s=>s.id===t?{...s,transitionStatus:"active"}:s));this.emit()}remove(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="ending")return null;const i=s.closeReason??"programmatic";this.records=this.records.filter((s=>s.id!==t));this.emit();const e={id:t,reason:i,toast:s};return e}notifyRemove(t){const{toast:s}=t;s.onRemove?.(t)}emit(){const t=this.getSnapshot();for(const s of this.listeners)s(t)}}function w(){return new v}const y=Symbol.for("@ds-mo/ui/default-toast-manager");const b=globalThis;const x=b[y];const M=x??w();if(!x)b[y]=M;const T=()=>`.sc-ds-toast-h{display:contents}.toast-region.sc-ds-toast{position:fixed;inset:0;z-index:var(--dimension-z-index-floating);pointer-events:none;outline:none}.toast-viewport.sc-ds-toast{position:absolute;right:var(--dimension-space-200);bottom:var(--dimension-space-200);display:grid;width:min(     var(--dimension-card-width-sm),     calc(100vw - 2 * var(--dimension-space-200))   )}.toast-positioner.sc-ds-toast{grid-area:1 / 1;align-self:end;justify-self:center;width:100%;pointer-events:auto;transform:translateY(     calc(-1 * var(--toast-index) * var(--dimension-space-100))   );transition:transform var(--effect-motion-short-3),     width var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner.sc-ds-toast{width:calc(     100% - 2 * var(--toast-index) * var(--dimension-space-100)   )}.toast-viewport[data-expanded].sc-ds-toast .toast-positioner.sc-ds-toast{transform:translateY(calc(-1 * var(--toast-offset-y)))}.toast-positioner[data-limited].sc-ds-toast{visibility:hidden;pointer-events:none}.toast-positioner--anchored.sc-ds-toast{position:fixed;width:min(     var(--dimension-card-width-sm),     calc(100vw - 2 * var(--dimension-space-200))   );transform:none}.toast-positioner--anchored[data-positioned='false'].sc-ds-toast{visibility:hidden}.toast-surface.sc-ds-toast{position:relative;display:block;box-sizing:border-box;width:100%;height:var(--toast-height, auto);padding:var(--dimension-space-200);overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);transform:translate(     var(--toast-swipe-movement-x),     var(--toast-swipe-movement-y)   );animation:toast-enter var(--effect-motion-short-2) both}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{animation:toast-exit var(--effect-motion-short-3) both}.toast-surface--swiping.sc-ds-toast{transition:none;user-select:none}.toast-content.sc-ds-toast{display:flex;flex-direction:column;min-width:0;padding-inline-end:var(--dimension-size-500);transition:opacity var(--effect-motion-short-3)}.toast-copy.sc-ds-toast{display:flex;flex-direction:column;min-width:0;min-height:var(--typography-lineheight-md);margin-block:calc(-1 * var(--dimension-space-025));gap:var(--dimension-space-050)}.toast-title.sc-ds-toast,.toast-description.sc-ds-toast{min-width:0}.toast-action.sc-ds-toast{align-self:start;margin-top:calc(     var(--dimension-space-200) + var(--dimension-space-025)   )}.toast-close.sc-ds-toast{position:absolute;top:var(--dimension-space-100);right:var(--dimension-space-100);transition:opacity var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-content.sc-ds-toast,.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-close.sc-ds-toast{opacity:0}.toast-assertive-announcer.sc-ds-toast{position:absolute;width:var(--dimension-size-100);height:var(--dimension-size-100);padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}@keyframes toast-enter{from{opacity:0;transform:translateY(var(--dimension-space-100))}to{opacity:1;transform:translateY(0)}}@keyframes toast-exit{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.toast-positioner.sc-ds-toast,.toast-surface.sc-ds-toast,.toast-content.sc-ds-toast,.toast-close.sc-ds-toast,.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{transition:none;animation:none}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{opacity:0}}`;const A=40;const k=10;const C="__global-stack__";const P='button,a,input,textarea,select,[role="button"],[data-ds-toast-swipe-ignore]';const S=new WeakMap;const F=new Set;let E=null;let D=0;const z=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsToastClose=i(this,"dsToastClose");this.dsToastRemove=i(this,"dsToastRemove");this.dsToastAction=i(this,"dsToastAction");this.manager=M;this.limit=3;this.timeout=f.animationDelayLong2;this.label="Notifications";this.closeLabel="Close notification";this.swipeDirections=["down","right"];this.records=[];this.expanded=false;this.keyboardActive=false;this.swipe=null;this.layoutVersion=0;this.instanceId=++D;this.domIds=new Map;this.timers=new Map;this.closeWatchdogs=new Map;this.closeFrames=new Map;this.closeEvents=new Set;this.activationFrames=new Map;this.pauseReasons=new Set;this.hoveredIds=new Set;this.heights=new Map;this.measuredUpdateKeys=new Map;this.anchoredPositions=new Map;this.dismissedSwipeDirections=new Map;this.observedElements=new Set;this.pendingRemovals=[];this.unsubscribe=null;this.attachedManager=null;this.previousFocus=null;this.resizeObserver=null;this.mutationObserver=null;this.layoutFrame=null;this.activeSwipe=null;this.nextDomId=0;this.connected=false;this.pendingHoverLeave=false;this.handleWindowBlur=()=>this.pauseTimers("window");this.handleWindowFocus=()=>this.resumeTimers("window");this.handleVisibilityChange=()=>{if(document.hidden)this.pauseTimers("document");else this.resumeTimers("document")};this.handleFocusIn=()=>{const t=document.activeElement;if(!(t instanceof s)||!t.matches(":focus-visible"))return;E=this;this.keyboardActive=true;this.expanded=true;this.pauseTimers("focus")};this.handleFocusOut=t=>{const s=t.relatedTarget;if(s instanceof Node&&this.el.contains(s))return;if(!this.keyboardActive)return;this.keyboardActive=false;this.expanded=this.hoveredIds.size>0;this.resumeTimers("focus")};this.handleDocumentKeyDown=t=>{if(t.key!=="F6")return;const s=Array.from(F).filter((t=>t.activeRecords.length>0));const i=E&&E.activeRecords.length?E:s[s.length-1];if(i!==this)return;t.preventDefault();if(!this.el.contains(document.activeElement)){this.previousFocus=document.activeElement}this.keyboardActive=true;this.regionElement?.focus()};this.handleRegionKeyDown=t=>{if(t.key==="Escape"){const s=t.target;const i=s.closest(".toast-positioner");const e=i?.dataset["toastId"]??this.activeRecords[0]?.id;if(e){t.preventDefault();this.manager.close(e,"escape")}return}if(t.key==="Tab"&&t.shiftKey&&t.target===this.regionElement){t.preventDefault();this.restorePreviousFocus()}};this.handleWindowResize=()=>{this.heights.clear();this.measuredUpdateKeys.clear();this.layoutVersion+=1;this.scheduleLayout()};this.scheduleLayout=()=>{if(this.layoutFrame!==null)return;this.layoutFrame=requestAnimationFrame((()=>{this.layoutFrame=null;this.measureLayout()}))}}connectedCallback(){this.connect()}componentDidLoad(){this.connect()}connect(){if(this.connected)return;this.connected=true;this.resizeObserver??(this.resizeObserver=new ResizeObserver((()=>this.scheduleLayout())));this.mutationObserver??(this.mutationObserver=new MutationObserver((()=>this.scheduleLayout())));this.mutationObserver.observe(document.body,{childList:true,subtree:true});if(!this.unsubscribe)this.attachManager(this.manager);window.addEventListener("blur",this.handleWindowBlur);window.addEventListener("focus",this.handleWindowFocus);window.addEventListener("resize",this.handleWindowResize);window.addEventListener("scroll",this.scheduleLayout,true);document.addEventListener("keydown",this.handleDocumentKeyDown);document.addEventListener("visibilitychange",this.handleVisibilityChange);F.add(this);if(!E)E=this}componentDidRender(){this.syncObservedElements();this.flushPendingRemovals();this.scheduleLayout()}disconnectedCallback(){this.connected=false;this.flushPendingRemovals();this.detachManager();this.resetManagerState();this.resizeObserver?.disconnect();this.resizeObserver=null;this.mutationObserver?.disconnect();this.mutationObserver=null;this.observedElements.clear();if(this.layoutFrame!==null)cancelAnimationFrame(this.layoutFrame);this.layoutFrame=null;window.removeEventListener("blur",this.handleWindowBlur);window.removeEventListener("focus",this.handleWindowFocus);window.removeEventListener("resize",this.handleWindowResize);window.removeEventListener("scroll",this.scheduleLayout,true);document.removeEventListener("keydown",this.handleDocumentKeyDown);document.removeEventListener("visibilitychange",this.handleVisibilityChange);F.delete(this);if(E===this){const t=Array.from(F);E=t[t.length-1]??null}}onManagerChange(t){this.detachManager();this.resetManagerState();if(this.connected)this.attachManager(t)}onTimeoutChange(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}this.timers.clear();this.syncTimers()}attachManager(t){const s=S.get(t);if(s&&s!==this){console.warn("[ds-toast] A manager can control only one connected ds-toast instance.");return}S.set(t,this);this.attachedManager=t;this.unsubscribe=t.subscribe((t=>{this.records=t;this.syncLifecycle(t);this.scheduleLayout()}))}detachManager(){this.unsubscribe?.();this.unsubscribe=null;if(this.attachedManager&&S.get(this.attachedManager)===this){S.delete(this.attachedManager)}this.attachedManager=null}resetManagerState(){this.flushPendingRemovals();if(this.el.contains(document.activeElement))this.restorePreviousFocus();this.clearAllTimers();for(const t of this.activationFrames.values())cancelAnimationFrame(t);for(const t of this.closeFrames.values())cancelAnimationFrame(t);this.activationFrames.clear();this.closeFrames.clear();this.closeEvents.clear();this.pauseReasons.clear();this.hoveredIds.clear();this.pendingHoverLeave=false;this.heights.clear();this.measuredUpdateKeys.clear();this.anchoredPositions.clear();this.dismissedSwipeDirections.clear();this.domIds.clear();this.activeSwipe=null;this.swipe=null;this.expanded=false;this.keyboardActive=false;this.records=[];this.resizeObserver?.disconnect();this.observedElements.clear()}syncObservedElements(){const t=new Set(this.el.querySelectorAll(".toast-positioner"));for(const s of this.records){if(!s.positioner)continue;const i=this.resolveAnchor(s.positioner.anchor);if(i)t.add(i)}for(const s of this.observedElements){if(!t.has(s)){this.resizeObserver?.unobserve(s);this.observedElements.delete(s)}}for(const s of t){if(this.observedElements.has(s))continue;this.resizeObserver?.observe(s);this.observedElements.add(s)}}flushPendingRemovals(){for(const t of this.pendingRemovals.splice(0)){t.manager.notifyRemove(t.context);this.dsToastRemove.emit({id:t.context.id,toast:t.context.toast})}}syncLifecycle(t){const s=new Set(t.map((t=>t.id)));for(const t of this.hoveredIds){if(t!==C&&!s.has(t))this.hoveredIds.delete(t)}const i=t.some((t=>t.transitionStatus==="ending"));if(this.pendingHoverLeave&&!i&&!this.hoveredIds.size){this.pendingHoverLeave=false;this.expanded=false;this.resumeTimers("hover")}else if(!this.hoveredIds.size&&!this.pendingHoverLeave){this.resumeTimers("hover")}for(const[t,i]of this.timers){if(s.has(t))continue;if(i.handle)clearTimeout(i.handle);this.timers.delete(t)}for(const[t,i]of this.closeWatchdogs){if(s.has(t))continue;clearTimeout(i);this.closeWatchdogs.delete(t)}for(const[t,i]of this.activationFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.activationFrames.delete(t)}for(const[t,i]of this.closeFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.closeFrames.delete(t)}for(const t of this.domIds.keys()){if(s.has(t))continue;this.closeEvents.delete(t);this.domIds.delete(t);this.heights.delete(t);this.measuredUpdateKeys.delete(t);this.anchoredPositions.delete(t);this.dismissedSwipeDirections.delete(t)}for(const s of t){this.ensureDomId(s.id);if(s.transitionStatus==="starting"&&!this.activationFrames.has(s.id)){const t=this.attachedManager;const i=requestAnimationFrame((()=>{this.activationFrames.delete(s.id);t?.activate(s.id)}));this.activationFrames.set(s.id,i)}if(s.transitionStatus==="ending"){this.clearToastTimer(s.id);this.beginRemoval(s)}else{const t=this.closeWatchdogs.get(s.id);if(t)clearTimeout(t);this.closeWatchdogs.delete(s.id);const i=this.closeFrames.get(s.id);if(i)cancelAnimationFrame(i);this.closeFrames.delete(s.id);this.closeEvents.delete(s.id)}}this.syncTimers()}syncTimers(){const t=new Set;for(const s of this.records){if(s.transitionStatus!=="active")continue;t.add(s.id);const i=this.resolveToastTimeout(s);if(i<=0){this.clearToastTimer(s.id);continue}const e=this.timers.get(s.id);if(!e||e.timerKey!==s.timerKey){this.clearToastTimer(s.id);this.timers.set(s.id,{timerKey:s.timerKey,remaining:i,startedAt:0,handle:null})}if(!this.isPaused)this.startToastTimer(s.id)}for(const s of this.timers.keys()){if(!t.has(s))this.clearToastTimer(s)}}resolveToastTimeout(t){const s=t.timeout??this.timeout;if(typeof s==="number")return Math.max(0,s);return u(s,f.animationDelayLong2)}startToastTimer(t){const s=this.timers.get(t);if(!s||s.handle||s.remaining<=0)return;s.startedAt=Date.now();s.handle=setTimeout((()=>{s.handle=null;s.remaining=0;this.manager.close(t,"timeout")}),s.remaining)}pauseTimers(t){const s=this.isPaused;this.pauseReasons.add(t);if(s)return;const i=Date.now();for(const t of this.timers.values()){if(!t.handle)continue;clearTimeout(t.handle);t.handle=null;t.remaining=Math.max(0,t.remaining-(i-t.startedAt))}}resumeTimers(t){this.pauseReasons.delete(t);if(this.isPaused)return;for(const t of this.timers.keys())this.startToastTimer(t)}get isPaused(){return this.pauseReasons.size>0}clearToastTimer(t){const s=this.timers.get(t);if(s?.handle)clearTimeout(s.handle);this.timers.delete(t)}clearAllTimers(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}for(const t of this.closeWatchdogs.values())clearTimeout(t);this.timers.clear();this.closeWatchdogs.clear()}beginRemoval(t){if(!this.closeEvents.has(t.id)){this.closeEvents.add(t.id);this.dsToastClose.emit({id:t.id,reason:t.closeReason??"programmatic",toast:t});this.moveFocusAfterClose(t.id)}if(this.closeWatchdogs.has(t.id)||this.closeFrames.has(t.id))return;const s=m(f.motionShort3,f.animationDurationShort3);if(s<=0){queueMicrotask((()=>this.completeRemoval(t)));return}const i=requestAnimationFrame((()=>{this.closeFrames.delete(t.id);const i=this.records.find((s=>s.id===t.id));if(!i||i.transitionStatus!=="ending")return;this.closeWatchdogs.set(t.id,setTimeout((()=>this.completeRemoval(i)),s))}));this.closeFrames.set(t.id,i)}completeRemoval(t){const s=this.records.find((s=>s.id===t.id));if(!s||s.transitionStatus!=="ending")return;const i=this.closeWatchdogs.get(t.id);if(i)clearTimeout(i);this.closeWatchdogs.delete(t.id);const e=this.closeFrames.get(t.id);if(e)cancelAnimationFrame(e);this.closeFrames.delete(t.id);const n=this.attachedManager;const o=n?.remove(t.id);if(n&&o)this.pendingRemovals.push({manager:n,context:o})}handleAnimationComplete(t){if(t.transitionStatus==="ending")this.completeRemoval(t)}bindAnimationCancel(t,s){if(!t||t.dataset["cancelBound"]==="true")return;t.dataset["cancelBound"]="true";t.addEventListener("animationcancel",(()=>{const t=this.records.find((t=>t.id===s));if(t)this.handleAnimationComplete(t)}))}handlePointerEnter(t){E=this;this.pendingHoverLeave=false;this.hoveredIds.add(t);this.expanded=true;this.pauseTimers("hover")}handlePointerLeave(t){this.hoveredIds.delete(t);if(this.hoveredIds.size)return;if(this.records.some((t=>t.transitionStatus==="ending"))){this.pendingHoverLeave=true;return}this.expanded=false;this.resumeTimers("hover")}get regionElement(){return this.el.querySelector(".toast-region")}restorePreviousFocus(){this.previousFocus?.focus?.();this.previousFocus=null;this.keyboardActive=false}moveFocusAfterClose(t){const s=document.activeElement;const i=this.positionerElement(t);if(!s||!i?.contains(s))return;requestAnimationFrame((()=>{const s=this.activeRecords.find((s=>s.id!==t));const i=s?this.positionerElement(s.id)?.querySelector("ds-button-unfilled"):null;if(i?.setFocus)void i.setFocus();else if(s)this.regionElement?.focus();else this.restorePreviousFocus()}))}handleAction(t,s){const i={id:t.id,toast:t,originalEvent:s.detail};this.dsToastAction.emit(i);t.action?.onAction?.({id:t.id,data:t.data,manager:this.manager,originalEvent:s.detail})}handlePointerDown(t,s){if(s.button!==0)return;const i=s.target;if(i.closest(P))return;const e=s.currentTarget;e.setPointerCapture(s.pointerId);this.activeSwipe={id:t.id,pointerId:s.pointerId,pointerType:s.pointerType,startX:s.clientX,startY:s.clientY,maxDistance:0,cancelled:false,axis:null};this.swipe={id:t.id,x:0,y:0};if(s.pointerType==="touch")this.pauseTimers("swipe")}handlePointerMove(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId||s.cancelled)return;const i=t.clientX-s.startX;const e=t.clientY-s.startY;if(!s.axis&&Math.max(Math.abs(i),Math.abs(e))>1){s.axis=Math.abs(i)>=Math.abs(e)?"x":"y"}if(!s.axis)return;const n=s.axis==="x";const o=n?i>=0?"right":"left":e>=0?"down":"up";const a=this.swipeDirections.includes(o);const r=n?Math.abs(i):Math.abs(e);const h=a?r:Math.sqrt(r);const c=(n?i:e)<0?-h:h;const d=n?c:0;const l=n?0:c;if(s.maxDistance-h>=k){s.cancelled=true;this.cancelSwipe();return}s.maxDistance=Math.max(s.maxDistance,h);if(r>1)t.preventDefault();this.swipe={id:s.id,x:d,y:l,direction:a?o:undefined}}handlePointerUp(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId)return;const i=this.swipe;const e=i?Math.max(Math.abs(i.x),Math.abs(i.y)):0;const n=!s.cancelled&&!!i?.direction&&e>=A;const o=s.id;const a=s.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(a)this.resumeTimers("swipe");if(n&&i.direction){this.dismissedSwipeDirections.set(o,i.direction);this.manager.close(o,"swipe")}}handlePointerCancel(t){if(this.activeSwipe?.pointerId!==t.pointerId)return;this.cancelSwipe()}cancelSwipe(){const t=this.activeSwipe?.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(t)this.resumeTimers("swipe")}get touchAction(){const t=this.swipeDirections.includes("left")||this.swipeDirections.includes("right");const s=this.swipeDirections.includes("up")||this.swipeDirections.includes("down");if(t&&s)return"none";if(t)return"pan-y";if(s)return"pan-x";return"auto"}measureNaturalHeight(t,s){const i=t.querySelector(".toast-surface");if(!i)return 0;const e=t.style.width;const n=t.style.transition;const o=i.style.height;if(s){t.style.transition="none";t.style.width="100%"}i.style.height="auto";const a=i.getBoundingClientRect().height;i.style.height=o;if(s){t.style.width=e;t.getBoundingClientRect();t.style.transition=n}return a}measureLayout(){let t=false;for(const s of this.records){const i=this.positionerElement(s.id);if(!i)continue;let e=this.heights.get(s.id)??0;const n=e<=0||this.measuredUpdateKeys.get(s.id)!==s.updateKey;if(n){e=this.measureNaturalHeight(i,!s.positioner);if(e>0){if(this.heights.get(s.id)!==e)t=true;this.heights.set(s.id,e);this.measuredUpdateKeys.set(s.id,s.updateKey)}}if(!s.positioner)continue;const o=this.resolveAnchor(s.positioner.anchor);if(!o||e<=0){if(this.anchoredPositions.delete(s.id))t=true;continue}const r=i.getBoundingClientRect();const h=p(s.positioner.sideOffset,f.space050);const c=p(s.positioner.alignOffset,0);const d=a({anchorRect:o.getBoundingClientRect(),popupWidth:r.width,popupHeight:e,side:s.positioner.side??"top",align:s.positioner.align??"center",sideOffsetPx:h,alignOffsetPx:c,viewportPadPx:p(undefined,f.space200),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});const l=this.anchoredPositions.get(s.id);if(!l||l.x!==d.x||l.y!==d.y||l.side!==d.resolvedSide){this.anchoredPositions.set(s.id,{x:d.x,y:d.y,side:d.resolvedSide});t=true}}if(t)this.layoutVersion+=1}resolveAnchor(t){return typeof t==="string"?document.getElementById(t):t}positionerElement(t){return Array.from(this.el.querySelectorAll(".toast-positioner")).find((s=>s.dataset["toastId"]===t))??null}ensureDomId(t){const s=this.domIds.get(t);if(s)return s;const i=++this.nextDomId;this.domIds.set(t,i);return i}get activeRecords(){return this.records.filter((t=>t.transitionStatus!=="ending"))}globalLayout(){const t=this.records.filter((t=>!t.positioner));let s=0;let i=0;const e=p(undefined,f.space200);const n=new Map;t.forEach(((t,o)=>{if(t.transitionStatus==="ending"){n.set(t.id,{index:o,offset:s,limited:false});return}const a=i>=Math.max(1,this.limit);n.set(t.id,{index:i,offset:s,limited:a});s+=(this.heights.get(t.id)??0)+e;i+=1}));return n}renderToast(t,s){const i=this.ensureDomId(t.id);const n=`ds-toast-${this.instanceId}-${i}-title`;const o=`ds-toast-${this.instanceId}-${i}-description`;const a=this.swipe?.id===t.id?this.swipe:null;const r=a?.direction??this.dismissedSwipeDirections.get(t.id);const h=!!t.positioner;const c=this.anchoredPositions.get(t.id);const d=t.priority==="high"&&!this.keyboardActive;const l=this.keyboardActive&&!s.limited?0:-1;const f=this.heights.get(t.id);return e("div",{ref:s=>this.bindAnimationCancel(s,t.id),class:{"toast-positioner":true,"toast-positioner--anchored":h,"toast-positioner--ending":t.transitionStatus==="ending"},"data-toast-id":t.id,"data-behind":!h&&s.index>0?"":undefined,"data-limited":s.limited?"":undefined,"data-positioned":h?String(!!c):undefined,"data-side":c?.side,inert:s.limited?true:undefined,"aria-hidden":s.limited?"true":undefined,style:{"--toast-index":String(s.index),"--toast-offset-y":`${s.offset}px`,"--toast-height":f?`${f}px`:undefined,zIndex:String(this.records.length-s.index),left:c?`${c.x}px`:undefined,top:c?`${c.y}px`:undefined},onAnimationEnd:()=>this.handleAnimationComplete(t)},e("div",{class:{"toast-surface":true,"toast-surface--swiping":!!a},role:t.priority==="high"?"alertdialog":"dialog","aria-modal":"false","aria-labelledby":t.title?n:t.description?o:undefined,"aria-describedby":t.title&&t.description?o:undefined,"aria-hidden":d?"true":undefined,"data-type":t.type,"data-priority":t.priority,"data-transition-status":t.transitionStatus,"data-swiping":a?"":undefined,"data-swipe-direction":r,style:{"--toast-swipe-movement-x":`${a?.x??0}px`,"--toast-swipe-movement-y":`${a?.y??0}px`,touchAction:this.touchAction},onPointerDown:s=>this.handlePointerDown(t,s),onPointerMove:t=>this.handlePointerMove(t),onPointerUp:t=>this.handlePointerUp(t),onPointerCancel:t=>this.handlePointerCancel(t),onPointerEnter:h?()=>this.handlePointerEnter(t.id):undefined,onPointerLeave:h?()=>this.handlePointerLeave(t.id):undefined},e("div",{class:"toast-content"},e("div",{class:"toast-copy"},t.title&&e("ds-text",{class:"toast-title",as:"div",variant:"text-title-small",color:"primary",textId:n},t.title),t.description&&e("ds-text",{class:"toast-description",as:"div",variant:"text-body-medium",color:"secondary",textId:o},t.description)),t.action&&e("ds-button-unfilled",{class:"toast-action",variant:"label",size:"md",type:"button",label:t.action.label,"aria-label":t.action.ariaLabel,hasBorder:true,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:s=>this.handleAction(t,s)})),e("ds-button-unfilled",{class:"toast-close",variant:"icon",size:"md",type:"button",icon:"Cross","aria-label":this.closeLabel,hasBorder:false,activeFill:false,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:()=>this.manager.close(t.id,"close-button")})))}render(){const t=this.globalLayout();const s=this.records.filter((t=>!t.positioner));const i=this.records.filter((t=>!!t.positioner));const o=this.records.filter((s=>s.priority==="high"&&s.transitionStatus!=="ending"&&!t.get(s.id)?.limited));return e(n,{key:"a252bf1990e6b7c44845bf199998479334b0ea97"},e("section",{key:"30210879eda0260e3f68f49e8b2fb2b394873b12",class:"toast-region",role:"region","aria-label":this.label,"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",tabIndex:-1,onFocusin:this.handleFocusIn,onFocusout:t=>this.handleFocusOut(t),onKeyDown:t=>this.handleRegionKeyDown(t)},e("div",{key:"017f1799f40c6eb8946530b75a43f3de1b836838",class:"toast-viewport","data-expanded":this.expanded?"":undefined,onPointerEnter:()=>this.handlePointerEnter(C),onPointerLeave:()=>this.handlePointerLeave(C)},s.map((s=>this.renderToast(s,t.get(s.id)??{index:0,offset:0,limited:false})))),e("div",{key:"57e7f74823a3fa9572aea3e257009360d2be9ef4",class:"toast-anchored-layer"},i.map((t=>this.renderToast(t,{index:0,offset:0,limited:false})))),e("div",{key:"8935341888b22f486c790706598482df47e320c5",class:"toast-assertive-announcer"},o.map((t=>e("div",{role:"alert","aria-atomic":"true"},[t.title,t.description].filter(Boolean).join(". ")))))))}get el(){return this}static get watchers(){return{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}}static get style(){return T()}},[2,"ds-toast",{manager:[16],limit:[2],timeout:[8],label:[1],closeLabel:[1,"close-label"],swipeDirections:[16],records:[32],expanded:[32],keyboardActive:[32],swipe:[32],layoutVersion:[32]},undefined,{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}]);function j(){if(typeof customElements==="undefined"){return}const t=["ds-toast","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-toast":if(!customElements.get(o(t))){customElements.define(o(t),z)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){h()}break;case"ds-icon":if(!customElements.get(o(t))){c()}break;case"ds-loader":if(!customElements.get(o(t))){d()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}j();const R=z;const $=j;export{R as DsToast,$ as defineCustomElement};
+import{p as t,H as s,c as i,h as e,a as n,t as o}from"./index.js";import{c as a}from"./p-B8C_yfLQ.js";import{d as r}from"./p-CH6cNXXF.js";import{d as h}from"./p-CoYFJD-w.js";import{d as c}from"./p-BAfG3M8z.js";import{d}from"./p-Cpr3K41-.js";import{d as l}from"./p-BwGnhInj.js";import{T as f}from"./p-C_0Q8Cnp.js";import{r as u,a as m}from"./p-B6Vuayt6.js";import{r as p}from"./p-BJMRBHKW.js";function v(t,s){const i=typeof t==="function"?t(s):t;return typeof i==="string"?{description:i}:i}class g{constructor(){this.records=[];this.listeners=new Set;this.nextId=0}add(t){const s=t.id||`ds-toast-${++this.nextId}`;const i=this.records.findIndex((t=>t.id===s));if(!t.title?.trim()&&!t.description?.trim()){console.warn(`[ds-toast] Toast "${s}" should provide a title or description.`)}if(i>=0){const e=this.records[i];const n={...e,...t,id:s,priority:t.priority??e.priority,transitionStatus:"active",closeReason:undefined,updateKey:e.updateKey+1,timerKey:e.timerKey+1};this.records=[n,...this.records.filter(((t,s)=>s!==i))];this.emit();return s}const e={...t,id:s,priority:t.priority??"low",transitionStatus:"starting",updateKey:0,timerKey:0};this.records=[e,...this.records];this.emit();return s}update(t,s){const i=this.records.findIndex((s=>s.id===t));if(i<0)return;const e=this.records[i];const n=Object.prototype.hasOwnProperty.call(s,"timeout")||e.type==="loading"&&s.type!==undefined&&s.type!=="loading";const o={...e,...s,id:t,priority:s.priority??e.priority,updateKey:e.updateKey+1,timerKey:n?e.timerKey+1:e.timerKey};this.records=this.records.map(((t,s)=>s===i?o:t));this.emit()}close(t,s="programmatic"){const i=this.records.findIndex((s=>s.id===t));if(i<0||this.records[i].transitionStatus==="ending")return;const e={...this.records[i],transitionStatus:"ending",closeReason:s};this.records=this.records.map(((t,s)=>s===i?e:t));this.emit();e.onClose?.({id:t,reason:s,toast:e})}closeAll(t="programmatic"){for(const s of[...this.records])this.close(s.id,t)}async promise(t,s){const i=v(s.loading,undefined);const e=this.add({...i,type:i.type??"loading",timeout:0});try{const i=await t;const n=v(s.success,i);this.update(e,{...n,type:n.type??"success",timeout:n.timeout});return i}catch(t){const i=v(s.error,t);this.update(e,{...i,type:i.type??"error",timeout:i.timeout});throw t}}subscribe(t){this.listeners.add(t);t(this.getSnapshot());return()=>{this.listeners.delete(t)}}getSnapshot(){return this.records.map((t=>({...t})))}activate(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="starting")return;this.records=this.records.map((s=>s.id===t?{...s,transitionStatus:"active"}:s));this.emit()}remove(t){const s=this.records.find((s=>s.id===t));if(!s||s.transitionStatus!=="ending")return null;const i=s.closeReason??"programmatic";this.records=this.records.filter((s=>s.id!==t));this.emit();const e={id:t,reason:i,toast:s};return e}notifyRemove(t){const{toast:s}=t;s.onRemove?.(t)}emit(){const t=this.getSnapshot();for(const s of this.listeners)s(t)}}function w(){return new g}const y=Symbol.for("@ds-mo/ui/default-toast-manager");const b=globalThis;const x=b[y];const M=x??w();if(!x)b[y]=M;const T=()=>`.sc-ds-toast-h{display:contents}.toast-region.sc-ds-toast{position:fixed;inset:0;z-index:var(--dimension-z-index-floating);pointer-events:none;outline:none}.toast-viewport.sc-ds-toast{position:absolute;right:var(--dimension-space-200);bottom:var(--dimension-space-200);display:grid;width:min(     var(--dimension-card-width-sm),     calc(100vw - 2 * var(--dimension-space-200))   )}@media (max-width: 767px){[avoid-mobile-shell-bar].sc-ds-toast-h .toast-viewport.sc-ds-toast{bottom:calc(       var(--dimension-space-200) +       var(--dimension-stroke-width-012) +       var(--dimension-space-050) +       var(--dimension-size-600) +       max(var(--dimension-space-050), env(safe-area-inset-bottom))     )}}.toast-positioner.sc-ds-toast{grid-area:1 / 1;align-self:end;justify-self:center;width:100%;pointer-events:auto;transform:translateY(     calc(-1 * var(--toast-index) * var(--dimension-space-100))   );transition:transform var(--effect-motion-short-3),     width var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner.sc-ds-toast{width:calc(     100% - 2 * var(--toast-index) * var(--dimension-space-100)   )}.toast-viewport[data-expanded].sc-ds-toast .toast-positioner.sc-ds-toast{transform:translateY(calc(-1 * var(--toast-offset-y)))}.toast-positioner[data-limited].sc-ds-toast{visibility:hidden;pointer-events:none}.toast-positioner--anchored.sc-ds-toast{position:fixed;width:min(     var(--dimension-card-width-sm),     calc(100vw - 2 * var(--dimension-space-200))   );transform:none}.toast-positioner--anchored[data-positioned='false'].sc-ds-toast{visibility:hidden}.toast-surface.sc-ds-toast{position:relative;display:block;box-sizing:border-box;width:100%;height:var(--toast-height, auto);padding:var(--dimension-space-200);overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);transform:translate(     var(--toast-swipe-movement-x),     var(--toast-swipe-movement-y)   );animation:toast-enter var(--effect-motion-short-2) both}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{animation:toast-exit var(--effect-motion-short-3) both}.toast-surface--swiping.sc-ds-toast{transition:none;user-select:none}.toast-content.sc-ds-toast{display:flex;flex-direction:column;min-width:0;padding-inline-end:var(--dimension-size-500);transition:opacity var(--effect-motion-short-3)}.toast-copy.sc-ds-toast{display:flex;flex-direction:column;min-width:0;min-height:var(--typography-lineheight-md);margin-block:calc(-1 * var(--dimension-space-025));gap:var(--dimension-space-050)}.toast-title.sc-ds-toast,.toast-description.sc-ds-toast{min-width:0}.toast-action.sc-ds-toast{align-self:start;margin-top:calc(     var(--dimension-space-200) + var(--dimension-space-025)   )}.toast-close.sc-ds-toast{position:absolute;top:var(--dimension-space-100);right:var(--dimension-space-100);transition:opacity var(--effect-motion-short-3)}.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-content.sc-ds-toast,.toast-viewport.sc-ds-toast:not([data-expanded]) .toast-positioner[data-behind].sc-ds-toast .toast-close.sc-ds-toast{opacity:0}.toast-assertive-announcer.sc-ds-toast{position:absolute;width:var(--dimension-size-100);height:var(--dimension-size-100);padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}@keyframes toast-enter{from{opacity:0;transform:translateY(var(--dimension-space-100))}to{opacity:1;transform:translateY(0)}}@keyframes toast-exit{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.toast-positioner.sc-ds-toast,.toast-surface.sc-ds-toast,.toast-content.sc-ds-toast,.toast-close.sc-ds-toast,.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{transition:none;animation:none}.toast-positioner--ending.sc-ds-toast .toast-surface.sc-ds-toast{opacity:0}}`;const A=40;const k=10;const C="__global-stack__";const P='button,a,input,textarea,select,[role="button"],[data-ds-toast-swipe-ignore]';const S=new WeakMap;const F=new Set;let E=null;let z=0;const j=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsToastClose=i(this,"dsToastClose");this.dsToastRemove=i(this,"dsToastRemove");this.dsToastAction=i(this,"dsToastAction");this.manager=M;this.limit=3;this.timeout=f.animationDelayLong2;this.label="Notifications";this.closeLabel="Close notification";this.avoidMobileShellBar=false;this.swipeDirections=["down","right"];this.records=[];this.expanded=false;this.keyboardActive=false;this.swipe=null;this.layoutVersion=0;this.instanceId=++z;this.domIds=new Map;this.timers=new Map;this.closeWatchdogs=new Map;this.closeFrames=new Map;this.closeEvents=new Set;this.activationFrames=new Map;this.pauseReasons=new Set;this.hoveredIds=new Set;this.heights=new Map;this.measuredUpdateKeys=new Map;this.anchoredPositions=new Map;this.dismissedSwipeDirections=new Map;this.observedElements=new Set;this.pendingRemovals=[];this.unsubscribe=null;this.attachedManager=null;this.previousFocus=null;this.resizeObserver=null;this.mutationObserver=null;this.layoutFrame=null;this.activeSwipe=null;this.nextDomId=0;this.connected=false;this.pendingHoverLeave=false;this.handleWindowBlur=()=>this.pauseTimers("window");this.handleWindowFocus=()=>this.resumeTimers("window");this.handleVisibilityChange=()=>{if(document.hidden)this.pauseTimers("document");else this.resumeTimers("document")};this.handleFocusIn=()=>{const t=document.activeElement;if(!(t instanceof s)||!t.matches(":focus-visible"))return;E=this;this.keyboardActive=true;this.expanded=true;this.pauseTimers("focus")};this.handleFocusOut=t=>{const s=t.relatedTarget;if(s instanceof Node&&this.el.contains(s))return;if(!this.keyboardActive)return;this.keyboardActive=false;this.expanded=this.hoveredIds.size>0;this.resumeTimers("focus")};this.handleDocumentKeyDown=t=>{if(t.key!=="F6")return;const s=Array.from(F).filter((t=>t.activeRecords.length>0));const i=E&&E.activeRecords.length?E:s[s.length-1];if(i!==this)return;t.preventDefault();if(!this.el.contains(document.activeElement)){this.previousFocus=document.activeElement}this.keyboardActive=true;this.regionElement?.focus()};this.handleRegionKeyDown=t=>{if(t.key==="Escape"){const s=t.target;const i=s.closest(".toast-positioner");const e=i?.dataset["toastId"]??this.activeRecords[0]?.id;if(e){t.preventDefault();this.manager.close(e,"escape")}return}if(t.key==="Tab"&&t.shiftKey&&t.target===this.regionElement){t.preventDefault();this.restorePreviousFocus()}};this.handleWindowResize=()=>{this.heights.clear();this.measuredUpdateKeys.clear();this.layoutVersion+=1;this.scheduleLayout()};this.scheduleLayout=()=>{if(this.layoutFrame!==null)return;this.layoutFrame=requestAnimationFrame((()=>{this.layoutFrame=null;this.measureLayout()}))}}connectedCallback(){this.connect()}componentDidLoad(){this.connect()}connect(){if(this.connected)return;this.connected=true;this.resizeObserver??(this.resizeObserver=new ResizeObserver((()=>this.scheduleLayout())));this.mutationObserver??(this.mutationObserver=new MutationObserver((()=>this.scheduleLayout())));this.mutationObserver.observe(document.body,{childList:true,subtree:true});if(!this.unsubscribe)this.attachManager(this.manager);window.addEventListener("blur",this.handleWindowBlur);window.addEventListener("focus",this.handleWindowFocus);window.addEventListener("resize",this.handleWindowResize);window.addEventListener("scroll",this.scheduleLayout,true);document.addEventListener("keydown",this.handleDocumentKeyDown);document.addEventListener("visibilitychange",this.handleVisibilityChange);F.add(this);if(!E)E=this}componentDidRender(){this.syncObservedElements();this.flushPendingRemovals();this.scheduleLayout()}disconnectedCallback(){this.connected=false;this.flushPendingRemovals();this.detachManager();this.resetManagerState();this.resizeObserver?.disconnect();this.resizeObserver=null;this.mutationObserver?.disconnect();this.mutationObserver=null;this.observedElements.clear();if(this.layoutFrame!==null)cancelAnimationFrame(this.layoutFrame);this.layoutFrame=null;window.removeEventListener("blur",this.handleWindowBlur);window.removeEventListener("focus",this.handleWindowFocus);window.removeEventListener("resize",this.handleWindowResize);window.removeEventListener("scroll",this.scheduleLayout,true);document.removeEventListener("keydown",this.handleDocumentKeyDown);document.removeEventListener("visibilitychange",this.handleVisibilityChange);F.delete(this);if(E===this){const t=Array.from(F);E=t[t.length-1]??null}}onManagerChange(t){this.detachManager();this.resetManagerState();if(this.connected)this.attachManager(t)}onTimeoutChange(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}this.timers.clear();this.syncTimers()}attachManager(t){const s=S.get(t);if(s&&s!==this){console.warn("[ds-toast] A manager can control only one connected ds-toast instance.");return}S.set(t,this);this.attachedManager=t;this.unsubscribe=t.subscribe((t=>{this.records=t;this.syncLifecycle(t);this.scheduleLayout()}))}detachManager(){this.unsubscribe?.();this.unsubscribe=null;if(this.attachedManager&&S.get(this.attachedManager)===this){S.delete(this.attachedManager)}this.attachedManager=null}resetManagerState(){this.flushPendingRemovals();if(this.el.contains(document.activeElement))this.restorePreviousFocus();this.clearAllTimers();for(const t of this.activationFrames.values())cancelAnimationFrame(t);for(const t of this.closeFrames.values())cancelAnimationFrame(t);this.activationFrames.clear();this.closeFrames.clear();this.closeEvents.clear();this.pauseReasons.clear();this.hoveredIds.clear();this.pendingHoverLeave=false;this.heights.clear();this.measuredUpdateKeys.clear();this.anchoredPositions.clear();this.dismissedSwipeDirections.clear();this.domIds.clear();this.activeSwipe=null;this.swipe=null;this.expanded=false;this.keyboardActive=false;this.records=[];this.resizeObserver?.disconnect();this.observedElements.clear()}syncObservedElements(){const t=new Set(this.el.querySelectorAll(".toast-positioner"));for(const s of this.records){if(!s.positioner)continue;const i=this.resolveAnchor(s.positioner.anchor);if(i)t.add(i)}for(const s of this.observedElements){if(!t.has(s)){this.resizeObserver?.unobserve(s);this.observedElements.delete(s)}}for(const s of t){if(this.observedElements.has(s))continue;this.resizeObserver?.observe(s);this.observedElements.add(s)}}flushPendingRemovals(){for(const t of this.pendingRemovals.splice(0)){t.manager.notifyRemove(t.context);this.dsToastRemove.emit({id:t.context.id,toast:t.context.toast})}}syncLifecycle(t){const s=new Set(t.map((t=>t.id)));for(const t of this.hoveredIds){if(t!==C&&!s.has(t))this.hoveredIds.delete(t)}const i=t.some((t=>t.transitionStatus==="ending"));if(this.pendingHoverLeave&&!i&&!this.hoveredIds.size){this.pendingHoverLeave=false;this.expanded=false;this.resumeTimers("hover")}else if(!this.hoveredIds.size&&!this.pendingHoverLeave){this.resumeTimers("hover")}for(const[t,i]of this.timers){if(s.has(t))continue;if(i.handle)clearTimeout(i.handle);this.timers.delete(t)}for(const[t,i]of this.closeWatchdogs){if(s.has(t))continue;clearTimeout(i);this.closeWatchdogs.delete(t)}for(const[t,i]of this.activationFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.activationFrames.delete(t)}for(const[t,i]of this.closeFrames){if(s.has(t))continue;cancelAnimationFrame(i);this.closeFrames.delete(t)}for(const t of this.domIds.keys()){if(s.has(t))continue;this.closeEvents.delete(t);this.domIds.delete(t);this.heights.delete(t);this.measuredUpdateKeys.delete(t);this.anchoredPositions.delete(t);this.dismissedSwipeDirections.delete(t)}for(const s of t){this.ensureDomId(s.id);if(s.transitionStatus==="starting"&&!this.activationFrames.has(s.id)){const t=this.attachedManager;const i=requestAnimationFrame((()=>{this.activationFrames.delete(s.id);t?.activate(s.id)}));this.activationFrames.set(s.id,i)}if(s.transitionStatus==="ending"){this.clearToastTimer(s.id);this.beginRemoval(s)}else{const t=this.closeWatchdogs.get(s.id);if(t)clearTimeout(t);this.closeWatchdogs.delete(s.id);const i=this.closeFrames.get(s.id);if(i)cancelAnimationFrame(i);this.closeFrames.delete(s.id);this.closeEvents.delete(s.id)}}this.syncTimers()}syncTimers(){const t=new Set;for(const s of this.records){if(s.transitionStatus!=="active")continue;t.add(s.id);const i=this.resolveToastTimeout(s);if(i<=0){this.clearToastTimer(s.id);continue}const e=this.timers.get(s.id);if(!e||e.timerKey!==s.timerKey){this.clearToastTimer(s.id);this.timers.set(s.id,{timerKey:s.timerKey,remaining:i,startedAt:0,handle:null})}if(!this.isPaused)this.startToastTimer(s.id)}for(const s of this.timers.keys()){if(!t.has(s))this.clearToastTimer(s)}}resolveToastTimeout(t){const s=t.timeout??this.timeout;if(typeof s==="number")return Math.max(0,s);return u(s,f.animationDelayLong2)}startToastTimer(t){const s=this.timers.get(t);if(!s||s.handle||s.remaining<=0)return;s.startedAt=Date.now();s.handle=setTimeout((()=>{s.handle=null;s.remaining=0;this.manager.close(t,"timeout")}),s.remaining)}pauseTimers(t){const s=this.isPaused;this.pauseReasons.add(t);if(s)return;const i=Date.now();for(const t of this.timers.values()){if(!t.handle)continue;clearTimeout(t.handle);t.handle=null;t.remaining=Math.max(0,t.remaining-(i-t.startedAt))}}resumeTimers(t){this.pauseReasons.delete(t);if(this.isPaused)return;for(const t of this.timers.keys())this.startToastTimer(t)}get isPaused(){return this.pauseReasons.size>0}clearToastTimer(t){const s=this.timers.get(t);if(s?.handle)clearTimeout(s.handle);this.timers.delete(t)}clearAllTimers(){for(const t of this.timers.values()){if(t.handle)clearTimeout(t.handle)}for(const t of this.closeWatchdogs.values())clearTimeout(t);this.timers.clear();this.closeWatchdogs.clear()}beginRemoval(t){if(!this.closeEvents.has(t.id)){this.closeEvents.add(t.id);this.dsToastClose.emit({id:t.id,reason:t.closeReason??"programmatic",toast:t});this.moveFocusAfterClose(t.id)}if(this.closeWatchdogs.has(t.id)||this.closeFrames.has(t.id))return;const s=m(f.motionShort3,f.animationDurationShort3);if(s<=0){queueMicrotask((()=>this.completeRemoval(t)));return}const i=requestAnimationFrame((()=>{this.closeFrames.delete(t.id);const i=this.records.find((s=>s.id===t.id));if(!i||i.transitionStatus!=="ending")return;this.closeWatchdogs.set(t.id,setTimeout((()=>this.completeRemoval(i)),s))}));this.closeFrames.set(t.id,i)}completeRemoval(t){const s=this.records.find((s=>s.id===t.id));if(!s||s.transitionStatus!=="ending")return;const i=this.closeWatchdogs.get(t.id);if(i)clearTimeout(i);this.closeWatchdogs.delete(t.id);const e=this.closeFrames.get(t.id);if(e)cancelAnimationFrame(e);this.closeFrames.delete(t.id);const n=this.attachedManager;const o=n?.remove(t.id);if(n&&o)this.pendingRemovals.push({manager:n,context:o})}handleAnimationComplete(t){if(t.transitionStatus==="ending")this.completeRemoval(t)}bindAnimationCancel(t,s){if(!t||t.dataset["cancelBound"]==="true")return;t.dataset["cancelBound"]="true";t.addEventListener("animationcancel",(()=>{const t=this.records.find((t=>t.id===s));if(t)this.handleAnimationComplete(t)}))}handlePointerEnter(t){E=this;this.pendingHoverLeave=false;this.hoveredIds.add(t);this.expanded=true;this.pauseTimers("hover")}handlePointerLeave(t){this.hoveredIds.delete(t);if(this.hoveredIds.size)return;if(this.records.some((t=>t.transitionStatus==="ending"))){this.pendingHoverLeave=true;return}this.expanded=false;this.resumeTimers("hover")}get regionElement(){return this.el.querySelector(".toast-region")}restorePreviousFocus(){this.previousFocus?.focus?.();this.previousFocus=null;this.keyboardActive=false}moveFocusAfterClose(t){const s=document.activeElement;const i=this.positionerElement(t);if(!s||!i?.contains(s))return;requestAnimationFrame((()=>{const s=this.activeRecords.find((s=>s.id!==t));const i=s?this.positionerElement(s.id)?.querySelector("ds-button-unfilled"):null;if(i?.setFocus)void i.setFocus();else if(s)this.regionElement?.focus();else this.restorePreviousFocus()}))}handleAction(t,s){const i={id:t.id,toast:t,originalEvent:s.detail};this.dsToastAction.emit(i);t.action?.onAction?.({id:t.id,data:t.data,manager:this.manager,originalEvent:s.detail})}handlePointerDown(t,s){if(s.button!==0)return;const i=s.target;if(i.closest(P))return;const e=s.currentTarget;e.setPointerCapture(s.pointerId);this.activeSwipe={id:t.id,pointerId:s.pointerId,pointerType:s.pointerType,startX:s.clientX,startY:s.clientY,maxDistance:0,cancelled:false,axis:null};this.swipe={id:t.id,x:0,y:0};if(s.pointerType==="touch")this.pauseTimers("swipe")}handlePointerMove(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId||s.cancelled)return;const i=t.clientX-s.startX;const e=t.clientY-s.startY;if(!s.axis&&Math.max(Math.abs(i),Math.abs(e))>1){s.axis=Math.abs(i)>=Math.abs(e)?"x":"y"}if(!s.axis)return;const n=s.axis==="x";const o=n?i>=0?"right":"left":e>=0?"down":"up";const a=this.swipeDirections.includes(o);const r=n?Math.abs(i):Math.abs(e);const h=a?r:Math.sqrt(r);const c=(n?i:e)<0?-h:h;const d=n?c:0;const l=n?0:c;if(s.maxDistance-h>=k){s.cancelled=true;this.cancelSwipe();return}s.maxDistance=Math.max(s.maxDistance,h);if(r>1)t.preventDefault();this.swipe={id:s.id,x:d,y:l,direction:a?o:undefined}}handlePointerUp(t){const s=this.activeSwipe;if(!s||s.pointerId!==t.pointerId)return;const i=this.swipe;const e=i?Math.max(Math.abs(i.x),Math.abs(i.y)):0;const n=!s.cancelled&&!!i?.direction&&e>=A;const o=s.id;const a=s.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(a)this.resumeTimers("swipe");if(n&&i.direction){this.dismissedSwipeDirections.set(o,i.direction);this.manager.close(o,"swipe")}}handlePointerCancel(t){if(this.activeSwipe?.pointerId!==t.pointerId)return;this.cancelSwipe()}cancelSwipe(){const t=this.activeSwipe?.pointerType==="touch";this.activeSwipe=null;this.swipe=null;if(t)this.resumeTimers("swipe")}get touchAction(){const t=this.swipeDirections.includes("left")||this.swipeDirections.includes("right");const s=this.swipeDirections.includes("up")||this.swipeDirections.includes("down");if(t&&s)return"none";if(t)return"pan-y";if(s)return"pan-x";return"auto"}measureNaturalHeight(t,s){const i=t.querySelector(".toast-surface");if(!i)return 0;const e=t.style.width;const n=t.style.transition;const o=i.style.height;if(s){t.style.transition="none";t.style.width="100%"}i.style.height="auto";const a=i.getBoundingClientRect().height;i.style.height=o;if(s){t.style.width=e;t.getBoundingClientRect();t.style.transition=n}return a}measureLayout(){let t=false;for(const s of this.records){const i=this.positionerElement(s.id);if(!i)continue;let e=this.heights.get(s.id)??0;const n=e<=0||this.measuredUpdateKeys.get(s.id)!==s.updateKey;if(n){e=this.measureNaturalHeight(i,!s.positioner);if(e>0){if(this.heights.get(s.id)!==e)t=true;this.heights.set(s.id,e);this.measuredUpdateKeys.set(s.id,s.updateKey)}}if(!s.positioner)continue;const o=this.resolveAnchor(s.positioner.anchor);if(!o||e<=0){if(this.anchoredPositions.delete(s.id))t=true;continue}const r=i.getBoundingClientRect();const h=p(s.positioner.sideOffset,f.space050);const c=p(s.positioner.alignOffset,0);const d=a({anchorRect:o.getBoundingClientRect(),popupWidth:r.width,popupHeight:e,side:s.positioner.side??"top",align:s.positioner.align??"center",sideOffsetPx:h,alignOffsetPx:c,viewportPadPx:p(undefined,f.space200),viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});const l=this.anchoredPositions.get(s.id);if(!l||l.x!==d.x||l.y!==d.y||l.side!==d.resolvedSide){this.anchoredPositions.set(s.id,{x:d.x,y:d.y,side:d.resolvedSide});t=true}}if(t)this.layoutVersion+=1}resolveAnchor(t){return typeof t==="string"?document.getElementById(t):t}positionerElement(t){return Array.from(this.el.querySelectorAll(".toast-positioner")).find((s=>s.dataset["toastId"]===t))??null}ensureDomId(t){const s=this.domIds.get(t);if(s)return s;const i=++this.nextDomId;this.domIds.set(t,i);return i}get activeRecords(){return this.records.filter((t=>t.transitionStatus!=="ending"))}globalLayout(){const t=this.records.filter((t=>!t.positioner));let s=0;let i=0;const e=p(undefined,f.space200);const n=new Map;t.forEach(((t,o)=>{if(t.transitionStatus==="ending"){n.set(t.id,{index:o,offset:s,limited:false});return}const a=i>=Math.max(1,this.limit);n.set(t.id,{index:i,offset:s,limited:a});s+=(this.heights.get(t.id)??0)+e;i+=1}));return n}renderToast(t,s){const i=this.ensureDomId(t.id);const n=`ds-toast-${this.instanceId}-${i}-title`;const o=`ds-toast-${this.instanceId}-${i}-description`;const a=this.swipe?.id===t.id?this.swipe:null;const r=a?.direction??this.dismissedSwipeDirections.get(t.id);const h=!!t.positioner;const c=this.anchoredPositions.get(t.id);const d=t.priority==="high"&&!this.keyboardActive;const l=this.keyboardActive&&!s.limited?0:-1;const f=this.heights.get(t.id);return e("div",{ref:s=>this.bindAnimationCancel(s,t.id),class:{"toast-positioner":true,"toast-positioner--anchored":h,"toast-positioner--ending":t.transitionStatus==="ending"},"data-toast-id":t.id,"data-behind":!h&&s.index>0?"":undefined,"data-limited":s.limited?"":undefined,"data-positioned":h?String(!!c):undefined,"data-side":c?.side,inert:s.limited?true:undefined,"aria-hidden":s.limited?"true":undefined,style:{"--toast-index":String(s.index),"--toast-offset-y":`${s.offset}px`,"--toast-height":f?`${f}px`:undefined,zIndex:String(this.records.length-s.index),left:c?`${c.x}px`:undefined,top:c?`${c.y}px`:undefined},onAnimationEnd:()=>this.handleAnimationComplete(t)},e("div",{class:{"toast-surface":true,"toast-surface--swiping":!!a},role:t.priority==="high"?"alertdialog":"dialog","aria-modal":"false","aria-labelledby":t.title?n:t.description?o:undefined,"aria-describedby":t.title&&t.description?o:undefined,"aria-hidden":d?"true":undefined,"data-type":t.type,"data-priority":t.priority,"data-transition-status":t.transitionStatus,"data-swiping":a?"":undefined,"data-swipe-direction":r,style:{"--toast-swipe-movement-x":`${a?.x??0}px`,"--toast-swipe-movement-y":`${a?.y??0}px`,touchAction:this.touchAction},onPointerDown:s=>this.handlePointerDown(t,s),onPointerMove:t=>this.handlePointerMove(t),onPointerUp:t=>this.handlePointerUp(t),onPointerCancel:t=>this.handlePointerCancel(t),onPointerEnter:h?()=>this.handlePointerEnter(t.id):undefined,onPointerLeave:h?()=>this.handlePointerLeave(t.id):undefined},e("div",{class:"toast-content"},e("div",{class:"toast-copy"},t.title&&e("ds-text",{class:"toast-title",as:"div",variant:"text-title-small",color:"primary",textId:n},t.title),t.description&&e("ds-text",{class:"toast-description",as:"div",variant:"text-body-medium",color:"secondary",textId:o},t.description)),t.action&&e("ds-button-unfilled",{class:"toast-action",variant:"label",size:"md",type:"button",label:t.action.label,"aria-label":t.action.ariaLabel,hasBorder:true,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:s=>this.handleAction(t,s)})),e("ds-button-unfilled",{class:"toast-close",variant:"icon",size:"md",type:"button",icon:"Cross","aria-label":this.closeLabel,hasBorder:false,activeFill:false,focusTabIndex:l,"aria-hidden":!this.keyboardActive?"true":undefined,onDsClick:()=>this.manager.close(t.id,"close-button")})))}render(){const t=this.globalLayout();const s=this.records.filter((t=>!t.positioner));const i=this.records.filter((t=>!!t.positioner));const o=this.records.filter((s=>s.priority==="high"&&s.transitionStatus!=="ending"&&!t.get(s.id)?.limited));return e(n,{key:"d9209fec5c216fdfc0bf6c09fd5a80ed49940e2c"},e("section",{key:"116f5c8a2a540637e87b9cab4b76809b24c84f4c",class:"toast-region",role:"region","aria-label":this.label,"aria-live":"polite","aria-atomic":"false","aria-relevant":"additions text",tabIndex:-1,onFocusin:this.handleFocusIn,onFocusout:t=>this.handleFocusOut(t),onKeyDown:t=>this.handleRegionKeyDown(t)},e("div",{key:"d7d6f616961582c215dfa113d59f88178f560900",class:"toast-viewport","data-expanded":this.expanded?"":undefined,onPointerEnter:()=>this.handlePointerEnter(C),onPointerLeave:()=>this.handlePointerLeave(C)},s.map((s=>this.renderToast(s,t.get(s.id)??{index:0,offset:0,limited:false})))),e("div",{key:"4038593953997142e70921d01c413f474fe17c86",class:"toast-anchored-layer"},i.map((t=>this.renderToast(t,{index:0,offset:0,limited:false})))),e("div",{key:"862fd7b7da5b5221ad4da746e66da0e2f7bed900",class:"toast-assertive-announcer"},o.map((t=>e("div",{role:"alert","aria-atomic":"true"},[t.title,t.description].filter(Boolean).join(". ")))))))}get el(){return this}static get watchers(){return{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}}static get style(){return T()}},[2,"ds-toast",{manager:[16],limit:[2],timeout:[8],label:[1],closeLabel:[1,"close-label"],avoidMobileShellBar:[516,"avoid-mobile-shell-bar"],swipeDirections:[16],records:[32],expanded:[32],keyboardActive:[32],swipe:[32],layoutVersion:[32]},undefined,{manager:[{onManagerChange:0}],timeout:[{onTimeoutChange:0}]}]);function D(){if(typeof customElements==="undefined"){return}const t=["ds-toast","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-toast":if(!customElements.get(o(t))){customElements.define(o(t),j)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){h()}break;case"ds-icon":if(!customElements.get(o(t))){c()}break;case"ds-loader":if(!customElements.get(o(t))){d()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}D();const R=j;const $=D;export{R as DsToast,$ as defineCustomElement};
 //# sourceMappingURL=ds-toast.js.map