@ds-mo/ui 14.25.0 → 14.27.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["scrollEdgeFadeClassMap","opts","edges","Array","isArray","classes","scrollAware","hidden","edge","atEnd","PANEL_NAV_USER_MENU_PLACEMENT","side","align","anchorAlignment","sideOffset","alignOffset","PANEL_NAV_CHILD_MENU_PLACEMENT","NAV_STYLE_HINT_ATTR","readNavStyleAttr","attr","undefined","resolveNavChromeStyle","styleProp","hostAttr","docHint","fromHost","hint","document","documentElement","getAttribute","fromHint","shouldResyncNavChromeStyle","renderedStyle","style","PANEL_NAV_USER_MENU_ANCHOR_ID","scrollEdgeFadeCss","panelNavCss","nextPanelNavInstanceId","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","instanceId","navStyle","disableViewTransition","groups","presentation","routerMode","activeId","activeChildId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","dashboardLabel","settingsLabel","accountLabel","accountMenuExpanded","dashboardNavigationLabel","settingsNavigationLabel","expandNavigationLabel","collapseNavigationLabel","navigationItemsLabel","parsedGroups","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","urlDerivedActiveChildId","bodyScrollable","expandedParentId","inlineChildrenExpansionReady","flyoutParentId","flyoutOpen","flyoutInitialFocusVisible","transitionFallbackTimer","initialRenderComplete","inlineChildrenExpansionFrame","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","closeFlyout","handleFlyoutAfterClose","handleFlyoutSelect","event","parent","getAllItems","find","item","id","child","children","detail","value","emitChildSelect","followFlyoutAnchor","effectiveActiveId","effectiveActiveChildId","collapsedPresentation","effectiveDisableViewTransition","resolvePanelNavDisableVt","el","onCollapsedChange","next","prev","stageInlineChildrenExpansion","syncExpandedParent","getFirstRovingIndex","startCollapseAnimation","onViewportNarrowChange","getVisibleRovingEntries","length","onBreakpointChange","disconnectResizeObserver","effectiveBreakpoint","connectResizeObserver","onGroupsChange","val","parsePanelNavGroups","syncActiveFromUrl","onPresentationChange","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","componentWillLoad","resolvePanelNavStyle","isViewportNarrow","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","connectScrollRegionObserver","updateBodyScrollable","componentDidRender","scheduleInlineChildrenExpansion","disconnectedCallback","disconnectScrollRegionObserver","clearInlineChildrenExpansionFrame","clearCollapseAnimationCompletion","querySelector","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","dsChromeTransitionStart","emit","source","panel","transitionCompletionHandler","e","target","propertyName","finishCollapseAnimation","addEventListener","requestAnimationFrame","fallbackMs","panelNavWidthTransitionMs","getComputedStyle","setTimeout","stage","getBoundingClientRect","cancelAnimationFrame","wasAnimating","dsChromeTransitionEnd","clearTimeout","attributeValue","Number","isFinite","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","bodyEl","scrollRegionObserver","Boolean","scrollHeight","clientHeight","selection","derivePanelNavSelectionFromUrl","parentId","childId","active","shouldResyncPanelNavStyle","shouldResyncPanelNavGroups","remaining","HOST_PROP_SYNC_BUDGET","tick","queueMicrotask","applyToggle","setItem","String","dsNavToggle","flatMap","g","items","kind","filter","isInactive","map","getFooterRovingIndex","getUserRovingIndex","getRovingElement","index","itemCount","querySelectorAll","focusRovingAt","focus","preventScroll","activateRovingIndex","keyboard","entries","handleToggle","entry","activateParent","handleItemClick","handleFooterAction","anchor","dsNavUserAction","menuPlacement","handleRovingKeyDown","key","preventDefault","footerIdx","userIdx","firstIdx","dsNavSelect","dsNavChildSelect","href","resolveSafeUrl","ownerDocument","createElement","append","click","remove","firstEnabledPanelNavChild","parentAnchorId","replace","childListId","resolvePanelNavToggle","toggleCollapsed","dsNavFooterAction","handleUserAction","currentTarget","handleResizeHandleMouseEnter","prefersReducedMotion","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","body","cursor","userSelect","onMove","ev","deltaX","Math","abs","onUp","renderFooterAction","isDashboardChrome","footerLabel","h","label","size","variant","class","icon","activeFill","hasBorder","focusTabIndex","onDsClick","onKeyDown","onFocusin","renderFooterUser","tipLabel","userButton","type","tabIndex","onClick","onFocus","as","emphasis","color","lineTruncation","name","renderParentItem","rovingPosition","isActive","hasChildRoutes","disclosure","expanded","itemContent","dot","hasRing","sharedProps","useAnchor","control","renderChildItem","childIndex","childReverseIndex","inactive","content","disabled","renderFlyout","open","anchorId","selectionMode","menuLabel","initialFocusVisible","sections","isSelected","onDsSelect","onDsClose","onDsAfterClose","render","chromeStyle","isDashboard","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","ref","element","role","group","itemIndex","parentPosition","hasGroupSiblings","hasDividerBefore","hasDividerAfter","showBranchDividers","hasInlineChildren","childPosition","inert","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/utils/scroll-edge-fade.ts","src/wc/components/Menu/menu-placement.ts","src/wc/shell/nav-chrome.ts","src/wc/components/PanelNav/panel-nav-types.ts","src/wc/utils/scroll-edge-fade.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/** CSS custom property for scroll-edge fade depth (dimension token or length). */\nexport const SCROLL_EDGE_FADE_SIZE_VAR = '--ds-scroll-edge-fade-size';\n\nexport const SCROLL_EDGE_FADE_DEFAULT_SIZE = 'var(--dimension-size-600)';\n\nexport type ScrollEdgeFadeEdge = 'top' | 'bottom' | 'left' | 'right';\n\nexport type ScrollEdgeFadeSizeToken =\n  | 'size-000'\n  | 'size-050'\n  | 'size-075'\n  | 'size-100'\n  | 'size-150'\n  | 'size-200'\n  | 'size-250'\n  | 'size-300'\n  | 'size-400'\n  | 'size-500'\n  | 'size-600'\n  | 'size-800';\n\nexport type ScrollEdgeFadeSize = ScrollEdgeFadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<ScrollEdgeFadeSizeToken, string> = {\n  'size-000': 'var(--dimension-size-000)',\n  'size-050': 'var(--dimension-size-050)',\n  'size-075': 'var(--dimension-size-075)',\n  'size-100': 'var(--dimension-size-100)',\n  'size-150': 'var(--dimension-size-150)',\n  'size-200': 'var(--dimension-size-200)',\n  'size-250': 'var(--dimension-size-250)',\n  'size-300': 'var(--dimension-size-300)',\n  'size-400': 'var(--dimension-size-400)',\n  'size-500': 'var(--dimension-size-500)',\n  'size-600': 'var(--dimension-size-600)',\n  'size-800': 'var(--dimension-size-800)',\n};\n\nconst SIZE_REF = `var(${SCROLL_EDGE_FADE_SIZE_VAR}, ${SCROLL_EDGE_FADE_DEFAULT_SIZE})`;\n\nexport interface ScrollEdgeFadeOptions {\n  /** One or more edges to fade. */\n  edges: ScrollEdgeFadeEdge | ScrollEdgeFadeEdge[];\n  /**\n   * Reveal and hide configured fades from the container's own scroll position.\n   * Uses CSS scroll-driven animations with a static-fade fallback; no listener required.\n   */\n  scrollAware?: boolean;\n  /**\n   * When true, removes the complete mask. Pass a map to remove only configured\n   * edges that are flush when scroll state already lives in JavaScript.\n   */\n  atEnd?: boolean | Partial<Record<ScrollEdgeFadeEdge, boolean>>;\n  /** Force the mask off regardless of scroll position (`ds-fade` `visible={false}`). */\n  hidden?: boolean;\n}\n\n/** Resolve a dimension size token name or raw CSS length for `--ds-scroll-edge-fade-size`. */\nexport function resolveScrollEdgeFadeSize(\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string\n): string {\n  if (height) return height;\n  return Object.prototype.hasOwnProperty.call(SIZE_VALUE, size)\n    ? SIZE_VALUE[size as ScrollEdgeFadeSizeToken]\n    : size;\n}\n\n/** Inline style map setting fade depth on a scroll container. */\nexport function scrollEdgeFadeSizeStyle(\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string\n): Record<string, string> {\n  return {\n    [SCROLL_EDGE_FADE_SIZE_VAR]: resolveScrollEdgeFadeSize(size, height),\n  };\n}\n\n/**\n * Alpha mask for a scroll container edge — content fades to transparent so\n * textured backgrounds (shell gradients, images) show through.\n */\nexport function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {\n  switch (edge) {\n    case 'top':\n      return `linear-gradient(to bottom, transparent 0, #000 ${SIZE_REF}, #000 100%)`;\n    case 'bottom':\n      return `linear-gradient(to bottom, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n    case 'left':\n      return `linear-gradient(to right, transparent 0, #000 ${SIZE_REF}, #000 100%)`;\n    case 'right':\n      return `linear-gradient(to right, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n  }\n}\n\n/** Inline style map for a masked scroll region (single edge). */\nexport function scrollEdgeFadeMaskStyle(\n  edge: ScrollEdgeFadeEdge,\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string\n): Record<string, string> {\n  const mask = scrollEdgeFadeMaskImage(edge);\n  return {\n    ...scrollEdgeFadeSizeStyle(size, height),\n    WebkitMaskImage: mask,\n    maskImage: mask,\n    WebkitMaskSize: '100% 100%',\n    maskSize: '100% 100%',\n  };\n}\n\n/** Class map for `scroll-edge-fade` modifiers — pair with `scroll-edge-fade.css`. */\nexport function scrollEdgeFadeClassMap(opts: ScrollEdgeFadeOptions): Record<string, boolean> {\n  const edges = Array.isArray(opts.edges) ? opts.edges : [opts.edges];\n  const classes: Record<string, boolean> = {\n    'scroll-edge-fade': true,\n    'scroll-edge-fade--scroll-aware': opts.scrollAware === true,\n    'scroll-edge-fade--hidden': opts.hidden === true,\n  };\n\n  for (const edge of edges) {\n    classes[`scroll-edge-fade--${edge}`] = true;\n  }\n\n  const { atEnd } = opts;\n  if (atEnd === true) {\n    classes['scroll-edge-fade--at-end'] = true;\n  } else if (atEnd && typeof atEnd === 'object') {\n    for (const edge of edges) {\n      if (atEnd[edge]) {\n        classes[`scroll-edge-fade--${edge}-at-edge`] = true;\n      }\n    }\n  }\n\n  return classes;\n}\n\n/** Whether a scroll container is flush with the given edge (within `threshold` px). */\nexport function isScrollAtEdge(el: HTMLElement, edge: ScrollEdgeFadeEdge, threshold = 2): boolean {\n  switch (edge) {\n    case 'top':\n      return el.scrollTop <= threshold;\n    case 'bottom':\n      return el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;\n    case 'left':\n      return el.scrollLeft <= threshold;\n    case 'right':\n      return el.scrollWidth - el.scrollLeft - el.clientWidth <= threshold;\n  }\n}\n","import type { ChoicePopupAnchorAlignment } from '../../utils/choice-popup-alignment';\nimport type { MenuAlign, MenuSide } from './menu-position';\n\n/** Placement props bindable on `ds-menu` (side, align, offsets). */\nexport interface MenuPlacement {\n  side: MenuSide;\n  align: MenuAlign;\n  anchorAlignment: ChoicePopupAnchorAlignment;\n  sideOffset: number | string;\n  alignOffset: number | string;\n}\n\n/**\n * Canonical `ds-menu` placement for the **panel-nav footer user menu**.\n * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).\n *\n * Not for BarNav overflow menus — those use `side=\"bottom\"` / `align=\"end\"` internally.\n * `align: 'end'` bottom-aligns the last choice cell on the anchor; the side offset nudges into the content area:\n * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).\n * - `anchorAlignment: 'choice-cell'`: the shared section inset puts the last row edge on the footer user row.\n */\nexport const PANEL_NAV_USER_MENU_PLACEMENT = {\n  side: 'right',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n\n/**\n * Canonical placement for PanelNav's collapsed child-route flyout.\n * The parent control is 8px inside the panel edge, so a 12px side offset leaves\n * a 4px visual gap outside the panel. Start choice-cell alignment places the\n * first flyout row on the same block axis as its parent control.\n */\nexport const PANEL_NAV_CHILD_MENU_PLACEMENT = {\n  side: 'right',\n  align: 'start',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n\n/**\n * Canonical placement for a menu opened by a PanelTools header action.\n * Matches BarNav overflow: the 32px trigger is 8px inside the 48px header, so\n * a 12px side offset places the popup 4px below the header edge. Choice-cell\n * alignment keeps the final menu item edge aligned with the trigger.\n */\nexport const PANEL_TOOLS_HEADER_MENU_PLACEMENT = {\n  side: 'bottom',\n  align: 'end',\n  anchorAlignment: 'choice-cell',\n  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n  alignOffset: 0,\n} as const satisfies MenuPlacement;\n","/** Nav chrome style slot — dashboard vs settings. Colors unified for now; texture hooks use the class. */\nexport type NavChromeStyle = 'dashboard' | 'settings';\n\n/** Document hint for first paint before framework props land. */\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\nexport function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined {\n  if (attr === 'dashboard' || attr === 'settings') return attr;\n  return undefined;\n}\n\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\nexport function resolveNavChromeStyle(\n  styleProp: NavChromeStyle,\n  hostAttr: string | null,\n  docHint?: string | null\n): NavChromeStyle {\n  const fromHost = readNavStyleAttr(hostAttr);\n  if (fromHost) return fromHost;\n\n  const hint =\n    docHint !== undefined\n      ? docHint\n      : typeof document !== 'undefined'\n        ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n        : null;\n  const fromHint = readNavStyleAttr(hint);\n  if (fromHint) return fromHint;\n\n  return styleProp;\n}\n\nexport function shouldResyncNavChromeStyle(\n  renderedStyle: NavChromeStyle,\n  style: NavChromeStyle\n): boolean {\n  return renderedStyle !== style;\n}\n","import type { MenuPlacement } from '../Menu/menu-placement';\nimport { PANEL_NAV_USER_MENU_PLACEMENT } from '../Menu/menu-placement';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\n\nexport type { NavChromeStyle };\nexport type PanelNavRouterMode = 'anchor' | 'event';\nexport type PanelNavPresentation = 'flat' | 'nested';\n\nexport interface PanelNavChildItem {\n  id: string;\n  label: string;\n  /** Show a notification dot badge on the child route. */\n  dot?: boolean;\n  /** Prevent activation while keeping the route visible. */\n  isInactive?: boolean;\n  /** Route path used for URL matching and native anchor navigation. */\n  href?: string;\n}\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  /** 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  /** Optional route sections. Parents with children resolve through a child, not their own href. */\n  children?: PanelNavChildItem[];\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  /** Recommended `ds-menu` placement — spread onto external user menu instance. */\n  menuPlacement: MenuPlacement;\n}\n\n/** Navigation intent for a child route rendered inline or in the collapsed flyout. */\nexport interface PanelNavChildSelectDetail {\n  parentId: string;\n  childId: string;\n  href?: string;\n}\n\nexport { PANEL_NAV_USER_MENU_PLACEMENT };\n","/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n  from {\n    --ds-scroll-edge-fade-top: 0px;\n  }\n  to {\n    --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n  }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n  from {\n    --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n  }\n  to {\n    --ds-scroll-edge-fade-bottom: 0px;\n  }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n  from {\n    --ds-scroll-edge-fade-left: 0px;\n  }\n  to {\n    --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n  }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n  from {\n    --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n  }\n  to {\n    --ds-scroll-edge-fade-right: 0px;\n  }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n  --ds-scroll-edge-fade-size: var(--dimension-size-600);\n  --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n  --ds-scroll-edge-fade-target-top: 0px;\n  --ds-scroll-edge-fade-target-bottom: 0px;\n  --ds-scroll-edge-fade-target-left: 0px;\n  --ds-scroll-edge-fade-target-right: 0px;\n  --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n  --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n  --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n  --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n  --ds-scroll-edge-fade-block-mask: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--ds-scroll-edge-fade-top),\n    #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n    transparent 100%\n  );\n  --ds-scroll-edge-fade-inline-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--ds-scroll-edge-fade-left),\n    #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n    transparent 100%\n  );\n\n  /* Intersecting the block and inline masks lets every edge compose correctly. */\n  -webkit-mask-image: var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);\n  mask-image: var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n  --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n  --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n  --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n  --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n  --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n  --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n  --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n  --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n  .scroll-edge-fade--scroll-aware {\n    animation-name:\n      ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom,\n      ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;\n    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n    animation-duration: 1ms;\n    animation-timing-function: ease-in-out;\n    animation-fill-mode: both;\n    animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n    animation-range:\n      0 var(--ds-scroll-edge-fade-reveal-distance),\n      calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n      0 var(--ds-scroll-edge-fade-reveal-distance),\n      calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .scroll-edge-fade--scroll-aware {\n      animation: none;\n    }\n  }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n  --ds-scroll-edge-fade-window-start: 100%;\n  --ds-scroll-edge-fade-window-end: 100%;\n\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 var(--ds-scroll-edge-fade-window-start),\n    transparent var(--ds-scroll-edge-fade-window-end)\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 var(--ds-scroll-edge-fade-window-start),\n    transparent var(--ds-scroll-edge-fade-window-end)\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n","@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/scrollbar-hidden.css';\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(\n    var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px)\n  );\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)\n    var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur: calc(\n    var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms)\n  );\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur)\n    var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – default chrome (app surfaces) ─ */\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  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n/* Shell-owned chrome (bg + wash) — panel is a transparent frame. */\n:host-context(ds-shell-app:not([gradient-preset='none'])) .panel-nav,\n:host-context(ds-shell-app.shell-app--paper-texture) .panel-nav {\n  background-color: transparent;\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers on these classes later. */\n.panel-nav--dashboard,\n.panel-nav--settings {\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  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\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: visible;\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-ui, system-ui);\n  isolation: isolate;\n}\n\n.panel-nav__header,\n.panel-nav__body,\n.panel-nav__footer {\n  position: relative;\n  z-index: 3;\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  height: var(--dimension-size-600, 48px);\n  flex-shrink: 0;\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  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: default;\n  color: var(--_nav-fg-primary);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n  /* Hover/press: `.ds-interaction-fill` (tokens from --_nav-* via --ds-interaction-*). */\n}\n\n.panel-nav--breakpoint-locked .panel-nav__header-btn {\n  cursor: default;\n}\n\n/* Logo — visible by default; instant swap to toggle on hover (no crossfade overlap) */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  opacity: 1;\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 — stacked on logo; under hover wash (::after z-index 3) */\n.panel-nav__header-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  opacity: 0;\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .panel-nav:not(.panel-nav--breakpoint-locked)\n    .panel-nav__header-btn:hover\n    .panel-nav__header-logo {\n    opacity: 0;\n  }\n\n  .panel-nav:not(.panel-nav--breakpoint-locked)\n    .panel-nav__header-btn:hover\n    .panel-nav__header-toggle {\n    opacity: 1;\n  }\n}\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* The collapsed rail's outer width includes its 1px divider. Return that pixel\n   to the content box so body items match the other 32px rail controls. */\n.panel-nav--collapsed .panel-nav__body {\n  padding-inline-end: calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012));\n}\n\n.panel-nav__sections {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  width: 100%;\n}\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__branch {\n  display: flex;\n  flex-direction: column;\n}\n\n.panel-nav__branch-divider {\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  transition:\n    grid-template-rows\n      var(\n        --_panel-nav-nested-section-duration,\n        calc(\n          var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2)\n        )\n      )\n      var(--effect-animation-easing-ease-in-out)\n      var(\n        --_panel-nav-nested-transition-wait,\n        calc(var(--effect-animation-duration-short-3) + var(--effect-animation-duration-short-1))\n      ),\n    opacity\n      var(\n        --_panel-nav-nested-section-duration,\n        calc(\n          var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2)\n        )\n      )\n      var(--effect-animation-easing-ease-out);\n}\n\n.panel-nav__branch-divider--open {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  transition-delay:\n    var(--effect-animation-duration-instant), var(--effect-animation-duration-instant);\n}\n\n.panel-nav__branch-divider-clip {\n  min-height: 0;\n  overflow: hidden;\n}\n\n.panel-nav__branch-divider-line {\n  display: block;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-075);\n  background: var(--_nav-divider);\n}\n\n.panel-nav__branch-divider--before .panel-nav__branch-divider-line {\n  margin-block: var(--dimension-space-050) var(--dimension-space-100);\n}\n\n.panel-nav__branch-divider--after .panel-nav__branch-divider-line {\n  margin-block: var(--dimension-space-100) var(--dimension-space-050);\n}\n\n.panel-nav__children-accordion {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows\n    var(\n      --_panel-nav-nested-section-duration,\n      calc(var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2))\n    )\n    var(--effect-animation-easing-ease-in-out)\n    var(\n      --_panel-nav-nested-transition-wait,\n      calc(var(--effect-animation-duration-short-3) + var(--effect-animation-duration-short-1))\n    );\n}\n\n.panel-nav__children-accordion--open {\n  grid-template-rows: 1fr;\n  transition-delay: var(--effect-animation-duration-instant);\n}\n\n.panel-nav__children {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* Margin lives on the first child so closed 0fr accordions still collapse to 0. */\n.panel-nav__children > .panel-nav__child:first-child {\n  margin-block-start: var(--dimension-space-050, 4px);\n}\n\n/*\n * Section headers — typography via ds-text (text-caption + emphasis).\n * Element selector so display:flex beats Text's inline-block, and padding\n * isn't clobbered by sharing `.panel-nav__item-label-text` on the same host.\n */\nds-text.panel-nav__group-label {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  /* Former nested pad: group-label (075) + item-label-text (025). */\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\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  /* Re-assert after unset — required for `.ds-interaction-fill` stacking. */\n  position: relative;\n  z-index: 0;\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(--ds-control-radius, var(--dimension-radius-025, 2px));\n  cursor: default;\n  color: var(--_nav-fg-secondary);\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  /* Hover/press: `.ds-interaction-fill` — no --selected (icon/type weight only). */\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.panel-nav__parent--muted {\n  color: var(--_nav-fg-secondary);\n}\n\n.panel-nav__parent--flyout-active {\n  --ds-interaction-hover: var(--_nav-pressed);\n}\n\n.panel-nav__parent--flyout-active::after {\n  background: var(--_nav-pressed);\n}\n\n.panel-nav__child {\n  flex: 0 0 var(--_nav-item-height);\n  padding-inline-start: calc(\n    var(--dimension-space-075, 6px) + var(--dimension-iconography-md) + var(--dimension-space-050)\n  );\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    opacity\n      var(\n        --_panel-nav-nested-child-fade-duration,\n        calc(\n          var(--effect-animation-duration-short-3) * 2 + var(--effect-animation-duration-short-2)\n        )\n      )\n      var(--effect-animation-easing-ease-out)\n      calc(\n        var(--_panel-nav-child-reverse-index) *\n          var(--_panel-nav-nested-child-stagger, var(--effect-animation-duration-short-1))\n      ),\n    color var(--effect-motion-short-1);\n}\n\n.panel-nav__children-accordion--open .panel-nav__child {\n  opacity: 1;\n  pointer-events: auto;\n  transition-delay:\n    calc(\n      var(\n          --_panel-nav-nested-transition-wait,\n          calc(var(--effect-animation-duration-short-3) + var(--effect-animation-duration-short-1))\n        ) +\n        var(--_panel-nav-child-index) *\n        var(--_panel-nav-nested-child-stagger, var(--effect-animation-duration-short-1))\n    ),\n    var(--effect-animation-duration-instant);\n}\n\n.panel-nav__children-accordion:not(.panel-nav__children-accordion--open) .panel-nav__child {\n  color: var(--_nav-fg-secondary);\n}\n\n.panel-nav__child-dot {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--dimension-iconography-md);\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n}\n\n.panel-nav__child--inactive {\n  color: var(--_nav-fg-tertiary);\n}\n\n.panel-nav__child--inactive::after {\n  display: none;\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  z-index: 2;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  position: relative;\n  z-index: 2;\n  flex: 1;\n  min-width: 0;\n  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  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  /* stylelint-disable-next-line color-named -- mask luminance stops, not theme colors */\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(--ds-control-label-inset);\n}\n\n/* ── Item notification dot — 20px suffix zone matches the icon geometry ──── */\n\n.panel-nav__item-dot-box {\n  position: absolute;\n  z-index: 2;\n  right: var(--dimension-space-075, 6px);\n  top: var(--dimension-space-075, 6px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  pointer-events: none;\n}\n\n.panel-nav__item-dot {\n  transition: transform var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  transform: translate(\n    calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),\n    calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))\n  );\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--animating .panel-nav__children-accordion {\n  transition-duration: var(--_nav-expand-dur);\n  transition-delay: var(--effect-animation-duration-instant);\n}\n\n.panel-nav--animating .panel-nav__branch-divider {\n  transition-duration: var(--_nav-expand-dur), var(--_nav-expand-dur);\n  transition-delay:\n    var(--effect-animation-duration-instant), var(--effect-animation-duration-instant);\n}\n\n.panel-nav--collapsed:not(.panel-nav--animating) .panel-nav__children {\n  display: none;\n}\n\n.panel-nav--collapsed ds-text.panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));\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(\n    var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px)\n  );\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  --ds-button-unfilled-fg: var(--_nav-fg-secondary);\n  --ds-button-unfilled-fg-active: var(--_nav-fg-primary);\n  --ds-interaction-hover: var(--_nav-hover);\n  --ds-interaction-pressed: var(--_nav-pressed);\n  --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* Expanded row: balanced shell inset with an 8px gear-to-user gap. */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-100, 8px));\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}\n\n/* Popup-open state keeps the native footer trigger visibly pressed. */\n.panel-nav__footer-user--menu-expanded::after {\n  background: var(--_nav-pressed);\n}\n\n.panel-nav__footer-user--menu-expanded {\n  --ds-interaction-hover: var(--_nav-pressed);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* Resolve one shared square control while keeping both inline edges animatable. */\n  left: var(--_nav-padding-x);\n  right: calc(100% - var(--_nav-padding-x) - var(--_nav-item-height));\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(\n    var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) +\n      var(--dimension-space-050, 4px)\n  );\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/*\n * Center the caption glyph on the Circle icon. Don't use inset:0 + flex — the\n * inner `.ds-text__element { width: 100% }` stretches and left-aligns the letter.\n * Translate-centering keeps the complete caption metric box on the icon center;\n * the caption variant remains the sole owner of its line-height.\n * (Do not set `inset: auto` after top/left — it resets them.)\n */\nds-text.panel-nav__user-initial,\nds-text.panel-nav__user-initial.ds-text--caption {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  transform: translate(-50%, -50%);\n  display: block;\n  width: max-content;\n  max-width: none;\n  min-width: 0;\n  text-align: center;\n  color: inherit;\n  pointer-events: none;\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n/* The resize overlay line — extends past the right edge; keep above workspace content */\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: 20;\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  /* stylelint-disable-next-line color-named -- near-invisible hit-test fill; not a theme color */\n  background: rgba(0, 0, 0, 0.001);\n}\n\n/* Resize 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-foreground-primary);\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    /* Near-instant — browsers treat 0 as \"no transition\" and can skip the end state. */\n    transition-duration: var(--effect-animation-duration-instant) !important;\n    animation-duration: var(--effect-animation-duration-instant) !important;\n    transition-delay: var(--effect-animation-duration-instant) !important;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  State,\n  Element,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  derivePanelNavSelectionFromUrl,\n  firstEnabledPanelNavChild,\n  panelNavWidthTransitionMs,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  resolvePanelNavToggle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  type PanelNavChildItem,\n  type PanelNavChildSelectDetail,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavPresentation,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\nimport { PANEL_NAV_CHILD_MENU_PLACEMENT } from '../Menu/menu-placement';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport { scrollEdgeFadeClassMap } from '../../utils/scroll-edge-fade';\nimport { prefersReducedMotion } from '../../utils/resolve-css-time-ms';\nimport { resolveSafeUrl } from '../../utils/safe-url';\n\ntype PanelNavRovingEntry =\n  | { kind: 'parent'; item: PanelNavItem }\n  | { kind: 'child'; parent: PanelNavItem; child: PanelNavChildItem };\n\nlet nextPanelNavInstanceId = 0;\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class PanelNav {\n  private readonly instanceId = nextPanelNavInstanceId++;\n  /** Style slot: `dashboard` or `settings`. Colors match for now;\n   *  class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /** When `true`, style changes apply synchronously — host app owns view transitions. */\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  /** Flat primary destinations, or nested child-route disclosure. */\n  @Prop({ reflect: true }) presentation: PanelNavPresentation = 'flat';\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  /** ID of the active child route when URL matching is unavailable. */\n  @Prop() activeChildId: 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 locks in 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  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  /** Keep the account-menu trigger visually pressed while its popup is open or closing. */\n  @Prop() accountMenuExpanded: boolean = false;\n  @Prop() dashboardNavigationLabel: string = 'Dashboard navigation';\n  @Prop() settingsNavigationLabel: string = 'Settings navigation';\n  @Prop() expandNavigationLabel: string = 'Expand navigation';\n  @Prop() collapseNavigationLabel: string = 'Collapse navigation';\n  /** Localized name for the body when overflow makes it a keyboard-scrollable region. */\n  @Prop() navigationItemsLabel: string = 'Navigation items';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when a nested child route is selected. */\n  @Event() dsNavChildSelect!: EventEmitter<PanelNavChildSelectDetail>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\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  @State() private renderedStyle: NavChromeStyle = 'dashboard';\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n  @State() private urlDerivedActiveChildId: string = '';\n  @State() private bodyScrollable = false;\n  @State() private expandedParentId: string = '';\n  @State() private inlineChildrenExpansionReady = true;\n  @State() private flyoutParentId: string = '';\n  @State() private flyoutOpen = false;\n  @State() private flyoutInitialFocusVisible = false;\n\n  private transitionCompletionHandler?: (e: TransitionEvent) => void;\n  private transitionFallbackTimer: number | null = null;\n  private resizeObserver?: ResizeObserver;\n  private scrollRegionObserver?: ResizeObserver;\n  private bodyEl?: HTMLElement;\n  private initialRenderComplete = false;\n  private inlineChildrenExpansionFrame: number | null = null;\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  private get effectiveActiveChildId(): string {\n    return this.urlDerivedActiveChildId || this.activeChildId;\n  }\n\n  private get collapsedPresentation(): boolean {\n    return this.collapsed || this.viewportNarrow;\n  }\n\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  onCollapsedChange(next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    this.stageInlineChildrenExpansion(\n      prev && !next && !this.viewportNarrow && this.presentation === 'nested'\n    );\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    this.syncExpandedParent();\n    this.rovingIndex = this.getFirstRovingIndex();\n    this.startCollapseAnimation();\n  }\n\n  @Watch('viewportNarrow')\n  onViewportNarrowChange(next: boolean, prev: boolean | undefined) {\n    if (prev === undefined || !this.initialRenderComplete) return;\n    this.stageInlineChildrenExpansion(\n      prev && !next && !this.collapsed && this.presentation === 'nested'\n    );\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    if (next || this.rovingIndex > this.getVisibleRovingEntries().length) {\n      this.rovingIndex = this.getFirstRovingIndex();\n    }\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.rovingIndex = 0;\n    this.syncActiveFromUrl();\n    this.syncExpandedParent();\n  }\n\n  @Watch('presentation')\n  onPresentationChange() {\n    this.stageInlineChildrenExpansion(false);\n    this.flyoutParentId = '';\n    this.flyoutOpen = false;\n    this.syncExpandedParent();\n    this.rovingIndex = this.getFirstRovingIndex();\n  }\n\n  @Watch('activeId')\n  @Watch('activeChildId')\n  @Watch('urlDerivedActiveId')\n  @Watch('urlDerivedActiveChildId')\n  onActiveIdChange() {\n    this.syncExpandedParent();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  onNavStyleChange(newVal: NavChromeStyle) {\n    this.renderedStyle = newVal;\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    this.viewportNarrow = this.isViewportNarrow();\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch {\n        /* localStorage unavailable */\n      }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    if (this.effectiveBreakpoint() > 0) this.connectResizeObserver();\n    this.connectScrollRegionObserver();\n    this.updateBodyScrollable();\n    this.initialRenderComplete = true;\n  }\n\n  componentDidRender() {\n    this.updateBodyScrollable();\n    this.scheduleInlineChildrenExpansion();\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.disconnectScrollRegionObserver();\n    this.clearInlineChildrenExpansionFrame();\n    this.clearCollapseAnimationCompletion(\n      this.el.querySelector('.panel-nav') as HTMLElement | null\n    );\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    if (this.isAnimating) return;\n    this.isAnimating = true;\n    this.dsChromeTransitionStart.emit({ source: 'panel-nav' });\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    this.clearCollapseAnimationCompletion(panel);\n    this.transitionCompletionHandler = (e: TransitionEvent) => {\n      if (e.target === panel && (e.propertyName === 'width' || e.propertyName === 'min-width')) {\n        this.finishCollapseAnimation(panel);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionCompletionHandler);\n    panel?.addEventListener('transitioncancel', this.transitionCompletionHandler);\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (!this.isAnimating) return;\n        if (!panel) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n\n        const fallbackMs = panelNavWidthTransitionMs(getComputedStyle(panel));\n        if (fallbackMs <= 0) {\n          this.finishCollapseAnimation(panel);\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishCollapseAnimation(panel);\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private stageInlineChildrenExpansion(stage: boolean) {\n    this.clearInlineChildrenExpansionFrame();\n    this.inlineChildrenExpansionReady = !stage;\n  }\n\n  private scheduleInlineChildrenExpansion() {\n    if (this.inlineChildrenExpansionReady || this.collapsedPresentation) return;\n    this.clearInlineChildrenExpansionFrame();\n    this.inlineChildrenExpansionFrame = requestAnimationFrame(() => {\n      this.inlineChildrenExpansionFrame = null;\n      if (this.collapsedPresentation) return;\n\n      // Commit the newly mounted accordion's closed geometry before opening it.\n      // Without this read, the browser can insert it directly at 1fr and skip motion.\n      this.el.querySelector<HTMLElement>('.panel-nav__children-accordion')?.getBoundingClientRect();\n      this.inlineChildrenExpansionReady = true;\n    });\n  }\n\n  private clearInlineChildrenExpansionFrame() {\n    if (this.inlineChildrenExpansionFrame === null) return;\n    cancelAnimationFrame(this.inlineChildrenExpansionFrame);\n    this.inlineChildrenExpansionFrame = null;\n  }\n\n  private finishCollapseAnimation(panel: HTMLElement | null) {\n    const wasAnimating = this.isAnimating;\n    this.clearCollapseAnimationCompletion(panel);\n    if (!wasAnimating) return;\n    this.isAnimating = false;\n    this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n  }\n\n  private clearCollapseAnimationCompletion(panel: HTMLElement | null) {\n    if (this.transitionCompletionHandler) {\n      panel?.removeEventListener('transitionend', this.transitionCompletionHandler);\n      panel?.removeEventListener('transitioncancel', this.transitionCompletionHandler);\n      this.transitionCompletionHandler = undefined;\n    }\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  private effectiveBreakpoint(): number {\n    if (this.breakpoint > 0) return this.breakpoint;\n    const attributeValue = Number(this.el.getAttribute('breakpoint') ?? 0);\n    return Number.isFinite(attributeValue) && attributeValue > 0 ? attributeValue : 0;\n  }\n\n  private isViewportNarrow(): boolean {\n    const breakpoint = this.effectiveBreakpoint();\n    return typeof window !== 'undefined' && breakpoint > 0 && window.innerWidth < breakpoint;\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = this.isViewportNarrow();\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = this.isViewportNarrow();\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  private connectScrollRegionObserver() {\n    this.disconnectScrollRegionObserver();\n    if (!this.bodyEl || typeof ResizeObserver === 'undefined') return;\n    this.scrollRegionObserver = new ResizeObserver(() => this.updateBodyScrollable());\n    this.scrollRegionObserver.observe(this.bodyEl);\n  }\n\n  private disconnectScrollRegionObserver() {\n    this.scrollRegionObserver?.disconnect();\n    this.scrollRegionObserver = undefined;\n  }\n\n  private updateBodyScrollable() {\n    const next = Boolean(this.bodyEl && this.bodyEl.scrollHeight > this.bodyEl.clientHeight + 1);\n    if (next !== this.bodyScrollable) this.bodyScrollable = next;\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      this.urlDerivedActiveChildId = '';\n      return;\n    }\n    const selection = derivePanelNavSelectionFromUrl(this.currentUrl, this.getAllItems());\n    this.urlDerivedActiveId = selection.parentId;\n    this.urlDerivedActiveChildId = selection.childId;\n  }\n\n  private syncExpandedParent() {\n    const active = this.getAllItems().find(item => item.id === this.effectiveActiveId);\n    this.expandedParentId =\n      this.presentation === 'nested' && active?.children?.length ? active.id : '';\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (shouldResyncPanelNavStyle(this.renderedStyle, this.navStyle)) {\n      this.renderedStyle = this.navStyle;\n    }\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  /** 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 the desktop preference unless breakpoint-locked. */\n  private applyToggle(next: boolean) {\n    if (this.viewportNarrow) return;\n    this.collapsed = next;\n    if (this.storageKey) {\n      try {\n        localStorage.setItem(this.storageKey, String(next));\n      } catch {\n        /* unavailable */\n      }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private getVisibleRovingEntries(): PanelNavRovingEntry[] {\n    return this.getAllItems().flatMap<PanelNavRovingEntry>(item => {\n      const parent: PanelNavRovingEntry = { kind: 'parent', item };\n      if (\n        this.presentation !== 'nested' ||\n        this.collapsedPresentation ||\n        item.id !== this.expandedParentId ||\n        !item.children?.length\n      ) {\n        return [parent];\n      }\n      return [\n        parent,\n        ...item.children\n          .filter(child => !child.isInactive)\n          .map<PanelNavRovingEntry>(child => ({ kind: 'child', parent: item, child })),\n      ];\n    });\n  }\n\n  private getFirstRovingIndex(): number {\n    return this.viewportNarrow ? 1 : 0;\n  }\n\n  private getFooterRovingIndex(): number {\n    return 1 + this.getVisibleRovingEntries().length;\n  }\n\n  private getUserRovingIndex(): number {\n    return this.getFooterRovingIndex() + 1;\n  }\n\n  private getRovingElement(index: number): HTMLElement | null {\n    const itemCount = this.getVisibleRovingEntries().length;\n    if (index === 0) {\n      return this.viewportNarrow ? null : this.el.querySelector('.panel-nav__header-btn');\n    }\n    if (index >= 1 && index <= itemCount) {\n      const items = this.el.querySelectorAll<HTMLElement>(\n        '.panel-nav__body [data-panel-nav-roving]'\n      );\n      return items[index - 1] ?? null;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-btn .button-unfilled');\n    }\n    if (index === this.getUserRovingIndex()) {\n      return this.el.querySelector('.panel-nav__footer-user');\n    }\n    return null;\n  }\n\n  private focusRovingAt(index: number) {\n    this.rovingIndex = index;\n    this.getRovingElement(index)?.focus({ preventScroll: true });\n  }\n\n  private activateRovingIndex(index: number, keyboard = false) {\n    const entries = this.getVisibleRovingEntries();\n    const itemCount = entries.length;\n    if (index === 0) {\n      this.handleToggle();\n      return;\n    }\n    if (index >= 1 && index <= itemCount) {\n      const entry = entries[index - 1];\n      if (!entry) return;\n      if (entry.kind === 'child') {\n        this.emitChildSelect(entry.parent, entry.child);\n      } else if (entry.item.children?.length) {\n        this.activateParent(entry.item, keyboard);\n      } else {\n        this.handleItemClick(entry.item.id);\n      }\n      return;\n    }\n    if (index === this.getFooterRovingIndex()) {\n      this.handleFooterAction();\n      return;\n    }\n    if (index === this.getUserRovingIndex()) {\n      const anchor = this.el.querySelector(\n        `#${PANEL_NAV_USER_MENU_ANCHOR_ID}`\n      ) as HTMLElement | null;\n      if (anchor)\n        this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n    }\n  }\n\n  private handleRovingKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.activateRovingIndex(index, true);\n      return;\n    }\n\n    const footerIdx = this.getFooterRovingIndex();\n    const userIdx = this.getUserRovingIndex();\n    const firstIdx = this.getFirstRovingIndex();\n    let next: number | undefined;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        if (index === userIdx) return;\n        if (index === footerIdx) next = userIdx;\n        else next = index + 1;\n        break;\n      case 'ArrowUp':\n        if (index === firstIdx) return;\n        if (index === userIdx) next = footerIdx;\n        else if (index === footerIdx) next = footerIdx - 1;\n        else next = index - 1;\n        break;\n      case 'ArrowRight':\n        if (index === footerIdx) next = userIdx;\n        else return;\n        break;\n      case 'ArrowLeft':\n        if (index === userIdx) next = footerIdx;\n        else return;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = firstIdx;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = userIdx;\n        break;\n      default:\n        return;\n    }\n\n    if (next === undefined || next === index) return;\n    e.preventDefault();\n    this.focusRovingAt(next);\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private emitChildSelect(parent: PanelNavItem, child: PanelNavChildItem) {\n    if (child.isInactive) return;\n    this.dsNavChildSelect.emit({\n      parentId: parent.id,\n      childId: child.id,\n      href: child.href,\n    });\n  }\n\n  private followFlyoutAnchor(child: PanelNavChildItem) {\n    const href = resolveSafeUrl(child.href);\n    if (this.routerMode !== 'anchor' || !href) return;\n    const anchor = this.el.ownerDocument.createElement('a');\n    anchor.href = href;\n    anchor.hidden = true;\n    this.el.append(anchor);\n    anchor.click();\n    anchor.remove();\n  }\n\n  private activateParent(parent: PanelNavItem, keyboard = false) {\n    if (this.presentation === 'nested') {\n      this.expandedParentId = parent.id;\n      if (this.collapsedPresentation) {\n        if (this.flyoutParentId === parent.id && this.flyoutOpen) {\n          this.closeFlyout();\n          return;\n        }\n        this.flyoutInitialFocusVisible = keyboard;\n        this.flyoutParentId = parent.id;\n        this.flyoutOpen = true;\n        return;\n      }\n    }\n\n    const child = firstEnabledPanelNavChild(parent.children);\n    if (child) this.emitChildSelect(parent, child);\n  }\n\n  private parentAnchorId(parentId: string): string {\n    return `panel-nav-parent-${this.instanceId}-${parentId.replace(/[^a-zA-Z0-9_-]/g, '-')}`;\n  }\n\n  private childListId(parentId: string): string {\n    return `panel-nav-children-${this.instanceId}-${parentId.replace(/[^a-zA-Z0-9_-]/g, '-')}`;\n  }\n\n  private closeFlyout = () => {\n    this.flyoutOpen = false;\n    this.flyoutInitialFocusVisible = false;\n  };\n\n  private handleFlyoutAfterClose = () => {\n    if (!this.flyoutOpen) this.flyoutParentId = '';\n  };\n\n  private handleFlyoutSelect = (event: CustomEvent<MenuItemData>) => {\n    const parent = this.getAllItems().find(item => item.id === this.flyoutParentId);\n    const child = parent?.children?.find(item => item.id === event.detail?.value);\n    if (!parent || !child) return;\n    this.emitChildSelect(parent, child);\n    this.followFlyoutAnchor(child);\n    this.closeFlyout();\n  };\n\n  private handleToggle() {\n    const next = resolvePanelNavToggle(this.collapsed, this.viewportNarrow);\n    if (next !== null) this.applyToggle(next);\n  }\n\n  /** Toggle the desktop preference. No-op while the breakpoint locks the panel collapsed. */\n  @Method()\n  async toggleCollapsed() {\n    this.handleToggle();\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, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\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    if (prefersReducedMotion()) {\n      this.showEdgeOverlay = true;\n      return;\n    }\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 renderFooterAction(isDashboardChrome: boolean) {\n    // Short chrome labels — same string for tip + aria (not \"Open/Go to …\").\n    const footerLabel = isDashboardChrome ? this.settingsLabel : this.dashboardLabel;\n    return (\n      <ds-tooltip label={footerLabel} side=\"right\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-nav__footer-btn\"\n          icon={isDashboardChrome ? 'Gear' : 'Dashboard'}\n          activeFill={false}\n          hasBorder={false}\n          focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}\n          aria-label={footerLabel}\n          onDsClick={() => this.handleFooterAction()}\n          onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}\n          onFocusin={() => {\n            this.rovingIndex = this.getFooterRovingIndex();\n          }}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {\n    // Always wrap so collapse morph CSS can transition on a stable button node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    const tipLabel = collapsed ? this.accountLabel : '';\n    const userButton = (\n      <button\n        type=\"button\"\n        id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n        class={{\n          'panel-nav__item': true,\n          'panel-nav__footer-user': true,\n          'panel-nav__footer-user--menu-expanded': this.accountMenuExpanded,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}\n        aria-label={this.accountLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={String(this.accountMenuExpanded)}\n        onClick={e => this.handleUserAction(e)}\n        onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}\n        onFocus={() => {\n          this.rovingIndex = this.getUserRovingIndex();\n        }}\n      >\n        <ds-text\n          class=\"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          emphasis\n          color=\"inherit\"\n          lineTruncation={1}\n        >\n          {userName}\n        </ds-text>\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            <ds-text\n              class=\"panel-nav__user-initial\"\n              as=\"span\"\n              variant=\"text-caption\"\n              emphasis\n              align=\"center\"\n              color=\"inherit\"\n            >\n              {userInitial}\n            </ds-text>\n          </span>\n        </span>\n      </button>\n    );\n\n    return (\n      <ds-tooltip label={tipLabel} side=\"right\" size=\"sm\">\n        {userButton}\n      </ds-tooltip>\n    );\n  }\n\n  private renderParentItem(item: PanelNavItem, rovingPosition: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n    const hasChildRoutes = (item.children?.length ?? 0) > 0;\n    const disclosure = this.presentation === 'nested' && hasChildRoutes;\n    const expanded = disclosure\n      ? collapsed\n        ? this.flyoutParentId === item.id\n        : this.expandedParentId === item.id\n      : false;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n      </span>,\n      <ds-text\n        class=\"panel-nav__item-label panel-nav__item-label-text ds-control--md\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        emphasis={isActive}\n        color=\"inherit\"\n        lineTruncation={1}\n      >\n        {item.label}\n      </ds-text>,\n      item.dot && (\n        <span class=\"panel-nav__item-dot-box\" aria-hidden=\"true\">\n          <ds-badge class=\"panel-nav__item-dot\" variant=\"dot\" hasRing={collapsed} label=\"\" />\n        </span>\n      ),\n    ];\n\n    const sharedProps = {\n      id: disclosure ? this.parentAnchorId(item.id) : undefined,\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__parent': disclosure,\n        'panel-nav__parent--expanded': expanded,\n        'panel-nav__parent--flyout-active': collapsed && this.flyoutParentId === item.id,\n        'panel-nav__parent--muted':\n          this.presentation === 'nested' &&\n          !collapsed &&\n          this.expandedParentId !== '' &&\n          this.expandedParentId !== item.id,\n        'panel-nav__item--active': isActive,\n        'ds-focus-ring-inset': true,\n        'ds-interaction-fill': true,\n      },\n      'aria-current': !disclosure && isActive ? ('page' as const) : undefined,\n      'aria-expanded': disclosure ? String(expanded) : undefined,\n      'aria-controls': disclosure && expanded ? this.childListId(item.id) : undefined,\n      'aria-haspopup': disclosure && collapsed ? ('menu' as const) : undefined,\n      'data-panel-nav-roving': '',\n      tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,\n      onClick: (event: MouseEvent) =>\n        hasChildRoutes\n          ? this.activateParent(item, event.detail === 0)\n          : this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),\n      onFocus: () => {\n        this.rovingIndex = rovingPosition;\n      },\n    };\n\n    const href = resolveSafeUrl(\n      hasChildRoutes ? firstEnabledPanelNavChild(item.children)?.href : item.href\n    );\n    const useAnchor = this.routerMode === 'anchor' && href && !(disclosure && collapsed);\n    const control = useAnchor ? (\n      <a {...sharedProps} href={href}>\n        {itemContent}\n      </a>\n    ) : (\n      <button {...sharedProps} type=\"button\">\n        {itemContent}\n      </button>\n    );\n\n    // Always wrap so label fade CSS can transition on a stable item node.\n    // Tip only when collapsed (empty label → ds-tooltip skips show).\n    return (\n      <ds-tooltip label={collapsed ? item.label : ''} side=\"right\" size=\"sm\">\n        {control}\n      </ds-tooltip>\n    );\n  }\n\n  private renderChildItem(\n    parent: PanelNavItem,\n    child: PanelNavChildItem,\n    rovingPosition: number | undefined,\n    childIndex: number,\n    childReverseIndex: number\n  ) {\n    const isActive =\n      parent.id === this.effectiveActiveId && child.id === this.effectiveActiveChildId;\n    const inactive = child.isInactive === true;\n    const content = [\n      <ds-text\n        class=\"panel-nav__item-label panel-nav__item-label-text ds-control--md\"\n        as=\"span\"\n        variant=\"text-body-medium\"\n        emphasis={isActive}\n        color=\"inherit\"\n        lineTruncation={1}\n      >\n        {child.label}\n      </ds-text>,\n      child.dot && (\n        <span class=\"panel-nav__child-dot\" aria-hidden=\"true\">\n          <ds-badge variant=\"dot\" label=\"\" />\n        </span>\n      ),\n    ];\n    const sharedProps = {\n      class: {\n        'panel-nav__item': true,\n        'panel-nav__child': true,\n        'panel-nav__child--active': isActive,\n        'panel-nav__child--inactive': inactive,\n        'panel-nav__item--active': isActive,\n        'ds-focus-ring-inset': !inactive,\n        'ds-interaction-fill': !inactive,\n      },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      'aria-disabled': inactive ? 'true' : undefined,\n      'data-panel-nav-roving': inactive || rovingPosition === undefined ? undefined : '',\n      style: {\n        '--_panel-nav-child-index': String(childIndex),\n        '--_panel-nav-child-reverse-index': String(childReverseIndex),\n      },\n      tabIndex: !inactive && rovingPosition === this.rovingIndex ? 0 : -1,\n      onClick: () => this.emitChildSelect(parent, child),\n      onKeyDown: (event: KeyboardEvent) =>\n        rovingPosition === undefined ? undefined : this.handleRovingKeyDown(event, rovingPosition),\n      onFocus: () => {\n        if (rovingPosition !== undefined) this.rovingIndex = rovingPosition;\n      },\n    };\n    const href = resolveSafeUrl(child.href);\n    const useAnchor = !inactive && this.routerMode === 'anchor' && href;\n\n    return useAnchor ? (\n      <a {...sharedProps} href={href}>\n        {content}\n      </a>\n    ) : (\n      <button {...sharedProps} type=\"button\" disabled={inactive}>\n        {content}\n      </button>\n    );\n  }\n\n  private renderFlyout() {\n    const parent = this.getAllItems().find(item => item.id === this.flyoutParentId);\n    if (!parent?.children?.length) return null;\n    return (\n      <ds-menu\n        id={this.childListId(parent.id)}\n        open={this.flyoutOpen}\n        side={PANEL_NAV_CHILD_MENU_PLACEMENT.side}\n        align={PANEL_NAV_CHILD_MENU_PLACEMENT.align}\n        anchorAlignment={PANEL_NAV_CHILD_MENU_PLACEMENT.anchorAlignment}\n        sideOffset={PANEL_NAV_CHILD_MENU_PLACEMENT.sideOffset}\n        alignOffset={PANEL_NAV_CHILD_MENU_PLACEMENT.alignOffset}\n        anchorId={this.parentAnchorId(parent.id)}\n        selectionMode=\"single\"\n        menuLabel={`${parent.label} sections`}\n        initialFocusVisible={this.flyoutInitialFocusVisible}\n        sections={[\n          {\n            items: parent.children.map(child => ({\n              label: child.label,\n              value: child.id,\n              dot: child.dot,\n              isInactive: child.isInactive,\n              isSelected:\n                parent.id === this.effectiveActiveId && child.id === this.effectiveActiveChildId,\n            })),\n          },\n        ]}\n        onDsSelect={this.handleFlyoutSelect}\n        onDsClose={this.closeFlyout}\n        onDsAfterClose={this.handleFlyoutAfterClose}\n      />\n    );\n  }\n\n  render() {\n    const chromeStyle = this.renderedStyle;\n    const isDashboardChrome = chromeStyle === 'dashboard';\n    const isDashboard = this.navStyle === 'dashboard';\n    const collapsed = this.collapsed || this.viewportNarrow;\n    const { userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'ds-control--md': true,\n      'panel-nav--dashboard': isDashboard,\n      'panel-nav--settings': !isDashboard,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--breakpoint-locked': this.viewportNarrow,\n      'panel-nav--animating': this.isAnimating,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav\n          class={navCls}\n          aria-label={\n            isDashboardChrome ? this.dashboardNavigationLabel : this.settingsNavigationLabel\n          }\n        >\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header ds-chrome-row ds-chrome-space--md\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill\"\n              disabled={this.viewportNarrow}\n              tabIndex={!this.viewportNarrow && this.rovingIndex === 0 ? 0 : -1}\n              onClick={() => this.handleToggle()}\n              onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}\n              onFocus={() => {\n                this.rovingIndex = 0;\n              }}\n              aria-label={collapsed ? this.expandNavigationLabel : this.collapseNavigationLabel}\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\n                  class=\"panel-nav__m-mark\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    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\"\n                    fill=\"currentColor\"\n                  />\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\n            class={{\n              'panel-nav__body': true,\n              'ds-chrome-column': true,\n              'ds-chrome-space--md': true,\n              'ds-scrollbar-hidden': true,\n              'ds-focus-ring': this.bodyScrollable,\n              ...scrollEdgeFadeClassMap({ edges: 'bottom' }),\n            }}\n            ref={element => {\n              const next = (element as HTMLElement) ?? undefined;\n              if (next === this.bodyEl) return;\n              this.bodyEl = next;\n              this.connectScrollRegionObserver();\n            }}\n            role={this.bodyScrollable ? 'region' : undefined}\n            aria-label={this.bodyScrollable ? this.navigationItemsLabel : undefined}\n            tabIndex={this.bodyScrollable ? 0 : undefined}\n          >\n            <div class=\"panel-nav__sections\">\n              {(() => {\n                let rovingPosition = 1;\n                return this.parsedGroups.map(group => (\n                  <div class=\"panel-nav__group\" key={group.id ?? group.label}>\n                    {group.label && (\n                      <ds-text\n                        class=\"panel-nav__group-label ds-control--md\"\n                        as=\"span\"\n                        variant=\"text-caption\"\n                        emphasis\n                        color=\"inherit\"\n                      >\n                        {group.label}\n                      </ds-text>\n                    )}\n                    {group.items.map((item, itemIndex) => {\n                      const parentPosition = rovingPosition++;\n                      const expanded =\n                        !collapsed &&\n                        this.inlineChildrenExpansionReady &&\n                        item.id === this.expandedParentId &&\n                        (item.children?.length ?? 0) > 0;\n                      const hasGroupSiblings = group.items.length > 1;\n                      const hasDividerBefore = hasGroupSiblings && itemIndex > 0;\n                      const hasDividerAfter =\n                        hasGroupSiblings && itemIndex < group.items.length - 1;\n                      const showBranchDividers = expanded && hasGroupSiblings;\n                      const hasInlineChildren =\n                        this.presentation === 'nested' &&\n                        (!collapsed || this.isAnimating) &&\n                        (item.children?.length ?? 0) > 0;\n                      const children = hasInlineChildren\n                        ? item.children?.map((child, childIndex) => {\n                            const childPosition =\n                              !expanded || child.isInactive ? undefined : rovingPosition++;\n                            return this.renderChildItem(\n                              item,\n                              child,\n                              childPosition,\n                              childIndex,\n                              (item.children?.length ?? 0) - childIndex - 1\n                            );\n                          })\n                        : null;\n                      return (\n                        <div class=\"panel-nav__branch\" key={item.id}>\n                          {hasDividerBefore ? (\n                            <div\n                              key={`${item.id}-divider-before`}\n                              class={{\n                                'panel-nav__branch-divider': true,\n                                'panel-nav__branch-divider--before': true,\n                                'panel-nav__branch-divider--open': showBranchDividers,\n                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-divider-clip\">\n                                <span class=\"panel-nav__branch-divider-line\"></span>\n                              </div>\n                            </div>\n                          ) : null}\n                          {this.renderParentItem(item, parentPosition, collapsed)}\n                          {hasInlineChildren ? (\n                            <div\n                              key={`${item.id}-children`}\n                              class={{\n                                'panel-nav__children-accordion': true,\n                                'panel-nav__children-accordion--open': expanded,\n                              }}\n                              aria-hidden={expanded ? undefined : 'true'}\n                              inert={expanded ? undefined : true}\n                            >\n                              <div\n                                id={this.childListId(item.id)}\n                                class=\"panel-nav__children\"\n                                role=\"group\"\n                                aria-labelledby={this.parentAnchorId(item.id)}\n                              >\n                                {children}\n                              </div>\n                            </div>\n                          ) : null}\n                          {hasDividerAfter ? (\n                            <div\n                              key={`${item.id}-divider-after`}\n                              class={{\n                                'panel-nav__branch-divider': true,\n                                'panel-nav__branch-divider--after': true,\n                                'panel-nav__branch-divider--open': showBranchDividers,\n                              }}\n                              aria-hidden=\"true\"\n                            >\n                              <div class=\"panel-nav__branch-divider-clip\">\n                                <span class=\"panel-nav__branch-divider-line\"></span>\n                              </div>\n                            </div>\n                          ) : null}\n                        </div>\n                      );\n                    })}\n                  </div>\n                ));\n              })()}\n            </div>\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            {this.renderFooterAction(isDashboardChrome)}\n            {this.renderFooterUser(collapsed, userName, userInitial)}\n          </div>\n        </nav>\n\n        {this.renderFlyout()}\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/{p-DI8DUozc.js → p-Q0dkeoJ6.js}

@@ -1,2 +1,2 @@
-import{p as i,H as o,c as r,h as s,a as d,t as e}from"./index.js";import{d as n}from"./p-Cd1JnnVK.js";import{D as t,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-C0qN3PSb.js";import{C as v,a as f}from"./p-CuwopElg.js";const h=()=>`@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-radio-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-radio-h::after,.ds-interaction-fill--grouped.sc-ds-radio::after,.ds-interaction-fill--grouped.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-radio-h,.ds-interaction-fill--grouped.sc-ds-radio{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__item--described.sc-ds-radio{height:auto;min-height:var(--ds-control-height);padding-block:var(--dimension-space-075)}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__copy.sc-ds-radio{display:grid;flex:1;gap:var(--dimension-space-025);min-width:0;padding:0 var(--ds-control-label-inset)}@media (forced-colors: active){.radio__circle.sc-ds-radio{border:var(--_radio-stroke) solid var(--ds-forced-color-content);box-shadow:none}.radio__circle--checked.sc-ds-radio{background-color:var(--ds-forced-color-selected);border-color:var(--ds-forced-color-selected)}.radio__dot.sc-ds-radio{background-color:var(--ds-forced-color-on-selected)}}`;let u=0;const g=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange",7);this.internals=this.attachInternals();this.instanceId=++u;this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=t;this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;c(this.internals,this.value,{inactive:i});const o=this.required&&!i&&this.value.length===0;a(this.internals,o,this.requiredMessage)}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=l(i)}async setFocus(){this.activeItems.find((i=>i.tabIndex===0))?.focus()}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let d=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();d=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();d=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();d=0;break;case"End":i.preventDefault();d=o.length-1;break}if(d>=0){o[d].focus();const i=o[d].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&this.value.length===0;const r=this.options.findIndex((i=>i.value===this.value));const e=this.options.findIndex((o=>!i&&!o.isInactive));const n=r>=0&&!i&&!this.options[r]?.isInactive?r:e;return s(d,{key:"892897ee8074f4d4e63519e73b15c6b0ce37fce9",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((o,r)=>{const d=i||!!o.isInactive;const e=o.value===this.value;const t=d?-1:r===n?0:-1;const a=`ds-radio-${this.instanceId}-label-${r}`;const c=`ds-radio-${this.instanceId}-description-${r}`;return s("div",{key:o.value,role:"radio","aria-checked":String(e),"aria-disabled":d?"true":undefined,"aria-labelledby":a,"aria-describedby":o.description?c:undefined,tabIndex:t,"data-radio-item":true,"data-value":o.value,"data-inactive":d||undefined,class:{radio__item:true,"radio__item--described":Boolean(o.description),[`ds-control--${this.size}`]:true,"ds-control-inactive":d,"ds-focus-ring-inset":!d,"ds-interaction-fill":!d},onClick:()=>!d&&this.selectItem(o.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!d){i.preventDefault();this.selectItem(o.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":e}},e&&s("span",{class:"radio__dot"}))),s("span",{class:"radio__copy ds-interaction-fill__content"},s("ds-text",{class:"radio__label",as:"span",variant:v[this.size],textId:a},o.label),o.description?s("ds-text",{as:"span",variant:f[this.size],color:"secondary",textId:c},o.description):null))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return h()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32],setFocus:[64]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function b(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(e(i))){customElements.define(e(i),g)}break;case"ds-text":if(!customElements.get(e(i))){n()}break}}))}b();export{g as R,b as d};
-//# sourceMappingURL=p-DI8DUozc.js.map
+import{p as i,H as o,c as r,h as s,a as d,t as e}from"./index.js";import{d as n}from"./p-DQQsS9Rx.js";import{D as t,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-C0qN3PSb.js";import{C as v,a as f}from"./p-CuwopElg.js";const h=()=>`@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-radio,.ds-control--lg.sc-ds-radio-h,.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-radio-h,.ds-control--lg.sc-ds-radio{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-radio-h,.ds-focus-ring.sc-ds-radio,.ds-focus-ring-inset.sc-ds-radio-h,.ds-focus-ring-inset.sc-ds-radio{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-radio-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-radio-h::after,.ds-interaction-fill--grouped.sc-ds-radio::after,.ds-interaction-fill--grouped.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-radio-h,.ds-interaction-fill--grouped.sc-ds-radio{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-radio:root,.sc-ds-radio-h,.ds-forced-colors-scope.sc-ds-radio{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--lg.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-md);--_radio-dot:calc(var(--dimension-size-base) * 5 / 4);--_radio-stroke:var(--dimension-stroke-width-018)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.radio__item--described.sc-ds-radio{height:auto;min-height:var(--ds-control-height);padding-block:var(--dimension-space-075)}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__copy.sc-ds-radio{display:grid;flex:1;gap:var(--dimension-space-025);min-width:0;padding:0 var(--ds-control-label-inset)}@media (forced-colors: active){.radio__circle.sc-ds-radio{border:var(--_radio-stroke) solid var(--ds-forced-color-content);box-shadow:none}.radio__circle--checked.sc-ds-radio{background-color:var(--ds-forced-color-selected);border-color:var(--ds-forced-color-selected)}.radio__dot.sc-ds-radio{background-color:var(--ds-forced-color-on-selected)}}`;let u=0;const g=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange",7);this.internals=this.attachInternals();this.instanceId=++u;this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage=t;this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;c(this.internals,this.value,{inactive:i});const o=this.required&&!i&&this.value.length===0;a(this.internals,o,this.requiredMessage)}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=l(i)}async setFocus(){this.activeItems.find((i=>i.tabIndex===0))?.focus()}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let d=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();d=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();d=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();d=0;break;case"End":i.preventDefault();d=o.length-1;break}if(d>=0){o[d].focus();const i=o[d].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&this.value.length===0;const r=this.options.findIndex((i=>i.value===this.value));const e=this.options.findIndex((o=>!i&&!o.isInactive));const n=r>=0&&!i&&!this.options[r]?.isInactive?r:e;return s(d,{key:"892897ee8074f4d4e63519e73b15c6b0ce37fce9",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((o,r)=>{const d=i||!!o.isInactive;const e=o.value===this.value;const t=d?-1:r===n?0:-1;const a=`ds-radio-${this.instanceId}-label-${r}`;const c=`ds-radio-${this.instanceId}-description-${r}`;return s("div",{key:o.value,role:"radio","aria-checked":String(e),"aria-disabled":d?"true":undefined,"aria-labelledby":a,"aria-describedby":o.description?c:undefined,tabIndex:t,"data-radio-item":true,"data-value":o.value,"data-inactive":d||undefined,class:{radio__item:true,"radio__item--described":Boolean(o.description),[`ds-control--${this.size}`]:true,"ds-control-inactive":d,"ds-focus-ring-inset":!d,"ds-interaction-fill":!d},onClick:()=>!d&&this.selectItem(o.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!d){i.preventDefault();this.selectItem(o.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":e}},e&&s("span",{class:"radio__dot"}))),s("span",{class:"radio__copy ds-interaction-fill__content"},s("ds-text",{class:"radio__label",as:"span",variant:v[this.size],textId:a},o.label),o.description?s("ds-text",{as:"span",variant:f[this.size],color:"secondary",textId:c},o.description):null))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return h()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32],setFocus:[64]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function b(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(e(i))){customElements.define(e(i),g)}break;case"ds-text":if(!customElements.get(e(i))){n()}break}}))}b();export{g as R,b as d};
+//# sourceMappingURL=p-Q0dkeoJ6.js.map

package/dist/components/{p-XaCYqck3.js → p-Q7AOgrg5.js}

@@ -1,2 +1,2 @@
-import{p as s,H as c,c as e,h as r,a as i,t}from"./index.js";function o(s,c){return c.length>0?c.flatMap((s=>s.options)):[...s]}function a(s,c){const e=s.findIndex((s=>s.value===c&&!s.isInactive));if(e>=0)return e;return s.findIndex((s=>!s.isInactive))}function n(s,c,e){const r=s.map(((s,c)=>({option:s,index:c}))).filter((({option:s})=>!s.isInactive)).map((({index:s})=>s));if(r.length===0)return null;if(e==="Home")return r[0];if(e==="End")return r[r.length-1];const i=e==="ArrowRight"||e==="ArrowDown"?1:-1;const t=r.indexOf(c);if(t<0){return i>0?r[0]:r[r.length-1]}return r[(t+i+r.length)%r.length]}function d(s){if(s===undefined||!Number.isFinite(s))return 1;return Math.min(1,Math.max(0,s))}const h=()=>`@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-swatch-picker-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-swatch-picker-h,.ds-focus-ring.sc-ds-swatch-picker,.ds-focus-ring-inset.sc-ds-swatch-picker-h,.ds-focus-ring-inset.sc-ds-swatch-picker{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-swatch-picker-h:focus-visible,.ds-focus-ring.sc-ds-swatch-picker:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-swatch-picker-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-swatch-picker{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-swatch-picker-h:focus-visible,.ds-focus-ring-inset.sc-ds-swatch-picker:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-swatch-picker-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-swatch-picker:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-swatch-picker-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{color:var(--ds-forced-color-disabled);opacity:1}}@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-swatch-picker-h{box-sizing:border-box;display:block;width:100%;--_swatch-inner-inset:calc(var(--dimension-stroke-width-025) + var(--dimension-space-025));--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.swatch-picker.sc-ds-swatch-picker{box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.swatch-picker__option.sc-ds-swatch-picker{position:relative;box-sizing:border-box;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:default;isolation:isolate}.swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__interaction.sc-ds-swatch-picker,.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.swatch-picker__fill.sc-ds-swatch-picker{z-index:1;background-color:var(--_swatch-preview-color);background-image:var(--_swatch-preview-image);background-repeat:no-repeat;background-position:center;background-size:cover;opacity:var(--_swatch-preview-opacity);transition:inset var(--_swatch-select-motion)}.swatch-picker__border.sc-ds-swatch-picker{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:inset var(--_swatch-select-motion)}.swatch-picker__interaction.sc-ds-swatch-picker{z-index:3;background-color:transparent;transition:inset var(--_swatch-select-motion),     background-color 0s}@media (hover: hover) and (pointer: fine){.swatch-picker__option.sc-ds-swatch-picker:hover:not(:disabled) .swatch-picker__interaction.sc-ds-swatch-picker{background-color:var(--color-interaction-hover)}}.swatch-picker__option.sc-ds-swatch-picker:active:not(:disabled) .swatch-picker__interaction.sc-ds-swatch-picker{background-color:var(--color-interaction-pressed)}.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{opacity:0;transform:scale(1.2);transform-origin:center;transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.swatch-picker__halo.sc-ds-swatch-picker{z-index:4;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg)}.swatch-picker__stroke.sc-ds-swatch-picker{z-index:5;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__interaction.sc-ds-swatch-picker{inset:var(--_swatch-inner-inset)}.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__stroke.sc-ds-swatch-picker{opacity:1;transform:scale(1)}.swatch-picker__divider.sc-ds-swatch-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}@media (prefers-reduced-motion: reduce){.swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__interaction.sc-ds-swatch-picker,.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{transition:none}}@media (forced-colors: active){.swatch-picker__fill.sc-ds-swatch-picker{forced-color-adjust:none}.swatch-picker__border.sc-ds-swatch-picker{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.swatch-picker__halo.sc-ds-swatch-picker{box-shadow:none}.swatch-picker__stroke.sc-ds-swatch-picker{box-shadow:none;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.swatch-picker__divider.sc-ds-swatch-picker{background-color:var(--ds-forced-color-content)}}`;const l=s(class s extends c{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=e(this,"dsChange",7);this.value="";this.options=[];this.sections=[];this.groupLabel="Swatch options"}get activeOptions(){return o(this.options,this.sections)}selectOption(s){if(s.isInactive||s.value===this.value)return;this.value=s.value;this.dsChange.emit(s.value)}focusOption(s){requestAnimationFrame((()=>{const c=this.el.querySelectorAll(".swatch-picker__option");c[s]?.focus()}))}handleOptionKeyDown(s,c){const e=s.key;if(!["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Home","End"].includes(e)){return}const r=n(this.activeOptions,c,e);if(r===null)return;s.preventDefault();const i=this.activeOptions[r];this.selectOption(i);this.focusOption(r)}renderOption(s,c,e){const i=s.value===this.value;const t=d(s.preview.opacity);return r("button",{key:s.value,type:"button",class:{"swatch-picker__option":true,"swatch-picker__option--selected":i,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},style:{"--_swatch-preview-color":s.preview.backgroundColor??"var(--color-background-secondary)","--_swatch-preview-image":s.preview.backgroundImage??"none","--_swatch-preview-opacity":String(t)},role:"radio","aria-label":s.label,"aria-checked":i?"true":"false",tabIndex:c===e?0:-1,disabled:s.isInactive,onClick:()=>this.selectOption(s),onKeyDown:s=>this.handleOptionKeyDown(s,c)},r("span",{class:"swatch-picker__fill","aria-hidden":"true"}),r("span",{class:"swatch-picker__border","aria-hidden":"true"}),r("span",{class:"swatch-picker__interaction","aria-hidden":"true"}),r("span",{class:"swatch-picker__halo","aria-hidden":"true"}),r("span",{class:"swatch-picker__stroke","aria-hidden":"true"}))}render(){const s=this.activeOptions;const c=a(s,this.value);let e=0;return r(i,{key:"e8f040e929447ed721cf8aea4516dddb2b818eca"},r("div",{key:"72b070aa8db38b0e12de48e9c574f919bc3c57f4",class:"swatch-picker",role:"radiogroup","aria-label":this.groupLabel},(this.sections.length>0?this.sections:[{options:this.options}]).map(((s,i)=>[s.options.map((s=>{const r=e++;return this.renderOption(s,r,c)})),i<(this.sections.length>0?this.sections.length:1)-1&&r("span",{class:"swatch-picker__divider","aria-hidden":"true"})]))))}get el(){return this}static get style(){return h()}},[2,"ds-swatch-picker",{value:[1537],options:[16],sections:[16],groupLabel:[1,"group-label"]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-swatch-picker":if(!customElements.get(t(s))){customElements.define(t(s),l)}break}}))}p();export{l as S,p as d};
-//# sourceMappingURL=p-XaCYqck3.js.map
+import{p as s,H as c,c as e,h as r,a as i,t}from"./index.js";function o(s,c){return c.length>0?c.flatMap((s=>s.options)):[...s]}function a(s,c){const e=s.findIndex((s=>s.value===c&&!s.isInactive));if(e>=0)return e;return s.findIndex((s=>!s.isInactive))}function n(s,c,e){const r=s.map(((s,c)=>({option:s,index:c}))).filter((({option:s})=>!s.isInactive)).map((({index:s})=>s));if(r.length===0)return null;if(e==="Home")return r[0];if(e==="End")return r[r.length-1];const i=e==="ArrowRight"||e==="ArrowDown"?1:-1;const t=r.indexOf(c);if(t<0){return i>0?r[0]:r[r.length-1]}return r[(t+i+r.length)%r.length]}function d(s){if(s===undefined||!Number.isFinite(s))return 1;return Math.min(1,Math.max(0,s))}const h=()=>`@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-swatch-picker-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-swatch-picker-h,.ds-focus-ring.sc-ds-swatch-picker,.ds-focus-ring-inset.sc-ds-swatch-picker-h,.ds-focus-ring-inset.sc-ds-swatch-picker{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-swatch-picker-h:focus-visible,.ds-focus-ring.sc-ds-swatch-picker:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-swatch-picker-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-swatch-picker{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-swatch-picker-h:focus-visible,.ds-focus-ring-inset.sc-ds-swatch-picker:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-swatch-picker-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-swatch-picker:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-swatch-picker::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-swatch-picker-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-swatch-picker-h,.ds-control-inactive.sc-ds-swatch-picker{color:var(--ds-forced-color-disabled);opacity:1}}@media (forced-colors: active){.sc-ds-swatch-picker:root,.sc-ds-swatch-picker-h,.ds-forced-colors-scope.sc-ds-swatch-picker{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-swatch-picker-h{box-sizing:border-box;display:block;width:100%;--_swatch-inner-inset:calc(var(--dimension-stroke-width-025) + var(--dimension-space-025));--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.swatch-picker.sc-ds-swatch-picker{box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.swatch-picker__option.sc-ds-swatch-picker{position:relative;box-sizing:border-box;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:default;isolation:isolate}.swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__interaction.sc-ds-swatch-picker,.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.swatch-picker__fill.sc-ds-swatch-picker{z-index:1;background-color:var(--_swatch-preview-color);background-image:var(--_swatch-preview-image);background-repeat:no-repeat;background-position:center;background-size:cover;opacity:var(--_swatch-preview-opacity);transition:inset var(--_swatch-select-motion)}.swatch-picker__border.sc-ds-swatch-picker{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:inset var(--_swatch-select-motion)}.swatch-picker__interaction.sc-ds-swatch-picker{z-index:3;background-color:transparent;transition:inset var(--_swatch-select-motion),     background-color 0s}@media (hover: hover) and (pointer: fine){.swatch-picker__option.sc-ds-swatch-picker:hover:not(:disabled) .swatch-picker__interaction.sc-ds-swatch-picker{background-color:var(--color-interaction-hover)}}.swatch-picker__option.sc-ds-swatch-picker:active:not(:disabled) .swatch-picker__interaction.sc-ds-swatch-picker{background-color:var(--color-interaction-pressed)}.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{opacity:0;transform:scale(1.2);transform-origin:center;transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.swatch-picker__halo.sc-ds-swatch-picker{z-index:4;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg)}.swatch-picker__stroke.sc-ds-swatch-picker{z-index:5;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__interaction.sc-ds-swatch-picker{inset:var(--_swatch-inner-inset)}.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__option--selected.sc-ds-swatch-picker .swatch-picker__stroke.sc-ds-swatch-picker{opacity:1;transform:scale(1)}.swatch-picker__divider.sc-ds-swatch-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}@media (prefers-reduced-motion: reduce){.swatch-picker__fill.sc-ds-swatch-picker,.swatch-picker__border.sc-ds-swatch-picker,.swatch-picker__interaction.sc-ds-swatch-picker,.swatch-picker__halo.sc-ds-swatch-picker,.swatch-picker__stroke.sc-ds-swatch-picker{transition:none}}@media (forced-colors: active){.swatch-picker__fill.sc-ds-swatch-picker{forced-color-adjust:none}.swatch-picker__border.sc-ds-swatch-picker{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.swatch-picker__halo.sc-ds-swatch-picker{box-shadow:none}.swatch-picker__stroke.sc-ds-swatch-picker{box-shadow:none;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.swatch-picker__divider.sc-ds-swatch-picker{background-color:var(--ds-forced-color-content)}}`;const l=s(class s extends c{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=e(this,"dsChange",7);this.value="";this.options=[];this.sections=[];this.groupLabel="Swatch options"}get activeOptions(){return o(this.options,this.sections)}selectOption(s){if(s.isInactive||s.value===this.value)return;this.value=s.value;this.dsChange.emit(s.value)}focusOption(s){requestAnimationFrame((()=>{const c=this.el.querySelectorAll(".swatch-picker__option");c[s]?.focus()}))}handleOptionKeyDown(s,c){const e=s.key;if(!["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Home","End"].includes(e)){return}const r=n(this.activeOptions,c,e);if(r===null)return;s.preventDefault();const i=this.activeOptions[r];this.selectOption(i);this.focusOption(r)}renderOption(s,c,e){const i=s.value===this.value;const t=d(s.preview.opacity);return r("button",{key:s.value,type:"button",class:{"swatch-picker__option":true,"swatch-picker__option--selected":i,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},style:{"--_swatch-preview-color":s.preview.backgroundColor??"var(--color-background-secondary)","--_swatch-preview-image":s.preview.backgroundImage??"none","--_swatch-preview-opacity":String(t)},role:"radio","aria-label":s.label,"aria-checked":i?"true":"false",tabIndex:c===e?0:-1,disabled:s.isInactive,onClick:()=>this.selectOption(s),onKeyDown:s=>this.handleOptionKeyDown(s,c)},r("span",{class:"swatch-picker__fill","aria-hidden":"true"}),r("span",{class:"swatch-picker__border","aria-hidden":"true"}),r("span",{class:"swatch-picker__interaction","aria-hidden":"true"}),r("span",{class:"swatch-picker__halo","aria-hidden":"true"}),r("span",{class:"swatch-picker__stroke","aria-hidden":"true"}))}render(){const s=this.activeOptions;const c=a(s,this.value);let e=0;return r(i,{key:"5c96b75aea842ea800e9b3e1198f9f855928c16f"},r("div",{key:"7f2d724ca6ea4a2c001003d52249886a95c19767",class:"swatch-picker",role:"radiogroup","aria-label":this.groupLabel},(this.sections.length>0?this.sections:[{options:this.options}]).map(((s,i)=>[s.options.map((s=>{const r=e++;return this.renderOption(s,r,c)})),i<(this.sections.length>0?this.sections.length:1)-1&&r("span",{class:"swatch-picker__divider","aria-hidden":"true"})]))))}get el(){return this}static get style(){return h()}},[2,"ds-swatch-picker",{value:[1537],options:[16],sections:[16],groupLabel:[1,"group-label"]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-swatch-picker":if(!customElements.get(t(s))){customElements.define(t(s),l)}break}}))}p();export{l as S,p as d};
+//# sourceMappingURL=p-Q7AOgrg5.js.map

package/dist/components/p-VT-5XDkB.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,h as o,a as r,t as n}from"./index.js";import{d as i}from"./p-Is1lFmwp.js";import{d as c}from"./p-DQQsS9Rx.js";const a=["fair","good","excellent"];function d(e){return typeof e==="string"&&a.includes(e)}function t(e){if(typeof e==="string"&&e.trim()==="")return undefined;const s=typeof e==="number"?e:Number(e);if(!Number.isFinite(s)||s<0||s>100)return undefined;if(s<=50)return"fair";if(s<=80)return"good";return"excellent"}function l(e,s){return d(s)?s:t(e)}const b={sm:"text-title-small",md:"text-title-large",lg:"text-display-small"};const g=()=>`.ds-control-frame.sc-ds-score{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-score{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-score{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-score{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-score{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-score{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}@media (forced-colors: active){.sc-ds-score:root,.sc-ds-score-h,.ds-forced-colors-scope.sc-ds-score{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-score-h{display:inline-flex;align-items:center;box-sizing:border-box;min-width:0;--_score-badge-inline-size:var(--dimension-size-500);--_score-badge-block-size:var(--dimension-size-400);--_score-skeleton-inset:calc(var(--_score-badge-block-size) / 8)}.score--sm.sc-ds-score-h{--_score-badge-inline-size:calc(var(--dimension-size-400) - var(--dimension-space-050));--_score-badge-block-size:var(--dimension-size-300)}.score--md.sc-ds-score-h{--_score-badge-inline-size:var(--dimension-size-500);--_score-badge-block-size:var(--dimension-size-400)}.score--lg.sc-ds-score-h{--_score-badge-inline-size:calc(var(--dimension-size-600) + var(--dimension-space-100));--_score-badge-block-size:var(--dimension-size-500)}.score__badge.sc-ds-score{display:flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;inline-size:var(--_score-badge-inline-size);block-size:var(--_score-badge-block-size);overflow:hidden;border-radius:var(--dimension-radius-025);background:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral);-webkit-user-select:none;user-select:none}.score__badge--fair.sc-ds-score{background:var(--color-safety-score-background-fair);color:var(--color-safety-score-foreground-on-fair)}.score__badge--good.sc-ds-score{background:var(--color-safety-score-background-good);color:var(--color-safety-score-foreground-on-good)}.score__badge--excellent.sc-ds-score{background:var(--color-safety-score-background-excellent);color:var(--color-safety-score-foreground-on-excellent)}.score__value.sc-ds-score,.score__badge.sc-ds-score ds-skeleton.sc-ds-score{flex:0 0 auto}.score__badge--loading.sc-ds-score{padding-inline:var(--_score-skeleton-inset)}.score__badge--loading.sc-ds-score .score__value.sc-ds-score{flex:1 1 auto;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;min-inline-size:0}@media (forced-colors: active){.score__badge.sc-ds-score{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.value="";this.size="md";this.isLoading=false;this.label=""}render(){const e=this.size;const s=l(this.value,this.level);const n=b[e];const i=[this.label.trim(),this.isLoading?"":this.value].filter(Boolean).join(" ");return o(r,{key:"bd3d48d1ab1fd1f13e98e727e1d7de3b40fa886c",class:{score:true,[`score--${e}`]:true,"score--loading":this.isLoading},role:i?"img":undefined,"aria-busy":this.isLoading?"true":undefined,"aria-label":i||undefined},o("span",{key:"b3ca6f3000917055fc7c97d2d052930f40a94339",class:{score__badge:true,[`score__badge--${s}`]:Boolean(s),"score__badge--loading":this.isLoading}},this.isLoading?o("ds-skeleton",{class:"score__value",variant:"text",textVariant:n,background:s?"bold":"faint"}):o("ds-text",{as:"span",class:"score__value ds-control-label-box",variant:n,emphasis:true,color:"inherit",fontFeature:"tabular-nums"},this.value)))}static get style(){return g()}},[2,"ds-score",{value:[8],size:[1],level:[1],isLoading:[4,"is-loading"],label:[1]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-score","ds-skeleton","ds-text"];e.forEach((e=>{switch(e){case"ds-score":if(!customElements.get(n(e))){customElements.define(n(e),f)}break;case"ds-skeleton":if(!customElements.get(n(e))){i()}break;case"ds-text":if(!customElements.get(n(e))){c()}break}}))}u();export{f as S,u as d,d as i};
+//# sourceMappingURL=p-VT-5XDkB.js.map

package/dist/components/p-VT-5XDkB.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SAFETY_SCORE_LEVELS","isSafetyScoreLevel","value","includes","resolveSafetyScoreLevel","trim","undefined","numericValue","Number","isFinite","resolveScoreLevel","level","SCORE_VALUE_VARIANT","sm","md","lg","scoreCss","Score","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","isLoading","label","render","valueVariant","accessibleName","filter","Boolean","join","h","Host","key","class","score","role","score__badge","variant","textVariant","background","as","emphasis","color","fontFeature"],"sources":["src/wc/components/Score/score-types.ts","src/wc/components/Score/score-model.ts","src/wc/components/Score/Score.css?tag=ds-score&encapsulation=scoped","src/wc/components/Score/Score.tsx"],"sourcesContent":["export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';\nexport type ScoreSize = 'sm' | 'md' | 'lg';\n\nexport const SCORE_SIZES = ['sm', 'md', 'lg'] as const;\nexport const SAFETY_SCORE_LEVELS = ['fair', 'good', 'excellent'] as const;\n","import { SAFETY_SCORE_LEVELS, type SafetyScoreLevel, type ScoreSize } from './score-types';\n\nexport function isSafetyScoreLevel(value: unknown): value is SafetyScoreLevel {\n  return typeof value === 'string' && (SAFETY_SCORE_LEVELS as readonly string[]).includes(value);\n}\n\n/**\n * Infer a safety-score color level from a 0–100 figure. Non-numeric or out-of-range\n * values return undefined so the owner can supply `level` explicitly.\n */\nexport function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined {\n  if (typeof value === 'string' && value.trim() === '') return undefined;\n  const numericValue = typeof value === 'number' ? value : Number(value);\n  if (!Number.isFinite(numericValue) || numericValue < 0 || numericValue > 100) return undefined;\n  if (numericValue <= 50) return 'fair';\n  if (numericValue <= 80) return 'good';\n  return 'excellent';\n}\n\nexport function resolveScoreLevel(\n  value: string | number,\n  level?: SafetyScoreLevel\n): SafetyScoreLevel | undefined {\n  return isSafetyScoreLevel(level) ? level : resolveSafetyScoreLevel(value);\n}\n\nexport const SCORE_VALUE_VARIANT = {\n  sm: 'text-title-small',\n  md: 'text-title-large',\n  lg: 'text-display-small',\n} as const satisfies Record<\n  ScoreSize,\n  'text-title-small' | 'text-title-large' | 'text-display-small'\n>;\n","@import '../../utils/control-parts.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  --_score-badge-inline-size: var(--dimension-size-500);\n  --_score-badge-block-size: var(--dimension-size-400);\n  /* Matches the text skeleton’s 75% bar so the fill inset is even on all sides. */\n  --_score-skeleton-inset: calc(var(--_score-badge-block-size) / 8);\n}\n\n:host(.score--sm) {\n  --_score-badge-inline-size: calc(var(--dimension-size-400) - var(--dimension-space-050));\n  --_score-badge-block-size: var(--dimension-size-300);\n}\n\n:host(.score--md) {\n  --_score-badge-inline-size: var(--dimension-size-500);\n  --_score-badge-block-size: var(--dimension-size-400);\n}\n\n:host(.score--lg) {\n  --_score-badge-inline-size: calc(var(--dimension-size-600) + var(--dimension-space-100));\n  --_score-badge-block-size: var(--dimension-size-500);\n}\n\n.score__badge {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  inline-size: var(--_score-badge-inline-size);\n  block-size: var(--_score-badge-block-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.score__badge--fair {\n  background: var(--color-safety-score-background-fair);\n  color: var(--color-safety-score-foreground-on-fair);\n}\n\n.score__badge--good {\n  background: var(--color-safety-score-background-good);\n  color: var(--color-safety-score-foreground-on-good);\n}\n\n.score__badge--excellent {\n  background: var(--color-safety-score-background-excellent);\n  color: var(--color-safety-score-foreground-on-excellent);\n}\n\n.score__value,\n.score__badge ds-skeleton {\n  flex: 0 0 auto;\n}\n\n.score__badge--loading {\n  padding-inline: var(--_score-skeleton-inset);\n}\n\n.score__badge--loading .score__value {\n  flex: 1 1 auto;\n  inline-size: 100%;\n  block-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  min-inline-size: 0;\n}\n\n@media (forced-colors: active) {\n  .score__badge {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n    color: var(--ds-forced-color-content);\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { SCORE_VALUE_VARIANT, resolveScoreLevel } from './score-model';\nimport type { SafetyScoreLevel, ScoreSize } from './score-types';\n\n@Component({\n  tag: 'ds-score',\n  styleUrl: 'Score.css',\n  scoped: true,\n})\nexport class Score {\n  /** Display-ready headline figure. */\n  @Prop() value: string | number = '';\n  /**\n   * Visual density matching control height: `sm` 24px, `md` 32px, `lg` 40px.\n   * `lg` is the Card Overview recipe.\n   */\n  @Prop() size: ScoreSize = 'md';\n  /**\n   * Safety-score color level. Numeric values from 0–100 infer fair (0–50),\n   * good (51–80), or excellent (81–100) when this is omitted.\n   */\n  @Prop() level: SafetyScoreLevel | undefined;\n  /** Replace the figure with a skeleton while data resolves. */\n  @Prop() isLoading: boolean = false;\n  /** Accessible name prefix, for example “Safety score”. */\n  @Prop() label: string = '';\n\n  render() {\n    const size = this.size;\n    const level = resolveScoreLevel(this.value, this.level);\n    const valueVariant = SCORE_VALUE_VARIANT[size];\n    const accessibleName = [this.label.trim(), this.isLoading ? '' : this.value]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <Host\n        class={{\n          score: true,\n          [`score--${size}`]: true,\n          'score--loading': this.isLoading,\n        }}\n        role={accessibleName ? 'img' : undefined}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        aria-label={accessibleName || undefined}\n      >\n        <span\n          class={{\n            score__badge: true,\n            [`score__badge--${level}`]: Boolean(level),\n            'score__badge--loading': this.isLoading,\n          }}\n        >\n          {this.isLoading ? (\n            <ds-skeleton\n              class=\"score__value\"\n              variant=\"text\"\n              textVariant={valueVariant}\n              background={level ? 'bold' : 'faint'}\n            />\n          ) : (\n            <ds-text\n              as=\"span\"\n              class=\"score__value ds-control-label-box\"\n              variant={valueVariant}\n              emphasis={true}\n              color=\"inherit\"\n              fontFeature=\"tabular-nums\"\n            >\n              {this.value}\n            </ds-text>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAIO,MAAMA,EAAsB,CAAC,OAAQ,OAAQ,aCF9C,SAAUC,EAAmBC,GACjC,cAAcA,IAAU,UAAaF,EAA0CG,SAASD,EAC1F,CAMM,SAAUE,EAAwBF,GACtC,UAAWA,IAAU,UAAYA,EAAMG,SAAW,GAAI,OAAOC,UAC7D,MAAMC,SAAsBL,IAAU,SAAWA,EAAQM,OAAON,GAChE,IAAKM,OAAOC,SAASF,IAAiBA,EAAe,GAAKA,EAAe,IAAK,OAAOD,UACrF,GAAIC,GAAgB,GAAI,MAAO,OAC/B,GAAIA,GAAgB,GAAI,MAAO,OAC/B,MAAO,WACT,CAEM,SAAUG,EACdR,EACAS,GAEA,OAAOV,EAAmBU,GAASA,EAAQP,EAAwBF,EACrE,CAEO,MAAMU,EAAsB,CACjCC,GAAI,mBACJC,GAAI,mBACJC,GAAI,sBC7BN,MAAMC,EAAW,IAAM,yqH,MCSVC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAOUC,KAAApB,MAAyB,GAKzBoB,KAAAC,KAAkB,KAOlBD,KAAAE,UAAqB,MAErBF,KAAAG,MAAgB,EAmDzB,CAjDC,MAAAC,GACE,MAAMH,EAAOD,KAAKC,KAClB,MAAMZ,EAAQD,EAAkBY,KAAKpB,MAAOoB,KAAKX,OACjD,MAAMgB,EAAef,EAAoBW,GACzC,MAAMK,EAAiB,CAACN,KAAKG,MAAMpB,OAAQiB,KAAKE,UAAY,GAAKF,KAAKpB,OACnE2B,OAAOC,SACPC,KAAK,KAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,MAAO,KACP,CAAC,UAAUb,KAAS,KACpB,iBAAkBD,KAAKE,WAEzBa,KAAMT,EAAiB,MAAQtB,UAAS,YAC7BgB,KAAKE,UAAY,OAASlB,UAAS,aAClCsB,GAAkBtB,WAE9B0B,EAAA,QAAAE,IAAA,2CACEC,MAAO,CACLG,aAAc,KACd,CAAC,iBAAiB3B,KAAUmB,QAAQnB,GACpC,wBAAyBW,KAAKE,YAG/BF,KAAKE,UACJQ,EAAA,eACEG,MAAM,eACNI,QAAQ,OACRC,YAAab,EACbc,WAAY9B,EAAQ,OAAS,UAG/BqB,EAAA,WACEU,GAAG,OACHP,MAAM,oCACNI,QAASZ,EACTgB,SAAU,KACVC,MAAM,UACNC,YAAY,gBAEXvB,KAAKpB,Q","ignoreList":[]}