@ds-mo/ui 12.8.0 → 13.0.0

package/dist/components/p-CS6CHlHK.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isMenuSwatchPickerSection","section","variant","isMenuPickerSection","snapshotMenuSections","sections","map","options","option","swatchSection","items","item","menuCss","MENU_FOCUSABLE_SELECTOR","join","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","size","selectionMode","side","align","anchorAlignment","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","x","y","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","closeTimer","position","AnchoredPositionController","getAnchor","resolvedAnchor","getPopup","el","querySelector","measure","anchorEl","popup","anchorRect","getBoundingClientRect","sectionInsetPx","viewportPadPx","minWidth","style","choicePopupMinWidth","width","removeProperty","popupWidth","offsetWidth","popupFallbackWidthPx","popupHeight","offsetHeight","popupFallbackHeightPx","sideOffsetPx","alignOffsetPx","resolveChoicePopupAlignOffset","viewportWidth","window","innerWidth","viewportHeight","innerHeight","apply","onReady","liveUpdate","topLayer","lastRenderedSections","closingSections","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","cancelLivePositionUpdate","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","captureClosingSections","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","menuWidthXs","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","matches","hidePopover","dsAfterClose","emit","visibleSections","length","activeSections","anchor","anchorId","document","getElementById","anchorFocusTarget","focusAnchor","setFocus","focus","moveFocusAfterTab","backwards","candidates","Array","from","querySelectorAll","filter","element","closest","getClientRects","index","indexOf","compositeTabLeavesPopup","event","focusables","currentIndex","target","shiftKey","flatItems","flatMap","hasCompositeSections","some","cancel","scheduleLivePositionUpdate","scheduleLiveUpdate","schedule","calculatePosition","update","requestAnimationFrame","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","e","t","contains","close","addEventListener","observe","unobserve","removeEventListener","clearTimeout","restoreFocus","dsClose","handleKeyDown","key","preventDefault","enabled","i","cur","safe","stopPropagation","focusItem","idx","handleItemClick","dsSelect","handleSwatchSelect","value","dsSwatchSelect","render","h","Host","display","flatIdx","popupStyle","left","top","transform","Math","round","zIndex","visibility","menuWidth","popover","class","role","undefined","si","header","as","CONTROL_SUPPORTING_TEXT_VARIANT","emphasis","color","groupLabel","onDsChange","detail","isFocused","isSingleSelectionItem","showSwitch","type","isDestructive","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","CONTROL_TEXT_VARIANT","label","subtext","dot","hasRing","checked","presentation"],"sources":["src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/menu-sections.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["import type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  PANEL_TOOLS_HEADER_MENU_PLACEMENT,\n  type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  /** Show a supplemental brand notification dot. */\n  dot?: boolean;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  /** Render a compact switch indicator; the menu row owns interaction. */\n  showSwitch?: boolean;\n  switchValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nexport interface MenuSwatchPickerSection {\n  header?: string;\n  variant: 'swatch-picker';\n  value: string;\n  options?: SwatchPickerOption[];\n  sections?: SwatchPickerSection[];\n  groupLabel?: string;\n}\n\nexport type MenuSection =\n  | MenuItemsSection\n  | MenuSwatchPickerSection;\n\nexport function isMenuSwatchPickerSection(\n  section: MenuSection,\n): section is MenuSwatchPickerSection {\n  return 'variant' in section && section.variant === 'swatch-picker';\n}\n\nexport function isMenuPickerSection(\n  section: MenuSection,\n): section is MenuSwatchPickerSection {\n  return isMenuSwatchPickerSection(section);\n}\n\nexport type { SwatchPickerOption, SwatchPickerSection };\n","import type { MenuSection } from './menu-types';\nimport { isMenuSwatchPickerSection } from './menu-types';\n\n/** Preserve the exact menu context painted during exit motion. */\nexport function snapshotMenuSections(sections: readonly MenuSection[]): MenuSection[] {\n  return sections.map(section => {\n    if (isMenuSwatchPickerSection(section)) {\n      return {\n        ...section,\n        ...(section.options\n          ? { options: section.options.map(option => ({ ...option })) }\n          : {}),\n        ...(section.sections\n          ? {\n              sections: section.sections.map(swatchSection => ({\n                ...swatchSection,\n                options: swatchSection.options.map(option => ({ ...option })),\n              })),\n            }\n          : {}),\n      };\n    }\n    return { ...section, items: section.items.map(item => ({ ...item })) };\n  });\n}\n","@import '../../utils/choice-list.css';\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.menu-item--destructive .menu-item__label {\n  /* Beat ds-text color-* host classes for destructive rows. */\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  pointer-events: none;\n}\n\n/* ── Switch suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__switch {\n  flex-shrink: 0;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  choicePopupMinWidth,\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n  type ChoicePopupAnchorAlignment,\n  type ControlSize,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport type { MenuAlign, MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { snapshotMenuSections } from './menu-sections';\n\nexport type MenuSelectionMode = 'none' | 'single';\nexport type MenuSize = ControlSize;\nimport {\n  isMenuPickerSection,\n  isMenuSwatchPickerSection,\n} from './menu-types';\n\nconst MENU_FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  /** Choice-row density. */\n  @Prop() size: MenuSize = 'md';\n  /** Give ordinary rows mutually-exclusive menu semantics using isSelected. */\n  @Prop() selectionMode: MenuSelectionMode = 'none';\n  @Prop() sections: MenuSection[] = [];\n  /** Preferred side; placement flips to the opposite side when that offers a better fit. */\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  /** Align choice-row edges to the anchor by default; use `popup-frame` only for custom frame geometry. */\n  @Prop() anchorAlignment: ChoicePopupAnchorAlignment = 'choice-cell';\n  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n  /** Accessible name for the popup menu. */\n  @Prop() menuLabel: string = 'Menu';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  /** Emitted after the popup's exit motion is complete and its rendered content is removed. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a generic `swatch-picker` section option is chosen. */\n  @Event() dsSwatchSelect!: EventEmitter<string>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  /**\n   * Anchored placement. The choice-cell measurement stays here on purpose: the\n   * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu\n   * semantics, not shared geometry.\n   */\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.resolvedAnchor ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.menu-popup'),\n    measure: (anchorEl, popup) => {\n      if (!this.open) return null;\n\n      const anchorRect = anchorEl.getBoundingClientRect();\n      const sectionInsetPx = this.viewportPadPx;\n      if (!this.minWidth) {\n        if (\n          this.anchorAlignment === 'choice-cell' &&\n          (this.side === 'top' || this.side === 'bottom')\n        ) {\n          popup.style.minWidth = `max(var(--dimension-menu-width-xs), ${choicePopupMinWidth(\n            anchorRect.width,\n            sectionInsetPx\n          )}px)`;\n        } else {\n          popup.style.removeProperty('min-width');\n        }\n      }\n\n      return {\n        anchorRect,\n        popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n        side: this.side,\n        align: this.align,\n        sideOffsetPx: this.sideOffsetPx,\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: this.align,\n          alignOffsetPx: this.alignOffsetPx,\n          sectionInsetPx,\n          anchorAlignment: this.anchorAlignment,\n        }),\n        viewportPadPx: this.viewportPadPx,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    topLayer: true,\n  });\n  /** Last content actually painted while open; retained unchanged through exit motion. */\n  private lastRenderedSections: MenuSection[] = [];\n  private closingSections: MenuSection[] | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.cancelLivePositionUpdate();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.closingSections = null;\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.cancelPositionRetry();\n      this.captureClosingSections();\n      this.closing = true;\n      this.teardownListeners();\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  @Watch('anchor')\n  @Watch('anchorId')\n  onAnchorChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  @Watch('side')\n  @Watch('align')\n  @Watch('anchorAlignment')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  onPositionPropsChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get popupFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeightPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.lastRenderedSections = [];\n    this.closingSections = null;\n    this.dsAfterClose.emit();\n  }\n\n  private captureClosingSections() {\n    if (this.closingSections) return;\n    const visibleSections = this.lastRenderedSections.length\n      ? this.lastRenderedSections\n      : this.activeSections;\n    this.closingSections = snapshotMenuSections(visibleSections);\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get anchorFocusTarget(): HTMLElement | null {\n    const anchor = this.resolvedAnchor;\n    if (!anchor) return null;\n    if (anchor.matches(MENU_FOCUSABLE_SELECTOR)) return anchor;\n    return anchor.querySelector<HTMLElement>(MENU_FOCUSABLE_SELECTOR) ?? anchor;\n  }\n\n  private focusAnchor() {\n    const anchor = this.resolvedAnchor as\n      (HTMLElement & { setFocus?: () => Promise<void> | void }) | null;\n    if (anchor?.setFocus) {\n      anchor.setFocus();\n      return;\n    }\n    this.anchorFocusTarget?.focus();\n  }\n\n  private moveFocusAfterTab(backwards: boolean) {\n    const anchor = this.anchorFocusTarget;\n    if (!anchor) return;\n    if (backwards) {\n      anchor.focus();\n      return;\n    }\n\n    const candidates = Array.from(\n      document.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(\n      element =>\n        !element.closest('.menu-popup') &&\n        !element.closest('[inert]') &&\n        element.getClientRects().length > 0\n    );\n    const index = candidates.indexOf(anchor);\n    (candidates[index + 1] ?? anchor).focus();\n  }\n\n  private compositeTabLeavesPopup(event: KeyboardEvent): boolean {\n    const popup = this.el.querySelector<HTMLElement>('.menu-popup');\n    if (!popup) return true;\n    const focusables = Array.from(\n      popup.querySelectorAll<HTMLElement>(MENU_FOCUSABLE_SELECTOR)\n    ).filter(element => element.getClientRects().length > 0);\n    const currentIndex = focusables.indexOf(event.target as HTMLElement);\n    if (currentIndex < 0) return true;\n    return event.shiftKey ? currentIndex === 0 : currentIndex === focusables.length - 1;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuPickerSection(section) ? [] : section.items\n    );\n  }\n\n  /** Rich preference content is a non-modal dialog, not an ARIA action menu. */\n  private get hasCompositeSections(): boolean {\n    return this.activeSections.some(isMenuPickerSection);\n  }\n\n  private cancelPositionRetry() {\n    this.position.cancel();\n  }\n\n  private cancelLivePositionUpdate() {\n    this.position.cancel();\n  }\n\n  /** Reposition after the current scroll/layout frame without hiding the open popup. */\n  private scheduleLivePositionUpdate() {\n    this.position.scheduleLiveUpdate();\n  }\n\n  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n  private schedulePositionUpdate(onReady?: () => void) {\n    if (!this.open) return;\n    this.positionReady = false;\n    this.position.schedule(onReady);\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    return this.position.update();\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    if (this.hasCompositeSections) {\n      requestAnimationFrame(() => {\n        this.el.querySelector<HTMLElement>('.menu-popup [tabindex=\"0\"]')?.focus();\n      });\n      return;\n    }\n\n    const flat = this.flatItems;\n    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = selectedIdx >= 0 ? selectedIdx : firstEnabledIdx >= 0 ? firstEnabledIdx : 0;\n\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    this.position.observe();\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close(restoreFocus = true) {\n    this.captureClosingSections();\n    if (restoreFocus) this.focusAnchor();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      if (this.hasCompositeSections && !this.compositeTabLeavesPopup(e)) return;\n      e.preventDefault();\n      this.close(false);\n      this.moveFocusAfterTab(e.shiftKey);\n      return;\n    }\n\n    if (this.hasCompositeSections) return;\n\n    const flat = this.flatItems;\n    const enabled = flat\n      .map((it, i) => ({ it, i }))\n      .filter(({ it }) => !it.isInactive)\n      .map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault();\n        e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    // Consumers commonly change the item source while handling selection.\n    // Capture first so the exit animation never paints the next menu context.\n    this.captureClosingSections();\n    this.dsSelect.emit(item);\n  }\n\n  private handleSwatchSelect(value: string) {\n    this.dsSwatchSelect.emit(value);\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.closing\n      ? (this.closingSections ?? this.lastRenderedSections)\n      : this.activeSections;\n    const hasCompositeSections = sections.some(isMenuPickerSection);\n    if (!this.closing) {\n      this.lastRenderedSections = snapshotMenuSections(sections);\n      this.closingSections = null;\n    }\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          popover=\"manual\"\n          class={{\n            'menu-popup': true,\n            'menu-popup--closing': this.closing,\n            'ds-choice-popup': true,\n            'ds-choice-popup--closing': this.closing,\n          }}\n          style={popupStyle}\n          role={hasCompositeSections ? 'dialog' : 'menu'}\n          aria-label={this.menuLabel}\n          aria-orientation={hasCompositeSections ? undefined : 'vertical'}\n        >\n          <div class=\"ds-choice-list\">\n            {sections.map((section, si) => (\n              <div\n                key={si}\n                class={{\n                  'menu-section': true,\n                  'menu-section--divided': si < sections.length - 1,\n                  'menu-section--swatch-picker': isMenuPickerSection(section),\n                  'ds-choice-section': true,\n                  'ds-chrome-column': true,\n                  'ds-chrome-space--sm': true,\n                  'ds-choice-section--divided': si < sections.length - 1,\n                }}\n                role={section.header ? 'group' : undefined}\n                aria-label={section.header}\n              >\n                {section.header && (\n                  <ds-text\n                    class={`section-header ds-choice-section__header ds-control--${this.size}`}\n                    as=\"span\"\n                    variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                    emphasis\n                    color=\"primary\"\n                    aria-hidden=\"true\"\n                  >\n                    {section.header}\n                  </ds-text>\n                )}\n                {isMenuSwatchPickerSection(section) ? (\n                  <ds-swatch-picker\n                    value={section.value}\n                    groupLabel={section.groupLabel ?? section.header ?? 'Swatch options'}\n                    options={section.options ?? []}\n                    sections={section.sections ?? []}\n                    onDsChange={(e: CustomEvent<string>) => {\n                      e.stopPropagation();\n                      this.handleSwatchSelect(e.detail);\n                    }}\n                  />\n                ) : (\n                  section.items.map(item => {\n                    const idx = flatIdx++;\n                    const isFocused = this.focusedIndex === idx;\n                    const isSingleSelectionItem =\n                      !hasCompositeSections && this.selectionMode === 'single' && !item.showSwitch;\n                    return (\n                      <button\n                        key={idx}\n                        type=\"button\"\n                        class={{\n                          'menu-item': true,\n                          'ds-choice-item': true,\n                          'ds-control-frame': true,\n                          [`ds-control--${this.size}`]: true,\n                          'ds-focus-ring-inset': true,\n                          'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                          'ds-interaction-fill': !item.isInactive,\n                          'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n                          'menu-item--selected': !!item.isSelected,\n                          'ds-control-inactive': !!item.isInactive,\n                          'menu-item--destructive': !!item.isDestructive,\n                          'menu-item--focused': isFocused,\n                        }}\n                        role={\n                          hasCompositeSections\n                            ? undefined\n                            : item.showSwitch\n                              ? 'menuitemcheckbox'\n                              : isSingleSelectionItem\n                                ? 'menuitemradio'\n                                : 'menuitem'\n                        }\n                        aria-checked={\n                          !hasCompositeSections && item.showSwitch\n                            ? String(!!item.switchValue)\n                            : isSingleSelectionItem\n                              ? String(!!item.isSelected)\n                              : undefined\n                        }\n                        aria-pressed={\n                          hasCompositeSections\n                            ? String(item.showSwitch ? !!item.switchValue : !!item.isSelected)\n                            : undefined\n                        }\n                        aria-current={\n                          !hasCompositeSections &&\n                          !item.showSwitch &&\n                          !isSingleSelectionItem &&\n                          item.isSelected\n                            ? 'true'\n                            : undefined\n                        }\n                        disabled={item.isInactive}\n                        tabIndex={hasCompositeSections ? 0 : isFocused ? 0 : -1}\n                        onMouseDown={() => {\n                          this.focusRingVisible = false;\n                        }}\n                        onClick={() => this.handleItemClick(item)}\n                        onFocus={() => {\n                          this.focusedIndex = idx;\n                        }}\n                      >\n                        <div class=\"menu-item__content ds-choice-item__content ds-interaction-fill__content\">\n                          <ds-text\n                            class=\"menu-item__label ds-choice-item__label ds-control-label-box\"\n                            as=\"span\"\n                            variant={CONTROL_TEXT_VARIANT[this.size]}\n                            color={item.isSelected ? 'primary' : 'secondary'}\n                          >\n                            {item.label}\n                          </ds-text>\n                          {item.subtext && (\n                            <ds-text\n                              class=\"menu-item__subtext ds-choice-item__subtext ds-control-label-box\"\n                              as=\"span\"\n                              variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                              color=\"secondary\"\n                            >\n                              {item.subtext}\n                            </ds-text>\n                          )}\n                        </div>\n                        {item.dot && (\n                          <span\n                            class=\"menu-item__dot-box ds-interaction-fill__content\"\n                            aria-hidden=\"true\"\n                          >\n                            <ds-badge\n                              class=\"menu-item__dot\"\n                              variant=\"dot\"\n                              hasRing={false}\n                              label=\"\"\n                            />\n                          </span>\n                        )}\n                        {item.showSwitch && (\n                          <ds-switch\n                            class=\"menu-item__switch ds-interaction-fill__content\"\n                            size={this.size}\n                            checked={!!item.switchValue}\n                            presentation\n                          />\n                        )}\n                      </button>\n                    );\n                  })\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0bAyCM,SAAUA,EACdC,GAEA,MAAO,YAAaA,GAAWA,EAAQC,UAAY,eACrD,CAEM,SAAUC,EACdF,GAEA,OAAOD,EAA0BC,EACnC,CC/CM,SAAUG,EAAqBC,GACnC,OAAOA,EAASC,KAAIL,IAClB,GAAID,EAA0BC,GAAU,CACtC,MAAO,IACFA,KACCA,EAAQM,QACR,CAAEA,QAASN,EAAQM,QAAQD,KAAIE,IAAM,IAAUA,OAC/C,MACAP,EAAQI,SACR,CACEA,SAAUJ,EAAQI,SAASC,KAAIG,IAAa,IACvCA,EACHF,QAASE,EAAcF,QAAQD,KAAIE,IAAM,IAAUA,WAGvD,G,CAGR,MAAO,IAAKP,EAASS,MAAOT,EAAQS,MAAMJ,KAAIK,IAAI,IAAUA,MAAU,GAE1E,CCxBA,MAAMC,EAAU,IAAM,k1cCoCtB,MAAMC,EAA0B,CAC9B,UACA,yBACA,6CACA,yBACA,2BACA,mCACAC,KAAK,K,MAOMC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,kMAQ2BC,KAAAC,KAAgB,MACjCD,KAAAV,MAAwB,GAExBU,KAAAE,KAAiB,KAEjBF,KAAAG,cAAmC,OACnCH,KAAAf,SAA0B,GAE1Be,KAAAI,KAAiB,SACjBJ,KAAAK,MAAmB,QAEnBL,KAAAM,gBAA8C,cAE9CN,KAAAO,WAA8BC,EAAkBC,SAEhDT,KAAAU,YAA+B,EAQ/BV,KAAAW,oBAA+B,MAE/BX,KAAAY,UAAoB,OAEXZ,KAAAa,aAAwB,MACxBb,KAAAc,QAAmB,MACnBd,KAAAe,IAAgC,CAAEC,EAAG,EAAGC,EAAG,GAC3CjB,KAAAkB,aAAuB,EACvBlB,KAAAmB,cAAyB,MACzBnB,KAAAoB,iBAA4B,MASrCpB,KAAAqB,oBAAwD,KACxDrB,KAAAsB,WAAmD,KAM1CtB,KAAAuB,SAAW,IAAIC,EAA2B,CACzDC,UAAW,IAAMzB,KAAK0B,gBAAkB,KACxCC,SAAU,IAAM3B,KAAK4B,GAAGC,cAA2B,eACnDC,QAAS,CAACC,EAAUC,KAClB,IAAKhC,KAAKC,KAAM,OAAO,KAEvB,MAAMgC,EAAaF,EAASG,wBAC5B,MAAMC,EAAiBnC,KAAKoC,cAC5B,IAAKpC,KAAKqC,SAAU,CAClB,GACErC,KAAKM,kBAAoB,gBACxBN,KAAKI,OAAS,OAASJ,KAAKI,OAAS,UACtC,CACA4B,EAAMM,MAAMD,SAAW,uCAAuCE,EAC5DN,EAAWO,MACXL,O,KAEG,CACLH,EAAMM,MAAMG,eAAe,Y,EAI/B,MAAO,CACLR,aACAS,WAAYV,EAAMW,aAAe3C,KAAK4C,qBACtCC,YAAab,EAAMc,cAAgB9C,KAAK+C,sBACxC3C,KAAMJ,KAAKI,KACXC,MAAOL,KAAKK,MACZ2C,aAAchD,KAAKgD,aACnBC,cAAeC,EAA8B,CAC3C7C,MAAOL,KAAKK,MACZ4C,cAAejD,KAAKiD,cACpBd,iBACA7B,gBAAiBN,KAAKM,kBAExB8B,cAAepC,KAAKoC,cACpBe,cAAeC,OAAOC,WACtBC,eAAgBF,OAAOG,YACxB,EAEHC,MAAO,EAAGxC,IAAGC,QACXjB,KAAKe,IAAM,CAAEC,IAAGC,IAAG,EAErBwC,QAAS,KACPzD,KAAKmB,cAAgB,IAAI,EAE3BuC,WAAY,eACZC,SAAU,OAGJ3D,KAAA4D,qBAAsC,GACtC5D,KAAA6D,gBAAwC,IAygBjD,CAvgBC,gBAAAC,GACE,GAAI9D,KAAKC,KAAMD,KAAK+D,aAAa,K,CAGnC,oBAAAC,GACEhE,KAAKiE,sBACLjE,KAAKkE,2BACLlE,KAAKmE,mB,CAIP,YAAAJ,CAAaK,GACX,GAAIA,EAAQ,CACVpE,KAAKmE,oBACLnE,KAAK6D,gBAAkB,KACvB7D,KAAKa,aAAe,KACpBb,KAAKc,QAAU,MACfd,KAAKmB,cAAgB,MACrBnB,KAAKoB,iBAAmBpB,KAAKW,oBAC7BX,KAAKqE,iBACLrE,KAAKsE,wBAAuB,KAC1BtE,KAAKuE,kBAAkB,G,MAEpB,GAAIvE,KAAKa,aAAc,CAC5Bb,KAAKiE,sBACLjE,KAAKwE,yBACLxE,KAAKc,QAAU,KACfd,KAAKmE,oBACL,MAAMM,EAAmBzE,KAAKyE,iBAC9B,GAAIA,GAAoB,EAAG,CACzBzE,KAAK0E,cACL,M,CAEF1E,KAAKsB,WAAaqD,YAAW,KAC3B3E,KAAKsB,WAAa,KAClBtB,KAAK0E,aAAa,GACjBD,E,EAMP,cAAAG,GACE,GAAI5E,KAAKC,KAAMD,KAAKsE,wB,CAQtB,qBAAAO,GACE,GAAI7E,KAAKC,KAAMD,KAAKsE,wB,CAGtB,iBAAYlC,GACV,OAAO0C,EAAmBC,EAAetE,SAAUsE,EAAetE,S,CAGpE,gBAAYuC,GACV,OAAO8B,EAAmB9E,KAAKO,WAAYwE,EAAetE,S,CAG5D,iBAAYwC,GACV,OAAO6B,EAAmB9E,KAAKU,YAAa,E,CAG9C,wBAAYkC,GACV,OAAOkC,EAAmBC,EAAeC,YAAaD,EAAeC,Y,CAGvE,yBAAYjC,GACV,OAAO+B,EAAmBC,EAAeE,mBAAoBF,EAAeE,mB,CAG9E,oBAAYR,GACV,OAAOS,EAAoBH,EAAeI,aAAcJ,EAAeK,wB,CAGjE,WAAAV,GACN,MAAM1C,EAAQhC,KAAK4B,GAAGC,cAA2B,eACjD,GAAIG,GAAOqD,QAAQ,iBAAkBrD,EAAMsD,cAC3CtF,KAAKa,aAAe,MACpBb,KAAKc,QAAU,MACfd,KAAK4D,qBAAuB,GAC5B5D,KAAK6D,gBAAkB,KACvB7D,KAAKuF,aAAaC,M,CAGZ,sBAAAhB,GACN,GAAIxE,KAAK6D,gBAAiB,OAC1B,MAAM4B,EAAkBzF,KAAK4D,qBAAqB8B,OAC9C1F,KAAK4D,qBACL5D,KAAK2F,eACT3F,KAAK6D,gBAAkB7E,EAAqByG,E,CAG9C,kBAAY/D,GACV,GAAI1B,KAAK4F,OAAQ,OAAO5F,KAAK4F,OAC7B,GAAI5F,KAAK6F,SAAU,OAAOC,SAASC,eAAe/F,KAAK6F,UACvD,OAAO,I,CAGT,qBAAYG,GACV,MAAMJ,EAAS5F,KAAK0B,eACpB,IAAKkE,EAAQ,OAAO,KACpB,GAAIA,EAAOP,QAAQ5F,GAA0B,OAAOmG,EACpD,OAAOA,EAAO/D,cAA2BpC,IAA4BmG,C,CAG/D,WAAAK,GACN,MAAML,EAAS5F,KAAK0B,eAEpB,GAAIkE,GAAQM,SAAU,CACpBN,EAAOM,WACP,M,CAEFlG,KAAKgG,mBAAmBG,O,CAGlB,iBAAAC,CAAkBC,GACxB,MAAMT,EAAS5F,KAAKgG,kBACpB,IAAKJ,EAAQ,OACb,GAAIS,EAAW,CACbT,EAAOO,QACP,M,CAGF,MAAMG,EAAaC,MAAMC,KACvBV,SAASW,iBAA8BhH,IACvCiH,QACAC,IACGA,EAAQC,QAAQ,iBAChBD,EAAQC,QAAQ,YACjBD,EAAQE,iBAAiBnB,OAAS,IAEtC,MAAMoB,EAAQR,EAAWS,QAAQnB,IAChCU,EAAWQ,EAAQ,IAAMlB,GAAQO,O,CAG5B,uBAAAa,CAAwBC,GAC9B,MAAMjF,EAAQhC,KAAK4B,GAAGC,cAA2B,eACjD,IAAKG,EAAO,OAAO,KACnB,MAAMkF,EAAaX,MAAMC,KACvBxE,EAAMyE,iBAA8BhH,IACpCiH,QAAOC,GAAWA,EAAQE,iBAAiBnB,OAAS,IACtD,MAAMyB,EAAeD,EAAWH,QAAQE,EAAMG,QAC9C,GAAID,EAAe,EAAG,OAAO,KAC7B,OAAOF,EAAMI,SAAWF,IAAiB,EAAIA,IAAiBD,EAAWxB,OAAS,C,CAGpF,kBAAYC,GACV,GAAI3F,KAAKf,SAASyG,OAAS,EAAG,OAAO1F,KAAKf,SAC1C,GAAIe,KAAKV,MAAMoG,OAAS,EAAG,MAAO,CAAC,CAAEpG,MAAOU,KAAKV,QACjD,MAAO,E,CAGT,aAAYgI,GACV,OAAOtH,KAAK2F,eAAe4B,SAAQ1I,GACjCE,EAAoBF,GAAW,GAAKA,EAAQS,O,CAKhD,wBAAYkI,GACV,OAAOxH,KAAK2F,eAAe8B,KAAK1I,E,CAG1B,mBAAAkF,GACNjE,KAAKuB,SAASmG,Q,CAGR,wBAAAxD,GACNlE,KAAKuB,SAASmG,Q,CAIR,0BAAAC,GACN3H,KAAKuB,SAASqG,oB,CAIR,sBAAAtD,CAAuBb,GAC7B,IAAKzD,KAAKC,KAAM,OAChBD,KAAKmB,cAAgB,MACrBnB,KAAKuB,SAASsG,SAASpE,E,CAIjB,iBAAAqE,GACN,OAAO9H,KAAKuB,SAASwG,Q,CAIf,gBAAAxD,GACN,GAAIvE,KAAKwH,qBAAsB,CAC7BQ,uBAAsB,KACpBhI,KAAK4B,GAAGC,cAA2B,+BAA+BsE,OAAO,IAE3E,M,CAGF,MAAM8B,EAAOjI,KAAKsH,UAClB,MAAMY,EAAcD,EAAKE,WAAUC,GAAMA,EAAGC,aAAeD,EAAGE,aAC9D,MAAMC,EAAkBN,EAAKE,WAAUC,IAAOA,EAAGE,aACjDtI,KAAKkB,aAAegH,GAAe,EAAIA,EAAcK,GAAmB,EAAIA,EAAkB,EAE9FP,uBAAsB,KACpB,MAAMQ,EAAOxI,KAAK4B,GAAG6E,iBAA8B,cACnD+B,EAAKxI,KAAKkB,eAAeiF,OAAO,G,CAI5B,cAAA9B,GACNrE,KAAKqB,oBAAuBoH,IAC1B,MAAMC,EAAID,EAAErB,OACZ,MAAMpF,EAAQhC,KAAK4B,GAAGC,cAAc,eACpC,MAAME,EAAW/B,KAAK0B,eACtB,GAAIM,GAAO2G,SAASD,IAAM3G,GAAU4G,SAASD,GAAI,OACjD1I,KAAK4I,OAAO,EAGd9C,SAAS+C,iBAAiB,YAAa7I,KAAKqB,oBAAqB,MACjErB,KAAKuB,SAASuH,S,CAGR,iBAAA3E,GACNnE,KAAKuB,SAASwH,YACd,GAAI/I,KAAKqB,oBAAqB,CAC5ByE,SAASkD,oBAAoB,YAAahJ,KAAKqB,oBAAqB,MACpErB,KAAKqB,oBAAsB,I,CAE7B,GAAIrB,KAAKsB,WAAY,CACnB2H,aAAajJ,KAAKsB,YAClBtB,KAAKsB,WAAa,I,EAId,KAAAsH,CAAMM,EAAe,MAC3BlJ,KAAKwE,yBACL,GAAI0E,EAAclJ,KAAKiG,cACvBjG,KAAKmJ,QAAQ3D,OACbxF,KAAKC,KAAO,MACZD,KAAK+D,aAAa,M,CAIpB,aAAAqF,CAAcX,GACZ,IAAKzI,KAAKa,cAAgBb,KAAKc,QAAS,OAExC,GAAI2H,EAAEY,MAAQ,SAAU,CACtBZ,EAAEa,iBACFtJ,KAAK4I,QACL,M,CAGF,GAAIH,EAAEY,MAAQ,MAAO,CACnB,GAAIrJ,KAAKwH,uBAAyBxH,KAAKgH,wBAAwByB,GAAI,OACnEA,EAAEa,iBACFtJ,KAAK4I,MAAM,OACX5I,KAAKoG,kBAAkBqC,EAAEpB,UACzB,M,CAGF,GAAIrH,KAAKwH,qBAAsB,OAE/B,MAAMS,EAAOjI,KAAKsH,UAClB,MAAMiC,EAAUtB,EACb/I,KAAI,CAACkJ,EAAIoB,KAAC,CAAQpB,KAAIoB,MACtB9C,QAAO,EAAG0B,SAAUA,EAAGE,aACvBpJ,KAAI,EAAGsK,OAAQA,IAClB,IAAKD,EAAQ7D,OAAQ,OAErB,MAAM+D,EAAMF,EAAQxC,QAAQ/G,KAAKkB,cACjC,MAAMwI,EAAOD,EAAM,EAAI,EAAIA,EAE3B,OAAQhB,EAAEY,KACR,IAAK,YACHZ,EAAEa,iBACFb,EAAEkB,kBACF3J,KAAKoB,iBAAmB,KACxBpB,KAAKkB,aAAeqI,GAASG,EAAO,GAAKH,EAAQ7D,QACjD1F,KAAK4J,UAAU5J,KAAKkB,cACpB,MACF,IAAK,UACHuH,EAAEa,iBACFb,EAAEkB,kBACF3J,KAAKoB,iBAAmB,KACxBpB,KAAKkB,aAAeqI,GAASG,EAAO,EAAIH,EAAQ7D,QAAU6D,EAAQ7D,QAClE1F,KAAK4J,UAAU5J,KAAKkB,cACpB,MACF,IAAK,OACHuH,EAAEa,iBACFb,EAAEkB,kBACF3J,KAAKoB,iBAAmB,KACxBpB,KAAKkB,aAAeqI,EAAQ,GAC5BvJ,KAAK4J,UAAU5J,KAAKkB,cACpB,MACF,IAAK,MACHuH,EAAEa,iBACFb,EAAEkB,kBACF3J,KAAKoB,iBAAmB,KACxBpB,KAAKkB,aAAeqI,EAAQA,EAAQ7D,OAAS,GAC7C1F,KAAK4J,UAAU5J,KAAKkB,cACpB,M,CAIE,SAAA0I,CAAUC,GAChB,MAAMrB,EAAOxI,KAAK4B,GAAG6E,iBAA8B,cACnD+B,EAAKqB,IAAM1D,O,CAGL,eAAA2D,CAAgBvK,GACtB,GAAIA,EAAK+I,WAAY,OAGrBtI,KAAKwE,yBACLxE,KAAK+J,SAASvE,KAAKjG,E,CAGb,kBAAAyK,CAAmBC,GACzBjK,KAAKkK,eAAe1E,KAAKyE,E,CAG3B,MAAAE,GACE,IAAKnK,KAAKa,aAAc,OAAOuJ,EAACC,EAAI,CAAC/H,MAAO,CAAEgI,QAAS,cAEvD,MAAMrL,EAAWe,KAAKc,QACjBd,KAAK6D,iBAAmB7D,KAAK4D,qBAC9B5D,KAAK2F,eACT,MAAM6B,EAAuBvI,EAASwI,KAAK1I,GAC3C,IAAKiB,KAAKc,QAAS,CACjBd,KAAK4D,qBAAuB5E,EAAqBC,GACjDe,KAAK6D,gBAAkB,I,CAEzB,IAAI0G,EAAU,EAEd,MAAMC,EAAqC,CACzCjJ,SAAU,QACVkJ,KAAM,IACNC,IAAK,IACLC,UAAW,aAAaC,KAAKC,MAAM7K,KAAKe,IAAIC,SAAS4J,KAAKC,MAAM7K,KAAKe,IAAIE,QACzE6J,OAAQ,OACRC,WAAY/K,KAAKmB,cAAgB,UAAY,UAG/C,GAAInB,KAAKgL,UAAWR,EAAW,SAAWxK,KAAKgL,UAC/C,GAAIhL,KAAKqC,SAAUmI,EAAW,aAAexK,KAAKqC,SAElD,OACE+H,EAACC,EAAI,CAAC/H,MAAO,CAAEgI,QAAS,aACtBF,EAAA,OACEa,QAAQ,SACRC,MAAO,CACL,aAAc,KACd,sBAAuBlL,KAAKc,QAC5B,kBAAmB,KACnB,2BAA4Bd,KAAKc,SAEnCwB,MAAOkI,EACPW,KAAM3D,EAAuB,SAAW,OAAM,aAClCxH,KAAKY,UAAS,mBACR4G,EAAuB4D,UAAY,YAErDhB,EAAA,OAAKc,MAAM,kBACRjM,EAASC,KAAI,CAACL,EAASwM,IACtBjB,EAAA,OACEf,IAAKgC,EACLH,MAAO,CACL,eAAgB,KAChB,wBAAyBG,EAAKpM,EAASyG,OAAS,EAChD,8BAA+B3G,EAAoBF,GACnD,oBAAqB,KACrB,mBAAoB,KACpB,sBAAuB,KACvB,6BAA8BwM,EAAKpM,EAASyG,OAAS,GAEvDyF,KAAMtM,EAAQyM,OAAS,QAAUF,UAAS,aAC9BvM,EAAQyM,QAEnBzM,EAAQyM,QACPlB,EAAA,WACEc,MAAO,wDAAwDlL,KAAKE,OACpEqL,GAAG,OACHzM,QAAS0M,EAAgCxL,KAAKE,MAC9CuL,SAAQ,KACRC,MAAM,UAAS,cACH,QAEX7M,EAAQyM,QAGZ1M,EAA0BC,GACzBuL,EAAA,oBACEH,MAAOpL,EAAQoL,MACf0B,WAAY9M,EAAQ8M,YAAc9M,EAAQyM,QAAU,iBACpDnM,QAASN,EAAQM,SAAW,GAC5BF,SAAUJ,EAAQI,UAAY,GAC9B2M,WAAanD,IACXA,EAAEkB,kBACF3J,KAAKgK,mBAAmBvB,EAAEoD,OAAO,IAIrChN,EAAQS,MAAMJ,KAAIK,IAChB,MAAMsK,EAAMU,IACZ,MAAMuB,EAAY9L,KAAKkB,eAAiB2I,EACxC,MAAMkC,GACHvE,GAAwBxH,KAAKG,gBAAkB,WAAaZ,EAAKyM,WACpE,OACE5B,EAAA,UACEf,IAAKQ,EACLoC,KAAK,SACLf,MAAO,CACL,YAAa,KACb,iBAAkB,KAClB,mBAAoB,KACpB,CAAC,eAAelL,KAAKE,QAAS,KAC9B,sBAAuB,KACvB,yBAA0B4L,GAAa9L,KAAKoB,iBAC5C,uBAAwB7B,EAAK+I,WAC7B,kCAAmC/I,EAAK8I,aAAe9I,EAAK+I,WAC5D,wBAAyB/I,EAAK8I,WAC9B,wBAAyB9I,EAAK+I,WAC9B,2BAA4B/I,EAAK2M,cACjC,qBAAsBJ,GAExBX,KACE3D,EACI4D,UACA7L,EAAKyM,WACH,mBACAD,EACE,gBACA,WAAU,gBAGjBvE,GAAwBjI,EAAKyM,WAC1BG,SAAS5M,EAAK6M,aACdL,EACEI,SAAS5M,EAAK8I,YACd+C,UAAS,eAGf5D,EACI2E,OAAO5M,EAAKyM,aAAezM,EAAK6M,cAAgB7M,EAAK8I,YACrD+C,UAAS,gBAGZ5D,IACAjI,EAAKyM,aACLD,GACDxM,EAAK8I,WACD,OACA+C,UAENiB,SAAU9M,EAAK+I,WACfgE,SAAU9E,EAAuB,EAAIsE,EAAY,GAAI,EACrDS,YAAa,KACXvM,KAAKoB,iBAAmB,KAAK,EAE/BoL,QAAS,IAAMxM,KAAK8J,gBAAgBvK,GACpCkN,QAAS,KACPzM,KAAKkB,aAAe2I,CAAG,GAGzBO,EAAA,OAAKc,MAAM,2EACTd,EAAA,WACEc,MAAM,8DACNK,GAAG,OACHzM,QAAS4N,EAAqB1M,KAAKE,MACnCwL,MAAOnM,EAAK8I,WAAa,UAAY,aAEpC9I,EAAKoN,OAEPpN,EAAKqN,SACJxC,EAAA,WACEc,MAAM,kEACNK,GAAG,OACHzM,QAAS0M,EAAgCxL,KAAKE,MAC9CwL,MAAM,aAELnM,EAAKqN,UAIXrN,EAAKsN,KACJzC,EAAA,QACEc,MAAM,kDAAiD,cAC3C,QAEZd,EAAA,YACEc,MAAM,iBACNpM,QAAQ,MACRgO,QAAS,MACTH,MAAM,MAIXpN,EAAKyM,YACJ5B,EAAA,aACEc,MAAM,iDACNhL,KAAMF,KAAKE,KACX6M,UAAWxN,EAAK6M,YAChBY,aAAY,OAGT,S","ignoreList":[]}

package/dist/components/p-CTTnM7cE.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,h as r,a as o,t as a}from"./index.js";import{d}from"./p-BsoqsbBh.js";import{d as t}from"./p-DsiCDzoF.js";import{d as n}from"./p-DeQwkbT1.js";import{d as i}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as h}from"./p-Ay1AX7Ql.js";import{d as m}from"./p-ohsLFap_.js";import{r as l}from"./p-C-vRkDyn.js";const p=()=>`.sc-ds-markdown:where(.ds-prose){display:block;box-sizing:border-box;max-inline-size:100%;min-inline-size:0;color:inherit;overflow-wrap:anywhere}.sc-ds-markdown:where(.ds-prose) :where(p,ul.sc-ds-markdown,ol.sc-ds-markdown,dl.sc-ds-markdown,blockquote.sc-ds-markdown,figure.sc-ds-markdown,figcaption.sc-ds-markdown,table).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin:0;color:inherit;font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-md);letter-spacing:var(--typography-letterspacing-negative-half)}.sc-ds-markdown:where(.ds-prose) :where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin:0;color:var(--color-foreground-primary);font-family:var(--typography-font-family);font-weight:var(--typography-weight-semibold)}.sc-ds-markdown:where(.ds-prose) :where(h1,h2).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);letter-spacing:var(--typography-letterspacing-negative-double)}.sc-ds-markdown:where(.ds-prose) :where(h3,h4).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg);letter-spacing:var(--typography-letterspacing-negative)}.sc-ds-markdown:where(.ds-prose) :where(h5,h6).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);letter-spacing:var(--typography-letterspacing-negative)}.sc-ds-markdown:where(.ds-prose)>.sc-ds-markdown:where(*+*){margin-block-start:var(--dimension-space-150)}.sc-ds-markdown:where(.ds-prose)>:where(*)+:where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-200)}.sc-ds-markdown:where(.ds-prose)>:where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown+.sc-ds-markdown:where(*){margin-block-start:var(--dimension-space-100)}.sc-ds-markdown:where(.ds-prose) :where(blockquote,li.sc-ds-markdown,dd)>.sc-ds-markdown:where(*+*):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-050)}.sc-ds-markdown:where(.ds-prose) :where(li+li.sc-ds-markdown,dt+dd).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-050)}.sc-ds-markdown:where(.ds-prose) :where(ul,ol).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{padding-inline-start:var(--dimension-space-300)}.sc-ds-markdown:where(.ds-prose) :where(li>ul.sc-ds-markdown,li>ol).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-050)}.sc-ds-markdown:where(.ds-prose) :where(li>input[type='checkbox']):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-inline-end:var(--dimension-space-050)}.sc-ds-markdown:where(.ds-prose) :where(blockquote):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{padding-inline-start:var(--dimension-space-150);border-inline-start:var(--dimension-stroke-width-025) solid var(--color-border-secondary);color:var(--color-foreground-secondary)}.sc-ds-markdown:where(.ds-prose) :where(strong,b).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-weight:var(--typography-weight-medium)}.sc-ds-markdown:where(.ds-prose) :where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6) .sc-ds-markdown:where(strong,b).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-weight:inherit}.sc-ds-markdown:where(.ds-prose) :where(a):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{color:var(--color-foreground-brand);text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}.sc-ds-markdown:where(.ds-prose) :where(code):not(:where(pre code.sc-ds-markdown,[data-ds-prose='off'].sc-ds-markdown,[data-ds-prose='off'] *)).sc-ds-markdown{padding:var(--dimension-space-012) var(--dimension-space-025);border-radius:var(--dimension-radius-025);background:var(--color-background-secondary);font-family:var(--typography-fontfamily-mono);font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none)}.sc-ds-markdown:where(.ds-prose) :where(pre):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{box-sizing:border-box;max-inline-size:100%;min-inline-size:0;margin:0;padding:var(--dimension-space-150);overflow:auto;border-radius:var(--dimension-radius-050);background:var(--color-background-strong-neutral);color:var(--color-foreground-faint-neutral);font-family:var(--typography-fontfamily-mono);font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none);tab-size:2}.sc-ds-markdown:where(.ds-prose) :where(pre code):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{padding:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;white-space:pre}.sc-ds-markdown:where(.ds-prose) :where(hr):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin:0;border:0;border-block-start:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.sc-ds-markdown:where(.ds-prose__table-scroll){box-sizing:border-box;max-inline-size:100%;min-inline-size:0;overflow-x:auto}.sc-ds-markdown:where(.ds-prose) :where(table):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{inline-size:100%;border-collapse:collapse}.sc-ds-markdown:where(.ds-prose) :where(th,td).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{padding:var(--dimension-space-075);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);text-align:start;vertical-align:top;overflow-wrap:anywhere}.sc-ds-markdown:where(.ds-prose) :where(th):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{color:var(--color-foreground-primary);font-weight:var(--typography-weight-medium)}.sc-ds-markdown:where(.ds-prose) :where(img,video.sc-ds-markdown,svg).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{max-inline-size:100%;block-size:auto}.sc-ds-markdown:where(.ds-prose) :where(figcaption):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-050);color:var(--color-foreground-secondary);font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none)}.sc-ds-markdown-h{display:block;min-width:0;color:inherit;box-sizing:border-box;-webkit-user-select:text;user-select:text}`;let w;function f(){w??(w=Promise.all([import("./p-BjtXYFhw.js"),import("./p-DVsje4AY.js"),import("./p-gidVv1FX.js")]).then((([e,s,r])=>({fromMarkdown:e.fromMarkdown,gfmFromMarkdown:s.gfmFromMarkdown,gfm:r.gfm}))));return w}const k=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.content="";this.streaming=false;this.tree=null;this.parseRevision=0}componentWillLoad(){if(typeof document!=="undefined")return this.parse()}disconnectedCallback(){this.parseRevision+=1;if(this.parseFrame&&typeof cancelAnimationFrame==="function"){cancelAnimationFrame(this.parseFrame)}}scheduleParse(){if(typeof requestAnimationFrame!=="function")return;if(this.parseFrame)cancelAnimationFrame(this.parseFrame);this.parseFrame=requestAnimationFrame((()=>{this.parseFrame=undefined;void this.parse()}))}async parse(){const e=++this.parseRevision;try{const{fromMarkdown:s,gfmFromMarkdown:r,gfm:o}=await f();const a=s(this.content,{extensions:[o()],mdastExtensions:[r()]});if(e===this.parseRevision)this.tree=a}catch{if(e===this.parseRevision)this.tree=null}}children(e){if(!("children"in e))return[];return e.children.map((e=>this.renderNode(e)))}renderNode(e){switch(e.type){case"root":return this.children(e);case"text":return r("span",{class:"markdown__text"},e.value);case"paragraph":return r("p",{class:"markdown__paragraph"},this.children(e));case"heading":{const s=`h${e.depth}`;return r(s,{class:"markdown__heading"},this.children(e))}case"strong":return r("strong",{class:"markdown__strong"},this.children(e));case"emphasis":return r("em",{class:"markdown__emphasis"},this.children(e));case"delete":return r("del",{class:"markdown__delete"},this.children(e));case"blockquote":return r("blockquote",{class:"markdown__blockquote"},this.children(e));case"break":return r("br",{class:"markdown__break"});case"thematicBreak":return r("hr",{class:"markdown__thematic-break"});case"inlineCode":return r("code",{class:"markdown__inline-code"},e.value);case"code":return r("ds-code-block",{class:"markdown__code-block","data-ds-prose":"off",code:e.value,language:e.lang??"",filename:e.meta??""});case"link":{const s=l(e.url,{protocols:["http:","https:","mailto:"]});return s?r("a",{class:"markdown__link",href:s,target:"_blank",rel:"noopener noreferrer"},this.children(e)):this.children(e)}case"list":{const s=e.ordered?"ol":"ul";return r(s,{class:"markdown__list",start:e.ordered&&e.start?e.start:undefined},this.children(e))}case"listItem":return r("li",{class:"markdown__list-item"},typeof e.checked==="boolean"?r("input",{class:"markdown__task-indicator",type:"checkbox",checked:e.checked,disabled:true,"aria-hidden":"true",tabIndex:-1}):null,this.children(e));case"table":{const[s,...o]=e.children;return r("div",{class:"markdown__table-wrap ds-prose__table-scroll",tabIndex:0},r("table",{class:"markdown__table"},s?r("thead",{class:"markdown__table-head"},r("tr",{class:"markdown__table-row"},s.children.map((e=>r("th",{class:"markdown__table-heading",scope:"col"},this.children(e)))))):null,r("tbody",{class:"markdown__table-body"},o.map((e=>this.renderNode(e))))))}case"tableRow":return r("tr",{class:"markdown__table-row"},this.children(e));case"tableCell":return r("td",{class:"markdown__table-cell"},this.children(e));case"image":{const s=l(e.url,{protocols:["http:","https:","mailto:"]});return s?r("a",{class:"markdown__image-link",href:s,target:"_blank",rel:"noopener noreferrer"},e.alt||"View image"):e.alt||null}case"html":case"definition":case"footnoteDefinition":return null;case"footnoteReference":return r("sup",{class:"markdown__footnote"},e.label);default:return this.children(e)}}render(){return r(o,{key:"586496a54c061a107376680e12cf6b51dc664355","aria-busy":this.streaming?"true":undefined},r("div",{key:"25963d2274fbcbc02f7f37d390ff39ac65900a49",class:"markdown ds-prose"},this.tree?this.renderNode(this.tree):r("p",{class:"markdown__paragraph"},r("span",{class:"markdown__text"},this.content))))}static get watchers(){return{content:[{scheduleParse:0}]}}static get style(){return p()}},[2,"ds-markdown",{content:[1],streaming:[4],tree:[32]},undefined,{content:[{scheduleParse:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-markdown","ds-badge","ds-button-unfilled","ds-code-block","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-markdown":if(!customElements.get(a(e))){customElements.define(a(e),k)}break;case"ds-badge":if(!customElements.get(a(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){t()}break;case"ds-code-block":if(!customElements.get(a(e))){n()}break;case"ds-icon":if(!customElements.get(a(e))){i()}break;case"ds-loader":if(!customElements.get(a(e))){c()}break;case"ds-text":if(!customElements.get(a(e))){h()}break;case"ds-tooltip":if(!customElements.get(a(e))){m()}break}}))}g();export{k as M,g as d};
+//# sourceMappingURL=p-CTTnM7cE.js.map

package/dist/components/p-CTTnM7cE.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["markdownCss","parserPromise","loadParser","Promise","all","import","then","fromMarkdownModule","gfmFromMarkdownModule","gfmModule","fromMarkdown","gfmFromMarkdown","gfm","Markdown","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","content","streaming","tree","parseRevision","componentWillLoad","document","parse","disconnectedCallback","parseFrame","cancelAnimationFrame","scheduleParse","requestAnimationFrame","undefined","revision","extensions","mdastExtensions","children","node","map","child","renderNode","type","h","class","value","Tag","depth","code","language","lang","filename","meta","href","resolveSafeUrl","url","protocols","target","rel","ordered","start","checked","disabled","tabIndex","heading","rows","cell","scope","row","alt","label","render","Host","key"],"sources":["src/wc/components/Markdown/Markdown.css?tag=ds-markdown&encapsulation=scoped","src/wc/components/Markdown/Markdown.tsx"],"sourcesContent":["@import '../../styles/prose.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  color: inherit;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n","import { Component, h, Host, Prop, State, VNode, Watch } from '@stencil/core';\nimport type { Nodes, Root } from 'mdast';\nimport { resolveSafeUrl } from '../../utils';\n\ntype MarkdownRender = VNode | string | null | MarkdownRender[];\ntype MarkdownParser = {\n  fromMarkdown: typeof import('mdast-util-from-markdown').fromMarkdown;\n  gfmFromMarkdown: typeof import('mdast-util-gfm').gfmFromMarkdown;\n  gfm: typeof import('micromark-extension-gfm').gfm;\n};\n\nlet parserPromise: Promise<MarkdownParser> | undefined;\n\nfunction loadParser(): Promise<MarkdownParser> {\n  parserPromise ??= Promise.all([\n    import('mdast-util-from-markdown'),\n    import('mdast-util-gfm'),\n    import('micromark-extension-gfm'),\n  ]).then(([fromMarkdownModule, gfmFromMarkdownModule, gfmModule]) => ({\n    fromMarkdown: fromMarkdownModule.fromMarkdown,\n    gfmFromMarkdown: gfmFromMarkdownModule.gfmFromMarkdown,\n    gfm: gfmModule.gfm,\n  }));\n  return parserPromise;\n}\n\n@Component({\n  tag: 'ds-markdown',\n  styleUrl: 'Markdown.css',\n  scoped: true,\n})\nexport class Markdown {\n  @Prop() content: string = '';\n  @Prop() streaming: boolean = false;\n\n  @State() private tree: Root | null = null;\n  private parseFrame?: number;\n  private parseRevision = 0;\n\n  componentWillLoad() {\n    // The browser-targeted named-character decoder used by the Markdown parser\n    // creates a DOM element when its module is evaluated. Keep public package\n    // imports server-safe by loading that parser only in a browser context.\n    if (typeof document !== 'undefined') return this.parse();\n  }\n\n  disconnectedCallback() {\n    this.parseRevision += 1;\n    if (this.parseFrame && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.parseFrame);\n    }\n  }\n\n  @Watch('content')\n  scheduleParse() {\n    if (typeof requestAnimationFrame !== 'function') return;\n    if (this.parseFrame) cancelAnimationFrame(this.parseFrame);\n    this.parseFrame = requestAnimationFrame(() => {\n      this.parseFrame = undefined;\n      void this.parse();\n    });\n  }\n\n  private async parse() {\n    const revision = ++this.parseRevision;\n    try {\n      const { fromMarkdown, gfmFromMarkdown, gfm } = await loadParser();\n      const tree = fromMarkdown(this.content, {\n        extensions: [gfm()],\n        mdastExtensions: [gfmFromMarkdown()],\n      });\n      if (revision === this.parseRevision) this.tree = tree;\n    } catch {\n      if (revision === this.parseRevision) this.tree = null;\n    }\n  }\n\n  private children(node: Nodes): MarkdownRender[] {\n    if (!('children' in node)) return [];\n    return node.children.map(child => this.renderNode(child));\n  }\n\n  private renderNode(node: Nodes): MarkdownRender {\n    switch (node.type) {\n      case 'root':\n        return this.children(node);\n      case 'text':\n        // Keep prose text on an element boundary. Besides giving streaming updates a\n        // stable render target, this avoids axe-core treating a bare Stencil text\n        // vnode as an element while it generates a contrast-result selector.\n        return <span class=\"markdown__text\">{node.value}</span>;\n      case 'paragraph':\n        return <p class=\"markdown__paragraph\">{this.children(node)}</p>;\n      case 'heading': {\n        const Tag = `h${node.depth}`;\n        return <Tag class=\"markdown__heading\">{this.children(node)}</Tag>;\n      }\n      case 'strong':\n        return <strong class=\"markdown__strong\">{this.children(node)}</strong>;\n      case 'emphasis':\n        return <em class=\"markdown__emphasis\">{this.children(node)}</em>;\n      case 'delete':\n        return <del class=\"markdown__delete\">{this.children(node)}</del>;\n      case 'blockquote':\n        return <blockquote class=\"markdown__blockquote\">{this.children(node)}</blockquote>;\n      case 'break':\n        return <br class=\"markdown__break\" />;\n      case 'thematicBreak':\n        return <hr class=\"markdown__thematic-break\" />;\n      case 'inlineCode':\n        return <code class=\"markdown__inline-code\">{node.value}</code>;\n      case 'code':\n        return (\n          <ds-code-block\n            class=\"markdown__code-block\"\n            data-ds-prose=\"off\"\n            code={node.value}\n            language={node.lang ?? ''}\n            filename={node.meta ?? ''}\n          />\n        );\n      case 'link': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {this.children(node)}\n          </a>\n        ) : (\n          this.children(node)\n        );\n      }\n      case 'list': {\n        const Tag = node.ordered ? 'ol' : 'ul';\n        return (\n          <Tag class=\"markdown__list\" start={node.ordered && node.start ? node.start : undefined}>\n            {this.children(node)}\n          </Tag>\n        );\n      }\n      case 'listItem':\n        return (\n          <li class=\"markdown__list-item\">\n            {typeof node.checked === 'boolean' ? (\n              <input\n                class=\"markdown__task-indicator\"\n                type=\"checkbox\"\n                checked={node.checked}\n                disabled\n                aria-hidden=\"true\"\n                tabIndex={-1}\n              />\n            ) : null}\n            {this.children(node)}\n          </li>\n        );\n      case 'table': {\n        const [heading, ...rows] = node.children;\n        return (\n          <div class=\"markdown__table-wrap ds-prose__table-scroll\" tabIndex={0}>\n            <table class=\"markdown__table\">\n              {heading ? (\n                <thead class=\"markdown__table-head\">\n                  <tr class=\"markdown__table-row\">\n                    {heading.children.map(cell => (\n                      <th class=\"markdown__table-heading\" scope=\"col\">\n                        {this.children(cell)}\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n              ) : null}\n              <tbody class=\"markdown__table-body\">{rows.map(row => this.renderNode(row))}</tbody>\n            </table>\n          </div>\n        );\n      }\n      case 'tableRow':\n        return <tr class=\"markdown__table-row\">{this.children(node)}</tr>;\n      case 'tableCell':\n        return <td class=\"markdown__table-cell\">{this.children(node)}</td>;\n      case 'image': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__image-link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {node.alt || 'View image'}\n          </a>\n        ) : (\n          node.alt || null\n        );\n      }\n      case 'html':\n      case 'definition':\n      case 'footnoteDefinition':\n        return null;\n      case 'footnoteReference':\n        return <sup class=\"markdown__footnote\">{node.label}</sup>;\n      default:\n        return this.children(node);\n    }\n  }\n\n  render() {\n    return (\n      <Host aria-busy={this.streaming ? 'true' : undefined}>\n        <div class=\"markdown ds-prose\">\n          {this.tree ? (\n            this.renderNode(this.tree)\n          ) : (\n            <p class=\"markdown__paragraph\">\n              <span class=\"markdown__text\">{this.content}</span>\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sVAAA,MAAMA,EAAc,IAAM,4wOCW1B,IAAIC,EAEJ,SAASC,IACPD,MAAkBE,QAAQC,IAAI,CAC5BC,OAAO,mBACPA,OAAO,mBACPA,OAAO,qBACNC,MAAK,EAAEC,EAAoBC,EAAuBC,MAAU,CAC7DC,aAAcH,EAAmBG,aACjCC,gBAAiBH,EAAsBG,gBACvCC,IAAKH,EAAUG,SAEjB,OAAOX,CACT,C,MAOaY,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAkB,GAClBD,KAAAE,UAAqB,MAEZF,KAAAG,KAAoB,KAE7BH,KAAAI,cAAgB,CAuLzB,CArLC,iBAAAC,GAIE,UAAWC,WAAa,YAAa,OAAON,KAAKO,O,CAGnD,oBAAAC,GACER,KAAKI,eAAiB,EACtB,GAAIJ,KAAKS,mBAAqBC,uBAAyB,WAAY,CACjEA,qBAAqBV,KAAKS,W,EAK9B,aAAAE,GACE,UAAWC,wBAA0B,WAAY,OACjD,GAAIZ,KAAKS,WAAYC,qBAAqBV,KAAKS,YAC/CT,KAAKS,WAAaG,uBAAsB,KACtCZ,KAAKS,WAAaI,eACbb,KAAKO,OAAO,G,CAIb,WAAMA,GACZ,MAAMO,IAAad,KAAKI,cACxB,IACE,MAAMZ,aAAEA,EAAYC,gBAAEA,EAAeC,IAAEA,SAAcV,IACrD,MAAMmB,EAAOX,EAAaQ,KAAKC,QAAS,CACtCc,WAAY,CAACrB,KACbsB,gBAAiB,CAACvB,OAEpB,GAAIqB,IAAad,KAAKI,cAAeJ,KAAKG,KAAOA,C,CACjD,MACA,GAAIW,IAAad,KAAKI,cAAeJ,KAAKG,KAAO,I,EAI7C,QAAAc,CAASC,GACf,KAAM,aAAcA,GAAO,MAAO,GAClC,OAAOA,EAAKD,SAASE,KAAIC,GAASpB,KAAKqB,WAAWD,I,CAG5C,UAAAC,CAAWH,GACjB,OAAQA,EAAKI,MACX,IAAK,OACH,OAAOtB,KAAKiB,SAASC,GACvB,IAAK,OAIH,OAAOK,EAAA,QAAMC,MAAM,kBAAkBN,EAAKO,OAC5C,IAAK,YACH,OAAOF,EAAA,KAAGC,MAAM,uBAAuBxB,KAAKiB,SAASC,IACvD,IAAK,UAAW,CACd,MAAMQ,EAAM,IAAIR,EAAKS,QACrB,OAAOJ,EAACG,EAAG,CAACF,MAAM,qBAAqBxB,KAAKiB,SAASC,G,CAEvD,IAAK,SACH,OAAOK,EAAA,UAAQC,MAAM,oBAAoBxB,KAAKiB,SAASC,IACzD,IAAK,WACH,OAAOK,EAAA,MAAIC,MAAM,sBAAsBxB,KAAKiB,SAASC,IACvD,IAAK,SACH,OAAOK,EAAA,OAAKC,MAAM,oBAAoBxB,KAAKiB,SAASC,IACtD,IAAK,aACH,OAAOK,EAAA,cAAYC,MAAM,wBAAwBxB,KAAKiB,SAASC,IACjE,IAAK,QACH,OAAOK,EAAA,MAAIC,MAAM,oBACnB,IAAK,gBACH,OAAOD,EAAA,MAAIC,MAAM,6BACnB,IAAK,aACH,OAAOD,EAAA,QAAMC,MAAM,yBAAyBN,EAAKO,OACnD,IAAK,OACH,OACEF,EAAA,iBACEC,MAAM,uBAAsB,gBACd,MACdI,KAAMV,EAAKO,MACXI,SAAUX,EAAKY,MAAQ,GACvBC,SAAUb,EAAKc,MAAQ,KAG7B,IAAK,OAAQ,CACX,MAAMC,EAAOC,EAAehB,EAAKiB,IAAK,CACpCC,UAAW,CAAC,QAAS,SAAU,aAEjC,OAAOH,EACLV,EAAA,KAAGC,MAAM,iBAAiBS,KAAMA,EAAMI,OAAO,SAASC,IAAI,uBACvDtC,KAAKiB,SAASC,IAGjBlB,KAAKiB,SAASC,E,CAGlB,IAAK,OAAQ,CACX,MAAMQ,EAAMR,EAAKqB,QAAU,KAAO,KAClC,OACEhB,EAACG,EAAG,CAACF,MAAM,iBAAiBgB,MAAOtB,EAAKqB,SAAWrB,EAAKsB,MAAQtB,EAAKsB,MAAQ3B,WAC1Eb,KAAKiB,SAASC,G,CAIrB,IAAK,WACH,OACEK,EAAA,MAAIC,MAAM,8BACAN,EAAKuB,UAAY,UACvBlB,EAAA,SACEC,MAAM,2BACNF,KAAK,WACLmB,QAASvB,EAAKuB,QACdC,SAAQ,mBACI,OACZC,UAAU,IAEV,KACH3C,KAAKiB,SAASC,IAGrB,IAAK,QAAS,CACZ,MAAO0B,KAAYC,GAAQ3B,EAAKD,SAChC,OACEM,EAAA,OAAKC,MAAM,8CAA8CmB,SAAU,GACjEpB,EAAA,SAAOC,MAAM,mBACVoB,EACCrB,EAAA,SAAOC,MAAM,wBACXD,EAAA,MAAIC,MAAM,uBACPoB,EAAQ3B,SAASE,KAAI2B,GACpBvB,EAAA,MAAIC,MAAM,0BAA0BuB,MAAM,OACvC/C,KAAKiB,SAAS6B,QAKrB,KACJvB,EAAA,SAAOC,MAAM,wBAAwBqB,EAAK1B,KAAI6B,GAAOhD,KAAKqB,WAAW2B,O,CAK7E,IAAK,WACH,OAAOzB,EAAA,MAAIC,MAAM,uBAAuBxB,KAAKiB,SAASC,IACxD,IAAK,YACH,OAAOK,EAAA,MAAIC,MAAM,wBAAwBxB,KAAKiB,SAASC,IACzD,IAAK,QAAS,CACZ,MAAMe,EAAOC,EAAehB,EAAKiB,IAAK,CACpCC,UAAW,CAAC,QAAS,SAAU,aAEjC,OAAOH,EACLV,EAAA,KAAGC,MAAM,uBAAuBS,KAAMA,EAAMI,OAAO,SAASC,IAAI,uBAC7DpB,EAAK+B,KAAO,cAGf/B,EAAK+B,KAAO,I,CAGhB,IAAK,OACL,IAAK,aACL,IAAK,qBACH,OAAO,KACT,IAAK,oBACH,OAAO1B,EAAA,OAAKC,MAAM,sBAAsBN,EAAKgC,OAC/C,QACE,OAAOlD,KAAKiB,SAASC,G,CAI3B,MAAAiC,GACE,OACE5B,EAAC6B,EAAI,CAAAC,IAAA,uDAAYrD,KAAKE,UAAY,OAASW,WACzCU,EAAA,OAAA8B,IAAA,2CAAK7B,MAAM,qBACRxB,KAAKG,KACJH,KAAKqB,WAAWrB,KAAKG,MAErBoB,EAAA,KAAGC,MAAM,uBACPD,EAAA,QAAMC,MAAM,kBAAkBxB,KAAKC,W","ignoreList":[]}

package/dist/components/{p-CsX3ICz7.js → p-CWoXKe_h.js}

@@ -1,2 +1,2 @@
-import{p as i,H as e,c as s,h as t,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d as a}from"./p-BFRMwl93.js";import{d}from"./p-B6vE3ujd.js";import{d as l}from"./p-Utr23NC-.js";import{d as h}from"./p-Re2kPrXm.js";import{d as u}from"./p-CPwpgUWT.js";function f(i,e){const s=r(i);const t=s.findIndex((i=>i.id===e));const o=t>=0?t:0;return{selectedIndex:o,selected:s[o],hasPrevious:o>0,hasNext:o<s.length-1}}const b=()=>`.sc-ds-mobile-section-switcher-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-mobile-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher: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-mobile-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{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-mobile-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher: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-mobile-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::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-mobile-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::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-mobile-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-mobile-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--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)}.sc-ds-mobile-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher--expanded.sc-ds-mobile-section-switcher{background:var(--color-background-tertiary)}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}`;let m=0;const v=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.sections=[];this.sectionsJson="";this.value="";this.navigationLabel="Change page section";this.menuOpen=false;this.initialFocusVisible=false;this.instanceId=m++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;this.menuOpen=!this.menuOpen};this.closeMenu=()=>{this.menuOpen=false};this.handleSelect=i=>{const e=String(i.detail.value??"");const s=this.selectableSections.find((i=>i.id===e));if(!s||s.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}get resolvedSections(){if(!this.sectionsJson.trim())return this.sections??[];try{const i=JSON.parse(this.sectionsJson);return Array.isArray(i)?i:[]}catch{return[]}}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return f(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return f(this.resolvedSections,this.value).hasPrevious}get hasNext(){return f(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const s=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){s();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}s();return i}handleSectionsChange(){if(this.selectableSections.length<=1)this.closeMenu()}render(){const i=this.selectedSection;if(!i)return t(o,null);return t(o,null,t("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}),t("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"})),this.selectableSections.length>1?t("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],sectionsJson:[{handleSectionsChange:0}]}}static get style(){return b()}},[2,"ds-mobile-section-switcher",{sections:[16],sectionsJson:[1,"sections-json"],value:[1],navigationLabel:[1,"navigation-label"],menuOpen:[32],initialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],sectionsJson:[{handleSectionsChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-menu","ds-swatch-picker","ds-switch","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),v)}break;case"ds-badge":if(!customElements.get(n(i))){a()}break;case"ds-menu":if(!customElements.get(n(i))){d()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){l()}break;case"ds-switch":if(!customElements.get(n(i))){h()}break;case"ds-text":if(!customElements.get(n(i))){u()}break}}))}g();export{v as M,g as d};
-//# sourceMappingURL=p-CsX3ICz7.js.map
+import{p as i,H as e,c as s,h as t,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d as a}from"./p-BsoqsbBh.js";import{d}from"./p-CS6CHlHK.js";import{d as l}from"./p-BaUsq_VK.js";import{d as h}from"./p-Bkv3UjZz.js";import{d as u}from"./p-Ay1AX7Ql.js";function f(i,e){const s=r(i);const t=s.findIndex((i=>i.id===e));const o=t>=0?t:0;return{selectedIndex:o,selected:s[o],hasPrevious:o>0,hasNext:o<s.length-1}}const b=()=>`.sc-ds-mobile-section-switcher-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-mobile-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher: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-mobile-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{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-mobile-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher: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-mobile-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::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-mobile-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::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-mobile-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-mobile-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--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)}.sc-ds-mobile-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher--expanded.sc-ds-mobile-section-switcher{background:var(--color-background-tertiary)}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}`;let m=0;const v=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.sections=[];this.value="";this.navigationLabel="Change page section";this.menuOpen=false;this.initialFocusVisible=false;this.instanceId=m++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;this.menuOpen=!this.menuOpen};this.closeMenu=()=>{this.menuOpen=false};this.handleSelect=i=>{const e=String(i.detail.value??"");const s=this.selectableSections.find((i=>i.id===e));if(!s||s.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}get resolvedSections(){return this.sections??[]}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return f(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return f(this.resolvedSections,this.value).hasPrevious}get hasNext(){return f(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const s=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){s();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}s();return i}handleSectionsChange(){if(this.selectableSections.length<=1)this.closeMenu()}render(){const i=this.selectedSection;if(!i)return t(o,null);return t(o,null,t("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}),t("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),t("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"})),this.selectableSections.length>1?t("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}]}}static get style(){return b()}},[2,"ds-mobile-section-switcher",{sections:[16],value:[1],navigationLabel:[1,"navigation-label"],menuOpen:[32],initialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-menu","ds-swatch-picker","ds-switch","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),v)}break;case"ds-badge":if(!customElements.get(n(i))){a()}break;case"ds-menu":if(!customElements.get(n(i))){d()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){l()}break;case"ds-switch":if(!customElements.get(n(i))){h()}break;case"ds-text":if(!customElements.get(n(i))){u()}break}}))}g();export{v as M,g as d};
+//# sourceMappingURL=p-CWoXKe_h.js.map

package/dist/components/p-CWoXKe_h.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveMobileSectionPosition","sections","value","selectable","getSelectableTabs","matchedIndex","findIndex","section","id","selectedIndex","selected","hasPrevious","hasNext","length","mobileSectionSwitcherCss","nextMobileSectionSwitcherId","MobileSectionSwitcher","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navigationLabel","menuOpen","initialFocusVisible","instanceId","triggerId","menuId","triggerEl","toggleMenu","event","selectableSections","detail","closeMenu","handleSelect","String","find","candidate","isInactive","selectedSection","dsChange","emit","requestAnimationFrame","focus","resolvedSections","triggerAriaLabel","label","menuSections","groups","items","commit","push","isTabDivider","dot","isSelected","handleSectionsChange","render","h","Host","ref","element","class","type","onClick","as","variant","emphasis","color","lineTruncation","anchorId","align","menuLabel","open","onDsClose","onDsSelect"],"sources":["src/wc/components/MobileSectionSwitcher/mobile-section-switcher-utils.ts","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.css?tag=ds-mobile-section-switcher&encapsulation=scoped","src/wc/components/MobileSectionSwitcher/MobileSectionSwitcher.tsx"],"sourcesContent":["import { getSelectableTabs, type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';\n\nexport interface MobileSectionPosition {\n  selectedIndex: number;\n  selected?: TabItemTab;\n  hasPrevious: boolean;\n  hasNext: boolean;\n}\n\n/** Resolve ordered selectable neighbors while ignoring visual divider entries. */\nexport function resolveMobileSectionPosition(\n  sections: TabItem[],\n  value: string\n): MobileSectionPosition {\n  const selectable = getSelectableTabs(sections);\n  const matchedIndex = selectable.findIndex(section => section.id === value);\n  const selectedIndex = matchedIndex >= 0 ? matchedIndex : 0;\n  return {\n    selectedIndex,\n    selected: selectable[selectedIndex],\n    hasPrevious: selectedIndex > 0,\n    hasNext: selectedIndex < selectable.length - 1,\n  };\n}\n\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-section-switcher {\n  appearance: none;\n  display: grid;\n  grid-template-columns: var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  max-width: 100%;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: var(--color-background-secondary);\n  color: inherit;\n  box-sizing: border-box;\n  cursor: default;\n}\n\n.mobile-section-switcher--expanded {\n  background: var(--color-background-tertiary);\n}\n\n.mobile-section-switcher__label {\n  min-width: 0;\n  max-width: 100%;\n  text-align: center;\n}\n\n.mobile-section-switcher__position {\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  border-radius: var(--dimension-radius-half);\n  background: currentColor;\n  opacity: 0;\n}\n\n.mobile-section-switcher__position--visible {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\nimport { resolveMobileSectionPosition } from './mobile-section-switcher-utils';\n\nlet nextMobileSectionSwitcherId = 0;\n\n@Component({\n  tag: 'ds-mobile-section-switcher',\n  styleUrl: 'MobileSectionSwitcher.css',\n  scoped: true,\n})\nexport class MobileSectionSwitcher {\n  @Element() el!: HTMLElement;\n\n  /** Ordered controlled sections. Divider entries group the popup menu. */\n  @Prop() sections: TabItem[] = [];\n  /** Controlled selected section id. */\n  @Prop() value: string = '';\n  /** Accessible name for the section chooser. */\n  @Prop() navigationLabel: string = 'Change page section';\n\n  /** Selection intent. The route, tool, or workflow owner updates `value`. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private menuOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly instanceId = nextMobileSectionSwitcherId++;\n  private readonly triggerId = `ds-mobile-section-switcher-trigger-${this.instanceId}`;\n  private readonly menuId = `ds-mobile-section-switcher-menu-${this.instanceId}`;\n  private triggerEl: HTMLButtonElement | null = null;\n\n  private get resolvedSections(): TabItem[] {\n    return this.sections ?? [];\n  }\n\n  private get selectableSections(): TabItemTab[] {\n    return getSelectableTabs(this.resolvedSections);\n  }\n\n  private get selectedIndex(): number {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).selectedIndex;\n  }\n\n  private get selectedSection(): TabItemTab | undefined {\n    return this.selectableSections[this.selectedIndex];\n  }\n\n  private get hasPrevious(): boolean {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).hasPrevious;\n  }\n\n  private get hasNext(): boolean {\n    return resolveMobileSectionPosition(this.resolvedSections, this.value).hasNext;\n  }\n\n  private get triggerAriaLabel(): string {\n    return `${this.navigationLabel}. Current section: ${this.selectedSection?.label ?? ''}`;\n  }\n\n  private get menuSections(): MenuSection[] {\n    const groups: MenuSection[] = [];\n    let items: MenuItemData[] = [];\n    const commit = () => {\n      if (items.length) groups.push({ items });\n      items = [];\n    };\n\n    for (const section of this.resolvedSections) {\n      if (isTabDivider(section)) {\n        commit();\n        continue;\n      }\n      items.push({\n        label: section.label,\n        value: section.id,\n        dot: section.dot,\n        isSelected: section.id === this.selectedSection?.id,\n        isInactive: section.isInactive,\n      });\n    }\n    commit();\n    return groups;\n  }\n\n  @Watch('sections')\n  handleSectionsChange() {\n    if (this.selectableSections.length <= 1) this.closeMenu();\n  }\n\n  private toggleMenu = (event: MouseEvent) => {\n    if (this.selectableSections.length <= 1) return;\n    this.initialFocusVisible = event.detail === 0;\n    this.menuOpen = !this.menuOpen;\n  };\n\n  private closeMenu = () => {\n    this.menuOpen = false;\n  };\n\n  private handleSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail.value ?? '');\n    const section = this.selectableSections.find(candidate => candidate.id === id);\n    if (!section || section.isInactive) return;\n    this.closeMenu();\n    if (id !== this.selectedSection?.id) this.dsChange.emit(id);\n    requestAnimationFrame(() => this.triggerEl?.focus());\n  };\n\n  render() {\n    const selected = this.selectedSection;\n    if (!selected) return <Host />;\n\n    return (\n      <Host>\n        <button\n          ref={element => {\n            this.triggerEl = element ?? null;\n          }}\n          id={this.triggerId}\n          class={{\n            'mobile-section-switcher': true,\n            'mobile-section-switcher--expanded': this.menuOpen,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n          }}\n          type=\"button\"\n          aria-haspopup=\"menu\"\n          aria-controls={this.menuId}\n          aria-expanded={String(this.menuOpen)}\n          aria-label={this.triggerAriaLabel}\n          onClick={this.toggleMenu}\n        >\n          <span\n            class={{\n              'mobile-section-switcher__position': true,\n              'mobile-section-switcher__position--visible': this.hasPrevious,\n              'ds-interaction-fill__content': true,\n            }}\n            aria-hidden=\"true\"\n          />\n          <ds-text\n            class=\"mobile-section-switcher__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {selected.label}\n          </ds-text>\n          <span\n            class={{\n              'mobile-section-switcher__position': true,\n              'mobile-section-switcher__position--visible': this.hasNext,\n              'ds-interaction-fill__content': true,\n            }}\n            aria-hidden=\"true\"\n          />\n        </button>\n\n        {this.selectableSections.length > 1 ? (\n          <ds-menu\n            id={this.menuId}\n            anchorId={this.triggerId}\n            align=\"center\"\n            menuLabel={this.navigationLabel}\n            open={this.menuOpen}\n            initialFocusVisible={this.initialFocusVisible}\n            sections={this.menuSections}\n            onDsClose={this.closeMenu}\n            onDsSelect={this.handleSelect}\n          />\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-CwwuSGER.js

@@ -0,0 +1,2 @@
+import{p as e,H as n,c as a,h as s,a as i,t}from"./index.js";import{r as o,p as r,a as d,d as l,s as c,b as v}from"./p-yhj1lIPx.js";import{b as p}from"./p-B6Vuayt6.js";import{r as h}from"./p-C-vRkDyn.js";import{d as f}from"./p-BsoqsbBh.js";import{d as m}from"./p-DsiCDzoF.js";import{d as g}from"./p-BAfG3M8z.js";import{d as u}from"./p-Ca-I2UnB.js";import{d as b}from"./p-Ay1AX7Ql.js";import{d as _}from"./p-ohsLFap_.js";function x(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:s}=e;if(s===true){a["scroll-edge-fade--at-end"]=true}else if(s&&typeof s==="object"){for(const e of n){if(s[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const y={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const w="data-nav-style";function k(e){if(e==="dashboard"||e==="settings")return e;return undefined}function z(e,n,a){const s=k(n);if(s)return s;const i=typeof document!=="undefined"?document.documentElement.getAttribute(w):null;const t=k(i);if(t)return t;return e}function C(e,n){return e!==n}const A="ds-panel-nav-user-menu-anchor";const I=()=>`@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 N=()=>`.ds-control--lg.sc-ds-panel-nav,.ds-control--lg.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav,.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav,.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-nav-h,.ds-control--lg.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-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--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--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-chrome-space--sm.sc-ds-panel-nav-h,.ds-chrome-space--sm.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-nav-h,.ds-chrome-space--md.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-nav-h,.ds-chrome-space--lg.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav,.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav,.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav{flex-direction:column}.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:grid;align-items:center}.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,.ds-focus-ring.sc-ds-panel-nav,.ds-focus-ring-inset.sc-ds-panel-nav-h,.ds-focus-ring-inset.sc-ds-panel-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.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;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-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;cursor:inherit;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)}@media (hover: hover) and (pointer: fine){.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;cursor:inherit}.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)}.ds-scrollbar-hidden.sc-ds-panel-nav-h,.ds-scrollbar-hidden.sc-ds-panel-nav{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-nav-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-nav::-webkit-scrollbar{display:none}.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-shell-app.sc-ds-panel-nav-h:not([gradient-preset='none']) .panel-nav.sc-ds-panel-nav,ds-shell-app: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{height:var(--dimension-size-600, 48px);flex-shrink:0;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(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;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}.panel-nav__sections.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);width:100%}.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(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;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;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 D=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 o(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=r(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=z(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 s=d(getComputedStyle(e));if(s<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),s)}))}))}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=l(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(C(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(c(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(`#${A}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:y})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const s=this.getUserRovingIndex();const i=this.getFirstRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===s)return;if(n===a)t=s;else t=n+1;break;case"ArrowUp":if(n===i)return;if(n===s)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=s;else return;break;case"ArrowLeft":if(n===s)t=a;else return;break;case"Home":e.preventDefault();t=i;break;case"End":e.preventDefault();t=s;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=v(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:y})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(p()){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 s=()=>{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",s);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=s;window.addEventListener("mousemove",a);window.addEventListener("mouseup",s)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return s("ds-tooltip",{label:n,side:"right",size:"sm"},s("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 i=e?this.accountLabel:"";const t=s("button",{type:"button",id:A,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()}},s("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",lineTruncation:1},n),s("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},s("span",{class:"panel-nav__footer-icon-expanded"},s("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),s("span",{class:"panel-nav__footer-icon-collapsed"},s("ds-icon",{name:"Circle",size:"md",color:"inherit"}),s("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return s("ds-tooltip",{label:i,side:"right",size:"sm"},t)}renderNavItem(e,n,a){const i=e.id===this.effectiveActiveId;const t=n+1;const o=[s("span",{class:"panel-nav__item-icon"},s("ds-icon",{name:e.icon,size:"md",color:"inherit"})),s("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:i,color:"inherit",lineTruncation:1},e.label),e.dot&&s("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},s("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":i,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i?"page":undefined,tabIndex:t===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,t),onFocus:()=>{this.rovingIndex=t}};const d=h(e.href);const l=this.routerMode==="anchor"&&d;const c=l?s("a",{...r,href:d},o):s("button",{...r,type:"button"},o);return s("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},c)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const t=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const d={"panel-nav":true,"ds-control--md":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":t,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return s(i,{key:"141d8153fe7791d28ae078825cea6eca58c5ad0a",style:{display:"block",position:"relative"}},s("nav",{key:"4a532b2e5cd105d7928472df182df566953a98b9",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},s("div",{key:"2c100a294a3a431d0e85d67a3007ea5cfd615ea8",class:"panel-nav__header ds-chrome-row ds-chrome-space--md"},s("button",{key:"7cdf096e024faf9fe88ab57199b10a22c328843a",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":t?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":t?"false":"true"},s("span",{key:"9d153fc23326badac046cbb80aaa414f3f5e530b",class:"panel-nav__header-logo","aria-hidden":"true"},s("svg",{key:"3666d9cb6941ca481b08aa4516a367086bcdcc50",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},s("path",{key:"371862fa1a0ce3eb307aa1aabbc84c5f1ab38e65",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"}))),s("span",{key:"102f902edcf22794b33580ad8c4476c225e6d3f9",class:"panel-nav__header-toggle","aria-hidden":"true"},s("ds-icon",{key:"ccabaf87bf31536fb8cd415ff863a96f67b91403",name:t?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),s("div",{key:"9499a51d0080a4bc336ab1b5fa1638e0e4d0907c",class:{"panel-nav__body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.bodyScrollable,...x({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},s("div",{key:"5747b2459fcfbb4e6d250c964379db131924bb57",class:"panel-nav__sections"},(()=>{let e=0;return this.parsedGroups.map((n=>s("div",{class:"panel-nav__group"},n.label&&s("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++,t))))))})())),s("div",{key:"28bac5b6b3e70c6f43951835751a130aa4dfbba1",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(t,o,r))),!this.viewportNarrow&&s("div",{key:"21f24d118c3ceb73defdcf1c13bcd4cb6b888fde",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 I()+N()}},[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}]}]);D.HOST_PROP_SYNC_BUDGET=8;function S(){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(t(e))){customElements.define(t(e),D)}break;case"ds-badge":if(!customElements.get(t(e))){f()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){m()}break;case"ds-icon":if(!customElements.get(t(e))){g()}break;case"ds-loader":if(!customElements.get(t(e))){u()}break;case"ds-text":if(!customElements.get(t(e))){b()}break;case"ds-tooltip":if(!customElements.get(t(e))){_()}break}}))}S();export{D as P,S as d};
+//# sourceMappingURL=p-CwwuSGER.js.map