@ds-mo/ui 1.6.1 → 1.6.2

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

@@ -1 +1 @@
-{"version":3,"names":["NAV_STYLE_HINT_ATTR","readNavStyleAttr","attr","undefined","resolveNavChromeStyle","styleProp","styleAttr","documentStyleAttr","document","documentElement","getAttribute","shouldResyncNavChromeStyle","renderedStyle","style","hrefMatchesPath","path","href","startsWith","deriveActiveIdFromUrl","items","bestId","bestLen","item","length","id","countPanelNavItems","groups","reduce","sum","g","parsePanelNavGroups","Array","isArray","parsed","JSON","parse","resolvePanelNavDisableVt","prop","shouldResyncPanelNavGroups","parsedGroups","panelNavCss","vtTransitions","WeakMap","vtResolvers","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","disableViewTransition","routerMode","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","effectiveDisableViewTransition","el","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","syncRovingIndex","syncActiveFromUrl","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","get","skipTransition","delete","doc","startViewTransition","ensureShellNavVtStyle","origin","resolveShellNavRevealOrigin","querySelector","setShellNavRevealOriginVars","transition","Promise","resolve","set","finished","finally","ready","then","animateShellNavRadialReveal","catch","componentWillLoad","resolvePanelNavStyle","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","checkScroll","componentDidRender","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","panel","transitionEndHandler","e","propertyName","addEventListener","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","getAllItems","syncRenderedStyleIfNeeded","shouldResyncPanelNavStyle","remaining","HOST_PROP_SYNC_BUDGET","tick","requestAnimationFrame","queueMicrotask","applyToggle","next","setItem","String","dsNavToggle","emit","flatMap","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","from","querySelectorAll","focus","body","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","handleUserAction","dsNavUserAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","cursor","userSelect","onMove","ev","deltaX","Math","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","variant","label","dot","background","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","useAnchor","type","render","isNavigation","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","onScroll","flatIdx","map","group","side","visible","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/nav/nav-chrome.ts","src/wc/components/PanelNav/panel-nav-utils.ts","src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/** Visual chrome family for primary/secondary navigation surfaces. */\nexport type NavChromeStyle = 'navigation' | 'default';\n\n/** `document.documentElement` attribute for pre-bootstrap style hints (SPA hard reload). */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\n/** Parse `nav-style` from a host or document hint attribute value. */\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'navigation' || attr === 'default') return attr;\n  return undefined;\n}\n\n/** Set a document-level style hint before nav custom elements upgrade (hard reload). */\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\n/** Resolve initial nav chrome style — host attr, then document hint, then prop default. */\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  styleAttr: string | null,\n  documentStyleAttr: string | null = typeof document !== 'undefined'\n    ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n    : null,\n): NavChromeStyle {\n  return (\n    readNavStyleAttr(styleAttr) ??\n    readNavStyleAttr(documentStyleAttr) ??\n    styleProp\n  );\n}\n\n/** True when internal rendered surface lags the host `style` prop. */\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n","import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';\nimport {\n  NAV_STYLE_HINT_ATTR,\n  clearNavStyleHint,\n  readNavStyleAttr,\n  resolveNavChromeStyle,\n  setNavStyleHint,\n  shouldResyncNavChromeStyle,\n} from '../../nav/nav-chrome';\nimport { ensureShellNavVtStyle } from '../../nav/shell-view-transition';\n\nexport type { NavChromeStyle } from '../../nav/nav-chrome';\nexport {\n  NAV_STYLE_HINT_ATTR,\n  readNavStyleAttr,\n  setNavStyleHint,\n  clearNavStyleHint,\n  resolveNavChromeStyle as resolvePanelNavStyle,\n  shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,\n};\n\n/** @deprecated Use `setNavStyleHint` */\nexport const setPanelNavStyleHint = setNavStyleHint;\n\n/** @deprecated Use `clearNavStyleHint` */\nexport const clearPanelNavStyleHint = clearNavStyleHint;\n\n/** @deprecated Use `NAV_STYLE_HINT_ATTR` */\nexport const PANEL_NAV_STYLE_HINT_ATTR = NAV_STYLE_HINT_ATTR;\n\n/** @deprecated Use `ensureShellNavVtStyle` */\nexport const ensurePanelNavVtStyle = ensureShellNavVtStyle;\n\n/** Whether `path` matches `href` at a segment boundary (exact or child path). */\nexport function hrefMatchesPath(path: string, href: string): boolean {\n  return path === href || path.startsWith(`${href}/`);\n}\n\n/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */\nexport function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {\n  if (!path) return '';\n\n  let bestId = '';\n  let bestLen = 0;\n\n  for (const item of items) {\n    if (!item.href) continue;\n    if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {\n      bestId = item.id;\n      bestLen = item.href.length;\n    }\n  }\n\n  return bestId;\n}\n\n/** Total nav item count across all groups. */\nexport function countPanelNavItems(groups: PanelNavGroup[]): number {\n  return groups.reduce((sum, g) => sum + g.items.length, 0);\n}\n\n/** Parse `groups` from either a JSON attribute string or a JS property array. */\nexport function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {\n  if (Array.isArray(groups)) return groups;\n  if (typeof groups === 'string') {\n    try {\n      const parsed = JSON.parse(groups);\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n  return [];\n}\n\n/** Resolve whether VT is disabled from prop and/or host attribute. */\nexport function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {\n  if (prop) return true;\n  if (attr === null) return false;\n  return attr !== 'false';\n}\n\n/** True when host `groups` has items but internal parsed state is still empty. */\nexport function shouldResyncPanelNavGroups(\n  parsedGroups: PanelNavGroup[],\n  groups: string | unknown,\n): boolean {\n  return (\n    countPanelNavItems(parsedGroups) === 0 &&\n    countPanelNavItems(parsePanelNavGroups(groups)) > 0\n  );\n}\n","/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – navigation (default chrome) ─ */\n  --_nav-bg:              var(--color-navigation-background);\n  --_nav-border:          var(--color-navigation-border-tertiary);\n  --_nav-divider:         var(--color-navigation-divider);\n  --_nav-fg-primary:      var(--color-navigation-foreground-primary);\n  --_nav-fg-secondary:    var(--color-navigation-foreground-secondary);\n  --_nav-fg-tertiary:     var(--color-navigation-foreground-tertiary);\n  --_nav-hover:           var(--color-navigation-interaction-hover);\n  --_nav-pressed:         var(--color-navigation-interaction-pressed);\n  --_nav-focus:           var(--color-navigation-interaction-focus);\n  --_nav-dot:             var(--color-navigation-foreground-brand);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n:host-context(ds-app-shell[gradient]) {\n  --ds-shell-gradient-opacity: 0.1;\n}\n\n.panel-nav--default {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background-color: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition:\n    width var(--_nav-expand-motion),\n    min-width var(--_nav-expand-motion),\n    background-color var(--effect-motion-short-3, 200ms ease),\n    border-color var(--effect-motion-short-3, 200ms ease);\n  font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--ds-shell-gradient-position-panel, 0 0);\n  background-repeat: no-repeat;\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__header-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  transition: opacity var(--effect-motion-short-2, 100ms ease);\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — hidden by default, revealed on hover */\n.panel-nav__header-toggle {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n  /* Typography via ds-text (text-caption-emphasis) */\n  display: flex;\n  align-items: center;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  line-height: var(--typography-lineheight-xs, 12px);\n  padding: 0 var(--dimension-space-075, 6px);\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__item:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  line-height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot — single element, moves between positions ──────── */\n\n.panel-nav__item-dot {\n  position: absolute;\n  right: 13px;\n  top: 13px;\n  pointer-events: none;\n  transition:\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  right: var(--dimension-space-075);\n  top: var(--dimension-space-075);\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 var(--dimension-space-075, 6px);\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* Edge fade — floats above the footer, masking content scrolling under it. */\n.panel-nav__footer-fade {\n  --ds-fade-offset: 100%;\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  background: transparent;\n  transition:\n    background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n    color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__footer-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Navigation: hover previews default chrome */\n.panel-nav--navigation .panel-nav__footer-btn:hover {\n  background: var(--color-background-secondary);\n  color: var(--color-foreground-secondary);\n  transition: none;\n}\n\n/* Default: hover previews navigation chrome */\n.panel-nav--default .panel-nav__footer-btn:hover {\n  background: var(--color-navigation-background);\n  color: var(--color-navigation-foreground-secondary);\n  transition: none;\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* row position: right of gear button */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion),\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* column position: full-width row below gear */\n  left: var(--_nav-padding-x);\n  right: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n.panel-nav__user-initial {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_nav-fg-secondary);\n  text-transform: uppercase;\n  line-height: 1;\n  pointer-events: none;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n.panel-nav__resize-handle {\n  position: absolute;\n  top: 0;\n  /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n  right: var(--dimension-space-n050, -4px);\n  bottom: 0;\n  width: var(--dimension-space-100, 8px);\n  z-index: 10;\n  cursor: ew-resize;\n  touch-action: none;\n  /* Needs a real background for Safari hit-testing */\n  background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* The brand-bold overlay line */\n.panel-nav__resize-handle::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--dimension-stroke-width-025, 2px);\n  background: var(--color-background-bold-brand);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n  opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-nav,\n  .panel-nav *,\n  .panel-nav *::before,\n  .panel-nav *::after,\n  .panel-nav__resize-handle,\n  .panel-nav__resize-handle::before,\n  .panel-nav__resize-handle::after {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    transition-delay: 0.01ms !important;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n  animateShellNavRadialReveal,\n  ensureShellNavVtStyle,\n  resolveShellNavRevealOrigin,\n  setShellNavRevealOriginVars,\n} from '../../nav/shell-view-transition';\nimport {\n  deriveActiveIdFromUrl,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport type { PanelNavGroup, PanelNavItem, PanelNavRouterMode } from './panel-nav-types';\n\n// Module-level WeakMaps\ninterface ViewTransition {\n  finished: Promise<void>;\n  skipTransition: () => void;\n}\ntype DocumentWithViewTransition = Document & {\n  startViewTransition?: (callback: () => void | Promise<void>) => ViewTransition;\n};\n\nconst vtTransitions = new WeakMap<object, ViewTransition>();\nconst vtResolvers = new WeakMap<object, () => void>();\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  scoped: true,\n})\nexport class PanelNav {\n  /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.\n   *  Property: `navStyle`. HTML attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'navigation';\n\n  /** When `true`, the component does not run its own View Transition on style\n   *  change — it just updates the rendered surface synchronously. Use this when\n   *  the host app orchestrates the page transition itself (e.g. Angular Router's\n   *  `withViewTransitions`), so the two don't fight or nest. */\n  @Prop() disableViewTransition: boolean = false;\n\n  /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */\n  @Prop() groups: string | PanelNavGroup[] = '[]';\n\n  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Emitted when the footer user button is clicked. */\n  @Event() dsNavUserAction!: EventEmitter<void>;\n\n  @Element() el!: HTMLElement;\n\n  /** Mirrors `style` but is only updated inside the VT callback so the\n   *  View Transition captures a clean before/after snapshot. */\n  @State() private renderedStyle: NavChromeStyle = 'navigation';\n\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private atBottom = false;\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n\n  private transitionEndHandler?: (e: TransitionEvent) => void;\n  private resizeObserver?: ResizeObserver;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  /** Host may set `disable-view-transition` as an attribute before the JS prop lands. */\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition'),\n    );\n  }\n\n  @Watch('collapsed')\n  @Watch('viewportNarrow')\n  onCollapsedChange() {\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.syncRovingIndex();\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('activeId')\n  @Watch('urlDerivedActiveId')\n  onActiveIdChange() {\n    this.syncRovingIndex();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  async onNavStyleChange(newVal: NavChromeStyle) {\n    // Host app drives the transition (e.g. Angular Router withViewTransitions):\n    // just reflect the new surface so the app's transition captures it.\n    if (this.effectiveDisableViewTransition) {\n      this.renderedStyle = newVal;\n      return;\n    }\n\n    // Skip any in-progress transition immediately so rapid style changes never leave the nav stuck.\n    vtTransitions.get(this)?.skipTransition();\n    vtTransitions.delete(this);\n\n    const doc = document as DocumentWithViewTransition;\n    if (typeof doc.startViewTransition !== 'function') {\n      this.renderedStyle = newVal;\n      return;\n    }\n\n    ensureShellNavVtStyle();\n    const origin = resolveShellNavRevealOrigin(\n      this.el.querySelector('.panel-nav__footer-btn') as HTMLElement | null,\n    );\n    setShellNavRevealOriginVars(origin);\n\n    const transition = doc.startViewTransition(() =>\n      new Promise<void>(resolve => {\n        vtResolvers.set(this, resolve);\n        this.renderedStyle = newVal;\n      })\n    );\n\n    vtTransitions.set(this, transition);\n    transition.finished.finally(() => {\n      if (vtTransitions.get(this) === transition) vtTransitions.delete(this);\n      vtResolvers.delete(this);\n    });\n\n    transition.ready\n      .then(() => animateShellNavRadialReveal(origin))\n      .catch(() => { /* transition was skipped or aborted */ });\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch { /* localStorage unavailable */ }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.checkScroll();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  componentDidRender() {\n    // If a view transition callback is waiting for the render to complete,\n    // resolve it now so the \"after\" snapshot is taken at exactly the right moment.\n    const resolve = vtResolvers.get(this);\n    if (resolve) {\n      vtResolvers.delete(this);\n      resolve();\n    }\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    this.isAnimating = true;\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    if (this.transitionEndHandler) {\n      panel?.removeEventListener('transitionend', this.transitionEndHandler);\n    }\n    this.transitionEndHandler = (e: TransitionEvent) => {\n      if (e.propertyName === 'width') {\n        this.isAnimating = false;\n        panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionEndHandler);\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = window.innerWidth < this.breakpoint;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = window.innerWidth < this.breakpoint;\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      return;\n    }\n    this.urlDerivedActiveId = deriveActiveIdFromUrl(this.currentUrl, this.getAllItems());\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    this.syncRenderedStyleIfNeeded();\n\n    if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {\n      this.onGroupsChange(this.groups);\n    } else if (this.currentUrl) {\n      this.syncActiveFromUrl();\n    }\n  }\n\n  /** Align `renderedStyle` with `style` when host bindings land after first paint. */\n  private syncRenderedStyleIfNeeded() {\n    if (!shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) return;\n\n    if (this.effectiveDisableViewTransition) {\n      vtTransitions.get(this)?.skipTransition();\n      vtTransitions.delete(this);\n      this.renderedStyle = this.navStyle;\n    } else {\n      void this.onNavStyleChange(this.navStyle);\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  /** Centralised toggle: updates `collapsed`, emits `dsNavToggle`, optionally persists. */\n  private applyToggle(next: boolean) {\n    this.collapsed = next;\n    if (this.storageKey) {\n      try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private syncRovingIndex() {\n    const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n    this.rovingIndex = idx >= 0 ? idx : 0;\n  }\n\n  private handleItemKeyDown(e: KeyboardEvent, index: number) {\n    const total = this.getAllItems().length;\n    let next: number;\n    switch (e.key) {\n      case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n      case 'ArrowUp':   e.preventDefault(); next = (index - 1 + total) % total; break;\n      case 'Home':      e.preventDefault(); next = 0; break;\n      case 'End':       e.preventDefault(); next = total - 1; break;\n      default: return;\n    }\n    this.rovingIndex = next;\n    const items = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n    );\n    items[next]?.focus();\n  }\n\n  private checkScroll() {\n    const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n    if (!body) return;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleBodyScroll(e: Event) {\n    const body = e.target as HTMLElement;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    this.applyToggle(!this.collapsed);\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction() {\n    this.dsNavUserAction.emit();\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n      </span>,\n      <span class=\"panel-nav__item-label\">\n        <span class=\"panel-nav__item-label-text\">\n          <ds-text\n            as=\"span\"\n            variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n            color=\"inherit\"\n          >\n            {item.label}\n          </ds-text>\n        </span>\n      </span>,\n      item.dot && (\n        <ds-badge\n          class=\"panel-nav__item-dot\"\n          variant=\"dot\"\n          background=\"var(--_nav-bg)\"\n          label=\"\"\n          aria-hidden=\"true\"\n        />\n      ),\n    ];\n\n    const sharedProps = {\n      class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      title: collapsed ? item.label : undefined,\n      tabIndex: idx === this.rovingIndex ? 0 : -1,\n      onClick: () => this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n      onFocus: () => { this.rovingIndex = idx; },\n    };\n\n    const useAnchor = this.routerMode === 'anchor' && item.href;\n\n    return useAnchor\n      ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n      : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n  }\n\n  render() {\n    const isNavigation = this.renderedStyle === 'navigation';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'panel-nav--navigation': isNavigation,\n      'panel-nav--default': !isNavigation,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--animating': this.isAnimating,\n      'panel-nav--at-bottom': this.atBottom,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav class={navCls} aria-label={isNavigation ? 'Main navigation' : 'Settings navigation'}>\n\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn\"\n              onClick={() => this.handleToggle()}\n              aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n                  <path 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\"/>\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n            {(() => {\n              let flatIdx = 0;\n              return this.parsedGroups.map(group => (\n                <div class=\"panel-nav__group\">\n                  {group.label && (\n                    <span class=\"panel-nav__group-label\">\n                      <span class=\"panel-nav__item-label-text\">\n                        <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                          {group.label}\n                        </ds-text>\n                      </span>\n                    </span>\n                  )}\n                  {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n                </div>\n              ));\n            })()}\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            <ds-fade\n              class=\"panel-nav__footer-fade\"\n              side=\"bottom\"\n              size=\"size-600\"\n              background=\"var(--_nav-bg)\"\n              visible={!this.atBottom}\n            />\n\n            {/* Left icon button — Gear in navigation style, Dashboard in default style */}\n            <button\n              type=\"button\"\n              class=\"panel-nav__footer-btn\"\n              title={isNavigation ? 'Settings' : 'Dashboard'}\n              aria-label={isNavigation ? 'Open settings' : 'Go to dashboard'}\n              onClick={() => this.handleFooterAction()}\n            >\n              <ds-icon name={isNavigation ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n            </button>\n\n            {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}\n            <button\n              type=\"button\"\n              class=\"panel-nav__item panel-nav__footer-user\"\n              aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n              onClick={() => this.handleUserAction()}\n            >\n              <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n                <span class=\"panel-nav__item-label-text\">\n                  <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n                    {userName}\n                  </ds-text>\n                </span>\n              </span>\n              <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n                <span class=\"panel-nav__footer-icon-expanded\">\n                  <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n                </span>\n                <span class=\"panel-nav__footer-icon-collapsed\">\n                  <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n                  <span class=\"panel-nav__user-initial\">\n                    <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                      {userInitial}\n                    </ds-text>\n                  </span>\n                </span>\n              </span>\n            </button>\n          </div>\n\n        </nav>\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["NAV_STYLE_HINT_ATTR","readNavStyleAttr","attr","undefined","resolveNavChromeStyle","styleProp","styleAttr","documentStyleAttr","document","documentElement","getAttribute","shouldResyncNavChromeStyle","renderedStyle","style","hrefMatchesPath","path","href","startsWith","deriveActiveIdFromUrl","items","bestId","bestLen","item","length","id","countPanelNavItems","groups","reduce","sum","g","parsePanelNavGroups","Array","isArray","parsed","JSON","parse","resolvePanelNavDisableVt","prop","shouldResyncPanelNavGroups","parsedGroups","PANEL_NAV_USER_MENU_ANCHOR_ID","panelNavCss","vtTransitions","WeakMap","vtResolvers","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","disableViewTransition","routerMode","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","effectiveDisableViewTransition","el","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","syncRovingIndex","syncActiveFromUrl","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","get","skipTransition","delete","doc","startViewTransition","ensureShellNavVtStyle","origin","resolveShellNavRevealOrigin","querySelector","setShellNavRevealOriginVars","transition","Promise","resolve","set","finished","finally","ready","then","animateShellNavRadialReveal","catch","componentWillLoad","resolvePanelNavStyle","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","checkScroll","componentDidRender","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","panel","transitionEndHandler","e","propertyName","addEventListener","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","getAllItems","syncRenderedStyleIfNeeded","shouldResyncPanelNavStyle","remaining","HOST_PROP_SYNC_BUDGET","tick","requestAnimationFrame","queueMicrotask","applyToggle","next","setItem","String","dsNavToggle","emit","flatMap","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","from","querySelectorAll","focus","body","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","handleUserAction","anchor","currentTarget","dsNavUserAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","cursor","userSelect","onMove","ev","deltaX","Math","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","variant","label","dot","background","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","useAnchor","type","render","isNavigation","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","onScroll","flatIdx","map","group","side","visible","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/nav/nav-chrome.ts","src/wc/components/PanelNav/panel-nav-utils.ts","src/wc/components/PanelNav/panel-nav-types.ts","src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/** Visual chrome family for primary/secondary navigation surfaces. */\nexport type NavChromeStyle = 'navigation' | 'default';\n\n/** `document.documentElement` attribute for pre-bootstrap style hints (SPA hard reload). */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\n/** Parse `nav-style` from a host or document hint attribute value. */\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'navigation' || attr === 'default') return attr;\n  return undefined;\n}\n\n/** Set a document-level style hint before nav custom elements upgrade (hard reload). */\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\n/** Resolve initial nav chrome style — host attr, then document hint, then prop default. */\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  styleAttr: string | null,\n  documentStyleAttr: string | null = typeof document !== 'undefined'\n    ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n    : null,\n): NavChromeStyle {\n  return (\n    readNavStyleAttr(styleAttr) ??\n    readNavStyleAttr(documentStyleAttr) ??\n    styleProp\n  );\n}\n\n/** True when internal rendered surface lags the host `style` prop. */\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n","import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';\nimport {\n  NAV_STYLE_HINT_ATTR,\n  clearNavStyleHint,\n  readNavStyleAttr,\n  resolveNavChromeStyle,\n  setNavStyleHint,\n  shouldResyncNavChromeStyle,\n} from '../../nav/nav-chrome';\nimport { ensureShellNavVtStyle } from '../../nav/shell-view-transition';\n\nexport type { NavChromeStyle } from '../../nav/nav-chrome';\nexport {\n  NAV_STYLE_HINT_ATTR,\n  readNavStyleAttr,\n  setNavStyleHint,\n  clearNavStyleHint,\n  resolveNavChromeStyle as resolvePanelNavStyle,\n  shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,\n};\n\n/** @deprecated Use `setNavStyleHint` */\nexport const setPanelNavStyleHint = setNavStyleHint;\n\n/** @deprecated Use `clearNavStyleHint` */\nexport const clearPanelNavStyleHint = clearNavStyleHint;\n\n/** @deprecated Use `NAV_STYLE_HINT_ATTR` */\nexport const PANEL_NAV_STYLE_HINT_ATTR = NAV_STYLE_HINT_ATTR;\n\n/** @deprecated Use `ensureShellNavVtStyle` */\nexport const ensurePanelNavVtStyle = ensureShellNavVtStyle;\n\n/** Whether `path` matches `href` at a segment boundary (exact or child path). */\nexport function hrefMatchesPath(path: string, href: string): boolean {\n  return path === href || path.startsWith(`${href}/`);\n}\n\n/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */\nexport function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {\n  if (!path) return '';\n\n  let bestId = '';\n  let bestLen = 0;\n\n  for (const item of items) {\n    if (!item.href) continue;\n    if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {\n      bestId = item.id;\n      bestLen = item.href.length;\n    }\n  }\n\n  return bestId;\n}\n\n/** Total nav item count across all groups. */\nexport function countPanelNavItems(groups: PanelNavGroup[]): number {\n  return groups.reduce((sum, g) => sum + g.items.length, 0);\n}\n\n/** Parse `groups` from either a JSON attribute string or a JS property array. */\nexport function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {\n  if (Array.isArray(groups)) return groups;\n  if (typeof groups === 'string') {\n    try {\n      const parsed = JSON.parse(groups);\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n  return [];\n}\n\n/** Resolve whether VT is disabled from prop and/or host attribute. */\nexport function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {\n  if (prop) return true;\n  if (attr === null) return false;\n  return attr !== 'false';\n}\n\n/** True when host `groups` has items but internal parsed state is still empty. */\nexport function shouldResyncPanelNavGroups(\n  parsedGroups: PanelNavGroup[],\n  groups: string | unknown,\n): boolean {\n  return (\n    countPanelNavItems(parsedGroups) === 0 &&\n    countPanelNavItems(parsePanelNavGroups(groups)) > 0\n  );\n}\n","import type { NavChromeStyle } from '../../nav/nav-chrome';\n\nexport type { NavChromeStyle };\nexport type PanelNavRouterMode = 'anchor' | 'event';\n\nexport interface PanelNavItem {\n  id: string;\n  icon: string;\n  label: string;\n  /** Show a notification dot badge on the item */\n  dot?: boolean;\n  flag?: boolean;\n  /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.\n   *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */\n  href?: string;\n}\n\nexport interface PanelNavGroup {\n  id?: string;\n  label?: string;\n  items: PanelNavItem[];\n}\n\n/** Stable `id` on the footer user button — use with `ds-menu` `anchor-id`. */\nexport const PANEL_NAV_USER_MENU_ANCHOR_ID = 'ds-panel-nav-user-menu-anchor';\n\n/** Detail for `dsNavUserAction` — anchor element for an external `ds-menu`. */\nexport interface PanelNavUserActionDetail {\n  anchor: HTMLElement;\n}\n","/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – navigation (default chrome) ─ */\n  --_nav-bg:              var(--color-navigation-background);\n  --_nav-border:          var(--color-navigation-border-tertiary);\n  --_nav-divider:         var(--color-navigation-divider);\n  --_nav-fg-primary:      var(--color-navigation-foreground-primary);\n  --_nav-fg-secondary:    var(--color-navigation-foreground-secondary);\n  --_nav-fg-tertiary:     var(--color-navigation-foreground-tertiary);\n  --_nav-hover:           var(--color-navigation-interaction-hover);\n  --_nav-pressed:         var(--color-navigation-interaction-pressed);\n  --_nav-focus:           var(--color-navigation-interaction-focus);\n  --_nav-dot:             var(--color-navigation-foreground-brand);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n:host-context(ds-app-shell[gradient]) {\n  --ds-shell-gradient-opacity: 0.1;\n}\n\n.panel-nav--default {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background-color: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition:\n    width var(--_nav-expand-motion),\n    min-width var(--_nav-expand-motion),\n    background-color var(--effect-motion-short-3, 200ms ease),\n    border-color var(--effect-motion-short-3, 200ms ease);\n  font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--ds-shell-gradient-position-panel, 0 0);\n  background-repeat: no-repeat;\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__header-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  transition: opacity var(--effect-motion-short-2, 100ms ease);\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — hidden by default, revealed on hover */\n.panel-nav__header-toggle {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n  /* Typography via ds-text (text-caption-emphasis) */\n  display: flex;\n  align-items: center;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  line-height: var(--typography-lineheight-xs, 12px);\n  padding: 0 var(--dimension-space-075, 6px);\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__item:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  line-height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot — single element, moves between positions ──────── */\n\n.panel-nav__item-dot {\n  position: absolute;\n  right: 13px;\n  top: 13px;\n  pointer-events: none;\n  transition:\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  right: var(--dimension-space-075);\n  top: var(--dimension-space-075);\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 var(--dimension-space-075, 6px);\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* Edge fade — floats above the footer, masking content scrolling under it. */\n.panel-nav__footer-fade {\n  --ds-fade-offset: 100%;\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  background: transparent;\n  transition:\n    background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n    color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__footer-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Navigation: hover previews default chrome */\n.panel-nav--navigation .panel-nav__footer-btn:hover {\n  background: var(--color-background-secondary);\n  color: var(--color-foreground-secondary);\n  transition: none;\n}\n\n/* Default: hover previews navigation chrome */\n.panel-nav--default .panel-nav__footer-btn:hover {\n  background: var(--color-navigation-background);\n  color: var(--color-navigation-foreground-secondary);\n  transition: none;\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* row position: right of gear button */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion),\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* column position: full-width row below gear */\n  left: var(--_nav-padding-x);\n  right: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n.panel-nav__user-initial {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_nav-fg-secondary);\n  text-transform: uppercase;\n  line-height: 1;\n  pointer-events: none;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n.panel-nav__resize-handle {\n  position: absolute;\n  top: 0;\n  /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n  right: var(--dimension-space-n050, -4px);\n  bottom: 0;\n  width: var(--dimension-space-100, 8px);\n  z-index: 10;\n  cursor: ew-resize;\n  touch-action: none;\n  /* Needs a real background for Safari hit-testing */\n  background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* The brand-bold overlay line */\n.panel-nav__resize-handle::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--dimension-stroke-width-025, 2px);\n  background: var(--color-background-bold-brand);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n  opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-nav,\n  .panel-nav *,\n  .panel-nav *::before,\n  .panel-nav *::after,\n  .panel-nav__resize-handle,\n  .panel-nav__resize-handle::before,\n  .panel-nav__resize-handle::after {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    transition-delay: 0.01ms !important;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n  animateShellNavRadialReveal,\n  ensureShellNavVtStyle,\n  resolveShellNavRevealOrigin,\n  setShellNavRevealOriginVars,\n} from '../../nav/shell-view-transition';\nimport {\n  deriveActiveIdFromUrl,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\n\n// Module-level WeakMaps\ninterface ViewTransition {\n  finished: Promise<void>;\n  skipTransition: () => void;\n}\ntype DocumentWithViewTransition = Document & {\n  startViewTransition?: (callback: () => void | Promise<void>) => ViewTransition;\n};\n\nconst vtTransitions = new WeakMap<object, ViewTransition>();\nconst vtResolvers = new WeakMap<object, () => void>();\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  scoped: true,\n})\nexport class PanelNav {\n  /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.\n   *  Property: `navStyle`. HTML attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'navigation';\n\n  /** When `true`, the component does not run its own View Transition on style\n   *  change — it just updates the rendered surface synchronously. Use this when\n   *  the host app orchestrates the page transition itself (e.g. Angular Router's\n   *  `withViewTransitions`), so the two don't fight or nest. */\n  @Prop() disableViewTransition: boolean = false;\n\n  /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */\n  @Prop() groups: string | PanelNavGroup[] = '[]';\n\n  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n\n  /** Mirrors `style` but is only updated inside the VT callback so the\n   *  View Transition captures a clean before/after snapshot. */\n  @State() private renderedStyle: NavChromeStyle = 'navigation';\n\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private atBottom = false;\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n\n  private transitionEndHandler?: (e: TransitionEvent) => void;\n  private resizeObserver?: ResizeObserver;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  /** Host may set `disable-view-transition` as an attribute before the JS prop lands. */\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition'),\n    );\n  }\n\n  @Watch('collapsed')\n  @Watch('viewportNarrow')\n  onCollapsedChange() {\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.syncRovingIndex();\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('activeId')\n  @Watch('urlDerivedActiveId')\n  onActiveIdChange() {\n    this.syncRovingIndex();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  async onNavStyleChange(newVal: NavChromeStyle) {\n    // Host app drives the transition (e.g. Angular Router withViewTransitions):\n    // just reflect the new surface so the app's transition captures it.\n    if (this.effectiveDisableViewTransition) {\n      this.renderedStyle = newVal;\n      return;\n    }\n\n    // Skip any in-progress transition immediately so rapid style changes never leave the nav stuck.\n    vtTransitions.get(this)?.skipTransition();\n    vtTransitions.delete(this);\n\n    const doc = document as DocumentWithViewTransition;\n    if (typeof doc.startViewTransition !== 'function') {\n      this.renderedStyle = newVal;\n      return;\n    }\n\n    ensureShellNavVtStyle();\n    const origin = resolveShellNavRevealOrigin(\n      this.el.querySelector('.panel-nav__footer-btn') as HTMLElement | null,\n    );\n    setShellNavRevealOriginVars(origin);\n\n    const transition = doc.startViewTransition(() =>\n      new Promise<void>(resolve => {\n        vtResolvers.set(this, resolve);\n        this.renderedStyle = newVal;\n      })\n    );\n\n    vtTransitions.set(this, transition);\n    transition.finished.finally(() => {\n      if (vtTransitions.get(this) === transition) vtTransitions.delete(this);\n      vtResolvers.delete(this);\n    });\n\n    transition.ready\n      .then(() => animateShellNavRadialReveal(origin))\n      .catch(() => { /* transition was skipped or aborted */ });\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch { /* localStorage unavailable */ }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.checkScroll();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  componentDidRender() {\n    // If a view transition callback is waiting for the render to complete,\n    // resolve it now so the \"after\" snapshot is taken at exactly the right moment.\n    const resolve = vtResolvers.get(this);\n    if (resolve) {\n      vtResolvers.delete(this);\n      resolve();\n    }\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    this.isAnimating = true;\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    if (this.transitionEndHandler) {\n      panel?.removeEventListener('transitionend', this.transitionEndHandler);\n    }\n    this.transitionEndHandler = (e: TransitionEvent) => {\n      if (e.propertyName === 'width') {\n        this.isAnimating = false;\n        panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionEndHandler);\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = window.innerWidth < this.breakpoint;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = window.innerWidth < this.breakpoint;\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      return;\n    }\n    this.urlDerivedActiveId = deriveActiveIdFromUrl(this.currentUrl, this.getAllItems());\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    this.syncRenderedStyleIfNeeded();\n\n    if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {\n      this.onGroupsChange(this.groups);\n    } else if (this.currentUrl) {\n      this.syncActiveFromUrl();\n    }\n  }\n\n  /** Align `renderedStyle` with `style` when host bindings land after first paint. */\n  private syncRenderedStyleIfNeeded() {\n    if (!shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) return;\n\n    if (this.effectiveDisableViewTransition) {\n      vtTransitions.get(this)?.skipTransition();\n      vtTransitions.delete(this);\n      this.renderedStyle = this.navStyle;\n    } else {\n      void this.onNavStyleChange(this.navStyle);\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  /** Centralised toggle: updates `collapsed`, emits `dsNavToggle`, optionally persists. */\n  private applyToggle(next: boolean) {\n    this.collapsed = next;\n    if (this.storageKey) {\n      try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private syncRovingIndex() {\n    const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n    this.rovingIndex = idx >= 0 ? idx : 0;\n  }\n\n  private handleItemKeyDown(e: KeyboardEvent, index: number) {\n    const total = this.getAllItems().length;\n    let next: number;\n    switch (e.key) {\n      case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n      case 'ArrowUp':   e.preventDefault(); next = (index - 1 + total) % total; break;\n      case 'Home':      e.preventDefault(); next = 0; break;\n      case 'End':       e.preventDefault(); next = total - 1; break;\n      default: return;\n    }\n    this.rovingIndex = next;\n    const items = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n    );\n    items[next]?.focus();\n  }\n\n  private checkScroll() {\n    const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n    if (!body) return;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleBodyScroll(e: Event) {\n    const body = e.target as HTMLElement;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    this.applyToggle(!this.collapsed);\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n      </span>,\n      <span class=\"panel-nav__item-label\">\n        <span class=\"panel-nav__item-label-text\">\n          <ds-text\n            as=\"span\"\n            variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n            color=\"inherit\"\n          >\n            {item.label}\n          </ds-text>\n        </span>\n      </span>,\n      item.dot && (\n        <ds-badge\n          class=\"panel-nav__item-dot\"\n          variant=\"dot\"\n          background=\"var(--_nav-bg)\"\n          label=\"\"\n          aria-hidden=\"true\"\n        />\n      ),\n    ];\n\n    const sharedProps = {\n      class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      title: collapsed ? item.label : undefined,\n      tabIndex: idx === this.rovingIndex ? 0 : -1,\n      onClick: () => this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n      onFocus: () => { this.rovingIndex = idx; },\n    };\n\n    const useAnchor = this.routerMode === 'anchor' && item.href;\n\n    return useAnchor\n      ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n      : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n  }\n\n  render() {\n    const isNavigation = this.renderedStyle === 'navigation';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'panel-nav--navigation': isNavigation,\n      'panel-nav--default': !isNavigation,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--animating': this.isAnimating,\n      'panel-nav--at-bottom': this.atBottom,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav class={navCls} aria-label={isNavigation ? 'Main navigation' : 'Settings navigation'}>\n\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn\"\n              onClick={() => this.handleToggle()}\n              aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n                  <path 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\"/>\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n            {(() => {\n              let flatIdx = 0;\n              return this.parsedGroups.map(group => (\n                <div class=\"panel-nav__group\">\n                  {group.label && (\n                    <span class=\"panel-nav__group-label\">\n                      <span class=\"panel-nav__item-label-text\">\n                        <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                          {group.label}\n                        </ds-text>\n                      </span>\n                    </span>\n                  )}\n                  {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n                </div>\n              ));\n            })()}\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            <ds-fade\n              class=\"panel-nav__footer-fade\"\n              side=\"bottom\"\n              size=\"size-600\"\n              background=\"var(--_nav-bg)\"\n              visible={!this.atBottom}\n            />\n\n            {/* Left icon button — Gear in navigation style, Dashboard in default style */}\n            <button\n              type=\"button\"\n              class=\"panel-nav__footer-btn\"\n              title={isNavigation ? 'Settings' : 'Dashboard'}\n              aria-label={isNavigation ? 'Open settings' : 'Go to dashboard'}\n              onClick={() => this.handleFooterAction()}\n            >\n              <ds-icon name={isNavigation ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n            </button>\n\n            {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}\n            <button\n              type=\"button\"\n              id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n              class=\"panel-nav__item panel-nav__footer-user\"\n              aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n              onClick={(e) => this.handleUserAction(e)}\n            >\n              <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n                <span class=\"panel-nav__item-label-text\">\n                  <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n                    {userName}\n                  </ds-text>\n                </span>\n              </span>\n              <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n                <span class=\"panel-nav__footer-icon-expanded\">\n                  <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n                </span>\n                <span class=\"panel-nav__footer-icon-collapsed\">\n                  <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n                  <span class=\"panel-nav__user-initial\">\n                    <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                      {userInitial}\n                    </ds-text>\n                  </span>\n                </span>\n              </span>\n            </button>\n          </div>\n\n        </nav>\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"sQAIO,MAAMA,EAAsB,iBAG7B,SAAUC,EAAiBC,GAC/B,GAAIA,IAAS,cAAgBA,IAAS,UAAW,OAAOA,EACxD,OAAOC,SACT,CAcM,SAAUC,EACdC,EACAC,EACAC,UAA0CC,WAAa,YACnDA,SAASC,gBAAgBC,aAAaV,GACtC,OAEJ,OACEC,EAAiBK,IACjBL,EAAiBM,IACjBF,CAEJ,CAGM,SAAUM,EACdC,EACAC,GAEA,OAAOD,IAAkBC,CAC3B,CCVM,SAAUC,EAAgBC,EAAcC,GAC5C,OAAOD,IAASC,GAAQD,EAAKE,WAAW,GAAGD,KAC7C,CAGM,SAAUE,EAAsBH,EAAcI,GAClD,IAAKJ,EAAM,MAAO,GAElB,IAAIK,EAAS,GACb,IAAIC,EAAU,EAEd,IAAK,MAAMC,KAAQH,EAAO,CACxB,IAAKG,EAAKN,KAAM,SAChB,GAAIF,EAAgBC,EAAMO,EAAKN,OAASM,EAAKN,KAAKO,OAASF,EAAS,CAClED,EAASE,EAAKE,GACdH,EAAUC,EAAKN,KAAKO,M,EAIxB,OAAOH,CACT,CAGM,SAAUK,EAAmBC,GACjC,OAAOA,EAAOC,QAAO,CAACC,EAAKC,IAAMD,EAAMC,EAAEV,MAAMI,QAAQ,EACzD,CAGM,SAAUO,EAAoBJ,GAClC,GAAIK,MAAMC,QAAQN,GAAS,OAAOA,EAClC,UAAWA,IAAW,SAAU,CAC9B,IACE,MAAMO,EAASC,KAAKC,MAAMT,GAC1B,OAAOK,MAAMC,QAAQC,GAAUA,EAAS,E,CACxC,MACA,MAAO,E,EAGX,MAAO,EACT,CAGM,SAAUG,EAAyBC,EAAenC,GACtD,GAAImC,EAAM,OAAO,KACjB,GAAInC,IAAS,KAAM,OAAO,MAC1B,OAAOA,IAAS,OAClB,CAGM,SAAUoC,EACdC,EACAb,GAEA,OACED,EAAmBc,KAAkB,GACrCd,EAAmBK,EAAoBJ,IAAW,CAEtD,CCnEO,MAAMc,EAAgC,gCCxB7C,MAAMC,EAAc,IAAM,gwcCiC1B,MAAMC,EAAgB,IAAIC,QAC1B,MAAMC,EAAc,IAAID,Q,MAOXE,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4NAQmDC,KAAAC,SAA2B,aAMpED,KAAAE,sBAAiC,MAGjCF,KAAAxB,OAAmC,KAKnCwB,KAAAG,WAAiC,SAGjCH,KAAAI,SAAmB,GAIFJ,KAAAK,UAAqB,MAGtCL,KAAAM,WAAqB,EAIrBN,KAAAO,WAAqB,GAKrBP,KAAAQ,WAAqB,GAGrBR,KAAAS,SAAmB,GAGnBT,KAAAU,YAAsB,GAkBbV,KAAAtC,cAAgC,aAEhCsC,KAAAX,aAAgC,GAChCW,KAAAW,SAAW,MACXX,KAAAY,YAAc,MACdZ,KAAAa,YAAsB,EACtBb,KAAAc,eAA0B,MAC1Bd,KAAAe,mBAA6B,GAMtCf,KAAAgB,WAAa,MACbhB,KAAAiB,WAAa,EACbjB,KAAAkB,QAAU,MACVlB,KAAAmB,WAAa,EACbnB,KAAAoB,iBAAkC,KAIzBpB,KAAAqB,gBAAkB,KAwgBpC,CAlgBC,qBAAYC,GACV,OAAOtB,KAAKe,oBAAsBf,KAAKI,Q,CAIzC,kCAAYmB,GACV,OAAOrC,EACLc,KAAKE,sBACLF,KAAKwB,GAAGhE,aAAa,2B,CAMzB,iBAAAiE,GACEzB,KAAK0B,wB,CAIP,kBAAAC,GACE3B,KAAK4B,2BACL,GAAI5B,KAAKM,WAAa,EAAGN,KAAK6B,uB,CAIhC,cAAAC,CAAeC,GACb/B,KAAKX,aAAeT,EAAoBmD,GACxC/B,KAAKgC,kBACLhC,KAAKiC,mB,CAKP,gBAAAC,GACElC,KAAKgC,iB,CAIP,kBAAAG,GACEnC,KAAKiC,mB,CAIP,sBAAMG,CAAiBC,GAGrB,GAAIrC,KAAKuB,+BAAgC,CACvCvB,KAAKtC,cAAgB2E,EACrB,M,CAIF7C,EAAc8C,IAAItC,OAAOuC,iBACzB/C,EAAcgD,OAAOxC,MAErB,MAAMyC,EAAMnF,SACZ,UAAWmF,EAAIC,sBAAwB,WAAY,CACjD1C,KAAKtC,cAAgB2E,EACrB,M,CAGFM,IACA,MAAMC,EAASC,EACb7C,KAAKwB,GAAGsB,cAAc,2BAExBC,EAA4BH,GAE5B,MAAMI,EAAaP,EAAIC,qBAAoB,IACzC,IAAIO,SAAcC,IAChBxD,EAAYyD,IAAInD,KAAMkD,GACtBlD,KAAKtC,cAAgB2E,CAAM,MAI/B7C,EAAc2D,IAAInD,KAAMgD,GACxBA,EAAWI,SAASC,SAAQ,KAC1B,GAAI7D,EAAc8C,IAAItC,QAAUgD,EAAYxD,EAAcgD,OAAOxC,MACjEN,EAAY8C,OAAOxC,KAAK,IAG1BgD,EAAWM,MACRC,MAAK,IAAMC,EAA4BZ,KACvCa,OAAM,Q,CAGX,iBAAAC,GACE1D,KAAKtC,cAAgBiG,EAAqB3D,KAAKC,SAAUD,KAAKwB,GAAGhE,aAAa,cAC9E,GAAIwC,KAAKO,WAAY,CACnB,IACE,MAAMqD,EAASC,aAAaC,QAAQ9D,KAAKO,YACzC,GAAIqD,IAAW,KAAM5D,KAAKK,UAAYuD,IAAW,M,CACjD,MAAM,C,CAEV5D,KAAK8B,eAAe9B,KAAKxB,QACzBwB,KAAKiC,mB,CAGP,gBAAA8B,GACE/D,KAAKgE,wBACLhE,KAAKiE,+BACLjE,KAAKkE,cACL,GAAIlE,KAAKM,WAAa,EAAGN,KAAK6B,uB,CAGhC,kBAAAsC,GAGE,MAAMjB,EAAUxD,EAAY4C,IAAItC,MAChC,GAAIkD,EAAS,CACXxD,EAAY8C,OAAOxC,MACnBkD,G,EAIJ,oBAAAkB,GACEpE,KAAK4B,2BACL5B,KAAKqE,wBACL,GAAIrE,KAAKsE,uBAAwB,CAC/BC,OAAOC,oBAAoB,YAAaxE,KAAKsE,uB,CAE/C,GAAItE,KAAKyE,qBAAsB,CAC7BF,OAAOC,oBAAoB,UAAWxE,KAAKyE,qB,EAIvC,sBAAA/C,GACN1B,KAAKY,YAAc,KACnB,MAAM8D,EAAQ1E,KAAKwB,GAAGsB,cAAc,cACpC,GAAI9C,KAAK2E,qBAAsB,CAC7BD,GAAOF,oBAAoB,gBAAiBxE,KAAK2E,qB,CAEnD3E,KAAK2E,qBAAwBC,IAC3B,GAAIA,EAAEC,eAAiB,QAAS,CAC9B7E,KAAKY,YAAc,MACnB8D,GAAOF,oBAAoB,gBAAiBxE,KAAK2E,qB,GAGrDD,GAAOI,iBAAiB,gBAAiB9E,KAAK2E,qB,CAGxC,qBAAA9C,GACN7B,KAAKc,eAAiByD,OAAOQ,WAAa/E,KAAKM,WAC/CN,KAAKgF,eAAiB,IAAIC,gBAAe,KACvCjF,KAAKc,eAAiByD,OAAOQ,WAAa/E,KAAKM,UAAU,IAE3DN,KAAKgF,eAAeE,QAAQ5H,SAASC,gB,CAG/B,wBAAAqE,GACN5B,KAAKgF,gBAAgBG,aACrBnF,KAAKgF,eAAiB/H,S,CAKhB,iBAAAgF,GACN,IAAKjC,KAAKQ,WAAY,CACpBR,KAAKe,mBAAqB,GAC1B,M,CAEFf,KAAKe,mBAAqB/C,EAAsBgC,KAAKQ,WAAYR,KAAKoF,c,CAIhE,qBAAApB,GACNhE,KAAKqF,4BAEL,GAAIjG,EAA2BY,KAAKX,aAAcW,KAAKxB,QAAS,CAC9DwB,KAAK8B,eAAe9B,KAAKxB,O,MACpB,GAAIwB,KAAKQ,WAAY,CAC1BR,KAAKiC,mB,EAKD,yBAAAoD,GACN,IAAKC,EAA0BtF,KAAKtC,cAAesC,KAAKC,UAAW,OAEnE,GAAID,KAAKuB,+BAAgC,CACvC/B,EAAc8C,IAAItC,OAAOuC,iBACzB/C,EAAcgD,OAAOxC,MACrBA,KAAKtC,cAAgBsC,KAAKC,Q,KACrB,MACAD,KAAKoC,iBAAiBpC,KAAKC,S,EAK5B,4BAAAgE,GACN,IAAIsB,EAAY5F,EAAS6F,sBACzB,MAAMC,EAAO,KACXzF,KAAKgE,wBACL,KAAMuB,EAAY,EAAG,CACnBG,sBAAsBD,E,GAG1BE,eAAeF,E,CAIT,WAAAG,CAAYC,GAClB7F,KAAKK,UAAYwF,EACjB,GAAI7F,KAAKO,WAAY,CACnB,IAAMsD,aAAaiC,QAAQ9F,KAAKO,WAAYwF,OAAOF,G,CAAU,MAAM,C,CAErE7F,KAAKgG,YAAYC,KAAKJ,E,CAGhB,WAAAT,GACN,OAAOpF,KAAKX,aAAa6G,SAAQvH,GAAKA,EAAEV,O,CAGlC,eAAA+D,GACN,MAAMmE,EAAMnG,KAAKoF,cAAcgB,WAAUC,GAAKA,EAAE/H,KAAO0B,KAAKsB,oBAC5DtB,KAAKa,YAAcsF,GAAO,EAAIA,EAAM,C,CAG9B,iBAAAG,CAAkB1B,EAAkB2B,GAC1C,MAAMC,EAAQxG,KAAKoF,cAAc/G,OACjC,IAAIwH,EACJ,OAAQjB,EAAE6B,KACR,IAAK,YAAa7B,EAAE8B,iBAAkBb,GAAQU,EAAQ,GAAKC,EAAO,MAClE,IAAK,UAAa5B,EAAE8B,iBAAkBb,GAAQU,EAAQ,EAAIC,GAASA,EAAO,MAC1E,IAAK,OAAa5B,EAAE8B,iBAAkBb,EAAO,EAAG,MAChD,IAAK,MAAajB,EAAE8B,iBAAkBb,EAAOW,EAAQ,EAAG,MACxD,QAAS,OAEXxG,KAAKa,YAAcgF,EACnB,MAAM5H,EAAQY,MAAM8H,KAClB3G,KAAKwB,GAAGoF,iBAA8B,sCAExC3I,EAAM4H,IAAOgB,O,CAGP,WAAA3C,GACN,MAAM4C,EAAO9G,KAAKwB,GAAGsB,cAAc,oBACnC,IAAKgE,EAAM,OACX,MAAMvB,EAAYuB,EAAKC,aAAeD,EAAKE,UAAYF,EAAKG,aAC5DjH,KAAKW,SAAW4E,EAAY,C,CAGtB,gBAAA2B,CAAiBtC,GACvB,MAAMkC,EAAOlC,EAAEuC,OACf,MAAM5B,EAAYuB,EAAKC,aAAeD,EAAKE,UAAYF,EAAKG,aAC5DjH,KAAKW,SAAW4E,EAAY,C,CAGtB,eAAA6B,CAAgB9I,GACtB0B,KAAKqH,YAAYpB,KAAK3H,E,CAGhB,YAAAgJ,GACNtH,KAAK4F,aAAa5F,KAAKK,U,CAGjB,kBAAAkH,GACNvH,KAAKwH,kBAAkBvB,M,CAGjB,gBAAAwB,CAAiB7C,GACvB,MAAM8C,EAAS9C,EAAE+C,cACjB3H,KAAK4H,gBAAgB3B,KAAK,CAAEyB,U,CAGtB,qBAAArD,GACN,GAAIrE,KAAKoB,mBAAqB,KAAM,CAClCmD,OAAOsD,aAAa7H,KAAKoB,kBACzBpB,KAAKoB,iBAAmB,I,EAIpB,4BAAA0G,GACN9H,KAAKqE,wBACLrE,KAAKoB,iBAAmBmD,OAAOwD,YAAW,KACxC/H,KAAKqB,gBAAkB,KACvBrB,KAAKoB,iBAAmB,IAAI,GAC3B,I,CAGG,4BAAA4G,GACN,GAAIhI,KAAKgB,WAAY,OACrBhB,KAAKqE,wBACLrE,KAAKqB,gBAAkB,K,CAGjB,2BAAA4G,CAA4BrD,GAClCA,EAAE8B,iBACF9B,EAAEsD,kBAEF,MAAMC,EAAenI,KAAKK,WAAaL,KAAKc,eAC5Cd,KAAKgB,WAAa,KAClBhB,KAAKiB,WAAa2D,EAAEwD,QACpBpI,KAAKkB,QAAU,MACflB,KAAKmB,WAAa,EAClBnB,KAAKqE,wBACLrE,KAAKqB,gBAAkB,MAEvB/D,SAASwJ,KAAKnJ,MAAM0K,OAAS,YAC7B/K,SAASwJ,KAAKnJ,MAAM2K,WAAa,OAEjC,MAAMC,EAAUC,IACd,MAAMC,EAASD,EAAGJ,QAAUpI,KAAKiB,WACjCjB,KAAKmB,WAAauH,KAAKC,IAAIF,GAC3B,GAAIzI,KAAKkB,QAAS,OAClB,IAAKiH,GAAgBM,GAAS,EAAI,CAChCzI,KAAK4F,YAAY,MACjB5F,KAAKkB,QAAU,I,MACV,GAAIiH,GAAgBM,EAAS,EAAG,CACrCzI,KAAK4F,YAAY,OACjB5F,KAAKkB,QAAU,I,GAInB,MAAM0H,EAAO,KACX,IAAK5I,KAAKkB,SAAWlB,KAAKmB,WAAa,EAAG,CACxCnB,KAAK4F,aAAauC,E,CAEpBnI,KAAKgB,WAAa,MAClBhB,KAAKqB,gBAAkB,MACvB/D,SAASwJ,KAAKnJ,MAAM0K,OAAS,GAC7B/K,SAASwJ,KAAKnJ,MAAM2K,WAAa,GACjC/D,OAAOC,oBAAoB,YAAa+D,GACxChE,OAAOC,oBAAoB,UAAWoE,GACtC5I,KAAKsE,uBAAyBrH,UAC9B+C,KAAKyE,qBAAuBxH,SAAS,EAGvC+C,KAAKsE,uBAAyBiE,EAC9BvI,KAAKyE,qBAAuBmE,EAC5BrE,OAAOO,iBAAiB,YAAayD,GACrChE,OAAOO,iBAAiB,UAAW8D,E,CAG7B,aAAAC,CAAczK,EAAoB+H,EAAa9F,GACrD,MAAMyI,EAAW1K,EAAKE,KAAO0B,KAAKsB,kBAElC,MAAMyH,EAAc,CAClBC,EAAA,QAAMC,MAAM,wBACVD,EAAA,WAASE,KAAM9K,EAAK+K,KAAMC,KAAK,KAAKC,MAAM,UAAUC,KAAMlL,EAAKkL,QAEjEN,EAAA,QAAMC,MAAM,yBACVD,EAAA,QAAMC,MAAM,8BACVD,EAAA,WACEO,GAAG,OACHC,QAASV,EAAW,4BAA8B,mBAClDO,MAAM,WAELjL,EAAKqL,SAIZrL,EAAKsL,KACHV,EAAA,YACEC,MAAM,sBACNO,QAAQ,MACRG,WAAW,iBACXF,MAAM,GAAE,cACI,UAKlB,MAAMG,EAAc,CAClBX,MAAO,CAAE,kBAAmB,KAAM,0BAA2BH,GAC7D,eAAgBA,EAAY,OAAmB7L,UAC/C4M,MAAOxJ,EAAYjC,EAAKqL,MAAQxM,UAChC6M,SAAU3D,IAAQnG,KAAKa,YAAc,GAAI,EACzCkJ,QAAS,IAAM/J,KAAKoH,gBAAgBhJ,EAAKE,IACzC0L,UAAYpF,GAAqB5E,KAAKsG,kBAAkB1B,EAAGuB,GAC3D8D,QAAS,KAAQjK,KAAKa,YAAcsF,CAAG,GAGzC,MAAM+D,EAAYlK,KAAKG,aAAe,UAAY/B,EAAKN,KAEvD,OAAOoM,EACHlB,EAAA,QAAOY,EAAa9L,KAAMM,EAAKN,MAAOiL,GACtCC,EAAA,aAAYY,EAAaO,KAAK,UAAUpB,E,CAG9C,MAAAqB,GACE,MAAMC,EAAerK,KAAKtC,gBAAkB,aAC5C,MAAM2C,EAAYL,KAAKK,WAAaL,KAAKc,eACzC,MAAML,SAAEA,EAAQC,YAAEA,GAAgBV,KAElC,MAAMsK,EAAkC,CACtC,YAAa,KACb,wBAAyBD,EACzB,sBAAuBA,EACvB,uBAAwBhK,EACxB,uBAAwBL,KAAKY,YAC7B,uBAAwBZ,KAAKW,UAG/B,OACEqI,EAACuB,EAAI,CAAA9D,IAAA,2CAAC9I,MAAO,CAAE6M,QAAS,QAASC,SAAU,aACzCzB,EAAA,OAAAvC,IAAA,2CAAKwC,MAAOqB,EAAM,aAAcD,EAAe,kBAAoB,uBAGjErB,EAAA,OAAAvC,IAAA,2CAAKwC,MAAM,qBACTD,EAAA,UAAAvC,IAAA,2CACE0D,KAAK,SACLlB,MAAM,wBACNc,QAAS,IAAM/J,KAAKsH,eAAc,aACtBjH,EAAY,oBAAsB,sBAAqB,gBACpDA,EAAY,QAAU,QAGrC2I,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,yBAAwB,cAAa,QAC/CD,EAAA,OAAAvC,IAAA,2CAAKwC,MAAM,oBAAoByB,QAAQ,YAAYC,KAAK,OAAOC,MAAM,6BAA6BC,UAAU,QAAO,cAAa,QAC9H7B,EAAA,QAAAvC,IAAA,2CAAMqE,EAAE,qKAAqKH,KAAK,mBAItL3B,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,2BAA0B,cAAa,QACjDD,EAAA,WAAAvC,IAAA,2CACEyC,KAAM7I,EAAY,cAAgB,gBAClC+I,KAAK,KACLC,MAAM,eAOdL,EAAA,OAAAvC,IAAA,2CAAKwC,MAAM,kBAAkB8B,SAAUnG,GAAK5E,KAAKkH,iBAAiBtC,IAC/D,MACC,IAAIoG,EAAU,EACd,OAAOhL,KAAKX,aAAa4L,KAAIC,GAC3BlC,EAAA,OAAKC,MAAM,oBACRiC,EAAMzB,OACLT,EAAA,QAAMC,MAAM,0BACVD,EAAA,QAAMC,MAAM,8BACVD,EAAA,WAASO,GAAG,OAAOC,QAAQ,wBAAwBH,MAAM,WACtD6B,EAAMzB,SAKdyB,EAAMjN,MAAMgN,KAAI7M,GAAQ4B,KAAK6I,cAAczK,EAAM4M,IAAW3K,OAGlE,EAhBA,IAoBH2I,EAAA,OAAAvC,IAAA,2CAAKwC,MAAM,qBACTD,EAAA,WAAAvC,IAAA,2CACEwC,MAAM,yBACNkC,KAAK,SACL/B,KAAK,WACLO,WAAW,iBACXyB,SAAUpL,KAAKW,WAIjBqI,EAAA,UAAAvC,IAAA,2CACE0D,KAAK,SACLlB,MAAM,wBACNY,MAAOQ,EAAe,WAAa,YAAW,aAClCA,EAAe,gBAAkB,kBAC7CN,QAAS,IAAM/J,KAAKuH,sBAEpByB,EAAA,WAAAvC,IAAA,2CAASyC,KAAMmB,EAAe,OAAS,YAAajB,KAAK,KAAKC,MAAM,aAItEL,EAAA,UAAAvC,IAAA,2CACE0D,KAAK,SACL7L,GAAIgB,EACJ2J,MAAM,yCAAwC,aAClC5I,EAAY,SAASI,IAAa,iBAAiBA,IAC/DsJ,QAAUnF,GAAM5E,KAAKyH,iBAAiB7C,IAEtCoE,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,sDACVD,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,8BACVD,EAAA,WAAAvC,IAAA,2CAAS8C,GAAG,OAAOC,QAAQ,4BAA4BH,MAAM,WAC1D5I,KAIPuI,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,mDAAkD,cAAa,QACzED,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,mCACVD,EAAA,WAAAvC,IAAA,2CAASyC,KAAK,gBAAgBE,KAAK,KAAKC,MAAM,aAEhDL,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,oCACVD,EAAA,WAAAvC,IAAA,2CAASyC,KAAK,SAASE,KAAK,KAAKC,MAAM,YACvCL,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,2BACVD,EAAA,WAAAvC,IAAA,2CAAS8C,GAAG,OAAOC,QAAQ,wBAAwBH,MAAM,WACtD3I,UAWbV,KAAKc,gBACLkI,EAAA,OAAAvC,IAAA,2CACEwC,MAAO,CACL,2BAA4B,KAC5B,oCAAqCjJ,KAAKqB,iBAE5CgK,aAAc,IAAMrL,KAAK8H,+BACzBwD,aAAc,IAAMtL,KAAKgI,+BACzBuD,YAAc3G,GAAkB5E,KAAKiI,4BAA4BrD,GAAE,cACvD,S,4lCAhgBEjF,EAAA6F,sBAAwB,E","ignoreList":[]}

package/dist/components/ds-select.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{d as a}from"./p-C4WbCXBj.js";const n=()=>`.select-host.sc-ds-select-h{display:inline-block;width:100%;position:relative}.inactive.sc-ds-select-h{opacity:0.5;pointer-events:none}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-075) 0 var(--dimension-space-100);border:none;border-radius:var(--dimension-radius-050);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);cursor:pointer;box-sizing:border-box;gap:var(--dimension-space-050);font-family:inherit;outline:none;--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.trigger.sc-ds-select:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.trigger.sc-ds-select:hover:not(:disabled){background-color:var(--_hover-bg)}.trigger.sc-ds-select:active:not(:disabled){background-color:var(--_pressed-bg)}.trigger--open.sc-ds-select{background-color:var(--_pressed-bg)}.trigger__label.sc-ds-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);color:var(--color-foreground-primary)}.trigger__label--placeholder.sc-ds-select{color:var(--color-foreground-secondary)}.trigger__chevron.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary);transition:transform var(--effect-motion-short-2)}.trigger--open.sc-ds-select .trigger__chevron.sc-ds-select{transform:rotate(180deg)}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select option";this.inactive=false;this.isOpen=false;this.triggerEl=null;this.menuEl=null}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",(e=>{const s=e.detail;if(s?.value!==undefined){this.value=String(s.value);this.dsChange.emit(this.value)}this.isOpen=false}));this.menuEl?.addEventListener("dsClose",(()=>{this.isOpen=false}))}onIsOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((e=>({label:e.label,value:e.value,isSelected:e.value===this.value})))}open(){if(this.inactive||!this.options.length)return;if(this.menuEl&&this.triggerEl){this.menuEl.menuWidth=`${this.triggerEl.offsetWidth}px`;this.menuEl.anchor=this.triggerEl}this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false}toggle(){if(this.isOpen){this.close()}else{this.open()}}handleKeyDown(e){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault();this.open();break}}else{if(e.key==="Escape"){e.preventDefault();this.close();this.triggerEl?.focus()}}}get selectedLabel(){const e=this.options.find((e=>e.value===this.value));return e?.label??""}get hasSelection(){return!!this.options.find((e=>e.value===this.value))}render(){const e=this.hasSelection?this.selectedLabel:this.placeholder;const s=!this.hasSelection;return i(r,{key:"6e967914121698c83b21e535da616f306816f4f9",class:{"select-host":true,inactive:this.inactive}},i("button",{key:"303b48a277fe4c6105d00298a5193a26a42c6a21",ref:e=>{this.triggerEl=e??null},type:"button",class:{trigger:true,"trigger--open":this.isOpen},disabled:this.inactive,role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle()},i("span",{key:"4d237341d1c16a4f28054907a06a384a4ac2d8e8",class:{trigger__label:true,"trigger__label--placeholder":s}},e),i("svg",{key:"56b45fe4cb6d958e2610cd8948a5830f8687fbe4",class:"trigger__chevron",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},i("path",{key:"163554622f7894eae5e0afe4998f82aea6c669ad",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.25","stroke-linecap":"round","stroke-linejoin":"round"}))),i("ds-menu",{key:"8a2c2b850fdd4e49854c9c62a15194a1bb221218",ref:e=>{this.menuEl=e??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return n()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-menu"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),l)}break;case"ds-menu":if(!customElements.get(o(e))){a()}break}}))}c();const h=l;const d=c;export{h as DsSelect,d as defineCustomElement};
+import{p as e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{d as n}from"./p-C4VSrrAB.js";const a=()=>`.select-host.sc-ds-select-h{display:inline-block;width:100%;position:relative}.inactive.sc-ds-select-h{opacity:0.5;pointer-events:none}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-075) 0 var(--dimension-space-100);border:none;border-radius:var(--dimension-radius-050);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);cursor:pointer;box-sizing:border-box;gap:var(--dimension-space-050);font-family:inherit;outline:none;--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.trigger.sc-ds-select:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.trigger.sc-ds-select:hover:not(:disabled){background-color:var(--_hover-bg)}.trigger.sc-ds-select:active:not(:disabled){background-color:var(--_pressed-bg)}.trigger--open.sc-ds-select{background-color:var(--_pressed-bg)}.trigger__label.sc-ds-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);color:var(--color-foreground-primary)}.trigger__label--placeholder.sc-ds-select{color:var(--color-foreground-secondary)}.trigger__chevron.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary);transition:transform var(--effect-motion-short-2)}.trigger--open.sc-ds-select .trigger__chevron.sc-ds-select{transform:rotate(180deg)}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select option";this.inactive=false;this.isOpen=false;this.triggerEl=null;this.menuEl=null}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",(e=>{const s=e.detail;if(s?.value!==undefined){this.value=String(s.value);this.dsChange.emit(this.value)}this.isOpen=false}));this.menuEl?.addEventListener("dsClose",(()=>{this.isOpen=false}))}onIsOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((e=>({label:e.label,value:e.value,isSelected:e.value===this.value})))}open(){if(this.inactive||!this.options.length)return;if(this.menuEl&&this.triggerEl){this.menuEl.menuWidth=`${this.triggerEl.offsetWidth}px`;this.menuEl.anchor=this.triggerEl}this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false}toggle(){if(this.isOpen){this.close()}else{this.open()}}handleKeyDown(e){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault();this.open();break}}else{if(e.key==="Escape"){e.preventDefault();this.close();this.triggerEl?.focus()}}}get selectedLabel(){const e=this.options.find((e=>e.value===this.value));return e?.label??""}get hasSelection(){return!!this.options.find((e=>e.value===this.value))}render(){const e=this.hasSelection?this.selectedLabel:this.placeholder;const s=!this.hasSelection;return i(r,{key:"47854c5a69705adc07ca601f31e262d3d8d74771",class:{"select-host":true,inactive:this.inactive}},i("button",{key:"2fa71b2e7bb4f890a37a130c6af50cb0cb05df81",ref:e=>{this.triggerEl=e??null},type:"button",class:{trigger:true,"trigger--open":this.isOpen},disabled:this.inactive,role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle()},i("span",{key:"4ce5d30c16af2dd2188d19dfc13d96b3d3bfbe6e",class:{trigger__label:true,"trigger__label--placeholder":s}},e),i("svg",{key:"8a942bde794824fb5b79565d4d297c7b3a42bed4",class:"trigger__chevron",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},i("path",{key:"b937494cd4d3bdf9924541d8f77db13fef11b8b6",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.25","stroke-linecap":"round","stroke-linejoin":"round"}))),i("ds-menu",{key:"d8f76d473fea216bac4db040441288b1da9cd87b",ref:e=>{this.menuEl=e??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return a()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-menu"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),l)}break;case"ds-menu":if(!customElements.get(o(e))){n()}break}}))}c();const d=l;const h=c;export{d as DsSelect,h as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["selectCss","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","placeholder","inactive","isOpen","triggerEl","menuEl","componentDidLoad","anchor","addEventListener","e","detail","undefined","String","dsChange","emit","onIsOpenChange","open","onOptionsChange","syncMenuItems","onValueChange","items","map","opt","label","isSelected","length","menuWidth","offsetWidth","close","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","found","find","o","hasSelection","render","showPlaceholder","h","Host","class","ref","el","type","trigger","disabled","role","ariaLabel","ariaLabelledby","onClick","trigger__label","width","height","viewBox","fill","d","stroke","side","align"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["/* ==========================================================================\n   Select — combobox-pattern select using ds-menu for the dropdown.\n   ========================================================================== */\n\n:host(.select-host) {\n  display: inline-block;\n  width: 100%;\n  position: relative;\n}\n\n:host(.inactive) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* ── Trigger button ──────────────────────────────────────────────────────── */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-075) 0 var(--dimension-space-100);\n  border: none;\n  border-radius: var(--dimension-radius-050);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  cursor: pointer;\n  box-sizing: border-box;\n  gap: var(--dimension-space-050);\n  font-family: inherit;\n  outline: none;\n\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.trigger:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--_hover-bg);\n}\n\n.trigger:active:not(:disabled) {\n  background-color: var(--_pressed-bg);\n}\n\n.trigger--open {\n  background-color: var(--_pressed-bg);\n}\n\n/* ── Trigger label ───────────────────────────────────────────────────────── */\n\n.trigger__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  color: var(--color-foreground-primary);\n}\n\n.trigger__label--placeholder {\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Chevron icon ────────────────────────────────────────────────────────── */\n\n.trigger__chevron {\n  flex-shrink: 0;\n  color: var(--color-foreground-secondary);\n  transition: transform var(--effect-motion-short-2);\n}\n\n.trigger--open .trigger__chevron {\n  transform: rotate(180deg);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { MenuItemData } from '../Menu/Menu';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Array of options. Set via JS property.\n   * @example el.options = [{ label: 'Apple', value: 'apple' }];\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /** Currently selected value. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /** Placeholder shown when no value is selected. */\n  @Prop() placeholder: string = 'Select option';\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emits the selected value string. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private isOpen: boolean = false;\n\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n\n  componentDidLoad() {\n    // Wire up the menu anchor to the trigger button\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n    }\n    // Listen for menu selection events\n    this.menuEl?.addEventListener('dsSelect', (e: Event) => {\n      const detail = (e as CustomEvent<MenuItemData>).detail;\n      if (detail?.value !== undefined) {\n        this.value = String(detail.value);\n        this.dsChange.emit(this.value);\n      }\n      this.isOpen = false;\n    });\n    // Listen for menu close event\n    this.menuEl?.addEventListener('dsClose', () => {\n      this.isOpen = false;\n    });\n  }\n\n  @Watch('isOpen')\n  onIsOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('options')\n  onOptionsChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.syncMenuItems();\n  }\n\n  private syncMenuItems() {\n    if (!this.menuEl) return;\n    this.menuEl.items = this.options.map(opt => ({\n      label: opt.label,\n      value: opt.value,\n      isSelected: opt.value === this.value,\n    }));\n  }\n\n  private open() {\n    if (this.inactive || !this.options.length) return;\n    // Sync menu width to trigger width\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.menuWidth = `${this.triggerEl.offsetWidth}px`;\n      this.menuEl.anchor = this.triggerEl;\n    }\n    this.syncMenuItems();\n    this.isOpen = true;\n  }\n\n  private close() {\n    this.isOpen = false;\n  }\n\n  private toggle() {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    // Only handle keydown on the trigger button\n    if (document.activeElement !== this.triggerEl) return;\n\n    if (!this.isOpen) {\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          this.open();\n          break;\n      }\n    } else {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        this.close();\n        this.triggerEl?.focus();\n      }\n    }\n  }\n\n  private get selectedLabel(): string {\n    const found = this.options.find(o => o.value === this.value);\n    return found?.label ?? '';\n  }\n\n  private get hasSelection(): boolean {\n    return !!this.options.find(o => o.value === this.value);\n  }\n\n  render() {\n    const label = this.hasSelection ? this.selectedLabel : this.placeholder;\n    const showPlaceholder = !this.hasSelection;\n\n    return (\n      <Host class={{ 'select-host': true, inactive: this.inactive }}>\n        <button\n          ref={el => {\n            this.triggerEl = (el as HTMLButtonElement) ?? null;\n          }}\n          type=\"button\"\n          class={{ trigger: true, 'trigger--open': this.isOpen }}\n          disabled={this.inactive}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={this.isOpen}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          onClick={() => this.toggle()}\n        >\n          <span class={{ 'trigger__label': true, 'trigger__label--placeholder': showPlaceholder }}>\n            {label}\n          </span>\n          <svg\n            class=\"trigger__chevron\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M4 6L8 10L12 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.25\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n        <ds-menu\n          ref={el => {\n            this.menuEl = (el as HTMLDsMenuElement) ?? null;\n          }}\n          side=\"bottom\"\n          align=\"start\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["selectCss","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","placeholder","inactive","isOpen","triggerEl","menuEl","componentDidLoad","anchor","addEventListener","e","detail","undefined","String","dsChange","emit","onIsOpenChange","open","onOptionsChange","syncMenuItems","onValueChange","items","map","opt","label","isSelected","length","menuWidth","offsetWidth","close","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","found","find","o","hasSelection","render","showPlaceholder","h","Host","class","ref","el","type","trigger","disabled","role","ariaLabel","ariaLabelledby","onClick","trigger__label","width","height","viewBox","fill","d","stroke","side","align"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["/* ==========================================================================\n   Select — combobox-pattern select using ds-menu for the dropdown.\n   ========================================================================== */\n\n:host(.select-host) {\n  display: inline-block;\n  width: 100%;\n  position: relative;\n}\n\n:host(.inactive) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* ── Trigger button ──────────────────────────────────────────────────────── */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-075) 0 var(--dimension-space-100);\n  border: none;\n  border-radius: var(--dimension-radius-050);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  cursor: pointer;\n  box-sizing: border-box;\n  gap: var(--dimension-space-050);\n  font-family: inherit;\n  outline: none;\n\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.trigger:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--_hover-bg);\n}\n\n.trigger:active:not(:disabled) {\n  background-color: var(--_pressed-bg);\n}\n\n.trigger--open {\n  background-color: var(--_pressed-bg);\n}\n\n/* ── Trigger label ───────────────────────────────────────────────────────── */\n\n.trigger__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  color: var(--color-foreground-primary);\n}\n\n.trigger__label--placeholder {\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Chevron icon ────────────────────────────────────────────────────────── */\n\n.trigger__chevron {\n  flex-shrink: 0;\n  color: var(--color-foreground-secondary);\n  transition: transform var(--effect-motion-short-2);\n}\n\n.trigger--open .trigger__chevron {\n  transform: rotate(180deg);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Array of options. Set via JS property.\n   * @example el.options = [{ label: 'Apple', value: 'apple' }];\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /** Currently selected value. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /** Placeholder shown when no value is selected. */\n  @Prop() placeholder: string = 'Select option';\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emits the selected value string. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private isOpen: boolean = false;\n\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n\n  componentDidLoad() {\n    // Wire up the menu anchor to the trigger button\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n    }\n    // Listen for menu selection events\n    this.menuEl?.addEventListener('dsSelect', (e: Event) => {\n      const detail = (e as CustomEvent<MenuItemData>).detail;\n      if (detail?.value !== undefined) {\n        this.value = String(detail.value);\n        this.dsChange.emit(this.value);\n      }\n      this.isOpen = false;\n    });\n    // Listen for menu close event\n    this.menuEl?.addEventListener('dsClose', () => {\n      this.isOpen = false;\n    });\n  }\n\n  @Watch('isOpen')\n  onIsOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('options')\n  onOptionsChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.syncMenuItems();\n  }\n\n  private syncMenuItems() {\n    if (!this.menuEl) return;\n    this.menuEl.items = this.options.map(opt => ({\n      label: opt.label,\n      value: opt.value,\n      isSelected: opt.value === this.value,\n    }));\n  }\n\n  private open() {\n    if (this.inactive || !this.options.length) return;\n    // Sync menu width to trigger width\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.menuWidth = `${this.triggerEl.offsetWidth}px`;\n      this.menuEl.anchor = this.triggerEl;\n    }\n    this.syncMenuItems();\n    this.isOpen = true;\n  }\n\n  private close() {\n    this.isOpen = false;\n  }\n\n  private toggle() {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    // Only handle keydown on the trigger button\n    if (document.activeElement !== this.triggerEl) return;\n\n    if (!this.isOpen) {\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          this.open();\n          break;\n      }\n    } else {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        this.close();\n        this.triggerEl?.focus();\n      }\n    }\n  }\n\n  private get selectedLabel(): string {\n    const found = this.options.find(o => o.value === this.value);\n    return found?.label ?? '';\n  }\n\n  private get hasSelection(): boolean {\n    return !!this.options.find(o => o.value === this.value);\n  }\n\n  render() {\n    const label = this.hasSelection ? this.selectedLabel : this.placeholder;\n    const showPlaceholder = !this.hasSelection;\n\n    return (\n      <Host class={{ 'select-host': true, inactive: this.inactive }}>\n        <button\n          ref={el => {\n            this.triggerEl = (el as HTMLButtonElement) ?? null;\n          }}\n          type=\"button\"\n          class={{ trigger: true, 'trigger--open': this.isOpen }}\n          disabled={this.inactive}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={this.isOpen}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          onClick={() => this.toggle()}\n        >\n          <span class={{ 'trigger__label': true, 'trigger__label--placeholder': showPlaceholder }}>\n            {label}\n          </span>\n          <svg\n            class=\"trigger__chevron\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M4 6L8 10L12 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.25\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n        <ds-menu\n          ref={el => {\n            this.menuEl = (el as HTMLDsMenuElement) ?? null;\n          }}\n          side=\"bottom\"\n          align=\"start\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-C4VSrrAB.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,c as i,h as s,a as n,t as o}from"./index.js";import{T as r}from"./p-BRju0sEC.js";import{r as a}from"./p-CYJ-de0u.js";import{r as d}from"./p-BvmooLHV.js";function u(e){const{anchorRect:t,popupWidth:i,popupHeight:s,side:n,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:u,viewportHeight:c}=e;let h=0;let l=0;switch(n){case"top":l=t.top-s-r;h=o==="start"?t.left+a:o==="end"?t.right-i+a:t.left+t.width/2-i/2+a;break;case"bottom":l=t.bottom+r;h=o==="start"?t.left+a:o==="end"?t.right-i+a:t.left+t.width/2-i/2+a;break;case"left":h=t.left-i-r;l=o==="start"?t.top+a:o==="end"?t.bottom-s+a:t.top+t.height/2-s/2+a;break;case"right":h=t.right+r;l=o==="start"?t.top+a:o==="end"?t.bottom-s+a:t.top+t.height/2-s/2+a;break}return{x:Math.min(Math.max(h,d),u-i-d),y:Math.min(Math.max(l,d),c-s-d)}}const c=()=>`.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-3) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-075);-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:100%;min-height:var(--dimension-size-400);padding:var(--dimension-space-075);box-sizing:border-box;border:none;border-radius:var(--dimension-radius-025);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_selected-bg:var(--color-interaction-active)}.menu-item.sc-ds-menu:has(.menu-item__subtext){align-items:flex-start}.menu-item.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.menu-item--selected.sc-ds-menu::after{background:var(--_selected-bg);transition:none}.menu-item.sc-ds-menu:hover:not(:disabled):not(.menu-item--selected)::after,.menu-item--focused.sc-ds-menu:not(:disabled):not(.menu-item--selected)::after{background:var(--_hover-bg);transition:none}.menu-item.sc-ds-menu:active:not(:disabled)::after{background:var(--_pressed-bg);transition:none}.menu-item.sc-ds-menu:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.menu-item--inactive.sc-ds-menu{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;z-index:1;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const h=8;const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=i(this,"dsClose");this.dsSelect=i(this,"dsSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=r.space050;this.alignOffset=0;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.schedulePositionUpdate((()=>{if(!this.listenersReady){this.listenersReady=true;this.focusInitialItem();this.setupListeners()}}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return a(r.space050,r.space050)}get sideOffsetPx(){return a(this.sideOffset,r.space050)}get alignOffsetPx(){return a(this.alignOffset,0)}get popupFallbackWidthPx(){return a(r.menuWidthXs,r.menuWidthXs)}get popupFallbackHeightPx(){return a(r.menuFallbackHeight,r.menuFallbackHeight)}get closeAnimationMs(){return d(r.motionShort3,r.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>e.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let t=h;const i=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;e?.();return}if(t>0){t-=1;this.positionRetryRaf=requestAnimationFrame(i)}};this.positionRetryRaf=requestAnimationFrame(i)}calculatePosition(){const e=this.resolvedAnchor;if(!e)return false;const t=this.el.querySelector(".menu-popup");if(!t)return false;this.pos=u({anchorRect:e.getBoundingClientRect(),popupWidth:t.offsetWidth||this.popupFallbackWidthPx,popupHeight:t.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const e=this.flatItems;const t=e.findIndex((e=>e.isSelected&&!e.isInactive));const i=e.findIndex((e=>!e.isInactive));this.focusedIndex=t>=0?t:i>=0?i:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const t=e.target;const i=this.el.querySelector(".menu-popup");const s=this.resolvedAnchor;if(i?.contains(t)||s?.contains(t))return;this.close()};this.scrollResizeHandler=()=>{if(this.open)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false}handleKeyDown(e){if(!this.open)return;const t=this.flatItems;const i=t.map(((e,t)=>({it:e,i:t}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!i.length)return;const s=i.indexOf(this.focusedIndex);const n=s<0?0:s;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusedIndex=i[(n+1)%i.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusedIndex=i[(n-1+i.length)%i.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusedIndex=i[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusedIndex=i[i.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const t=this.el.querySelectorAll(".menu-item");t[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e);this.close()}render(){if(!this.shouldRender)return s(n,{style:{display:"contents"}});const e=this.activeSections;let t=0;const i={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)i["width"]=this.menuWidth;if(this.minWidth)i["min-width"]=this.minWidth;return s(n,{style:{display:"contents"}},s("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:i,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((i,n)=>s("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1},role:i.header?"group":undefined,"aria-label":i.header},i.header&&s("div",{class:"section-header","aria-hidden":"true"},s("span",{class:"text-body-small-emphasis section-label"},i.header)),i.items.map((e=>{const i=t++;const n=this.focusedIndex===i;return s("button",{key:i,type:"button",class:{"menu-item":true,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:n?0:-1,onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=i}},s("div",{class:"menu-item__content"},s("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&s("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&s("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},s("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return c()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-menu"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),l)}break}}))}m();export{l as M,m as d};
+//# sourceMappingURL=p-C4VSrrAB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["computeMenuPosition","input","anchorRect","a","popupWidth","pw","popupHeight","ph","side","align","sideOffsetPx","alignOffsetPx","viewportPadPx","vpPad","viewportWidth","viewportHeight","x","y","top","left","right","width","bottom","height","Math","min","max","menuCss","POSITION_RETRY_BUDGET","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","sideOffset","TOKEN_DEFAULTS","space050","alignOffset","shouldRender","closing","pos","focusedIndex","positionReady","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","schedulePositionUpdate","focusInitialItem","setupListeners","setTimeout","closeAnimationMs","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveCssTimeMs","motionShort3","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","s","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","popup","el","querySelector","getBoundingClientRect","offsetWidth","offsetHeight","window","innerWidth","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","section","si","header","undefined","isFocused","type","isDestructive","disabled","tabIndex","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["export type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuPositionInput {\n  anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;\n  popupWidth: number;\n  popupHeight: number;\n  side: MenuSide;\n  align: MenuAlign;\n  sideOffsetPx: number;\n  alignOffsetPx: number;\n  viewportPadPx: number;\n  viewportWidth: number;\n  viewportHeight: number;\n}\n\n/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */\nexport function computeMenuPosition(input: MenuPositionInput): { x: number; y: number } {\n  const {\n    anchorRect: a,\n    popupWidth: pw,\n    popupHeight: ph,\n    side,\n    align,\n    sideOffsetPx,\n    alignOffsetPx,\n    viewportPadPx: vpPad,\n    viewportWidth,\n    viewportHeight,\n  } = input;\n\n  let x = 0;\n  let y = 0;\n\n  switch (side) {\n    case 'top':\n      y = a.top - ph - sideOffsetPx;\n      x =\n        align === 'start'\n          ? a.left + alignOffsetPx\n          : align === 'end'\n            ? a.right - pw + alignOffsetPx\n            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n      break;\n    case 'bottom':\n      y = a.bottom + sideOffsetPx;\n      x =\n        align === 'start'\n          ? a.left + alignOffsetPx\n          : align === 'end'\n            ? a.right - pw + alignOffsetPx\n            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n      break;\n    case 'left':\n      x = a.left - pw - sideOffsetPx;\n      y =\n        align === 'start'\n          ? a.top + alignOffsetPx\n          : align === 'end'\n            ? a.bottom - ph + alignOffsetPx\n            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n      break;\n    case 'right':\n      x = a.right + sideOffsetPx;\n      y =\n        align === 'start'\n          ? a.top + alignOffsetPx\n          : align === 'end'\n            ? a.bottom - ph + alignOffsetPx\n            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n      break;\n  }\n\n  return {\n    x: Math.min(Math.max(x, vpPad), viewportWidth - pw - vpPad),\n    y: Math.min(Math.max(y, vpPad), viewportHeight - ph - vpPad),\n  };\n}\n","/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: var(--dimension-menu-width-xs);\n  max-width: var(--dimension-panel-width-lg);\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  /* Split elevation: shadow on shell, inset highlight on ::after (combined token clips with overflow:hidden). */\n  box-shadow: var(--effect-shadow-elevated-floating);\n  animation: menuFadeIn var(--effect-motion-short-2) forwards;\n  backface-visibility: hidden;\n  will-change: transform;\n}\n\n.menu-popup::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--effect-highlight-elevated-floating);\n}\n\n.menu-popup--closing {\n  animation: menuFadeOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes menuFadeIn {\n  from { opacity: 0; transform: inherit scale(0.97); }\n  to   { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\n.menu-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n}\n\n.menu-section--divided {\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-075);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.section-label {\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Items ───────────────────────────────────────────────────────────────── */\n\n.menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: 100%;\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  text-align: left;\n  color: inherit;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_selected-bg: var(--color-interaction-active);\n}\n\n.menu-item:has(.menu-item__subtext) {\n  align-items: flex-start;\n}\n\n/* Interaction layer — same ::after pattern as tabs / BarNav trigger */\n.menu-item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.menu-item--selected::after {\n  background: var(--_selected-bg);\n  transition: none;\n}\n\n.menu-item:hover:not(:disabled):not(.menu-item--selected)::after,\n.menu-item--focused:not(:disabled):not(.menu-item--selected)::after {\n  background: var(--_hover-bg);\n  transition: none;\n}\n\n.menu-item:active:not(:disabled)::after {\n  background: var(--_pressed-bg);\n  transition: none;\n}\n\n.menu-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.menu-item--inactive {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.menu-item--destructive .menu-item__label {\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n.menu-item__content {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n.menu-item__label {\n  color: var(--color-foreground-secondary);\n}\n\n.menu-item:has(.menu-item__subtext) .menu-item__label,\n.menu-item--selected .menu-item__label {\n  color: var(--color-foreground-primary);\n}\n\n.menu-item__subtext {\n  color: var(--color-foreground-secondary);\n  line-height: 1.4;\n}\n\n/* ── Toggle suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__toggle {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n  height: var(--dimension-size-250);\n  border-radius: var(--dimension-radius-125);\n  background-color: var(--color-background-translucent);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on {\n  background-color: var(--color-background-medium-brand);\n}\n\n.menu-item__toggle-thumb {\n  position: absolute;\n  top: var(--dimension-space-025);\n  left: var(--dimension-space-025);\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  border-radius: 50%;\n  background-color: var(--color-foreground-on-bold-background-primary);\n  transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n  transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\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  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n  @Prop() sideOffset: number | string = TOKEN_DEFAULTS.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\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\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n  private positionRetryRaf: number | null = null;\n  private listenersReady = false;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.listenersReady = false;\n      this.schedulePositionUpdate(() => {\n        if (!this.listenersReady) {\n          this.listenersReady = true;\n          this.focusInitialItem();\n          this.setupListeners();\n        }\n      });\n    } else if (this.shouldRender) {\n      this.cancelPositionRetry();\n      this.closing = true;\n      this.teardownListeners();\n      this.listenersReady = false;\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n      }, this.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('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 resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\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 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(s => s.items);\n  }\n\n  private cancelPositionRetry() {\n    if (this.positionRetryRaf !== null) {\n      cancelAnimationFrame(this.positionRetryRaf);\n      this.positionRetryRaf = null;\n    }\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\n    this.cancelPositionRetry();\n    this.positionReady = false;\n\n    let remaining = POSITION_RETRY_BUDGET;\n\n    const attempt = () => {\n      this.positionRetryRaf = null;\n      if (!this.open) return;\n\n      if (this.calculatePosition()) {\n        this.positionReady = true;\n        onReady?.();\n        return;\n      }\n\n      if (remaining > 0) {\n        remaining -= 1;\n        this.positionRetryRaf = requestAnimationFrame(attempt);\n      }\n    };\n\n    this.positionRetryRaf = requestAnimationFrame(attempt);\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return false;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return false;\n\n    this.pos = computeMenuPosition({\n      anchorRect: anchorEl.getBoundingClientRect(),\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: this.alignOffsetPx,\n      viewportPadPx: this.viewportPadPx,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    return true;\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\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\n      ? selectedIdx\n      : (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    this.scrollResizeHandler = () => {\n      if (this.open) this.calculatePosition();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.resolvedAnchor?.focus();\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.open) return;\n    const flat = this.flatItems;\n    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).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(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.close();\n        break;\n      case 'Tab':\n        e.preventDefault();\n        this.close();\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    this.dsSelect.emit(item);\n    this.close();\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\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          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n          style={popupStyle}\n          role=\"menu\"\n          aria-label=\"Menu\"\n          aria-orientation=\"vertical\"\n        >\n          {sections.map((section, si) => (\n            <div\n              key={si}\n              class={{ 'menu-section': true, 'menu-section--divided': si < sections.length - 1 }}\n              role={section.header ? 'group' : undefined}\n              aria-label={section.header}\n            >\n              {section.header && (\n                <div class=\"section-header\" aria-hidden=\"true\">\n                  <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n                </div>\n              )}\n              {section.items.map(item => {\n                const idx = flatIdx++;\n                const isFocused = this.focusedIndex === idx;\n                return (\n                  <button\n                    key={idx}\n                    type=\"button\"\n                    class={{\n                      'menu-item': true,\n                      'menu-item--selected': !!item.isSelected,\n                      'menu-item--inactive': !!item.isInactive,\n                      'menu-item--destructive': !!item.isDestructive,\n                      'menu-item--focused': isFocused,\n                    }}\n                    role=\"menuitem\"\n                    aria-current={item.isSelected ? 'true' : undefined}\n                    disabled={item.isInactive}\n                    tabIndex={isFocused ? 0 : -1}\n                    onClick={() => this.handleItemClick(item)}\n                    onFocus={() => { this.focusedIndex = idx; }}\n                  >\n                    <div class=\"menu-item__content\">\n                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n                        {item.label}\n                      </span>\n                      {item.subtext && (\n                        <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n                      )}\n                    </div>\n                    {item.showToggle && (\n                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden=\"true\">\n                        <div class=\"menu-item__toggle-thumb\" />\n                      </div>\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/components/BarNav/bar-nav-tabs-menu-utils.d.ts

@@ -1,4 +1,4 @@
-import type { MenuSection } from '../Menu/Menu';
+import type { MenuSection } from '../Menu/menu-types';
 import { type TabItem, type TabItemTab } from '../TabGroup/tab-item-utils';
 /** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */
 export declare function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[];

package/dist/types/components/Menu/Menu.d.ts

@@ -1,20 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type MenuSide = 'top' | 'right' | 'bottom' | 'left';
-export type MenuAlign = 'start' | 'center' | 'end';
-export interface MenuItemData {
-    label: string;
-    value?: string;
-    subtext?: string;
-    isSelected?: boolean;
-    isInactive?: boolean;
-    isDestructive?: boolean;
-    showToggle?: boolean;
-    toggleValue?: boolean;
-}
-export interface MenuSection {
-    header?: string;
-    items: MenuItemData[];
-}
+import { type MenuAlign, type MenuSide } from './menu-position';
+import type { MenuItemData, MenuSection } from './menu-types';
 export declare class Menu {
     el: HTMLElement;
     open: boolean;
@@ -43,9 +29,12 @@ export declare class Menu {
     private scrollResizeHandler;
     private closeTimer;
     private itemEls;
+    private positionRetryRaf;
+    private listenersReady;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     onOpenChange(isOpen: boolean): void;
+    onAnchorChange(): void;
     onPositionPropsChange(): void;
     private get viewportPadPx();
     private get sideOffsetPx();
@@ -56,6 +45,10 @@ export declare class Menu {
     private get resolvedAnchor();
     private get activeSections();
     private get flatItems();
+    private cancelPositionRetry;
+    /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */
+    private schedulePositionUpdate;
+    /** @returns `true` when anchor and popup were found and `pos` was updated. */
     private calculatePosition;
     /** Focus the selected item when present, otherwise the first enabled item. */
     private focusInitialItem;