@ds-mo/ui 12.2.0 → 12.3.0

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

@@ -1 +1 @@
-{"version":3,"names":["resolveShellPageCapacity","inlineSize","compactAt","constrainedAt","hysteresis","previous","resolveShellPageHeaderVariant","presentation","capacity","pageTopVisible","shellPageCss","ShellPage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headerPresentation","contentInset","sentinelEl","spacerEl","headerEl","expandedHeaderHeight","resizeObserver","headerResizeObserver","headerRevealFrame","scrollRoot","layoutCoalescer","createRafCoalescer","syncCapacity","handleScroll","rootTop","window","getBoundingClientRect","top","handleHeaderSlotChange","event","slot","target","header","assignedElements","flatten","find","element","tagName","toLowerCase","observeHeader","componentDidLoad","findHeader","connectObservers","connectScrollRoot","schedule","componentDidRender","syncHeaderVariant","disconnectedCallback","disconnect","cancelHeaderReveal","removeEventListener","cancel","effectiveVariant","isScrollCompacted","ResizeObserver","observe","el","composedParent","assignedSlot","parentElement","findScrollRoot","ancestor","document","documentElement","overflow","getComputedStyle","overflowY","addEventListener","passive","querySelector","width","resolveCssLengthPx","next","compactHeaderHeight","setSpacerHeight","height","style","setProperty","Math","max","variantClass","variant","cancelAnimationFrame","removeAttribute","revealHeaderWhenSynced","framesRemaining","MAX_HEADER_REVEAL_FRAMES","reveal","classList","contains","requestAnimationFrame","concealUntilSynced","renderedVariantIsStale","setAttribute","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 interface ShellPageCapacityOptions {\n  inlineSize: number;\n  compactAt: number;\n  constrainedAt: number;\n  hysteresis: number;\n  previous: ShellPageCapacity | null;\n}\n\nexport function resolveShellPageCapacity({\n  inlineSize,\n  compactAt,\n  constrainedAt,\n  hysteresis,\n  previous,\n}: ShellPageCapacityOptions): ShellPageCapacity {\n  if (previous === null) {\n    if (inlineSize <= constrainedAt) return 'constrained';\n    if (inlineSize <= compactAt) return 'compact';\n    return 'roomy';\n  }\n\n  if (previous === 'constrained') {\n    if (inlineSize <= constrainedAt + hysteresis) return 'constrained';\n    return inlineSize <= compactAt ? 'compact' : 'roomy';\n  }\n\n  if (inlineSize <= constrainedAt) return 'constrained';\n\n  if (previous === 'compact') {\n    return inlineSize <= compactAt + hysteresis ? 'compact' : 'roomy';\n  }\n\n  return inlineSize <= compactAt ? 'compact' : 'roomy';\n}\n\nexport function resolveShellPageHeaderVariant(\n  presentation: ShellPageHeaderPresentation,\n  capacity: ShellPageCapacity,\n  pageTopVisible: boolean\n): BarTitleVariant {\n  if (presentation !== 'auto') return presentation;\n  if (capacity === 'constrained') return 'constrained';\n  if (capacity === 'compact' || !pageTopVisible) return 'compact';\n  return 'expanded';\n}\n",":host {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: 0;\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--color-background-primary);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__sticky-header ::slotted(ds-bar-title),\n.shell-page__sticky-header ::slotted(ds-bar-workflow) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--color-background-primary);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createRafCoalescer } from '../../shell/chrome-transition';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageCapacity, resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic container/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  @State() private capacity: ShellPageCapacity | null = null;\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private resizeObserver: ResizeObserver | null = null;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n  private readonly layoutCoalescer = createRafCoalescer(() => this.syncCapacity());\n\n  componentDidLoad() {\n    // Resolve the already-laid-out page width before adopting a slotted header.\n    // Waiting for the first ResizeObserver/RAF lets BarTitle paint its default\n    // expanded variant for one frame when persistent shell chrome narrows a\n    // newly navigated page.\n    this.syncCapacity();\n    this.observeHeader(this.findHeader());\n    this.connectObservers();\n    this.connectScrollRoot();\n    this.layoutCoalescer.schedule();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.cancelHeaderReveal();\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n    this.layoutCoalescer.cancel();\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.capacity ?? 'roomy',\n      this.pageTopVisible\n    );\n  }\n\n  private get isScrollCompacted(): boolean {\n    return this.headerPresentation === 'auto' && this.capacity === 'roomy' && !this.pageTopVisible;\n  }\n\n  private connectObservers() {\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => this.layoutCoalescer.schedule());\n      this.resizeObserver.observe(this.el);\n    }\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll') return ancestor as HTMLElement;\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = this.findScrollRoot();\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    this.pageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private syncCapacity() {\n    const inlineSize = this.el.getBoundingClientRect().width;\n    if (inlineSize <= 0) return;\n\n    const compactAt = resolveCssLengthPx('--dimension-panel-width-2xl', 0);\n    const constrainedAt = resolveCssLengthPx('--dimension-panel-width-lg', 0);\n    const hysteresis = resolveCssLengthPx('--dimension-space-100', 0);\n    if (compactAt <= 0 || constrainedAt <= 0) return;\n\n    const next = resolveShellPageCapacity({\n      inlineSize,\n      compactAt,\n      constrainedAt,\n      hysteresis,\n      previous: this.capacity,\n    });\n    if (next !== this.capacity) this.capacity = next;\n    else this.syncHeaderVariant();\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil re-renders within a frame or two of a prop change, but this cap\n    // guarantees the header can never stay hidden indefinitely if that\n    // assumption ever breaks.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (framesRemaining <= 0 || header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    const next = this.effectiveVariant;\n    if (header.variant === 'expanded') {\n      this.expandedHeaderHeight = header.getBoundingClientRect().height;\n    }\n\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (concealUntilSynced && renderedVariantIsStale) {\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) header.variant = next;\n    if (concealUntilSynced && renderedVariantIsStale) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.setSpacerHeight(0);\n\n    if (!header) return;\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        if (header.variant === 'expanded') {\n          this.expandedHeaderHeight = header.getBoundingClientRect().height;\n        }\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    this.syncHeaderVariant(true);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements({ flatten: true })\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"main\"\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__sticky-header\">\n          <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"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","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":[]}

package/dist/components/ds-skeleton.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as o,a as n,t as r}from"./index.js";const a=()=>`:host(.ds-control--md),.ds-control--md,:host(.ds-control--sm),.ds-control--sm,:host(.ds-control--xs),.ds-control--xs{--ds-control-radius:var(--dimension-radius-025)}:host(.ds-control--md),.ds-control--md{--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)}:host(.ds-control--sm),.ds-control--sm{--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)}:host(.ds-control--xs),.ds-control--xs{--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}@keyframes ds-shimmer-text-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}@keyframes ds-shimmer-surface-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}.ds-shimmer-text{--ds-shimmer-base:currentColor;--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc(     var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay)   );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc(     var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200)   );background-color:var(--ds-shimmer-base);background-image:linear-gradient(     330deg,     transparent calc(50% - var(--ds-shimmer-spread)),     var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%,     transparent calc(50% + var(--ds-shimmer-spread))   );background-repeat:no-repeat;background-position:100% 0;background-size:calc(     200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2   ) 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ds-shimmer-text-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}.ds-shimmer-surface{--ds-shimmer-surface-base:var(--color-foreground-quaternary);--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc(     var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay)   );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc(     var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200)   );position:relative;overflow:hidden;background-color:var(--ds-shimmer-surface-base)}.ds-shimmer-surface::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(     330deg,     transparent calc(50% - var(--ds-shimmer-spread)),     var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%,     transparent calc(50% + var(--ds-shimmer-spread))   );background-repeat:no-repeat;background-position:100% 0;background-size:calc(     200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2   ) 100%;animation:ds-shimmer-surface-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}@media (prefers-reduced-motion: reduce){.ds-shimmer-text{animation:none;background-image:none;-webkit-text-fill-color:currentColor}.ds-shimmer-surface::after{display:none;animation:none}}:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;vertical-align:middle;--ds-skeleton-base:var(--color-foreground-quaternary);--ds-shimmer:var(--color-shimmer-shimmer)}.skeleton__shape{--ds-shimmer-surface-base:var(--ds-skeleton-base);display:block;width:100%;height:100%;flex:0 0 auto;background-color:var(--ds-skeleton-base);border-radius:var(--dimension-radius-025)}:host(.skeleton--background-medium){--ds-skeleton-base:var(--color-foreground-on-medium-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-medium-background)}:host(.skeleton--background-bold){--ds-skeleton-base:var(--color-foreground-on-bold-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-bold-background)}:host(.skeleton--background-strong){--ds-skeleton-base:var(--color-foreground-on-strong-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-strong-background)}:host(.skeleton--background-translucent){--ds-skeleton-base:var(--color-translucent-foreground-quaternary);--ds-shimmer:var(--color-translucent-shimmer)}:host(.skeleton--background-inverted){--ds-skeleton-base:var(--color-inverted-foreground-quaternary);--ds-shimmer:var(--color-inverted-shimmer)}:host(.skeleton--background-media){--ds-skeleton-base:var(--color-media-foreground-quaternary);--ds-shimmer:var(--color-media-shimmer)}:host(.skeleton--background-always-dark){--ds-skeleton-base:var(--color-always-dark-foreground-quaternary);--ds-shimmer:var(--color-always-dark-shimmer)}:host(.skeleton--background-navigation){--ds-skeleton-base:var(--color-navigation-foreground-quaternary);--ds-shimmer:var(--color-navigation-shimmer)}:host(.skeleton--text){width:100%;height:var(--ds-skeleton-canvas-size);padding-block:var(--dimension-space-025)}:host(.skeleton--text) .skeleton__shape{height:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050))}:host(.skeleton--text-text-display-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-3xl)}:host(.skeleton--text-text-display-small){--ds-skeleton-canvas-size:var(--typography-lineheight-2xl)}:host(.skeleton--text-text-title-large){--ds-skeleton-canvas-size:var(--typography-lineheight-xl)}:host(.skeleton--text-text-title-medium),:host(.skeleton--text-text-body-large){--ds-skeleton-canvas-size:var(--typography-lineheight-lg)}:host(.skeleton--text-text-title-small),:host(.skeleton--text-text-body-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-md)}:host(.skeleton--text-text-body-small){--ds-skeleton-canvas-size:var(--typography-lineheight-sm)}:host(.skeleton--text-text-caption){--ds-skeleton-canvas-size:var(--typography-lineheight-xs)}:host(.skeleton--icon){width:var(--ds-skeleton-canvas-size);height:var(--ds-skeleton-canvas-size);padding:var(--dimension-space-025)}:host(.skeleton--icon) .skeleton__shape{width:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));height:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050))}:host(.skeleton--icon.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}:host(.skeleton--icon-xs){--ds-skeleton-canvas-size:var(--dimension-iconography-xs)}:host(.skeleton--icon-sm){--ds-skeleton-canvas-size:var(--dimension-iconography-sm)}:host(.skeleton--icon-md){--ds-skeleton-canvas-size:var(--dimension-iconography-md)}:host(.skeleton--icon-lg){--ds-skeleton-canvas-size:var(--dimension-iconography-lg)}:host(.skeleton--icon-xl){--ds-skeleton-canvas-size:var(--dimension-iconography-xl)}:host(.skeleton--icon-2xl){--ds-skeleton-canvas-size:var(--dimension-iconography-2xl)}:host(.skeleton--icon-3xl){--ds-skeleton-canvas-size:var(--dimension-iconography-3xl)}:host(.skeleton--control){width:100%;height:var(--ds-control-height)}:host(.skeleton--control) .skeleton__shape{border-radius:var(--ds-control-radius, var(--dimension-radius-025))}:host(.skeleton--control.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}`;const t=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.textVariant="text-body-medium";this.iconSize="md";this.controlSize="md";this.rounded=false;this.shimmer=true}get widthCss(){const e=this.width;if(e==null)return undefined;return typeof e==="number"?`${e}px`:e}render(){return o(n,{key:"680ba34b733a5870984e80807aca59a8b8b0be1d","aria-hidden":"true",class:{skeleton:true,[`skeleton--${this.variant}`]:true,[`skeleton--text-${this.textVariant}`]:this.variant==="text",[`skeleton--icon-${this.iconSize}`]:this.variant==="icon",[`ds-control--${this.controlSize}`]:this.variant==="control",[`skeleton--background-${this.background}`]:!!this.background,"skeleton--rounded":this.variant!=="text"&&this.rounded},style:this.variant==="icon"?undefined:{width:this.widthCss}},o("span",{key:"f4a4e182163de8ffe99d9ff89cf211c4a26a72d5",class:{skeleton__shape:true,"ds-shimmer-surface":this.shimmer}}))}static get style(){return a()}},[1,"ds-skeleton",{variant:[1],textVariant:[1,"text-variant"],iconSize:[1,"icon-size"],controlSize:[1,"control-size"],width:[8],rounded:[4],shimmer:[4],background:[1]}]);function i(){if(typeof customElements==="undefined"){return}const e=["ds-skeleton"];e.forEach((e=>{switch(e){case"ds-skeleton":if(!customElements.get(r(e))){customElements.define(r(e),t)}break}}))}i();const d=t;const l=i;export{d as DsSkeleton,l as defineCustomElement};
+import{p as e,H as s,h as o,a as n,t as r}from"./index.js";const t=()=>`:host(.ds-control--md),.ds-control--md,:host(.ds-control--sm),.ds-control--sm,:host(.ds-control--xs),.ds-control--xs{--ds-control-radius:var(--dimension-radius-025)}:host(.ds-control--md),.ds-control--md{--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)}:host(.ds-control--sm),.ds-control--sm{--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)}:host(.ds-control--xs),.ds-control--xs{--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}@keyframes ds-shimmer-text-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}@keyframes ds-shimmer-surface-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}.ds-shimmer-text{--ds-shimmer-base:currentColor;--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc(     var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay)   );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc(     var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200)   );background-color:var(--ds-shimmer-base);background-image:linear-gradient(     330deg,     transparent calc(50% - var(--ds-shimmer-spread)),     var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%,     transparent calc(50% + var(--ds-shimmer-spread))   );background-repeat:no-repeat;background-position:100% 0;background-size:calc(     200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2   ) 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ds-shimmer-text-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}.ds-shimmer-surface{--ds-shimmer-surface-base:var(--color-foreground-quaternary);--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc(     var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay)   );--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc(     var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200)   );position:relative;overflow:hidden;background-color:var(--ds-shimmer-surface-base)}.ds-shimmer-surface::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(     330deg,     transparent calc(50% - var(--ds-shimmer-spread)),     var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%,     transparent calc(50% + var(--ds-shimmer-spread))   );background-repeat:no-repeat;background-position:100% 0;background-size:calc(     200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2   ) 100%;animation:ds-shimmer-surface-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing) infinite}@media (prefers-reduced-motion: reduce){.ds-shimmer-text{animation:none;background-image:none;-webkit-text-fill-color:currentColor}.ds-shimmer-surface::after{display:none;animation:none}}:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;vertical-align:middle;--ds-skeleton-base:var(--color-foreground-quaternary);--ds-shimmer:var(--color-shimmer-shimmer)}.skeleton__shape{--ds-shimmer-surface-base:var(--ds-skeleton-base);display:block;width:100%;height:100%;flex:0 0 auto;background-color:var(--ds-skeleton-base);border-radius:var(--dimension-radius-025)}:host(.skeleton--background-medium){--ds-skeleton-base:var(--color-foreground-on-medium-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-medium-background)}:host(.skeleton--background-bold){--ds-skeleton-base:var(--color-foreground-on-bold-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-bold-background)}:host(.skeleton--background-strong){--ds-skeleton-base:var(--color-foreground-on-strong-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-strong-background)}:host(.skeleton--background-translucent){--ds-skeleton-base:var(--color-translucent-foreground-quaternary);--ds-shimmer:var(--color-translucent-shimmer)}:host(.skeleton--background-inverted){--ds-skeleton-base:var(--color-inverted-foreground-quaternary);--ds-shimmer:var(--color-inverted-shimmer)}:host(.skeleton--background-media){--ds-skeleton-base:var(--color-media-foreground-quaternary);--ds-shimmer:var(--color-media-shimmer)}:host(.skeleton--background-always-dark){--ds-skeleton-base:var(--color-always-dark-foreground-quaternary);--ds-shimmer:var(--color-always-dark-shimmer)}:host(.skeleton--background-navigation){--ds-skeleton-base:var(--color-navigation-foreground-quaternary);--ds-shimmer:var(--color-navigation-shimmer)}:host(.skeleton--text){width:100%;height:var(--ds-skeleton-canvas-size);padding-block:var(--dimension-space-025)}:host(.skeleton--text) .skeleton__shape{height:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050))}:host(.skeleton--text-text-display-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-3xl)}:host(.skeleton--text-text-display-small){--ds-skeleton-canvas-size:var(--typography-lineheight-2xl)}:host(.skeleton--text-text-title-large){--ds-skeleton-canvas-size:var(--typography-lineheight-xl)}:host(.skeleton--text-text-title-medium),:host(.skeleton--text-text-body-large){--ds-skeleton-canvas-size:var(--typography-lineheight-lg)}:host(.skeleton--text-text-title-small),:host(.skeleton--text-text-body-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-md)}:host(.skeleton--text-text-body-small){--ds-skeleton-canvas-size:var(--typography-lineheight-sm)}:host(.skeleton--text-text-caption){--ds-skeleton-canvas-size:var(--typography-lineheight-xs)}:host(.skeleton--icon){width:var(--ds-skeleton-canvas-size);height:var(--ds-skeleton-canvas-size);padding:var(--dimension-space-025)}:host(.skeleton--icon) .skeleton__shape{width:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050));height:calc(var(--ds-skeleton-canvas-size) - var(--dimension-space-050))}:host(.skeleton--icon.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}:host(.skeleton--icon-xs){--ds-skeleton-canvas-size:var(--dimension-iconography-xs)}:host(.skeleton--icon-sm){--ds-skeleton-canvas-size:var(--dimension-iconography-sm)}:host(.skeleton--icon-md){--ds-skeleton-canvas-size:var(--dimension-iconography-md)}:host(.skeleton--icon-lg){--ds-skeleton-canvas-size:var(--dimension-iconography-lg)}:host(.skeleton--icon-xl){--ds-skeleton-canvas-size:var(--dimension-iconography-xl)}:host(.skeleton--icon-2xl){--ds-skeleton-canvas-size:var(--dimension-iconography-2xl)}:host(.skeleton--icon-3xl){--ds-skeleton-canvas-size:var(--dimension-iconography-3xl)}:host(.skeleton--control){width:100%;height:var(--ds-control-height)}:host(.skeleton--control) .skeleton__shape{border-radius:var(--ds-control-radius, var(--dimension-radius-025))}:host(.skeleton--control.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}`;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.textVariant="text-body-medium";this.iconSize="md";this.controlSize="md";this.rounded=false;this.shimmer=true}get widthCss(){const e=this.width;if(e==null)return undefined;return typeof e==="number"?`${e}px`:e}render(){return o(n,{key:"ba786d9013269c8b331e2389dc934b6fdc6c7c99","aria-hidden":"true",class:{skeleton:true,[`skeleton--${this.variant}`]:true,[`skeleton--text-${this.textVariant}`]:this.variant==="text",[`skeleton--icon-${this.iconSize}`]:this.variant==="icon",[`ds-control--${this.controlSize}`]:this.variant==="control",[`skeleton--background-${this.background}`]:!!this.background,"skeleton--rounded":this.variant!=="text"&&this.rounded},style:this.variant==="icon"?undefined:{width:this.widthCss}},o("span",{key:"dfa9f8798149479fb6ed0473681a590225562ea8",class:{skeleton__shape:true,"ds-shimmer-surface":this.shimmer}}))}static get style(){return t()}},[1,"ds-skeleton",{variant:[1],textVariant:[1,"text-variant"],iconSize:[1,"icon-size"],controlSize:[1,"control-size"],width:[8],rounded:[4],shimmer:[4],background:[1]}]);function i(){if(typeof customElements==="undefined"){return}const e=["ds-skeleton"];e.forEach((e=>{switch(e){case"ds-skeleton":if(!customElements.get(r(e))){customElements.define(r(e),a)}break}}))}i();const d=a;const l=i;export{d as DsSkeleton,l as defineCustomElement};
 //# sourceMappingURL=ds-skeleton.js.map

package/dist/components/ds-slider.js

@@ -1,2 +1,2 @@
-import{p as s,H as t,c as i,h as e,a as r,t as a}from"./index.js";import{d}from"./p-C0_8K4y7.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-400);--ds-slider-thumb-size:var(--dimension-size-200);--ds-slider-track-size:var(--dimension-size-100);--ds-slider-track-stroke:var(--dimension-stroke-width-012);--ds-slider-vertical-length:calc(var(--dimension-size-800) * 3);display:flex;flex-direction:column;box-sizing:border-box;gap:var(--dimension-space-050);width:100%;color:var(--color-foreground-primary)}.slider--sm.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-300);--ds-slider-thumb-size:var(--dimension-size-150);--ds-slider-track-size:var(--dimension-size-075)}.slider--xs.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-200);--ds-slider-thumb-size:var(--dimension-size-100);--ds-slider-track-size:var(--dimension-size-050)}.slider--vertical.sc-ds-slider-h{width:fit-content;min-width:var(--dimension-form-width-xs)}.slider__label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-100);min-width:0}.slider__label.sc-ds-slider{min-width:0}.slider__value.sc-ds-slider{flex-shrink:0}.slider__control.sc-ds-slider{position:relative;width:100%;height:var(--ds-slider-control-size);border-radius:var(--dimension-radius-half);cursor:pointer;touch-action:none;user-select:none}.slider--vertical.sc-ds-slider-h .slider__control.sc-ds-slider{align-self:center;width:var(--ds-slider-control-size);height:var(--ds-slider-vertical-length)}.slider--readonly.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:default}.ds-control-inactive.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:not-allowed}.slider__rail.sc-ds-slider{position:absolute;top:50%;right:0;left:0;height:var(--ds-slider-track-size);overflow:hidden;border-radius:var(--dimension-radius-025);background-color:transparent;box-shadow:inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);transform:translateY(-50%);pointer-events:none}.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{right:calc(var(--ds-slider-thumb-size) / 2);left:calc(var(--ds-slider-thumb-size) / 2)}.slider__indicator.sc-ds-slider{position:absolute;top:0;bottom:0;left:0;width:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );border-radius:inherit;background-color:var(--color-background-bold-brand)}.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );width:calc(     ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *       (100% - var(--ds-slider-thumb-size))   )}.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(var(--ds-slider-start-pct, 0) * 1%);width:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider__thumb.sc-ds-slider{position:absolute;top:50%;left:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));width:var(--ds-slider-thumb-size);height:var(--ds-slider-thumb-size);transform:translateY(-50%);z-index:1}.slider__thumb--active.sc-ds-slider{z-index:2}.slider__input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;appearance:none;pointer-events:none;z-index:2}.slider__thumb-visual.sc-ds-slider{position:absolute;inset:0;box-sizing:border-box;overflow:visible;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);pointer-events:none;transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.slider__thumb-wash.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:background-color var(--effect-motion-short-2)}.sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb.sc-ds-slider:hover .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-hover)}[data-dragging].sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb--active.sc-ds-slider .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-pressed)}.slider__input.sc-ds-slider:focus-visible+.slider__thumb-visual.sc-ds-slider,[data-review-focus].sc-ds-slider-h .slider__thumb[data-index='0'].sc-ds-slider .slider__thumb-visual.sc-ds-slider{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.slider--vertical.sc-ds-slider-h .slider__rail.sc-ds-slider{top:0;right:auto;bottom:0;left:50%;width:var(--ds-slider-track-size);height:auto;transform:translateX(-50%)}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{top:calc(var(--ds-slider-thumb-size) / 2);bottom:calc(var(--ds-slider-thumb-size) / 2)}.slider--vertical.sc-ds-slider-h .slider__indicator.sc-ds-slider{top:auto;right:0;bottom:0;left:0;width:auto;height:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   )}.slider--vertical.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );height:calc(     ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *       (100% - var(--ds-slider-thumb-size))   )}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(var(--ds-slider-start-pct, 0) * 1%);height:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider--vertical.sc-ds-slider-h .slider__thumb.sc-ds-slider{top:auto;bottom:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));left:50%;transform:translateX(-50%)}@media (prefers-reduced-motion: reduce){.slider__thumb-visual.sc-ds-slider,.slider__thumb-wash.sc-ds-slider{transition:none}}`;let l=0;let h=0;const o=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.dsCommit=i(this,"dsCommit");this.internals=this.attachInternals();this.value=0;this.min=0;this.max=100;this.step=1;this.minStepsBetweenValues=0;this.showValue=true;this.size="md";this.orientation="horizontal";this.thumbAlignment="edge";this.disabled=false;this.readOnly=false;this.isInactive=false;this.ariaLabel=null;this.startLabel="Minimum value";this.endLabel="Maximum value";this.valueTexts=[];this.valuePrefix="";this.valueSuffix="";this.rangeSeparator="–";this.formDisabled=false;this.dragging=false;this.focused=false;this.touched=false;this.activeThumbIndex=0;this.generatedId=`ds-slider-${++l}`;this.labelId=`${this.generatedId}-label`;this.initialValue=0;this.lastCommittedValue=0;this.pointerId=null;this.pointerStartValue=0;this.controlEl=null;this.handleNativeInput=(s,t)=>{const i=s.target;this.activeThumbIndex=t;if(this.readOnly||this.isDisabled){i.value=String(this.resolvedValues[t]);return}this.setValueAt(t,Number(i.value))};this.handleNativeChange=()=>{if(!this.readOnly&&!this.isDisabled)this.commitIfChanged()};this.handleKeyDown=s=>{if(!this.readOnly)return;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(s.key)){s.preventDefault()}};this.handleFocus=s=>{this.activeThumbIndex=s;this.focused=true};this.handleBlur=s=>{const t=s.relatedTarget;if(t instanceof Node&&this.el.contains(t))return;this.focused=false;this.touched=true};this.handleHostClick=s=>{if(s.target!==this.el||this.isDisabled)return;const t=this.el.querySelectorAll(".slider__input");t[Math.min(this.activeThumbIndex,t.length-1)]?.focus()};this.handlePointerDown=s=>{if(s.button!==0||this.isDisabled||this.readOnly)return;s.preventDefault();const t=this.valueFromPointer(s);const i=this.closestThumbIndex(t,s.target);this.activeThumbIndex=i;this.pointerId=s.pointerId;this.pointerStartValue=this.cloneValue(this.publicValue);this.dragging=true;this.setValueAt(i,t);this.controlEl?.setPointerCapture(s.pointerId);requestAnimationFrame((()=>this.el.querySelectorAll(".slider__input")[i]?.focus({preventScroll:true})))};this.handlePointerMove=s=>{if(this.pointerId!==s.pointerId||!this.dragging)return;s.preventDefault();this.setValueAt(this.activeThumbIndex,this.valueFromPointer(s))}}componentWillLoad(){this.initialValue=this.cloneValue(this.publicValue);this.lastCommittedValue=this.cloneValue(this.publicValue);this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.resolvedValues;if(this.isDisabled||!this.name){this.internals.setFormValue(null);return}if(this.isRange){const t=new FormData;s.forEach((s=>t.append(this.name,String(s))));this.internals.setFormValue(t,JSON.stringify(s))}else{this.internals.setFormValue(String(s[0]),String(s[0]))}}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.cloneValue(this.initialValue);this.lastCommittedValue=this.cloneValue(this.initialValue);this.dragging=false;this.focused=false;this.touched=false}formStateRestoreCallback(s){if(typeof s!=="string")return;if(this.isRange){try{const t=JSON.parse(s);if(Array.isArray(t))this.value=t.map(Number).slice(0,2)}catch{this.value=this.cloneValue(this.initialValue)}}else{const t=Number(s);if(Number.isFinite(t))this.value=t}this.lastCommittedValue=this.cloneValue(this.publicValue)}async setFocus(s=0){const t=this.el.querySelectorAll(".slider__input");t[Math.max(0,Math.min(s,t.length-1))]?.focus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get isRange(){return Array.isArray(this.value)}get safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get safeMin(){return Number.isFinite(this.min)?this.min:0}get safeMax(){const s=this.safeMin;return Number.isFinite(this.max)&&this.max>s?this.max:s+this.safeStep}get minimumGap(){const s=Number.isFinite(this.minStepsBetweenValues)?Math.max(0,Math.floor(this.minStepsBetweenValues)):0;return s*this.safeStep}get resolvedValues(){const s=this.safeMin;const t=this.safeMax;if(!this.isRange)return[this.snap(Number(this.value))];const i=this.value;let e=this.snap(Number(i[0]??s));let r=this.snap(Number(i[1]??t));if(e>r)[e,r]=[r,e];const a=Math.min(this.minimumGap,t-s);if(r-e<a){r=Math.min(t,this.snap(e+a));e=Math.max(s,this.snap(r-a))}return[e,r]}get publicValue(){const s=this.resolvedValues;return this.isRange?[...s]:s[0]}cloneValue(s){return Array.isArray(s)?[...s]:s}valuesEqual(s,t){if(Array.isArray(s)&&Array.isArray(t)){return s.length===t.length&&s.every(((s,i)=>s===t[i]))}return!Array.isArray(s)&&!Array.isArray(t)&&s===t}decimalPlaces(s){const t=String(s).toLowerCase();if(t.includes("e-"))return Number(t.split("e-")[1])||0;return t.includes(".")?t.split(".")[1].length:0}snap(s){const t=this.safeMin;const i=this.safeMax;const e=Number.isFinite(s)?s:t;const r=t+Math.round((e-t)/this.safeStep)*this.safeStep;const a=Math.min(10,Math.max(this.decimalPlaces(t),this.decimalPlaces(i),this.decimalPlaces(this.safeStep)));return Number(Math.min(i,Math.max(t,r)).toFixed(a))}percent(s){return(s-this.safeMin)/(this.safeMax-this.safeMin)*100}allowedMin(s,t=this.resolvedValues){return this.isRange&&s===1?Math.min(this.safeMax,t[0]+this.minimumGap):this.safeMin}allowedMax(s,t=this.resolvedValues){return this.isRange&&s===0?Math.max(this.safeMin,t[1]-this.minimumGap):this.safeMax}setValueAt(s,t){const i=this.publicValue;const e=this.resolvedValues;const r=Math.min(this.allowedMax(s,e),Math.max(this.allowedMin(s,e),this.snap(t)));e[s]=r;const a=this.isRange?[...e]:e[0];if(this.valuesEqual(i,a))return false;this.value=a;this.dsChange.emit(this.cloneValue(a));return true}commitIfChanged(){const s=this.publicValue;if(this.valuesEqual(s,this.lastCommittedValue))return;this.lastCommittedValue=this.cloneValue(s);this.dsCommit.emit(this.cloneValue(s))}syncNativeLabels(){if(this.label||this.ariaLabel||this.ariaLabelledby||this.isRange)return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-slider-label-${++h}`;return s.id}));if(s.length)this.externalLabelledby=s.join(" ")}formattedValue(s,t){const i=this.valueTexts[t]??this.valueText;if(i)return i;let e;try{e=new Intl.NumberFormat(this.locale,this.formatOptions).format(s)}catch{e=String(s)}return`${this.valuePrefix}${e}${this.valueSuffix}`}ariaValueText(s,t){if(this.valueTexts[t]||this.valueText||this.valuePrefix||this.valueSuffix||this.formatOptions){return this.formattedValue(s,t)}return undefined}pointerPercent(s){const t=this.controlEl;if(!t)return 0;const i=t.getBoundingClientRect();const e=this.el.querySelector(".slider__thumb");const r=e?this.orientation==="horizontal"?e.offsetWidth:e.offsetHeight:0;const a=r/2;if(this.orientation==="vertical"){const t=Math.max(1,i.height-a*2);return Math.min(1,Math.max(0,(i.bottom-a-s.clientY)/t))}const d=Math.max(1,i.width-a*2);const n=(s.clientX-i.left-a)/d;return Math.min(1,Math.max(0,n))}valueFromPointer(s){return this.snap(this.safeMin+this.pointerPercent(s)*(this.safeMax-this.safeMin))}closestThumbIndex(s,i){const e=i instanceof t?i.closest(".slider__thumb"):null;if(e?.dataset["index"])return Number(e.dataset["index"]);if(!this.isRange)return 0;const r=this.resolvedValues;const a=Math.abs(s-r[0]);const d=Math.abs(s-r[1]);if(a===d)return s>=r[0]?1:0;return a<d?0:1}endPointerInteraction(s,t){if(this.pointerId!==s.pointerId)return;if(this.controlEl?.hasPointerCapture(s.pointerId))this.controlEl.releasePointerCapture(s.pointerId);this.pointerId=null;this.dragging=false;this.touched=true;if(!t&&!this.valuesEqual(this.pointerStartValue,this.publicValue))this.commitIfChanged()}renderThumb(s,t){const i=t===0?this.inputId??`${this.generatedId}-input`:`${this.inputId??`${this.generatedId}-input`}-end`;const r=t===0?this.startLabel:this.endLabel;const a=this.isRange?undefined:this.ariaLabelledby??(this.label?this.labelId:this.externalLabelledby);const d=this.isRange?r:a?undefined:this.ariaLabel;return e("div",{class:{slider__thumb:true,"slider__thumb--active":t===this.activeThumbIndex},"data-index":String(t),style:{"--ds-slider-thumb-pct":String(this.percent(s))}},e("input",{class:"slider__input",type:"range",id:i,min:this.allowedMin(t),max:this.allowedMax(t),step:this.safeStep,value:s,disabled:this.isDisabled,"aria-label":d,"aria-labelledby":a,"aria-describedby":this.ariaDescribedby,"aria-valuetext":this.ariaValueText(s,t),"aria-orientation":this.orientation==="vertical"?"vertical":undefined,"aria-readonly":this.readOnly?"true":undefined,onInput:s=>this.handleNativeInput(s,t),onChange:this.handleNativeChange,onKeyDown:this.handleKeyDown,onFocus:()=>this.handleFocus(t),onBlur:this.handleBlur}),e("span",{class:"slider__thumb-visual","aria-hidden":"true"},e("span",{class:"slider__thumb-wash"})))}render(){const s=this.resolvedValues;const t=s[0];const i=s[s.length-1];const a=this.inputId??`${this.generatedId}-input`;const d=!this.valuesEqual(this.publicValue,this.initialValue);const n=s.map(((s,t)=>this.formattedValue(s,t))).join(` ${this.rangeSeparator} `);return e(r,{key:"0e8a27210bbcaff8f05bede3c73cb76c897869c8","aria-disabled":this.isDisabled?"true":undefined,class:{slider:true,[`slider--${this.size}`]:true,[`slider--${this.orientation}`]:true,[`slider--thumb-${this.thumbAlignment}`]:true,"slider--range":this.isRange,"slider--readonly":this.readOnly,"ds-control-inactive":this.isDisabled},"data-orientation":this.orientation,"data-disabled":this.isDisabled?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-dragging":this.dragging?"":undefined,"data-focused":this.focused?"":undefined,"data-filled":"","data-dirty":d?"":undefined,"data-touched":this.touched?"":undefined,"data-valid":!this.isDisabled?"":undefined,onClick:this.handleHostClick},(this.label||this.showValue)&&e("div",{key:"9d4de7bf34a133dca63cec1b840e2dc79a3eb16b",class:"slider__label-row"},this.label&&e("ds-text",{key:"710d2c7839b30adde2c5a7956f95353b443ca769",class:"slider__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:a,textId:this.labelId},this.label),this.showValue&&e("ds-text",{key:"1d39bb90fcfb89be33d490a6104f1d59c36c0582",class:"slider__value",as:"span",variant:"text-body-small",color:"primary",fontFeature:"tabular-nums"},n)),e("div",{key:"059b705b7e308c1e10c78b8e1132ee45f8b8b2c8",class:"slider__control",ref:s=>{this.controlEl=s??null},style:{"--ds-slider-start-pct":String(this.isRange?this.percent(t):0),"--ds-slider-end-pct":String(this.percent(i))},onPointerDown:this.handlePointerDown,onPointerMove:this.handlePointerMove,onPointerUp:s=>this.endPointerInteraction(s,false),onPointerCancel:s=>this.endPointerInteraction(s,true)},e("div",{key:"e12a9e2414350e82ec4adec19f116745da0a0680",class:"slider__rail","aria-hidden":"true"},e("div",{key:"cdc301859417aa4b5c8c0b618cf93f38957e90d2",class:"slider__indicator"})),s.map(((s,t)=>this.renderThumb(s,t)))))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}}static get style(){return n()}},[66,"ds-slider",{value:[1026],min:[2],max:[2],step:[2],minStepsBetweenValues:[2,"min-steps-between-values"],label:[1],showValue:[4,"show-value"],size:[1],orientation:[1],thumbAlignment:[1,"thumb-alignment"],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],startLabel:[1,"start-label"],endLabel:[1,"end-label"],valueText:[1,"value-text"],valueTexts:[16],locale:[1],formatOptions:[16],valuePrefix:[1,"value-prefix"],valueSuffix:[1,"value-suffix"],rangeSeparator:[1,"range-separator"],inputId:[1,"input-id"],formDisabled:[32],dragging:[32],focused:[32],touched:[32],activeThumbIndex:[32],externalLabelledby:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}]);function c(){if(typeof customElements==="undefined"){return}const s=["ds-slider","ds-text"];s.forEach((s=>{switch(s){case"ds-slider":if(!customElements.get(a(s))){customElements.define(a(s),o)}break;case"ds-text":if(!customElements.get(a(s))){d()}break}}))}c();const u=o;const m=c;export{u as DsSlider,m as defineCustomElement};
+import{p as s,H as t,c as i,h as e,a as r,t as d}from"./index.js";import{d as a}from"./p-BwGnhInj.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-400);--ds-slider-thumb-size:var(--dimension-size-200);--ds-slider-track-size:var(--dimension-size-100);--ds-slider-track-stroke:var(--dimension-stroke-width-012);--ds-slider-vertical-length:calc(var(--dimension-size-800) * 3);display:flex;flex-direction:column;box-sizing:border-box;gap:var(--dimension-space-050);width:100%;color:var(--color-foreground-primary)}.slider--sm.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-300);--ds-slider-thumb-size:var(--dimension-size-150);--ds-slider-track-size:var(--dimension-size-075)}.slider--xs.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-200);--ds-slider-thumb-size:var(--dimension-size-100);--ds-slider-track-size:var(--dimension-size-050)}.slider--vertical.sc-ds-slider-h{width:fit-content;min-width:var(--dimension-form-width-xs)}.slider__label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-100);min-width:0}.slider__label.sc-ds-slider{min-width:0}.slider__value.sc-ds-slider{flex-shrink:0}.slider__control.sc-ds-slider{position:relative;width:100%;height:var(--ds-slider-control-size);border-radius:var(--dimension-radius-half);cursor:pointer;touch-action:none;user-select:none}.slider--vertical.sc-ds-slider-h .slider__control.sc-ds-slider{align-self:center;width:var(--ds-slider-control-size);height:var(--ds-slider-vertical-length)}.slider--readonly.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:default}.ds-control-inactive.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:not-allowed}.slider__rail.sc-ds-slider{position:absolute;top:50%;right:0;left:0;height:var(--ds-slider-track-size);overflow:hidden;border-radius:var(--dimension-radius-025);background-color:transparent;box-shadow:inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);transform:translateY(-50%);pointer-events:none}.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{right:calc(var(--ds-slider-thumb-size) / 2);left:calc(var(--ds-slider-thumb-size) / 2)}.slider__indicator.sc-ds-slider{position:absolute;top:0;bottom:0;left:0;width:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );border-radius:inherit;background-color:var(--color-background-bold-brand)}.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );width:calc(     ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *       (100% - var(--ds-slider-thumb-size))   )}.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(var(--ds-slider-start-pct, 0) * 1%);width:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider__thumb.sc-ds-slider{position:absolute;top:50%;left:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));width:var(--ds-slider-thumb-size);height:var(--ds-slider-thumb-size);transform:translateY(-50%);z-index:1}.slider__thumb--active.sc-ds-slider{z-index:2}.slider__input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;appearance:none;pointer-events:none;z-index:2}.slider__thumb-visual.sc-ds-slider{position:absolute;inset:0;box-sizing:border-box;overflow:visible;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);pointer-events:none;transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.slider__thumb-wash.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:background-color var(--effect-motion-short-2)}.sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb.sc-ds-slider:hover .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-hover)}[data-dragging].sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb--active.sc-ds-slider .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-pressed)}.slider__input.sc-ds-slider:focus-visible+.slider__thumb-visual.sc-ds-slider,[data-review-focus].sc-ds-slider-h .slider__thumb[data-index='0'].sc-ds-slider .slider__thumb-visual.sc-ds-slider{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.slider--vertical.sc-ds-slider-h .slider__rail.sc-ds-slider{top:0;right:auto;bottom:0;left:50%;width:var(--ds-slider-track-size);height:auto;transform:translateX(-50%)}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{top:calc(var(--ds-slider-thumb-size) / 2);bottom:calc(var(--ds-slider-thumb-size) / 2)}.slider--vertical.sc-ds-slider-h .slider__indicator.sc-ds-slider{top:auto;right:0;bottom:0;left:0;width:auto;height:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   )}.slider--vertical.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );height:calc(     ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *       (100% - var(--ds-slider-thumb-size))   )}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(var(--ds-slider-start-pct, 0) * 1%);height:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider--vertical.sc-ds-slider-h .slider__thumb.sc-ds-slider{top:auto;bottom:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));left:50%;transform:translateX(-50%)}@media (prefers-reduced-motion: reduce){.slider__thumb-visual.sc-ds-slider,.slider__thumb-wash.sc-ds-slider{transition:none}}`;let l=0;let h=0;const o=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.dsCommit=i(this,"dsCommit");this.internals=this.attachInternals();this.value=0;this.min=0;this.max=100;this.step=1;this.minStepsBetweenValues=0;this.showValue=true;this.size="md";this.orientation="horizontal";this.thumbAlignment="edge";this.disabled=false;this.readOnly=false;this.isInactive=false;this.ariaLabel=null;this.startLabel="Minimum value";this.endLabel="Maximum value";this.valueTexts=[];this.valuePrefix="";this.valueSuffix="";this.rangeSeparator="–";this.formDisabled=false;this.dragging=false;this.focused=false;this.touched=false;this.activeThumbIndex=0;this.generatedId=`ds-slider-${++l}`;this.labelId=`${this.generatedId}-label`;this.initialValue=0;this.lastCommittedValue=0;this.pointerId=null;this.pointerStartValue=0;this.controlEl=null;this.handleNativeInput=(s,t)=>{const i=s.target;this.activeThumbIndex=t;if(this.readOnly||this.isDisabled){i.value=String(this.resolvedValues[t]);return}this.setValueAt(t,Number(i.value))};this.handleNativeChange=()=>{if(!this.readOnly&&!this.isDisabled)this.commitIfChanged()};this.handleKeyDown=s=>{if(!this.readOnly)return;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(s.key)){s.preventDefault()}};this.handleFocus=s=>{this.activeThumbIndex=s;this.focused=true};this.handleBlur=s=>{const t=s.relatedTarget;if(t instanceof Node&&this.el.contains(t))return;this.focused=false;this.touched=true};this.handleHostClick=s=>{if(s.target!==this.el||this.isDisabled)return;const t=this.el.querySelectorAll(".slider__input");t[Math.min(this.activeThumbIndex,t.length-1)]?.focus()};this.handlePointerDown=s=>{if(s.button!==0||this.isDisabled||this.readOnly)return;s.preventDefault();const t=this.valueFromPointer(s);const i=this.closestThumbIndex(t,s.target);this.activeThumbIndex=i;this.pointerId=s.pointerId;this.pointerStartValue=this.cloneValue(this.publicValue);this.dragging=true;this.setValueAt(i,t);this.controlEl?.setPointerCapture(s.pointerId);requestAnimationFrame((()=>this.el.querySelectorAll(".slider__input")[i]?.focus({preventScroll:true})))};this.handlePointerMove=s=>{if(this.pointerId!==s.pointerId||!this.dragging)return;s.preventDefault();this.setValueAt(this.activeThumbIndex,this.valueFromPointer(s))}}componentWillLoad(){this.initialValue=this.cloneValue(this.publicValue);this.lastCommittedValue=this.cloneValue(this.publicValue);this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.resolvedValues;if(this.isDisabled||!this.name){this.internals.setFormValue(null);return}if(this.isRange){const t=new FormData;s.forEach((s=>t.append(this.name,String(s))));this.internals.setFormValue(t,JSON.stringify(s))}else{this.internals.setFormValue(String(s[0]),String(s[0]))}}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.cloneValue(this.initialValue);this.lastCommittedValue=this.cloneValue(this.initialValue);this.dragging=false;this.focused=false;this.touched=false}formStateRestoreCallback(s){if(typeof s!=="string")return;if(this.isRange){try{const t=JSON.parse(s);if(Array.isArray(t))this.value=t.map(Number).slice(0,2)}catch{this.value=this.cloneValue(this.initialValue)}}else{const t=Number(s);if(Number.isFinite(t))this.value=t}this.lastCommittedValue=this.cloneValue(this.publicValue)}async setFocus(s=0){const t=this.el.querySelectorAll(".slider__input");t[Math.max(0,Math.min(s,t.length-1))]?.focus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get isRange(){return Array.isArray(this.value)}get safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get safeMin(){return Number.isFinite(this.min)?this.min:0}get safeMax(){const s=this.safeMin;return Number.isFinite(this.max)&&this.max>s?this.max:s+this.safeStep}get minimumGap(){const s=Number.isFinite(this.minStepsBetweenValues)?Math.max(0,Math.floor(this.minStepsBetweenValues)):0;return s*this.safeStep}get resolvedValues(){const s=this.safeMin;const t=this.safeMax;if(!this.isRange)return[this.snap(Number(this.value))];const i=this.value;let e=this.snap(Number(i[0]??s));let r=this.snap(Number(i[1]??t));if(e>r)[e,r]=[r,e];const d=Math.min(this.minimumGap,t-s);if(r-e<d){r=Math.min(t,this.snap(e+d));e=Math.max(s,this.snap(r-d))}return[e,r]}get publicValue(){const s=this.resolvedValues;return this.isRange?[...s]:s[0]}cloneValue(s){return Array.isArray(s)?[...s]:s}valuesEqual(s,t){if(Array.isArray(s)&&Array.isArray(t)){return s.length===t.length&&s.every(((s,i)=>s===t[i]))}return!Array.isArray(s)&&!Array.isArray(t)&&s===t}decimalPlaces(s){const t=String(s).toLowerCase();if(t.includes("e-"))return Number(t.split("e-")[1])||0;return t.includes(".")?t.split(".")[1].length:0}snap(s){const t=this.safeMin;const i=this.safeMax;const e=Number.isFinite(s)?s:t;const r=t+Math.round((e-t)/this.safeStep)*this.safeStep;const d=Math.min(10,Math.max(this.decimalPlaces(t),this.decimalPlaces(i),this.decimalPlaces(this.safeStep)));return Number(Math.min(i,Math.max(t,r)).toFixed(d))}percent(s){return(s-this.safeMin)/(this.safeMax-this.safeMin)*100}allowedMin(s,t=this.resolvedValues){return this.isRange&&s===1?Math.min(this.safeMax,t[0]+this.minimumGap):this.safeMin}allowedMax(s,t=this.resolvedValues){return this.isRange&&s===0?Math.max(this.safeMin,t[1]-this.minimumGap):this.safeMax}setValueAt(s,t){const i=this.publicValue;const e=this.resolvedValues;const r=Math.min(this.allowedMax(s,e),Math.max(this.allowedMin(s,e),this.snap(t)));e[s]=r;const d=this.isRange?[...e]:e[0];if(this.valuesEqual(i,d))return false;this.value=d;this.dsChange.emit(this.cloneValue(d));return true}commitIfChanged(){const s=this.publicValue;if(this.valuesEqual(s,this.lastCommittedValue))return;this.lastCommittedValue=this.cloneValue(s);this.dsCommit.emit(this.cloneValue(s))}syncNativeLabels(){if(this.label||this.ariaLabel||this.ariaLabelledby||this.isRange)return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-slider-label-${++h}`;return s.id}));if(s.length)this.externalLabelledby=s.join(" ")}formattedValue(s,t){const i=this.valueTexts[t]??this.valueText;if(i)return i;let e;try{e=new Intl.NumberFormat(this.locale,this.formatOptions).format(s)}catch{e=String(s)}return`${this.valuePrefix}${e}${this.valueSuffix}`}ariaValueText(s,t){if(this.valueTexts[t]||this.valueText||this.valuePrefix||this.valueSuffix||this.formatOptions){return this.formattedValue(s,t)}return undefined}pointerPercent(s){const t=this.controlEl;if(!t)return 0;const i=t.getBoundingClientRect();const e=this.el.querySelector(".slider__thumb");const r=e?this.orientation==="horizontal"?e.offsetWidth:e.offsetHeight:0;const d=r/2;if(this.orientation==="vertical"){const t=Math.max(1,i.height-d*2);return Math.min(1,Math.max(0,(i.bottom-d-s.clientY)/t))}const a=Math.max(1,i.width-d*2);const n=(s.clientX-i.left-d)/a;return Math.min(1,Math.max(0,n))}valueFromPointer(s){return this.snap(this.safeMin+this.pointerPercent(s)*(this.safeMax-this.safeMin))}closestThumbIndex(s,i){const e=i instanceof t?i.closest(".slider__thumb"):null;if(e?.dataset["index"])return Number(e.dataset["index"]);if(!this.isRange)return 0;const r=this.resolvedValues;const d=Math.abs(s-r[0]);const a=Math.abs(s-r[1]);if(d===a)return s>=r[0]?1:0;return d<a?0:1}endPointerInteraction(s,t){if(this.pointerId!==s.pointerId)return;if(this.controlEl?.hasPointerCapture(s.pointerId))this.controlEl.releasePointerCapture(s.pointerId);this.pointerId=null;this.dragging=false;this.touched=true;if(!t&&!this.valuesEqual(this.pointerStartValue,this.publicValue))this.commitIfChanged()}renderThumb(s,t){const i=t===0?this.inputId??`${this.generatedId}-input`:`${this.inputId??`${this.generatedId}-input`}-end`;const r=t===0?this.startLabel:this.endLabel;const d=this.isRange?undefined:this.ariaLabelledby??(this.label?this.labelId:this.externalLabelledby);const a=this.isRange?r:d?undefined:this.ariaLabel;return e("div",{class:{slider__thumb:true,"slider__thumb--active":t===this.activeThumbIndex},"data-index":String(t),style:{"--ds-slider-thumb-pct":String(this.percent(s))}},e("input",{class:"slider__input",type:"range",id:i,min:this.allowedMin(t),max:this.allowedMax(t),step:this.safeStep,value:s,disabled:this.isDisabled,"aria-label":a,"aria-labelledby":d,"aria-describedby":this.ariaDescribedby,"aria-valuetext":this.ariaValueText(s,t),"aria-orientation":this.orientation==="vertical"?"vertical":undefined,"aria-readonly":this.readOnly?"true":undefined,onInput:s=>this.handleNativeInput(s,t),onChange:this.handleNativeChange,onKeyDown:this.handleKeyDown,onFocus:()=>this.handleFocus(t),onBlur:this.handleBlur}),e("span",{class:"slider__thumb-visual","aria-hidden":"true"},e("span",{class:"slider__thumb-wash"})))}render(){const s=this.resolvedValues;const t=s[0];const i=s[s.length-1];const d=this.inputId??`${this.generatedId}-input`;const a=!this.valuesEqual(this.publicValue,this.initialValue);const n=s.map(((s,t)=>this.formattedValue(s,t))).join(` ${this.rangeSeparator} `);return e(r,{key:"5c7dd5cd2114bd2b0055f4b9eb5821c016934147","aria-disabled":this.isDisabled?"true":undefined,class:{slider:true,[`slider--${this.size}`]:true,[`slider--${this.orientation}`]:true,[`slider--thumb-${this.thumbAlignment}`]:true,"slider--range":this.isRange,"slider--readonly":this.readOnly,"ds-control-inactive":this.isDisabled},"data-orientation":this.orientation,"data-disabled":this.isDisabled?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-dragging":this.dragging?"":undefined,"data-focused":this.focused?"":undefined,"data-filled":"","data-dirty":a?"":undefined,"data-touched":this.touched?"":undefined,"data-valid":!this.isDisabled?"":undefined,onClick:this.handleHostClick},(this.label||this.showValue)&&e("div",{key:"b31be7032358a43f7931006ec0c1a246c930a50f",class:"slider__label-row"},this.label&&e("ds-text",{key:"8d093653adcd4d168080b59cafd58fdd161df7f1",class:"slider__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:d,textId:this.labelId},this.label),this.showValue&&e("ds-text",{key:"7d7c7c34cfcfbbe737debb73e8282b4fd8adcac7",class:"slider__value",as:"span",variant:"text-body-small",color:"primary",fontFeature:"tabular-nums"},n)),e("div",{key:"461886962bef2e215bd64369731473ba354cede1",class:"slider__control",ref:s=>{this.controlEl=s??null},style:{"--ds-slider-start-pct":String(this.isRange?this.percent(t):0),"--ds-slider-end-pct":String(this.percent(i))},onPointerDown:this.handlePointerDown,onPointerMove:this.handlePointerMove,onPointerUp:s=>this.endPointerInteraction(s,false),onPointerCancel:s=>this.endPointerInteraction(s,true)},e("div",{key:"26bd2bb998a717613d3609579ce0554dd793936a",class:"slider__rail","aria-hidden":"true"},e("div",{key:"01875598c3b6b03853fe197e905820b0aadc6c6e",class:"slider__indicator"})),s.map(((s,t)=>this.renderThumb(s,t)))))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}}static get style(){return n()}},[66,"ds-slider",{value:[1026],min:[2],max:[2],step:[2],minStepsBetweenValues:[2,"min-steps-between-values"],label:[1],showValue:[4,"show-value"],size:[1],orientation:[1],thumbAlignment:[1,"thumb-alignment"],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],startLabel:[1,"start-label"],endLabel:[1,"end-label"],valueText:[1,"value-text"],valueTexts:[16],locale:[1],formatOptions:[16],valuePrefix:[1,"value-prefix"],valueSuffix:[1,"value-suffix"],rangeSeparator:[1,"range-separator"],inputId:[1,"input-id"],formDisabled:[32],dragging:[32],focused:[32],touched:[32],activeThumbIndex:[32],externalLabelledby:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}]);function c(){if(typeof customElements==="undefined"){return}const s=["ds-slider","ds-text"];s.forEach((s=>{switch(s){case"ds-slider":if(!customElements.get(d(s))){customElements.define(d(s),o)}break;case"ds-text":if(!customElements.get(d(s))){a()}break}}))}c();const u=o;const m=c;export{u as DsSlider,m as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

package/dist/components/ds-slider.js.map

@@ -1 +1 @@
-{"version":3,"names":["sliderCss","sliderId","sliderExternalLabelId","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","step","minStepsBetweenValues","showValue","size","orientation","thumbAlignment","disabled","readOnly","isInactive","ariaLabel","startLabel","endLabel","valueTexts","valuePrefix","valueSuffix","rangeSeparator","formDisabled","dragging","focused","touched","activeThumbIndex","generatedId","labelId","initialValue","lastCommittedValue","pointerId","pointerStartValue","controlEl","handleNativeInput","event","index","input","target","isDisabled","String","resolvedValues","setValueAt","Number","handleNativeChange","commitIfChanged","handleKeyDown","includes","key","preventDefault","handleFocus","handleBlur","next","relatedTarget","Node","el","contains","handleHostClick","inputs","querySelectorAll","Math","length","focus","handlePointerDown","button","valueFromPointer","closestThumbIndex","cloneValue","publicValue","setPointerCapture","requestAnimationFrame","preventScroll","handlePointerMove","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","values","name","internals","setFormValue","isRange","data","FormData","forEach","append","JSON","stringify","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restored","parse","Array","isArray","map","slice","isFinite","setFocus","safeStep","safeMin","safeMax","minimum","minimumGap","steps","floor","maximum","snap","raw","lower","upper","gap","valuesEqual","a","b","every","decimalPlaces","text","toLowerCase","split","candidate","stepped","round","precision","toFixed","percent","allowedMin","allowedMax","previous","constrained","nextValue","dsChange","emit","current","dsCommit","label","ariaLabelledby","ids","from","labels","id","externalLabelledby","join","formattedValue","authored","valueText","number","Intl","NumberFormat","locale","formatOptions","format","ariaValueText","undefined","pointerPercent","control","rect","getBoundingClientRect","thumb","querySelector","thumbSize","offsetWidth","offsetHeight","inset","travel","height","bottom","clientY","width","clientX","left","targetElement","closest","dataset","lowerDistance","abs","upperDistance","endPointerInteraction","canceled","hasPointerCapture","releasePointerCapture","renderThumb","inputId","rangeLabel","labelledby","directLabel","h","class","slider__thumb","style","type","ariaDescribedby","onInput","onChange","onKeyDown","onFocus","onBlur","render","first","last","firstInputId","dirty","valueDisplay","Host","slider","onClick","as","variant","color","emphasis","for","textId","fontFeature","ref","element","onPointerDown","onPointerMove","onPointerUp","onPointerCancel"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n  background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Slider {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n  @Prop({ mutable: true }) value: SliderValue = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Minimum number of steps kept between two range thumbs. */\n  @Prop() minStepsBetweenValues: number = 0;\n  /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n  @Prop() label: string | undefined;\n  /** Show the formatted current value beside the visible label. */\n  @Prop() showValue: boolean = true;\n  @Prop() size: SliderSize = 'md';\n  @Prop() orientation: SliderOrientation = 'horizontal';\n  /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n  @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keep the value focusable and submittable while preventing changes. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop() isInactive: boolean = false;\n  /** Direct accessible name for a single-thumb slider without a visible label. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id references for a visible single-thumb slider label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id references for supporting guidance or error text. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Accessible label for the lower thumb in a range slider. */\n  @Prop() startLabel: string = 'Minimum value';\n  /** Accessible label for the upper thumb in a range slider. */\n  @Prop() endLabel: string = 'Maximum value';\n  /** Human-readable value text for a single slider or both range thumbs. */\n  @Prop() valueText: string | undefined;\n  /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n  @Prop() valueTexts: string[] = [];\n  /** Locale used by Intl.NumberFormat for the visible value. */\n  @Prop() locale: string | undefined;\n  /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n  @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n  @Prop() valuePrefix: string = '';\n  @Prop() valueSuffix: string = '';\n  @Prop() rangeSeparator: string = '–';\n  /** Id applied to the first native range input. */\n  @Prop() inputId: string | undefined;\n\n  /** Emitted continuously while the value changes. */\n  @Event() dsChange!: EventEmitter<SliderValue>;\n  /** Emitted when a pointer or keyboard value change is committed. */\n  @Event() dsCommit!: EventEmitter<SliderValue>;\n\n  @State() private formDisabled = false;\n  @State() private dragging = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private activeThumbIndex = 0;\n  @State() private externalLabelledby: string | undefined;\n\n  private readonly generatedId = `ds-slider-${++sliderId}`;\n  private readonly labelId = `${this.generatedId}-label`;\n  private initialValue: SliderValue = 0;\n  private lastCommittedValue: SliderValue = 0;\n  private pointerId: number | null = null;\n  private pointerStartValue: SliderValue = 0;\n  private controlEl: HTMLDivElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.cloneValue(this.publicValue);\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isDisabled || !this.name) {\n      this.internals.setFormValue(null);\n      return;\n    }\n\n    if (this.isRange) {\n      const data = new FormData();\n      values.forEach(value => data.append(this.name as string, String(value)));\n      this.internals.setFormValue(data, JSON.stringify(values));\n    } else {\n      this.internals.setFormValue(String(values[0]), String(values[0]));\n    }\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.cloneValue(this.initialValue);\n    this.lastCommittedValue = this.cloneValue(this.initialValue);\n    this.dragging = false;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state !== 'string') return;\n    if (this.isRange) {\n      try {\n        const restored = JSON.parse(state);\n        if (Array.isArray(restored)) this.value = restored.map(Number).slice(0, 2);\n      } catch {\n        this.value = this.cloneValue(this.initialValue);\n      }\n    } else {\n      const restored = Number(state);\n      if (Number.isFinite(restored)) this.value = restored;\n    }\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n  }\n\n  @Method()\n  async setFocus(index: number = 0) {\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get isRange(): boolean {\n    return Array.isArray(this.value);\n  }\n\n  private get safeStep(): number {\n    return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n  }\n\n  private get safeMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  private get safeMax(): number {\n    const minimum = this.safeMin;\n    return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n  }\n\n  private get minimumGap(): number {\n    const steps = Number.isFinite(this.minStepsBetweenValues)\n      ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n      : 0;\n    return steps * this.safeStep;\n  }\n\n  private get resolvedValues(): number[] {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    if (!this.isRange) return [this.snap(Number(this.value))];\n\n    const raw = this.value as number[];\n    let lower = this.snap(Number(raw[0] ?? minimum));\n    let upper = this.snap(Number(raw[1] ?? maximum));\n    if (lower > upper) [lower, upper] = [upper, lower];\n\n    const gap = Math.min(this.minimumGap, maximum - minimum);\n    if (upper - lower < gap) {\n      upper = Math.min(maximum, this.snap(lower + gap));\n      lower = Math.max(minimum, this.snap(upper - gap));\n    }\n    return [lower, upper];\n  }\n\n  private get publicValue(): SliderValue {\n    const values = this.resolvedValues;\n    return this.isRange ? [...values] : values[0];\n  }\n\n  private cloneValue(value: SliderValue): SliderValue {\n    return Array.isArray(value) ? [...value] : value;\n  }\n\n  private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n    if (Array.isArray(a) && Array.isArray(b)) {\n      return a.length === b.length && a.every((value, index) => value === b[index]);\n    }\n    return !Array.isArray(a) && !Array.isArray(b) && a === b;\n  }\n\n  private decimalPlaces(value: number): number {\n    const text = String(value).toLowerCase();\n    if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n    return text.includes('.') ? text.split('.')[1].length : 0;\n  }\n\n  private snap(value: number): number {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    const candidate = Number.isFinite(value) ? value : minimum;\n    const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n    const precision = Math.min(10, Math.max(\n      this.decimalPlaces(minimum),\n      this.decimalPlaces(maximum),\n      this.decimalPlaces(this.safeStep),\n    ));\n    return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n  }\n\n  private percent(value: number): number {\n    return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n  }\n\n  private allowedMin(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 1\n      ? Math.min(this.safeMax, values[0] + this.minimumGap)\n      : this.safeMin;\n  }\n\n  private allowedMax(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 0\n      ? Math.max(this.safeMin, values[1] - this.minimumGap)\n      : this.safeMax;\n  }\n\n  private setValueAt(index: number, next: number): boolean {\n    const previous = this.publicValue;\n    const values = this.resolvedValues;\n    const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n    values[index] = constrained;\n    const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n    if (this.valuesEqual(previous, nextValue)) return false;\n\n    this.value = nextValue;\n    this.dsChange.emit(this.cloneValue(nextValue));\n    return true;\n  }\n\n  private commitIfChanged() {\n    const current = this.publicValue;\n    if (this.valuesEqual(current, this.lastCommittedValue)) return;\n    this.lastCommittedValue = this.cloneValue(current);\n    this.dsCommit.emit(this.cloneValue(current));\n  }\n\n  private syncNativeLabels() {\n    if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n    const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n      return label.id;\n    });\n    if (ids.length) this.externalLabelledby = ids.join(' ');\n  }\n\n  private formattedValue(value: number, index: number): string {\n    const authored = this.valueTexts[index] ?? this.valueText;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n    } catch {\n      number = String(value);\n    }\n    return `${this.valuePrefix}${number}${this.valueSuffix}`;\n  }\n\n  private ariaValueText(value: number, index: number): string | undefined {\n    if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n      return this.formattedValue(value, index);\n    }\n    return undefined;\n  }\n\n  private handleNativeInput = (event: Event, index: number) => {\n    const input = event.target as HTMLInputElement;\n    this.activeThumbIndex = index;\n    if (this.readOnly || this.isDisabled) {\n      input.value = String(this.resolvedValues[index]);\n      return;\n    }\n    this.setValueAt(index, Number(input.value));\n  };\n\n  private handleNativeChange = () => {\n    if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.readOnly) return;\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private handleFocus = (index: number) => {\n    this.activeThumbIndex = index;\n    this.focused = true;\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleHostClick = (event: MouseEvent) => {\n    if (event.target !== this.el || this.isDisabled) return;\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n  };\n\n  private pointerPercent(event: PointerEvent): number {\n    const control = this.controlEl;\n    if (!control) return 0;\n    const rect = control.getBoundingClientRect();\n    const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n    const thumbSize = thumb\n      ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n      : 0;\n    // Both alignment modes keep the complete thumb inside the control. Edge\n    // alignment lets the rail span the control while center alignment insets\n    // the rail to the same thumb-center travel.\n    const inset = thumbSize / 2;\n\n    if (this.orientation === 'vertical') {\n      const travel = Math.max(1, rect.height - inset * 2);\n      return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n    }\n\n    const travel = Math.max(1, rect.width - inset * 2);\n    const percent = (event.clientX - rect.left - inset) / travel;\n    return Math.min(1, Math.max(0, percent));\n  }\n\n  private valueFromPointer(event: PointerEvent): number {\n    return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n  }\n\n  private closestThumbIndex(value: number, target: EventTarget | null): number {\n    const targetElement = target instanceof HTMLElement\n      ? target.closest<HTMLElement>('.slider__thumb')\n      : null;\n    if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n    if (!this.isRange) return 0;\n\n    const values = this.resolvedValues;\n    const lowerDistance = Math.abs(value - values[0]);\n    const upperDistance = Math.abs(value - values[1]);\n    if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n    return lowerDistance < upperDistance ? 0 : 1;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n    event.preventDefault();\n    const value = this.valueFromPointer(event);\n    const index = this.closestThumbIndex(value, event.target);\n    this.activeThumbIndex = index;\n    this.pointerId = event.pointerId;\n    this.pointerStartValue = this.cloneValue(this.publicValue);\n    this.dragging = true;\n    this.setValueAt(index, value);\n    this.controlEl?.setPointerCapture(event.pointerId);\n    requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (this.pointerId !== event.pointerId || !this.dragging) return;\n    event.preventDefault();\n    this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n  };\n\n  private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n    if (this.pointerId !== event.pointerId) return;\n    if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n    this.pointerId = null;\n    this.dragging = false;\n    this.touched = true;\n    if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId = index === 0\n      ? this.inputId ?? `${this.generatedId}-input`\n      : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n    const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n    const labelledby = this.isRange\n      ? undefined\n      : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n    const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n    return (\n      <div\n        class={{\n          slider__thumb: true,\n          'slider__thumb--active': index === this.activeThumbIndex,\n        }}\n        data-index={String(index)}\n        style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n      >\n        <input\n          class=\"slider__input\"\n          type=\"range\"\n          id={inputId}\n          min={this.allowedMin(index)}\n          max={this.allowedMax(index)}\n          step={this.safeStep}\n          value={value}\n          disabled={this.isDisabled}\n          aria-label={directLabel}\n          aria-labelledby={labelledby}\n          aria-describedby={this.ariaDescribedby}\n          aria-valuetext={this.ariaValueText(value, index)}\n          aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          onInput={(event: Event) => this.handleNativeInput(event, index)}\n          onChange={this.handleNativeChange}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n      </div>\n    );\n  }\n\n  render() {\n    const values = this.resolvedValues;\n    const first = values[0];\n    const last = values[values.length - 1];\n    const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n    const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n    const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n    return (\n      <Host\n        aria-disabled={this.isDisabled ? 'true' : undefined}\n        class={{\n          slider: true,\n          [`slider--${this.size}`]: true,\n          [`slider--${this.orientation}`]: true,\n          [`slider--thumb-${this.thumbAlignment}`]: true,\n          'slider--range': this.isRange,\n          'slider--readonly': this.readOnly,\n          'ds-control-inactive': this.isDisabled,\n        }}\n        data-orientation={this.orientation}\n        data-disabled={this.isDisabled ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-dragging={this.dragging ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-filled=\"\"\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-valid={!this.isDisabled ? '' : undefined}\n        onClick={this.handleHostClick}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"slider__label-row\">\n            {this.label && (\n              <ds-text\n                class=\"slider__label\"\n                as=\"label\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                emphasis\n                for={firstInputId}\n                textId={this.labelId}\n              >\n                {this.label}\n              </ds-text>\n            )}\n            {this.showValue && (\n              <ds-text\n                class=\"slider__value\"\n                as=\"span\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                fontFeature=\"tabular-nums\"\n              >\n                {valueDisplay}\n              </ds-text>\n            )}\n          </div>\n        )}\n        <div\n          class=\"slider__control\"\n          ref={element => { this.controlEl = element ?? null; }}\n          style={{\n            '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n            '--ds-slider-end-pct': String(this.percent(last)),\n          } as Record<string, string>}\n          onPointerDown={this.handlePointerDown}\n          onPointerMove={this.handlePointerMove}\n          onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n          onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n        >\n          <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iGAAA,MAAMA,EAAY,IAAM,ggMCmBxB,IAAIC,EAAW,EACf,IAAIC,EAAwB,E,MAQfC,EAAMC,EAAA,MAAAD,UAAAE,EANnB,WAAAC,CAAAC,G,oJAW2BC,KAAAC,MAAqB,EACtCD,KAAAE,IAAc,EACdF,KAAAG,IAAc,IACdH,KAAAI,KAAe,EAEfJ,KAAAK,sBAAgC,EAIhCL,KAAAM,UAAqB,KACrBN,KAAAO,KAAmB,KACnBP,KAAAQ,YAAiC,aAEjCR,KAAAS,eAAuC,OAGtBT,KAAAU,SAAoB,MAEpBV,KAAAW,SAAoB,MACrCX,KAAAY,WAAsB,MAEKZ,KAAAa,UAA2B,KAMtDb,KAAAc,WAAqB,gBAErBd,KAAAe,SAAmB,gBAInBf,KAAAgB,WAAuB,GAKvBhB,KAAAiB,YAAsB,GACtBjB,KAAAkB,YAAsB,GACtBlB,KAAAmB,eAAyB,IAShBnB,KAAAoB,aAAe,MACfpB,KAAAqB,SAAW,MACXrB,KAAAsB,QAAU,MACVtB,KAAAuB,QAAU,MACVvB,KAAAwB,iBAAmB,EAGnBxB,KAAAyB,YAAc,eAAehC,IAC7BO,KAAA0B,QAAU,GAAG1B,KAAKyB,oBAC3BzB,KAAA2B,aAA4B,EAC5B3B,KAAA4B,mBAAkC,EAClC5B,KAAA6B,UAA2B,KAC3B7B,KAAA8B,kBAAiC,EACjC9B,KAAA+B,UAAmC,KAwNnC/B,KAAAgC,kBAAoB,CAACC,EAAcC,KACzC,MAAMC,EAAQF,EAAMG,OACpBpC,KAAKwB,iBAAmBU,EACxB,GAAIlC,KAAKW,UAAYX,KAAKqC,WAAY,CACpCF,EAAMlC,MAAQqC,OAAOtC,KAAKuC,eAAeL,IACzC,M,CAEFlC,KAAKwC,WAAWN,EAAOO,OAAON,EAAMlC,OAAO,EAGrCD,KAAA0C,mBAAqB,KAC3B,IAAK1C,KAAKW,WAAaX,KAAKqC,WAAYrC,KAAK2C,iBAAiB,EAGxD3C,KAAA4C,cAAiBX,IACvB,IAAKjC,KAAKW,SAAU,OACpB,GAAI,CAAC,YAAa,aAAc,UAAW,YAAa,OAAQ,MAAO,SAAU,YAAYkC,SAASZ,EAAMa,KAAM,CAChHb,EAAMc,gB,GAIF/C,KAAAgD,YAAed,IACrBlC,KAAKwB,iBAAmBU,EACxBlC,KAAKsB,QAAU,IAAI,EAGbtB,KAAAiD,WAAchB,IACpB,MAAMiB,EAAOjB,EAAMkB,cACnB,GAAID,aAAgBE,MAAQpD,KAAKqD,GAAGC,SAASJ,GAAO,OACpDlD,KAAKsB,QAAU,MACftB,KAAKuB,QAAU,IAAI,EAGbvB,KAAAuD,gBAAmBtB,IACzB,GAAIA,EAAMG,SAAWpC,KAAKqD,IAAMrD,KAAKqC,WAAY,OACjD,MAAMmB,EAASxD,KAAKqD,GAAGI,iBAAmC,kBAC1DD,EAAOE,KAAKxD,IAAIF,KAAKwB,iBAAkBgC,EAAOG,OAAS,KAAKC,OAAO,EA4C7D5D,KAAA6D,kBAAqB5B,IAC3B,GAAIA,EAAM6B,SAAW,GAAK9D,KAAKqC,YAAcrC,KAAKW,SAAU,OAC5DsB,EAAMc,iBACN,MAAM9C,EAAQD,KAAK+D,iBAAiB9B,GACpC,MAAMC,EAAQlC,KAAKgE,kBAAkB/D,EAAOgC,EAAMG,QAClDpC,KAAKwB,iBAAmBU,EACxBlC,KAAK6B,UAAYI,EAAMJ,UACvB7B,KAAK8B,kBAAoB9B,KAAKiE,WAAWjE,KAAKkE,aAC9ClE,KAAKqB,SAAW,KAChBrB,KAAKwC,WAAWN,EAAOjC,GACvBD,KAAK+B,WAAWoC,kBAAkBlC,EAAMJ,WACxCuC,uBAAsB,IAAMpE,KAAKqD,GAAGI,iBAAmC,kBAAkBvB,IAAQ0B,MAAM,CAAES,cAAe,QAAQ,EAG1HrE,KAAAsE,kBAAqBrC,IAC3B,GAAIjC,KAAK6B,YAAcI,EAAMJ,YAAc7B,KAAKqB,SAAU,OAC1DY,EAAMc,iBACN/C,KAAKwC,WAAWxC,KAAKwB,iBAAkBxB,KAAK+D,iBAAiB9B,GAAO,CAsIvE,CA7bC,iBAAAsC,GACEvE,KAAK2B,aAAe3B,KAAKiE,WAAWjE,KAAKkE,aACzClE,KAAK4B,mBAAqB5B,KAAKiE,WAAWjE,KAAKkE,aAC/ClE,KAAKwE,e,CAGP,gBAAAC,GACEzE,KAAK0E,kB,CAWP,aAAAF,GACE,MAAMG,EAAS3E,KAAKuC,eACpB,GAAIvC,KAAKqC,aAAerC,KAAK4E,KAAM,CACjC5E,KAAK6E,UAAUC,aAAa,MAC5B,M,CAGF,GAAI9E,KAAK+E,QAAS,CAChB,MAAMC,EAAO,IAAIC,SACjBN,EAAOO,SAAQjF,GAAS+E,EAAKG,OAAOnF,KAAK4E,KAAgBtC,OAAOrC,MAChED,KAAK6E,UAAUC,aAAaE,EAAMI,KAAKC,UAAUV,G,KAC5C,CACL3E,KAAK6E,UAAUC,aAAaxC,OAAOqC,EAAO,IAAKrC,OAAOqC,EAAO,I,EAIjE,oBAAAW,CAAqB5E,GACnBV,KAAKoB,aAAeV,EACpBV,KAAKwE,e,CAGP,iBAAAe,GACEvF,KAAKC,MAAQD,KAAKiE,WAAWjE,KAAK2B,cAClC3B,KAAK4B,mBAAqB5B,KAAKiE,WAAWjE,KAAK2B,cAC/C3B,KAAKqB,SAAW,MAChBrB,KAAKsB,QAAU,MACftB,KAAKuB,QAAU,K,CAGjB,wBAAAiE,CAAyBC,GACvB,UAAWA,IAAU,SAAU,OAC/B,GAAIzF,KAAK+E,QAAS,CAChB,IACE,MAAMW,EAAWN,KAAKO,MAAMF,GAC5B,GAAIG,MAAMC,QAAQH,GAAW1F,KAAKC,MAAQyF,EAASI,IAAIrD,QAAQsD,MAAM,EAAG,E,CACxE,MACA/F,KAAKC,MAAQD,KAAKiE,WAAWjE,KAAK2B,a,MAE/B,CACL,MAAM+D,EAAWjD,OAAOgD,GACxB,GAAIhD,OAAOuD,SAASN,GAAW1F,KAAKC,MAAQyF,C,CAE9C1F,KAAK4B,mBAAqB5B,KAAKiE,WAAWjE,KAAKkE,Y,CAIjD,cAAM+B,CAAS/D,EAAgB,GAC7B,MAAMsB,EAASxD,KAAKqD,GAAGI,iBAAmC,kBAC1DD,EAAOE,KAAKvD,IAAI,EAAGuD,KAAKxD,IAAIgC,EAAOsB,EAAOG,OAAS,MAAMC,O,CAG3D,cAAYvB,GACV,OAAOrC,KAAKU,UAAYV,KAAKY,YAAcZ,KAAKoB,Y,CAGlD,WAAY2D,GACV,OAAOa,MAAMC,QAAQ7F,KAAKC,M,CAG5B,YAAYiG,GACV,OAAOzD,OAAOuD,SAAShG,KAAKI,OAASJ,KAAKI,KAAO,EAAIJ,KAAKI,KAAO,C,CAGnE,WAAY+F,GACV,OAAO1D,OAAOuD,SAAShG,KAAKE,KAAOF,KAAKE,IAAM,C,CAGhD,WAAYkG,GACV,MAAMC,EAAUrG,KAAKmG,QACrB,OAAO1D,OAAOuD,SAAShG,KAAKG,MAAQH,KAAKG,IAAMkG,EAAUrG,KAAKG,IAAMkG,EAAUrG,KAAKkG,Q,CAGrF,cAAYI,GACV,MAAMC,EAAQ9D,OAAOuD,SAAShG,KAAKK,uBAC/BqD,KAAKvD,IAAI,EAAGuD,KAAK8C,MAAMxG,KAAKK,wBAC5B,EACJ,OAAOkG,EAAQvG,KAAKkG,Q,CAGtB,kBAAY3D,GACV,MAAM8D,EAAUrG,KAAKmG,QACrB,MAAMM,EAAUzG,KAAKoG,QACrB,IAAKpG,KAAK+E,QAAS,MAAO,CAAC/E,KAAK0G,KAAKjE,OAAOzC,KAAKC,SAEjD,MAAM0G,EAAM3G,KAAKC,MACjB,IAAI2G,EAAQ5G,KAAK0G,KAAKjE,OAAOkE,EAAI,IAAMN,IACvC,IAAIQ,EAAQ7G,KAAK0G,KAAKjE,OAAOkE,EAAI,IAAMF,IACvC,GAAIG,EAAQC,GAAQD,EAAOC,GAAS,CAACA,EAAOD,GAE5C,MAAME,EAAMpD,KAAKxD,IAAIF,KAAKsG,WAAYG,EAAUJ,GAChD,GAAIQ,EAAQD,EAAQE,EAAK,CACvBD,EAAQnD,KAAKxD,IAAIuG,EAASzG,KAAK0G,KAAKE,EAAQE,IAC5CF,EAAQlD,KAAKvD,IAAIkG,EAASrG,KAAK0G,KAAKG,EAAQC,G,CAE9C,MAAO,CAACF,EAAOC,E,CAGjB,eAAY3C,GACV,MAAMS,EAAS3E,KAAKuC,eACpB,OAAOvC,KAAK+E,QAAU,IAAIJ,GAAUA,EAAO,E,CAGrC,UAAAV,CAAWhE,GACjB,OAAO2F,MAAMC,QAAQ5F,GAAS,IAAIA,GAASA,C,CAGrC,WAAA8G,CAAYC,EAAgBC,GAClC,GAAIrB,MAAMC,QAAQmB,IAAMpB,MAAMC,QAAQoB,GAAI,CACxC,OAAOD,EAAErD,SAAWsD,EAAEtD,QAAUqD,EAAEE,OAAM,CAACjH,EAAOiC,IAAUjC,IAAUgH,EAAE/E,I,CAExE,OAAQ0D,MAAMC,QAAQmB,KAAOpB,MAAMC,QAAQoB,IAAMD,IAAMC,C,CAGjD,aAAAE,CAAclH,GACpB,MAAMmH,EAAO9E,OAAOrC,GAAOoH,cAC3B,GAAID,EAAKvE,SAAS,MAAO,OAAOJ,OAAO2E,EAAKE,MAAM,MAAM,KAAO,EAC/D,OAAOF,EAAKvE,SAAS,KAAOuE,EAAKE,MAAM,KAAK,GAAG3D,OAAS,C,CAGlD,IAAA+C,CAAKzG,GACX,MAAMoG,EAAUrG,KAAKmG,QACrB,MAAMM,EAAUzG,KAAKoG,QACrB,MAAMmB,EAAY9E,OAAOuD,SAAS/F,GAASA,EAAQoG,EACnD,MAAMmB,EAAUnB,EAAU3C,KAAK+D,OAAOF,EAAYlB,GAAWrG,KAAKkG,UAAYlG,KAAKkG,SACnF,MAAMwB,EAAYhE,KAAKxD,IAAI,GAAIwD,KAAKvD,IAClCH,KAAKmH,cAAcd,GACnBrG,KAAKmH,cAAcV,GACnBzG,KAAKmH,cAAcnH,KAAKkG,YAE1B,OAAOzD,OAAOiB,KAAKxD,IAAIuG,EAAS/C,KAAKvD,IAAIkG,EAASmB,IAAUG,QAAQD,G,CAG9D,OAAAE,CAAQ3H,GACd,OAASA,EAAQD,KAAKmG,UAAYnG,KAAKoG,QAAUpG,KAAKmG,SAAY,G,CAG5D,UAAA0B,CAAW3F,EAAeyC,EAAS3E,KAAKuC,gBAC9C,OAAOvC,KAAK+E,SAAW7C,IAAU,EAC7BwB,KAAKxD,IAAIF,KAAKoG,QAASzB,EAAO,GAAK3E,KAAKsG,YACxCtG,KAAKmG,O,CAGH,UAAA2B,CAAW5F,EAAeyC,EAAS3E,KAAKuC,gBAC9C,OAAOvC,KAAK+E,SAAW7C,IAAU,EAC7BwB,KAAKvD,IAAIH,KAAKmG,QAASxB,EAAO,GAAK3E,KAAKsG,YACxCtG,KAAKoG,O,CAGH,UAAA5D,CAAWN,EAAegB,GAChC,MAAM6E,EAAW/H,KAAKkE,YACtB,MAAMS,EAAS3E,KAAKuC,eACpB,MAAMyF,EAActE,KAAKxD,IAAIF,KAAK8H,WAAW5F,EAAOyC,GAASjB,KAAKvD,IAAIH,KAAK6H,WAAW3F,EAAOyC,GAAS3E,KAAK0G,KAAKxD,KAChHyB,EAAOzC,GAAS8F,EAChB,MAAMC,EAAyBjI,KAAK+E,QAAU,IAAIJ,GAAUA,EAAO,GACnE,GAAI3E,KAAK+G,YAAYgB,EAAUE,GAAY,OAAO,MAElDjI,KAAKC,MAAQgI,EACbjI,KAAKkI,SAASC,KAAKnI,KAAKiE,WAAWgE,IACnC,OAAO,I,CAGD,eAAAtF,GACN,MAAMyF,EAAUpI,KAAKkE,YACrB,GAAIlE,KAAK+G,YAAYqB,EAASpI,KAAK4B,oBAAqB,OACxD5B,KAAK4B,mBAAqB5B,KAAKiE,WAAWmE,GAC1CpI,KAAKqI,SAASF,KAAKnI,KAAKiE,WAAWmE,G,CAG7B,gBAAA1D,GACN,GAAI1E,KAAKsI,OAAStI,KAAKa,WAAab,KAAKuI,gBAAkBvI,KAAK+E,QAAS,OACzE,MAAMyD,EAAO5C,MAAM6C,KAAKzI,KAAK6E,UAAU6D,QAA+B5C,KAAIwC,IACxE,IAAKA,EAAMK,GAAIL,EAAMK,GAAK,qBAAqBjJ,IAC/C,OAAO4I,EAAMK,EAAE,IAEjB,GAAIH,EAAI7E,OAAQ3D,KAAK4I,mBAAqBJ,EAAIK,KAAK,I,CAG7C,cAAAC,CAAe7I,EAAeiC,GACpC,MAAM6G,EAAW/I,KAAKgB,WAAWkB,IAAUlC,KAAKgJ,UAChD,GAAID,EAAU,OAAOA,EACrB,IAAIE,EACJ,IACEA,EAAS,IAAIC,KAAKC,aAAanJ,KAAKoJ,OAAQpJ,KAAKqJ,eAAeC,OAAOrJ,E,CACvE,MACAgJ,EAAS3G,OAAOrC,E,CAElB,MAAO,GAAGD,KAAKiB,cAAcgI,IAASjJ,KAAKkB,a,CAGrC,aAAAqI,CAActJ,EAAeiC,GACnC,GAAIlC,KAAKgB,WAAWkB,IAAUlC,KAAKgJ,WAAahJ,KAAKiB,aAAejB,KAAKkB,aAAelB,KAAKqJ,cAAe,CAC1G,OAAOrJ,KAAK8I,eAAe7I,EAAOiC,E,CAEpC,OAAOsH,S,CA0CD,cAAAC,CAAexH,GACrB,MAAMyH,EAAU1J,KAAK+B,UACrB,IAAK2H,EAAS,OAAO,EACrB,MAAMC,EAAOD,EAAQE,wBACrB,MAAMC,EAAQ7J,KAAKqD,GAAGyG,cAA2B,kBACjD,MAAMC,EAAYF,EACd7J,KAAKQ,cAAgB,aAAeqJ,EAAMG,YAAcH,EAAMI,aAC9D,EAIJ,MAAMC,EAAQH,EAAY,EAE1B,GAAI/J,KAAKQ,cAAgB,WAAY,CACnC,MAAM2J,EAASzG,KAAKvD,IAAI,EAAGwJ,EAAKS,OAASF,EAAQ,GACjD,OAAOxG,KAAKxD,IAAI,EAAGwD,KAAKvD,IAAI,GAAIwJ,EAAKU,OAASH,EAAQjI,EAAMqI,SAAWH,G,CAGzE,MAAMA,EAASzG,KAAKvD,IAAI,EAAGwJ,EAAKY,MAAQL,EAAQ,GAChD,MAAMtC,GAAW3F,EAAMuI,QAAUb,EAAKc,KAAOP,GAASC,EACtD,OAAOzG,KAAKxD,IAAI,EAAGwD,KAAKvD,IAAI,EAAGyH,G,CAGzB,gBAAA7D,CAAiB9B,GACvB,OAAOjC,KAAK0G,KAAK1G,KAAKmG,QAAUnG,KAAKyJ,eAAexH,IAAUjC,KAAKoG,QAAUpG,KAAKmG,S,CAG5E,iBAAAnC,CAAkB/D,EAAemC,GACvC,MAAMsI,EAAgBtI,aAAkBvC,EACpCuC,EAAOuI,QAAqB,kBAC5B,KACJ,GAAID,GAAeE,QAAQ,SAAU,OAAOnI,OAAOiI,EAAcE,QAAQ,UACzE,IAAK5K,KAAK+E,QAAS,OAAO,EAE1B,MAAMJ,EAAS3E,KAAKuC,eACpB,MAAMsI,EAAgBnH,KAAKoH,IAAI7K,EAAQ0E,EAAO,IAC9C,MAAMoG,EAAgBrH,KAAKoH,IAAI7K,EAAQ0E,EAAO,IAC9C,GAAIkG,IAAkBE,EAAe,OAAO9K,GAAS0E,EAAO,GAAK,EAAI,EACrE,OAAOkG,EAAgBE,EAAgB,EAAI,C,CAuBrC,qBAAAC,CAAsB/I,EAAqBgJ,GACjD,GAAIjL,KAAK6B,YAAcI,EAAMJ,UAAW,OACxC,GAAI7B,KAAK+B,WAAWmJ,kBAAkBjJ,EAAMJ,WAAY7B,KAAK+B,UAAUoJ,sBAAsBlJ,EAAMJ,WACnG7B,KAAK6B,UAAY,KACjB7B,KAAKqB,SAAW,MAChBrB,KAAKuB,QAAU,KACf,IAAK0J,IAAajL,KAAK+G,YAAY/G,KAAK8B,kBAAmB9B,KAAKkE,aAAclE,KAAK2C,iB,CAG7E,WAAAyI,CAAYnL,EAAeiC,GACjC,MAAMmJ,EAAUnJ,IAAU,EACtBlC,KAAKqL,SAAW,GAAGrL,KAAKyB,oBACxB,GAAGzB,KAAKqL,SAAW,GAAGrL,KAAKyB,0BAC/B,MAAM6J,EAAapJ,IAAU,EAAIlC,KAAKc,WAAad,KAAKe,SACxD,MAAMwK,EAAavL,KAAK+E,QACpByE,UACAxJ,KAAKuI,iBAAmBvI,KAAKsI,MAAQtI,KAAK0B,QAAU1B,KAAK4I,oBAC7D,MAAM4C,EAAcxL,KAAK+E,QAAUuG,EAAaC,EAAa/B,UAAYxJ,KAAKa,UAE9E,OACE4K,EAAA,OACEC,MAAO,CACLC,cAAe,KACf,wBAAyBzJ,IAAUlC,KAAKwB,kBACzC,aACWc,OAAOJ,GACnB0J,MAAO,CAAE,wBAAyBtJ,OAAOtC,KAAK4H,QAAQ3H,MAEtDwL,EAAA,SACEC,MAAM,gBACNG,KAAK,QACLlD,GAAI0C,EACJnL,IAAKF,KAAK6H,WAAW3F,GACrB/B,IAAKH,KAAK8H,WAAW5F,GACrB9B,KAAMJ,KAAKkG,SACXjG,MAAOA,EACPS,SAAUV,KAAKqC,WAAU,aACbmJ,EAAW,kBACND,EAAU,mBACTvL,KAAK8L,gBAAe,iBACtB9L,KAAKuJ,cAActJ,EAAOiC,GAAM,mBAC9BlC,KAAKQ,cAAgB,WAAa,WAAagJ,UAAS,gBAC3DxJ,KAAKW,SAAW,OAAS6I,UACxCuC,QAAU9J,GAAiBjC,KAAKgC,kBAAkBC,EAAOC,GACzD8J,SAAUhM,KAAK0C,mBACfuJ,UAAWjM,KAAK4C,cAChBsJ,QAAS,IAAMlM,KAAKgD,YAAYd,GAChCiK,OAAQnM,KAAKiD,aAEfwI,EAAA,QAAMC,MAAM,uBAAsB,cAAa,QAAOD,EAAA,QAAMC,MAAM,wB,CAKxE,MAAAU,GACE,MAAMzH,EAAS3E,KAAKuC,eACpB,MAAM8J,EAAQ1H,EAAO,GACrB,MAAM2H,EAAO3H,EAAOA,EAAOhB,OAAS,GACpC,MAAM4I,EAAevM,KAAKqL,SAAW,GAAGrL,KAAKyB,oBAC7C,MAAM+K,GAASxM,KAAK+G,YAAY/G,KAAKkE,YAAalE,KAAK2B,cACvD,MAAM8K,EAAe9H,EAAOmB,KAAI,CAAC7F,EAAOiC,IAAUlC,KAAK8I,eAAe7I,EAAOiC,KAAQ2G,KAAK,IAAI7I,KAAKmB,mBAEnG,OACEsK,EAACiB,EAAI,CAAA5J,IAAA,2DACY9C,KAAKqC,WAAa,OAASmH,UAC1CkC,MAAO,CACLiB,OAAQ,KACR,CAAC,WAAW3M,KAAKO,QAAS,KAC1B,CAAC,WAAWP,KAAKQ,eAAgB,KACjC,CAAC,iBAAiBR,KAAKS,kBAAmB,KAC1C,gBAAiBT,KAAK+E,QACtB,mBAAoB/E,KAAKW,SACzB,sBAAuBX,KAAKqC,YAC7B,mBACiBrC,KAAKQ,YAAW,gBACnBR,KAAKqC,WAAa,GAAKmH,UAAS,gBAChCxJ,KAAKW,SAAW,GAAK6I,UAAS,gBAC9BxJ,KAAKqB,SAAW,GAAKmI,UAAS,eAC/BxJ,KAAKsB,QAAU,GAAKkI,UAAS,cAC/B,GAAE,aACFgD,EAAQ,GAAKhD,UAAS,eACpBxJ,KAAKuB,QAAU,GAAKiI,UAAS,cAC9BxJ,KAAKqC,WAAa,GAAKmH,UACpCoD,QAAS5M,KAAKuD,kBAEZvD,KAAKsI,OAAStI,KAAKM,YACnBmL,EAAA,OAAA3I,IAAA,2CAAK4I,MAAM,qBACR1L,KAAKsI,OACJmD,EAAA,WAAA3I,IAAA,2CACE4I,MAAM,gBACNmB,GAAG,QACHC,QAAQ,kBACRC,MAAM,UACNC,SAAQ,KACRC,IAAKV,EACLW,OAAQlN,KAAK0B,SAEZ1B,KAAKsI,OAGTtI,KAAKM,WACJmL,EAAA,WAAA3I,IAAA,2CACE4I,MAAM,gBACNmB,GAAG,OACHC,QAAQ,kBACRC,MAAM,UACNI,YAAY,gBAEXV,IAKThB,EAAA,OAAA3I,IAAA,2CACE4I,MAAM,kBACN0B,IAAKC,IAAarN,KAAK+B,UAAYsL,GAAW,IAAI,EAClDzB,MAAO,CACL,wBAAyBtJ,OAAOtC,KAAK+E,QAAU/E,KAAK4H,QAAQyE,GAAS,GACrE,sBAAuB/J,OAAOtC,KAAK4H,QAAQ0E,KAE7CgB,cAAetN,KAAK6D,kBACpB0J,cAAevN,KAAKsE,kBACpBkJ,YAAcvL,GAAwBjC,KAAKgL,sBAAsB/I,EAAO,OACxEwL,gBAAkBxL,GAAwBjC,KAAKgL,sBAAsB/I,EAAO,OAE5EwJ,EAAA,OAAA3I,IAAA,2CAAK4I,MAAM,eAAc,cAAa,QAAOD,EAAA,OAAA3I,IAAA,2CAAK4I,MAAM,uBACvD/G,EAAOmB,KAAI,CAAC7F,EAAOiC,IAAUlC,KAAKoL,YAAYnL,EAAOiC,M","ignoreList":[]}
+{"version":3,"names":["sliderCss","sliderId","sliderExternalLabelId","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","step","minStepsBetweenValues","showValue","size","orientation","thumbAlignment","disabled","readOnly","isInactive","ariaLabel","startLabel","endLabel","valueTexts","valuePrefix","valueSuffix","rangeSeparator","formDisabled","dragging","focused","touched","activeThumbIndex","generatedId","labelId","initialValue","lastCommittedValue","pointerId","pointerStartValue","controlEl","handleNativeInput","event","index","input","target","isDisabled","String","resolvedValues","setValueAt","Number","handleNativeChange","commitIfChanged","handleKeyDown","includes","key","preventDefault","handleFocus","handleBlur","next","relatedTarget","Node","el","contains","handleHostClick","inputs","querySelectorAll","Math","length","focus","handlePointerDown","button","valueFromPointer","closestThumbIndex","cloneValue","publicValue","setPointerCapture","requestAnimationFrame","preventScroll","handlePointerMove","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","values","name","internals","setFormValue","isRange","data","FormData","forEach","append","JSON","stringify","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restored","parse","Array","isArray","map","slice","isFinite","setFocus","safeStep","safeMin","safeMax","minimum","minimumGap","steps","floor","maximum","snap","raw","lower","upper","gap","valuesEqual","a","b","every","decimalPlaces","text","toLowerCase","split","candidate","stepped","round","precision","toFixed","percent","allowedMin","allowedMax","previous","constrained","nextValue","dsChange","emit","current","dsCommit","label","ariaLabelledby","ids","from","labels","id","externalLabelledby","join","formattedValue","authored","valueText","number","Intl","NumberFormat","locale","formatOptions","format","ariaValueText","undefined","pointerPercent","control","rect","getBoundingClientRect","thumb","querySelector","thumbSize","offsetWidth","offsetHeight","inset","travel","height","bottom","clientY","width","clientX","left","targetElement","closest","dataset","lowerDistance","abs","upperDistance","endPointerInteraction","canceled","hasPointerCapture","releasePointerCapture","renderThumb","inputId","rangeLabel","labelledby","directLabel","h","class","slider__thumb","style","type","ariaDescribedby","onInput","onChange","onKeyDown","onFocus","onBlur","render","first","last","firstInputId","dirty","valueDisplay","Host","slider","onClick","as","variant","color","emphasis","for","textId","fontFeature","ref","element","onPointerDown","onPointerMove","onPointerUp","onPointerCancel"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n:host(:not(.slider--readonly):not(.ds-control-inactive)) .slider__thumb:hover .slider__thumb-wash {\n  background-color: var(--color-interaction-hover);\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Slider {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n  @Prop({ mutable: true }) value: SliderValue = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Minimum number of steps kept between two range thumbs. */\n  @Prop() minStepsBetweenValues: number = 0;\n  /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n  @Prop() label: string | undefined;\n  /** Show the formatted current value beside the visible label. */\n  @Prop() showValue: boolean = true;\n  @Prop() size: SliderSize = 'md';\n  @Prop() orientation: SliderOrientation = 'horizontal';\n  /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n  @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keep the value focusable and submittable while preventing changes. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop() isInactive: boolean = false;\n  /** Direct accessible name for a single-thumb slider without a visible label. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id references for a visible single-thumb slider label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id references for supporting guidance or error text. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Accessible label for the lower thumb in a range slider. */\n  @Prop() startLabel: string = 'Minimum value';\n  /** Accessible label for the upper thumb in a range slider. */\n  @Prop() endLabel: string = 'Maximum value';\n  /** Human-readable value text for a single slider or both range thumbs. */\n  @Prop() valueText: string | undefined;\n  /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n  @Prop() valueTexts: string[] = [];\n  /** Locale used by Intl.NumberFormat for the visible value. */\n  @Prop() locale: string | undefined;\n  /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n  @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n  @Prop() valuePrefix: string = '';\n  @Prop() valueSuffix: string = '';\n  @Prop() rangeSeparator: string = '–';\n  /** Id applied to the first native range input. */\n  @Prop() inputId: string | undefined;\n\n  /** Emitted continuously while the value changes. */\n  @Event() dsChange!: EventEmitter<SliderValue>;\n  /** Emitted when a pointer or keyboard value change is committed. */\n  @Event() dsCommit!: EventEmitter<SliderValue>;\n\n  @State() private formDisabled = false;\n  @State() private dragging = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private activeThumbIndex = 0;\n  @State() private externalLabelledby: string | undefined;\n\n  private readonly generatedId = `ds-slider-${++sliderId}`;\n  private readonly labelId = `${this.generatedId}-label`;\n  private initialValue: SliderValue = 0;\n  private lastCommittedValue: SliderValue = 0;\n  private pointerId: number | null = null;\n  private pointerStartValue: SliderValue = 0;\n  private controlEl: HTMLDivElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.cloneValue(this.publicValue);\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isDisabled || !this.name) {\n      this.internals.setFormValue(null);\n      return;\n    }\n\n    if (this.isRange) {\n      const data = new FormData();\n      values.forEach(value => data.append(this.name as string, String(value)));\n      this.internals.setFormValue(data, JSON.stringify(values));\n    } else {\n      this.internals.setFormValue(String(values[0]), String(values[0]));\n    }\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.cloneValue(this.initialValue);\n    this.lastCommittedValue = this.cloneValue(this.initialValue);\n    this.dragging = false;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state !== 'string') return;\n    if (this.isRange) {\n      try {\n        const restored = JSON.parse(state);\n        if (Array.isArray(restored)) this.value = restored.map(Number).slice(0, 2);\n      } catch {\n        this.value = this.cloneValue(this.initialValue);\n      }\n    } else {\n      const restored = Number(state);\n      if (Number.isFinite(restored)) this.value = restored;\n    }\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n  }\n\n  @Method()\n  async setFocus(index: number = 0) {\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get isRange(): boolean {\n    return Array.isArray(this.value);\n  }\n\n  private get safeStep(): number {\n    return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n  }\n\n  private get safeMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  private get safeMax(): number {\n    const minimum = this.safeMin;\n    return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n  }\n\n  private get minimumGap(): number {\n    const steps = Number.isFinite(this.minStepsBetweenValues)\n      ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n      : 0;\n    return steps * this.safeStep;\n  }\n\n  private get resolvedValues(): number[] {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    if (!this.isRange) return [this.snap(Number(this.value))];\n\n    const raw = this.value as number[];\n    let lower = this.snap(Number(raw[0] ?? minimum));\n    let upper = this.snap(Number(raw[1] ?? maximum));\n    if (lower > upper) [lower, upper] = [upper, lower];\n\n    const gap = Math.min(this.minimumGap, maximum - minimum);\n    if (upper - lower < gap) {\n      upper = Math.min(maximum, this.snap(lower + gap));\n      lower = Math.max(minimum, this.snap(upper - gap));\n    }\n    return [lower, upper];\n  }\n\n  private get publicValue(): SliderValue {\n    const values = this.resolvedValues;\n    return this.isRange ? [...values] : values[0];\n  }\n\n  private cloneValue(value: SliderValue): SliderValue {\n    return Array.isArray(value) ? [...value] : value;\n  }\n\n  private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n    if (Array.isArray(a) && Array.isArray(b)) {\n      return a.length === b.length && a.every((value, index) => value === b[index]);\n    }\n    return !Array.isArray(a) && !Array.isArray(b) && a === b;\n  }\n\n  private decimalPlaces(value: number): number {\n    const text = String(value).toLowerCase();\n    if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n    return text.includes('.') ? text.split('.')[1].length : 0;\n  }\n\n  private snap(value: number): number {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    const candidate = Number.isFinite(value) ? value : minimum;\n    const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n    const precision = Math.min(10, Math.max(\n      this.decimalPlaces(minimum),\n      this.decimalPlaces(maximum),\n      this.decimalPlaces(this.safeStep),\n    ));\n    return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n  }\n\n  private percent(value: number): number {\n    return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n  }\n\n  private allowedMin(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 1\n      ? Math.min(this.safeMax, values[0] + this.minimumGap)\n      : this.safeMin;\n  }\n\n  private allowedMax(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 0\n      ? Math.max(this.safeMin, values[1] - this.minimumGap)\n      : this.safeMax;\n  }\n\n  private setValueAt(index: number, next: number): boolean {\n    const previous = this.publicValue;\n    const values = this.resolvedValues;\n    const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n    values[index] = constrained;\n    const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n    if (this.valuesEqual(previous, nextValue)) return false;\n\n    this.value = nextValue;\n    this.dsChange.emit(this.cloneValue(nextValue));\n    return true;\n  }\n\n  private commitIfChanged() {\n    const current = this.publicValue;\n    if (this.valuesEqual(current, this.lastCommittedValue)) return;\n    this.lastCommittedValue = this.cloneValue(current);\n    this.dsCommit.emit(this.cloneValue(current));\n  }\n\n  private syncNativeLabels() {\n    if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n    const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n      return label.id;\n    });\n    if (ids.length) this.externalLabelledby = ids.join(' ');\n  }\n\n  private formattedValue(value: number, index: number): string {\n    const authored = this.valueTexts[index] ?? this.valueText;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n    } catch {\n      number = String(value);\n    }\n    return `${this.valuePrefix}${number}${this.valueSuffix}`;\n  }\n\n  private ariaValueText(value: number, index: number): string | undefined {\n    if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n      return this.formattedValue(value, index);\n    }\n    return undefined;\n  }\n\n  private handleNativeInput = (event: Event, index: number) => {\n    const input = event.target as HTMLInputElement;\n    this.activeThumbIndex = index;\n    if (this.readOnly || this.isDisabled) {\n      input.value = String(this.resolvedValues[index]);\n      return;\n    }\n    this.setValueAt(index, Number(input.value));\n  };\n\n  private handleNativeChange = () => {\n    if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.readOnly) return;\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private handleFocus = (index: number) => {\n    this.activeThumbIndex = index;\n    this.focused = true;\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleHostClick = (event: MouseEvent) => {\n    if (event.target !== this.el || this.isDisabled) return;\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n  };\n\n  private pointerPercent(event: PointerEvent): number {\n    const control = this.controlEl;\n    if (!control) return 0;\n    const rect = control.getBoundingClientRect();\n    const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n    const thumbSize = thumb\n      ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n      : 0;\n    // Both alignment modes keep the complete thumb inside the control. Edge\n    // alignment lets the rail span the control while center alignment insets\n    // the rail to the same thumb-center travel.\n    const inset = thumbSize / 2;\n\n    if (this.orientation === 'vertical') {\n      const travel = Math.max(1, rect.height - inset * 2);\n      return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n    }\n\n    const travel = Math.max(1, rect.width - inset * 2);\n    const percent = (event.clientX - rect.left - inset) / travel;\n    return Math.min(1, Math.max(0, percent));\n  }\n\n  private valueFromPointer(event: PointerEvent): number {\n    return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n  }\n\n  private closestThumbIndex(value: number, target: EventTarget | null): number {\n    const targetElement = target instanceof HTMLElement\n      ? target.closest<HTMLElement>('.slider__thumb')\n      : null;\n    if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n    if (!this.isRange) return 0;\n\n    const values = this.resolvedValues;\n    const lowerDistance = Math.abs(value - values[0]);\n    const upperDistance = Math.abs(value - values[1]);\n    if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n    return lowerDistance < upperDistance ? 0 : 1;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n    event.preventDefault();\n    const value = this.valueFromPointer(event);\n    const index = this.closestThumbIndex(value, event.target);\n    this.activeThumbIndex = index;\n    this.pointerId = event.pointerId;\n    this.pointerStartValue = this.cloneValue(this.publicValue);\n    this.dragging = true;\n    this.setValueAt(index, value);\n    this.controlEl?.setPointerCapture(event.pointerId);\n    requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (this.pointerId !== event.pointerId || !this.dragging) return;\n    event.preventDefault();\n    this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n  };\n\n  private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n    if (this.pointerId !== event.pointerId) return;\n    if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n    this.pointerId = null;\n    this.dragging = false;\n    this.touched = true;\n    if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId = index === 0\n      ? this.inputId ?? `${this.generatedId}-input`\n      : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n    const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n    const labelledby = this.isRange\n      ? undefined\n      : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n    const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n    return (\n      <div\n        class={{\n          slider__thumb: true,\n          'slider__thumb--active': index === this.activeThumbIndex,\n        }}\n        data-index={String(index)}\n        style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n      >\n        <input\n          class=\"slider__input\"\n          type=\"range\"\n          id={inputId}\n          min={this.allowedMin(index)}\n          max={this.allowedMax(index)}\n          step={this.safeStep}\n          value={value}\n          disabled={this.isDisabled}\n          aria-label={directLabel}\n          aria-labelledby={labelledby}\n          aria-describedby={this.ariaDescribedby}\n          aria-valuetext={this.ariaValueText(value, index)}\n          aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          onInput={(event: Event) => this.handleNativeInput(event, index)}\n          onChange={this.handleNativeChange}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n      </div>\n    );\n  }\n\n  render() {\n    const values = this.resolvedValues;\n    const first = values[0];\n    const last = values[values.length - 1];\n    const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n    const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n    const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n    return (\n      <Host\n        aria-disabled={this.isDisabled ? 'true' : undefined}\n        class={{\n          slider: true,\n          [`slider--${this.size}`]: true,\n          [`slider--${this.orientation}`]: true,\n          [`slider--thumb-${this.thumbAlignment}`]: true,\n          'slider--range': this.isRange,\n          'slider--readonly': this.readOnly,\n          'ds-control-inactive': this.isDisabled,\n        }}\n        data-orientation={this.orientation}\n        data-disabled={this.isDisabled ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-dragging={this.dragging ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-filled=\"\"\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-valid={!this.isDisabled ? '' : undefined}\n        onClick={this.handleHostClick}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"slider__label-row\">\n            {this.label && (\n              <ds-text\n                class=\"slider__label\"\n                as=\"label\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                emphasis\n                for={firstInputId}\n                textId={this.labelId}\n              >\n                {this.label}\n              </ds-text>\n            )}\n            {this.showValue && (\n              <ds-text\n                class=\"slider__value\"\n                as=\"span\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                fontFeature=\"tabular-nums\"\n              >\n                {valueDisplay}\n              </ds-text>\n            )}\n          </div>\n        )}\n        <div\n          class=\"slider__control\"\n          ref={element => { this.controlEl = element ?? null; }}\n          style={{\n            '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n            '--ds-slider-end-pct': String(this.percent(last)),\n          } as Record<string, string>}\n          onPointerDown={this.handlePointerDown}\n          onPointerMove={this.handlePointerMove}\n          onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n          onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n        >\n          <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"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-2W-ZjZCR.js";const t=o;const p=s;export{t as DsSwatchPicker,p as defineCustomElement};
+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};
 //# sourceMappingURL=ds-swatch-picker.js.map

package/dist/components/ds-switch.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-DyGB97Oy.js";const t=o;const p=s;export{t as DsSwitch,p as defineCustomElement};
+import{S as o,d as s}from"./p-DYqReipj.js";const p=o;const t=s;export{p as DsSwitch,t as defineCustomElement};
 //# sourceMappingURL=ds-switch.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-DOCKtrS4.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-C0_8K4y7.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:"103cf13ac45ec665f8df4609be46340c0a80988d",class:{"tab-group-host":true,"tab-group-host--surface":!!o,[`tab-group-host--${o}`]:!!o}},n("div",{key:"29065b867ce844cf658b489a810492aa1bcb6643",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{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};
 //# sourceMappingURL=ds-tab-group.js.map