npm - @ds-mo/ui - Versions diffs - 14.15.1 → 14.17.0 - Mend

@ds-mo/ui 14.15.1 → 14.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (259) hide show

package/dist/components/ds-message-scroller.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["scrollEdgeFadeCss","messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","followReleased","releasePendingAtLiveEdge","atStart","programmatic","transcriptChildren","knownTranscriptElements","Set","knownTurnAnchors","turnClearance","prependReconciliation","handleTranscriptChange","current","getTranscriptChildren","previous","hadKnownTranscript","size","previouslyKnown","appendedAnchor","reverse","find","element","reverseIndex","matches","has","index","length","slice","every","next","forEach","add","requestAnimationFrame","positionNewTurn","firstKnownIndex","findIndex","newTranscript","filter","prepended","indexOf","viewport","preservedElement","activeTurnAnchor","isConnected","preservedTop","activeTurnAnchorViewportTop","firstChildViewportTop","undefined","reconcilePrependPosition","schedulePrependReconciliation","rememberFirstChildTop","rememberActiveTurnAnchorTop","scrollOverlayController","sync","handleTranscriptSlotChange","handleScroll","atLiveEdge","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","applyDefaultPosition","addEventListener","disconnectedCallback","disconnect","mutationObserver","programmaticTimer","clearTimeout","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","top","setTimeout","content","overlay","ScrollOverlayController","host","overlayContentSelector","onGeometryChange","handleContentGrowth","connect","MutationObserver","observe","childList","subtree","characterData","syncTurnClearance","nextHeight","first","getBoundingClientRect","assigned","transcriptSlot","assignedElements","assignedTranscript","queriedTranscript","closest","viewportTop","nextTop","generation","pending","flatMap","map","componentOnReady","call","catch","promise","Promise","all","then","anchor","finishPositionNewTurn","viewportRect","anchorTop","customOffset","getComputedStyle","getPropertyValue","trim","offset","resolveCssLengthPx","max","Math","target","min","children","last","anchorRect","lastRect","contentAfterAnchor","bottom","clearance","ceil","style","setProperty","anchors","render","h","Host","key","class","ref","role","tabIndex","onScroll","onPointerDown","event","pointerType","onWheel","onKeyDown","includes","onSlotchange","name","label","side","variant","icon","rounded","hasBorder","onDsClick"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":["/*\n Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n \n Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n \n @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n /\n\n@property --ds-scroll-edge-fade-top {\n syntax: '<length-percentage>';\n inherits: false;\n / stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. /\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n syntax: '<length-percentage>';\n inherits: false;\n / stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. /\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n syntax: '<length-percentage>';\n inherits: false;\n / stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. /\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n syntax: '<length-percentage>';\n inherits: false;\n / stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. /\n initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n from { --ds-scroll-edge-fade-top: 0px; }\n to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n from { --ds-scroll-edge-fade-left: 0px; }\n to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/ Mask gradients use #000 / transparent as alpha stops — not theme colors. /\n/ stylelint-disable color-no-hex /\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n --ds-scroll-edge-fade-target-top: 0px;\n --ds-scroll-edge-fade-target-bottom: 0px;\n --ds-scroll-edge-fade-target-left: 0px;\n --ds-scroll-edge-fade-target-right: 0px;\n --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n --ds-scroll-edge-fade-block-mask: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-top),\n #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n transparent 100%\n );\n --ds-scroll-edge-fade-inline-mask: linear-gradient(\n to right,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-left),\n #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n transparent 100%\n );\n\n / Intersecting the block and inline masks lets every edge compose correctly. /\n -webkit-mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/ Manual per-edge state remains available when scroll state already lives in JS. /\n.scroll-edge-fade--top-at-edge {\n --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n .scroll-edge-fade--scroll-aware {\n animation-name:\n ds-scroll-edge-fade-reveal-top,\n ds-scroll-edge-fade-reveal-bottom,\n ds-scroll-edge-fade-reveal-left,\n ds-scroll-edge-fade-reveal-right;\n / stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. /\n animation-duration: 1ms;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n animation-range:\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .scroll-edge-fade--scroll-aware {\n animation: none;\n }\n }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/\n Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n /\n.scroll-edge-fade--block-window {\n --ds-scroll-edge-fade-window-start: 100%;\n --ds-scroll-edge-fade-window-end: 100%;\n\n -webkit-mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\n\n/ stylelint-enable color-no-hex /\n","@import '../../styles/control-elevation.css';\n\n:host {\n --ds-message-scroller-anchor-offset: var(--dimension-space-800);\n\n display: block;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.message-scroller {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 0;\n}\n\n.message-scroller__viewport {\n width: 100%;\n height: 100%;\n min-height: 0;\n overflow: auto;\n overflow-anchor: none;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.message-scroller__viewport:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n outline-offset: calc(-1 var(--dimension-stroke-width-025));\n}\n\n.message-scroller__content {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-300);\n width: 100%;\n max-width: var(\n --ds-message-scroller-content-max-width,\n var(--dimension-panel-width-2xl)\n );\n min-height: 100%;\n margin-inline: auto;\n padding-block-start: var(--dimension-space-200);\n padding-inline: var(--dimension-space-200);\n padding-block-end: max(\n calc(var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px)),\n var(--ds-message-scroller-turn-clearance, 0px)\n );\n box-sizing: border-box;\n}\n\n.message-scroller__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n\n.message-scroller__overlay-stack {\n display: grid;\n width: 100%;\n}\n\n.message-scroller__interaction,\n.message-scroller__overlay-content {\n min-width: 0;\n}\n\n.message-scroller__control {\n position: absolute;\n bottom: calc(\n var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200)\n );\n left: 50%;\n z-index: var(--dimension-z-index-floating);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dimension-radius-half);\n background: var(--color-background-transparent);\n transform: translateX(-50%);\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n backdrop-filter: blur(var(--effect-blur-sm));\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n tag: 'ds-message-scroller',\n styleUrl: 'MessageScroller.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class MessageScroller {\n @Element() el!: HTMLElement;\n\n @Prop() busy: boolean = false;\n @Prop() autoFollow: boolean = true;\n @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n @Prop() messagesLabel: string = 'Messages';\n\n @Event() dsReachStart!: EventEmitter<void>;\n\n @State() private showScrollToLatest = false;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private transcriptSlot?: HTMLSlotElement;\n private scrollOverlayController?: ScrollOverlayController;\n private mutationObserver?: MutationObserver;\n private following = true;\n private followReleased = false;\n private releasePendingAtLiveEdge = false;\n private atStart = false;\n private programmatic = false;\n private programmaticTimer?: ReturnType<typeof setTimeout>;\n private transcriptChildren: HTMLElement[] = [];\n private knownTranscriptElements = new Set<HTMLElement>();\n private knownTurnAnchors = new Set<HTMLElement>();\n private firstChildViewportTop?: number;\n private activeTurnAnchor?: HTMLElement;\n private activeTurnAnchorViewportTop?: number;\n private turnClearance = 0;\n private prependReconciliation = 0;\n\n componentDidLoad() {\n this.transcriptChildren = this.getTranscriptChildren();\n this.transcriptChildren.forEach(element => {\n this.knownTranscriptElements.add(element);\n if (element.matches('ds-message[scroll-anchor]')) {\n this.knownTurnAnchors.add(element);\n }\n });\n this.rememberFirstChildTop();\n this.connectObservers();\n requestAnimationFrame(() => this.applyDefaultPosition());\n document.addEventListener('selectionchange', this.handleSelectionChange);\n }\n\n disconnectedCallback() {\n this.prependReconciliation += 1;\n this.scrollOverlayController?.disconnect();\n this.mutationObserver?.disconnect();\n if (this.programmaticTimer) clearTimeout(this.programmaticTimer);\n document.removeEventListener('selectionchange', this.handleSelectionChange);\n }\n\n @Method()\n async scrollToMessage(id: string): Promise<boolean> {\n const message = Array.from(\n this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n ).find(item => item.messageId === id \|\| item.getAttribute('message-id') === id);\n if (!message) return false;\n this.releasePendingAtLiveEdge = false;\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = true;\n message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n return true;\n }\n\n @Method()\n async scrollToStart() {\n this.releasePendingAtLiveEdge = false;\n this.scrollTo(0);\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = Boolean(\n this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n );\n }\n\n @Method()\n async scrollToEnd() {\n this.releasePendingAtLiveEdge = false;\n this.following = true;\n this.followReleased = false;\n this.showScrollToLatest = false;\n this.scrollTo(this.viewport?.scrollHeight ?? 0);\n }\n\n private motionBehavior(): ScrollBehavior {\n return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n }\n\n private scrollTo(top: number) {\n if (!this.viewport) return;\n this.programmatic = true;\n const behavior = this.motionBehavior();\n this.viewport.scrollTo({ top, behavior });\n if (this.programmaticTimer) clearTimeout(this.programmaticTimer);\n this.programmaticTimer = setTimeout(() => {\n this.programmatic = false;\n this.programmaticTimer = undefined;\n if (this.following) {\n this.viewport!.scrollTop = top;\n this.showScrollToLatest = false;\n }\n }, behavior === 'smooth' ? 600 : 0);\n }\n\n private connectObservers() {\n if (!this.viewport \|\| !this.content \|\| !this.overlay) return;\n this.scrollOverlayController = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n overlayContentSelector: '.message-scroller__overlay-stack',\n onGeometryChange: () => this.handleContentGrowth(),\n });\n this.scrollOverlayController.connect();\n this.mutationObserver = new MutationObserver(() => {\n this.handleTranscriptChange();\n this.handleContentGrowth();\n });\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n }\n\n private handleContentGrowth() {\n if (!this.viewport) return;\n this.syncTurnClearance();\n const nextHeight = this.viewport.scrollHeight;\n if (this.autoFollow && this.following && !this.followReleased) {\n this.viewport.scrollTop = nextHeight;\n }\n if (this.releasePendingAtLiveEdge && !this.isAtLiveEdge()) {\n this.releasePendingAtLiveEdge = false;\n }\n this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n this.scrollOverlayController?.sync();\n }\n\n private rememberFirstChildTop() {\n if (!this.viewport) return;\n const first = this.getTranscriptChildren()[0];\n this.firstChildViewportTop = first\n ? first.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top\n : undefined;\n }\n\n private getTranscriptChildren(): HTMLElement[] {\n const assigned = this.transcriptSlot?.assignedElements() ?? [];\n const assignedTranscript = assigned.filter(\n (element): element is HTMLElement =>\n element instanceof HTMLElement &&\n (element.matches('ds-message') \|\| element.matches('ds-agent-response')),\n );\n const queriedTranscript = Array.from(\n this.el.querySelectorAll<HTMLElement>('ds-message, ds-agent-response'),\n ).filter(element => {\n if (\n element.closest(\n '.message-scroller__interaction, .message-scroller__overlay-content',\n )\n ) {\n return false;\n }\n if (element.matches('ds-agent-response')) return true;\n return !element.closest('ds-agent-response');\n });\n return queriedTranscript.length > assignedTranscript.length\n ? queriedTranscript\n : assignedTranscript;\n }\n\n private handleTranscriptChange = () => {\n const current = this.getTranscriptChildren();\n const previous = this.transcriptChildren;\n const hadKnownTranscript = this.knownTranscriptElements.size > 0;\n const previouslyKnown = new Set(this.knownTranscriptElements);\n const appendedAnchor = [...current].reverse().find((element, reverseIndex) => {\n if (\n !element.matches('ds-message[scroll-anchor]') \|\|\n this.knownTurnAnchors.has(element)\n ) {\n return false;\n }\n const index = current.length - reverseIndex - 1;\n return current\n .slice(index + 1)\n .every(next => !this.knownTranscriptElements.has(next));\n });\n current.forEach(element => {\n this.knownTranscriptElements.add(element);\n if (element.matches('ds-message[scroll-anchor]')) {\n this.knownTurnAnchors.add(element);\n }\n });\n if (!previous.length) {\n this.transcriptChildren = current;\n if (appendedAnchor && hadKnownTranscript) {\n requestAnimationFrame(() => this.positionNewTurn(appendedAnchor));\n }\n return;\n }\n\n const firstKnownIndex = current.findIndex(element => previouslyKnown.has(element));\n const newTranscript = current.filter(element => !previouslyKnown.has(element));\n const prepended =\n (current.length > previous.length && previous.every(\n (element, index) => current[current.length - previous.length + index] === element,\n )) \|\|\n (!appendedAnchor &&\n newTranscript.length > 0 &&\n firstKnownIndex > 0 &&\n newTranscript.every(element => current.indexOf(element) < firstKnownIndex));\n\n this.transcriptChildren = current;\n if (prepended) {\n if (this.viewport) {\n const preservedElement = this.activeTurnAnchor?.isConnected\n ? this.activeTurnAnchor\n : previous[0];\n const preservedTop = this.activeTurnAnchor?.isConnected\n ? this.activeTurnAnchorViewportTop\n : this.firstChildViewportTop;\n if (preservedElement && preservedTop !== undefined) {\n this.reconcilePrependPosition(preservedElement, preservedTop);\n this.schedulePrependReconciliation(\n preservedElement,\n preservedTop,\n newTranscript,\n );\n }\n }\n this.rememberFirstChildTop();\n this.rememberActiveTurnAnchorTop();\n this.scrollOverlayController?.sync();\n return;\n }\n if (appendedAnchor) {\n requestAnimationFrame(() => this.positionNewTurn(appendedAnchor));\n }\n };\n\n private reconcilePrependPosition(element: HTMLElement, viewportTop: number) {\n if (!this.viewport \|\| !element.isConnected) return;\n const nextTop =\n element.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top;\n this.viewport.scrollTop += nextTop - viewportTop;\n }\n\n private schedulePrependReconciliation(\n element: HTMLElement,\n viewportTop: number,\n prepended: HTMLElement[],\n ) {\n const generation = ++this.prependReconciliation;\n // Prepended custom elements can gain height after their child-list mutation.\n // Reconcile against the original coordinate after their layouts settle.\n const pending = prepended\n .flatMap(item => [item, ...Array.from(item.querySelectorAll<HTMLElement>('*'))])\n .map(item => {\n const componentOnReady = (\n item as HTMLElement & { componentOnReady?: () => Promise<unknown> }\n ).componentOnReady;\n return componentOnReady ? componentOnReady.call(item).catch(() => undefined) : null;\n })\n .filter((promise): promise is Promise<unknown> => Boolean(promise));\n\n void Promise.all(pending).then(() => {\n requestAnimationFrame(() => {\n if (generation !== this.prependReconciliation) return;\n this.reconcilePrependPosition(element, viewportTop);\n requestAnimationFrame(() => {\n if (generation !== this.prependReconciliation) return;\n this.reconcilePrependPosition(element, viewportTop);\n this.rememberFirstChildTop();\n this.rememberActiveTurnAnchorTop();\n this.scrollOverlayController?.sync();\n });\n });\n });\n }\n\n private handleTranscriptSlotChange = () => this.handleTranscriptChange();\n\n private positionNewTurn(anchor: HTMLElement) {\n if (!this.viewport) return;\n this.activeTurnAnchor = anchor;\n this.syncTurnClearance();\n requestAnimationFrame(() => this.finishPositionNewTurn(anchor));\n }\n\n private finishPositionNewTurn(anchor: HTMLElement) {\n if (!this.viewport \|\| !anchor.isConnected) return;\n const viewportRect = this.viewport.getBoundingClientRect();\n const anchorTop =\n anchor.getBoundingClientRect().top - viewportRect.top + this.viewport.scrollTop;\n const customOffset = getComputedStyle(this.el)\n .getPropertyValue('--ds-message-scroller-anchor-offset')\n .trim();\n const offset = resolveCssLengthPx(customOffset, 'var(--dimension-space-800)');\n const max = Math.max(this.viewport.scrollHeight - this.viewport.clientHeight, 0);\n const target = Math.min(Math.max(anchorTop - offset, 0), max);\n this.following = max - target <= LIVE_EDGE_THRESHOLD;\n this.followReleased = !this.following;\n this.showScrollToLatest = !this.following;\n this.programmatic = true;\n this.viewport.scrollTop = target;\n requestAnimationFrame(() => {\n this.programmatic = false;\n this.following = this.isAtLiveEdge();\n this.followReleased = !this.following;\n this.showScrollToLatest = !this.following;\n this.rememberFirstChildTop();\n this.rememberActiveTurnAnchorTop();\n });\n this.scrollOverlayController?.sync();\n }\n\n private rememberActiveTurnAnchorTop() {\n if (!this.viewport \|\| !this.activeTurnAnchor?.isConnected) return;\n this.activeTurnAnchorViewportTop =\n this.activeTurnAnchor.getBoundingClientRect().top -\n this.viewport.getBoundingClientRect().top;\n }\n\n private syncTurnClearance() {\n if (!this.viewport \|\| !this.activeTurnAnchor?.isConnected) return;\n const children = this.getTranscriptChildren();\n const last = children[children.length - 1];\n if (!last) return;\n const anchorRect = this.activeTurnAnchor.getBoundingClientRect();\n const lastRect = last.getBoundingClientRect();\n const customOffset = getComputedStyle(this.el)\n .getPropertyValue('--ds-message-scroller-anchor-offset')\n .trim();\n const offset = resolveCssLengthPx(customOffset, 'var(--dimension-space-800)');\n const contentAfterAnchor = Math.max(lastRect.bottom - anchorRect.top, 0);\n const clearance = Math.max(\n Math.ceil(this.viewport.clientHeight - offset - contentAfterAnchor),\n 0,\n );\n if (clearance === this.turnClearance) return;\n this.turnClearance = clearance;\n this.el.style.setProperty('--ds-message-scroller-turn-clearance', `${clearance}px`);\n }\n\n private applyDefaultPosition() {\n if (!this.viewport) return;\n this.releasePendingAtLiveEdge = false;\n if (this.defaultPosition === 'start') {\n this.viewport.scrollTop = 0;\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n this.scrollOverlayController?.sync();\n return;\n }\n if (this.defaultPosition === 'last-anchor') {\n const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n const last = anchors.item(anchors.length - 1);\n if (last) {\n last.scrollIntoView({ block: 'start' });\n this.following = this.isAtLiveEdge();\n this.followReleased = !this.following;\n this.showScrollToLatest = !this.following;\n this.scrollOverlayController?.sync();\n return;\n }\n }\n this.viewport.scrollTop = this.viewport.scrollHeight;\n this.following = true;\n this.followReleased = false;\n this.showScrollToLatest = false;\n this.scrollOverlayController?.sync();\n }\n\n private isAtLiveEdge(): boolean {\n if (!this.viewport) return true;\n return (\n this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n LIVE_EDGE_THRESHOLD\n );\n }\n\n private handleScroll = () => {\n if (!this.viewport) return;\n this.scrollOverlayController?.sync();\n this.rememberFirstChildTop();\n this.rememberActiveTurnAnchorTop();\n if (this.programmatic) return;\n const atLiveEdge = this.isAtLiveEdge();\n if (this.releasePendingAtLiveEdge && atLiveEdge) {\n // A scroll event queued by the previous auto-follow can arrive after\n // reader input. Keep that stale event from restoring follow mode.\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = false;\n return;\n }\n this.releasePendingAtLiveEdge = false;\n this.following = atLiveEdge;\n this.followReleased = !this.following;\n this.showScrollToLatest = !this.following;\n const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n this.atStart = nextAtStart;\n };\n\n private releaseFollow = () => {\n this.prependReconciliation += 1;\n this.releasePendingAtLiveEdge = this.isAtLiveEdge();\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = !this.releasePendingAtLiveEdge;\n };\n\n private handleSelectionChange = () => {\n const selection = document.getSelection();\n if (\n selection &&\n !selection.isCollapsed &&\n selection.anchorNode &&\n this.el.contains(selection.anchorNode)\n ) {\n this.releaseFollow();\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"message-scroller\">\n <div\n class=\"message-scroller__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role=\"region\"\n aria-label={this.messagesLabel}\n tabIndex={0}\n onScroll={this.handleScroll}\n onPointerDown={(event: PointerEvent) => {\n if (event.pointerType === 'touch') this.releaseFollow();\n }}\n onWheel={this.releaseFollow}\n onKeyDown={(event: KeyboardEvent) => {\n if (\n ['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(\n event.key,\n )\n ) {\n this.releaseFollow();\n }\n }}\n >\n <div\n class=\"message-scroller__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n role=\"log\"\n aria-live=\"polite\"\n aria-relevant=\"additions\"\n aria-busy={this.busy ? 'true' : undefined}\n >\n <slot\n ref={element => {\n this.transcriptSlot = element;\n }}\n onSlotchange={this.handleTranscriptSlotChange}\n />\n </div>\n </div>\n <div\n class=\"message-scroller__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <div class=\"message-scroller__overlay-stack\">\n <div class=\"message-scroller__interaction\">\n <slot name=\"interaction\" />\n </div>\n <div class=\"message-scroller__overlay-content\">\n <slot name=\"overlay\" />\n </div>\n </div>\n </div>\n {this.showScrollToLatest ? (\n <div class=\"message-scroller__control ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n <ds-tooltip label=\"Scroll to latest message\" side=\"top\" size=\"sm\">\n <ds-button-unfilled\n variant=\"icon\"\n icon=\"ChevronDown\"\n size=\"md\"\n rounded\n hasBorder={false}\n aria-label=\"Scroll to latest message\"\n onDsClick={() => void this.scrollToEnd()}\n />\n </ds-tooltip>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["scrollEdgeFadeCss","messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","followReleased","releasePendingAtLiveEdge","atStart","programmatic","transcriptChildren","knownTranscriptElements","Set","knownTurnAnchors","turnClearance","prependReconciliation","handleTranscriptChange","current","getTranscriptChildren","previous","hadKnownTranscript","size","previouslyKnown","appendedAnchor","reverse","find","element","reverseIndex","matches","has","index","length","slice","every","next","forEach","add","requestAnimationFrame","positionNewTurn","firstKnownIndex","findIndex","newTranscript","filter","prepended","indexOf","viewport","preservedElement","activeTurnAnchor","isConnected","preservedTop","activeTurnAnchorViewportTop","firstChildViewportTop","undefined","reconcilePrependPosition","schedulePrependReconciliation","rememberFirstChildTop","rememberActiveTurnAnchorTop","scrollOverlayController","sync","handleTranscriptSlotChange","handleScroll","atLiveEdge","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","applyDefaultPosition","addEventListener","disconnectedCallback","disconnect","mutationObserver","programmaticTimer","clearTimeout","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","top","setTimeout","content","overlay","ScrollOverlayController","host","overlayContentSelector","onGeometryChange","handleContentGrowth","connect","MutationObserver","observe","childList","subtree","characterData","syncTurnClearance","nextHeight","first","getBoundingClientRect","assigned","transcriptSlot","assignedElements","assignedTranscript","queriedTranscript","closest","viewportTop","nextTop","generation","pending","flatMap","map","componentOnReady","call","catch","promise","Promise","all","then","anchor","finishPositionNewTurn","viewportRect","anchorTop","customOffset","getComputedStyle","getPropertyValue","trim","offset","resolveCssLengthPx","max","Math","target","min","children","last","anchorRect","lastRect","contentAfterAnchor","bottom","clearance","ceil","style","setProperty","anchors","render","h","Host","key","class","ref","role","tabIndex","onScroll","onPointerDown","event","pointerType","onWheel","onKeyDown","includes","onSlotchange","name","label","side","variant","icon","rounded","hasBorder","onDsClick"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":["/*\n Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n \n Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n \n @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n /\n\n@property --ds-scroll-edge-fade-top {\n syntax: '<length-percentage>';\n inherits: false;\n / stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. /\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n syntax: '<length-percentage>';\n inherits: false;\n / stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. /\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n syntax: '<length-percentage>';\n inherits: false;\n / stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. /\n initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n syntax: '<length-percentage>';\n inherits: false;\n / stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. /\n initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n from { --ds-scroll-edge-fade-top: 0px; }\n to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n from { --ds-scroll-edge-fade-left: 0px; }\n to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/ Mask gradients use #000 / transparent as alpha stops — not theme colors. /\n/ stylelint-disable color-no-hex /\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n --ds-scroll-edge-fade-target-top: 0px;\n --ds-scroll-edge-fade-target-bottom: 0px;\n --ds-scroll-edge-fade-target-left: 0px;\n --ds-scroll-edge-fade-target-right: 0px;\n --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n --ds-scroll-edge-fade-block-mask: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-top),\n #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n transparent 100%\n );\n --ds-scroll-edge-fade-inline-mask: linear-gradient(\n to right,\n transparent 0,\n #000 var(--ds-scroll-edge-fade-left),\n #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n transparent 100%\n );\n\n / Intersecting the block and inline masks lets every edge compose correctly. /\n -webkit-mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n mask-image:\n var(--ds-scroll-edge-fade-block-mask),\n var(--ds-scroll-edge-fade-inline-mask);\n -webkit-mask-composite: source-in;\n mask-composite: intersect;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/ Manual per-edge state remains available when scroll state already lives in JS. /\n.scroll-edge-fade--top-at-edge {\n --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n .scroll-edge-fade--scroll-aware {\n animation-name:\n ds-scroll-edge-fade-reveal-top,\n ds-scroll-edge-fade-reveal-bottom,\n ds-scroll-edge-fade-reveal-left,\n ds-scroll-edge-fade-reveal-right;\n / stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. /\n animation-duration: 1ms;\n animation-timing-function: ease-in-out;\n animation-fill-mode: both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n animation-range:\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n 0 var(--ds-scroll-edge-fade-reveal-distance),\n calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .scroll-edge-fade--scroll-aware {\n animation: none;\n }\n }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/\n Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n /\n.scroll-edge-fade--block-window {\n --ds-scroll-edge-fade-window-start: 100%;\n --ds-scroll-edge-fade-window-end: 100%;\n\n -webkit-mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n mask-image: linear-gradient(\n to bottom,\n #000 0,\n #000 var(--ds-scroll-edge-fade-window-start),\n transparent var(--ds-scroll-edge-fade-window-end)\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\n\n/ stylelint-enable color-no-hex /\n","@import '../../styles/control-elevation.css';\n\n:host {\n --ds-message-scroller-anchor-offset: var(--dimension-space-800);\n\n display: block;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.message-scroller {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 0;\n}\n\n.message-scroller__viewport {\n width: 100%;\n height: 100%;\n min-height: 0;\n overflow: auto;\n overflow-anchor: none;\n overscroll-behavior: contain;\n box-sizing: border-box;\n}\n\n.message-scroller__viewport:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n outline-offset: calc(-1 var(--dimension-stroke-width-025));\n}\n\n.message-scroller__content {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-300);\n width: 100%;\n max-width: var(\n --ds-message-scroller-content-max-width,\n var(--dimension-panel-width-2xl)\n );\n min-height: 100%;\n margin-inline: auto;\n padding-block-start: var(--dimension-space-200);\n padding-inline: var(--dimension-space-200);\n padding-block-end: max(\n calc(var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px)),\n var(--ds-message-scroller-turn-clearance, 0px)\n );\n box-sizing: border-box;\n}\n\n.message-scroller__overlay {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--dimension-z-index-floating);\n}\n\n.message-scroller__overlay-stack {\n display: grid;\n width: 100%;\n}\n\n.message-scroller__interaction,\n.message-scroller__overlay-content {\n min-width: 0;\n}\n\n.message-scroller__control {\n position: absolute;\n bottom: calc(\n var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200)\n );\n left: 50%;\n z-index: var(--dimension-z-index-floating);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dimension-radius-half);\n background: var(--color-background-transparent);\n transform: translateX(-50%);\n -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n backdrop-filter: blur(var(--effect-blur-sm));\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n tag: 'ds-message-scroller',\n styleUrl: 'MessageScroller.css',\n styleUrls: ['../../utils/scroll-edge-fade.css'],\n scoped: true,\n})\nexport class MessageScroller {\n @Element() el!: HTMLElement;\n\n @Prop() busy: boolean = false;\n @Prop() autoFollow: boolean = true;\n @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n @Prop() messagesLabel: string = 'Messages';\n\n @Event() dsReachStart!: EventEmitter<void>;\n\n @State() private showScrollToLatest = false;\n\n private viewport?: HTMLElement;\n private content?: HTMLElement;\n private overlay?: HTMLElement;\n private transcriptSlot?: HTMLSlotElement;\n private scrollOverlayController?: ScrollOverlayController;\n private mutationObserver?: MutationObserver;\n private following = true;\n private followReleased = false;\n private releasePendingAtLiveEdge = false;\n private atStart = false;\n private programmatic = false;\n private programmaticTimer?: ReturnType<typeof setTimeout>;\n private transcriptChildren: HTMLElement[] = [];\n private knownTranscriptElements = new Set<HTMLElement>();\n private knownTurnAnchors = new Set<HTMLElement>();\n private firstChildViewportTop?: number;\n private activeTurnAnchor?: HTMLElement;\n private activeTurnAnchorViewportTop?: number;\n private turnClearance = 0;\n private prependReconciliation = 0;\n\n componentDidLoad() {\n this.transcriptChildren = this.getTranscriptChildren();\n this.transcriptChildren.forEach(element => {\n this.knownTranscriptElements.add(element);\n if (element.matches('ds-message[scroll-anchor]')) {\n this.knownTurnAnchors.add(element);\n }\n });\n this.rememberFirstChildTop();\n this.connectObservers();\n requestAnimationFrame(() => this.applyDefaultPosition());\n document.addEventListener('selectionchange', this.handleSelectionChange);\n }\n\n disconnectedCallback() {\n this.prependReconciliation += 1;\n this.scrollOverlayController?.disconnect();\n this.mutationObserver?.disconnect();\n if (this.programmaticTimer) clearTimeout(this.programmaticTimer);\n document.removeEventListener('selectionchange', this.handleSelectionChange);\n }\n\n @Method()\n async scrollToMessage(id: string): Promise<boolean> {\n const message = Array.from(\n this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n ).find(item => item.messageId === id \|\| item.getAttribute('message-id') === id);\n if (!message) return false;\n this.releasePendingAtLiveEdge = false;\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = true;\n message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n return true;\n }\n\n @Method()\n async scrollToStart() {\n this.releasePendingAtLiveEdge = false;\n this.scrollTo(0);\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = Boolean(\n this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n );\n }\n\n @Method()\n async scrollToEnd() {\n this.releasePendingAtLiveEdge = false;\n this.following = true;\n this.followReleased = false;\n this.showScrollToLatest = false;\n this.scrollTo(this.viewport?.scrollHeight ?? 0);\n }\n\n private motionBehavior(): ScrollBehavior {\n return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n }\n\n private scrollTo(top: number) {\n if (!this.viewport) return;\n this.programmatic = true;\n const behavior = this.motionBehavior();\n this.viewport.scrollTo({ top, behavior });\n if (this.programmaticTimer) clearTimeout(this.programmaticTimer);\n this.programmaticTimer = setTimeout(() => {\n this.programmatic = false;\n this.programmaticTimer = undefined;\n if (this.following) {\n this.viewport!.scrollTop = top;\n this.showScrollToLatest = false;\n }\n }, behavior === 'smooth' ? 600 : 0);\n }\n\n private connectObservers() {\n if (!this.viewport \|\| !this.content \|\| !this.overlay) return;\n this.scrollOverlayController = new ScrollOverlayController({\n host: this.el,\n viewport: this.viewport,\n content: this.content,\n overlay: this.overlay,\n overlayContentSelector: '.message-scroller__overlay-stack',\n onGeometryChange: () => this.handleContentGrowth(),\n });\n this.scrollOverlayController.connect();\n this.mutationObserver = new MutationObserver(() => {\n this.handleTranscriptChange();\n this.handleContentGrowth();\n });\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n }\n\n private handleContentGrowth() {\n if (!this.viewport) return;\n this.syncTurnClearance();\n const nextHeight = this.viewport.scrollHeight;\n if (this.autoFollow && this.following && !this.followReleased) {\n this.viewport.scrollTop = nextHeight;\n }\n if (this.releasePendingAtLiveEdge && !this.isAtLiveEdge()) {\n this.releasePendingAtLiveEdge = false;\n }\n this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n this.scrollOverlayController?.sync();\n }\n\n private rememberFirstChildTop() {\n if (!this.viewport) return;\n const first = this.getTranscriptChildren()[0];\n this.firstChildViewportTop = first\n ? first.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top\n : undefined;\n }\n\n private getTranscriptChildren(): HTMLElement[] {\n const assigned = this.transcriptSlot?.assignedElements() ?? [];\n const assignedTranscript = assigned.filter(\n (element): element is HTMLElement =>\n element instanceof HTMLElement &&\n (element.matches('ds-message') \|\| element.matches('ds-agent-response')),\n );\n const queriedTranscript = Array.from(\n this.el.querySelectorAll<HTMLElement>('ds-message, ds-agent-response'),\n ).filter(element => {\n if (\n element.closest(\n '.message-scroller__interaction, .message-scroller__overlay-content',\n )\n ) {\n return false;\n }\n if (element.matches('ds-agent-response')) return true;\n return !element.closest('ds-agent-response');\n });\n return queriedTranscript.length > assignedTranscript.length\n ? queriedTranscript\n : assignedTranscript;\n }\n\n private handleTranscriptChange = () => {\n const current = this.getTranscriptChildren();\n const previous = this.transcriptChildren;\n const hadKnownTranscript = this.knownTranscriptElements.size > 0;\n const previouslyKnown = new Set(this.knownTranscriptElements);\n const appendedAnchor = [...current].reverse().find((element, reverseIndex) => {\n if (\n !element.matches('ds-message[scroll-anchor]') \|\|\n this.knownTurnAnchors.has(element)\n ) {\n return false;\n }\n const index = current.length - reverseIndex - 1;\n return current\n .slice(index + 1)\n .every(next => !this.knownTranscriptElements.has(next));\n });\n current.forEach(element => {\n this.knownTranscriptElements.add(element);\n if (element.matches('ds-message[scroll-anchor]')) {\n this.knownTurnAnchors.add(element);\n }\n });\n if (!previous.length) {\n this.transcriptChildren = current;\n if (appendedAnchor && hadKnownTranscript) {\n requestAnimationFrame(() => this.positionNewTurn(appendedAnchor));\n }\n return;\n }\n\n const firstKnownIndex = current.findIndex(element => previouslyKnown.has(element));\n const newTranscript = current.filter(element => !previouslyKnown.has(element));\n const prepended =\n (current.length > previous.length && previous.every(\n (element, index) => current[current.length - previous.length + index] === element,\n )) \|\|\n (!appendedAnchor &&\n newTranscript.length > 0 &&\n firstKnownIndex > 0 &&\n newTranscript.every(element => current.indexOf(element) < firstKnownIndex));\n\n this.transcriptChildren = current;\n if (prepended) {\n if (this.viewport) {\n const preservedElement = this.activeTurnAnchor?.isConnected\n ? this.activeTurnAnchor\n : previous[0];\n const preservedTop = this.activeTurnAnchor?.isConnected\n ? this.activeTurnAnchorViewportTop\n : this.firstChildViewportTop;\n if (preservedElement && preservedTop !== undefined) {\n this.reconcilePrependPosition(preservedElement, preservedTop);\n this.schedulePrependReconciliation(\n preservedElement,\n preservedTop,\n newTranscript,\n );\n }\n }\n this.rememberFirstChildTop();\n this.rememberActiveTurnAnchorTop();\n this.scrollOverlayController?.sync();\n return;\n }\n if (appendedAnchor) {\n requestAnimationFrame(() => this.positionNewTurn(appendedAnchor));\n }\n };\n\n private reconcilePrependPosition(element: HTMLElement, viewportTop: number) {\n if (!this.viewport \|\| !element.isConnected) return;\n const nextTop =\n element.getBoundingClientRect().top - this.viewport.getBoundingClientRect().top;\n this.viewport.scrollTop += nextTop - viewportTop;\n }\n\n private schedulePrependReconciliation(\n element: HTMLElement,\n viewportTop: number,\n prepended: HTMLElement[],\n ) {\n const generation = ++this.prependReconciliation;\n // Prepended custom elements can gain height after their child-list mutation.\n // Reconcile against the original coordinate after their layouts settle.\n const pending = prepended\n .flatMap(item => [item, ...Array.from(item.querySelectorAll<HTMLElement>('*'))])\n .map(item => {\n const componentOnReady = (\n item as HTMLElement & { componentOnReady?: () => Promise<unknown> }\n ).componentOnReady;\n return componentOnReady ? componentOnReady.call(item).catch(() => undefined) : null;\n })\n .filter((promise): promise is Promise<unknown> => Boolean(promise));\n\n void Promise.all(pending).then(() => {\n requestAnimationFrame(() => {\n if (generation !== this.prependReconciliation) return;\n this.reconcilePrependPosition(element, viewportTop);\n requestAnimationFrame(() => {\n if (generation !== this.prependReconciliation) return;\n this.reconcilePrependPosition(element, viewportTop);\n this.rememberFirstChildTop();\n this.rememberActiveTurnAnchorTop();\n this.scrollOverlayController?.sync();\n });\n });\n });\n }\n\n private handleTranscriptSlotChange = () => this.handleTranscriptChange();\n\n private positionNewTurn(anchor: HTMLElement) {\n if (!this.viewport) return;\n this.activeTurnAnchor = anchor;\n this.syncTurnClearance();\n requestAnimationFrame(() => this.finishPositionNewTurn(anchor));\n }\n\n private finishPositionNewTurn(anchor: HTMLElement) {\n if (!this.viewport \|\| !anchor.isConnected) return;\n const viewportRect = this.viewport.getBoundingClientRect();\n const anchorTop =\n anchor.getBoundingClientRect().top - viewportRect.top + this.viewport.scrollTop;\n const customOffset = getComputedStyle(this.el)\n .getPropertyValue('--ds-message-scroller-anchor-offset')\n .trim();\n const offset = resolveCssLengthPx(customOffset, 'var(--dimension-space-800)');\n const max = Math.max(this.viewport.scrollHeight - this.viewport.clientHeight, 0);\n const target = Math.min(Math.max(anchorTop - offset, 0), max);\n this.following = max - target <= LIVE_EDGE_THRESHOLD;\n this.followReleased = !this.following;\n this.showScrollToLatest = !this.following;\n this.programmatic = true;\n this.viewport.scrollTop = target;\n requestAnimationFrame(() => {\n this.programmatic = false;\n this.following = this.isAtLiveEdge();\n this.followReleased = !this.following;\n this.showScrollToLatest = !this.following;\n this.rememberFirstChildTop();\n this.rememberActiveTurnAnchorTop();\n });\n this.scrollOverlayController?.sync();\n }\n\n private rememberActiveTurnAnchorTop() {\n if (!this.viewport \|\| !this.activeTurnAnchor?.isConnected) return;\n this.activeTurnAnchorViewportTop =\n this.activeTurnAnchor.getBoundingClientRect().top -\n this.viewport.getBoundingClientRect().top;\n }\n\n private syncTurnClearance() {\n if (!this.viewport \|\| !this.activeTurnAnchor?.isConnected) return;\n const children = this.getTranscriptChildren();\n const last = children[children.length - 1];\n if (!last) return;\n const anchorRect = this.activeTurnAnchor.getBoundingClientRect();\n const lastRect = last.getBoundingClientRect();\n const customOffset = getComputedStyle(this.el)\n .getPropertyValue('--ds-message-scroller-anchor-offset')\n .trim();\n const offset = resolveCssLengthPx(customOffset, 'var(--dimension-space-800)');\n const contentAfterAnchor = Math.max(lastRect.bottom - anchorRect.top, 0);\n const clearance = Math.max(\n Math.ceil(this.viewport.clientHeight - offset - contentAfterAnchor),\n 0,\n );\n if (clearance === this.turnClearance) return;\n this.turnClearance = clearance;\n this.el.style.setProperty('--ds-message-scroller-turn-clearance', `${clearance}px`);\n }\n\n private applyDefaultPosition() {\n if (!this.viewport) return;\n this.releasePendingAtLiveEdge = false;\n if (this.defaultPosition === 'start') {\n this.viewport.scrollTop = 0;\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n this.scrollOverlayController?.sync();\n return;\n }\n if (this.defaultPosition === 'last-anchor') {\n const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n const last = anchors.item(anchors.length - 1);\n if (last) {\n last.scrollIntoView({ block: 'start' });\n this.following = this.isAtLiveEdge();\n this.followReleased = !this.following;\n this.showScrollToLatest = !this.following;\n this.scrollOverlayController?.sync();\n return;\n }\n }\n this.viewport.scrollTop = this.viewport.scrollHeight;\n this.following = true;\n this.followReleased = false;\n this.showScrollToLatest = false;\n this.scrollOverlayController?.sync();\n }\n\n private isAtLiveEdge(): boolean {\n if (!this.viewport) return true;\n return (\n this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n LIVE_EDGE_THRESHOLD\n );\n }\n\n private handleScroll = () => {\n if (!this.viewport) return;\n this.scrollOverlayController?.sync();\n this.rememberFirstChildTop();\n this.rememberActiveTurnAnchorTop();\n if (this.programmatic) return;\n const atLiveEdge = this.isAtLiveEdge();\n if (this.releasePendingAtLiveEdge && atLiveEdge) {\n // A scroll event queued by the previous auto-follow can arrive after\n // reader input. Keep that stale event from restoring follow mode.\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = false;\n return;\n }\n this.releasePendingAtLiveEdge = false;\n this.following = atLiveEdge;\n this.followReleased = !this.following;\n this.showScrollToLatest = !this.following;\n const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n this.atStart = nextAtStart;\n };\n\n private releaseFollow = () => {\n this.prependReconciliation += 1;\n this.releasePendingAtLiveEdge = this.isAtLiveEdge();\n this.following = false;\n this.followReleased = true;\n this.showScrollToLatest = !this.releasePendingAtLiveEdge;\n };\n\n private handleSelectionChange = () => {\n const selection = document.getSelection();\n if (\n selection &&\n !selection.isCollapsed &&\n selection.anchorNode &&\n this.el.contains(selection.anchorNode)\n ) {\n this.releaseFollow();\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"message-scroller\">\n <div\n class=\"message-scroller__viewport\"\n ref={element => {\n this.viewport = element;\n }}\n role=\"region\"\n aria-label={this.messagesLabel}\n tabIndex={0}\n onScroll={this.handleScroll}\n onPointerDown={(event: PointerEvent) => {\n if (event.pointerType === 'touch') this.releaseFollow();\n }}\n onWheel={this.releaseFollow}\n onKeyDown={(event: KeyboardEvent) => {\n if (\n ['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(\n event.key,\n )\n ) {\n this.releaseFollow();\n }\n }}\n >\n <div\n class=\"message-scroller__content scroll-edge-fade--block-window\"\n ref={element => {\n this.content = element;\n }}\n role=\"log\"\n aria-live=\"polite\"\n aria-relevant=\"additions\"\n aria-busy={this.busy ? 'true' : undefined}\n >\n <slot\n ref={element => {\n this.transcriptSlot = element;\n }}\n onSlotchange={this.handleTranscriptSlotChange}\n />\n </div>\n </div>\n <div\n class=\"message-scroller__overlay\"\n ref={element => {\n this.overlay = element;\n }}\n >\n <div class=\"message-scroller__overlay-stack\">\n <div class=\"message-scroller__interaction\">\n <slot name=\"interaction\" />\n </div>\n <div class=\"message-scroller__overlay-content\">\n <slot name=\"overlay\" />\n </div>\n </div>\n </div>\n {this.showScrollToLatest ? (\n <div class=\"message-scroller__control ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\">\n <ds-tooltip label=\"Scroll to latest message\" side=\"top\" size=\"sm\">\n <ds-button-unfilled\n variant=\"icon\"\n icon=\"ChevronDown\"\n size=\"md\"\n rounded\n hasBorder={false}\n aria-label=\"Scroll to latest message\"\n onDsClick={() => void this.scrollToEnd()}\n />\n </ds-tooltip>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-message.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-D-kWb8cF.js";const t=o;const c=s;export{t as DsMessage,c as defineCustomElement};
+import{M as o,d as s}from"./p-DSIOINBK.js";const t=o;const p=s;export{t as DsMessage,p as defineCustomElement};
 //# sourceMappingURL=ds-message.js.map

package/dist/components/ds-mobile-bar-nav.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as s,d as o}from"./p-V2ywPfsR.js";const t=s;const p=o;export{t as DsMobileBarNav,p as defineCustomElement};
+import{M as o,d as s}from"./p-BVlfQ8xZ.js";const t=o;const p=s;export{t as DsMobileBarNav,p as defineCustomElement};
 //# sourceMappingURL=ds-mobile-bar-nav.js.map

package/dist/components/ds-mobile-header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-C2n8A8NA.js";const t=o;const n=s;export{t as DsMobileHeader,n as defineCustomElement};
+import{M as s,d as o}from"./p-DsJW5W3W.js";const t=s;const p=o;export{t as DsMobileHeader,p as defineCustomElement};
 //# sourceMappingURL=ds-mobile-header.js.map

package/dist/components/ds-mobile-section-switcher.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-Cyw9odJX.js";const t=o;const p=s;export{t as DsMobileSectionSwitcher,p as defineCustomElement};
+import{M as o,d as s}from"./p-BHz78C8h.js";const t=o;const p=s;export{t as DsMobileSectionSwitcher,p as defineCustomElement};
 //# sourceMappingURL=ds-mobile-section-switcher.js.map

package/dist/components/ds-mobile-sheet-nav.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as r}from"./p-D1Nqlrrl.js";const s=o;const t=r;export{s as DsMobileSheetNav,t as defineCustomElement};
+import{M as o,d as s}from"./p-Bn8NryHK.js";const r=o;const t=s;export{r as DsMobileSheetNav,t as defineCustomElement};
 //# sourceMappingURL=ds-mobile-sheet-nav.js.map

package/dist/components/ds-modal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-CjgnFGd6.js";const t=o;const n=s;export{t as DsModal,n as defineCustomElement};
+import{M as o,d as r}from"./p-rrFMAZkj.js";const s=o;const t=r;export{s as DsModal,t as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

package/dist/components/ds-pagination.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-CnWC0QvG.js";const t=o;const n=s;export{t as DsPagination,n as defineCustomElement};
+import{P as o,d as s}from"./p-__lNIImO.js";const t=o;const m=s;export{t as DsPagination,m as defineCustomElement};
 //# sourceMappingURL=ds-pagination.js.map

package/dist/components/ds-panel-nav.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-C5eosu67.js";const t=o;const p=s;export{t as DsPanelNav,p as defineCustomElement};
+import{P as o,d as s}from"./p-DZ55e3j9.js";const t=o;const p=s;export{t as DsPanelNav,p as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map

package/dist/components/ds-panel-sub-nav.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as n,H as e,c as s,h as o,a as i,t as a}from"./index.js";import{d as r}from"./p-DZFilC--.js";const t=()=>`.ds-control--lg.sc-ds-panel-sub-nav,.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav,.ds-control--sm.sc-ds-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav,.ds-control--xs.sc-ds-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--lg.sc-ds-panel-sub-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--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}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-sub-nav-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-panel-sub-nav-h,.ds-focus-ring.sc-ds-panel-sub-nav,.ds-focus-ring-inset.sc-ds-panel-sub-nav-h,.ds-focus-ring-inset.sc-ds-panel-sub-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-sub-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-sub-nav: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-panel-sub-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-sub-nav{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-panel-sub-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-sub-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-sub-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-sub-nav: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-panel-sub-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-panel-sub-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-sub-nav-h,.ds-interaction-fill.sc-ds-panel-sub-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--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-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before,.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-sub-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-sub-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h,.ds-interaction-fill--selected.sc-ds-panel-sub-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-panel-sub-nav-h>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill.sc-ds-panel-sub-nav>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill__content.sc-ds-panel-sub-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-sub-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-sub-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-sub-nav{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-sub-nav{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-panel-sub-nav-h{display:block;width:100%}.panel-sub-nav.sc-ds-panel-sub-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-sub-nav__item.sc-ds-panel-sub-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);width:100%;height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);cursor:default;text-align:left;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-primary)}.panel-sub-nav__item--on-medium.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-secondary)}.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-primary)}.panel-sub-nav__item--on-bold.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-secondary)}.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-primary)}.panel-sub-nav__item--on-strong.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-secondary)}.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-primary)}.panel-sub-nav__item--on-translucent.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-secondary)}.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-primary)}.panel-sub-nav__item--on-inverted.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-secondary)}.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-primary)}.panel-sub-nav__item--on-media.sc-ds-panel-sub-nav{color:var(--color-media-foreground-secondary)}.panel-sub-nav__item--on-media.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-media-foreground-primary)}.panel-sub-nav__item--on-always-dark.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-secondary)}.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-primary)}ds-text.panel-sub-nav__label.sc-ds-panel-sub-nav{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const d=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.value="";this.items=[];this.ariaLabel=null}get enabledItems(){return this.items.filter((n=>!n.isInactive))}get focusableId(){return this.enabledItems.some((n=>n.id===this.value))?this.value:this.enabledItems[0]?.id??""}selectItem(n){this.value=n;this.dsChange.emit(n);this.focusItem(n)}focusItem(n){const e=this.el.querySelector(`[data-panel-sub-nav-id="${n}"]`);e?.focus({preventScroll:true})}onValueChange(n,e){if(e===undefined||n===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;this.focusItem(this.enabledItems.some((e=>e.id===n))?n:this.focusableId)}))}findEnabled(n,e){const s=this.items.length;for(let o=1;o<=s;o++){const i=(n+e*o+s*o)%s;if(!this.items[i]?.isInactive)return i}return n}handleKeyDown(n){if(!this.enabledItems.length)return;const e=n.target?.closest("[data-panel-sub-nav-id]")?.dataset["panelSubNavId"];const s=this.items.findIndex((n=>n.id===e));const o=this.items.findIndex((n=>n.id===this.value&&!n.isInactive));const i=s>=0?s:o>=0?o:n.key==="ArrowUp"?0:-1;let a=null;if(n.key==="ArrowDown"){a=this.findEnabled(i,1)}else if(n.key==="ArrowUp"){a=this.findEnabled(i,-1)}else if(n.key==="Home"){a=this.items.findIndex((n=>!n.isInactive))}else if(n.key==="End"){const n=[...this.items].reverse().findIndex((n=>!n.isInactive));a=n<0?null:this.items.length-1-n}if(a===null||a<0)return;const r=this.items[a];if(!r||r.isInactive)return;n.preventDefault();this.selectItem(r.id)}render(){const n=this.focusableId;const e=this.background;return o(i,{key:"bed5c8da69eae95b774d1beaf69030f2ad0e721d"},o("div",{key:"25e920100e14e694fcb97697022e05e0af6d80bd",class:"panel-sub-nav",role:"tablist","aria-orientation":"vertical","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.items.map((s=>{const i=s.id===this.value;return o("button",{id:s.id,type:"button",role:"tab","data-panel-sub-nav-id":s.id,class:{"panel-sub-nav__item":true,"panel-sub-nav__item--selected":i,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!s.isInactive,"ds-interaction-fill--selected":i&&!s.isInactive,"ds-interaction-fill--on-faint":e==="faint","ds-interaction-fill--on-medium":e==="medium","ds-interaction-fill--on-bold":e==="bold","ds-interaction-fill--on-strong":e==="strong","ds-interaction-fill--on-translucent":e==="translucent","ds-interaction-fill--on-inverted":e==="inverted","ds-interaction-fill--on-media":e==="media","ds-interaction-fill--on-always-dark":e==="always-dark",[`panel-sub-nav__item--on-${e}`]:!!e,"ds-control-inactive":!!s.isInactive},"aria-selected":i?"true":"false","aria-controls":s.panelId,"aria-disabled":s.isInactive?"true":undefined,disabled:s.isInactive,tabIndex:s.id===n?0:-1,onClick:()=>!s.isInactive&&this.selectItem(s.id)},o("ds-text",{class:"panel-sub-nav__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",color:"inherit"},s.label))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return t()}},[2,"ds-panel-sub-nav",{value:[1025],items:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const n=["ds-panel-sub-nav","ds-text"];n.forEach((n=>{switch(n){case"ds-panel-sub-nav":if(!customElements.get(a(n))){customElements.define(a(n),d)}break;case"ds-text":if(!customElements.get(a(n))){r()}break}}))}c();const l=d;const v=c;export{l as DsPanelSubNav,v as defineCustomElement};
+import{p as n,H as e,c as s,h as o,a as i,t as a}from"./index.js";import{d as r}from"./p-BGXqFq2C.js";const t=()=>`.ds-control--lg.sc-ds-panel-sub-nav,.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav,.ds-control--sm.sc-ds-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav,.ds-control--xs.sc-ds-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--lg.sc-ds-panel-sub-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--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}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-sub-nav-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-panel-sub-nav-h,.ds-focus-ring.sc-ds-panel-sub-nav,.ds-focus-ring-inset.sc-ds-panel-sub-nav-h,.ds-focus-ring-inset.sc-ds-panel-sub-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-sub-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-sub-nav: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-panel-sub-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-sub-nav{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-panel-sub-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-sub-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-sub-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-sub-nav: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-panel-sub-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-panel-sub-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-sub-nav-h,.ds-interaction-fill.sc-ds-panel-sub-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--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-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before,.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-sub-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-sub-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h,.ds-interaction-fill--selected.sc-ds-panel-sub-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-panel-sub-nav-h>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill.sc-ds-panel-sub-nav>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill__content.sc-ds-panel-sub-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-sub-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-sub-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-sub-nav{--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-panel-sub-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-sub-nav{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-sub-nav{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-panel-sub-nav-h{display:block;width:100%}.panel-sub-nav.sc-ds-panel-sub-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-sub-nav__item.sc-ds-panel-sub-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);width:100%;height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);cursor:default;text-align:left;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-primary)}.panel-sub-nav__item--on-medium.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-secondary)}.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-primary)}.panel-sub-nav__item--on-bold.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-secondary)}.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-primary)}.panel-sub-nav__item--on-strong.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-secondary)}.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-primary)}.panel-sub-nav__item--on-translucent.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-secondary)}.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-primary)}.panel-sub-nav__item--on-inverted.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-secondary)}.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-primary)}.panel-sub-nav__item--on-media.sc-ds-panel-sub-nav{color:var(--color-media-foreground-secondary)}.panel-sub-nav__item--on-media.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-media-foreground-primary)}.panel-sub-nav__item--on-always-dark.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-secondary)}.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-primary)}ds-text.panel-sub-nav__label.sc-ds-panel-sub-nav{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const d=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=s(this,"dsChange",7);this.value="";this.items=[];this.ariaLabel=null}get enabledItems(){return this.items.filter((n=>!n.isInactive))}get focusableId(){return this.enabledItems.some((n=>n.id===this.value))?this.value:this.enabledItems[0]?.id??""}selectItem(n){this.value=n;this.dsChange.emit(n);this.focusItem(n)}focusItem(n){const e=this.el.querySelector(`[data-panel-sub-nav-id="${n}"]`);e?.focus({preventScroll:true})}onValueChange(n,e){if(e===undefined||n===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;this.focusItem(this.enabledItems.some((e=>e.id===n))?n:this.focusableId)}))}findEnabled(n,e){const s=this.items.length;for(let o=1;o<=s;o++){const i=(n+e*o+s*o)%s;if(!this.items[i]?.isInactive)return i}return n}handleKeyDown(n){if(!this.enabledItems.length)return;const e=n.target?.closest("[data-panel-sub-nav-id]")?.dataset["panelSubNavId"];const s=this.items.findIndex((n=>n.id===e));const o=this.items.findIndex((n=>n.id===this.value&&!n.isInactive));const i=s>=0?s:o>=0?o:n.key==="ArrowUp"?0:-1;let a=null;if(n.key==="ArrowDown"){a=this.findEnabled(i,1)}else if(n.key==="ArrowUp"){a=this.findEnabled(i,-1)}else if(n.key==="Home"){a=this.items.findIndex((n=>!n.isInactive))}else if(n.key==="End"){const n=[...this.items].reverse().findIndex((n=>!n.isInactive));a=n<0?null:this.items.length-1-n}if(a===null||a<0)return;const r=this.items[a];if(!r||r.isInactive)return;n.preventDefault();this.selectItem(r.id)}render(){const n=this.focusableId;const e=this.background;return o(i,{key:"bed5c8da69eae95b774d1beaf69030f2ad0e721d"},o("div",{key:"25e920100e14e694fcb97697022e05e0af6d80bd",class:"panel-sub-nav",role:"tablist","aria-orientation":"vertical","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.items.map((s=>{const i=s.id===this.value;return o("button",{id:s.id,type:"button",role:"tab","data-panel-sub-nav-id":s.id,class:{"panel-sub-nav__item":true,"panel-sub-nav__item--selected":i,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!s.isInactive,"ds-interaction-fill--selected":i&&!s.isInactive,"ds-interaction-fill--on-faint":e==="faint","ds-interaction-fill--on-medium":e==="medium","ds-interaction-fill--on-bold":e==="bold","ds-interaction-fill--on-strong":e==="strong","ds-interaction-fill--on-translucent":e==="translucent","ds-interaction-fill--on-inverted":e==="inverted","ds-interaction-fill--on-media":e==="media","ds-interaction-fill--on-always-dark":e==="always-dark",[`panel-sub-nav__item--on-${e}`]:!!e,"ds-control-inactive":!!s.isInactive},"aria-selected":i?"true":"false","aria-controls":s.panelId,"aria-disabled":s.isInactive?"true":undefined,disabled:s.isInactive,tabIndex:s.id===n?0:-1,onClick:()=>!s.isInactive&&this.selectItem(s.id)},o("ds-text",{class:"panel-sub-nav__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",color:"inherit"},s.label))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return t()}},[2,"ds-panel-sub-nav",{value:[1025],items:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const n=["ds-panel-sub-nav","ds-text"];n.forEach((n=>{switch(n){case"ds-panel-sub-nav":if(!customElements.get(a(n))){customElements.define(a(n),d)}break;case"ds-text":if(!customElements.get(a(n))){r()}break}}))}c();const l=d;const v=c;export{l as DsPanelSubNav,v as defineCustomElement};
 //# sourceMappingURL=ds-panel-sub-nav.js.map

package/dist/components/ds-panel-sub-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["panelSubNavCss","PanelSubNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","items","ariaLabel","enabledItems","filter","item","isInactive","focusableId","some","id","selectItem","dsChange","emit","focusItem","el","querySelector","focus","preventScroll","onValueChange","next","previous","undefined","requestAnimationFrame","active","document","activeElement","contains","findEnabled","from","step","length","offset","index","handleKeyDown","event","focusedId","target","closest","dataset","focusedIndex","findIndex","selectedIndex","currentIndex","key","nextIndex","reversedIndex","reverse","preventDefault","render","background","h","Host","class","role","ariaLabelledby","map","isSelected","type","panelId","disabled","tabIndex","onClick","as","variant","color","label"],"sources":["src/wc/components/PanelSubNav/PanelSubNav.css?tag=ds-panel-sub-nav&encapsulation=scoped","src/wc/components/PanelSubNav/PanelSubNav.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n width: 100%;\n}\n\n.panel-sub-nav {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n width: 100%;\n}\n\n.panel-sub-nav__item {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--ds-control-gap);\n width: 100%;\n height: var(--ds-control-height);\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: none;\n border-radius: var(--ds-control-radius);\n background: transparent;\n color: var(--color-foreground-secondary);\n cursor: default;\n text-align: left;\n -webkit-user-select: none;\n user-select: none;\n transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n flex: 1;\n min-width: 0;\n padding: 0 var(--ds-control-label-inset);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport type { PanelSubNavItem } from './panel-sub-nav-types';\n\nexport type PanelSubNavBackground =\n \| 'faint'\n \| 'medium'\n \| 'bold'\n \| 'strong'\n \| 'translucent'\n \| 'inverted'\n \| 'media'\n \| 'always-dark';\n\n@Component({\n tag: 'ds-panel-sub-nav',\n styleUrl: 'PanelSubNav.css',\n scoped: true,\n})\nexport class PanelSubNav {\n @Element() el!: HTMLElement;\n\n /** Required selected item id when enabled items exist. Keep synchronized with the visible panel. /\n @Prop({ mutable: true }) value: string = '';\n /\n Local panel tabs. Assign this array through the JavaScript property.\n * Replace the array reference when items change.\n /\n @Prop() items: PanelSubNavItem[] = [];\n /* Actual parent surface context. Omit on primary and secondary surfaces. /\n @Prop() background: PanelSubNavBackground \| undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string \| null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string \| undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private get enabledItems(): PanelSubNavItem[] {\n return this.items.filter(item => !item.isInactive);\n }\n\n private get focusableId(): string {\n return this.enabledItems.some(item => item.id === this.value)\n ? this.value\n : (this.enabledItems[0]?.id ?? '');\n }\n\n private selectItem(id: string) {\n this.value = id;\n this.dsChange.emit(id);\n this.focusItem(id);\n }\n\n private focusItem(id: string) {\n const item = this.el.querySelector(`[data-panel-sub-nav-id=\"${id}\"]`) as HTMLElement \| null;\n item?.focus({ preventScroll: true });\n }\n\n @Watch('value')\n onValueChange(next: string, previous: string \| undefined) {\n if (previous === undefined \|\| next === previous) return;\n\n requestAnimationFrame(() => {\n const active = document.activeElement as HTMLElement \| null;\n if (!active \|\| !this.el.contains(active)) return;\n this.focusItem(this.enabledItems.some(item => item.id === next) ? next : this.focusableId);\n });\n }\n\n private findEnabled(from: number, step: 1 \| -1): number {\n const length = this.items.length;\n for (let offset = 1; offset <= length; offset++) {\n const index = (from + step offset + length * offset) % length;\n if (!this.items[index]?.isInactive) return index;\n }\n return from;\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (!this.enabledItems.length) return;\n\n const focusedId = (event.target as Element \| null)\n ?.closest<HTMLElement>('[data-panel-sub-nav-id]')\n ?.dataset['panelSubNavId'];\n const focusedIndex = this.items.findIndex(item => item.id === focusedId);\n const selectedIndex = this.items.findIndex(item => item.id === this.value && !item.isInactive);\n const currentIndex = focusedIndex >= 0\n ? focusedIndex\n : selectedIndex >= 0\n ? selectedIndex\n : (event.key === 'ArrowUp' ? 0 : -1);\n let nextIndex: number \| null = null;\n\n if (event.key === 'ArrowDown') {\n nextIndex = this.findEnabled(currentIndex, 1);\n } else if (event.key === 'ArrowUp') {\n nextIndex = this.findEnabled(currentIndex, -1);\n } else if (event.key === 'Home') {\n nextIndex = this.items.findIndex(item => !item.isInactive);\n } else if (event.key === 'End') {\n const reversedIndex = [...this.items].reverse().findIndex(item => !item.isInactive);\n nextIndex = reversedIndex < 0 ? null : this.items.length - 1 - reversedIndex;\n }\n\n if (nextIndex === null \|\| nextIndex < 0) return;\n const next = this.items[nextIndex];\n if (!next \|\| next.isInactive) return;\n\n event.preventDefault();\n this.selectItem(next.id);\n }\n\n render() {\n const focusableId = this.focusableId;\n const background = this.background;\n\n return (\n <Host>\n <div\n class=\"panel-sub-nav\"\n role=\"tablist\"\n aria-orientation=\"vertical\"\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n >\n {this.items.map(item => {\n const isSelected = item.id === this.value;\n return (\n <button\n id={item.id}\n type=\"button\"\n role=\"tab\"\n data-panel-sub-nav-id={item.id}\n class={{\n 'panel-sub-nav__item': true,\n 'panel-sub-nav__item--selected': isSelected,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': isSelected && !item.isInactive,\n 'ds-interaction-fill--on-faint': background === 'faint',\n 'ds-interaction-fill--on-medium': background === 'medium',\n 'ds-interaction-fill--on-bold': background === 'bold',\n 'ds-interaction-fill--on-strong': background === 'strong',\n 'ds-interaction-fill--on-translucent': background === 'translucent',\n 'ds-interaction-fill--on-inverted': background === 'inverted',\n 'ds-interaction-fill--on-media': background === 'media',\n 'ds-interaction-fill--on-always-dark': background === 'always-dark',\n [`panel-sub-nav__item--on-${background}`]: !!background,\n 'ds-control-inactive': !!item.isInactive,\n }}\n aria-selected={isSelected ? 'true' : 'false'}\n aria-controls={item.panelId}\n aria-disabled={item.isInactive ? 'true' : undefined}\n disabled={item.isInactive}\n tabIndex={item.id === focusableId ? 0 : -1}\n onClick={() => !item.isInactive && this.selectItem(item.id)}\n >\n <ds-text\n class=\"panel-sub-nav__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n >\n {item.label}\n </ds-text>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["panelSubNavCss","PanelSubNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","items","ariaLabel","enabledItems","filter","item","isInactive","focusableId","some","id","selectItem","dsChange","emit","focusItem","el","querySelector","focus","preventScroll","onValueChange","next","previous","undefined","requestAnimationFrame","active","document","activeElement","contains","findEnabled","from","step","length","offset","index","handleKeyDown","event","focusedId","target","closest","dataset","focusedIndex","findIndex","selectedIndex","currentIndex","key","nextIndex","reversedIndex","reverse","preventDefault","render","background","h","Host","class","role","ariaLabelledby","map","isSelected","type","panelId","disabled","tabIndex","onClick","as","variant","color","label"],"sources":["src/wc/components/PanelSubNav/PanelSubNav.css?tag=ds-panel-sub-nav&encapsulation=scoped","src/wc/components/PanelSubNav/PanelSubNav.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n display: block;\n width: 100%;\n}\n\n.panel-sub-nav {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n width: 100%;\n}\n\n.panel-sub-nav__item {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: var(--ds-control-gap);\n width: 100%;\n height: var(--ds-control-height);\n padding: 0 var(--ds-control-padding-inline);\n box-sizing: border-box;\n border: none;\n border-radius: var(--ds-control-radius);\n background: transparent;\n color: var(--color-foreground-secondary);\n cursor: default;\n text-align: left;\n -webkit-user-select: none;\n user-select: none;\n transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n flex: 1;\n min-width: 0;\n padding: 0 var(--ds-control-label-inset);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport type { PanelSubNavItem } from './panel-sub-nav-types';\n\nexport type PanelSubNavBackground =\n \| 'faint'\n \| 'medium'\n \| 'bold'\n \| 'strong'\n \| 'translucent'\n \| 'inverted'\n \| 'media'\n \| 'always-dark';\n\n@Component({\n tag: 'ds-panel-sub-nav',\n styleUrl: 'PanelSubNav.css',\n scoped: true,\n})\nexport class PanelSubNav {\n @Element() el!: HTMLElement;\n\n /** Required selected item id when enabled items exist. Keep synchronized with the visible panel. /\n @Prop({ mutable: true }) value: string = '';\n /\n Local panel tabs. Assign this array through the JavaScript property.\n * Replace the array reference when items change.\n /\n @Prop() items: PanelSubNavItem[] = [];\n /* Actual parent surface context. Omit on primary and secondary surfaces. /\n @Prop() background: PanelSubNavBackground \| undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string \| null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string \| undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private get enabledItems(): PanelSubNavItem[] {\n return this.items.filter(item => !item.isInactive);\n }\n\n private get focusableId(): string {\n return this.enabledItems.some(item => item.id === this.value)\n ? this.value\n : (this.enabledItems[0]?.id ?? '');\n }\n\n private selectItem(id: string) {\n this.value = id;\n this.dsChange.emit(id);\n this.focusItem(id);\n }\n\n private focusItem(id: string) {\n const item = this.el.querySelector(`[data-panel-sub-nav-id=\"${id}\"]`) as HTMLElement \| null;\n item?.focus({ preventScroll: true });\n }\n\n @Watch('value')\n onValueChange(next: string, previous: string \| undefined) {\n if (previous === undefined \|\| next === previous) return;\n\n requestAnimationFrame(() => {\n const active = document.activeElement as HTMLElement \| null;\n if (!active \|\| !this.el.contains(active)) return;\n this.focusItem(this.enabledItems.some(item => item.id === next) ? next : this.focusableId);\n });\n }\n\n private findEnabled(from: number, step: 1 \| -1): number {\n const length = this.items.length;\n for (let offset = 1; offset <= length; offset++) {\n const index = (from + step offset + length * offset) % length;\n if (!this.items[index]?.isInactive) return index;\n }\n return from;\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (!this.enabledItems.length) return;\n\n const focusedId = (event.target as Element \| null)\n ?.closest<HTMLElement>('[data-panel-sub-nav-id]')\n ?.dataset['panelSubNavId'];\n const focusedIndex = this.items.findIndex(item => item.id === focusedId);\n const selectedIndex = this.items.findIndex(item => item.id === this.value && !item.isInactive);\n const currentIndex = focusedIndex >= 0\n ? focusedIndex\n : selectedIndex >= 0\n ? selectedIndex\n : (event.key === 'ArrowUp' ? 0 : -1);\n let nextIndex: number \| null = null;\n\n if (event.key === 'ArrowDown') {\n nextIndex = this.findEnabled(currentIndex, 1);\n } else if (event.key === 'ArrowUp') {\n nextIndex = this.findEnabled(currentIndex, -1);\n } else if (event.key === 'Home') {\n nextIndex = this.items.findIndex(item => !item.isInactive);\n } else if (event.key === 'End') {\n const reversedIndex = [...this.items].reverse().findIndex(item => !item.isInactive);\n nextIndex = reversedIndex < 0 ? null : this.items.length - 1 - reversedIndex;\n }\n\n if (nextIndex === null \|\| nextIndex < 0) return;\n const next = this.items[nextIndex];\n if (!next \|\| next.isInactive) return;\n\n event.preventDefault();\n this.selectItem(next.id);\n }\n\n render() {\n const focusableId = this.focusableId;\n const background = this.background;\n\n return (\n <Host>\n <div\n class=\"panel-sub-nav\"\n role=\"tablist\"\n aria-orientation=\"vertical\"\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n >\n {this.items.map(item => {\n const isSelected = item.id === this.value;\n return (\n <button\n id={item.id}\n type=\"button\"\n role=\"tab\"\n data-panel-sub-nav-id={item.id}\n class={{\n 'panel-sub-nav__item': true,\n 'panel-sub-nav__item--selected': isSelected,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': isSelected && !item.isInactive,\n 'ds-interaction-fill--on-faint': background === 'faint',\n 'ds-interaction-fill--on-medium': background === 'medium',\n 'ds-interaction-fill--on-bold': background === 'bold',\n 'ds-interaction-fill--on-strong': background === 'strong',\n 'ds-interaction-fill--on-translucent': background === 'translucent',\n 'ds-interaction-fill--on-inverted': background === 'inverted',\n 'ds-interaction-fill--on-media': background === 'media',\n 'ds-interaction-fill--on-always-dark': background === 'always-dark',\n [`panel-sub-nav__item--on-${background}`]: !!background,\n 'ds-control-inactive': !!item.isInactive,\n }}\n aria-selected={isSelected ? 'true' : 'false'}\n aria-controls={item.panelId}\n aria-disabled={item.isInactive ? 'true' : undefined}\n disabled={item.isInactive}\n tabIndex={item.id === focusableId ? 0 : -1}\n onClick={() => !item.isInactive && this.selectItem(item.id)}\n >\n <ds-text\n class=\"panel-sub-nav__label ds-interaction-fill__content\"\n as=\"span\"\n variant=\"text-body-medium\"\n color=\"inherit\"\n >\n {item.label}\n </ds-text>\n </button>\n );\n })}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-panel-tool-header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as s,d as o}from"./p-Dsn1RCS5.js";const t=s;const n=o;export{t as DsPanelToolHeader,n as defineCustomElement};
+import{P as s,d as o}from"./p-Be1sY58w.js";const t=s;const p=o;export{t as DsPanelToolHeader,p as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-header.js.map

package/dist/components/ds-panel-tool-search.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as a,a as o,t as r}from"./index.js";import{a as l}from"./p-C6DNhlES.js";import{d as i}from"./p-vWK5faWZ.js";import{d}from"./p-C7rzVotG.js";import{d as n}from"./p-BNkU9dcc.js";import{d as c}from"./p-BFfLvMZd.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as p}from"./p-DZFilC--.js";import{d as g}from"./p-BXPQmp7q.js";const m=()=>`.ds-control--lg.sc-ds-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--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}.ds-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-panel-tool-search{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-panel-tool-search:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-panel-tool-search>ds-icon.sc-ds-panel-tool-search{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-panel-tool-search .select-search__control.sc-ds-panel-tool-search .select-search__clear.sc-ds-panel-tool-search{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-cancel-button,.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-panel-tool-search-h,.ds-text--display-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-panel-tool-search-h,.ds-text--display-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-panel-tool-search-h,.ds-text--title-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-panel-tool-search-h,.ds-text--title-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-panel-tool-search-h,.ds-text--title-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-panel-tool-search-h,.ds-text--body-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-panel-tool-search-h,.ds-text--body-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-panel-tool-search-h,.ds-text--body-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-panel-tool-search-h,.ds-text--caption.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;width:100%;height:100%;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.select-search.sc-ds-panel-tool-search::after{display:none}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const y=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsFilterToggle=t(this,"dsFilterToggle");this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=e=>{this.value=e;this.dsChange.emit(e)}}componentDidRender(){const e=this.el.querySelector("input");if(e&&e.value!==this.value)e.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const e=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(e?.setFocus?.())}render(){return a(o,{key:"efc0fe16791bce8c4f9872a78ad832356613ab1f"},a("div",{key:"6ff7a40ab752f18bffbe9bff818f371a03aad62d",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(l,{key:"5bface48dcd6ad0c7aa60a552e6ce382a2e846c2",value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:e=>{e.stopPropagation()},onDsClick:e=>{e.stopPropagation();this.dsFilterToggle.emit(e.detail)}}))):null))}get el(){return this}static get style(){return m()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-search":if(!customElements.get(r(e))){customElements.define(r(e),y)}break;case"ds-badge":if(!customElements.get(r(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){d()}break;case"ds-divider":if(!customElements.get(r(e))){n()}break;case"ds-icon":if(!customElements.get(r(e))){c()}break;case"ds-loader":if(!customElements.get(r(e))){h()}break;case"ds-text":if(!customElements.get(r(e))){p()}break;case"ds-tooltip":if(!customElements.get(r(e))){g()}break}}))}v();const x=y;const f=v;export{x as DsPanelToolSearch,f as defineCustomElement};
+import{p as e,H as s,c as t,h as a,a as o,t as r}from"./index.js";import{a as l}from"./p-C6DNhlES.js";import{d as i}from"./p-a6qP60zb.js";import{d}from"./p-NzGRAPcF.js";import{d as c}from"./p-BNkU9dcc.js";import{d as n}from"./p-BFfLvMZd.js";import{d as h}from"./p-JPTkZ3Ji.js";import{d as p}from"./p-BGXqFq2C.js";import{d as g}from"./p-D4K9CE8a.js";const m=()=>`.ds-control--lg.sc-ds-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--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}.ds-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-panel-tool-search{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-panel-tool-search:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-panel-tool-search>ds-icon.sc-ds-panel-tool-search{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-panel-tool-search .select-search__control.sc-ds-panel-tool-search .select-search__clear.sc-ds-panel-tool-search{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-cancel-button,.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-panel-tool-search-h,.ds-text--display-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-panel-tool-search-h,.ds-text--display-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-panel-tool-search-h,.ds-text--title-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-panel-tool-search-h,.ds-text--title-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-panel-tool-search-h,.ds-text--title-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-panel-tool-search-h,.ds-text--body-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-panel-tool-search-h,.ds-text--body-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-panel-tool-search-h,.ds-text--body-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-panel-tool-search-h,.ds-text--caption.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;width:100%;height:100%;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.select-search.sc-ds-panel-tool-search::after{display:none}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const y=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.dsClear=t(this,"dsClear",7);this.dsFilterToggle=t(this,"dsFilterToggle",7);this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=e=>{this.value=e;this.dsChange.emit(e)}}componentDidRender(){const e=this.el.querySelector("input");if(e&&e.value!==this.value)e.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const e=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(e?.setFocus?.())}render(){return a(o,{key:"ed5c26d6f0c470ec5d63458a660260dbe4526156"},a("div",{key:"c2a8b91260b5c7b5aa56bf8cdd11731c9022cfde",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(l,{key:"9709caaa2f7357eb8c00c933cccde6fa44a234aa",value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:e=>{e.stopPropagation()},onDsClick:e=>{e.stopPropagation();this.dsFilterToggle.emit(e.detail)}}))):null))}get el(){return this}static get style(){return m()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-search":if(!customElements.get(r(e))){customElements.define(r(e),y)}break;case"ds-badge":if(!customElements.get(r(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){d()}break;case"ds-divider":if(!customElements.get(r(e))){c()}break;case"ds-icon":if(!customElements.get(r(e))){n()}break;case"ds-loader":if(!customElements.get(r(e))){h()}break;case"ds-text":if(!customElements.get(r(e))){p()}break;case"ds-tooltip":if(!customElements.get(r(e))){g()}break}}))}v();const x=y;const u=v;export{x as DsPanelToolSearch,u as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-search.js.map

package/dist/components/ds-panel-tool-search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["panelToolSearchCss","PanelToolSearch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","ariaLabel","isInactive","showFilter","filterAriaLabel","filterTriggerId","filterExpanded","filterActive","handleChange","dsChange","emit","componentDidRender","input","el","querySelector","setFocus","focus","focusFilterTrigger","trigger","render","h","Host","key","class","ChoiceSearch","controls","disabled","inputRef","undefined","clearLabel","onValueChange","onClear","dsClear","onKeyDown","orientation","length","label","side","size","id","variant","icon","haspopup","filterControls","expanded","isActive","activeFill","hasBorder","onDsChange","event","stopPropagation","onDsClick","dsFilterToggle","detail"],"sources":["src/wc/components/PanelToolSearch/PanelToolSearch.css?tag=ds-panel-tool-search&encapsulation=scoped","src/wc/components/PanelToolSearch/PanelToolSearch.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n@import '../../utils/typography.css';\n\n:host {\n display: block;\n flex: 0 0 var(--dimension-size-600);\n width: 100%;\n min-width: 0;\n height: var(--dimension-size-600);\n box-sizing: border-box;\n background: transparent;\n}\n\n.panel-tool-search {\n position: relative;\n width: 100%;\n height: 100%;\n background: transparent;\n}\n\n.panel-tool-search::after {\n content: '';\n position: absolute;\n inset: auto 0 0;\n height: var(--dimension-stroke-width-012);\n background-color: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.select-search {\n flex: 1 1 auto;\n width: auto;\n min-width: 0;\n height: var(--dimension-size-400);\n padding: 0;\n}\n\n.select-search::after {\n display: none;\n}\n\n.panel-tool-search__filter-group {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n flex: 0 0 auto;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n} from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n tag: 'ds-panel-tool-search',\n styleUrl: 'PanelToolSearch.css',\n scoped: true,\n})\nexport class PanelToolSearch {\n @Element() el!: HTMLElement;\n\n /** Current search query. /\n @Prop({ mutable: true }) value: string = '';\n /* Search guidance shown while the query is empty. /\n @Prop() placeholder: string = 'Search';\n /* Accessible name for the search field. /\n @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n /* Optional ID of the results region filtered by this search. /\n @Prop() controls: string \| undefined;\n /* Prevents search interaction while keeping the row visible. /\n @Prop() isInactive: boolean = false;\n /* Show the optional trailing filter-menu trigger. /\n @Prop() showFilter: boolean = false;\n /* Accessible name for the filter-menu trigger. /\n @Prop() filterAriaLabel: string = 'Filter';\n /* Stable id placed on the filter trigger for ds-menu anchoring. /\n @Prop() filterTriggerId: string = '';\n /* Id of the menu controlled by the filter trigger. /\n @Prop() filterControls: string \| undefined;\n /* Whether the controlled filter menu is open. /\n @Prop() filterExpanded: boolean = false;\n /* Promote the trigger foreground when one or more filters are applied. */\n @Prop() filterActive: boolean = false;\n\n @Event() dsChange!: EventEmitter<string>;\n @Event() dsClear!: EventEmitter<void>;\n @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n componentDidRender() {\n const input = this.el.querySelector('input');\n if (input && input.value !== this.value) input.value = this.value;\n }\n\n @Method()\n async setFocus() {\n this.el.querySelector('input')?.focus();\n }\n\n @Method()\n async focusFilterTrigger() {\n const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n \| (HTMLElement & { setFocus?: () => Promise<void> })\n \| null;\n await trigger?.setFocus?.();\n }\n\n private handleChange = (value: string) => {\n this.value = value;\n this.dsChange.emit(value);\n };\n\n render() {\n return (\n <Host>\n <div class=\"panel-tool-search ds-chrome-row ds-chrome-space--md\">\n <ChoiceSearch\n value={this.value}\n placeholder={this.placeholder}\n ariaLabel={this.ariaLabel}\n controls={this.controls}\n disabled={this.isInactive}\n inputRef={() => undefined}\n clearLabel=\"Clear\"\n onValueChange={this.handleChange}\n onClear={() => this.dsClear.emit()}\n onKeyDown={() => undefined}\n />\n {this.showFilter ? (\n <div class=\"panel-tool-search__filter-group\">\n <ds-divider\n class=\"panel-tool-search__divider\"\n orientation=\"vertical\"\n length=\"var(--dimension-size-200)\"\n />\n <ds-tooltip label={this.filterAriaLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n id={this.filterTriggerId \|\| undefined}\n class=\"panel-tool-search__filter\"\n variant=\"icon\"\n icon=\"Filters\"\n size=\"md\"\n aria-label={this.filterAriaLabel}\n haspopup=\"menu\"\n controls={this.filterControls}\n expanded={this.filterExpanded}\n isActive={this.filterActive}\n isInactive={this.isInactive}\n activeFill={false}\n hasBorder={false}\n onDsChange={(event: CustomEvent<boolean>) => {\n event.stopPropagation();\n }}\n onDsClick={(event: CustomEvent<MouseEvent>) => {\n event.stopPropagation();\n this.dsFilterToggle.emit(event.detail);\n }}\n />\n </ds-tooltip>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6VAAA,MAAMA,EAAqB,IAAM,63V,MCiBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,~~yJAS2BC,~~KAAAC,MAAgB,GAEjCD,KAAAE,YAAsB,SAEKF,KAAAG,UAAoB,SAI/CH,KAAAI,WAAsB,MAEtBJ,KAAAK,WAAsB,MAEtBL,KAAAM,gBAA0B,SAE1BN,KAAAO,gBAA0B,GAI1BP,KAAAQ,eAA0B,MAE1BR,KAAAS,aAAwB,MAwBxBT,KAAAU,aAAgBT,IACtBD,KAAKC,MAAQA,EACbD,KAAKW,SAASC,KAAKX,EAAM,CAwD5B,CA5EC,kBAAAY,GACE,MAAMC,EAAQd,KAAKe,GAAGC,cAAc,SACpC,GAAIF,GAASA,EAAMb,QAAUD,KAAKC,MAAOa,EAAMb,MAAQD,KAAKC,K,CAI9D,cAAMgB,GACJjB,KAAKe,GAAGC,cAAc,UAAUE,O,CAIlC,wBAAMC,GACJ,MAAMC,EAAUpB,KAAKe,GAAGC,cAAc,sDAGhCI,GAASH,a,CAQjB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uDACTH,EAACI,EAAY,CAAAF,IAAA,2CACXvB,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAClBC,UAAWH,KAAKG,UAChBwB,SAAU3B,KAAK2B,SACfC,SAAU5B,KAAKI,WACfyB,SAAU,IAAMC,UAChBC,WAAW,QACXC,cAAehC,KAAKU,aACpBuB,QAAS,IAAMjC,KAAKkC,QAAQtB,OAC5BuB,UAAW,IAAML,YAElB9B,KAAKK,WACJiB,EAAA,OAAKG,MAAM,mCACTH,EAAA,cACEG,MAAM,6BACNW,YAAY,WACZC,OAAO,8BAETf,EAAA,cAAYgB,MAAOtC,KAAKM,gBAAiBiC,KAAK,SAASC,KAAK,MAC1DlB,EAAA,sBACEmB,GAAIzC,KAAKO,iBAAmBuB,UAC5BL,MAAM,4BACNiB,QAAQ,OACRC,KAAK,UACLH,KAAK,KAAI,aACGxC,KAAKM,gBACjBsC,SAAS,OACTjB,SAAU3B,KAAK6C,eACfC,SAAU9C,KAAKQ,eACfuC,SAAU/C,KAAKS,aACfL,WAAYJ,KAAKI,WACjB4C,WAAY,MACZC,UAAW,MACXC,WAAaC,IACXA,EAAMC,iBAAiB,EAEzBC,UAAYF,IACVA,EAAMC,kBACNpD,KAAKsD,eAAe1C,KAAKuC,EAAMI,OAAO,MAK5C,M","ignoreList":[]}
1	+ {"version":3,"names":["panelToolSearchCss","PanelToolSearch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","ariaLabel","isInactive","showFilter","filterAriaLabel","filterTriggerId","filterExpanded","filterActive","handleChange","dsChange","emit","componentDidRender","input","el","querySelector","setFocus","focus","focusFilterTrigger","trigger","render","h","Host","key","class","ChoiceSearch","controls","disabled","inputRef","undefined","clearLabel","onValueChange","onClear","dsClear","onKeyDown","orientation","length","label","side","size","id","variant","icon","haspopup","filterControls","expanded","isActive","activeFill","hasBorder","onDsChange","event","stopPropagation","onDsClick","dsFilterToggle","detail"],"sources":["src/wc/components/PanelToolSearch/PanelToolSearch.css?tag=ds-panel-tool-search&encapsulation=scoped","src/wc/components/PanelToolSearch/PanelToolSearch.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n@import '../../utils/typography.css';\n\n:host {\n display: block;\n flex: 0 0 var(--dimension-size-600);\n width: 100%;\n min-width: 0;\n height: var(--dimension-size-600);\n box-sizing: border-box;\n background: transparent;\n}\n\n.panel-tool-search {\n position: relative;\n width: 100%;\n height: 100%;\n background: transparent;\n}\n\n.panel-tool-search::after {\n content: '';\n position: absolute;\n inset: auto 0 0;\n height: var(--dimension-stroke-width-012);\n background-color: var(--color-border-tertiary);\n pointer-events: none;\n}\n\n.select-search {\n flex: 1 1 auto;\n width: auto;\n min-width: 0;\n height: var(--dimension-size-400);\n padding: 0;\n}\n\n.select-search::after {\n display: none;\n}\n\n.panel-tool-search__filter-group {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n flex: 0 0 auto;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n} from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n tag: 'ds-panel-tool-search',\n styleUrl: 'PanelToolSearch.css',\n scoped: true,\n})\nexport class PanelToolSearch {\n @Element() el!: HTMLElement;\n\n /** Current search query. /\n @Prop({ mutable: true }) value: string = '';\n /* Search guidance shown while the query is empty. /\n @Prop() placeholder: string = 'Search';\n /* Accessible name for the search field. /\n @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n /* Optional ID of the results region filtered by this search. /\n @Prop() controls: string \| undefined;\n /* Prevents search interaction while keeping the row visible. /\n @Prop() isInactive: boolean = false;\n /* Show the optional trailing filter-menu trigger. /\n @Prop() showFilter: boolean = false;\n /* Accessible name for the filter-menu trigger. /\n @Prop() filterAriaLabel: string = 'Filter';\n /* Stable id placed on the filter trigger for ds-menu anchoring. /\n @Prop() filterTriggerId: string = '';\n /* Id of the menu controlled by the filter trigger. /\n @Prop() filterControls: string \| undefined;\n /* Whether the controlled filter menu is open. /\n @Prop() filterExpanded: boolean = false;\n /* Promote the trigger foreground when one or more filters are applied. */\n @Prop() filterActive: boolean = false;\n\n @Event() dsChange!: EventEmitter<string>;\n @Event() dsClear!: EventEmitter<void>;\n @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n componentDidRender() {\n const input = this.el.querySelector('input');\n if (input && input.value !== this.value) input.value = this.value;\n }\n\n @Method()\n async setFocus() {\n this.el.querySelector('input')?.focus();\n }\n\n @Method()\n async focusFilterTrigger() {\n const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n \| (HTMLElement & { setFocus?: () => Promise<void> })\n \| null;\n await trigger?.setFocus?.();\n }\n\n private handleChange = (value: string) => {\n this.value = value;\n this.dsChange.emit(value);\n };\n\n render() {\n return (\n <Host>\n <div class=\"panel-tool-search ds-chrome-row ds-chrome-space--md\">\n <ChoiceSearch\n value={this.value}\n placeholder={this.placeholder}\n ariaLabel={this.ariaLabel}\n controls={this.controls}\n disabled={this.isInactive}\n inputRef={() => undefined}\n clearLabel=\"Clear\"\n onValueChange={this.handleChange}\n onClear={() => this.dsClear.emit()}\n onKeyDown={() => undefined}\n />\n {this.showFilter ? (\n <div class=\"panel-tool-search__filter-group\">\n <ds-divider\n class=\"panel-tool-search__divider\"\n orientation=\"vertical\"\n length=\"var(--dimension-size-200)\"\n />\n <ds-tooltip label={this.filterAriaLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n id={this.filterTriggerId \|\| undefined}\n class=\"panel-tool-search__filter\"\n variant=\"icon\"\n icon=\"Filters\"\n size=\"md\"\n aria-label={this.filterAriaLabel}\n haspopup=\"menu\"\n controls={this.filterControls}\n expanded={this.filterExpanded}\n isActive={this.filterActive}\n isInactive={this.isInactive}\n activeFill={false}\n hasBorder={false}\n onDsChange={(event: CustomEvent<boolean>) => {\n event.stopPropagation();\n }}\n onDsClick={(event: CustomEvent<MouseEvent>) => {\n event.stopPropagation();\n this.dsFilterToggle.emit(event.detail);\n }}\n />\n </ds-tooltip>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6VAAA,MAAMA,EAAqB,IAAM,63V,MCiBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,+JAS2BC,KAAAC,MAAgB,GAEjCD,KAAAE,YAAsB,SAEKF,KAAAG,UAAoB,SAI/CH,KAAAI,WAAsB,MAEtBJ,KAAAK,WAAsB,MAEtBL,KAAAM,gBAA0B,SAE1BN,KAAAO,gBAA0B,GAI1BP,KAAAQ,eAA0B,MAE1BR,KAAAS,aAAwB,MAwBxBT,KAAAU,aAAgBT,IACtBD,KAAKC,MAAQA,EACbD,KAAKW,SAASC,KAAKX,EAAM,CAwD5B,CA5EC,kBAAAY,GACE,MAAMC,EAAQd,KAAKe,GAAGC,cAAc,SACpC,GAAIF,GAASA,EAAMb,QAAUD,KAAKC,MAAOa,EAAMb,MAAQD,KAAKC,K,CAI9D,cAAMgB,GACJjB,KAAKe,GAAGC,cAAc,UAAUE,O,CAIlC,wBAAMC,GACJ,MAAMC,EAAUpB,KAAKe,GAAGC,cAAc,sDAGhCI,GAASH,a,CAQjB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uDACTH,EAACI,EAAY,CAAAF,IAAA,2CACXvB,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAClBC,UAAWH,KAAKG,UAChBwB,SAAU3B,KAAK2B,SACfC,SAAU5B,KAAKI,WACfyB,SAAU,IAAMC,UAChBC,WAAW,QACXC,cAAehC,KAAKU,aACpBuB,QAAS,IAAMjC,KAAKkC,QAAQtB,OAC5BuB,UAAW,IAAML,YAElB9B,KAAKK,WACJiB,EAAA,OAAKG,MAAM,mCACTH,EAAA,cACEG,MAAM,6BACNW,YAAY,WACZC,OAAO,8BAETf,EAAA,cAAYgB,MAAOtC,KAAKM,gBAAiBiC,KAAK,SAASC,KAAK,MAC1DlB,EAAA,sBACEmB,GAAIzC,KAAKO,iBAAmBuB,UAC5BL,MAAM,4BACNiB,QAAQ,OACRC,KAAK,UACLH,KAAK,KAAI,aACGxC,KAAKM,gBACjBsC,SAAS,OACTjB,SAAU3B,KAAK6C,eACfC,SAAU9C,KAAKQ,eACfuC,SAAU/C,KAAKS,aACfL,WAAYJ,KAAKI,WACjB4C,WAAY,MACZC,UAAW,MACXC,WAAaC,IACXA,EAAMC,iBAAiB,EAEzBC,UAAYF,IACVA,EAAMC,kBACNpD,KAAKsD,eAAe1C,KAAKuC,EAAMI,OAAO,MAK5C,M","ignoreList":[]}

package/dist/components/ds-panel-tools.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-BzLnSwG9.js";const t=o;const n=s;export{t as DsPanelTools,n as defineCustomElement};
+import{P as o,d as s}from"./p-Bh67XbfB.js";const t=o;const p=s;export{t as DsPanelTools,p as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

package/dist/components/ds-paper-texture.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-B80NfEqc.js";const t=o;const c=s;export{t as DsPaperTexture,c as defineCustomElement};
+import{P as o,d as s}from"./p-C0X2zKbB.js";const t=o;const p=s;export{t as DsPaperTexture,p as defineCustomElement};
 //# sourceMappingURL=ds-paper-texture.js.map

package/dist/components/ds-radio.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{R as o,d as s}from"./p-BHjw0x3L.js";const t=o;const p=s;export{t as DsRadio,p as defineCustomElement};
+import{R as o,d as s}from"./p-DAqSoyd4.js";const t=o;const p=s;export{t as DsRadio,p as defineCustomElement};
 //# sourceMappingURL=ds-radio.js.map