@ds-mo/ui 1.10.1 → 1.11.1

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

@@ -1,2 +1,2 @@
-import{p as e,H as a,c as n,h as t,a as s,t as i}from"./index.js";import{d as o}from"./p-CiEc8Nwx.js";import{d as r}from"./p-DqBCQRRd.js";import{d as l}from"./p-C9za7IDu.js";const d="data-nav-style";function c(e){if(e==="dashboard"||e==="settings")return e;return undefined}function p(e,a,n){const t=c(a);if(t)return t;const s=typeof document!=="undefined"?document.documentElement.getAttribute(d):null;const i=c(s);if(i)return i;return e}function v(e,a){return e!==a}function h(e,a){return e===a||e.startsWith(`${a}/`)}function f(e,a){if(!e)return"";let n="";let t=0;for(const s of a){if(!s.href)continue;if(h(e,s.href)&&s.href.length>t){n=s.id;t=s.href.length}}return n}function m(e){return e.reduce(((e,a)=>e+a.items.length),0)}function u(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function b(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function _(e,a){return m(e)===0&&m(u(a))>0}const g="ds-panel-nav-user-menu-anchor";const y=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const x=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[gradient] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__footer-btn.sc-ds-panel-nav ds-icon.sc-ds-panel-nav{position:relative;z-index:1}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const k=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return b(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=u(e);this.syncRovingIndex();this.syncActiveFromUrl()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=p(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});e?.removeEventListener("transitionend",this.transitionEndHandler)}};e?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=f(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(v(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(_(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}syncRovingIndex(){const e=this.getAllItems().findIndex((e=>e.id===this.effectiveActiveId));this.rovingIndex=e>=0?e:0}handleItemKeyDown(e,a){const n=this.getAllItems().length;let t;switch(e.key){case"ArrowDown":e.preventDefault();t=(a+1)%n;break;case"ArrowUp":e.preventDefault();t=(a-1+n)%n;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const s=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));s[t]?.focus()}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(e,a,n){const s=e.id===this.effectiveActiveId;const i=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:s?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const o={class:{"panel-nav__item":true,"panel-nav__item--active":s},"aria-current":s?"page":undefined,title:n?e.label:undefined,tabIndex:a===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleItemKeyDown(e,a),onFocus:()=>{this.rovingIndex=a}};const r=this.routerMode==="anchor"&&e.href;return r?t("a",{...o,href:e.href},i):t("button",{...o,type:"button"},i)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":i,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(s,{key:"99106ff1e2b9a3bee88c8477f31acd32f5598ad3",style:{display:"block",position:"relative"}},t("nav",{key:"398c72a6421663fdfda6b7abbcf17a32df62a8a6",class:l,"aria-label":a?"Dashboard navigation":"Settings navigation"},t("div",{key:"cd1e3eb959ab1d8d96c40dd7df9342ce4e9170fa",class:"panel-nav__header"},t("button",{key:"1060e1b11b60a81bfadff2a15d17abb5ebca08bd",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":i?"Expand navigation":"Collapse navigation","aria-expanded":i?"false":"true"},t("span",{key:"98af831bb55a26cc8c95ff0457622fd4275603e9",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"18ff02df04947307720f2736727dc3438fa5c8bd",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"05a8af06fcb8aa2adc0a3e2ea2fd3d691a825844",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"37c4274d078d140e2de4ff5480bfad628385e71b",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"c2d9d6d9802654f58ae2fd9bbee44b7efc1941bc",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"ade76376efd4257a641266e7dd35b0ce6c8a73ed",class:{"panel-nav__body":true,"scroll-edge-fade":true,"scroll-edge-fade--bottom":true,"scroll-edge-fade--at-end":this.atBottom},onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((a=>t("div",{class:"panel-nav__group"},a.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label))),a.items.map((a=>this.renderNavItem(a,e++,i))))))})()),t("div",{key:"04f13d5400ab567f3bd13519ee8d547ca4a4a55e",class:"panel-nav__footer"},t("button",{key:"0e05c9db6220cd6a9a6095f3a99222c466f0a1d7",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"0097638f290f58f00e677246d7165cc1df5eaebc",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"d47ff2da19b62c51471b5bef7ad3aa2305e3b84c",type:"button",id:g,class:"panel-nav__item panel-nav__footer-user","aria-label":i?`User: ${o}`:`User menu for ${o}`,onClick:e=>this.handleUserAction(e)},t("span",{key:"b4ff3746d77426977f7acfe6587f089f747f2d21",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"d6b3bbc0cd77bbb797543b2c87f4fdbe36231666",class:"panel-nav__item-label-text"},t("ds-text",{key:"99090d8c7b93d531eb279d3f31ba347b4625e887",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},o))),t("span",{key:"780039ff9b05db71b762246dd7a1f8b356314684",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"5561f8fdaa64c98f6fe4f3da6ce71abe20866bd7",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"57545cef0716e8a2a6c38060d90f57c7386c7f1f",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"96095d6fb4b81004ae44932b89027ba2887871eb",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"3592dcb33397cc76d69228a771387c3c0af01fa1",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"8e003e364c1f53939e719ccc85d1063a8cf896dd",class:"panel-nav__user-initial"},t("ds-text",{key:"bc7ed6157beed36fa76a4c5593c08795d89525ac",as:"span",variant:"text-caption-emphasis",color:"inherit"},r))))))),!this.viewportNarrow&&t("div",{key:"8ad205e06081f2d0559aa038285116ab148fa8ac",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return y()+x()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);k.HOST_PROP_SYNC_BUDGET=8;function w(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),k)}break;case"ds-badge":if(!customElements.get(i(e))){o()}break;case"ds-icon":if(!customElements.get(i(e))){r()}break;case"ds-text":if(!customElements.get(i(e))){l()}break}}))}w();const z=k;const C=w;export{z as DsPanelNav,C as defineCustomElement};
+import{p as e,H as a,c as n,h as t,a as s,t as i}from"./index.js";import{d as o}from"./p-CiEc8Nwx.js";import{d as r}from"./p-DqBCQRRd.js";import{d as l}from"./p-C9za7IDu.js";const d="data-nav-style";function c(e){if(e==="dashboard"||e==="settings")return e;return undefined}function p(e,a,n){const t=c(a);if(t)return t;const s=typeof document!=="undefined"?document.documentElement.getAttribute(d):null;const i=c(s);if(i)return i;return e}function v(e,a){return e!==a}function h(e,a){return e===a||e.startsWith(`${a}/`)}function f(e,a){if(!e)return"";let n="";let t=0;for(const s of a){if(!s.href)continue;if(h(e,s.href)&&s.href.length>t){n=s.id;t=s.href.length}}return n}function m(e){return e.reduce(((e,a)=>e+a.items.length),0)}function u(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function b(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function _(e,a){return m(e)===0&&m(u(a))>0}const g="ds-panel-nav-user-menu-anchor";const y=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const x=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[gradient] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[grid].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[grid] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__footer-btn.sc-ds-panel-nav ds-icon.sc-ds-panel-nav{position:relative;z-index:1}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const k=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return b(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=u(e);this.syncRovingIndex();this.syncActiveFromUrl()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=p(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});e?.removeEventListener("transitionend",this.transitionEndHandler)}};e?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=f(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(v(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(_(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}syncRovingIndex(){const e=this.getAllItems().findIndex((e=>e.id===this.effectiveActiveId));this.rovingIndex=e>=0?e:0}handleItemKeyDown(e,a){const n=this.getAllItems().length;let t;switch(e.key){case"ArrowDown":e.preventDefault();t=(a+1)%n;break;case"ArrowUp":e.preventDefault();t=(a-1+n)%n;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const s=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));s[t]?.focus()}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(e,a,n){const s=e.id===this.effectiveActiveId;const i=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:s?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const o={class:{"panel-nav__item":true,"panel-nav__item--active":s},"aria-current":s?"page":undefined,title:n?e.label:undefined,tabIndex:a===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleItemKeyDown(e,a),onFocus:()=>{this.rovingIndex=a}};const r=this.routerMode==="anchor"&&e.href;return r?t("a",{...o,href:e.href},i):t("button",{...o,type:"button"},i)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":i,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(s,{key:"99106ff1e2b9a3bee88c8477f31acd32f5598ad3",style:{display:"block",position:"relative"}},t("nav",{key:"398c72a6421663fdfda6b7abbcf17a32df62a8a6",class:l,"aria-label":a?"Dashboard navigation":"Settings navigation"},t("div",{key:"cd1e3eb959ab1d8d96c40dd7df9342ce4e9170fa",class:"panel-nav__header"},t("button",{key:"1060e1b11b60a81bfadff2a15d17abb5ebca08bd",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":i?"Expand navigation":"Collapse navigation","aria-expanded":i?"false":"true"},t("span",{key:"98af831bb55a26cc8c95ff0457622fd4275603e9",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"18ff02df04947307720f2736727dc3438fa5c8bd",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"05a8af06fcb8aa2adc0a3e2ea2fd3d691a825844",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"37c4274d078d140e2de4ff5480bfad628385e71b",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"c2d9d6d9802654f58ae2fd9bbee44b7efc1941bc",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"ade76376efd4257a641266e7dd35b0ce6c8a73ed",class:{"panel-nav__body":true,"scroll-edge-fade":true,"scroll-edge-fade--bottom":true,"scroll-edge-fade--at-end":this.atBottom},onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((a=>t("div",{class:"panel-nav__group"},a.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label))),a.items.map((a=>this.renderNavItem(a,e++,i))))))})()),t("div",{key:"04f13d5400ab567f3bd13519ee8d547ca4a4a55e",class:"panel-nav__footer"},t("button",{key:"0e05c9db6220cd6a9a6095f3a99222c466f0a1d7",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"0097638f290f58f00e677246d7165cc1df5eaebc",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"d47ff2da19b62c51471b5bef7ad3aa2305e3b84c",type:"button",id:g,class:"panel-nav__item panel-nav__footer-user","aria-label":i?`User: ${o}`:`User menu for ${o}`,onClick:e=>this.handleUserAction(e)},t("span",{key:"b4ff3746d77426977f7acfe6587f089f747f2d21",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"d6b3bbc0cd77bbb797543b2c87f4fdbe36231666",class:"panel-nav__item-label-text"},t("ds-text",{key:"99090d8c7b93d531eb279d3f31ba347b4625e887",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},o))),t("span",{key:"780039ff9b05db71b762246dd7a1f8b356314684",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"5561f8fdaa64c98f6fe4f3da6ce71abe20866bd7",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"57545cef0716e8a2a6c38060d90f57c7386c7f1f",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"96095d6fb4b81004ae44932b89027ba2887871eb",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"3592dcb33397cc76d69228a771387c3c0af01fa1",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"8e003e364c1f53939e719ccc85d1063a8cf896dd",class:"panel-nav__user-initial"},t("ds-text",{key:"bc7ed6157beed36fa76a4c5593c08795d89525ac",as:"span",variant:"text-caption-emphasis",color:"inherit"},r))))))),!this.viewportNarrow&&t("div",{key:"8ad205e06081f2d0559aa038285116ab148fa8ac",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return y()+x()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);k.HOST_PROP_SYNC_BUDGET=8;function w(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),k)}break;case"ds-badge":if(!customElements.get(i(e))){o()}break;case"ds-icon":if(!customElements.get(i(e))){r()}break;case"ds-text":if(!customElements.get(i(e))){l()}break}}))}w();const z=k;const C=w;export{z as DsPanelNav,C as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["NAV_STYLE_HINT_ATTR","readNavStyleAttr","attr","undefined","resolveNavChromeStyle","styleProp","hostAttr","docHint","fromHost","hint","document","documentElement","getAttribute","fromHint","shouldResyncNavChromeStyle","renderedStyle","style","hrefMatchesPath","path","href","startsWith","deriveActiveIdFromUrl","items","bestId","bestLen","item","length","id","countPanelNavItems","groups","reduce","sum","g","parsePanelNavGroups","Array","isArray","parsed","JSON","parse","resolvePanelNavDisableVt","prop","shouldResyncPanelNavGroups","parsedGroups","PANEL_NAV_USER_MENU_ANCHOR_ID","scrollEdgeFadeCss","panelNavCss","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","disableViewTransition","routerMode","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","effectiveDisableViewTransition","el","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","syncRovingIndex","syncActiveFromUrl","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","componentWillLoad","resolvePanelNavStyle","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","checkScroll","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","dsChromeTransitionStart","emit","source","panel","querySelector","transitionEndHandler","e","propertyName","dsChromeTransitionEnd","addEventListener","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","getAllItems","shouldResyncPanelNavStyle","remaining","HOST_PROP_SYNC_BUDGET","tick","requestAnimationFrame","queueMicrotask","applyToggle","next","setItem","String","dsNavToggle","flatMap","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","from","querySelectorAll","focus","body","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","handleUserAction","anchor","currentTarget","dsNavUserAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","cursor","userSelect","onMove","ev","deltaX","Math","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","variant","label","dot","background","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","useAnchor","type","render","chromeStyle","isDashboardChrome","isDashboard","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","onScroll","flatIdx","map","group","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/nav/nav-chrome.ts","src/wc/components/PanelNav/panel-nav-utils.ts","src/wc/components/PanelNav/panel-nav-types.ts","src/wc/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":["/** 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 { PanelNavGroup, PanelNavItem } from './panel-nav-types';\nimport {\n  NAV_STYLE_HINT_ATTR,\n  clearNavStyleHint,\n  readNavStyleAttr,\n  resolveNavChromeStyle,\n  setNavStyleHint,\n  shouldResyncNavChromeStyle,\n} from '../../nav/nav-chrome';\n\nexport type { NavChromeStyle } from '../../nav/nav-chrome';\nexport {\n  NAV_STYLE_HINT_ATTR,\n  readNavStyleAttr,\n  setNavStyleHint,\n  clearNavStyleHint,\n  resolveNavChromeStyle as resolvePanelNavStyle,\n  shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,\n};\n\n/** Whether `path` matches `href` at a segment boundary (exact or child path). */\nexport function hrefMatchesPath(path: string, href: string): boolean {\n  return path === href || path.startsWith(`${href}/`);\n}\n\n/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */\nexport function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {\n  if (!path) return '';\n\n  let bestId = '';\n  let bestLen = 0;\n\n  for (const item of items) {\n    if (!item.href) continue;\n    if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {\n      bestId = item.id;\n      bestLen = item.href.length;\n    }\n  }\n\n  return bestId;\n}\n\n/** Total nav item count across all groups. */\nexport function countPanelNavItems(groups: PanelNavGroup[]): number {\n  return groups.reduce((sum, g) => sum + g.items.length, 0);\n}\n\n/** Parse `groups` from either a JSON attribute string or a JS property array. */\nexport function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {\n  if (Array.isArray(groups)) return groups;\n  if (typeof groups === 'string') {\n    try {\n      const parsed = JSON.parse(groups);\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n  return [];\n}\n\n/** Resolve whether VT is disabled from prop and/or host attribute. */\nexport function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {\n  if (prop) return true;\n  if (attr === null) return false;\n  return attr !== 'false';\n}\n\n/** True when host `groups` has items but internal parsed state is still empty. */\nexport function shouldResyncPanelNavGroups(\n  parsedGroups: PanelNavGroup[],\n  groups: string | unknown,\n): boolean {\n  return (\n    countPanelNavItems(parsedGroups) === 0 &&\n    countPanelNavItems(parsePanelNavGroups(groups)) > 0\n  );\n}\n","import type { NavChromeStyle } from '../../nav/nav-chrome';\n\nexport type { NavChromeStyle };\nexport type PanelNavRouterMode = 'anchor' | 'event';\n\nexport interface PanelNavItem {\n  id: string;\n  icon: string;\n  label: string;\n  /** Show a notification dot badge on the item */\n  dot?: boolean;\n  flag?: boolean;\n  /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.\n   *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */\n  href?: string;\n}\n\nexport interface PanelNavGroup {\n  id?: string;\n  label?: string;\n  items: PanelNavItem[];\n}\n\n/** Stable `id` on the footer user button — use with `ds-menu` `anchor-id`. */\nexport const PANEL_NAV_USER_MENU_ANCHOR_ID = 'ds-panel-nav-user-menu-anchor';\n\n/** Detail for `dsNavUserAction` — anchor element for an external `ds-menu`. */\nexport interface PanelNavUserActionDetail {\n  anchor: HTMLElement;\n}\n","/**\n * Scroll-edge alpha fade — apply to overflow scroll containers.\n * Pair with `.scroll-edge-fade--at-end` when the relevant edge is flush (no fade).\n *\n * @see scroll-edge-fade.ts for programmatic mask helpers.\n */\n\n.scroll-edge-fade {\n  --ds-scroll-edge-fade-size: var(--dimension-size-600);\n}\n\n.scroll-edge-fade--top {\n  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);\n  mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--bottom {\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--left {\n  -webkit-mask-image: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--right {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to left,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--at-end {\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n","/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – 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}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n/* Shell-owned chrome (bg + wash + grid) — panel is a transparent frame. */\n:host-context(ds-app-shell[gradient]) .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}\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, 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  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__header-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default; 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: 1;\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; opacity swap matches hover bg (instant) */\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.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { opacity: 1; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n  /* Typography via ds-text (text-caption-emphasis) */\n  display: flex;\n  align-items: center;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  line-height: var(--typography-lineheight-xs, 12px);\n  padding: 0 var(--dimension-space-075, 6px);\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__item:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  line-height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot — single element, moves between positions ──────── */\n\n.panel-nav__item-dot {\n  position: absolute;\n  right: 13px;\n  top: 13px;\n  pointer-events: none;\n  transition:\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  right: var(--dimension-space-075);\n  top: var(--dimension-space-075);\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 var(--dimension-space-075, 6px);\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  background: transparent;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__footer-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__footer-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__footer-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__footer-btn:focus-visible { outline: none; }\n.panel-nav__footer-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n.panel-nav__footer-btn ds-icon {\n  position: relative;\n  z-index: 1;\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* row position: right of gear button */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion),\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* column position: full-width row below gear */\n  left: var(--_nav-padding-x);\n  right: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n.panel-nav__user-initial {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_nav-fg-secondary);\n  text-transform: uppercase;\n  line-height: 1;\n  pointer-events: none;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n/* 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  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    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    transition-delay: 0.01ms !important;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n  deriveActiveIdFromUrl,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\n\n@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  /** 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  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Bubbling lifecycle — `ds-app-shell` 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 atBottom = false;\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n\n  private transitionEndHandler?: (e: TransitionEvent) => void;\n  private resizeObserver?: ResizeObserver;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition'),\n    );\n  }\n\n  @Watch('collapsed')\n  @Watch('viewportNarrow')\n  onCollapsedChange() {\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.syncRovingIndex();\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('activeId')\n  @Watch('urlDerivedActiveId')\n  onActiveIdChange() {\n    this.syncRovingIndex();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  onNavStyleChange(newVal: NavChromeStyle) {\n    this.renderedStyle = newVal;\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch { /* localStorage unavailable */ }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.checkScroll();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    this.isAnimating = true;\n    this.dsChromeTransitionStart.emit({ source: 'panel-nav' });\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    if (this.transitionEndHandler) {\n      panel?.removeEventListener('transitionend', this.transitionEndHandler);\n    }\n    this.transitionEndHandler = (e: TransitionEvent) => {\n      if (e.propertyName === 'width') {\n        this.isAnimating = false;\n        this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n        panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionEndHandler);\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = window.innerWidth < this.breakpoint;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = window.innerWidth < this.breakpoint;\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      return;\n    }\n    this.urlDerivedActiveId = deriveActiveIdFromUrl(this.currentUrl, this.getAllItems());\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    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 `collapsed`, emits `dsNavToggle`, optionally persists. */\n  private applyToggle(next: boolean) {\n    this.collapsed = next;\n    if (this.storageKey) {\n      try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private syncRovingIndex() {\n    const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n    this.rovingIndex = idx >= 0 ? idx : 0;\n  }\n\n  private handleItemKeyDown(e: KeyboardEvent, index: number) {\n    const total = this.getAllItems().length;\n    let next: number;\n    switch (e.key) {\n      case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n      case 'ArrowUp':   e.preventDefault(); next = (index - 1 + total) % total; break;\n      case 'Home':      e.preventDefault(); next = 0; break;\n      case 'End':       e.preventDefault(); next = total - 1; break;\n      default: return;\n    }\n    this.rovingIndex = next;\n    const items = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n    );\n    items[next]?.focus();\n  }\n\n  private checkScroll() {\n    const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n    if (!body) return;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleBodyScroll(e: Event) {\n    const body = e.target as HTMLElement;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    this.applyToggle(!this.collapsed);\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n      </span>,\n      <span class=\"panel-nav__item-label\">\n        <span class=\"panel-nav__item-label-text\">\n          <ds-text\n            as=\"span\"\n            variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n            color=\"inherit\"\n          >\n            {item.label}\n          </ds-text>\n        </span>\n      </span>,\n      item.dot && (\n        <ds-badge\n          class=\"panel-nav__item-dot\"\n          variant=\"dot\"\n          background=\"var(--_nav-bg)\"\n          label=\"\"\n          aria-hidden=\"true\"\n        />\n      ),\n    ];\n\n    const sharedProps = {\n      class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      title: collapsed ? item.label : undefined,\n      tabIndex: idx === this.rovingIndex ? 0 : -1,\n      onClick: () => this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n      onFocus: () => { this.rovingIndex = idx; },\n    };\n\n    const useAnchor = this.routerMode === 'anchor' && item.href;\n\n    return useAnchor\n      ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n      : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n  }\n\n  render() {\n    const 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      'panel-nav--dashboard': isDashboard,\n      'panel-nav--settings': !isDashboard,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--animating': this.isAnimating,\n      'panel-nav--at-bottom': this.atBottom,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav\n          class={navCls}\n          aria-label={isDashboardChrome ? 'Dashboard navigation' : 'Settings navigation'}\n        >\n\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn\"\n              onClick={() => this.handleToggle()}\n              aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n                  <path d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\" fill=\"currentColor\"/>\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div\n            class={{\n              'panel-nav__body': true,\n              'scroll-edge-fade': true,\n              'scroll-edge-fade--bottom': true,\n              'scroll-edge-fade--at-end': this.atBottom,\n            }}\n            onScroll={e => this.handleBodyScroll(e)}\n          >\n            {(() => {\n              let flatIdx = 0;\n              return this.parsedGroups.map(group => (\n                <div class=\"panel-nav__group\">\n                  {group.label && (\n                    <span class=\"panel-nav__group-label\">\n                      <span class=\"panel-nav__item-label-text\">\n                        <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                          {group.label}\n                        </ds-text>\n                      </span>\n                    </span>\n                  )}\n                  {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n                </div>\n              ));\n            })()}\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__footer-btn\"\n              title={isDashboardChrome ? 'Settings' : 'Dashboard'}\n              aria-label={isDashboardChrome ? 'Open settings' : 'Go to dashboard'}\n              onClick={() => this.handleFooterAction()}\n            >\n              <ds-icon name={isDashboardChrome ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n            </button>\n\n            {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}\n            <button\n              type=\"button\"\n              id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n              class=\"panel-nav__item panel-nav__footer-user\"\n              aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n              onClick={(e) => this.handleUserAction(e)}\n            >\n              <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n                <span class=\"panel-nav__item-label-text\">\n                  <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n                    {userName}\n                  </ds-text>\n                </span>\n              </span>\n              <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n                <span class=\"panel-nav__footer-icon-expanded\">\n                  <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n                </span>\n                <span class=\"panel-nav__footer-icon-collapsed\">\n                  <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n                  <span class=\"panel-nav__user-initial\">\n                    <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                      {userInitial}\n                    </ds-text>\n                  </span>\n                </span>\n              </span>\n            </button>\n          </div>\n\n        </nav>\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAIO,MAAMA,EAAsB,iBAE7B,SAAUC,EAAiBC,GAC/B,GAAIA,IAAS,aAAeA,IAAS,WAAY,OAAOA,EACxD,OAAOC,SACT,C,SAYgBC,EACdC,EACAC,EACAC,GAEA,MAAMC,EAAWP,EAAiBK,GAClC,GAAIE,EAAU,OAAOA,EAErB,MAAMC,SAGOC,WAAa,YAClBA,SAASC,gBAAgBC,aAAaZ,GACtC,KACR,MAAMa,EAAWZ,EAAiBQ,GAClC,GAAII,EAAU,OAAOA,EAErB,OAAOR,CACT,CAEM,SAAUS,EACdC,EACAC,GAEA,OAAOD,IAAkBC,CAC3B,CCzBM,SAAUC,EAAgBC,EAAcC,GAC5C,OAAOD,IAASC,GAAQD,EAAKE,WAAW,GAAGD,KAC7C,CAGM,SAAUE,EAAsBH,EAAcI,GAClD,IAAKJ,EAAM,MAAO,GAElB,IAAIK,EAAS,GACb,IAAIC,EAAU,EAEd,IAAK,MAAMC,KAAQH,EAAO,CACxB,IAAKG,EAAKN,KAAM,SAChB,GAAIF,EAAgBC,EAAMO,EAAKN,OAASM,EAAKN,KAAKO,OAASF,EAAS,CAClED,EAASE,EAAKE,GACdH,EAAUC,EAAKN,KAAKO,M,EAIxB,OAAOH,CACT,CAGM,SAAUK,EAAmBC,GACjC,OAAOA,EAAOC,QAAO,CAACC,EAAKC,IAAMD,EAAMC,EAAEV,MAAMI,QAAQ,EACzD,CAGM,SAAUO,EAAoBJ,GAClC,GAAIK,MAAMC,QAAQN,GAAS,OAAOA,EAClC,UAAWA,IAAW,SAAU,CAC9B,IACE,MAAMO,EAASC,KAAKC,MAAMT,GAC1B,OAAOK,MAAMC,QAAQC,GAAUA,EAAS,E,CACxC,MACA,MAAO,E,EAGX,MAAO,EACT,CAGM,SAAUG,EAAyBC,EAAetC,GACtD,GAAIsC,EAAM,OAAO,KACjB,GAAItC,IAAS,KAAM,OAAO,MAC1B,OAAOA,IAAS,OAClB,CAGM,SAAUuC,EACdC,EACAb,GAEA,OACED,EAAmBc,KAAkB,GACrCd,EAAmBK,EAAoBJ,IAAW,CAEtD,CCtDO,MAAMc,EAAgC,gCCxB7C,MAAMC,EAAoB,IAAM,s+CCAhC,MAAMC,EAAc,IAAM,8/b,MCyBbC,EAAQC,EAAA,MAAAD,UAAAE,EANrB,WAAAC,CAAAC,G,sVASmDC,KAAAC,SAA2B,YAGpED,KAAAE,sBAAiC,MAGjCF,KAAAtB,OAAmC,KAKnCsB,KAAAG,WAAiC,SAGjCH,KAAAI,SAAmB,GAIFJ,KAAAK,UAAqB,MAGtCL,KAAAM,WAAqB,EAIrBN,KAAAO,WAAqB,GAKrBP,KAAAQ,WAAqB,GAGrBR,KAAAS,SAAmB,GAGnBT,KAAAU,YAAsB,GAuBbV,KAAApC,cAAgC,YAChCoC,KAAAT,aAAgC,GAChCS,KAAAW,SAAW,MACXX,KAAAY,YAAc,MACdZ,KAAAa,YAAsB,EACtBb,KAAAc,eAA0B,MAC1Bd,KAAAe,mBAA6B,GAMtCf,KAAAgB,WAAa,MACbhB,KAAAiB,WAAa,EACbjB,KAAAkB,QAAU,MACVlB,KAAAmB,WAAa,EACbnB,KAAAoB,iBAAkC,KAIzBpB,KAAAqB,gBAAkB,KAkdpC,CA5cC,qBAAYC,GACV,OAAOtB,KAAKe,oBAAsBf,KAAKI,Q,CAGzC,kCAAYmB,GACV,OAAOnC,EACLY,KAAKE,sBACLF,KAAKwB,GAAG/D,aAAa,2B,CAMzB,iBAAAgE,GACEzB,KAAK0B,wB,CAIP,kBAAAC,GACE3B,KAAK4B,2BACL,GAAI5B,KAAKM,WAAa,EAAGN,KAAK6B,uB,CAIhC,cAAAC,CAAeC,GACb/B,KAAKT,aAAeT,EAAoBiD,GACxC/B,KAAKgC,kBACLhC,KAAKiC,mB,CAKP,gBAAAC,GACElC,KAAKgC,iB,CAIP,kBAAAG,GACEnC,KAAKiC,mB,CAIP,gBAAAG,CAAiBC,GACfrC,KAAKpC,cAAgByE,C,CAGvB,iBAAAC,GACEtC,KAAKpC,cAAgB2E,EAAqBvC,KAAKC,SAAUD,KAAKwB,GAAG/D,aAAa,cAC9E,GAAIuC,KAAKO,WAAY,CACnB,IACE,MAAMiC,EAASC,aAAaC,QAAQ1C,KAAKO,YACzC,GAAIiC,IAAW,KAAMxC,KAAKK,UAAYmC,IAAW,M,CACjD,MAAM,C,CAEVxC,KAAK8B,eAAe9B,KAAKtB,QACzBsB,KAAKiC,mB,CAGP,gBAAAU,GACE3C,KAAK4C,wBACL5C,KAAK6C,+BACL7C,KAAK8C,cACL,GAAI9C,KAAKM,WAAa,EAAGN,KAAK6B,uB,CAGhC,oBAAAkB,GACE/C,KAAK4B,2BACL5B,KAAKgD,wBACL,GAAIhD,KAAKiD,uBAAwB,CAC/BC,OAAOC,oBAAoB,YAAanD,KAAKiD,uB,CAE/C,GAAIjD,KAAKoD,qBAAsB,CAC7BF,OAAOC,oBAAoB,UAAWnD,KAAKoD,qB,EAIvC,sBAAA1B,GACN1B,KAAKY,YAAc,KACnBZ,KAAKqD,wBAAwBC,KAAK,CAAEC,OAAQ,cAC5C,MAAMC,EAAQxD,KAAKwB,GAAGiC,cAAc,cACpC,GAAIzD,KAAK0D,qBAAsB,CAC7BF,GAAOL,oBAAoB,gBAAiBnD,KAAK0D,qB,CAEnD1D,KAAK0D,qBAAwBC,IAC3B,GAAIA,EAAEC,eAAiB,QAAS,CAC9B5D,KAAKY,YAAc,MACnBZ,KAAK6D,sBAAsBP,KAAK,CAAEC,OAAQ,cAC1CC,GAAOL,oBAAoB,gBAAiBnD,KAAK0D,qB,GAGrDF,GAAOM,iBAAiB,gBAAiB9D,KAAK0D,qB,CAGxC,qBAAA7B,GACN7B,KAAKc,eAAiBoC,OAAOa,WAAa/D,KAAKM,WAC/CN,KAAKgE,eAAiB,IAAIC,gBAAe,KACvCjE,KAAKc,eAAiBoC,OAAOa,WAAa/D,KAAKM,UAAU,IAE3DN,KAAKgE,eAAeE,QAAQ3G,SAASC,gB,CAG/B,wBAAAoE,GACN5B,KAAKgE,gBAAgBG,aACrBnE,KAAKgE,eAAiBhH,S,CAKhB,iBAAAiF,GACN,IAAKjC,KAAKQ,WAAY,CACpBR,KAAKe,mBAAqB,GAC1B,M,CAEFf,KAAKe,mBAAqB7C,EAAsB8B,KAAKQ,WAAYR,KAAKoE,c,CAIhE,qBAAAxB,GACN,GAAIyB,EAA0BrE,KAAKpC,cAAeoC,KAAKC,UAAW,CAChED,KAAKpC,cAAgBoC,KAAKC,Q,CAG5B,GAAIX,EAA2BU,KAAKT,aAAcS,KAAKtB,QAAS,CAC9DsB,KAAK8B,eAAe9B,KAAKtB,O,MACpB,GAAIsB,KAAKQ,WAAY,CAC1BR,KAAKiC,mB,EAKD,4BAAAY,GACN,IAAIyB,EAAY3E,EAAS4E,sBACzB,MAAMC,EAAO,KACXxE,KAAK4C,wBACL,KAAM0B,EAAY,EAAG,CACnBG,sBAAsBD,E,GAG1BE,eAAeF,E,CAIT,WAAAG,CAAYC,GAClB5E,KAAKK,UAAYuE,EACjB,GAAI5E,KAAKO,WAAY,CACnB,IAAMkC,aAAaoC,QAAQ7E,KAAKO,WAAYuE,OAAOF,G,CAAU,MAAM,C,CAErE5E,KAAK+E,YAAYzB,KAAKsB,E,CAGhB,WAAAR,GACN,OAAOpE,KAAKT,aAAayF,SAAQnG,GAAKA,EAAEV,O,CAGlC,eAAA6D,GACN,MAAMiD,EAAMjF,KAAKoE,cAAcc,WAAUC,GAAKA,EAAE3G,KAAOwB,KAAKsB,oBAC5DtB,KAAKa,YAAcoE,GAAO,EAAIA,EAAM,C,CAG9B,iBAAAG,CAAkBzB,EAAkB0B,GAC1C,MAAMC,EAAQtF,KAAKoE,cAAc7F,OACjC,IAAIqG,EACJ,OAAQjB,EAAE4B,KACR,IAAK,YAAa5B,EAAE6B,iBAAkBZ,GAAQS,EAAQ,GAAKC,EAAO,MAClE,IAAK,UAAa3B,EAAE6B,iBAAkBZ,GAAQS,EAAQ,EAAIC,GAASA,EAAO,MAC1E,IAAK,OAAa3B,EAAE6B,iBAAkBZ,EAAO,EAAG,MAChD,IAAK,MAAajB,EAAE6B,iBAAkBZ,EAAOU,EAAQ,EAAG,MACxD,QAAS,OAEXtF,KAAKa,YAAc+D,EACnB,MAAMzG,EAAQY,MAAM0G,KAClBzF,KAAKwB,GAAGkE,iBAA8B,sCAExCvH,EAAMyG,IAAOe,O,CAGP,WAAA7C,GACN,MAAM8C,EAAO5F,KAAKwB,GAAGiC,cAAc,oBACnC,IAAKmC,EAAM,OACX,MAAMtB,EAAYsB,EAAKC,aAAeD,EAAKE,UAAYF,EAAKG,aAC5D/F,KAAKW,SAAW2D,EAAY,C,CAGtB,gBAAA0B,CAAiBrC,GACvB,MAAMiC,EAAOjC,EAAEsC,OACf,MAAM3B,EAAYsB,EAAKC,aAAeD,EAAKE,UAAYF,EAAKG,aAC5D/F,KAAKW,SAAW2D,EAAY,C,CAGtB,eAAA4B,CAAgB1H,GACtBwB,KAAKmG,YAAY7C,KAAK9E,E,CAGhB,YAAA4H,GACNpG,KAAK2E,aAAa3E,KAAKK,U,CAGjB,kBAAAgG,GACNrG,KAAKsG,kBAAkBhD,M,CAGjB,gBAAAiD,CAAiB5C,GACvB,MAAM6C,EAAS7C,EAAE8C,cACjBzG,KAAK0G,gBAAgBpD,KAAK,CAAEkD,U,CAGtB,qBAAAxD,GACN,GAAIhD,KAAKoB,mBAAqB,KAAM,CAClC8B,OAAOyD,aAAa3G,KAAKoB,kBACzBpB,KAAKoB,iBAAmB,I,EAIpB,4BAAAwF,GACN5G,KAAKgD,wBACLhD,KAAKoB,iBAAmB8B,OAAO2D,YAAW,KACxC7G,KAAKqB,gBAAkB,KACvBrB,KAAKoB,iBAAmB,IAAI,GAC3B,I,CAGG,4BAAA0F,GACN,GAAI9G,KAAKgB,WAAY,OACrBhB,KAAKgD,wBACLhD,KAAKqB,gBAAkB,K,CAGjB,2BAAA0F,CAA4BpD,GAClCA,EAAE6B,iBACF7B,EAAEqD,kBAEF,MAAMC,EAAejH,KAAKK,WAAaL,KAAKc,eAC5Cd,KAAKgB,WAAa,KAClBhB,KAAKiB,WAAa0C,EAAEuD,QACpBlH,KAAKkB,QAAU,MACflB,KAAKmB,WAAa,EAClBnB,KAAKgD,wBACLhD,KAAKqB,gBAAkB,MAEvB9D,SAASqI,KAAK/H,MAAMsJ,OAAS,YAC7B5J,SAASqI,KAAK/H,MAAMuJ,WAAa,OAEjC,MAAMC,EAAUC,IACd,MAAMC,EAASD,EAAGJ,QAAUlH,KAAKiB,WACjCjB,KAAKmB,WAAaqG,KAAKC,IAAIF,GAC3B,GAAIvH,KAAKkB,QAAS,OAClB,IAAK+F,GAAgBM,GAAS,EAAI,CAChCvH,KAAK2E,YAAY,MACjB3E,KAAKkB,QAAU,I,MACV,GAAI+F,GAAgBM,EAAS,EAAG,CACrCvH,KAAK2E,YAAY,OACjB3E,KAAKkB,QAAU,I,GAInB,MAAMwG,EAAO,KACX,IAAK1H,KAAKkB,SAAWlB,KAAKmB,WAAa,EAAG,CACxCnB,KAAK2E,aAAasC,E,CAEpBjH,KAAKgB,WAAa,MAClBhB,KAAKqB,gBAAkB,MACvB9D,SAASqI,KAAK/H,MAAMsJ,OAAS,GAC7B5J,SAASqI,KAAK/H,MAAMuJ,WAAa,GACjClE,OAAOC,oBAAoB,YAAakE,GACxCnE,OAAOC,oBAAoB,UAAWuE,GACtC1H,KAAKiD,uBAAyBjG,UAC9BgD,KAAKoD,qBAAuBpG,SAAS,EAGvCgD,KAAKiD,uBAAyBoE,EAC9BrH,KAAKoD,qBAAuBsE,EAC5BxE,OAAOY,iBAAiB,YAAauD,GACrCnE,OAAOY,iBAAiB,UAAW4D,E,CAG7B,aAAAC,CAAcrJ,EAAoB2G,EAAa5E,GACrD,MAAMuH,EAAWtJ,EAAKE,KAAOwB,KAAKsB,kBAElC,MAAMuG,EAAc,CAClBC,EAAA,QAAMC,MAAM,wBACVD,EAAA,WAASE,KAAM1J,EAAK2J,KAAMC,KAAK,KAAKC,MAAM,UAAUC,KAAM9J,EAAK8J,QAEjEN,EAAA,QAAMC,MAAM,yBACVD,EAAA,QAAMC,MAAM,8BACVD,EAAA,WACEO,GAAG,OACHC,QAASV,EAAW,4BAA8B,mBAClDO,MAAM,WAEL7J,EAAKiK,SAIZjK,EAAKkK,KACHV,EAAA,YACEC,MAAM,sBACNO,QAAQ,MACRG,WAAW,iBACXF,MAAM,GAAE,cACI,UAKlB,MAAMG,EAAc,CAClBX,MAAO,CAAE,kBAAmB,KAAM,0BAA2BH,GAC7D,eAAgBA,EAAY,OAAmB5K,UAC/C2L,MAAOtI,EAAY/B,EAAKiK,MAAQvL,UAChC4L,SAAU3D,IAAQjF,KAAKa,YAAc,GAAI,EACzCgI,QAAS,IAAM7I,KAAKkG,gBAAgB5H,EAAKE,IACzCsK,UAAYnF,GAAqB3D,KAAKoF,kBAAkBzB,EAAGsB,GAC3D8D,QAAS,KAAQ/I,KAAKa,YAAcoE,CAAG,GAGzC,MAAM+D,EAAYhJ,KAAKG,aAAe,UAAY7B,EAAKN,KAEvD,OAAOgL,EACHlB,EAAA,QAAOY,EAAa1K,KAAMM,EAAKN,MAAO6J,GACtCC,EAAA,aAAYY,EAAaO,KAAK,UAAUpB,E,CAG9C,MAAAqB,GACE,MAAMC,EAAcnJ,KAAKpC,cACzB,MAAMwL,EAAoBD,IAAgB,YAC1C,MAAME,EAAcrJ,KAAKC,WAAa,YACtC,MAAMI,EAAYL,KAAKK,WAAaL,KAAKc,eACzC,MAAML,SAAEA,EAAQC,YAAEA,GAAgBV,KAElC,MAAMsJ,EAAkC,CACtC,YAAa,KACb,uBAAwBD,EACxB,uBAAwBA,EACxB,uBAAwBhJ,EACxB,uBAAwBL,KAAKY,YAC7B,uBAAwBZ,KAAKW,UAG/B,OACEmH,EAACyB,EAAI,CAAAhE,IAAA,2CAAC1H,MAAO,CAAE2L,QAAS,QAASC,SAAU,aACzC3B,EAAA,OAAAvC,IAAA,2CACEwC,MAAOuB,EAAM,aACDF,EAAoB,uBAAyB,uBAIzDtB,EAAA,OAAAvC,IAAA,2CAAKwC,MAAM,qBACTD,EAAA,UAAAvC,IAAA,2CACE0D,KAAK,SACLlB,MAAM,wBACNc,QAAS,IAAM7I,KAAKoG,eAAc,aACtB/F,EAAY,oBAAsB,sBAAqB,gBACpDA,EAAY,QAAU,QAGrCyH,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,yBAAwB,cAAa,QAC/CD,EAAA,OAAAvC,IAAA,2CAAKwC,MAAM,oBAAoB2B,QAAQ,YAAYC,KAAK,OAAOC,MAAM,6BAA6BC,UAAU,QAAO,cAAa,QAC9H/B,EAAA,QAAAvC,IAAA,2CAAMuE,EAAE,qKAAqKH,KAAK,mBAItL7B,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,2BAA0B,cAAa,QACjDD,EAAA,WAAAvC,IAAA,2CACEyC,KAAM3H,EAAY,cAAgB,gBAClC6H,KAAK,KACLC,MAAM,eAOdL,EAAA,OAAAvC,IAAA,2CACEwC,MAAO,CACL,kBAAmB,KACnB,mBAAoB,KACpB,2BAA4B,KAC5B,2BAA4B/H,KAAKW,UAEnCoJ,SAAUpG,GAAK3D,KAAKgG,iBAAiBrC,IAEpC,MACC,IAAIqG,EAAU,EACd,OAAOhK,KAAKT,aAAa0K,KAAIC,GAC3BpC,EAAA,OAAKC,MAAM,oBACRmC,EAAM3B,OACLT,EAAA,QAAMC,MAAM,0BACVD,EAAA,QAAMC,MAAM,8BACVD,EAAA,WAASO,GAAG,OAAOC,QAAQ,wBAAwBH,MAAM,WACtD+B,EAAM3B,SAKd2B,EAAM/L,MAAM8L,KAAI3L,GAAQ0B,KAAK2H,cAAcrJ,EAAM0L,IAAW3J,OAGlE,EAhBA,IAoBHyH,EAAA,OAAAvC,IAAA,2CAAKwC,MAAM,qBACTD,EAAA,UAAAvC,IAAA,2CACE0D,KAAK,SACLlB,MAAM,wBACNY,MAAOS,EAAoB,WAAa,YAAW,aACvCA,EAAoB,gBAAkB,kBAClDP,QAAS,IAAM7I,KAAKqG,sBAEpByB,EAAA,WAAAvC,IAAA,2CAASyC,KAAMoB,EAAoB,OAAS,YAAalB,KAAK,KAAKC,MAAM,aAI3EL,EAAA,UAAAvC,IAAA,2CACE0D,KAAK,SACLzK,GAAIgB,EACJuI,MAAM,yCAAwC,aAClC1H,EAAY,SAASI,IAAa,iBAAiBA,IAC/DoI,QAAUlF,GAAM3D,KAAKuG,iBAAiB5C,IAEtCmE,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,sDACVD,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,8BACVD,EAAA,WAAAvC,IAAA,2CAAS8C,GAAG,OAAOC,QAAQ,4BAA4BH,MAAM,WAC1D1H,KAIPqH,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,mDAAkD,cAAa,QACzED,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,mCACVD,EAAA,WAAAvC,IAAA,2CAASyC,KAAK,gBAAgBE,KAAK,KAAKC,MAAM,aAEhDL,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,oCACVD,EAAA,WAAAvC,IAAA,2CAASyC,KAAK,SAASE,KAAK,KAAKC,MAAM,YACvCL,EAAA,QAAAvC,IAAA,2CAAMwC,MAAM,2BACVD,EAAA,WAAAvC,IAAA,2CAAS8C,GAAG,OAAOC,QAAQ,wBAAwBH,MAAM,WACtDzH,UAWbV,KAAKc,gBACLgH,EAAA,OAAAvC,IAAA,2CACEwC,MAAO,CACL,2BAA4B,KAC5B,oCAAqC/H,KAAKqB,iBAE5C8I,aAAc,IAAMnK,KAAK4G,+BACzBwD,aAAc,IAAMpK,KAAK8G,+BACzBuD,YAAc1G,GAAkB3D,KAAK+G,4BAA4BpD,GAAE,cACvD,S,gmCA1cEhE,EAAA4E,sBAAwB,E","ignoreList":[]}
+{"version":3,"names":["NAV_STYLE_HINT_ATTR","readNavStyleAttr","attr","undefined","resolveNavChromeStyle","styleProp","hostAttr","docHint","fromHost","hint","document","documentElement","getAttribute","fromHint","shouldResyncNavChromeStyle","renderedStyle","style","hrefMatchesPath","path","href","startsWith","deriveActiveIdFromUrl","items","bestId","bestLen","item","length","id","countPanelNavItems","groups","reduce","sum","g","parsePanelNavGroups","Array","isArray","parsed","JSON","parse","resolvePanelNavDisableVt","prop","shouldResyncPanelNavGroups","parsedGroups","PANEL_NAV_USER_MENU_ANCHOR_ID","scrollEdgeFadeCss","panelNavCss","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","disableViewTransition","routerMode","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","effectiveDisableViewTransition","el","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","syncRovingIndex","syncActiveFromUrl","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","componentWillLoad","resolvePanelNavStyle","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","checkScroll","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","dsChromeTransitionStart","emit","source","panel","querySelector","transitionEndHandler","e","propertyName","dsChromeTransitionEnd","addEventListener","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","getAllItems","shouldResyncPanelNavStyle","remaining","HOST_PROP_SYNC_BUDGET","tick","requestAnimationFrame","queueMicrotask","applyToggle","next","setItem","String","dsNavToggle","flatMap","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","from","querySelectorAll","focus","body","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","handleUserAction","anchor","currentTarget","dsNavUserAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","cursor","userSelect","onMove","ev","deltaX","Math","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","variant","label","dot","background","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","useAnchor","type","render","chromeStyle","isDashboardChrome","isDashboard","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","onScroll","flatIdx","map","group","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/nav/nav-chrome.ts","src/wc/components/PanelNav/panel-nav-utils.ts","src/wc/components/PanelNav/panel-nav-types.ts","src/wc/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":["/** 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 { PanelNavGroup, PanelNavItem } from './panel-nav-types';\nimport {\n  NAV_STYLE_HINT_ATTR,\n  clearNavStyleHint,\n  readNavStyleAttr,\n  resolveNavChromeStyle,\n  setNavStyleHint,\n  shouldResyncNavChromeStyle,\n} from '../../nav/nav-chrome';\n\nexport type { NavChromeStyle } from '../../nav/nav-chrome';\nexport {\n  NAV_STYLE_HINT_ATTR,\n  readNavStyleAttr,\n  setNavStyleHint,\n  clearNavStyleHint,\n  resolveNavChromeStyle as resolvePanelNavStyle,\n  shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,\n};\n\n/** Whether `path` matches `href` at a segment boundary (exact or child path). */\nexport function hrefMatchesPath(path: string, href: string): boolean {\n  return path === href || path.startsWith(`${href}/`);\n}\n\n/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */\nexport function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {\n  if (!path) return '';\n\n  let bestId = '';\n  let bestLen = 0;\n\n  for (const item of items) {\n    if (!item.href) continue;\n    if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {\n      bestId = item.id;\n      bestLen = item.href.length;\n    }\n  }\n\n  return bestId;\n}\n\n/** Total nav item count across all groups. */\nexport function countPanelNavItems(groups: PanelNavGroup[]): number {\n  return groups.reduce((sum, g) => sum + g.items.length, 0);\n}\n\n/** Parse `groups` from either a JSON attribute string or a JS property array. */\nexport function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {\n  if (Array.isArray(groups)) return groups;\n  if (typeof groups === 'string') {\n    try {\n      const parsed = JSON.parse(groups);\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n  return [];\n}\n\n/** Resolve whether VT is disabled from prop and/or host attribute. */\nexport function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {\n  if (prop) return true;\n  if (attr === null) return false;\n  return attr !== 'false';\n}\n\n/** True when host `groups` has items but internal parsed state is still empty. */\nexport function shouldResyncPanelNavGroups(\n  parsedGroups: PanelNavGroup[],\n  groups: string | unknown,\n): boolean {\n  return (\n    countPanelNavItems(parsedGroups) === 0 &&\n    countPanelNavItems(parsePanelNavGroups(groups)) > 0\n  );\n}\n","import type { NavChromeStyle } from '../../nav/nav-chrome';\n\nexport type { NavChromeStyle };\nexport type PanelNavRouterMode = 'anchor' | 'event';\n\nexport interface PanelNavItem {\n  id: string;\n  icon: string;\n  label: string;\n  /** Show a notification dot badge on the item */\n  dot?: boolean;\n  flag?: boolean;\n  /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.\n   *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */\n  href?: string;\n}\n\nexport interface PanelNavGroup {\n  id?: string;\n  label?: string;\n  items: PanelNavItem[];\n}\n\n/** Stable `id` on the footer user button — use with `ds-menu` `anchor-id`. */\nexport const PANEL_NAV_USER_MENU_ANCHOR_ID = 'ds-panel-nav-user-menu-anchor';\n\n/** Detail for `dsNavUserAction` — anchor element for an external `ds-menu`. */\nexport interface PanelNavUserActionDetail {\n  anchor: HTMLElement;\n}\n","/**\n * Scroll-edge alpha fade — apply to overflow scroll containers.\n * Pair with `.scroll-edge-fade--at-end` when the relevant edge is flush (no fade).\n *\n * @see scroll-edge-fade.ts for programmatic mask helpers.\n */\n\n.scroll-edge-fade {\n  --ds-scroll-edge-fade-size: var(--dimension-size-600);\n}\n\n.scroll-edge-fade--top {\n  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);\n  mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--bottom {\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--left {\n  -webkit-mask-image: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--right {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to left,\n    #000 0,\n    #000 calc(100% - var(--ds-scroll-edge-fade-size)),\n    transparent 100%\n  );\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--at-end {\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n","/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:              var(--dimension-panel-width-2xs);\n  --_nav-width-collapsed:    var(--dimension-size-600);\n  --_nav-item-height:        var(--dimension-size-400, 32px);\n  --_nav-padding-x:          var(--dimension-space-100, 8px);\n  --_nav-padding-y:          var(--dimension-space-100, 8px);\n  /* gear button outer width = padding*2 + icon */\n  --_nav-footer-btn-w:       calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n  /* ─ Motion ─ */\n  /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n     *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n  --_nav-speed:               var(--ds-panel-nav-speed, 1);\n  --_nav-expand-dur:          calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-expand-motion:       var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-dur:      calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-motion:   var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n  --_nav-label-fade-out-dur:  calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n  --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n  /* ─ Colours – 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}\n\n/* ── Default chrome overrides ────────────────────────────────────────────── */\n\n/* Shell-owned chrome (bg + wash +/or grid) — panel is a transparent frame. */\n:host-context(ds-app-shell[gradient]) .panel-nav,\n:host-context(ds-app-shell[grid]) .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}\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, 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  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600, 48px);\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__header-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default; 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: 1;\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; opacity swap matches hover bg (instant) */\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.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { opacity: 1; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n  /* Typography via ds-text (text-caption-emphasis) */\n  display: flex;\n  align-items: center;\n  text-transform: uppercase;\n  color: var(--_nav-fg-secondary);\n  user-select: none;\n  height: var(--dimension-size-300, 24px);\n  line-height: var(--typography-lineheight-xs, 12px);\n  padding: 0 var(--dimension-space-075, 6px);\n  white-space: nowrap;\n  overflow: hidden;\n  max-height: var(--dimension-size-300, 24px);\n  opacity: 1;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    max-height var(--_nav-label-fade-motion) 0ms,\n    padding var(--_nav-label-fade-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__item:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  line-height: var(--typography-lineheight-md, 20px);\n  opacity: 1;\n  /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n  mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n  mask-size: 200% 100%;\n  -webkit-mask-size: 200% 100%;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n  transition:\n    opacity var(--_nav-label-fade-motion) 0ms,\n    mask-position var(--_nav-label-fade-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot — single element, moves between positions ──────── */\n\n.panel-nav__item-dot {\n  position: absolute;\n  right: 13px;\n  top: 13px;\n  pointer-events: none;\n  transition:\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n  right: var(--dimension-space-075);\n  top: var(--dimension-space-075);\n}\n\n.panel-nav--animating .panel-nav__item-label {\n  text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n  opacity: 0;\n  pointer-events: none;\n  text-overflow: clip;\n  mask-position: 100% 0;\n  -webkit-mask-position: 100% 0;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    mask-position var(--_nav-label-fade-out-motion) 0ms,\n    -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n  opacity: 0;\n  max-height: 0;\n  padding: 0 var(--dimension-space-075, 6px);\n  pointer-events: none;\n  transition:\n    opacity var(--_nav-label-fade-out-motion) 0ms,\n    max-height var(--_nav-label-fade-out-motion) 0ms,\n    padding var(--_nav-label-fade-out-motion) 0ms,\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  position: relative;\n  flex-shrink: 0;\n  /* single row: padding*2 + item */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n  transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n  /* two rows: padding*2 + item*2 + gap */\n  height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  left: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  box-sizing: border-box;\n  background: transparent;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__footer-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.panel-nav__footer-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__footer-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__footer-btn:focus-visible { outline: none; }\n.panel-nav__footer-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n.panel-nav__footer-btn ds-icon {\n  position: relative;\n  z-index: 1;\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n  position: absolute;\n  /* row position: right of gear button */\n  left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n  right: var(--_nav-padding-x);\n  top: var(--_nav-padding-y);\n  width: auto;\n  min-width: 0;\n  transition:\n    left var(--_nav-expand-motion),\n    right var(--_nav-expand-motion),\n    top var(--_nav-expand-motion),\n    color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n  /* column position: full-width row below gear */\n  left: var(--_nav-padding-x);\n  right: var(--_nav-padding-x);\n  top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n  text-align: right;\n  position: absolute;\n  left: var(--dimension-space-075, 6px);\n  right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n  top: 50%;\n  transform: translateY(-50%);\n  flex: none;\n  height: var(--typography-lineheight-md, 20px);\n  mask-image: none;\n  -webkit-mask-image: none;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n  opacity: 0;\n  pointer-events: none;\n  mask-position: 0% 0;\n  -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n  position: absolute;\n  left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n  top: 0;\n  bottom: 0;\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n  left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n  opacity: 0;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n  opacity: 1;\n  transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n.panel-nav__user-initial {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_nav-fg-secondary);\n  text-transform: uppercase;\n  line-height: 1;\n  pointer-events: none;\n  transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n/* 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  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    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    transition-delay: 0.01ms !important;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n  deriveActiveIdFromUrl,\n  parsePanelNavGroups,\n  resolvePanelNavDisableVt,\n  resolvePanelNavStyle,\n  shouldResyncPanelNavGroups,\n  shouldResyncPanelNavStyle,\n} from './panel-nav-utils';\nimport {\n  PANEL_NAV_USER_MENU_ANCHOR_ID,\n  type PanelNavGroup,\n  type PanelNavItem,\n  type PanelNavRouterMode,\n  type PanelNavUserActionDetail,\n} from './panel-nav-types';\n\n@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  /** 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  /** How items with `href` render:\n   *  - `anchor` (default): native `<a href>` — works with routers that intercept anchors.\n   *  - `event`: always `<button>`; host handles navigation via `dsNavSelect`. */\n  @Prop() routerMode: PanelNavRouterMode = 'anchor';\n\n  /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state.\n   *  Set `storageKey` to persist across reloads. `dsNavToggle` still fires on change. */\n  @Prop({ mutable: true }) collapsed: boolean = false;\n\n  /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */\n  @Prop() breakpoint: number = 0;\n\n  /** `localStorage` key used to persist the collapsed state across page loads.\n   *  When set, collapsed state is restored on mount and written on each toggle. */\n  @Prop() storageKey: string = '';\n\n  /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n   *  When set the component derives the active item by matching item `href` values\n   *  against this string (longest segment-boundary prefix wins), overriding `activeId`. */\n  @Prop() currentUrl: string = '';\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Bubbling lifecycle — `ds-app-shell` 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 atBottom = false;\n  @State() private isAnimating = false;\n  @State() private rovingIndex: number = 0;\n  @State() private viewportNarrow: boolean = false;\n  @State() private urlDerivedActiveId: string = '';\n\n  private transitionEndHandler?: (e: TransitionEvent) => void;\n  private resizeObserver?: ResizeObserver;\n\n  // Drag-to-resize state (not @State — no re-render needed)\n  private isDragging = false;\n  private dragStartX = 0;\n  private didSnap = false;\n  private lastDeltaX = 0;\n  private edgeOverlayTimer: number | null = null;\n  private globalMouseMoveHandler?: (e: MouseEvent) => void;\n  private globalMouseUpHandler?: () => void;\n\n  @State() private showEdgeOverlay = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n\n  /** The ID that should be treated as active. `currentUrl` matching takes precedence\n   *  over `activeId` when both are present. */\n  private get effectiveActiveId(): string {\n    return this.urlDerivedActiveId || this.activeId;\n  }\n\n  private get effectiveDisableViewTransition(): boolean {\n    return resolvePanelNavDisableVt(\n      this.disableViewTransition,\n      this.el.getAttribute('disable-view-transition'),\n    );\n  }\n\n  @Watch('collapsed')\n  @Watch('viewportNarrow')\n  onCollapsedChange() {\n    this.startCollapseAnimation();\n  }\n\n  @Watch('breakpoint')\n  onBreakpointChange() {\n    this.disconnectResizeObserver();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  @Watch('groups')\n  onGroupsChange(val: string | PanelNavGroup[]) {\n    this.parsedGroups = parsePanelNavGroups(val);\n    this.syncRovingIndex();\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('activeId')\n  @Watch('urlDerivedActiveId')\n  onActiveIdChange() {\n    this.syncRovingIndex();\n  }\n\n  @Watch('currentUrl')\n  onCurrentUrlChange() {\n    this.syncActiveFromUrl();\n  }\n\n  @Watch('navStyle')\n  onNavStyleChange(newVal: NavChromeStyle) {\n    this.renderedStyle = newVal;\n  }\n\n  componentWillLoad() {\n    this.renderedStyle = resolvePanelNavStyle(this.navStyle, this.el.getAttribute('nav-style'));\n    if (this.storageKey) {\n      try {\n        const stored = localStorage.getItem(this.storageKey);\n        if (stored !== null) this.collapsed = stored === 'true';\n      } catch { /* localStorage unavailable */ }\n    }\n    this.onGroupsChange(this.groups);\n    this.syncActiveFromUrl();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.checkScroll();\n    if (this.breakpoint > 0) this.connectResizeObserver();\n  }\n\n  disconnectedCallback() {\n    this.disconnectResizeObserver();\n    this.clearEdgeOverlayTimer();\n    if (this.globalMouseMoveHandler) {\n      window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n    }\n    if (this.globalMouseUpHandler) {\n      window.removeEventListener('mouseup', this.globalMouseUpHandler);\n    }\n  }\n\n  private startCollapseAnimation() {\n    this.isAnimating = true;\n    this.dsChromeTransitionStart.emit({ source: 'panel-nav' });\n    const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n    if (this.transitionEndHandler) {\n      panel?.removeEventListener('transitionend', this.transitionEndHandler);\n    }\n    this.transitionEndHandler = (e: TransitionEvent) => {\n      if (e.propertyName === 'width') {\n        this.isAnimating = false;\n        this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n        panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n      }\n    };\n    panel?.addEventListener('transitionend', this.transitionEndHandler);\n  }\n\n  private connectResizeObserver() {\n    this.viewportNarrow = window.innerWidth < this.breakpoint;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.viewportNarrow = window.innerWidth < this.breakpoint;\n    });\n    this.resizeObserver.observe(document.documentElement);\n  }\n\n  private disconnectResizeObserver() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  /** Derive active ID from the current URL by matching item `href` values.\n   *  Uses longest segment-boundary prefix match. */\n  private syncActiveFromUrl() {\n    if (!this.currentUrl) {\n      this.urlDerivedActiveId = '';\n      return;\n    }\n    this.urlDerivedActiveId = deriveActiveIdFromUrl(this.currentUrl, this.getAllItems());\n  }\n\n  /** Re-parse props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    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 `collapsed`, emits `dsNavToggle`, optionally persists. */\n  private applyToggle(next: boolean) {\n    this.collapsed = next;\n    if (this.storageKey) {\n      try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n    }\n    this.dsNavToggle.emit(next);\n  }\n\n  private getAllItems(): PanelNavItem[] {\n    return this.parsedGroups.flatMap(g => g.items);\n  }\n\n  private syncRovingIndex() {\n    const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n    this.rovingIndex = idx >= 0 ? idx : 0;\n  }\n\n  private handleItemKeyDown(e: KeyboardEvent, index: number) {\n    const total = this.getAllItems().length;\n    let next: number;\n    switch (e.key) {\n      case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n      case 'ArrowUp':   e.preventDefault(); next = (index - 1 + total) % total; break;\n      case 'Home':      e.preventDefault(); next = 0; break;\n      case 'End':       e.preventDefault(); next = total - 1; break;\n      default: return;\n    }\n    this.rovingIndex = next;\n    const items = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n    );\n    items[next]?.focus();\n  }\n\n  private checkScroll() {\n    const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n    if (!body) return;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleBodyScroll(e: Event) {\n    const body = e.target as HTMLElement;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    this.applyToggle(!this.collapsed);\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  private handleUserAction(e: MouseEvent) {\n    const anchor = e.currentTarget as HTMLElement;\n    this.dsNavUserAction.emit({ anchor });\n  }\n\n  private clearEdgeOverlayTimer() {\n    if (this.edgeOverlayTimer !== null) {\n      window.clearTimeout(this.edgeOverlayTimer);\n      this.edgeOverlayTimer = null;\n    }\n  }\n\n  private handleResizeHandleMouseEnter() {\n    this.clearEdgeOverlayTimer();\n    this.edgeOverlayTimer = window.setTimeout(() => {\n      this.showEdgeOverlay = true;\n      this.edgeOverlayTimer = null;\n    }, 500);\n  }\n\n  private handleResizeHandleMouseLeave() {\n    if (this.isDragging) return;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n  }\n\n  private handleResizeHandleMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const wasCollapsed = this.collapsed || this.viewportNarrow;\n    this.isDragging = true;\n    this.dragStartX = e.clientX;\n    this.didSnap = false;\n    this.lastDeltaX = 0;\n    this.clearEdgeOverlayTimer();\n    this.showEdgeOverlay = false;\n\n    document.body.style.cursor = 'ew-resize';\n    document.body.style.userSelect = 'none';\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      this.lastDeltaX = Math.abs(deltaX);\n      if (this.didSnap) return;\n      if (!wasCollapsed && deltaX < -8) {\n        this.applyToggle(true);\n        this.didSnap = true;\n      } else if (wasCollapsed && deltaX > 8) {\n        this.applyToggle(false);\n        this.didSnap = true;\n      }\n    };\n\n    const onUp = () => {\n      if (!this.didSnap && this.lastDeltaX < 3) {\n        this.applyToggle(!wasCollapsed);\n      }\n      this.isDragging = false;\n      this.showEdgeOverlay = false;\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n      this.globalMouseMoveHandler = undefined;\n      this.globalMouseUpHandler = undefined;\n    };\n\n    this.globalMouseMoveHandler = onMove;\n    this.globalMouseUpHandler = onUp;\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp);\n  }\n\n  private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n    const isActive = item.id === this.effectiveActiveId;\n\n    const itemContent = [\n      <span class=\"panel-nav__item-icon\">\n        <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n      </span>,\n      <span class=\"panel-nav__item-label\">\n        <span class=\"panel-nav__item-label-text\">\n          <ds-text\n            as=\"span\"\n            variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n            color=\"inherit\"\n          >\n            {item.label}\n          </ds-text>\n        </span>\n      </span>,\n      item.dot && (\n        <ds-badge\n          class=\"panel-nav__item-dot\"\n          variant=\"dot\"\n          background=\"var(--_nav-bg)\"\n          label=\"\"\n          aria-hidden=\"true\"\n        />\n      ),\n    ];\n\n    const sharedProps = {\n      class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n      'aria-current': isActive ? ('page' as const) : undefined,\n      title: collapsed ? item.label : undefined,\n      tabIndex: idx === this.rovingIndex ? 0 : -1,\n      onClick: () => this.handleItemClick(item.id),\n      onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n      onFocus: () => { this.rovingIndex = idx; },\n    };\n\n    const useAnchor = this.routerMode === 'anchor' && item.href;\n\n    return useAnchor\n      ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n      : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n  }\n\n  render() {\n    const 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      'panel-nav--dashboard': isDashboard,\n      'panel-nav--settings': !isDashboard,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--animating': this.isAnimating,\n      'panel-nav--at-bottom': this.atBottom,\n    };\n\n    return (\n      <Host style={{ display: 'block', position: 'relative' }}>\n        <nav\n          class={navCls}\n          aria-label={isDashboardChrome ? 'Dashboard navigation' : 'Settings navigation'}\n        >\n\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn\"\n              onClick={() => this.handleToggle()}\n              aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n              aria-expanded={collapsed ? 'false' : 'true'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n                  <path d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\" fill=\"currentColor\"/>\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div\n            class={{\n              'panel-nav__body': true,\n              'scroll-edge-fade': true,\n              'scroll-edge-fade--bottom': true,\n              'scroll-edge-fade--at-end': this.atBottom,\n            }}\n            onScroll={e => this.handleBodyScroll(e)}\n          >\n            {(() => {\n              let flatIdx = 0;\n              return this.parsedGroups.map(group => (\n                <div class=\"panel-nav__group\">\n                  {group.label && (\n                    <span class=\"panel-nav__group-label\">\n                      <span class=\"panel-nav__item-label-text\">\n                        <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                          {group.label}\n                        </ds-text>\n                      </span>\n                    </span>\n                  )}\n                  {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n                </div>\n              ));\n            })()}\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__footer-btn\"\n              title={isDashboardChrome ? 'Settings' : 'Dashboard'}\n              aria-label={isDashboardChrome ? 'Open settings' : 'Go to dashboard'}\n              onClick={() => this.handleFooterAction()}\n            >\n              <ds-icon name={isDashboardChrome ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n            </button>\n\n            {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}\n            <button\n              type=\"button\"\n              id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n              class=\"panel-nav__item panel-nav__footer-user\"\n              aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n              onClick={(e) => this.handleUserAction(e)}\n            >\n              <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n                <span class=\"panel-nav__item-label-text\">\n                  <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n                    {userName}\n                  </ds-text>\n                </span>\n              </span>\n              <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n                <span class=\"panel-nav__footer-icon-expanded\">\n                  <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n                </span>\n                <span class=\"panel-nav__footer-icon-collapsed\">\n                  <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n                  <span class=\"panel-nav__user-initial\">\n                    <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                      {userInitial}\n                    </ds-text>\n                  </span>\n                </span>\n              </span>\n            </button>\n          </div>\n\n        </nav>\n\n        {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n        {!this.viewportNarrow && (\n          <div\n            class={{\n              'panel-nav__resize-handle': true,\n              'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n            }}\n            onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n            onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n            onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n            aria-hidden=\"true\"\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-panel-tools.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as o,a,t as i}from"./index.js";import{p as n}from"./p-Dl1GvZQ2.js";import{d as l}from"./p-CiEc8Nwx.js";import{d as r}from"./p-CCZFMcLe.js";import{d}from"./p-DqBCQRRd.js";const c="search";const h={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function p(e,s){if(s){return n(s,[])}return e??[]}const f=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=!this.isRailSelected(e);if(s){this.open=true;this.activeTool=e}else{this.open=false}this.dsToolChange.emit({id:e,selected:s})}}get railItems(){return p(this.items,this.itemsJson)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return h[this.activeTool]??""}renderRailAction(e){return o("ds-bar-nav-action",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,selected:this.isRailSelected(e.id),dot:e.dot??false,inactive:e.inactive,"aria-label":e.ariaLabel??h[e.id],onDsChange:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const s=this.railItems;const t=s.find((e=>e.id===c));const i=s.filter((e=>e.id!==c));const n=this.isDrawerPresent();return o(a,{key:"d3c5373034a2b2ccc0a0709e2e61ec57a742b30a",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing"},role:"complementary","aria-label":"Tools"},o("div",{key:"d85c8c789ddee4feb74a4244fcfd935f728e5329",class:"panel-tools__layout"},o("div",{key:"6966b1d22836744f5cfde8e8162706090198dd62",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true"},o("div",{key:"c1dd1adb653161e86ec0bcb1bc5b4e077d352486",class:"panel-tools__drawer-surface"},o("header",{key:"44efbcbdf3997309713e187f0dfff228fd02875e",class:"panel-tools__header"},o("span",{key:"603b95f799170746a67fdfd5a210b8d10d3ee91c",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"3a14b81d263e122e8f7aca8620982c2c6e42f53c",class:"panel-tools__body"},o("div",{key:"e4d01235c9d0cda013d57d94bd60875dd0da3a8b",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"3b9b957f9f94cc666dad45fd875a95420bea77f9",name:"search"})),o("div",{key:"be533e87563c79b78c91fec17a7120aa4439845e",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"40529a7cf1af5fb679ac69decc58e3c7d06c3863",name:"messages"})),o("div",{key:"5f40d1977cbe43f128e491c18221470b793551f0",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"57f8f0e5ad102a84c2084da78881576863eb3cb1",name:"stacks"})),o("div",{key:"6373116968b9b28a52a460c037f00ad7169c497a",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"aef7ca5246031e7f523e7355d3a5b733d456ff45",name:"activity"})),o("div",{key:"78451a05e47f86a5121ace44aeb950671e0ecf07",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"9bf0310b820e85f51d232e79b9ea2f7e427fb1fc",name:"agents"}))))),o("nav",{key:"0cc767857ce24c2a0c4e4b2cbd6faabb32699ced",class:"panel-tools__rail","aria-label":"Tool shortcuts"},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t)):null,o("div",{key:"7ce8b3a37209532611b2239b493a50216c6f3ccf",class:"panel-tools__rail-body"},i.map((e=>this.renderRailAction(e)))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return f()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-bar-nav-action","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),m)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-bar-nav-action":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break}}))}b();const g=m;const v=b;export{g as DsPanelTools,v as defineCustomElement};
+import{p as e,H as s,c as o,h as t,a,t as i}from"./index.js";import{p as l}from"./p-Dl1GvZQ2.js";import{d as n}from"./p-CiEc8Nwx.js";import{d as r}from"./p-CCZFMcLe.js";import{d}from"./p-DqBCQRRd.js";const c="search";const p={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function h(e,s){if(s){return l(s,[])}return e??[]}function f(e,s){return!e&&s==="idle"}const m=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=o(this,"dsToolChange");this.dsChromeTransitionStart=o(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=o(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=!this.isRailSelected(e);if(s){this.open=true;this.activeTool=e}else{this.open=false}this.dsToolChange.emit({id:e,selected:s})}}get railItems(){return h(this.items,this.itemsJson)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return p[this.activeTool]??""}renderRailAction(e){return t("ds-bar-nav-action",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,selected:this.isRailSelected(e.id),dot:e.dot??false,inactive:e.inactive,"aria-label":e.ariaLabel??p[e.id],onDsChange:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const s=this.railItems;const o=s.find((e=>e.id===c));const i=s.filter((e=>e.id!==c));const l=this.isDrawerPresent();const n=f(this.open,this.motion);return t(a,{key:"3359add6059bfec442b6ff85cdcced1a8b2038d1",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":n},role:"complementary","aria-label":"Tools"},t("div",{key:"6c815a765578ca3d52d7818d3580cf38774446cc",class:"panel-tools__layout"},t("div",{key:"b0250a75f4ac645cc30b74d4b25d382719971b2f",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":l},"aria-hidden":l?null:"true"},t("div",{key:"5d958c0796273301fa0bac9dfe364ef8975f3c5b",class:"panel-tools__drawer-surface"},t("header",{key:"b18e7494c619b5f7212be9218023efca54c62ca7",class:"panel-tools__header"},t("span",{key:"957dfdd0dec696b3366e62d8d9f135f9d6f5f4a2",class:"panel-tools__title text-body-medium-emphasis"},e)),t("div",{key:"c173830d0226975cb95ecc22992dd0d3b17edc3d",class:"panel-tools__body"},t("div",{key:"3b5d3dfc7b96dd62578da34d233848edeaf473b3",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},t("slot",{key:"23cb69264669e69a5d31afeae9df08cf24dde050",name:"search"})),t("div",{key:"099ea6aade2d9647b6d1e3b3d370732320d9b10e",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},t("slot",{key:"05a9f57f047fa1effa6e300237c671aa3946cbda",name:"messages"})),t("div",{key:"1505c00a7f9d2cc4d058169f6b47586ffb4d7204",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},t("slot",{key:"a8f6826f5f47470cd910cdc0a03932d19b0e0e2b",name:"stacks"})),t("div",{key:"090111d7e451144bb13f916afdbb979ee43c36df",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},t("slot",{key:"3044e860002177150acb4389589d7a3234740a17",name:"activity"})),t("div",{key:"1951cfe74176b4a7db8c62a7045e32f75c98755d",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},t("slot",{key:"5c8eda79a06e0c2f3e06e380fc5b8dfc07ed68c1",name:"agents"}))))),t("nav",{key:"4b9286f275f7dadee02368d8b0db80253dedfc5f",class:"panel-tools__rail","aria-label":"Tool shortcuts"},o?t("div",{class:"panel-tools__rail-header"},this.renderRailAction(o)):null,t("div",{key:"7ce3ceb4221688687e77537d6fad3173f1eb0a57",class:"panel-tools__rail-body"},i.map((e=>this.renderRailAction(e)))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return m()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-bar-nav-action","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-badge":if(!customElements.get(i(e))){n()}break;case"ds-bar-nav-action":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break}}))}b();const _=g;const v=b;export{_ as DsPanelTools,v as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map