@ds-mo/ui 9.2.0 → 9.2.1

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

@@ -1 +1 @@
-{"version":3,"names":["messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","atStart","programmatic","previousScrollHeight","handleScroll","viewport","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","requestAnimationFrame","applyDefaultPosition","addEventListener","disconnectedCallback","resizeObserver","disconnect","overlayResizeObserver","mutationObserver","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","find","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","matches","top","content","ResizeObserver","handleContentGrowth","observe","overlay","entries","blockSize","Math","ceil","contentRect","height","style","setProperty","MutationObserver","childList","subtree","characterData","nextHeight","delta","anchors","last","length","render","h","Host","key","class","ref","element","role","tabIndex","onScroll","onPointerDown","onKeyDown","event","includes","undefined","name","variant","icon","size","rounded","hasBorder","onDsClick"],"sources":["src/wc/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":[":host {\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  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-150);\n  width: 100%;\n  max-width: var(--dimension-panel-width-2xl);\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: calc(\n    var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 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__control {\n  position: absolute;\n  right: var(--dimension-space-100);\n  bottom: calc(var(--ds-message-scroller-overlay-block-size, 0px) + var(--dimension-space-100));\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  box-shadow: var(--effect-elevation-elevated-md);\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';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n  tag: 'ds-message-scroller',\n  styleUrl: 'MessageScroller.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 resizeObserver?: ResizeObserver;\n  private overlayResizeObserver?: ResizeObserver;\n  private mutationObserver?: MutationObserver;\n  private following = true;\n  private atStart = false;\n  private programmatic = false;\n  private previousScrollHeight = 0;\n\n  componentDidLoad() {\n    this.connectObservers();\n    requestAnimationFrame(() => this.applyDefaultPosition());\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.overlayResizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\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.following = false;\n    this.showScrollToLatest = true;\n    message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n    return true;\n  }\n\n  @Method()\n  async scrollToStart() {\n    this.scrollTo(0);\n    this.following = false;\n    this.showScrollToLatest = Boolean(\n      this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n    );\n  }\n\n  @Method()\n  async scrollToEnd() {\n    this.following = true;\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    this.viewport.scrollTo({ top, behavior: this.motionBehavior() });\n    requestAnimationFrame(() => {\n      this.programmatic = false;\n    });\n  }\n\n  private connectObservers() {\n    if (!this.viewport || !this.content) return;\n    this.previousScrollHeight = this.viewport.scrollHeight;\n    this.resizeObserver = new ResizeObserver(() => this.handleContentGrowth());\n    this.resizeObserver.observe(this.content);\n    if (this.overlay) {\n      this.overlayResizeObserver = new ResizeObserver(entries => {\n        const blockSize = Math.ceil(entries[0]?.contentRect.height ?? 0);\n        this.el.style.setProperty('--ds-message-scroller-overlay-block-size', `${blockSize}px`);\n        this.handleContentGrowth();\n      });\n      this.overlayResizeObserver.observe(this.overlay);\n    }\n    this.mutationObserver = new MutationObserver(() => this.handleContentGrowth());\n    this.mutationObserver.observe(this.content, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private handleContentGrowth() {\n    if (!this.viewport) return;\n    const nextHeight = this.viewport.scrollHeight;\n    const delta = nextHeight - this.previousScrollHeight;\n    if (delta > 0 && this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD && !this.following) {\n      this.viewport.scrollTop += delta;\n    } else if (this.autoFollow && this.following) {\n      this.viewport.scrollTop = nextHeight;\n    }\n    this.previousScrollHeight = nextHeight;\n    this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n  }\n\n  private applyDefaultPosition() {\n    if (!this.viewport) return;\n    if (this.defaultPosition === 'start') {\n      this.viewport.scrollTop = 0;\n      this.following = false;\n      this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\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.showScrollToLatest = !this.following;\n        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.showScrollToLatest = false;\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 || this.programmatic) return;\n    this.following = this.isAtLiveEdge();\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.following = false;\n    this.showScrollToLatest = !this.isAtLiveEdge();\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.following = false;\n      this.showScrollToLatest = !this.isAtLiveEdge();\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={this.releaseFollow}\n            onKeyDown={(event: KeyboardEvent) => {\n              if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) this.releaseFollow();\n            }}\n          >\n            <div\n              class=\"message-scroller__content\"\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            </div>\n          </div>\n          <div\n            class=\"message-scroller__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <slot name=\"overlay\" />\n          </div>\n          {this.showScrollToLatest ? (\n            <div class=\"message-scroller__control\">\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            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["scrollEdgeFadeCss","messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","atStart","programmatic","previousScrollHeight","overlayBlockSize","overlayContentBlockSize","handleScroll","viewport","syncContentFade","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","requestAnimationFrame","applyDefaultPosition","addEventListener","disconnectedCallback","resizeObserver","disconnect","overlayResizeObserver","mutationObserver","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","find","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","matches","top","content","ResizeObserver","handleContentGrowth","observe","overlay","entries","blockSize","Math","ceil","contentRect","height","style","setProperty","syncOverlayContentBlockSize","MutationObserver","childList","subtree","characterData","nextHeight","delta","fadeEnd","max","fadeStart","assigned","querySelector","visibleContent","firstElementChild","topInset","getBoundingClientRect","anchors","last","length","render","h","Host","key","class","ref","element","role","tabIndex","onScroll","onPointerDown","onKeyDown","event","includes","undefined","name","variant","icon","size","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",":host {\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  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(--dimension-panel-width-2xl);\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: calc(\n    var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 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__control {\n  position: absolute;\n  bottom: calc(\n    var(--ds-message-scroller-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  box-shadow: var(--effect-elevation-elevated-md);\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';\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 resizeObserver?: ResizeObserver;\n  private overlayResizeObserver?: ResizeObserver;\n  private mutationObserver?: MutationObserver;\n  private following = true;\n  private atStart = false;\n  private programmatic = false;\n  private previousScrollHeight = 0;\n  private overlayBlockSize = 0;\n  private overlayContentBlockSize = 0;\n\n  componentDidLoad() {\n    this.connectObservers();\n    requestAnimationFrame(() => this.applyDefaultPosition());\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.overlayResizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\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.following = false;\n    this.showScrollToLatest = true;\n    message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n    return true;\n  }\n\n  @Method()\n  async scrollToStart() {\n    this.scrollTo(0);\n    this.following = false;\n    this.showScrollToLatest = Boolean(\n      this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n    );\n  }\n\n  @Method()\n  async scrollToEnd() {\n    this.following = true;\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    this.viewport.scrollTo({ top, behavior: this.motionBehavior() });\n    requestAnimationFrame(() => {\n      this.programmatic = false;\n    });\n  }\n\n  private connectObservers() {\n    if (!this.viewport || !this.content) return;\n    this.previousScrollHeight = this.viewport.scrollHeight;\n    this.resizeObserver = new ResizeObserver(() => this.handleContentGrowth());\n    this.resizeObserver.observe(this.content);\n    this.resizeObserver.observe(this.viewport);\n    if (this.overlay) {\n      this.overlayResizeObserver = new ResizeObserver(entries => {\n        const blockSize = Math.ceil(entries[0]?.contentRect.height ?? 0);\n        this.overlayBlockSize = blockSize;\n        this.el.style.setProperty('--ds-message-scroller-overlay-block-size', `${blockSize}px`);\n        this.syncOverlayContentBlockSize();\n        this.handleContentGrowth();\n      });\n      this.overlayResizeObserver.observe(this.overlay);\n    }\n    this.mutationObserver = new MutationObserver(() => this.handleContentGrowth());\n    this.mutationObserver.observe(this.content, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private handleContentGrowth() {\n    if (!this.viewport) return;\n    const nextHeight = this.viewport.scrollHeight;\n    const delta = nextHeight - this.previousScrollHeight;\n    if (delta > 0 && this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD && !this.following) {\n      this.viewport.scrollTop += delta;\n    } else if (this.autoFollow && this.following) {\n      this.viewport.scrollTop = nextHeight;\n    }\n    this.previousScrollHeight = nextHeight;\n    this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n    this.syncContentFade();\n  }\n\n  private syncContentFade() {\n    if (!this.viewport || !this.content) return;\n    const fadeEnd = Math.max(this.viewport.scrollTop + this.viewport.clientHeight, 0);\n    const fadeStart = Math.max(fadeEnd - this.overlayContentBlockSize, 0);\n    this.content.style.setProperty('--ds-scroll-edge-fade-window-start', `${fadeStart}px`);\n    this.content.style.setProperty('--ds-scroll-edge-fade-window-end', `${fadeEnd}px`);\n  }\n\n  private syncOverlayContentBlockSize() {\n    if (!this.overlay) return;\n    const assigned = this.el.querySelector<HTMLElement>('[slot=\"overlay\"]');\n    if (!(assigned instanceof HTMLElement)) {\n      this.overlayContentBlockSize = this.overlayBlockSize;\n    } else {\n      const visibleContent =\n        assigned.firstElementChild instanceof HTMLElement ? assigned.firstElementChild : assigned;\n      const topInset = Math.max(\n        Math.ceil(visibleContent.getBoundingClientRect().top - this.overlay.getBoundingClientRect().top),\n        0\n      );\n      this.overlayContentBlockSize = Math.max(this.overlayBlockSize - topInset, 0);\n    }\n    this.el.style.setProperty(\n      '--ds-message-scroller-overlay-content-block-size',\n      `${this.overlayContentBlockSize}px`\n    );\n  }\n\n  private applyDefaultPosition() {\n    if (!this.viewport) return;\n    if (this.defaultPosition === 'start') {\n      this.viewport.scrollTop = 0;\n      this.following = false;\n      this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n      this.syncContentFade();\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.showScrollToLatest = !this.following;\n        this.syncContentFade();\n        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.syncContentFade();\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.syncContentFade();\n    if (this.programmatic) return;\n    this.following = this.isAtLiveEdge();\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.following = false;\n    this.showScrollToLatest = !this.isAtLiveEdge();\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.following = false;\n      this.showScrollToLatest = !this.isAtLiveEdge();\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={this.releaseFollow}\n            onKeyDown={(event: KeyboardEvent) => {\n              if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) this.releaseFollow();\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            </div>\n          </div>\n          <div\n            class=\"message-scroller__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <slot name=\"overlay\" />\n          </div>\n          {this.showScrollToLatest ? (\n            <div class=\"message-scroller__control\">\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            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iPAAA,MAAMA,EAAoB,IAAM,uhJCAhC,MAAMC,EAAqB,IAAM,wnDCajC,MAAMC,EAAsB,G,MAQfC,EAAeC,EAAA,MAAAD,UAAAE,EAN5B,WAAAC,CAAAC,G,qFASUC,KAAAC,KAAgB,MAChBD,KAAAE,WAAsB,KACtBF,KAAAG,gBAA2C,cAC3CH,KAAAI,cAAwB,WAIfJ,KAAAK,mBAAqB,MAQ9BL,KAAAM,UAAY,KACZN,KAAAO,QAAU,MACVP,KAAAQ,aAAe,MACfR,KAAAS,qBAAuB,EACvBT,KAAAU,iBAAmB,EACnBV,KAAAW,wBAA0B,EA4J1BX,KAAAY,aAAe,KACrB,IAAKZ,KAAKa,SAAU,OACpBb,KAAKc,kBACL,GAAId,KAAKQ,aAAc,OACvBR,KAAKM,UAAYN,KAAKe,eACtBf,KAAKK,oBAAsBL,KAAKM,UAChC,MAAMU,EAAchB,KAAKa,SAASI,WAAavB,EAC/C,GAAIsB,IAAgBhB,KAAKO,QAASP,KAAKkB,aAAaC,OACpDnB,KAAKO,QAAUS,CAAW,EAGpBhB,KAAAoB,cAAgB,KACtBpB,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKe,cAAc,EAGxCf,KAAAqB,sBAAwB,KAC9B,MAAMC,EAAYC,SAASC,eAC3B,GACEF,IACCA,EAAUG,aACXH,EAAUI,YACV1B,KAAK2B,GAAGC,SAASN,EAAUI,YAC3B,CACA1B,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKe,c,EA4DrC,CA/OC,gBAAAc,GACE7B,KAAK8B,mBACLC,uBAAsB,IAAM/B,KAAKgC,yBACjCT,SAASU,iBAAiB,kBAAmBjC,KAAKqB,sB,CAGpD,oBAAAa,GACElC,KAAKmC,gBAAgBC,aACrBpC,KAAKqC,uBAAuBD,aAC5BpC,KAAKsC,kBAAkBF,aACvBb,SAASgB,oBAAoB,kBAAmBvC,KAAKqB,sB,CAIvD,qBAAMmB,CAAgBC,GACpB,MAAMC,EAAUC,MAAMC,KACpB5C,KAAK2B,GAAGkB,iBAAuD,eAC/DC,MAAKC,GAAQA,EAAKC,YAAcP,GAAMM,EAAKE,aAAa,gBAAkBR,IAC5E,IAAKC,EAAS,OAAO,MACrB1C,KAAKM,UAAY,MACjBN,KAAKK,mBAAqB,KAC1BqC,EAAQQ,eAAe,CAAEC,MAAO,QAASC,SAAUpD,KAAKqD,mBACxD,OAAO,I,CAIT,mBAAMC,GACJtD,KAAKuD,SAAS,GACdvD,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBmD,QACxBxD,KAAKa,UAAYb,KAAKa,SAAS4C,aAAezD,KAAKa,SAAS6C,a,CAKhE,iBAAMC,GACJ3D,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKuD,SAASvD,KAAKa,UAAU4C,cAAgB,E,CAGvC,cAAAJ,GACN,OAAOO,WAAW,oCAAoCC,QAAU,OAAS,Q,CAGnE,QAAAN,CAASO,GACf,IAAK9D,KAAKa,SAAU,OACpBb,KAAKQ,aAAe,KACpBR,KAAKa,SAAS0C,SAAS,CAAEO,MAAKV,SAAUpD,KAAKqD,mBAC7CtB,uBAAsB,KACpB/B,KAAKQ,aAAe,KAAK,G,CAIrB,gBAAAsB,GACN,IAAK9B,KAAKa,WAAab,KAAK+D,QAAS,OACrC/D,KAAKS,qBAAuBT,KAAKa,SAAS4C,aAC1CzD,KAAKmC,eAAiB,IAAI6B,gBAAe,IAAMhE,KAAKiE,wBACpDjE,KAAKmC,eAAe+B,QAAQlE,KAAK+D,SACjC/D,KAAKmC,eAAe+B,QAAQlE,KAAKa,UACjC,GAAIb,KAAKmE,QAAS,CAChBnE,KAAKqC,sBAAwB,IAAI2B,gBAAeI,IAC9C,MAAMC,EAAYC,KAAKC,KAAKH,EAAQ,IAAII,YAAYC,QAAU,GAC9DzE,KAAKU,iBAAmB2D,EACxBrE,KAAK2B,GAAG+C,MAAMC,YAAY,2CAA4C,GAAGN,OACzErE,KAAK4E,8BACL5E,KAAKiE,qBAAqB,IAE5BjE,KAAKqC,sBAAsB6B,QAAQlE,KAAKmE,Q,CAE1CnE,KAAKsC,iBAAmB,IAAIuC,kBAAiB,IAAM7E,KAAKiE,wBACxDjE,KAAKsC,iBAAiB4B,QAAQlE,KAAK+D,QAAS,CAC1Ce,UAAW,KACXC,QAAS,KACTC,cAAe,M,CAIX,mBAAAf,GACN,IAAKjE,KAAKa,SAAU,OACpB,MAAMoE,EAAajF,KAAKa,SAAS4C,aACjC,MAAMyB,EAAQD,EAAajF,KAAKS,qBAChC,GAAIyE,EAAQ,GAAKlF,KAAKa,SAASI,WAAavB,IAAwBM,KAAKM,UAAW,CAClFN,KAAKa,SAASI,WAAaiE,C,MACtB,GAAIlF,KAAKE,YAAcF,KAAKM,UAAW,CAC5CN,KAAKa,SAASI,UAAYgE,C,CAE5BjF,KAAKS,qBAAuBwE,EAC5BjF,KAAKK,oBAAsBL,KAAKM,YAAcN,KAAKe,eACnDf,KAAKc,iB,CAGC,eAAAA,GACN,IAAKd,KAAKa,WAAab,KAAK+D,QAAS,OACrC,MAAMoB,EAAUb,KAAKc,IAAIpF,KAAKa,SAASI,UAAYjB,KAAKa,SAAS6C,aAAc,GAC/E,MAAM2B,EAAYf,KAAKc,IAAID,EAAUnF,KAAKW,wBAAyB,GACnEX,KAAK+D,QAAQW,MAAMC,YAAY,qCAAsC,GAAGU,OACxErF,KAAK+D,QAAQW,MAAMC,YAAY,mCAAoC,GAAGQ,M,CAGhE,2BAAAP,GACN,IAAK5E,KAAKmE,QAAS,OACnB,MAAMmB,EAAWtF,KAAK2B,GAAG4D,cAA2B,oBACpD,KAAMD,aAAoBzF,GAAc,CACtCG,KAAKW,wBAA0BX,KAAKU,gB,KAC/B,CACL,MAAM8E,EACJF,EAASG,6BAA6B5F,EAAcyF,EAASG,kBAAoBH,EACnF,MAAMI,EAAWpB,KAAKc,IACpBd,KAAKC,KAAKiB,EAAeG,wBAAwB7B,IAAM9D,KAAKmE,QAAQwB,wBAAwB7B,KAC5F,GAEF9D,KAAKW,wBAA0B2D,KAAKc,IAAIpF,KAAKU,iBAAmBgF,EAAU,E,CAE5E1F,KAAK2B,GAAG+C,MAAMC,YACZ,mDACA,GAAG3E,KAAKW,4B,CAIJ,oBAAAqB,GACN,IAAKhC,KAAKa,SAAU,OACpB,GAAIb,KAAKG,kBAAoB,QAAS,CACpCH,KAAKa,SAASI,UAAY,EAC1BjB,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBL,KAAKa,SAAS4C,aAAezD,KAAKa,SAAS6C,aACrE1D,KAAKc,kBACL,M,CAEF,GAAId,KAAKG,kBAAoB,cAAe,CAC1C,MAAMyF,EAAU5F,KAAK2B,GAAGkB,iBAA8B,6BACtD,MAAMgD,EAAOD,EAAQ7C,KAAK6C,EAAQE,OAAS,GAC3C,GAAID,EAAM,CACRA,EAAK3C,eAAe,CAAEC,MAAO,UAC7BnD,KAAKM,UAAYN,KAAKe,eACtBf,KAAKK,oBAAsBL,KAAKM,UAChCN,KAAKc,kBACL,M,EAGJd,KAAKa,SAASI,UAAYjB,KAAKa,SAAS4C,aACxCzD,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKc,iB,CAGC,YAAAC,GACN,IAAKf,KAAKa,SAAU,OAAO,KAC3B,OACEb,KAAKa,SAAS4C,aAAezD,KAAKa,SAAS6C,aAAe1D,KAAKa,SAASI,WACxEvB,C,CAiCJ,MAAAqG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,6BACNC,IAAKC,IACHrG,KAAKa,SAAWwF,CAAO,EAEzBC,KAAK,SAAQ,aACDtG,KAAKI,cACjBmG,SAAU,EACVC,SAAUxG,KAAKY,aACf6F,cAAezG,KAAKoB,cACpBsF,UAAYC,IACV,GAAI,CAAC,UAAW,SAAU,QAAQC,SAASD,EAAMT,KAAMlG,KAAKoB,eAAe,GAG7E4E,EAAA,OAAAE,IAAA,2CACEC,MAAM,2DACNC,IAAKC,IACHrG,KAAK+D,QAAUsC,CAAO,EAExBC,KAAK,MAAK,YACA,SAAQ,gBACJ,YAAW,YACdtG,KAAKC,KAAO,OAAS4G,WAEhCb,EAAA,QAAAE,IAAA,+CAGJF,EAAA,OAAAE,IAAA,2CACEC,MAAM,4BACNC,IAAKC,IACHrG,KAAKmE,QAAUkC,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMY,KAAK,aAEZ9G,KAAKK,mBACJ2F,EAAA,OAAKG,MAAM,6BACTH,EAAA,sBACEe,QAAQ,OACRC,KAAK,cACLC,KAAK,KACLC,QAAO,KACPC,UAAW,MAAK,aACL,2BACXC,UAAW,SAAWpH,KAAK2D,iBAG7B,M","ignoreList":[]}

package/dist/components/ds-message.js

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

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

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as a,h as t,a as s,t as i}from"./index.js";import{p as o,b as r}from"./p-BHtg1fh3.js";import{d}from"./p-CiwdnKKp.js";import{d as l}from"./p-CZMEhdlA.js";import{d as c}from"./p-BEQB8EnB.js";import{d as v}from"./p-Cpr3K41-.js";import{d as p}from"./p-BSOZXagj.js";import{d as f}from"./p-BO6C8abO.js";function h(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--scroll-aware":e.scrollAware===true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:t}=e;if(t===true){a["scroll-edge-fade--at-end"]=true}else if(t&&typeof t==="object"){for(const e of n){if(t[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const u={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const g="data-nav-style";function m(e){if(e==="dashboard"||e==="settings")return e;return undefined}function b(e,n,a){const t=m(n);if(t)return t;const s=typeof document!=="undefined"?document.documentElement.getAttribute(g):null;const i=m(s);if(i)return i;return e}function _(e,n){return e!==n}function x(e,n){return e===n||e.startsWith(`${n}/`)}function y(e,n){if(!e)return"";let a="";let t=0;for(const s of n){if(!s.href)continue;if(x(e,s.href)&&s.href.length>t){a=s.id;t=s.href.length}}return a}function w(e){return e.reduce(((e,n)=>e+n.items.length),0)}function k(e,n){return n?null:!e}function z(e){return e.split(",").map((e=>o(e.trim(),0)))}function C(e){const n=e.transitionProperty.split(",").map((e=>e.trim()));const a=z(e.transitionDuration);const t=z(e.transitionDelay);return n.reduce(((e,n,s)=>{if(n!=="all"&&n!=="width"&&n!=="min-width")return e;const i=a[s%a.length]??0;const o=t[s%t.length]??0;return Math.max(e,i+o,0)}),0)}function A(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function I(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function N(e,n){return w(e)===0&&w(A(n))>0}const E="ds-panel-nav-user-menu-anchor";const S=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask),     var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask),     var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation-name:ds-scroll-edge-fade-reveal-top,       ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left,       ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation:none}}}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const D=()=>`.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-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-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-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-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-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;--ds-control-radius:var(--dimension-radius-025)}.sc-ds-panel-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-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-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-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-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-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-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-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-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-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-panel-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-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-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-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-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-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-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-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);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-panel-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-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);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-panel-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-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-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-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)}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}ds-app-shell.sc-ds-panel-nav-h:not([gradient-preset='none']) .panel-nav.sc-ds-panel-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--breakpoint-locked.sc-ds-panel-nav .panel-nav__header-btn.sc-ds-panel-nav{cursor:default}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}ds-text.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;box-sizing:border-box;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--ds-control-label-inset)}.panel-nav__item-dot-box.sc-ds-panel-nav{position:absolute;z-index:2;right:var(--dimension-space-075, 6px);top:var(--dimension-space-075, 6px);display:flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);pointer-events:none}.panel-nav__item-dot.sc-ds-panel-nav{transition:transform var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{transform:translate(     calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),     calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))   )}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav ds-text.panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}ds-text.panel-nav__user-initial.sc-ds-panel-nav,ds-text.panel-nav__user-initial.ds-text--caption.sc-ds-panel-nav{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%);display:block;width:max-content;max-width:none;min-width:0;text-align:center;color:var(--_nav-fg-secondary);pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const R=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect");this.dsNavToggle=a(this,"dsNavToggle");this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd");this.dsNavFooterAction=a(this,"dsNavFooterAction");this.dsNavUserAction=a(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.dashboardNavigationLabel="Dashboard navigation";this.settingsNavigationLabel="Settings navigation";this.expandNavigationLabel="Expand navigation";this.collapseNavigationLabel="Collapse navigation";this.navigationItemsLabel="Navigation items";this.renderedStyle="dashboard";this.parsedGroups=[];this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.bodyScrollable=false;this.transitionFallbackTimer=null;this.initialRenderComplete=false;this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return I(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined||!this.initialRenderComplete)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined||!this.initialRenderComplete)return;if(e&&this.rovingIndex===0){this.rovingIndex=this.getFirstRovingIndex()}this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.effectiveBreakpoint()>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=A(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=b(this.navStyle,this.el.getAttribute("nav-style"));this.viewportNarrow=this.isViewportNarrow();if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();if(this.effectiveBreakpoint()>0)this.connectResizeObserver();this.connectScrollRegionObserver();this.updateBodyScrollable();this.initialRenderComplete=true}componentDidRender(){this.updateBodyScrollable()}disconnectedCallback(){this.disconnectResizeObserver();this.disconnectScrollRegionObserver();this.clearCollapseAnimationCompletion(this.el.querySelector(".panel-nav"));this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){if(this.isAnimating)return;this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const n=e?.getBoundingClientRect().width??0;this.clearCollapseAnimationCompletion(e);this.transitionCompletionHandler=n=>{if(n.propertyName==="width"||n.propertyName==="min-width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionCompletionHandler);e?.addEventListener("transitioncancel",this.transitionCompletionHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e);return}if(!e){this.finishCollapseAnimation(e);return}const t=C(getComputedStyle(e));if(t<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),t)}))}))}finishCollapseAnimation(e){const n=this.isAnimating;this.clearCollapseAnimationCompletion(e);if(!n)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"})}clearCollapseAnimationCompletion(e){if(this.transitionCompletionHandler){e?.removeEventListener("transitionend",this.transitionCompletionHandler);e?.removeEventListener("transitioncancel",this.transitionCompletionHandler);this.transitionCompletionHandler=undefined}if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}effectiveBreakpoint(){if(this.breakpoint>0)return this.breakpoint;const e=Number(this.el.getAttribute("breakpoint")??0);return Number.isFinite(e)&&e>0?e:0}isViewportNarrow(){const e=this.effectiveBreakpoint();return typeof window!=="undefined"&&e>0&&window.innerWidth<e}connectResizeObserver(){this.viewportNarrow=this.isViewportNarrow();this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=this.isViewportNarrow()}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}connectScrollRegionObserver(){this.disconnectScrollRegionObserver();if(!this.bodyEl||typeof ResizeObserver==="undefined")return;this.scrollRegionObserver=new ResizeObserver((()=>this.updateBodyScrollable()));this.scrollRegionObserver.observe(this.bodyEl)}disconnectScrollRegionObserver(){this.scrollRegionObserver?.disconnect();this.scrollRegionObserver=undefined}updateBodyScrollable(){const e=Boolean(this.bodyEl&&this.bodyEl.scrollHeight>this.bodyEl.clientHeight+1);if(e!==this.bodyScrollable)this.bodyScrollable=e}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=y(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(_(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(N(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){requestAnimationFrame(a)}};queueMicrotask(a)}applyToggle(e){if(this.viewportNarrow)return;this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFirstRovingIndex(){return this.viewportNarrow?1:0}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.viewportNarrow?null:this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-unfilled")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const n=this.getAllItems().length;const a=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=n){this.handleItemClick(a[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${E}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:u})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const t=this.getUserRovingIndex();const s=this.getFirstRovingIndex();let i;switch(e.key){case"ArrowDown":if(n===t)return;if(n===a)i=t;else i=n+1;break;case"ArrowUp":if(n===s)return;if(n===t)i=a;else if(n===a)i=a-1;else i=n-1;break;case"ArrowRight":if(n===a)i=t;else return;break;case"ArrowLeft":if(n===t)i=a;else return;break;case"Home":e.preventDefault();i=s;break;case"End":e.preventDefault();i=t;break;default:return}if(i===undefined||i===n)return;e.preventDefault();this.focusRovingAt(i)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=k(this.collapsed,this.viewportNarrow);if(e!==null)this.applyToggle(e)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:u})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(r()){this.showEdgeOverlay=true;return}this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const n=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",a);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=t;window.addEventListener("mousemove",a);window.addEventListener("mouseup",t)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return t("ds-tooltip",{label:n,side:"right",size:"sm"},t("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const s=e?this.accountLabel:"";const i=t("button",{type:"button",id:E,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":this.accountLabel,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},t("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},n),t("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{class:"panel-nav__footer-icon-expanded"},t("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{name:"Circle",size:"md",color:"inherit"}),t("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return t("ds-tooltip",{label:s,side:"right",size:"sm"},i)}renderNavItem(e,n,a){const s=e.id===this.effectiveActiveId;const i=n+1;const o=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit"})),t("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:s,color:"inherit"},e.label),e.dot&&t("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":s,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":s?"page":undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const d=this.routerMode==="anchor"&&e.href;const l=d?t("a",{...r,href:e.href},o):t("button",{...r,type:"button"},o);return t("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},l)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const d={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":i,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return t(s,{key:"29deb1193b9591cfcbc7426d27a9a53239b9d4d4",style:{display:"block",position:"relative"}},t("nav",{key:"e8529e3a16769165a286309983a0b8df2373c08e",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},t("div",{key:"e714bfb119caa8bdab18b7fbde5bafd50e747659",class:"panel-nav__header"},t("button",{key:"86d1cc0f685fae28e84b86d39224d427d23c23d5",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",disabled:this.viewportNarrow,tabIndex:!this.viewportNarrow&&this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":i?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":i?"false":"true"},t("span",{key:"7576a5b2558e876f6621193b65fe8d0bb21dcbc8",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"195b0c8da9e1cd80a3706dd931ea5b517e0242d8",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"35fd57ded36e3df334dae4f451a9a16fddc9d5d7",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"06af6989cf45832709f313d082ed4a876a07ea92",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"7f07ea2f259a8c8deb355685184d1216148371cc",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"fb28c508d312656b6edbf52938ce61b6e6f4f7e0",class:{"panel-nav__body":true,"ds-focus-ring":this.bodyScrollable,...h({edges:"bottom"})},ref:e=>{const n=e??undefined;if(n===this.bodyEl)return;this.bodyEl=n;this.connectScrollRegionObserver()},role:this.bodyScrollable?"region":undefined,"aria-label":this.bodyScrollable?this.navigationItemsLabel:undefined,tabIndex:this.bodyScrollable?0:undefined},(()=>{let e=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("ds-text",{class:"panel-nav__group-label ds-control--md",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},n.label),n.items.map((n=>this.renderNavItem(n,e++,i))))))})()),t("div",{key:"a8ba9dc33afd4a6697e8578eca2067df57cd548f",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(i,o,r))),!this.viewportNarrow&&t("div",{key:"c2e36c27cdd7fecdd1a9075e7e8e5a265393b20a",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return S()+D()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],dashboardNavigationLabel:[1,"dashboard-navigation-label"],settingsNavigationLabel:[1,"settings-navigation-label"],expandNavigationLabel:[1,"expand-navigation-label"],collapseNavigationLabel:[1,"collapse-navigation-label"],navigationItemsLabel:[1,"navigation-items-label"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],bodyScrollable:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);R.HOST_PROP_SYNC_BUDGET=8;function L(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),R)}break;case"ds-badge":if(!customElements.get(i(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){l()}break;case"ds-icon":if(!customElements.get(i(e))){c()}break;case"ds-loader":if(!customElements.get(i(e))){v()}break;case"ds-text":if(!customElements.get(i(e))){p()}break;case"ds-tooltip":if(!customElements.get(i(e))){f()}break}}))}L();const j=R;const B=L;export{j as DsPanelNav,B as defineCustomElement};
+import{p as e,H as n,c as a,h as t,a as s,t as i}from"./index.js";import{p as o,b as r}from"./p-BHtg1fh3.js";import{d}from"./p-CiwdnKKp.js";import{d as l}from"./p-Dst-OliP.js";import{d as c}from"./p-CBYuvZKM.js";import{d as v}from"./p-Cpr3K41-.js";import{d as p}from"./p-BSOZXagj.js";import{d as f}from"./p-BO6C8abO.js";function h(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--scroll-aware":e.scrollAware===true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:t}=e;if(t===true){a["scroll-edge-fade--at-end"]=true}else if(t&&typeof t==="object"){for(const e of n){if(t[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const u={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const g="data-nav-style";function m(e){if(e==="dashboard"||e==="settings")return e;return undefined}function b(e,n,a){const t=m(n);if(t)return t;const s=typeof document!=="undefined"?document.documentElement.getAttribute(g):null;const i=m(s);if(i)return i;return e}function _(e,n){return e!==n}function x(e,n){return e===n||e.startsWith(`${n}/`)}function y(e,n){if(!e)return"";let a="";let t=0;for(const s of n){if(!s.href)continue;if(x(e,s.href)&&s.href.length>t){a=s.id;t=s.href.length}}return a}function w(e){return e.reduce(((e,n)=>e+n.items.length),0)}function k(e,n){return n?null:!e}function z(e){return e.split(",").map((e=>o(e.trim(),0)))}function C(e){const n=e.transitionProperty.split(",").map((e=>e.trim()));const a=z(e.transitionDuration);const t=z(e.transitionDelay);return n.reduce(((e,n,s)=>{if(n!=="all"&&n!=="width"&&n!=="min-width")return e;const i=a[s%a.length]??0;const o=t[s%t.length]??0;return Math.max(e,i+o,0)}),0)}function A(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function I(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function N(e,n){return w(e)===0&&w(A(n))>0}const S="ds-panel-nav-user-menu-anchor";const D=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask),     var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask),     var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation-name:ds-scroll-edge-fade-reveal-top,       ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left,       ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation:none}}}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-panel-nav{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const E=()=>`.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-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-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-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-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-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;--ds-control-radius:var(--dimension-radius-025)}.sc-ds-panel-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-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-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-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-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-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-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-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-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-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-panel-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-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-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-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-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-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-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-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);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-panel-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-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);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-panel-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-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-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-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)}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}ds-app-shell.sc-ds-panel-nav-h:not([gradient-preset='none']) .panel-nav.sc-ds-panel-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--breakpoint-locked.sc-ds-panel-nav .panel-nav__header-btn.sc-ds-panel-nav{cursor:default}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}ds-text.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;box-sizing:border-box;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--ds-control-label-inset)}.panel-nav__item-dot-box.sc-ds-panel-nav{position:absolute;z-index:2;right:var(--dimension-space-075, 6px);top:var(--dimension-space-075, 6px);display:flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);pointer-events:none}.panel-nav__item-dot.sc-ds-panel-nav{transition:transform var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{transform:translate(     calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),     calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))   )}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav ds-text.panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav::after,.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--_nav-pressed)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}ds-text.panel-nav__user-initial.sc-ds-panel-nav,ds-text.panel-nav__user-initial.ds-text--caption.sc-ds-panel-nav{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%);display:block;width:max-content;max-width:none;min-width:0;text-align:center;color:inherit;pointer-events:none}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const R=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect");this.dsNavToggle=a(this,"dsNavToggle");this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd");this.dsNavFooterAction=a(this,"dsNavFooterAction");this.dsNavUserAction=a(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.accountMenuExpanded=false;this.dashboardNavigationLabel="Dashboard navigation";this.settingsNavigationLabel="Settings navigation";this.expandNavigationLabel="Expand navigation";this.collapseNavigationLabel="Collapse navigation";this.navigationItemsLabel="Navigation items";this.renderedStyle="dashboard";this.parsedGroups=[];this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.bodyScrollable=false;this.transitionFallbackTimer=null;this.initialRenderComplete=false;this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return I(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined||!this.initialRenderComplete)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined||!this.initialRenderComplete)return;if(e&&this.rovingIndex===0){this.rovingIndex=this.getFirstRovingIndex()}this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.effectiveBreakpoint()>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=A(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=b(this.navStyle,this.el.getAttribute("nav-style"));this.viewportNarrow=this.isViewportNarrow();if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();if(this.effectiveBreakpoint()>0)this.connectResizeObserver();this.connectScrollRegionObserver();this.updateBodyScrollable();this.initialRenderComplete=true}componentDidRender(){this.updateBodyScrollable()}disconnectedCallback(){this.disconnectResizeObserver();this.disconnectScrollRegionObserver();this.clearCollapseAnimationCompletion(this.el.querySelector(".panel-nav"));this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){if(this.isAnimating)return;this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const n=e?.getBoundingClientRect().width??0;this.clearCollapseAnimationCompletion(e);this.transitionCompletionHandler=n=>{if(n.propertyName==="width"||n.propertyName==="min-width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionCompletionHandler);e?.addEventListener("transitioncancel",this.transitionCompletionHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e);return}if(!e){this.finishCollapseAnimation(e);return}const t=C(getComputedStyle(e));if(t<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),t)}))}))}finishCollapseAnimation(e){const n=this.isAnimating;this.clearCollapseAnimationCompletion(e);if(!n)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"})}clearCollapseAnimationCompletion(e){if(this.transitionCompletionHandler){e?.removeEventListener("transitionend",this.transitionCompletionHandler);e?.removeEventListener("transitioncancel",this.transitionCompletionHandler);this.transitionCompletionHandler=undefined}if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}effectiveBreakpoint(){if(this.breakpoint>0)return this.breakpoint;const e=Number(this.el.getAttribute("breakpoint")??0);return Number.isFinite(e)&&e>0?e:0}isViewportNarrow(){const e=this.effectiveBreakpoint();return typeof window!=="undefined"&&e>0&&window.innerWidth<e}connectResizeObserver(){this.viewportNarrow=this.isViewportNarrow();this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=this.isViewportNarrow()}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}connectScrollRegionObserver(){this.disconnectScrollRegionObserver();if(!this.bodyEl||typeof ResizeObserver==="undefined")return;this.scrollRegionObserver=new ResizeObserver((()=>this.updateBodyScrollable()));this.scrollRegionObserver.observe(this.bodyEl)}disconnectScrollRegionObserver(){this.scrollRegionObserver?.disconnect();this.scrollRegionObserver=undefined}updateBodyScrollable(){const e=Boolean(this.bodyEl&&this.bodyEl.scrollHeight>this.bodyEl.clientHeight+1);if(e!==this.bodyScrollable)this.bodyScrollable=e}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=y(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(_(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(N(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){requestAnimationFrame(a)}};queueMicrotask(a)}applyToggle(e){if(this.viewportNarrow)return;this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFirstRovingIndex(){return this.viewportNarrow?1:0}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.viewportNarrow?null:this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-unfilled")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const n=this.getAllItems().length;const a=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=n){this.handleItemClick(a[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${S}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:u})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const t=this.getUserRovingIndex();const s=this.getFirstRovingIndex();let i;switch(e.key){case"ArrowDown":if(n===t)return;if(n===a)i=t;else i=n+1;break;case"ArrowUp":if(n===s)return;if(n===t)i=a;else if(n===a)i=a-1;else i=n-1;break;case"ArrowRight":if(n===a)i=t;else return;break;case"ArrowLeft":if(n===t)i=a;else return;break;case"Home":e.preventDefault();i=s;break;case"End":e.preventDefault();i=t;break;default:return}if(i===undefined||i===n)return;e.preventDefault();this.focusRovingAt(i)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=k(this.collapsed,this.viewportNarrow);if(e!==null)this.applyToggle(e)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:u})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(r()){this.showEdgeOverlay=true;return}this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const n=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",a);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=t;window.addEventListener("mousemove",a);window.addEventListener("mouseup",t)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return t("ds-tooltip",{label:n,side:"right",size:"sm"},t("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const s=e?this.accountLabel:"";const i=t("button",{type:"button",id:S,class:{"panel-nav__item":true,"panel-nav__item--active":this.accountMenuExpanded,"panel-nav__footer-user":true,"panel-nav__footer-user--menu-expanded":this.accountMenuExpanded,"ds-focus-ring-inset":true,"ds-interaction-fill":true},tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":this.accountLabel,"aria-haspopup":"menu","aria-expanded":String(this.accountMenuExpanded),onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},t("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},n),t("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{class:"panel-nav__footer-icon-expanded"},t("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{name:"Circle",size:"md",color:"inherit"}),t("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return t("ds-tooltip",{label:s,side:"right",size:"sm"},i)}renderNavItem(e,n,a){const s=e.id===this.effectiveActiveId;const i=n+1;const o=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit"})),t("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:s,color:"inherit"},e.label),e.dot&&t("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":s,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":s?"page":undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const d=this.routerMode==="anchor"&&e.href;const l=d?t("a",{...r,href:e.href},o):t("button",{...r,type:"button"},o);return t("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},l)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const d={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":i,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return t(s,{key:"48aa3a0ecce84be3c31f06a71a39d718b8daf3ec",style:{display:"block",position:"relative"}},t("nav",{key:"cd52c0374bf9aabc5a33c1d1c1ca2e720ac2e71d",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},t("div",{key:"882064f1a638e1a0dd73f96126c4ef40f0853793",class:"panel-nav__header"},t("button",{key:"1520ec00e57a8ee1cfb3c28466b7be18d6baf526",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",disabled:this.viewportNarrow,tabIndex:!this.viewportNarrow&&this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":i?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":i?"false":"true"},t("span",{key:"de7da566c98f3c8509bd03b7d8fb10801a603574",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"d8cff3a756139d14fbc690e134c9ca83cd292e80",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"50be37d6eea9b509960f0d5044fefb31c09d1c03",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"c9270da2e7d70983f3bc39c9d64c23a95c92fe8e",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"ae2ef4bcb9e04520e4f4d810679511f4855f0a91",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"47fbc41b1fb345a4f8db05f75a045449da4837d9",class:{"panel-nav__body":true,"ds-focus-ring":this.bodyScrollable,...h({edges:"bottom"})},ref:e=>{const n=e??undefined;if(n===this.bodyEl)return;this.bodyEl=n;this.connectScrollRegionObserver()},role:this.bodyScrollable?"region":undefined,"aria-label":this.bodyScrollable?this.navigationItemsLabel:undefined,tabIndex:this.bodyScrollable?0:undefined},(()=>{let e=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("ds-text",{class:"panel-nav__group-label ds-control--md",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},n.label),n.items.map((n=>this.renderNavItem(n,e++,i))))))})()),t("div",{key:"a68e34740311890f0609790e5dac46d76be80fbf",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(i,o,r))),!this.viewportNarrow&&t("div",{key:"938c328534295d428eec013778683b92da577da4",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return D()+E()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],accountMenuExpanded:[4,"account-menu-expanded"],dashboardNavigationLabel:[1,"dashboard-navigation-label"],settingsNavigationLabel:[1,"settings-navigation-label"],expandNavigationLabel:[1,"expand-navigation-label"],collapseNavigationLabel:[1,"collapse-navigation-label"],navigationItemsLabel:[1,"navigation-items-label"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],bodyScrollable:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);R.HOST_PROP_SYNC_BUDGET=8;function L(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),R)}break;case"ds-badge":if(!customElements.get(i(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){l()}break;case"ds-icon":if(!customElements.get(i(e))){c()}break;case"ds-loader":if(!customElements.get(i(e))){v()}break;case"ds-text":if(!customElements.get(i(e))){p()}break;case"ds-tooltip":if(!customElements.get(i(e))){f()}break}}))}L();const j=R;const O=L;export{j as DsPanelNav,O as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map