@ds-mo/ui 1.5.0 → 1.6.1

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","dsNavToggle","emit","setItem","String","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:              200px;\n  --_nav-width-collapsed:    48px;\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   *  When `storageKey` is set the component manages this internally —\n   *  do not also bind it from outside in that mode. */\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 the component is self-managing for collapsed state; `dsNavToggle`\n   *  still fires for consumers that want to observe the change. */\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: always emits `dsNavToggle`; when `storageKey` is set\n   *  also mutates `collapsed` directly and persists to `localStorage`. */\n  private applyToggle(next: boolean) {\n    this.dsNavToggle.emit(next);\n    if (this.storageKey) {\n      this.collapsed = next;\n      try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n    }\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","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":[]}

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 n}from"./p-CpbnmEu1.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:"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 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 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 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};
 //# sourceMappingURL=ds-select.js.map

package/dist/components/ds-toast-provider.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const r=new Set;let a=0;function c(){r.forEach((t=>t()))}function d(t){r.add(t);return()=>r.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++a}`;n=[...n,{id:e,intent:"neutral",duration:4e3,...t}];c();return e},success(t,e){return u.show({message:t,intent:"positive",...e})},error(t,e){return u.show({message:t,intent:"negative",...e})},warning(t,e){return u.show({message:t,intent:"warning",...e})},info(t,e){return u.show({message:t,intent:"neutral",...e})},dismiss(t){n=n.filter((e=>e.id!==t));c()},dismissAll(){n=[];c()}};const m=()=>`.toast.sc-ds-toast-provider{animation:toastSlideIn var(--effect-motion-short-3) ease-out;width:100%;max-width:420px}.toast--exit.sc-ds-toast-provider{animation:toastFadeOut 200ms ease-in forwards}.toast-dismiss.sc-ds-toast-provider{background:none;border:none;color:inherit;cursor:pointer;padding:var(--dimension-space-025);margin-left:auto;font-size:16px;line-height:1;opacity:0.7;border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);flex-shrink:0}.toast-dismiss.sc-ds-toast-provider:hover{opacity:1}@keyframes toastSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeOut{from{opacity:1}to{opacity:0}}`;const p={neutral:"var(--color-background-bold-neutral)",brand:"var(--color-background-bold-brand)",positive:"var(--color-background-bold-positive)",negative:"var(--color-background-bold-negative)",warning:"var(--color-background-bold-warning)",caution:"var(--color-background-bold-caution)"};const f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.position="top-center";this.items=[];this.unsubscribe=null}connectedCallback(){this.unsubscribe=d((()=>this.syncFromStore()));this.syncFromStore()}disconnectedCallback(){this.items.forEach((t=>{if(t.timer)clearTimeout(t.timer)}));this.unsubscribe?.()}syncFromStore(){const t=l();const e=new Set(this.items.map((t=>t.data.id)));const s=new Set(t.map((t=>t.id)));const i=this.items.filter((t=>s.has(t.data.id)));const o=t.filter((t=>!e.has(t.id))).map((t=>{const e={data:t,exiting:false,timer:null,remaining:t.duration,startedAt:0,paused:false};if(t.duration>0){e.startedAt=Date.now();e.timer=setTimeout((()=>this.dismissItem(t.id)),t.duration)}return e}));this.items=[...i,...o]}dismissItem(t){this.items=this.items.map((e=>e.data.id===t?{...e,exiting:true,timer:null}:e));setTimeout((()=>{this.items=this.items.filter((e=>e.data.id!==t));u.dismiss(t)}),200)}pauseItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||e.paused||!e.timer)return e;clearTimeout(e.timer);const s=Date.now()-e.startedAt;return{...e,paused:true,timer:null,remaining:Math.max(0,e.remaining-s)}}))}resumeItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||!e.paused||e.remaining<=0)return e;const s=setTimeout((()=>this.dismissItem(t)),e.remaining);return{...e,paused:false,timer:s,startedAt:Date.now()}}))}getPositionStyle(){const t={position:"fixed",zIndex:"9999",display:"flex",flexDirection:"column",gap:"var(--dimension-space-075)",pointerEvents:"none",padding:"var(--dimension-space-100)",maxWidth:"480px",width:"100%",boxSizing:"border-box"};switch(this.position){case"top-center":return{...t,top:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"top-right":return{...t,top:"0",right:"0",alignItems:"flex-end"};case"bottom-center":return{...t,bottom:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"bottom-right":return{...t,bottom:"0",right:"0",alignItems:"flex-end"}}}render(){return s(i,{key:"65f63e4b6bea59e5fd2985c0d5e70d20d332c837",style:{display:"contents"}},s("div",{key:"8501eda233a0a93a01e6567f39ece1a8155aa898",class:"toast-container",role:"region","aria-label":"Notifications","aria-live":"polite",style:this.getPositionStyle()},this.items.map((t=>s("div",{key:t.data.id,class:{toast:true,"toast--exit":t.exiting},role:t.data.intent==="negative"?"alert":"status",style:{backgroundColor:p[t.data.intent],borderRadius:"var(--dimension-radius-125)",boxShadow:"var(--effect-elevation-elevated-floating)",display:"flex",alignItems:"center",gap:"var(--dimension-space-075)",padding:"var(--dimension-space-075) var(--dimension-space-100)",minHeight:"var(--dimension-size-400)",pointerEvents:"auto",color:"var(--color-foreground-on-bold-background-primary)",boxSizing:"border-box"},onMouseEnter:()=>this.pauseItem(t.data.id),onMouseLeave:()=>this.resumeItem(t.data.id)},s("span",{class:"text-body-medium",style:{flex:"1"}},t.data.message),s("button",{type:"button",class:"toast-dismiss",onClick:()=>this.dismissItem(t.data.id),"aria-label":"Dismiss"},"×"))))))}static get style(){return m()}},[2,"ds-toast-provider",{position:[1],items:[32]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-toast-provider"];t.forEach((t=>{switch(t){case"ds-toast-provider":if(!customElements.get(o(t))){customElements.define(o(t),f)}break}}))}g();const h=f;const b=g;export{h as DsToastProvider,b as defineCustomElement};
+import{p as t,H as e,h as s,a as o,t as i}from"./index.js";import{r as n}from"./p-BvmooLHV.js";import{T as r}from"./p-BRju0sEC.js";let a=[];const d=new Set;let c=0;function l(){d.forEach((t=>t()))}function u(t){d.add(t);return()=>d.delete(t)}function m(){return a}function p(){return n(r.animationDelayLong2,r.animationDelayLong2)}const f={show(t){const e=`ds-toast-${++c}`;const s=t.duration??p();a=[...a,{id:e,intent:"neutral",...t,duration:s}];l();return e},success(t,e){return f.show({message:t,intent:"positive",...e})},error(t,e){return f.show({message:t,intent:"negative",...e})},warning(t,e){return f.show({message:t,intent:"warning",...e})},info(t,e){return f.show({message:t,intent:"neutral",...e})},dismiss(t){a=a.filter((e=>e.id!==t));l()},dismissAll(){a=[];l()}};const h=()=>`.toast.sc-ds-toast-provider{animation:toastSlideIn var(--effect-motion-short-3) ease-out;width:100%;max-width:var(--dimension-panel-width-md)}.toast--exit.sc-ds-toast-provider{animation:toastFadeOut var(--effect-motion-short-3) ease-in forwards}.toast-dismiss.sc-ds-toast-provider{background:none;border:none;color:inherit;cursor:pointer;padding:var(--dimension-space-025);margin-left:auto;font-size:16px;line-height:1;opacity:0.7;border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);flex-shrink:0}.toast-dismiss.sc-ds-toast-provider:hover{opacity:1}@keyframes toastSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeOut{from{opacity:1}to{opacity:0}}`;const g={neutral:"var(--color-background-bold-neutral)",brand:"var(--color-background-bold-brand)",positive:"var(--color-background-bold-positive)",negative:"var(--color-background-bold-negative)",warning:"var(--color-background-bold-warning)",caution:"var(--color-background-bold-caution)"};const b=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.position="top-center";this.items=[];this.unsubscribe=null}get fadeOutMs(){return n(r.motionShort3,r.animationDurationShort3)}connectedCallback(){this.unsubscribe=u((()=>this.syncFromStore()));this.syncFromStore()}disconnectedCallback(){this.items.forEach((t=>{if(t.timer)clearTimeout(t.timer)}));this.unsubscribe?.()}syncFromStore(){const t=m();const e=new Set(this.items.map((t=>t.data.id)));const s=new Set(t.map((t=>t.id)));const o=this.items.filter((t=>s.has(t.data.id)));const i=t.filter((t=>!e.has(t.id))).map((t=>{const e={data:t,exiting:false,timer:null,remaining:t.duration,startedAt:0,paused:false};if(t.duration>0){e.startedAt=Date.now();e.timer=setTimeout((()=>this.dismissItem(t.id)),t.duration)}return e}));this.items=[...o,...i]}dismissItem(t){this.items=this.items.map((e=>e.data.id===t?{...e,exiting:true,timer:null}:e));setTimeout((()=>{this.items=this.items.filter((e=>e.data.id!==t));f.dismiss(t)}),this.fadeOutMs)}pauseItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||e.paused||!e.timer)return e;clearTimeout(e.timer);const s=Date.now()-e.startedAt;return{...e,paused:true,timer:null,remaining:Math.max(0,e.remaining-s)}}))}resumeItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||!e.paused||e.remaining<=0)return e;const s=setTimeout((()=>this.dismissItem(t)),e.remaining);return{...e,paused:false,timer:s,startedAt:Date.now()}}))}getPositionStyle(){const t={position:"fixed",zIndex:"9999",display:"flex",flexDirection:"column",gap:"var(--dimension-space-075)",pointerEvents:"none",padding:"var(--dimension-space-100)",maxWidth:`var(${r.panelWidthMd})`,width:"100%",boxSizing:"border-box"};switch(this.position){case"top-center":return{...t,top:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"top-right":return{...t,top:"0",right:"0",alignItems:"flex-end"};case"bottom-center":return{...t,bottom:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"bottom-right":return{...t,bottom:"0",right:"0",alignItems:"flex-end"}}}render(){return s(o,{key:"37887db881a0b206d6bff33f1ad28f0a7bc82cdd",style:{display:"contents"}},s("div",{key:"43e4508819f149d4696466c3b65722b465e08229",class:"toast-container",role:"region","aria-label":"Notifications","aria-live":"polite",style:this.getPositionStyle()},this.items.map((t=>s("div",{key:t.data.id,class:{toast:true,"toast--exit":t.exiting},role:t.data.intent==="negative"?"alert":"status",style:{backgroundColor:g[t.data.intent],borderRadius:"var(--dimension-radius-125)",boxShadow:"var(--effect-elevation-elevated-floating)",display:"flex",alignItems:"center",gap:"var(--dimension-space-075)",padding:"var(--dimension-space-075) var(--dimension-space-100)",minHeight:"var(--dimension-size-400)",pointerEvents:"auto",color:"var(--color-foreground-on-bold-background-primary)",boxSizing:"border-box"},onMouseEnter:()=>this.pauseItem(t.data.id),onMouseLeave:()=>this.resumeItem(t.data.id)},s("span",{class:"text-body-medium",style:{flex:"1"}},t.data.message),s("button",{type:"button",class:"toast-dismiss",onClick:()=>this.dismissItem(t.data.id),"aria-label":"Dismiss"},"×"))))))}static get style(){return h()}},[2,"ds-toast-provider",{position:[1],items:[32]}]);function v(){if(typeof customElements==="undefined"){return}const t=["ds-toast-provider"];t.forEach((t=>{switch(t){case"ds-toast-provider":if(!customElements.get(i(t))){customElements.define(i(t),b)}break}}))}v();const x=b;const y=v;export{x as DsToastProvider,y as defineCustomElement};
 //# sourceMappingURL=ds-toast-provider.js.map

package/dist/components/ds-toast-provider.js.map

@@ -1 +1 @@
-{"version":3,"names":["toasts","listeners","Set","idCounter","emit","forEach","fn","subscribeToToasts","add","delete","getToasts","toast","show","options","id","intent","duration","success","message","error","warning","info","dismiss","filter","t","dismissAll","toastCss","INTENT_BG","neutral","brand","positive","negative","caution","ToastProvider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","position","items","unsubscribe","connectedCallback","syncFromStore","disconnectedCallback","item","timer","clearTimeout","storeToasts","existingIds","map","i","data","storeIds","kept","has","newItems","state","exiting","remaining","startedAt","paused","Date","now","setTimeout","dismissItem","toastService","pauseItem","elapsed","Math","max","resumeItem","getPositionStyle","base","zIndex","display","flexDirection","gap","pointerEvents","padding","maxWidth","width","boxSizing","top","left","transform","alignItems","right","bottom","render","h","Host","key","style","class","role","backgroundColor","borderRadius","boxShadow","minHeight","color","onMouseEnter","onMouseLeave","flex","type","onClick"],"sources":["src/wc/components/Toast/toast-service.ts","src/wc/components/Toast/Toast.css?tag=ds-toast-provider&encapsulation=scoped","src/wc/components/Toast/Toast.tsx"],"sourcesContent":["export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';\n\nexport interface ToastData {\n  id: string;\n  message: string;\n  intent: ToastIntent;\n  duration: number;\n}\n\nexport interface ToastOptions {\n  message: string;\n  intent?: ToastIntent;\n  duration?: number;\n}\n\nlet toasts: ToastData[] = [];\nconst listeners = new Set<() => void>();\nlet idCounter = 0;\n\nfunction emit() {\n  listeners.forEach(fn => fn());\n}\n\nexport function subscribeToToasts(fn: () => void): () => void {\n  listeners.add(fn);\n  return () => listeners.delete(fn);\n}\n\nexport function getToasts(): ToastData[] {\n  return toasts;\n}\n\nexport const toast = {\n  show(options: ToastOptions): string {\n    const id = `ds-toast-${++idCounter}`;\n    toasts = [...toasts, { id, intent: 'neutral', duration: 4000, ...options }];\n    emit();\n    return id;\n  },\n  success(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'positive', ...options });\n  },\n  error(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'negative', ...options });\n  },\n  warning(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'warning', ...options });\n  },\n  info(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'neutral', ...options });\n  },\n  dismiss(id: string) {\n    toasts = toasts.filter(t => t.id !== id);\n    emit();\n  },\n  dismissAll() {\n    toasts = [];\n    emit();\n  },\n};\n",".toast {\n  animation: toastSlideIn var(--effect-motion-short-3) ease-out;\n  width: 100%;\n  max-width: 420px;\n}\n\n.toast--exit {\n  animation: toastFadeOut 200ms ease-in forwards;\n}\n\n.toast-dismiss {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  padding: var(--dimension-space-025);\n  margin-left: auto;\n  font-size: 16px;\n  line-height: 1;\n  opacity: 0.7;\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  flex-shrink: 0;\n}\n\n.toast-dismiss:hover { opacity: 1; }\n\n@keyframes toastSlideIn {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes toastFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\nimport { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';\n\nexport type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';\n\nconst INTENT_BG: Record<ToastIntent, string> = {\n  neutral:  'var(--color-background-bold-neutral)',\n  brand:    'var(--color-background-bold-brand)',\n  positive: 'var(--color-background-bold-positive)',\n  negative: 'var(--color-background-bold-negative)',\n  warning:  'var(--color-background-bold-warning)',\n  caution:  'var(--color-background-bold-caution)',\n};\n\ninterface ToastItemState {\n  data: ToastData;\n  exiting: boolean;\n  timer: ReturnType<typeof setTimeout> | null;\n  remaining: number;\n  startedAt: number;\n  paused: boolean;\n}\n\n@Component({\n  tag: 'ds-toast-provider',\n  styleUrl: 'Toast.css',\n  scoped: true,\n})\nexport class ToastProvider {\n  @Prop() position: ToastPosition = 'top-center';\n\n  @State() private items: ToastItemState[] = [];\n\n  private unsubscribe: (() => void) | null = null;\n\n  connectedCallback() {\n    this.unsubscribe = subscribeToToasts(() => this.syncFromStore());\n    this.syncFromStore();\n  }\n\n  disconnectedCallback() {\n    this.items.forEach(item => { if (item.timer) clearTimeout(item.timer); });\n    this.unsubscribe?.();\n  }\n\n  private syncFromStore() {\n    const storeToasts = getToasts();\n    const existingIds = new Set(this.items.map(i => i.data.id));\n    const storeIds = new Set(storeToasts.map(t => t.id));\n\n    // Remove items no longer in store (instant, no animation since dismiss() already fires animation)\n    const kept = this.items.filter(i => storeIds.has(i.data.id));\n\n    // Add new items\n    const newItems: ToastItemState[] = storeToasts\n      .filter(t => !existingIds.has(t.id))\n      .map(data => {\n        const state: ToastItemState = {\n          data,\n          exiting: false,\n          timer: null,\n          remaining: data.duration,\n          startedAt: 0,\n          paused: false,\n        };\n        if (data.duration > 0) {\n          state.startedAt = Date.now();\n          state.timer = setTimeout(() => this.dismissItem(data.id), data.duration);\n        }\n        return state;\n      });\n\n    this.items = [...kept, ...newItems];\n  }\n\n  private dismissItem(id: string) {\n    this.items = this.items.map(i =>\n      i.data.id === id ? { ...i, exiting: true, timer: null } : i\n    );\n    setTimeout(() => {\n      this.items = this.items.filter(i => i.data.id !== id);\n      toastService.dismiss(id);\n    }, 200);\n  }\n\n  private pauseItem(id: string) {\n    this.items = this.items.map(i => {\n      if (i.data.id !== id || i.paused || !i.timer) return i;\n      clearTimeout(i.timer);\n      const elapsed = Date.now() - i.startedAt;\n      return { ...i, paused: true, timer: null, remaining: Math.max(0, i.remaining - elapsed) };\n    });\n  }\n\n  private resumeItem(id: string) {\n    this.items = this.items.map(i => {\n      if (i.data.id !== id || !i.paused || i.remaining <= 0) return i;\n      const timer = setTimeout(() => this.dismissItem(id), i.remaining);\n      return { ...i, paused: false, timer, startedAt: Date.now() };\n    });\n  }\n\n  private getPositionStyle(): Record<string, string> {\n    const base: Record<string, string> = {\n      position: 'fixed',\n      zIndex: '9999',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'var(--dimension-space-075)',\n      pointerEvents: 'none',\n      padding: 'var(--dimension-space-100)',\n      maxWidth: '480px',\n      width: '100%',\n      boxSizing: 'border-box',\n    };\n    switch (this.position) {\n      case 'top-center':\n        return { ...base, top: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n      case 'top-right':\n        return { ...base, top: '0', right: '0', alignItems: 'flex-end' };\n      case 'bottom-center':\n        return { ...base, bottom: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n      case 'bottom-right':\n        return { ...base, bottom: '0', right: '0', alignItems: 'flex-end' };\n    }\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class=\"toast-container\"\n          role=\"region\"\n          aria-label=\"Notifications\"\n          aria-live=\"polite\"\n          style={this.getPositionStyle()}\n        >\n          {this.items.map(item => (\n            <div\n              key={item.data.id}\n              class={{ toast: true, 'toast--exit': item.exiting }}\n              role={item.data.intent === 'negative' ? 'alert' : 'status'}\n              style={{\n                backgroundColor: INTENT_BG[item.data.intent],\n                borderRadius: 'var(--dimension-radius-125)',\n                boxShadow: 'var(--effect-elevation-elevated-floating)',\n                display: 'flex',\n                alignItems: 'center',\n                gap: 'var(--dimension-space-075)',\n                padding: 'var(--dimension-space-075) var(--dimension-space-100)',\n                minHeight: 'var(--dimension-size-400)',\n                pointerEvents: 'auto',\n                color: 'var(--color-foreground-on-bold-background-primary)',\n                boxSizing: 'border-box',\n              }}\n              onMouseEnter={() => this.pauseItem(item.data.id)}\n              onMouseLeave={() => this.resumeItem(item.data.id)}\n            >\n              <span class=\"text-body-medium\" style={{ flex: '1' }}>{item.data.message}</span>\n              <button\n                type=\"button\"\n                class=\"toast-dismiss\"\n                onClick={() => this.dismissItem(item.data.id)}\n                aria-label=\"Dismiss\"\n              >\n                &times;\n              </button>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["toasts","listeners","Set","idCounter","emit","forEach","fn","subscribeToToasts","add","delete","getToasts","defaultToastDurationMs","resolveCssTimeMs","TOKEN_DEFAULTS","animationDelayLong2","toast","show","options","id","duration","intent","success","message","error","warning","info","dismiss","filter","t","dismissAll","toastCss","INTENT_BG","neutral","brand","positive","negative","caution","ToastProvider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","position","items","unsubscribe","fadeOutMs","motionShort3","animationDurationShort3","connectedCallback","syncFromStore","disconnectedCallback","item","timer","clearTimeout","storeToasts","existingIds","map","i","data","storeIds","kept","has","newItems","state","exiting","remaining","startedAt","paused","Date","now","setTimeout","dismissItem","toastService","pauseItem","elapsed","Math","max","resumeItem","getPositionStyle","base","zIndex","display","flexDirection","gap","pointerEvents","padding","maxWidth","panelWidthMd","width","boxSizing","top","left","transform","alignItems","right","bottom","render","h","Host","key","style","class","role","backgroundColor","borderRadius","boxShadow","minHeight","color","onMouseEnter","onMouseLeave","flex","type","onClick"],"sources":["src/wc/components/Toast/toast-service.ts","src/wc/components/Toast/Toast.css?tag=ds-toast-provider&encapsulation=scoped","src/wc/components/Toast/Toast.tsx"],"sourcesContent":["import { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';\n\nexport interface ToastData {\n  id: string;\n  message: string;\n  intent: ToastIntent;\n  duration: number;\n}\n\nexport interface ToastOptions {\n  message: string;\n  intent?: ToastIntent;\n  duration?: number;\n}\n\nlet toasts: ToastData[] = [];\nconst listeners = new Set<() => void>();\nlet idCounter = 0;\n\nfunction emit() {\n  listeners.forEach(fn => fn());\n}\n\nexport function subscribeToToasts(fn: () => void): () => void {\n  listeners.add(fn);\n  return () => listeners.delete(fn);\n}\n\nexport function getToasts(): ToastData[] {\n  return toasts;\n}\n\nfunction defaultToastDurationMs(): number {\n  return resolveCssTimeMs(TOKEN_DEFAULTS.animationDelayLong2, TOKEN_DEFAULTS.animationDelayLong2);\n}\n\nexport const toast = {\n  show(options: ToastOptions): string {\n    const id = `ds-toast-${++idCounter}`;\n    const duration = options.duration ?? defaultToastDurationMs();\n    toasts = [...toasts, { id, intent: 'neutral', ...options, duration }];\n    emit();\n    return id;\n  },\n  success(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'positive', ...options });\n  },\n  error(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'negative', ...options });\n  },\n  warning(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'warning', ...options });\n  },\n  info(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'neutral', ...options });\n  },\n  dismiss(id: string) {\n    toasts = toasts.filter(t => t.id !== id);\n    emit();\n  },\n  dismissAll() {\n    toasts = [];\n    emit();\n  },\n};\n",".toast {\n  animation: toastSlideIn var(--effect-motion-short-3) ease-out;\n  width: 100%;\n  max-width: var(--dimension-panel-width-md);\n}\n\n.toast--exit {\n  animation: toastFadeOut var(--effect-motion-short-3) ease-in forwards;\n}\n\n.toast-dismiss {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  padding: var(--dimension-space-025);\n  margin-left: auto;\n  font-size: 16px;\n  line-height: 1;\n  opacity: 0.7;\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  flex-shrink: 0;\n}\n\n.toast-dismiss:hover { opacity: 1; }\n\n@keyframes toastSlideIn {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes toastFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\nimport { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';\n\nexport type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';\n\nconst INTENT_BG: Record<ToastIntent, string> = {\n  neutral:  'var(--color-background-bold-neutral)',\n  brand:    'var(--color-background-bold-brand)',\n  positive: 'var(--color-background-bold-positive)',\n  negative: 'var(--color-background-bold-negative)',\n  warning:  'var(--color-background-bold-warning)',\n  caution:  'var(--color-background-bold-caution)',\n};\n\ninterface ToastItemState {\n  data: ToastData;\n  exiting: boolean;\n  timer: ReturnType<typeof setTimeout> | null;\n  remaining: number;\n  startedAt: number;\n  paused: boolean;\n}\n\n@Component({\n  tag: 'ds-toast-provider',\n  styleUrl: 'Toast.css',\n  scoped: true,\n})\nexport class ToastProvider {\n  @Prop() position: ToastPosition = 'top-center';\n\n  @State() private items: ToastItemState[] = [];\n\n  private unsubscribe: (() => void) | null = null;\n\n  private get fadeOutMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  connectedCallback() {\n    this.unsubscribe = subscribeToToasts(() => this.syncFromStore());\n    this.syncFromStore();\n  }\n\n  disconnectedCallback() {\n    this.items.forEach(item => { if (item.timer) clearTimeout(item.timer); });\n    this.unsubscribe?.();\n  }\n\n  private syncFromStore() {\n    const storeToasts = getToasts();\n    const existingIds = new Set(this.items.map(i => i.data.id));\n    const storeIds = new Set(storeToasts.map(t => t.id));\n\n    // Remove items no longer in store (instant, no animation since dismiss() already fires animation)\n    const kept = this.items.filter(i => storeIds.has(i.data.id));\n\n    // Add new items\n    const newItems: ToastItemState[] = storeToasts\n      .filter(t => !existingIds.has(t.id))\n      .map(data => {\n        const state: ToastItemState = {\n          data,\n          exiting: false,\n          timer: null,\n          remaining: data.duration,\n          startedAt: 0,\n          paused: false,\n        };\n        if (data.duration > 0) {\n          state.startedAt = Date.now();\n          state.timer = setTimeout(() => this.dismissItem(data.id), data.duration);\n        }\n        return state;\n      });\n\n    this.items = [...kept, ...newItems];\n  }\n\n  private dismissItem(id: string) {\n    this.items = this.items.map(i =>\n      i.data.id === id ? { ...i, exiting: true, timer: null } : i\n    );\n    setTimeout(() => {\n      this.items = this.items.filter(i => i.data.id !== id);\n      toastService.dismiss(id);\n    }, this.fadeOutMs);\n  }\n\n  private pauseItem(id: string) {\n    this.items = this.items.map(i => {\n      if (i.data.id !== id || i.paused || !i.timer) return i;\n      clearTimeout(i.timer);\n      const elapsed = Date.now() - i.startedAt;\n      return { ...i, paused: true, timer: null, remaining: Math.max(0, i.remaining - elapsed) };\n    });\n  }\n\n  private resumeItem(id: string) {\n    this.items = this.items.map(i => {\n      if (i.data.id !== id || !i.paused || i.remaining <= 0) return i;\n      const timer = setTimeout(() => this.dismissItem(id), i.remaining);\n      return { ...i, paused: false, timer, startedAt: Date.now() };\n    });\n  }\n\n  private getPositionStyle(): Record<string, string> {\n    const base: Record<string, string> = {\n      position: 'fixed',\n      zIndex: '9999',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'var(--dimension-space-075)',\n      pointerEvents: 'none',\n      padding: 'var(--dimension-space-100)',\n      maxWidth: `var(${TOKEN_DEFAULTS.panelWidthMd})`,\n      width: '100%',\n      boxSizing: 'border-box',\n    };\n    switch (this.position) {\n      case 'top-center':\n        return { ...base, top: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n      case 'top-right':\n        return { ...base, top: '0', right: '0', alignItems: 'flex-end' };\n      case 'bottom-center':\n        return { ...base, bottom: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n      case 'bottom-right':\n        return { ...base, bottom: '0', right: '0', alignItems: 'flex-end' };\n    }\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class=\"toast-container\"\n          role=\"region\"\n          aria-label=\"Notifications\"\n          aria-live=\"polite\"\n          style={this.getPositionStyle()}\n        >\n          {this.items.map(item => (\n            <div\n              key={item.data.id}\n              class={{ toast: true, 'toast--exit': item.exiting }}\n              role={item.data.intent === 'negative' ? 'alert' : 'status'}\n              style={{\n                backgroundColor: INTENT_BG[item.data.intent],\n                borderRadius: 'var(--dimension-radius-125)',\n                boxShadow: 'var(--effect-elevation-elevated-floating)',\n                display: 'flex',\n                alignItems: 'center',\n                gap: 'var(--dimension-space-075)',\n                padding: 'var(--dimension-space-075) var(--dimension-space-100)',\n                minHeight: 'var(--dimension-size-400)',\n                pointerEvents: 'auto',\n                color: 'var(--color-foreground-on-bold-background-primary)',\n                boxSizing: 'border-box',\n              }}\n              onMouseEnter={() => this.pauseItem(item.data.id)}\n              onMouseLeave={() => this.resumeItem(item.data.id)}\n            >\n              <span class=\"text-body-medium\" style={{ flex: '1' }}>{item.data.message}</span>\n              <button\n                type=\"button\"\n                class=\"toast-dismiss\"\n                onClick={() => this.dismissItem(item.data.id)}\n                aria-label=\"Dismiss\"\n              >\n                &times;\n              </button>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-toggle-button-group.js

@@ -1,2 +1,2 @@
-import{p as t,H as o,c as r,h as e,a as s,t as i}from"./index.js";import{d}from"./p-DqBCQRRd.js";import{d as n}from"./p-uMN1Ppw2.js";const a=()=>`.group.sc-ds-toggle-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-toggle-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-toggle-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-toggle-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-toggle-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-toggle-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-toggle-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-toggle-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-toggle-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-toggle-button-group:active{transform:none !important}.divider.sc-ds-toggle-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-toggle-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-toggle-button-group{height:12px}.dividerGhostSM.sc-ds-toggle-button-group{height:16px}.item.sc-ds-toggle-button-group:hover+.dividerGhost.sc-ds-toggle-button-group,.dividerGhost.sc-ds-toggle-button-group:has(+.item:hover){opacity:0}.itemPressed.sc-ds-toggle-button-group+.dividerGhost.sc-ds-toggle-button-group,.dividerGhost.sc-ds-toggle-button-group:has(+.itemPressed){opacity:0}.group.sc-ds-toggle-button-group .itemShort.sc-ds-toggle-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.group.sc-ds-toggle-button-group .itemPressed.sc-ds-toggle-button-group{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-toggle-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-toggle-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-toggle-button-group{border-radius:0 !important}.groupRounded.sc-ds-toggle-button-group .first.itemShort.sc-ds-toggle-button-group::after,.groupRounded.sc-ds-toggle-button-group .first.itemPressed.sc-ds-toggle-button-group{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-toggle-button-group .last.itemShort.sc-ds-toggle-button-group::after,.groupRounded.sc-ds-toggle-button-group .last.itemPressed.sc-ds-toggle-button-group{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-toggle-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-toggle-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-toggle-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-toggle-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-toggle-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-toggle-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}`;const g=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.items=[];this.value="";this.elevation="elevated";this.size="md";this.rounded=false}handleItemChange(t){if(t===this.value)return;this.value=t;this.dsChange.emit(t)}render(){const t=this.items;const o=t.length;const r=this.elevation;const i=r.charAt(0).toUpperCase()+r.slice(1);const d=this.background;const n=r==="none";const a={group:true,[`group${i}`]:true,groupRounded:this.rounded};return e(s,{key:"177fcde80791d2c5a607f8788653589f0c1041ea"},e("div",{key:"3c811f1ec76b010adc14e9e98f2d0277e89866d7",class:a,role:"group"},t.map(((t,s)=>{const i=s===0;const a=s===o-1;const g=!i&&!a;const u=t.id===this.value;const p=!!t.icon&&!t.label;const l=this.rounded&&!p&&this.size!=="xs";const c=this.size.toUpperCase();const m={item:true,first:i,last:a,middle:g,itemShort:n,itemPressed:n&&u,[`roundedFirst${c}`]:!!(l&&i),[`roundedLast${c}`]:!!(l&&a),[`roundedMid${c}`]:!!(l&&g)};const b={divider:true,dividerGhost:n,dividerGhostXS:n&&this.size==="xs",dividerGhostSM:n&&this.size==="sm"};return[s>0&&e("div",{class:b,"aria-hidden":"true"}),e("ds-toggle-button",{class:m,elevation:r,size:this.size,label:t.label,icon:t.icon,rounded:this.rounded,background:d,pressed:u,inactive:t.inactive,onDsChange:()=>this.handleItemChange(t.id)})]}))))}static get style(){return a()}},[2,"ds-toggle-button-group",{items:[16],value:[1025],elevation:[1],size:[1],rounded:[4],background:[1]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-toggle-button-group","ds-icon","ds-toggle-button"];t.forEach((t=>{switch(t){case"ds-toggle-button-group":if(!customElements.get(i(t))){customElements.define(i(t),g)}break;case"ds-icon":if(!customElements.get(i(t))){d()}break;case"ds-toggle-button":if(!customElements.get(i(t))){n()}break}}))}u();const p=g;const l=u;export{p as DsToggleButtonGroup,l as defineCustomElement};
+import{p as t,H as o,c as r,h as e,a as s,t as i}from"./index.js";import{d}from"./p-DqBCQRRd.js";import{d as n}from"./p-DiWQFROF.js";const a=()=>`.group.sc-ds-toggle-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-toggle-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-toggle-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-toggle-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-toggle-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-toggle-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-toggle-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-toggle-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-toggle-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-toggle-button-group:active{transform:none !important}.divider.sc-ds-toggle-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-toggle-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-toggle-button-group{height:12px}.dividerGhostSM.sc-ds-toggle-button-group{height:16px}.item.sc-ds-toggle-button-group:hover+.dividerGhost.sc-ds-toggle-button-group,.dividerGhost.sc-ds-toggle-button-group:has(+.item:hover){opacity:0}.itemPressed.sc-ds-toggle-button-group+.dividerGhost.sc-ds-toggle-button-group,.dividerGhost.sc-ds-toggle-button-group:has(+.itemPressed){opacity:0}.group.sc-ds-toggle-button-group .itemShort.sc-ds-toggle-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.group.sc-ds-toggle-button-group .itemPressed.sc-ds-toggle-button-group{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-toggle-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-toggle-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-toggle-button-group{border-radius:0 !important}.groupRounded.sc-ds-toggle-button-group .first.itemShort.sc-ds-toggle-button-group::after,.groupRounded.sc-ds-toggle-button-group .first.itemPressed.sc-ds-toggle-button-group{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-toggle-button-group .last.itemShort.sc-ds-toggle-button-group::after,.groupRounded.sc-ds-toggle-button-group .last.itemPressed.sc-ds-toggle-button-group{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-toggle-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-toggle-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-toggle-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-toggle-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-toggle-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-toggle-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}`;const g=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.items=[];this.value="";this.elevation="elevated";this.size="md";this.rounded=false}handleItemChange(t){if(t===this.value)return;this.value=t;this.dsChange.emit(t)}render(){const t=this.items;const o=t.length;const r=this.elevation;const i=r.charAt(0).toUpperCase()+r.slice(1);const d=this.background;const n=r==="none";const a={group:true,[`group${i}`]:true,groupRounded:this.rounded};return e(s,{key:"177fcde80791d2c5a607f8788653589f0c1041ea"},e("div",{key:"3c811f1ec76b010adc14e9e98f2d0277e89866d7",class:a,role:"group"},t.map(((t,s)=>{const i=s===0;const a=s===o-1;const g=!i&&!a;const u=t.id===this.value;const p=!!t.icon&&!t.label;const l=this.rounded&&!p&&this.size!=="xs";const c=this.size.toUpperCase();const m={item:true,first:i,last:a,middle:g,itemShort:n,itemPressed:n&&u,[`roundedFirst${c}`]:!!(l&&i),[`roundedLast${c}`]:!!(l&&a),[`roundedMid${c}`]:!!(l&&g)};const b={divider:true,dividerGhost:n,dividerGhostXS:n&&this.size==="xs",dividerGhostSM:n&&this.size==="sm"};return[s>0&&e("div",{class:b,"aria-hidden":"true"}),e("ds-toggle-button",{class:m,elevation:r,size:this.size,label:t.label,icon:t.icon,rounded:this.rounded,background:d,pressed:u,inactive:t.inactive,onDsChange:()=>this.handleItemChange(t.id)})]}))))}static get style(){return a()}},[2,"ds-toggle-button-group",{items:[16],value:[1025],elevation:[1],size:[1],rounded:[4],background:[1]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-toggle-button-group","ds-icon","ds-toggle-button"];t.forEach((t=>{switch(t){case"ds-toggle-button-group":if(!customElements.get(i(t))){customElements.define(i(t),g)}break;case"ds-icon":if(!customElements.get(i(t))){d()}break;case"ds-toggle-button":if(!customElements.get(i(t))){n()}break}}))}u();const p=g;const l=u;export{p as DsToggleButtonGroup,l as defineCustomElement};
 //# sourceMappingURL=ds-toggle-button-group.js.map

package/dist/components/ds-toggle-button.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-uMN1Ppw2.js";const p=o;const t=s;export{p as DsToggleButton,t as defineCustomElement};
+import{T as o,d as s}from"./p-DiWQFROF.js";const t=o;const p=s;export{t as DsToggleButton,p as defineCustomElement};
 //# sourceMappingURL=ds-toggle-button.js.map

package/dist/components/ds-tooltip.js

@@ -1,2 +1,2 @@
-import{p as t,H as s,h as i,a as e,t as o}from"./index.js";const a=()=>`.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);padding:var(--dimension-space-050);white-space:nowrap;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{display:flex;flex-direction:row;align-items:center;gap:var(--dimension-space-050)}.key-hint.sc-ds-tooltip{width:var(--dimension-size-200);height:var(--dimension-size-200);flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-foreground-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const n=600;const h=300;const r=200;const d=4;let l=0;let c=0;const f=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.side="top";this.align="center";this.sideOffset=4;this.alignOffset=0;this.delay=n;this.shortcutKeyPosition="end";this.visible=false;this.closing=false;this.pos={x:0,y:0};this.tooltipId=`ds-tooltip-${++c}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.tooltipEl=null;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=()=>this.hide()}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){this.unbindAnchor();this.clearTimers()}onPositionPropsChange(){if(this.visible)this.calculatePosition()}bindAnchor(){const t=this.el.querySelector("slot");const s=t?.assignedElements?.()??[];const i=s[0]??this.el.firstElementChild;if(!i)return;this.anchor=i;i.setAttribute("aria-describedby",this.tooltipId);i.addEventListener("mouseenter",this.mouseEnterHandler);i.addEventListener("mouseleave",this.mouseLeaveHandler);i.addEventListener("focus",this.focusHandler);i.addEventListener("blur",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focus",this.focusHandler);this.anchor.removeEventListener("blur",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}show(){this.clearTimers();const t=Date.now()-l<h;if(t){this.closing=false;this.visible=true;requestAnimationFrame((()=>this.calculatePosition()));return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.closing=false;this.visible=true;requestAnimationFrame((()=>this.calculatePosition()))}),this.delay)}hide(){this.clearTimers();if(!this.visible)return;l=Date.now();this.closing=true;this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.visible=false;this.closing=false}),r)}calculatePosition(){if(!this.anchor)return;const t=this.el.querySelector(".tooltip-popup");if(!t)return;const s=this.anchor.getBoundingClientRect();const i=t.offsetWidth||80;const e=t.offsetHeight||24;let o=0,a=0;switch(this.side){case"top":a=s.top-e-this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"bottom":a=s.bottom+this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"left":o=s.left-i-this.sideOffset;a=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-e+this.alignOffset:s.top+s.height/2-e/2+this.alignOffset;break;case"right":o=s.right+this.sideOffset;a=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-e+this.alignOffset:s.top+s.height/2-e/2+this.alignOffset;break}this.pos={x:Math.min(Math.max(o,d),window.innerWidth-i-d),y:Math.min(Math.max(a,d),window.innerHeight-e-d)}}render(){return i(e,{key:"89ca48258f0e38e9ebacb6794db00f64d3f6497b",style:{display:"contents"}},i("slot",{key:"4f9f694008af1929c117aa9f251e6b9222e8f967"}),(this.visible||this.closing)&&i("div",{key:"b08f40a6702fe3d4312dda658f70cd4c4a6b9b4b",id:this.tooltipId,class:{"tooltip-popup":true,"tooltip-popup--closing":this.closing},role:"tooltip",style:{position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"10000",pointerEvents:"none"}},i("div",{key:"bf1f48ab96bd4951a9d838bef67d8e489f36068f",class:"tooltip-inner"},this.shortcutKey&&this.shortcutKeyPosition==="start"&&i("div",{key:"98b378ad7697f544468d30d2640ada07a2bde86e",class:"key-hint","aria-hidden":"true"},i("span",{key:"c414078d2e7b7142fe7fa1135ca696abdaa667d6",class:"text-caption-emphasis"},this.shortcutKey)),i("span",{key:"3a459908e6bfac9e9609c901cd6aeb41922c67eb",class:"text-body-small"},this.label),this.shortcutKey&&this.shortcutKeyPosition==="end"&&i("div",{key:"b535b58577544a4b6c8d0601041eacf550ce30b3",class:"key-hint","aria-hidden":"true"},i("span",{key:"2f062978a8ea2625acdd6820f3d2e7570a7b9dbd",class:"text-caption-emphasis"},this.shortcutKey)))))}get el(){return this}static get watchers(){return{label:[{onPositionPropsChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}]}}static get style(){return a()}},[262,"ds-tooltip",{label:[1],side:[1],align:[1],sideOffset:[2,"side-offset"],alignOffset:[2,"align-offset"],delay:[2],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"],visible:[32],closing:[32],pos:[32]},undefined,{label:[{onPositionPropsChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(o(t))){customElements.define(o(t),f)}break}}))}p();const u=f;const b=p;export{u as DsTooltip,b as defineCustomElement};
+import{p as t,H as s,h as i,a as e,t as o}from"./index.js";import{T as n}from"./p-BRju0sEC.js";import{r as a}from"./p-CYJ-de0u.js";import{r}from"./p-BvmooLHV.js";const h=()=>`.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);padding:var(--dimension-space-050);white-space:nowrap;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{display:flex;flex-direction:row;align-items:center;gap:var(--dimension-space-050)}.key-hint.sc-ds-tooltip{width:var(--dimension-size-200);height:var(--dimension-size-200);flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-foreground-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;let l=0;let d=0;const c=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.side="top";this.align="center";this.sideOffset=n.space050;this.alignOffset=0;this.delay=n.animationDelayMedium1;this.shortcutKeyPosition="end";this.visible=false;this.closing=false;this.pos={x:0,y:0};this.tooltipId=`ds-tooltip-${++d}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.tooltipEl=null;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=()=>this.hide()}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){this.unbindAnchor();this.clearTimers()}onPositionPropsChange(){if(this.visible)this.calculatePosition()}get viewportPadPx(){return a(n.space050,n.space050)}get sideOffsetPx(){return a(this.sideOffset,n.space050)}get alignOffsetPx(){return a(this.alignOffset,0)}get hoverDelayMs(){return r(this.delay,n.animationDelayMedium1)}get instantReopenMs(){return r(n.animationDurationMedium1,n.animationDurationMedium1)}get fadeOutMs(){return r(n.motionShort3,n.animationDurationShort3)}get tooltipFallbackWidthPx(){return a(n.tooltipFallbackWidth,n.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){return a(n.size300,n.size300)}bindAnchor(){const t=this.el.querySelector("slot");const s=t?.assignedElements?.()??[];const i=s[0]??this.el.firstElementChild;if(!i)return;this.anchor=i;i.setAttribute("aria-describedby",this.tooltipId);i.addEventListener("mouseenter",this.mouseEnterHandler);i.addEventListener("mouseleave",this.mouseLeaveHandler);i.addEventListener("focus",this.focusHandler);i.addEventListener("blur",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focus",this.focusHandler);this.anchor.removeEventListener("blur",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}show(){this.clearTimers();const t=Date.now()-l<this.instantReopenMs;if(t){this.closing=false;this.visible=true;requestAnimationFrame((()=>this.calculatePosition()));return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.closing=false;this.visible=true;requestAnimationFrame((()=>this.calculatePosition()))}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.visible)return;l=Date.now();this.closing=true;this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.visible=false;this.closing=false}),this.fadeOutMs)}calculatePosition(){if(!this.anchor)return;const t=this.el.querySelector(".tooltip-popup");if(!t)return;const s=this.anchor.getBoundingClientRect();const i=t.offsetWidth||this.tooltipFallbackWidthPx;const e=t.offsetHeight||this.tooltipFallbackHeightPx;const o=this.sideOffsetPx;const n=this.alignOffsetPx;const a=this.viewportPadPx;let r=0,h=0;switch(this.side){case"top":h=s.top-e-o;r=this.align==="start"?s.left+n:this.align==="end"?s.right-i+n:s.left+s.width/2-i/2+n;break;case"bottom":h=s.bottom+o;r=this.align==="start"?s.left+n:this.align==="end"?s.right-i+n:s.left+s.width/2-i/2+n;break;case"left":r=s.left-i-o;h=this.align==="start"?s.top+n:this.align==="end"?s.bottom-e+n:s.top+s.height/2-e/2+n;break;case"right":r=s.right+o;h=this.align==="start"?s.top+n:this.align==="end"?s.bottom-e+n:s.top+s.height/2-e/2+n;break}this.pos={x:Math.min(Math.max(r,a),window.innerWidth-i-a),y:Math.min(Math.max(h,a),window.innerHeight-e-a)}}render(){return i(e,{key:"3f0170110bfb98a5003db1caee47ab7bcef114d2",style:{display:"contents"}},i("slot",{key:"b82e96ce8357809e48f5f114839adc01c8e4283e"}),(this.visible||this.closing)&&i("div",{key:"08d4a1030d391f21eb3cdd7105056438bf2b354f",id:this.tooltipId,class:{"tooltip-popup":true,"tooltip-popup--closing":this.closing},role:"tooltip",style:{position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"10000",pointerEvents:"none"}},i("div",{key:"b4b486bd8c7299a26d1a516a74131d742760ed8d",class:"tooltip-inner"},this.shortcutKey&&this.shortcutKeyPosition==="start"&&i("div",{key:"9173fc4e4ce9102afac653672b9066c44dbe5ef4",class:"key-hint","aria-hidden":"true"},i("span",{key:"9523ade09b0a184532e16f46cc332456c2f1de7f",class:"text-caption-emphasis"},this.shortcutKey)),i("span",{key:"f7ae8110cd0b4b4a8ebe84c3adb730742a369697",class:"text-body-small"},this.label),this.shortcutKey&&this.shortcutKeyPosition==="end"&&i("div",{key:"0fe37d44ebf5cb08cabb7053f4b8fce398607fd5",class:"key-hint","aria-hidden":"true"},i("span",{key:"a9d2a277d0b9d32ed90767405f1a62cb64cffde1",class:"text-caption-emphasis"},this.shortcutKey)))))}get el(){return this}static get watchers(){return{label:[{onPositionPropsChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return h()}},[262,"ds-tooltip",{label:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"],visible:[32],closing:[32],pos:[32]},undefined,{label:[{onPositionPropsChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(o(t))){customElements.define(o(t),c)}break}}))}f();const p=c;const u=f;export{p as DsTooltip,u as defineCustomElement};
 //# sourceMappingURL=ds-tooltip.js.map