@ds-mo/ui 1.6.3 → 1.7.0

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","PANEL_NAV_USER_MENU_ANCHOR_ID","panelNavCss","vtTransitions","WeakMap","vtResolvers","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","disableViewTransition","routerMode","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","effectiveDisableViewTransition","el","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","syncRovingIndex","syncActiveFromUrl","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","get","skipTransition","delete","doc","startViewTransition","ensureShellNavVtStyle","origin","resolveShellNavRevealOrigin","querySelector","setShellNavRevealOriginVars","transition","Promise","resolve","set","finished","finally","ready","then","animateShellNavRadialReveal","catch","componentWillLoad","resolvePanelNavStyle","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","checkScroll","componentDidRender","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","panel","transitionEndHandler","e","propertyName","addEventListener","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","getAllItems","syncRenderedStyleIfNeeded","shouldResyncPanelNavStyle","remaining","HOST_PROP_SYNC_BUDGET","tick","requestAnimationFrame","queueMicrotask","applyToggle","next","setItem","String","dsNavToggle","emit","flatMap","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","from","querySelectorAll","focus","body","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","handleUserAction","anchor","currentTarget","dsNavUserAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","cursor","userSelect","onMove","ev","deltaX","Math","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","variant","label","dot","background","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","useAnchor","type","render","isNavigation","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","onScroll","flatIdx","map","group","side","visible","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/nav/nav-chrome.ts","src/wc/components/PanelNav/panel-nav-utils.ts","src/wc/components/PanelNav/panel-nav-types.ts","src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/** Visual chrome family for primary/secondary navigation surfaces. */\nexport type NavChromeStyle = 'navigation' | 'default';\n\n/** `document.documentElement` attribute for pre-bootstrap style hints (SPA hard reload). */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\n/** Parse `nav-style` from a host or document hint attribute value. */\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'navigation' || attr === 'default') return attr;\n  return undefined;\n}\n\n/** Set a document-level style hint before nav custom elements upgrade (hard reload). */\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\n/** Resolve initial nav chrome style — host attr, then document hint, then prop default. */\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  styleAttr: string | null,\n  documentStyleAttr: string | null = typeof document !== 'undefined'\n    ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n    : null,\n): NavChromeStyle {\n  return (\n    readNavStyleAttr(styleAttr) ??\n    readNavStyleAttr(documentStyleAttr) ??\n    styleProp\n  );\n}\n\n/** True when internal rendered surface lags the host `style` prop. */\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n","import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';\nimport {\n  NAV_STYLE_HINT_ATTR,\n  clearNavStyleHint,\n  readNavStyleAttr,\n  resolveNavChromeStyle,\n  setNavStyleHint,\n  shouldResyncNavChromeStyle,\n} from '../../nav/nav-chrome';\nimport { ensureShellNavVtStyle } from '../../nav/shell-view-transition';\n\nexport type { NavChromeStyle } from '../../nav/nav-chrome';\nexport {\n  NAV_STYLE_HINT_ATTR,\n  readNavStyleAttr,\n  setNavStyleHint,\n  clearNavStyleHint,\n  resolveNavChromeStyle as resolvePanelNavStyle,\n  shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,\n};\n\n/** @deprecated Use `setNavStyleHint` */\nexport const setPanelNavStyleHint = setNavStyleHint;\n\n/** @deprecated Use `clearNavStyleHint` */\nexport const clearPanelNavStyleHint = clearNavStyleHint;\n\n/** @deprecated Use `NAV_STYLE_HINT_ATTR` */\nexport const PANEL_NAV_STYLE_HINT_ATTR = NAV_STYLE_HINT_ATTR;\n\n/** @deprecated Use `ensureShellNavVtStyle` */\nexport const ensurePanelNavVtStyle = ensureShellNavVtStyle;\n\n/** Whether `path` matches `href` at a segment boundary (exact or child path). */\nexport function hrefMatchesPath(path: string, href: string): boolean {\n  return path === href || path.startsWith(`${href}/`);\n}\n\n/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */\nexport function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {\n  if (!path) return '';\n\n  let bestId = '';\n  let bestLen = 0;\n\n  for (const item of items) {\n    if (!item.href) continue;\n    if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {\n      bestId = item.id;\n      bestLen = item.href.length;\n    }\n  }\n\n  return bestId;\n}\n\n/** Total nav item count across all groups. */\nexport function countPanelNavItems(groups: PanelNavGroup[]): number {\n  return groups.reduce((sum, g) => sum + g.items.length, 0);\n}\n\n/** Parse `groups` from either a JSON attribute string or a JS property array. */\nexport function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {\n  if (Array.isArray(groups)) return groups;\n  if (typeof groups === 'string') {\n    try {\n      const parsed = JSON.parse(groups);\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n  return [];\n}\n\n/** Resolve whether VT is disabled from prop and/or host attribute. */\nexport function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {\n  if (prop) return true;\n  if (attr === null) return false;\n  return attr !== 'false';\n}\n\n/** True when host `groups` has items but internal parsed state is still empty. */\nexport function shouldResyncPanelNavGroups(\n  parsedGroups: PanelNavGroup[],\n  groups: string | unknown,\n): boolean {\n  return (\n    countPanelNavItems(parsedGroups) === 0 &&\n    countPanelNavItems(parsePanelNavGroups(groups)) > 0\n  );\n}\n","import type { NavChromeStyle } from '../../nav/nav-chrome';\n\nexport type { NavChromeStyle };\nexport type PanelNavRouterMode = 'anchor' | 'event';\n\nexport interface PanelNavItem {\n  id: string;\n  icon: string;\n  label: string;\n  /** Show a notification dot badge on the item */\n  dot?: boolean;\n  flag?: boolean;\n  /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.\n   *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */\n  href?: string;\n}\n\nexport interface PanelNavGroup {\n  id?: string;\n  label?: string;\n  items: PanelNavItem[];\n}\n\n/** Stable `id` on the footer user button — use with `ds-menu` `anchor-id`. */\nexport const PANEL_NAV_USER_MENU_ANCHOR_ID = 'ds-panel-nav-user-menu-anchor';\n\n/** Detail for `dsNavUserAction` — anchor element for an external `ds-menu`. */\nexport interface PanelNavUserActionDetail {\n  anchor: HTMLElement;\n}\n","/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – navigation (default chrome) ─ */\n  --_nav-bg:              var(--color-navigation-background);\n  --_nav-border:          var(--color-navigation-border-tertiary);\n  --_nav-divider:         var(--color-navigation-divider);\n  --_nav-fg-primary:      var(--color-navigation-foreground-primary);\n  --_nav-fg-secondary:    var(--color-navigation-foreground-secondary);\n  --_nav-fg-tertiary:     var(--color-navigation-foreground-tertiary);\n  --_nav-hover:           var(--color-navigation-interaction-hover);\n  --_nav-pressed:         var(--color-navigation-interaction-pressed);\n  --_nav-focus:           var(--color-navigation-interaction-focus);\n  --_nav-dot:             var(--color-navigation-foreground-brand);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n:host-context(ds-app-shell[gradient]) {\n  --ds-shell-gradient-opacity: 0.1;\n}\n\n.panel-nav--default {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background-color: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition:\n    width var(--_nav-expand-motion),\n    min-width var(--_nav-expand-motion),\n    background-color var(--effect-motion-short-3, 200ms ease),\n    border-color var(--effect-motion-short-3, 200ms ease);\n  font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--ds-shell-gradient-position-panel, 0 0);\n  background-repeat: no-repeat;\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__header-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  transition: opacity var(--effect-motion-short-2, 100ms ease);\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — hidden by default, revealed on hover */\n.panel-nav__header-toggle {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n  /* Typography via ds-text (text-caption-emphasis) */\n  display: flex;\n  align-items: center;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  line-height: var(--typography-lineheight-xs, 12px);\n  padding: 0 var(--dimension-space-075, 6px);\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__item:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  line-height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot — single element, moves between positions ──────── */\n\n.panel-nav__item-dot {\n  position: absolute;\n  right: 13px;\n  top: 13px;\n  pointer-events: none;\n  transition:\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  right: var(--dimension-space-075);\n  top: var(--dimension-space-075);\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 var(--dimension-space-075, 6px);\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* Edge fade — floats above the footer, masking content scrolling under it. */\n.panel-nav__footer-fade {\n  --ds-fade-offset: 100%;\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  background: transparent;\n  transition:\n    background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n    color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__footer-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Navigation: hover previews default chrome */\n.panel-nav--navigation .panel-nav__footer-btn:hover {\n  background: var(--color-background-secondary);\n  color: var(--color-foreground-secondary);\n  transition: none;\n}\n\n/* Default: hover previews navigation chrome */\n.panel-nav--default .panel-nav__footer-btn:hover {\n  background: var(--color-navigation-background);\n  color: var(--color-navigation-foreground-secondary);\n  transition: none;\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* row position: right of gear button */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion),\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* column position: full-width row below gear */\n  left: var(--_nav-padding-x);\n  right: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n.panel-nav__user-initial {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_nav-fg-secondary);\n  text-transform: uppercase;\n  line-height: 1;\n  pointer-events: none;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n.panel-nav__resize-handle {\n  position: absolute;\n  top: 0;\n  /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n  right: var(--dimension-space-n050, -4px);\n  bottom: 0;\n  width: var(--dimension-space-100, 8px);\n  z-index: 10;\n  cursor: ew-resize;\n  touch-action: none;\n  /* Needs a real background for Safari hit-testing */\n  background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* The brand-bold overlay line */\n.panel-nav__resize-handle::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--dimension-stroke-width-025, 2px);\n  background: var(--color-background-bold-brand);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n  opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-nav,\n  .panel-nav *,\n  .panel-nav *::before,\n  .panel-nav *::after,\n  .panel-nav__resize-handle,\n  .panel-nav__resize-handle::before,\n  .panel-nav__resize-handle::after {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    transition-delay: 0.01ms !important;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n  animateShellNavRadialReveal,\n  ensureShellNavVtStyle,\n  resolveShellNavRevealOrigin,\n  setShellNavRevealOriginVars,\n} from '../../nav/shell-view-transition';\nimport {\n  deriveActiveIdFromUrl,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\n\n// Module-level WeakMaps\ninterface ViewTransition {\n  finished: Promise<void>;\n  skipTransition: () => void;\n}\ntype DocumentWithViewTransition = Document & {\n  startViewTransition?: (callback: () => void | Promise<void>) => ViewTransition;\n};\n\nconst vtTransitions = new WeakMap<object, ViewTransition>();\nconst vtResolvers = new WeakMap<object, () => void>();\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  scoped: true,\n})\nexport class PanelNav {\n  /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.\n   *  Property: `navStyle`. HTML attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'navigation';\n\n  /** When `true`, the component does not run its own View Transition on style\n   *  change — it just updates the rendered surface synchronously. Use this when\n   *  the host app orchestrates the page transition itself (e.g. Angular Router's\n   *  `withViewTransitions`), so the two don't fight or nest. */\n  @Prop() disableViewTransition: boolean = false;\n\n  /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */\n  @Prop() groups: string | PanelNavGroup[] = '[]';\n\n  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n\n  /** Mirrors `style` but is only updated inside the VT callback so the\n   *  View Transition captures a clean before/after snapshot. */\n  @State() private renderedStyle: NavChromeStyle = 'navigation';\n\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private atBottom = false;\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n\n  private transitionEndHandler?: (e: TransitionEvent) => void;\n  private resizeObserver?: ResizeObserver;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  /** Host may set `disable-view-transition` as an attribute before the JS prop lands. */\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition'),\n    );\n  }\n\n  @Watch('collapsed')\n  @Watch('viewportNarrow')\n  onCollapsedChange() {\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.syncRovingIndex();\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('activeId')\n  @Watch('urlDerivedActiveId')\n  onActiveIdChange() {\n    this.syncRovingIndex();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  async onNavStyleChange(newVal: NavChromeStyle) {\n    // Host app drives the transition (e.g. Angular Router withViewTransitions):\n    // just reflect the new surface so the app's transition captures it.\n    if (this.effectiveDisableViewTransition) {\n      this.renderedStyle = newVal;\n      return;\n    }\n\n    // Skip any in-progress transition immediately so rapid style changes never leave the nav stuck.\n    vtTransitions.get(this)?.skipTransition();\n    vtTransitions.delete(this);\n\n    const doc = document as DocumentWithViewTransition;\n    if (typeof doc.startViewTransition !== 'function') {\n      this.renderedStyle = newVal;\n      return;\n    }\n\n    ensureShellNavVtStyle();\n    const origin = resolveShellNavRevealOrigin(\n      this.el.querySelector('.panel-nav__footer-btn') as HTMLElement | null,\n    );\n    setShellNavRevealOriginVars(origin);\n\n    const transition = doc.startViewTransition(() =>\n      new Promise<void>(resolve => {\n        vtResolvers.set(this, resolve);\n        this.renderedStyle = newVal;\n      })\n    );\n\n    vtTransitions.set(this, transition);\n    transition.finished.finally(() => {\n      if (vtTransitions.get(this) === transition) vtTransitions.delete(this);\n      vtResolvers.delete(this);\n    });\n\n    transition.ready\n      .then(() => animateShellNavRadialReveal(origin))\n      .catch(() => { /* transition was skipped or aborted */ });\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch { /* localStorage unavailable */ }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.checkScroll();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  componentDidRender() {\n    // If a view transition callback is waiting for the render to complete,\n    // resolve it now so the \"after\" snapshot is taken at exactly the right moment.\n    const resolve = vtResolvers.get(this);\n    if (resolve) {\n      vtResolvers.delete(this);\n      resolve();\n    }\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    this.isAnimating = true;\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    if (this.transitionEndHandler) {\n      panel?.removeEventListener('transitionend', this.transitionEndHandler);\n    }\n    this.transitionEndHandler = (e: TransitionEvent) => {\n      if (e.propertyName === 'width') {\n        this.isAnimating = false;\n        panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionEndHandler);\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = window.innerWidth < this.breakpoint;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = window.innerWidth < this.breakpoint;\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      return;\n    }\n    this.urlDerivedActiveId = deriveActiveIdFromUrl(this.currentUrl, this.getAllItems());\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    this.syncRenderedStyleIfNeeded();\n\n    if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {\n      this.onGroupsChange(this.groups);\n    } else if (this.currentUrl) {\n      this.syncActiveFromUrl();\n    }\n  }\n\n  /** Align `renderedStyle` with `style` when host bindings land after first paint. */\n  private syncRenderedStyleIfNeeded() {\n    if (!shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) return;\n\n    if (this.effectiveDisableViewTransition) {\n      vtTransitions.get(this)?.skipTransition();\n      vtTransitions.delete(this);\n      this.renderedStyle = this.navStyle;\n    } else {\n      void this.onNavStyleChange(this.navStyle);\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  /** Centralised toggle: updates `collapsed`, emits `dsNavToggle`, optionally persists. */\n  private applyToggle(next: boolean) {\n    this.collapsed = next;\n    if (this.storageKey) {\n      try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private syncRovingIndex() {\n    const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n    this.rovingIndex = idx >= 0 ? idx : 0;\n  }\n\n  private handleItemKeyDown(e: KeyboardEvent, index: number) {\n    const total = this.getAllItems().length;\n    let next: number;\n    switch (e.key) {\n      case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n      case 'ArrowUp':   e.preventDefault(); next = (index - 1 + total) % total; break;\n      case 'Home':      e.preventDefault(); next = 0; break;\n      case 'End':       e.preventDefault(); next = total - 1; break;\n      default: return;\n    }\n    this.rovingIndex = next;\n    const items = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n    );\n    items[next]?.focus();\n  }\n\n  private checkScroll() {\n    const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n    if (!body) return;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleBodyScroll(e: Event) {\n    const body = e.target as HTMLElement;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    this.applyToggle(!this.collapsed);\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n      </span>,\n      <span class=\"panel-nav__item-label\">\n        <span class=\"panel-nav__item-label-text\">\n          <ds-text\n            as=\"span\"\n            variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n            color=\"inherit\"\n          >\n            {item.label}\n          </ds-text>\n        </span>\n      </span>,\n      item.dot && (\n        <ds-badge\n          class=\"panel-nav__item-dot\"\n          variant=\"dot\"\n          background=\"var(--_nav-bg)\"\n          label=\"\"\n          aria-hidden=\"true\"\n        />\n      ),\n    ];\n\n    const sharedProps = {\n      class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      title: collapsed ? item.label : undefined,\n      tabIndex: idx === this.rovingIndex ? 0 : -1,\n      onClick: () => this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n      onFocus: () => { this.rovingIndex = idx; },\n    };\n\n    const useAnchor = this.routerMode === 'anchor' && item.href;\n\n    return useAnchor\n      ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n      : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n  }\n\n  render() {\n    const isNavigation = this.renderedStyle === 'navigation';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'panel-nav--navigation': isNavigation,\n      'panel-nav--default': !isNavigation,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--animating': this.isAnimating,\n      'panel-nav--at-bottom': this.atBottom,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav class={navCls} aria-label={isNavigation ? 'Main navigation' : 'Settings navigation'}>\n\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn\"\n              onClick={() => this.handleToggle()}\n              aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n                  <path d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\" fill=\"currentColor\"/>\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n            {(() => {\n              let flatIdx = 0;\n              return this.parsedGroups.map(group => (\n                <div class=\"panel-nav__group\">\n                  {group.label && (\n                    <span class=\"panel-nav__group-label\">\n                      <span class=\"panel-nav__item-label-text\">\n                        <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                          {group.label}\n                        </ds-text>\n                      </span>\n                    </span>\n                  )}\n                  {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n                </div>\n              ));\n            })()}\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            <ds-fade\n              class=\"panel-nav__footer-fade\"\n              side=\"bottom\"\n              size=\"size-600\"\n              background=\"var(--_nav-bg)\"\n              visible={!this.atBottom}\n            />\n\n            {/* Left icon button — Gear in navigation style, Dashboard in default style */}\n            <button\n              type=\"button\"\n              class=\"panel-nav__footer-btn\"\n              title={isNavigation ? 'Settings' : 'Dashboard'}\n              aria-label={isNavigation ? 'Open settings' : 'Go to dashboard'}\n              onClick={() => this.handleFooterAction()}\n            >\n              <ds-icon name={isNavigation ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n            </button>\n\n            {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}\n            <button\n              type=\"button\"\n              id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n              class=\"panel-nav__item panel-nav__footer-user\"\n              aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n              onClick={(e) => this.handleUserAction(e)}\n            >\n              <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n                <span class=\"panel-nav__item-label-text\">\n                  <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n                    {userName}\n                  </ds-text>\n                </span>\n              </span>\n              <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n                <span class=\"panel-nav__footer-icon-expanded\">\n                  <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n                </span>\n                <span class=\"panel-nav__footer-icon-collapsed\">\n                  <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n                  <span class=\"panel-nav__user-initial\">\n                    <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                      {userInitial}\n                    </ds-text>\n                  </span>\n                </span>\n              </span>\n            </button>\n          </div>\n\n        </nav>\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["NAV_STYLE_HINT_ATTR","readNavStyleAttr","attr","undefined","resolveNavChromeStyle","styleProp","styleAttr","documentStyleAttr","document","documentElement","getAttribute","shouldResyncNavChromeStyle","renderedStyle","style","hrefMatchesPath","path","href","startsWith","deriveActiveIdFromUrl","items","bestId","bestLen","item","length","id","countPanelNavItems","groups","reduce","sum","g","parsePanelNavGroups","Array","isArray","parsed","JSON","parse","resolvePanelNavDisableVt","prop","shouldResyncPanelNavGroups","parsedGroups","PANEL_NAV_USER_MENU_ANCHOR_ID","panelNavCss","vtTransitions","WeakMap","vtResolvers","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","disableViewTransition","routerMode","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","effectiveDisableViewTransition","el","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","syncRovingIndex","syncActiveFromUrl","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","get","skipTransition","delete","doc","startViewTransition","ensureShellNavVtStyle","origin","resolveShellNavRevealOrigin","querySelector","setShellNavRevealOriginVars","transition","Promise","resolve","set","finished","finally","ready","then","animateShellNavRadialReveal","catch","componentWillLoad","resolvePanelNavStyle","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","checkScroll","componentDidRender","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","panel","transitionEndHandler","e","propertyName","addEventListener","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","getAllItems","syncRenderedStyleIfNeeded","shouldResyncPanelNavStyle","remaining","HOST_PROP_SYNC_BUDGET","tick","requestAnimationFrame","queueMicrotask","applyToggle","next","setItem","String","dsNavToggle","emit","flatMap","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","from","querySelectorAll","focus","body","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","handleUserAction","anchor","currentTarget","dsNavUserAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","cursor","userSelect","onMove","ev","deltaX","Math","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","variant","label","dot","background","isShellGradientActive","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","useAnchor","type","render","isNavigation","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","onScroll","flatIdx","map","group","side","visible","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/nav/nav-chrome.ts","src/wc/components/PanelNav/panel-nav-utils.ts","src/wc/components/PanelNav/panel-nav-types.ts","src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/** Visual chrome family for primary/secondary navigation surfaces. */\nexport type NavChromeStyle = 'navigation' | 'default';\n\n/** `document.documentElement` attribute for pre-bootstrap style hints (SPA hard reload). */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\n/** Parse `nav-style` from a host or document hint attribute value. */\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'navigation' || attr === 'default') return attr;\n  return undefined;\n}\n\n/** Set a document-level style hint before nav custom elements upgrade (hard reload). */\nexport function setNavStyleHint(style: NavChromeStyle): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n  if (typeof document === 'undefined') return;\n  document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\n/** Resolve initial nav chrome style — host attr, then document hint, then prop default. */\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  styleAttr: string | null,\n  documentStyleAttr: string | null = typeof document !== 'undefined'\n    ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n    : null,\n): NavChromeStyle {\n  return (\n    readNavStyleAttr(styleAttr) ??\n    readNavStyleAttr(documentStyleAttr) ??\n    styleProp\n  );\n}\n\n/** True when internal rendered surface lags the host `style` prop. */\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle,\n): boolean {\n  return renderedStyle !== style;\n}\n","import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';\nimport {\n  NAV_STYLE_HINT_ATTR,\n  clearNavStyleHint,\n  readNavStyleAttr,\n  resolveNavChromeStyle,\n  setNavStyleHint,\n  shouldResyncNavChromeStyle,\n} from '../../nav/nav-chrome';\nimport { ensureShellNavVtStyle } from '../../nav/shell-view-transition';\n\nexport type { NavChromeStyle } from '../../nav/nav-chrome';\nexport {\n  NAV_STYLE_HINT_ATTR,\n  readNavStyleAttr,\n  setNavStyleHint,\n  clearNavStyleHint,\n  resolveNavChromeStyle as resolvePanelNavStyle,\n  shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,\n};\n\n/** @deprecated Use `setNavStyleHint` */\nexport const setPanelNavStyleHint = setNavStyleHint;\n\n/** @deprecated Use `clearNavStyleHint` */\nexport const clearPanelNavStyleHint = clearNavStyleHint;\n\n/** @deprecated Use `NAV_STYLE_HINT_ATTR` */\nexport const PANEL_NAV_STYLE_HINT_ATTR = NAV_STYLE_HINT_ATTR;\n\n/** @deprecated Use `ensureShellNavVtStyle` */\nexport const ensurePanelNavVtStyle = ensureShellNavVtStyle;\n\n/** Whether `path` matches `href` at a segment boundary (exact or child path). */\nexport function hrefMatchesPath(path: string, href: string): boolean {\n  return path === href || path.startsWith(`${href}/`);\n}\n\n/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */\nexport function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {\n  if (!path) return '';\n\n  let bestId = '';\n  let bestLen = 0;\n\n  for (const item of items) {\n    if (!item.href) continue;\n    if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {\n      bestId = item.id;\n      bestLen = item.href.length;\n    }\n  }\n\n  return bestId;\n}\n\n/** Total nav item count across all groups. */\nexport function countPanelNavItems(groups: PanelNavGroup[]): number {\n  return groups.reduce((sum, g) => sum + g.items.length, 0);\n}\n\n/** Parse `groups` from either a JSON attribute string or a JS property array. */\nexport function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {\n  if (Array.isArray(groups)) return groups;\n  if (typeof groups === 'string') {\n    try {\n      const parsed = JSON.parse(groups);\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n  return [];\n}\n\n/** Resolve whether VT is disabled from prop and/or host attribute. */\nexport function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {\n  if (prop) return true;\n  if (attr === null) return false;\n  return attr !== 'false';\n}\n\n/** True when host `groups` has items but internal parsed state is still empty. */\nexport function shouldResyncPanelNavGroups(\n  parsedGroups: PanelNavGroup[],\n  groups: string | unknown,\n): boolean {\n  return (\n    countPanelNavItems(parsedGroups) === 0 &&\n    countPanelNavItems(parsePanelNavGroups(groups)) > 0\n  );\n}\n","import type { NavChromeStyle } from '../../nav/nav-chrome';\n\nexport type { NavChromeStyle };\nexport type PanelNavRouterMode = 'anchor' | 'event';\n\nexport interface PanelNavItem {\n  id: string;\n  icon: string;\n  label: string;\n  /** Show a notification dot badge on the item */\n  dot?: boolean;\n  flag?: boolean;\n  /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.\n   *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */\n  href?: string;\n}\n\nexport interface PanelNavGroup {\n  id?: string;\n  label?: string;\n  items: PanelNavItem[];\n}\n\n/** Stable `id` on the footer user button — use with `ds-menu` `anchor-id`. */\nexport const PANEL_NAV_USER_MENU_ANCHOR_ID = 'ds-panel-nav-user-menu-anchor';\n\n/** Detail for `dsNavUserAction` — anchor element for an external `ds-menu`. */\nexport interface PanelNavUserActionDetail {\n  anchor: HTMLElement;\n}\n","/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – navigation (default chrome) ─ */\n  --_nav-bg:              var(--color-navigation-background);\n  --_nav-border:          var(--color-navigation-border-tertiary);\n  --_nav-divider:         var(--color-navigation-divider);\n  --_nav-fg-primary:      var(--color-navigation-foreground-primary);\n  --_nav-fg-secondary:    var(--color-navigation-foreground-secondary);\n  --_nav-fg-tertiary:     var(--color-navigation-foreground-tertiary);\n  --_nav-hover:           var(--color-navigation-interaction-hover);\n  --_nav-pressed:         var(--color-navigation-interaction-pressed);\n  --_nav-focus:           var(--color-navigation-interaction-focus);\n  --_nav-dot:             var(--color-navigation-foreground-brand);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n:host-context(ds-app-shell[gradient]) {\n  --ds-shell-gradient-opacity: 0.1;\n}\n\n.panel-nav--default {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background-color: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition:\n    width var(--_nav-expand-motion),\n    min-width var(--_nav-expand-motion),\n    background-color var(--effect-motion-short-3, 200ms ease),\n    border-color var(--effect-motion-short-3, 200ms ease);\n  font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--ds-shell-gradient-position-panel, 0 0);\n  background-repeat: no-repeat;\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__header-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  transition: opacity var(--effect-motion-short-2, 100ms ease);\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — hidden by default, revealed on hover */\n.panel-nav__header-toggle {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n  /* Typography via ds-text (text-caption-emphasis) */\n  display: flex;\n  align-items: center;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  line-height: var(--typography-lineheight-xs, 12px);\n  padding: 0 var(--dimension-space-075, 6px);\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__item:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  line-height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot — single element, moves between positions ──────── */\n\n.panel-nav__item-dot {\n  position: absolute;\n  right: 13px;\n  top: 13px;\n  pointer-events: none;\n  transition:\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  right: var(--dimension-space-075);\n  top: var(--dimension-space-075);\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 var(--dimension-space-075, 6px);\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* Edge fade — floats above the footer, masking content scrolling under it. */\n.panel-nav__footer-fade {\n  --ds-fade-offset: 100%;\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  background: transparent;\n  transition:\n    background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n    color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__footer-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Navigation: hover previews default chrome */\n.panel-nav--navigation .panel-nav__footer-btn:hover {\n  background: var(--color-background-secondary);\n  color: var(--color-foreground-secondary);\n  transition: none;\n}\n\n/* Default: hover previews navigation chrome */\n.panel-nav--default .panel-nav__footer-btn:hover {\n  background: var(--color-navigation-background);\n  color: var(--color-navigation-foreground-secondary);\n  transition: none;\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* row position: right of gear button */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion),\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* column position: full-width row below gear */\n  left: var(--_nav-padding-x);\n  right: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n.panel-nav__user-initial {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_nav-fg-secondary);\n  text-transform: uppercase;\n  line-height: 1;\n  pointer-events: none;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n.panel-nav__resize-handle {\n  position: absolute;\n  top: 0;\n  /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n  right: var(--dimension-space-n050, -4px);\n  bottom: 0;\n  width: var(--dimension-space-100, 8px);\n  z-index: 10;\n  cursor: ew-resize;\n  touch-action: none;\n  /* Needs a real background for Safari hit-testing */\n  background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* The brand-bold overlay line */\n.panel-nav__resize-handle::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: var(--dimension-stroke-width-025, 2px);\n  background: var(--color-background-bold-brand);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n  opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-nav,\n  .panel-nav *,\n  .panel-nav *::before,\n  .panel-nav *::after,\n  .panel-nav__resize-handle,\n  .panel-nav__resize-handle::before,\n  .panel-nav__resize-handle::after {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    transition-delay: 0.01ms !important;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport { isShellGradientActive } from '../../nav/badge-gradient-ring';\nimport {\n  animateShellNavRadialReveal,\n  ensureShellNavVtStyle,\n  resolveShellNavRevealOrigin,\n  setShellNavRevealOriginVars,\n} from '../../nav/shell-view-transition';\nimport {\n  deriveActiveIdFromUrl,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\n\n// Module-level WeakMaps\ninterface ViewTransition {\n  finished: Promise<void>;\n  skipTransition: () => void;\n}\ntype DocumentWithViewTransition = Document & {\n  startViewTransition?: (callback: () => void | Promise<void>) => ViewTransition;\n};\n\nconst vtTransitions = new WeakMap<object, ViewTransition>();\nconst vtResolvers = new WeakMap<object, () => void>();\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  scoped: true,\n})\nexport class PanelNav {\n  /** Chrome style: `navigation` = navigation tokens, `default` = standard app tokens.\n   *  Property: `navStyle`. HTML attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'navigation';\n\n  /** When `true`, the component does not run its own View Transition on style\n   *  change — it just updates the rendered surface synchronously. Use this when\n   *  the host app orchestrates the page transition itself (e.g. Angular Router's\n   *  `withViewTransitions`), so the two don't fight or nest. */\n  @Prop() disableViewTransition: boolean = false;\n\n  /** Nav groups — set via JS property (`el.groups = [...]`) or JSON string attribute. */\n  @Prop() groups: string | PanelNavGroup[] = '[]';\n\n  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  /** Emitted when the footer user button is clicked. Detail includes the anchor for `ds-menu`. */\n  @Event() dsNavUserAction!: EventEmitter<PanelNavUserActionDetail>;\n\n  @Element() el!: HTMLElement;\n\n  /** Mirrors `style` but is only updated inside the VT callback so the\n   *  View Transition captures a clean before/after snapshot. */\n  @State() private renderedStyle: NavChromeStyle = 'navigation';\n\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private atBottom = false;\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n\n  private transitionEndHandler?: (e: TransitionEvent) => void;\n  private resizeObserver?: ResizeObserver;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  /** Host may set `disable-view-transition` as an attribute before the JS prop lands. */\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition'),\n    );\n  }\n\n  @Watch('collapsed')\n  @Watch('viewportNarrow')\n  onCollapsedChange() {\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.syncRovingIndex();\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('activeId')\n  @Watch('urlDerivedActiveId')\n  onActiveIdChange() {\n    this.syncRovingIndex();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  async onNavStyleChange(newVal: NavChromeStyle) {\n    // Host app drives the transition (e.g. Angular Router withViewTransitions):\n    // just reflect the new surface so the app's transition captures it.\n    if (this.effectiveDisableViewTransition) {\n      this.renderedStyle = newVal;\n      return;\n    }\n\n    // Skip any in-progress transition immediately so rapid style changes never leave the nav stuck.\n    vtTransitions.get(this)?.skipTransition();\n    vtTransitions.delete(this);\n\n    const doc = document as DocumentWithViewTransition;\n    if (typeof doc.startViewTransition !== 'function') {\n      this.renderedStyle = newVal;\n      return;\n    }\n\n    ensureShellNavVtStyle();\n    const origin = resolveShellNavRevealOrigin(\n      this.el.querySelector('.panel-nav__footer-btn') as HTMLElement | null,\n    );\n    setShellNavRevealOriginVars(origin);\n\n    const transition = doc.startViewTransition(() =>\n      new Promise<void>(resolve => {\n        vtResolvers.set(this, resolve);\n        this.renderedStyle = newVal;\n      })\n    );\n\n    vtTransitions.set(this, transition);\n    transition.finished.finally(() => {\n      if (vtTransitions.get(this) === transition) vtTransitions.delete(this);\n      vtResolvers.delete(this);\n    });\n\n    transition.ready\n      .then(() => animateShellNavRadialReveal(origin))\n      .catch(() => { /* transition was skipped or aborted */ });\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch { /* localStorage unavailable */ }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.checkScroll();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  componentDidRender() {\n    // If a view transition callback is waiting for the render to complete,\n    // resolve it now so the \"after\" snapshot is taken at exactly the right moment.\n    const resolve = vtResolvers.get(this);\n    if (resolve) {\n      vtResolvers.delete(this);\n      resolve();\n    }\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    this.isAnimating = true;\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    if (this.transitionEndHandler) {\n      panel?.removeEventListener('transitionend', this.transitionEndHandler);\n    }\n    this.transitionEndHandler = (e: TransitionEvent) => {\n      if (e.propertyName === 'width') {\n        this.isAnimating = false;\n        panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionEndHandler);\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = window.innerWidth < this.breakpoint;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = window.innerWidth < this.breakpoint;\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      return;\n    }\n    this.urlDerivedActiveId = deriveActiveIdFromUrl(this.currentUrl, this.getAllItems());\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    this.syncRenderedStyleIfNeeded();\n\n    if (shouldResyncPanelNavGroups(this.parsedGroups, this.groups)) {\n      this.onGroupsChange(this.groups);\n    } else if (this.currentUrl) {\n      this.syncActiveFromUrl();\n    }\n  }\n\n  /** Align `renderedStyle` with `style` when host bindings land after first paint. */\n  private syncRenderedStyleIfNeeded() {\n    if (!shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) return;\n\n    if (this.effectiveDisableViewTransition) {\n      vtTransitions.get(this)?.skipTransition();\n      vtTransitions.delete(this);\n      this.renderedStyle = this.navStyle;\n    } else {\n      void this.onNavStyleChange(this.navStyle);\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = PanelNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  /** Centralised toggle: updates `collapsed`, emits `dsNavToggle`, optionally persists. */\n  private applyToggle(next: boolean) {\n    this.collapsed = next;\n    if (this.storageKey) {\n      try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private syncRovingIndex() {\n    const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n    this.rovingIndex = idx >= 0 ? idx : 0;\n  }\n\n  private handleItemKeyDown(e: KeyboardEvent, index: number) {\n    const total = this.getAllItems().length;\n    let next: number;\n    switch (e.key) {\n      case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n      case 'ArrowUp':   e.preventDefault(); next = (index - 1 + total) % total; break;\n      case 'Home':      e.preventDefault(); next = 0; break;\n      case 'End':       e.preventDefault(); next = total - 1; break;\n      default: return;\n    }\n    this.rovingIndex = next;\n    const items = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n    );\n    items[next]?.focus();\n  }\n\n  private checkScroll() {\n    const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n    if (!body) return;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleBodyScroll(e: Event) {\n    const body = e.target as HTMLElement;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    this.applyToggle(!this.collapsed);\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n      </span>,\n      <span class=\"panel-nav__item-label\">\n        <span class=\"panel-nav__item-label-text\">\n          <ds-text\n            as=\"span\"\n            variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n            color=\"inherit\"\n          >\n            {item.label}\n          </ds-text>\n        </span>\n      </span>,\n      item.dot && (\n        <ds-badge\n          class=\"panel-nav__item-dot\"\n          variant=\"dot\"\n          background=\"var(--_nav-bg)\"\n          on-gradient-background={isShellGradientActive(this.el)}\n          label=\"\"\n          aria-hidden=\"true\"\n        />\n      ),\n    ];\n\n    const sharedProps = {\n      class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      title: collapsed ? item.label : undefined,\n      tabIndex: idx === this.rovingIndex ? 0 : -1,\n      onClick: () => this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n      onFocus: () => { this.rovingIndex = idx; },\n    };\n\n    const useAnchor = this.routerMode === 'anchor' && item.href;\n\n    return useAnchor\n      ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n      : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n  }\n\n  render() {\n    const isNavigation = this.renderedStyle === 'navigation';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'panel-nav--navigation': isNavigation,\n      'panel-nav--default': !isNavigation,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--animating': this.isAnimating,\n      'panel-nav--at-bottom': this.atBottom,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav class={navCls} aria-label={isNavigation ? 'Main navigation' : 'Settings navigation'}>\n\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn\"\n              onClick={() => this.handleToggle()}\n              aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n                  <path d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\" fill=\"currentColor\"/>\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n            {(() => {\n              let flatIdx = 0;\n              return this.parsedGroups.map(group => (\n                <div class=\"panel-nav__group\">\n                  {group.label && (\n                    <span class=\"panel-nav__group-label\">\n                      <span class=\"panel-nav__item-label-text\">\n                        <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                          {group.label}\n                        </ds-text>\n                      </span>\n                    </span>\n                  )}\n                  {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n                </div>\n              ));\n            })()}\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            <ds-fade\n              class=\"panel-nav__footer-fade\"\n              side=\"bottom\"\n              size=\"size-600\"\n              background=\"var(--_nav-bg)\"\n              visible={!this.atBottom}\n            />\n\n            {/* Left icon button — Gear in navigation style, Dashboard in default style */}\n            <button\n              type=\"button\"\n              class=\"panel-nav__footer-btn\"\n              title={isNavigation ? 'Settings' : 'Dashboard'}\n              aria-label={isNavigation ? 'Open settings' : 'Go to dashboard'}\n              onClick={() => this.handleFooterAction()}\n            >\n              <ds-icon name={isNavigation ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n            </button>\n\n            {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}\n            <button\n              type=\"button\"\n              id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n              class=\"panel-nav__item panel-nav__footer-user\"\n              aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n              onClick={(e) => this.handleUserAction(e)}\n            >\n              <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n                <span class=\"panel-nav__item-label-text\">\n                  <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n                    {userName}\n                  </ds-text>\n                </span>\n              </span>\n              <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n                <span class=\"panel-nav__footer-icon-expanded\">\n                  <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n                </span>\n                <span class=\"panel-nav__footer-icon-collapsed\">\n                  <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n                  <span class=\"panel-nav__user-initial\">\n                    <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                      {userInitial}\n                    </ds-text>\n                  </span>\n                </span>\n              </span>\n            </button>\n          </div>\n\n        </nav>\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-tab-group-nav.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-DceSoh5V.js";const t=o;const c=s;export{t as DsTabGroupNav,c as defineCustomElement};
+import{T as o,d as p}from"./p-DmpLrzQp.js";const s=o;const r=p;export{s as DsTabGroupNav,r as defineCustomElement};
 //# sourceMappingURL=ds-tab-group-nav.js.map

package/dist/components/ds-tab-group.js

@@ -1,2 +1,2 @@
-import{p as r,H as e,c as o,h as a,a as t,t as s}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p-B_enucPQ.js";const c=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group::after{content:'';position:absolute;inset:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(r,e){this.value=r;this.dsChange.emit(r);if(e?.focus!==false){this.focusTab(r)}}focusTab(r){const e=this.el.querySelector(`[data-tab-id="${r}"]`);e?.focus({preventScroll:true})}onValueChange(r,e){if(e===undefined||r===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;const o=e.getAttribute("data-tab-id");if(o===r)return;const a=this.el.querySelector(`[data-tab-id="${r}"]`);if(a){a.focus({preventScroll:true})}else{e.blur()}}))}findEnabled(r,e){const o=this.selectableTabs;const a=o.length;for(let t=0;t<a;t++){const s=(r+e*(t+1)+a*(t+1))%a;if(!o[s]?.disabled)return s}return r}handleKeyDown(r){const e=this.selectableTabs;if(!e.length)return;const o=e.findIndex((r=>r.id===this.value));const a=this.orientation==="vertical";let t=null;if(!a){if(r.key==="ArrowRight"){t=this.findEnabled(o,1)}else if(r.key==="ArrowLeft"){t=this.findEnabled(o,-1)}}else{if(r.key==="ArrowDown"){t=this.findEnabled(o,1)}else if(r.key==="ArrowUp"){t=this.findEnabled(o,-1)}}if(r.key==="Home"){const r=e.findIndex((r=>!r.disabled));t=r===-1?null:r}else if(r.key==="End"){const r=[...e].reverse().findIndex((r=>!r.disabled));t=r===-1?null:e.length-1-r}if(t!==null){r.preventDefault();const o=e[t];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const e=this.orientation==="vertical";return a(t,{key:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},a("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",role:"tablist",class:{"tab-list":true,"tab-list--vertical":e},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":e?"vertical":undefined},this.tabs.map(((o,t)=>{if(n(o)){return a("div",{key:`divider-${t}`,class:{"tab-divider":true,"tab-divider--vertical":e},"aria-hidden":"true"},a("div",{class:"tab-divider__line"}))}const s=o.id===this.value;return a("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":s,[r]:!!r},"aria-selected":s,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:s?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},a("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[s?"text-body-small-emphasis":"text-body-small"]:true}},o.label,o.dot&&a("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),l)}break;case"ds-badge":if(!customElements.get(s(r))){d()}break}}))}b();const u=l;const g=b;export{u as DsTabGroup,g as defineCustomElement};
+import{p as r,H as e,c as o,h as a,a as t,t as s}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p--QMsZsaC.js";const c=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group::after{content:'';position:absolute;inset:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(r,e){this.value=r;this.dsChange.emit(r);if(e?.focus!==false){this.focusTab(r)}}focusTab(r){const e=this.el.querySelector(`[data-tab-id="${r}"]`);e?.focus({preventScroll:true})}onValueChange(r,e){if(e===undefined||r===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;const o=e.getAttribute("data-tab-id");if(o===r)return;const a=this.el.querySelector(`[data-tab-id="${r}"]`);if(a){a.focus({preventScroll:true})}else{e.blur()}}))}findEnabled(r,e){const o=this.selectableTabs;const a=o.length;for(let t=0;t<a;t++){const s=(r+e*(t+1)+a*(t+1))%a;if(!o[s]?.disabled)return s}return r}handleKeyDown(r){const e=this.selectableTabs;if(!e.length)return;const o=e.findIndex((r=>r.id===this.value));const a=this.orientation==="vertical";let t=null;if(!a){if(r.key==="ArrowRight"){t=this.findEnabled(o,1)}else if(r.key==="ArrowLeft"){t=this.findEnabled(o,-1)}}else{if(r.key==="ArrowDown"){t=this.findEnabled(o,1)}else if(r.key==="ArrowUp"){t=this.findEnabled(o,-1)}}if(r.key==="Home"){const r=e.findIndex((r=>!r.disabled));t=r===-1?null:r}else if(r.key==="End"){const r=[...e].reverse().findIndex((r=>!r.disabled));t=r===-1?null:e.length-1-r}if(t!==null){r.preventDefault();const o=e[t];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const e=this.orientation==="vertical";return a(t,{key:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},a("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",role:"tablist",class:{"tab-list":true,"tab-list--vertical":e},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":e?"vertical":undefined},this.tabs.map(((o,t)=>{if(n(o)){return a("div",{key:`divider-${t}`,class:{"tab-divider":true,"tab-divider--vertical":e},"aria-hidden":"true"},a("div",{class:"tab-divider__line"}))}const s=o.id===this.value;return a("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":s,[r]:!!r},"aria-selected":s,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:s?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},a("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[s?"text-body-small-emphasis":"text-body-small"]:true}},o.label,o.dot&&a("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),l)}break;case"ds-badge":if(!customElements.get(s(r))){d()}break}}))}b();const u=l;const g=b;export{u as DsTabGroup,g as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map

package/dist/components/p--QMsZsaC.js

@@ -0,0 +1,2 @@
+import{p as e,H as n,h as a,a as t,t as r}from"./index.js";import{c as i,b as s}from"./p-CXkDP-ct.js";const d="--_badge-gradient-position";function o(e){const n=e.closest("ds-app-shell");return n?.hasAttribute("gradient")===true}function c(e){const n=e.closest("ds-bar-nav");if(n instanceof HTMLElement&&n.shadowRoot){const e=n.shadowRoot.querySelector(".bar-nav");if(e instanceof HTMLElement){return{element:e,chromeHost:n,positionVar:i}}}const a=e.closest("ds-panel-nav");if(a instanceof HTMLElement&&a.shadowRoot){const e=a.shadowRoot.querySelector(".panel-nav");if(e instanceof HTMLElement){return{element:e,chromeHost:a,positionVar:s}}}return null}function g(e){const n=e.trim();if(!n)return{x:0,y:0};const a=n.split(/\s+/);const t=b(a[0]??"0");const r=b(a[1]??"0");return{x:t,y:r}}function b(e){const n=e.match(/^(-?[\d.]+)px$/);if(n)return Number(n[1]);return 0}function l(e,n,a){const t=e.getBoundingClientRect();const r=n.element.getBoundingClientRect();const i=t.left+t.width/2-r.left;const s=t.top+t.height/2-r.top;const{x:d,y:o}=g(a);return`${Math.round(d-i)}px ${Math.round(o-s)}px`}function u(e){const n=getComputedStyle(e.chromeHost);return n.getPropertyValue(e.positionVar).trim()||"0 0"}function h(e){const n=c(e);if(!n){e.style.removeProperty(d);return}const a=u(n);e.style.setProperty(d,l(e,n,a))}const f=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half);font-size:var(--typography-fontsize-xs);line-height:1}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--_badge-gradient-position, 0 0);background-repeat:no-repeat;opacity:var(--ds-shell-gradient-opacity, 1)}`;const m={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const k=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.bindGradientRingSync()}disconnectedCallback(){this.unbindGradientRingSync();this.el.style.removeProperty(d)}gradientBackgroundChanged(){this.bindGradientRingSync()}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>h(this.el);e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const n=this.el.closest("ds-app-shell");if(n)this.gradientObserver.observe(n);const a=this.el.closest("ds-bar-nav");if(a)this.gradientObserver.observe(a);const t=this.el.closest("ds-panel-nav");if(t)this.gradientObserver.observe(t)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}render(){const e=this.variant==="dot";if(!e&&this.count===0)return a(t,{style:{display:"none"}});const n=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const i=this.background??m[this.surface];return a(t,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:{"--_badge-ring":i}},a("span",{class:{badge__mark:true,"text-caption-emphasis":!e},"aria-hidden":"true"},!e&&n))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return f()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"on-gradient-background"],isSelected:[4,"is-selected"],label:[1]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-badge"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),k)}break}}))}p();export{k as B,p as d,o as i};
+//# sourceMappingURL=p--QMsZsaC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","findGradientSurface","barHost","HTMLElement","shadowRoot","element","querySelector","chromeHost","positionVar","SHELL_GRADIENT_POSITION_BAR_VAR","panelHost","SHELL_GRADIENT_POSITION_PANEL_VAR","parseCssBackgroundPosition","value","trimmed","trim","x","y","parts","split","parseLength","token","px","match","Number","badgeGradientPosition","badgeHost","surface","shellPosition","badgeRect","getBoundingClientRect","surfaceRect","anchorX","left","width","anchorY","top","height","Math","round","readShellGradientPosition","styles","getComputedStyle","getPropertyValue","syncBadgeGradientPosition","style","removeProperty","setProperty","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","constructor","registerHost","this","variant","count","max","gradientBackground","isSelected","gradientObserver","gradientWindowListener","componentDidLoad","bindGradientRingSync","disconnectedCallback","unbindGradientRingSync","el","gradientBackgroundChanged","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","render","isDot","h","Host","display","String","ariaLabel","label","ring","background","class","badge","badge__mark"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  const shell = from.closest('ds-app-shell');\n  return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav');\n  if (barHost instanceof HTMLElement && barHost.shadowRoot) {\n    const element = barHost.shadowRoot.querySelector('.bar-nav');\n    if (element instanceof HTMLElement) {\n      return {\n        element,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav');\n  if (panelHost instanceof HTMLElement && panelHost.shadowRoot) {\n    const element = panelHost.shadowRoot.querySelector('.panel-nav');\n    if (element instanceof HTMLElement) {\n      return {\n        element,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host. */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  const surface = findGradientSurface(badgeHost);\n  if (!surface) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  const shellPosition = readShellGradientPosition(surface);\n  badgeHost.style.setProperty(\n    BADGE_GRADIENT_POSITION_VAR,\n    badgeGradientPosition(badgeHost, surface, shellPosition),\n  );\n}\n",":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0;\n  border-radius: var(--dimension-radius-half);\n  font-size: var(--typography-fontsize-xs);\n  line-height: 1;\n}\n\n:host(.badge--selected) {\n  --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--_badge-gradient-position, 0 0);\n  background-repeat: no-repeat;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  syncBadgeGradientPosition,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"+\". */\n  @Prop() max: number = 9;\n\n  /** Surface context for the ring around dots. */\n  @Prop() surface: BadgeSurface = 'default';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Use on badges over `ds-app-shell[gradient]` nav chrome.\n   */\n  @Prop({ attribute: 'on-gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n  @Prop() isSelected: boolean = false;\n\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.bindGradientRingSync();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n    this.el.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => syncBadgeGradientPosition(this.el);\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? '+' : String(this.count);\n    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--selected': this.isSelected,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        aria-label={ariaLabel}\n        style={{ '--_badge-ring': ring }}\n      >\n        <span\n          class={{\n            'badge__mark': true,\n            'text-caption-emphasis': !isDot,\n          }}\n          aria-hidden=\"true\"\n        >\n          {!isDot && display}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-BdI4Wjw3.js

@@ -0,0 +1,2 @@
+import{p as o,H as n,c as a,h as r,a as e,t}from"./index.js";import{i,d as s}from"./p--QMsZsaC.js";import{d as c}from"./p-DqBCQRRd.js";const d=()=>`.action-btn.sc-ds-bar-nav-action{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:var(--dimension-space-075);background:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;color:var(--color-foreground-secondary);box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;transition:color var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot-ring:var(--color-background-secondary)}.action-btn.sc-ds-bar-nav-action::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none}.action-btn.sc-ds-bar-nav-action:hover:not(.inactive)::after{background:var(--_hover-bg);transition:none}.action-btn.sc-ds-bar-nav-action:active:not(.inactive)::after{background:var(--_pressed-bg);transition:none}.action-btn.sc-ds-bar-nav-action:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.action-btn.selected.sc-ds-bar-nav-action{color:var(--color-foreground-primary)}.action-btn.inactive.sc-ds-bar-nav-action{opacity:0.5;cursor:not-allowed;pointer-events:none}.onMedium.sc-ds-bar-nav-action{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.onBold.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral)}.onBold.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onStrong.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral)}.onStrong.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onAlwaysDark.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-secondary);--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background)}.onAlwaysDark.selected.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-primary)}.onNavigation.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot-ring:var(--color-navigation-background)}.onNavigation.selected.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-primary)}.onNavigation.sc-ds-bar-nav-action:focus-visible{outline-color:var(--color-navigation-interaction-focus)}.action-btn__icon-wrap.sc-ds-bar-nav-action{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.action-btn__dot.sc-ds-bar-nav-action{position:absolute;top:0;right:0;pointer-events:none}`;const l=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=a(this,"dsChange");this.icon="";this.selected=false;this.dot=false;this.inactive=false;this.ariaLabel="action";this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.selected)}}render(){const o=this.background;const n={"action-btn":true,selected:this.selected,inactive:this.inactive,onMedium:o==="medium",onBold:o==="bold",onStrong:o==="strong",onAlwaysDark:o==="always-dark",onNavigation:o==="navigation"};return r(e,{key:"19e3d157837b2e1d4df184a07a0e0274e56b2b78"},r("button",{key:"d68ca13d1037772649f3e1c5bb3d62fd960d7df3",type:"button",class:n,disabled:this.inactive,"aria-pressed":this.selected,"aria-label":this.ariaLabel,onClick:this.handleClick},r("span",{key:"e77523f1fabea20cf58383da0d6feb691ca56ab1",class:"action-btn__icon-wrap"},r("ds-icon",{key:"5d1262a29151d5ede27da07050494e8521d4be2d",name:this.icon,size:"md",color:"inherit"}),this.dot&&r("ds-badge",{key:"880f9d8b6e303da722f459d3d15e9667734e3740",class:"action-btn__dot",variant:"dot",background:"var(--_dot-ring)","on-gradient-background":i(this.el),label:"","aria-hidden":"true"}))))}get el(){return this}static get style(){return d()}},[2,"ds-bar-nav-action",{icon:[1],selected:[4],dot:[4],inactive:[4],ariaLabel:[1,"aria-label"],background:[1]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-bar-nav-action","ds-badge","ds-icon"];o.forEach((o=>{switch(o){case"ds-bar-nav-action":if(!customElements.get(t(o))){customElements.define(t(o),l)}break;case"ds-badge":if(!customElements.get(t(o))){s()}break;case"ds-icon":if(!customElements.get(t(o))){c()}break}}))}b();export{l as B,b as d};
+//# sourceMappingURL=p-BdI4Wjw3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["barNavActionCss","BarNavAction","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","selected","dot","inactive","ariaLabel","handleClick","dsChange","emit","render","bg","background","cls","onMedium","onBold","onStrong","onAlwaysDark","onNavigation","h","Host","key","type","class","disabled","onClick","name","size","color","variant","isShellGradientActive","el","label"],"sources":["src/wc/components/BarNavAction/BarNavAction.css?tag=ds-bar-nav-action&encapsulation=scoped","src/wc/components/BarNavAction/BarNavAction.tsx"],"sourcesContent":[".action-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  background: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.action-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.action-btn:hover:not(.inactive)::after  { background: var(--_hover-bg);  transition: none; }\n.action-btn:active:not(.inactive)::after { background: var(--_pressed-bg); transition: none; }\n\n.action-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n/* Selected: icon turns primary — no background change */\n.action-btn.selected { color: var(--color-foreground-primary); }\n\n.action-btn.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ==========================================================================\n   Background context\n   ========================================================================== */\n\n.onMedium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.onBold {\n  color: var(--color-foreground-on-bold-background-secondary);\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n}\n\n.onBold.selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.onStrong {\n  color: var(--color-foreground-on-bold-background-secondary);\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n}\n\n.onStrong.selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.onAlwaysDark {\n  color: var(--color-always-dark-foreground-secondary);\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n}\n\n.onAlwaysDark.selected { color: var(--color-always-dark-foreground-primary); }\n\n.onNavigation {\n  color: var(--color-navigation-foreground-secondary);\n  --_hover-bg: var(--color-navigation-interaction-hover);\n  --_pressed-bg: var(--color-navigation-interaction-pressed);\n  --_dot-ring: var(--color-navigation-background);\n}\n\n.onNavigation.selected { color: var(--color-navigation-foreground-primary); }\n\n.onNavigation:focus-visible {\n  outline-color: var(--color-navigation-interaction-focus);\n}\n\n/* ==========================================================================\n   Inner layout — icon zone sits above the ::after overlay\n   ========================================================================== */\n\n.action-btn__icon-wrap {\n  position: relative;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n/* Notification dot — top-right corner of the icon zone */\n.action-btn__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import { Component, Prop, Event, EventEmitter, Element, h, Host } from '@stencil/core';\nimport { isShellGradientActive } from '../../nav/badge-gradient-ring';\n\nexport type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';\n\n@Component({\n  tag: 'ds-bar-nav-action',\n  styleUrl: 'BarNavAction.css',\n  scoped: true,\n})\nexport class BarNavAction {\n  @Element() el!: HTMLElement;\n\n  /** Icon name passed to <ds-icon>. */\n  @Prop() icon: string = '';\n\n  /** Controlled toggle/selected state. */\n  @Prop() selected: boolean = false;\n\n  /** Show a notification dot (brand colour) at the top-right of the icon. */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';\n\n  /** Parent surface context — adjusts hover/press colours for coloured backgrounds. */\n  @Prop() background: BarNavActionBackground | undefined;\n\n  /** Emits the new selected value (!selected) on click. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.dsChange.emit(!this.selected);\n  };\n\n  render() {\n    const bg = this.background;\n\n    const cls: Record<string, boolean> = {\n      'action-btn': true,\n      selected: this.selected,\n      inactive: this.inactive,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n      onNavigation: bg === 'navigation',\n    };\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={cls}\n          disabled={this.inactive}\n          aria-pressed={this.selected}\n          aria-label={this.ariaLabel}\n          onClick={this.handleClick}\n        >\n          <span class=\"action-btn__icon-wrap\">\n            <ds-icon name={this.icon} size=\"md\" color=\"inherit\" />\n            {this.dot && (\n              <ds-badge\n                class=\"action-btn__dot\"\n                variant=\"dot\"\n                background=\"var(--_dot-ring)\"\n                on-gradient-background={isShellGradientActive(this.el)}\n                label=\"\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uIAAA,MAAMA,EAAkB,IAAM,iyG,MCUjBC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,6EASUC,KAAAC,KAAe,GAGfD,KAAAE,SAAoB,MAGpBF,KAAAG,IAAe,MAGfH,KAAAI,SAAoB,MAEOJ,KAAAK,UAAoB,SAQ/CL,KAAAM,YAAc,KACpB,GAAIN,KAAKI,SAAU,OACnBJ,KAAKO,SAASC,MAAMR,KAAKE,SAAS,CA4CrC,CAzCC,MAAAO,GACE,MAAMC,EAAKV,KAAKW,WAEhB,MAAMC,EAA+B,CACnC,aAAc,KACdV,SAAUF,KAAKE,SACfE,SAAUJ,KAAKI,SACfS,SAAUH,IAAO,SACjBI,OAAQJ,IAAO,OACfK,SAAUL,IAAO,SACjBM,aAAcN,IAAO,cACrBO,aAAcP,IAAO,cAGvB,OACEQ,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAOV,EACPW,SAAUvB,KAAKI,SAAQ,eACTJ,KAAKE,SAAQ,aACfF,KAAKK,UACjBmB,QAASxB,KAAKM,aAEdY,EAAA,QAAAE,IAAA,2CAAME,MAAM,yBACVJ,EAAA,WAAAE,IAAA,2CAASK,KAAMzB,KAAKC,KAAMyB,KAAK,KAAKC,MAAM,YACzC3B,KAAKG,KACJe,EAAA,YAAAE,IAAA,2CACEE,MAAM,kBACNM,QAAQ,MACRjB,WAAW,mBAAkB,yBACLkB,EAAsB7B,KAAK8B,IACnDC,MAAM,GAAE,cACI,W","ignoreList":[]}

package/dist/components/p-CXkDP-ct.js

@@ -0,0 +1,2 @@
+const n="--ds-shell-gradient-image";const t="--ds-shell-gradient-size";const a="--ds-shell-gradient-position-panel";const r="--ds-shell-gradient-position-bar";const s="--ds-shell-gradient-opacity";const o="0.1";const e="128.57% 141.42% at 0% 0%";function c(){return`radial-gradient(${e}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`}function i(n){return c()}function l(n){return`${Math.round(n.width)}px ${Math.round(n.height)}px`}function d(){return"0 0"}function u(n){return`${-Math.round(n)}px 0`}export{n as S,t as a,a as b,r as c,s as d,o as e,u as f,d as g,l as h,i as s};
+//# sourceMappingURL=p-CXkDP-ct.js.map

package/dist/components/p-CXkDP-ct.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","SHELL_GRADIENT_OPACITY","GRADIENT_GEOMETRY","buildShellRadialGradient","shellGradientImageForStyle","_style","shellGradientSize","layout","Math","round","width","height","shellGradientPositionPanel","shellGradientPositionBar","panelWidth"],"sources":["src/wc/nav/shell-gradient.ts"],"sourcesContent":["import type { NavChromeStyle } from './nav-chrome';\n\n/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n\n/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\nconst GRADIENT_GEOMETRY = '128.57% 141.42% at 0% 0%';\n\n/**\n * Unified shell radial — same wash for all nav chrome styles.\n * Tokens follow `data-theme` (light/dark blue intent).\n */\nexport function buildShellRadialGradient(): string {\n  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImageForStyle(_style: NavChromeStyle): string {\n  return buildShellRadialGradient();\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\nexport function shellGradientSize(layout: ShellGradientLayout): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n"],"mappings":"AAGO,MAAMA,EAA2B,4BACjC,MAAMC,EAA0B,2BAChC,MAAMC,EAAoC,qCAC1C,MAAMC,EAAkC,mCACxC,MAAMC,EAA6B,8BAGnC,MAAMC,EAAyB,MAEtC,MAAMC,EAAoB,2B,SAMVC,IACd,MAAO,mBAAmBD,yJAC5B,CAGM,SAAUE,EAA2BC,GACzC,OAAOF,GACT,CAQM,SAAUG,EAAkBC,GAChC,MAAO,GAAGC,KAAKC,MAAMF,EAAOG,YAAYF,KAAKC,MAAMF,EAAOI,WAC5D,C,SAEgBC,IACd,MAAO,KACT,CAEM,SAAUC,EAAyBC,GACvC,MAAO,IAAIN,KAAKC,MAAMK,QACxB,Q","ignoreList":[]}

package/dist/components/p-DmpLrzQp.js

@@ -0,0 +1,2 @@
+import{p as a,H as r,c as o,h as t,a as e,t as n}from"./index.js";import{i,d as s}from"./p--QMsZsaC.js";import{g as d,i as c}from"./p-BQq26pt9.js";const l=()=>`.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group-nav:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group-nav:disabled,.tab[aria-disabled="true"].sc-ds-tab-group-nav{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.on-navigation.sc-ds-tab-group-nav:focus-visible{outline-color:var(--color-navigation-interaction-focus)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const b=a(class a extends r{constructor(a){super();if(a!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return d(this.tabs)}selectTab(a,r){this.value=a;this.dsChange.emit(a);if(r?.focus!==false){this.focusTab(a)}}focusTab(a){const r=this.el.querySelector(`[data-tab-id="${a}"]`);r?.focus({preventScroll:true})}onValueChange(a,r){if(r===undefined||a===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const o=r.getAttribute("data-tab-id");if(o===a)return;const t=this.el.querySelector(`[data-tab-id="${a}"]`);if(t){t.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(a,r){const o=this.selectableTabs;const t=o.length;for(let e=0;e<t;e++){const n=(a+r*(e+1)+t*(e+1))%t;if(!o[n]?.disabled)return n}return a}handleKeyDown(a){const r=this.selectableTabs;if(!r.length)return;const o=r.findIndex((a=>a.id===this.value));const t=this.orientation==="vertical";let e=null;if(!t){if(a.key==="ArrowRight"){e=this.findEnabled(o,1)}else if(a.key==="ArrowLeft"){e=this.findEnabled(o,-1)}}else{if(a.key==="ArrowDown"){e=this.findEnabled(o,1)}else if(a.key==="ArrowUp"){e=this.findEnabled(o,-1)}}if(a.key==="Home"){const a=r.findIndex((a=>!a.disabled));e=a===-1?null:a}else if(a.key==="End"){const a=[...r].reverse().findIndex((a=>!a.disabled));e=a===-1?null:r.length-1-a}if(e!==null){a.preventDefault();const o=r[e];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}render(){const a=this.getBgClass();const r=this.orientation==="vertical";const o=this.background==="navigation";return t(e,{key:"9e36138fd84741cd8db1dbc3ca1d2574d5830eb7",class:"tab-group-nav-host"},t("div",{key:"586f8a3fde0ada67162d6d0190f57136ea3dd929",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":o},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((o,e)=>{if(c(o)){return t("div",{key:`divider-${e}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},t("div",{class:"tab-divider__line"}))}const n=o.id===this.value;return t("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":n,[a]:!!a},"aria-selected":n,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:n?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},t("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[n?"text-body-medium-emphasis":"text-body-medium"]:true}},o.label,o.dot&&t("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)","on-gradient-background":i(this.el),label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return l()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const a=["ds-tab-group-nav","ds-badge"];a.forEach((a=>{switch(a){case"ds-tab-group-nav":if(!customElements.get(n(a))){customElements.define(n(a),b)}break;case"ds-badge":if(!customElements.get(n(a))){s()}break}}))}v();export{b as T,v as d};
+//# sourceMappingURL=p-DmpLrzQp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tabGroupNavCss","TabGroupNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectableTabs","getSelectableTabs","selectTab","id","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","nextTab","blur","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","isNavigation","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","index","isTabDivider","isSelected","type","panelId","tabIndex","onClick","tab__label","dot","label","variant","isShellGradientActive"],"sources":["src/wc/components/TabGroupNav/TabGroupNav.css?tag=ds-tab-group-nav&encapsulation=scoped","src/wc/components/TabGroupNav/TabGroupNav.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::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.tab:hover::after  { background: var(--_hover-bg);   transition: none; }\n.tab:active::after { background: var(--_pressed-bg);  transition: none; }\n\n/* Focus ring only — no persistent hover fill from keyboard focus */\n.tab:focus-visible:not(:hover):not(:active)::after {\n  background: transparent;\n}\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n.tab:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.on-navigation {\n  color: var(--color-navigation-foreground-secondary);\n  --_hover-bg: var(--color-navigation-interaction-hover);\n  --_pressed-bg: var(--color-navigation-interaction-pressed);\n  --_dot: var(--color-navigation-foreground-brand);\n  --_dot-ring: var(--color-navigation-background);\n}\n\n.on-navigation.tab--selected { color: var(--color-navigation-foreground-primary); }\n\n.on-navigation:focus-visible {\n  outline-color: var(--color-navigation-interaction-focus);\n}\n\n.tab-list--on-navigation .tab-divider__line {\n  background-color: var(--color-navigation-border-tertiary);\n}\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--dimension-size-400);\n  padding-block: var(--dimension-space-075);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n  width: auto;\n  height: var(--dimension-space-100);\n  align-self: stretch;\n  padding-block: 0;\n  padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport { isShellGradientActive } from '../../nav/badge-gradient-ring';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\nexport type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';\n\n@Component({\n  tag: 'ds-tab-group-nav',\n  styleUrl: 'TabGroupNav.css',\n  scoped: true,\n})\nexport class TabGroupNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabGroupNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.disabled) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const currentIdx = tabs.findIndex(t => t.id === this.value);\n    const isVertical = this.orientation === 'vertical';\n\n    let nextIdx: number | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowUp') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.disabled);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    if (this.background === 'navigation') return 'on-navigation';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n    const isNavigation = this.background === 'navigation';\n\n    return (\n      <Host class=\"tab-group-nav-host\">\n        <div\n          role=\"tablist\"\n          class={{\n            'tab-list': true,\n            'tab-list--vertical': isVertical,\n            'tab-list--on-navigation': isNavigation,\n          }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class={{\n                    'tab-divider': true,\n                    'tab-divider--vertical': isVertical,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.disabled || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.disabled}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                  [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,\n                }}>\n                  {tab.label}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      background=\"var(--_dot-ring)\"\n                      on-gradient-background={isShellGradientActive(this.el)}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 export type BadgeVariant = 'counter' | 'dot';
 export type BadgeSurface = 'default' | 'primary' | 'secondary' | 'medium' | 'bold' | 'strong' | 'navigation' | 'always-dark';
 export declare class Badge {
+    el: HTMLElement;
     /** Render as a compact counter or notification dot. */
     variant: BadgeVariant;
     /** Count shown for counter badges. Count 0 hides the badge. */
@@ -11,10 +12,22 @@ export declare class Badge {
     surface: BadgeSurface;
     /** Direct ring background override for component-local surfaces. */
     background: string | undefined;
+    /**
+     * Ring samples the shell gradient stack (base fill + wash) instead of a flat
+     * `box-shadow`. Use on badges over `ds-app-shell[gradient]` nav chrome.
+     */
+    gradientBackground: boolean;
     /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */
     isSelected: boolean;
     /** Accessible label. Defaults to the count as a string. */
     label: string | undefined;
+    private gradientObserver;
+    private gradientWindowListener;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    gradientBackgroundChanged(): void;
+    private bindGradientRingSync;
+    private unbindGradientRingSync;
     render(): any;
 }
 //# sourceMappingURL=Badge.d.ts.map