npm - @ds-mo/ui - Versions diffs - 2.13.0 → 2.13.1 - Mend

@ds-mo/ui 2.13.0 → 2.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/.build-stamp +1 -1
package/dist/components/ds-panel-nav.js +1 -1
package/dist/components/ds-panel-nav.js.map +1 -1
package/dist/components/ds-panel-tools.js +1 -1
package/dist/components/ds-tooltip.js +1 -1
package/dist/components/p-CDHRJqea.js +2 -0
package/dist/components/p-CDHRJqea.js.map +1 -0
package/dist/types/components/Tooltip/Tooltip.d.ts +4 -0
package/dist/types/components.d.ts +6 -0
package/package.json +1 -1
package/src/wc/components/PanelNav/PanelNav.tsx +10 -9
package/src/wc/components/Tooltip/Tooltip.tsx +12 -0
package/src/wc/components.d.ts +6 -0
package/dist/components/p-DohXlNCJ.js +0 -2
package/dist/components/p-DohXlNCJ.js.map +0 -1

package/dist/.build-stamp CHANGED Viewed

	@@ -1 +1 @@
1	- ~~1783638871905~~
1	+ 1783650179193

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

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as a,h as i,a as t,t as s}from"./index.js";import{d as o}from"./p-EK1hOP19.js";import{d as r}from"./p-CuRjYmBk.js";import{d as l}from"./p-B82KZX9D.js";import{d}from"./p-CtwNUCnp.js";import{d as c}from"./p-DohXlNCJ.js";import{a as v}from"./p-B_g8X0eh.js";function p(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:i}=e;if(i===true){a["scroll-edge-fade--at-end"]=true}else if(i&&typeof i==="object"){const e=n.every((e=>i[e]));if(e){a["scroll-edge-fade--at-end"]=true}}return a}const h={side:"right",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:v.space050};const f="data-nav-style";function u(e){if(e==="dashboard"||e==="settings")return e;return undefined}function m(e,n,a){const i=u(n);if(i)return i;const t=typeof document!=="undefined"?document.documentElement.getAttribute(f):null;const s=u(t);if(s)return s;return e}function g(e,n){return e!==n}function b(e,n){return e===n||e.startsWith(`${n}/`)}function _(e,n){if(!e)return"";let a="";let i=0;for(const t of n){if(!t.href)continue;if(b(e,t.href)&&t.href.length>i){a=t.id;i=t.href.length}}return a}function y(e){return e.reduce(((e,n)=>e+n.items.length),0)}function x(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function w(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function k(e,n){return y(e)===0&&y(x(n))>0}const z="ds-panel-nav-user-menu-anchor";const C=()=>`.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,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const A=()=>`.sc-ds-panel-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-panel-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-panel-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-panel-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.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-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}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);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.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;position:relative;z-index:0;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);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;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;position:relative;z-index:0;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);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.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;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;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;z-index:2;right:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));top:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));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{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.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:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));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);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:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const I=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect");this.dsNavToggle=a(this,"dsNavToggle");this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd");this.dsNavFooterAction=a(this,"dsNavFooterAction");this.dsNavUserAction=a(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.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 w(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=x(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=m(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();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");const n=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=n=>{if(n.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("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=_(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(g(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(k(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){requestAnimationFrame(a)}};queueMicrotask(a)}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))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-icon")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const n=this.getAllItems().length;const a=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=n){this.handleItemClick(a[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${z}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:h})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const i=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===i)return;if(n===a)t=i;else t=n+1;break;case"ArrowUp":if(n===0)return;if(n===i)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=i;else return;break;case"ArrowLeft":if(n===i)t=a;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=i;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:h})}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 n=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 a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const i=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",a);window.removeEventListener("mouseup",i);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=i;window.addEventListener("mousemove",a);window.addEventListener("mouseup",i)}renderFooterAction(e){const n=e?"Open settings":"Go to dashboard";return i("ds-tooltip",{label:n,side:"right",size:"sm"},i("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const t=e?`User: ${n}`:`User menu for ${n}`;const s=i("button",{type:"button",id:z,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":t,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},i("span",{class:"panel-nav__item-label panel-nav__footer-user-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),i("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},i("span",{class:"panel-nav__footer-icon-expanded"},i("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),i("span",{class:"panel-nav__footer-icon-collapsed"},i("ds-icon",{name:"Circle",size:"md",color:"inherit"}),i("span",{class:"panel-nav__user-initial"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a)))));if(!e)return s;return i("ds-tooltip",{label:t,side:"right",size:"sm"},s)}renderNavItem(e,n,a){const t=e.id===this.effectiveActiveId;const s=n+1;const o=[i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),i("span",{class:"panel-nav__item-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:t?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&i("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const r={class:{"panel-nav__item":true,"panel-nav__item--active":t,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":t?"page":undefined,tabIndex:s===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,s),onFocus:()=>{this.rovingIndex=s}};const l=this.routerMode==="anchor"&&e.href;const d=l?i("a",{...r,href:e.href},o):i("button",{...r,type:"button"},o);if(!a)return d;return i("ds-tooltip",{label:e.label,side:"right",size:"sm"},d)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const s=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":s,"panel-nav--animating":this.isAnimating};return i(t,{key:"2303c78bae23854b0c2a813085fdad72168d4347",style:{display:"block",position:"relative"}},i("nav",{key:"fe5efeb2e2e09066d6054c6c1ee72eb48ee0a93a",class:l,"aria-label":n?"Dashboard navigation":"Settings navigation"},i("div",{key:"74d917dae1b8b0ebc0212b008f8f69b3498e296b",class:"panel-nav__header"},i("button",{key:"c080733a471b8cddb983734d1533f11017f475c4",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":s?"Expand navigation":"Collapse navigation","aria-expanded":s?"false":"true"},i("span",{key:"afc692e08df5a8ff284702d4aa0edcecd75a21e4",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"5096c892cd9e391306de544c48e024824e1924d9",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},i("path",{key:"f65c6bf1f78df36e9d627a0104dcea8ff704c171",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"}))),i("span",{key:"97f39464c13c4070c9858c8f0ca3df37fb035cae",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"72459bd7a621aea4675f4d425501c5463cdf5689",name:s?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"b89ffe0754232dc9f2bdb556f3939a5dba6a685a",class:{"panel-nav__body":true,...p({edges:"bottom"})}},(()=>{let e=0;return this.parsedGroups.map((n=>i("div",{class:"panel-nav__group"},n.label&&i("span",{class:"panel-nav__group-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,e++,s))))))})()),i("div",{key:"92786fe0519b842c84d0fd8d296813ccbb80dcab",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(s,o,r))),!this.viewportNarrow&&i("div",{key:"f82baaa62a16b2f4d0e5f1ac03b6b8ef7a10f6b3",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:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return C()+A()}},[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],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);I.HOST_PROP_SYNC_BUDGET=8;function D(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),I)}break;case"ds-badge":if(!customElements.get(s(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(s(e))){r()}break;case"ds-icon":if(!customElements.get(s(e))){l()}break;case"ds-text":if(!customElements.get(s(e))){d()}break;case"ds-tooltip":if(!customElements.get(s(e))){c()}break}}))}D();const E=I;const N=D;export{E as DsPanelNav,N as defineCustomElement};
+import{p as e,H as n,c as a,h as i,a as t,t as s}from"./index.js";import{d as o}from"./p-EK1hOP19.js";import{d as r}from"./p-CuRjYmBk.js";import{d as l}from"./p-B82KZX9D.js";import{d}from"./p-CtwNUCnp.js";import{d as c}from"./p-CDHRJqea.js";import{a as v}from"./p-B_g8X0eh.js";function p(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:i}=e;if(i===true){a["scroll-edge-fade--at-end"]=true}else if(i&&typeof i==="object"){const e=n.every((e=>i[e]));if(e){a["scroll-edge-fade--at-end"]=true}}return a}const h={side:"right",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:v.space050};const f="data-nav-style";function u(e){if(e==="dashboard"||e==="settings")return e;return undefined}function m(e,n,a){const i=u(n);if(i)return i;const t=typeof document!=="undefined"?document.documentElement.getAttribute(f):null;const s=u(t);if(s)return s;return e}function g(e,n){return e!==n}function b(e,n){return e===n||e.startsWith(`${n}/`)}function _(e,n){if(!e)return"";let a="";let i=0;for(const t of n){if(!t.href)continue;if(b(e,t.href)&&t.href.length>i){a=t.id;i=t.href.length}}return a}function y(e){return e.reduce(((e,n)=>e+n.items.length),0)}function x(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function w(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function k(e,n){return y(e)===0&&y(x(n))>0}const z="ds-panel-nav-user-menu-anchor";const C=()=>`.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,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const A=()=>`.sc-ds-panel-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-panel-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-panel-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-panel-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.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-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}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);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.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;position:relative;z-index:0;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);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;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;position:relative;z-index:0;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);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.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;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;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;z-index:2;right:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));top:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));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{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.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:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));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);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:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const I=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect");this.dsNavToggle=a(this,"dsNavToggle");this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd");this.dsNavFooterAction=a(this,"dsNavFooterAction");this.dsNavUserAction=a(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.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 w(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=x(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=m(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();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");const n=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=n=>{if(n.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("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=_(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(g(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(k(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){requestAnimationFrame(a)}};queueMicrotask(a)}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))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-icon")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const n=this.getAllItems().length;const a=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=n){this.handleItemClick(a[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${z}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:h})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const i=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===i)return;if(n===a)t=i;else t=n+1;break;case"ArrowUp":if(n===0)return;if(n===i)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=i;else return;break;case"ArrowLeft":if(n===i)t=a;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=i;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:h})}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 n=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 a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const i=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",a);window.removeEventListener("mouseup",i);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=i;window.addEventListener("mousemove",a);window.addEventListener("mouseup",i)}renderFooterAction(e){const n=e?"Settings":"Dashboard";return i("ds-tooltip",{label:n,side:"right",size:"sm"},i("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const t=e?"Account":"";const s=i("button",{type:"button",id:z,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":"Account",onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},i("span",{class:"panel-nav__item-label panel-nav__footer-user-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),i("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},i("span",{class:"panel-nav__footer-icon-expanded"},i("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),i("span",{class:"panel-nav__footer-icon-collapsed"},i("ds-icon",{name:"Circle",size:"md",color:"inherit"}),i("span",{class:"panel-nav__user-initial"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a)))));return i("ds-tooltip",{label:t,side:"right",size:"sm"},s)}renderNavItem(e,n,a){const t=e.id===this.effectiveActiveId;const s=n+1;const o=[i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),i("span",{class:"panel-nav__item-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:t?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&i("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const r={class:{"panel-nav__item":true,"panel-nav__item--active":t,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":t?"page":undefined,tabIndex:s===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,s),onFocus:()=>{this.rovingIndex=s}};const l=this.routerMode==="anchor"&&e.href;const d=l?i("a",{...r,href:e.href},o):i("button",{...r,type:"button"},o);return i("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},d)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const s=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":s,"panel-nav--animating":this.isAnimating};return i(t,{key:"aed22dc315704e320c3fa544bffce6efeef09a9b",style:{display:"block",position:"relative"}},i("nav",{key:"2f6497e1579d3b32bde2c4ccf65bd5dc61cbaf1d",class:l,"aria-label":n?"Dashboard navigation":"Settings navigation"},i("div",{key:"13605ce585013d2b25768faf97d3e8a3624f3fc0",class:"panel-nav__header"},i("button",{key:"0206f813f542130b58ddecb7e6485f73c08e05b9",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":s?"Expand navigation":"Collapse navigation","aria-expanded":s?"false":"true"},i("span",{key:"fb5b6c3e5f7f0401bfca99ba7c689ecec44fe08c",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"cb376a9da7a06ade65254b9fd0897a95b58b045a",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},i("path",{key:"050452e744633be064440d23010ee04e36269d89",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"}))),i("span",{key:"a366046422cbbe85a4fe35db6fa469e484eca13d",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"e56abeec141327c1f553ca313fd4721a41351a6c",name:s?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"ef64a59702c450a75a8e255876d7e0ed54afdc59",class:{"panel-nav__body":true,...p({edges:"bottom"})}},(()=>{let e=0;return this.parsedGroups.map((n=>i("div",{class:"panel-nav__group"},n.label&&i("span",{class:"panel-nav__group-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,e++,s))))))})()),i("div",{key:"e4d23219f169733b06d767c221c9b900658b0f88",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(s,o,r))),!this.viewportNarrow&&i("div",{key:"a4e8055387467d4e4f5ba0f71c1888540675ba34",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:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return C()+A()}},[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],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);I.HOST_PROP_SYNC_BUDGET=8;function D(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),I)}break;case"ds-badge":if(!customElements.get(s(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(s(e))){r()}break;case"ds-icon":if(!customElements.get(s(e))){l()}break;case"ds-text":if(!customElements.get(s(e))){d()}break;case"ds-tooltip":if(!customElements.get(s(e))){c()}break}}))}D();const E=I;const N=D;export{E as DsPanelNav,N as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["scrollEdgeFadeClassMap","opts","edges","Array","isArray","classes","hidden","edge","atEnd","allAtEnd","every","PANEL_NAV_USER_MENU_PLACEMENT","side","align","sideOffset","alignOffset","TOKEN_CSS_LENGTHS","space050","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","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","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","effectiveDisableViewTransition","el","onCollapsedChange","_next","prev","startCollapseAnimation","onViewportNarrowChange","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","syncActiveFromUrl","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","componentWillLoad","resolvePanelNavStyle","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","dsChromeTransitionStart","emit","source","panel","querySelector","widthBefore","getBoundingClientRect","width","transitionEndHandler","e","propertyName","finishCollapseAnimation","addEventListener","requestAnimationFrame","widthAfter","Math","abs","dsChromeTransitionEnd","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","getAllItems","shouldResyncPanelNavStyle","remaining","HOST_PROP_SYNC_BUDGET","tick","queueMicrotask","applyToggle","next","setItem","String","dsNavToggle","flatMap","getFooterRovingIndex","getUserRovingIndex","getRovingElement","index","itemCount","querySelectorAll","focusRovingAt","focus","preventScroll","activateRovingIndex","handleToggle","handleItemClick","handleFooterAction","anchor","dsNavUserAction","menuPlacement","handleRovingKeyDown","key","preventDefault","footerIdx","userIdx","dsNavSelect","toggleCollapsed","dsNavFooterAction","handleUserAction","currentTarget","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","body","cursor","userSelect","onMove","ev","deltaX","onUp","renderFooterAction","isDashboardChrome","footerLabel","h","label","size","variant","class","icon","activeFill","hasBorder","focusTabIndex","onDsClick","onKeyDown","onFocusin","renderFooterUser","userLabel","userButton","type","tabIndex","onClick","onFocus","as","color","name","renderNavItem","idx","isActive","rovingPosition","itemContent","flag","dot","background","sharedProps","useAnchor","control","render","chromeStyle","isDashboard","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","flatIdx","map","group","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/utils/scroll-edge-fade.ts","src/wc/components/Menu/menu-placement.ts","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":["/** CSS custom property for scroll-edge fade depth (dimension token or length). /\nexport const SCROLL_EDGE_FADE_SIZE_VAR = '--ds-scroll-edge-fade-size';\n\nexport const SCROLL_EDGE_FADE_DEFAULT_SIZE = 'var(--dimension-size-600)';\n\nexport type ScrollEdgeFadeEdge = 'top' \| 'bottom' \| 'left' \| 'right';\n\nexport type ScrollEdgeFadeSizeToken =\n \| 'size-000'\n \| 'size-050'\n \| 'size-075'\n \| 'size-100'\n \| 'size-150'\n \| 'size-200'\n \| 'size-250'\n \| 'size-300'\n \| 'size-400'\n \| 'size-500'\n \| 'size-600'\n \| 'size-800';\n\nexport type ScrollEdgeFadeSize = ScrollEdgeFadeSizeToken \| (string & {});\n\nconst SIZE_VALUE: Record<ScrollEdgeFadeSizeToken, string> = {\n 'size-000': 'var(--dimension-size-000)',\n 'size-050': 'var(--dimension-size-050)',\n 'size-075': 'var(--dimension-size-075)',\n 'size-100': 'var(--dimension-size-100)',\n 'size-150': 'var(--dimension-size-150)',\n 'size-200': 'var(--dimension-size-200)',\n 'size-250': 'var(--dimension-size-250)',\n 'size-300': 'var(--dimension-size-300)',\n 'size-400': 'var(--dimension-size-400)',\n 'size-500': 'var(--dimension-size-500)',\n 'size-600': 'var(--dimension-size-600)',\n 'size-800': 'var(--dimension-size-800)',\n};\n\nconst SIZE_REF = `var(${SCROLL_EDGE_FADE_SIZE_VAR}, ${SCROLL_EDGE_FADE_DEFAULT_SIZE})`;\n\nexport interface ScrollEdgeFadeOptions {\n /* One or more edges to fade. /\n edges: ScrollEdgeFadeEdge \| ScrollEdgeFadeEdge[];\n /\n When true, or when every listed edge is at its scroll limit, removes the mask.\n * Pass a per-edge map to hide only the edges that are flush (panel-nav bottom fade).\n /\n atEnd?: boolean \| Partial<Record<ScrollEdgeFadeEdge, boolean>>;\n /* Force the mask off regardless of scroll position (`ds-fade` `visible={false}`). /\n hidden?: boolean;\n}\n\n/* Resolve a dimension size token name or raw CSS length for `--ds-scroll-edge-fade-size`. /\nexport function resolveScrollEdgeFadeSize(\n size: ScrollEdgeFadeSize = 'size-600',\n height?: string,\n): string {\n if (height) return height;\n return Object.prototype.hasOwnProperty.call(SIZE_VALUE, size)\n ? SIZE_VALUE[size as ScrollEdgeFadeSizeToken]\n : size;\n}\n\n/* Inline style map setting fade depth on a scroll container. /\nexport function scrollEdgeFadeSizeStyle(\n size: ScrollEdgeFadeSize = 'size-600',\n height?: string,\n): Record<string, string> {\n return {\n [SCROLL_EDGE_FADE_SIZE_VAR]: resolveScrollEdgeFadeSize(size, height),\n };\n}\n\n/\n Alpha mask for a scroll container edge — content fades to transparent so\n * textured backgrounds (shell gradients, images) show through.\n /\nexport function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {\n switch (edge) {\n case 'top':\n return `linear-gradient(to bottom, #000 0, #000 50%, transparent 100%)`;\n case 'bottom':\n return `linear-gradient(to bottom, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n case 'left':\n return `linear-gradient(to right, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n case 'right':\n return `linear-gradient(to left, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n }\n}\n\n/* Inline style map for a masked scroll region (single edge). /\nexport function scrollEdgeFadeMaskStyle(\n edge: ScrollEdgeFadeEdge,\n size: ScrollEdgeFadeSize = 'size-600',\n height?: string,\n): Record<string, string> {\n const mask = scrollEdgeFadeMaskImage(edge);\n return {\n ...scrollEdgeFadeSizeStyle(size, height),\n WebkitMaskImage: mask,\n maskImage: mask,\n WebkitMaskSize: '100% 100%',\n maskSize: '100% 100%',\n };\n}\n\n/* Class map for `scroll-edge-fade` modifiers — pair with `scroll-edge-fade.css`. /\nexport function scrollEdgeFadeClassMap(opts: ScrollEdgeFadeOptions): Record<string, boolean> {\n const edges = Array.isArray(opts.edges) ? opts.edges : [opts.edges];\n const classes: Record<string, boolean> = {\n 'scroll-edge-fade': true,\n 'scroll-edge-fade--hidden': opts.hidden === true,\n };\n\n for (const edge of edges) {\n classes[`scroll-edge-fade--${edge}`] = true;\n }\n\n const { atEnd } = opts;\n if (atEnd === true) {\n classes['scroll-edge-fade--at-end'] = true;\n } else if (atEnd && typeof atEnd === 'object') {\n const allAtEnd = edges.every(edge => atEnd[edge]);\n if (allAtEnd) {\n classes['scroll-edge-fade--at-end'] = true;\n }\n }\n\n return classes;\n}\n\n/* Whether a scroll container is flush with the given edge (within `threshold` px). /\nexport function isScrollAtEdge(\n el: HTMLElement,\n edge: ScrollEdgeFadeEdge,\n threshold = 2,\n): boolean {\n switch (edge) {\n case 'top':\n return el.scrollTop <= threshold;\n case 'bottom':\n return el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;\n case 'left':\n return el.scrollLeft <= threshold;\n case 'right':\n return el.scrollWidth - el.scrollLeft - el.clientWidth <= threshold;\n }\n}\n","import { TOKEN_CSS_LENGTHS } from '../../utils/token-defaults';\nimport type { MenuAlign, MenuSide } from './menu-position';\n\n/* Placement props bindable on `ds-menu` (side, align, offsets). /\nexport interface MenuPlacement {\n side: MenuSide;\n align: MenuAlign;\n sideOffset: number \| string;\n alignOffset: number \| string;\n}\n\n/\n Canonical `ds-menu` placement for the panel-nav footer user menu.\n * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).\n \n Not for BarNav overflow menus — those use `side=\"bottom\"` / `align=\"end\"` internally.\n * `align: 'end'` bottom-aligns on the anchor; offsets nudge into the content area:\n * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).\n * - `alignOffset` space-050 (4px): 4px below the footer user row.\n /\nexport const PANEL_NAV_USER_MENU_PLACEMENT = {\n side: 'right',\n align: 'end',\n sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n alignOffset: TOKEN_CSS_LENGTHS.space050,\n} as const satisfies MenuPlacement;\n","/* Nav chrome style slot — dashboard vs settings. Colors unified for now; texture hooks use the class. /\nexport type NavChromeStyle = 'dashboard' \| 'settings';\n\n/* Document hint for first paint before framework props land. /\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\nexport function readNavStyleAttr(attr: string \| null): NavChromeStyle \| undefined {\n if (attr === 'dashboard' \|\| attr === 'settings') return attr;\n return undefined;\n}\n\nexport function setNavStyleHint(style: NavChromeStyle): void {\n if (typeof document === 'undefined') return;\n document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n if (typeof document === 'undefined') return;\n document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\nexport function resolveNavChromeStyle(\n styleProp: NavChromeStyle,\n hostAttr: string \| null,\n docHint?: string \| null,\n): NavChromeStyle {\n const fromHost = readNavStyleAttr(hostAttr);\n if (fromHost) return fromHost;\n\n const hint =\n docHint !== undefined\n ? docHint\n : typeof document !== 'undefined'\n ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n : null;\n const fromHint = readNavStyleAttr(hint);\n if (fromHint) return fromHint;\n\n return styleProp;\n}\n\nexport function shouldResyncNavChromeStyle(\n renderedStyle: NavChromeStyle,\n style: NavChromeStyle,\n): boolean {\n return renderedStyle !== style;\n}\n","import type { 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 { MenuPlacement } from '../Menu/menu-placement';\nimport { PANEL_NAV_USER_MENU_PLACEMENT } from '../Menu/menu-placement';\nimport 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 /* Recommended `ds-menu` placement — spread onto external user menu instance. /\n menuPlacement: MenuPlacement;\n}\n\nexport { PANEL_NAV_USER_MENU_PLACEMENT };\n","/\n Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through. Pair with `.scroll-edge-fade--at-end` when flush.\n \n @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n /\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n}\n\n/ Mask gradients use #000 / transparent as luminance stops — not theme colors. /\n/ stylelint-disable color-no-hex /\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.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/ stylelint-enable color-no-hex /\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n/ ── Theme variables ──────────────────────────────────────────────────────── /\n\n.panel-nav {\n / ─ Sizes ─ /\n --_nav-width: var(--dimension-panel-width-2xs);\n --_nav-width-collapsed: var(--dimension-size-600);\n --_nav-item-height: var(--dimension-size-400, 32px);\n --_nav-padding-x: var(--dimension-space-100, 8px);\n --_nav-padding-y: var(--dimension-space-100, 8px);\n / gear button outer width = padding2 + 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 --ds-interaction-hover: var(--_nav-hover);\n --ds-interaction-pressed: var(--_nav-pressed);\n --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/ ── Default chrome overrides ────────────────────────────────────────────── /\n\n/ Shell-owned chrome (bg + wash) — panel is a transparent frame. /\n:host-context(ds-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 --ds-interaction-hover: var(--_nav-hover);\n --ds-interaction-pressed: var(--_nav-pressed);\n --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/ ── Shell ───────────────────────────────────────────────────────────────── /\n\n.panel-nav {\n display: flex;\n flex-direction: column;\n position: relative;\n width: var(--_nav-width);\n min-width: var(--_nav-width);\n height: 100%;\n background-color: var(--_nav-bg);\n border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n box-sizing: border-box;\n overflow: visible;\n transition:\n width var(--_nav-expand-motion),\n min-width var(--_nav-expand-motion),\n background-color var(--effect-motion-short-3, 200ms ease),\n border-color var(--effect-motion-short-3, 200ms ease);\n font-family: var(--typography-font-family, 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 / Re-assert after unset — required for `.ds-interaction-fill` stacking. /\n position: relative;\n z-index: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-primary);\n flex-shrink: 0;\n box-sizing: border-box;\n transition: color var(--effect-motion-short-3, 200ms ease);\n / Hover/press: `.ds-interaction-fill` (tokens from --_nav-* via --ds-interaction-). /\n}\n\n/* Logo — visible by default; instant swap to toggle on hover (no crossfade overlap) /\n.panel-nav__header-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 2;\n opacity: 1;\n}\n\n.panel-nav__m-mark {\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n display: block;\n}\n\n/ Toggle icon — stacked on logo; under hover wash (::after z-index 3) /\n.panel-nav__header-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n z-index: 2;\n opacity: 0;\n pointer-events: none;\n}\n\n.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 / Re-assert after unset — required for `.ds-interaction-fill` stacking. /\n position: relative;\n z-index: 0;\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050, 4px);\n padding: 0 var(--dimension-space-075, 6px);\n height: var(--dimension-size-400, 32px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n box-sizing: border-box;\n width: 100%;\n user-select: none;\n transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n / Hover/press: `.ds-interaction-fill` — no --selected (icon/type weight only). /\n}\n\n/ ── Active item ─────────────────────────────────────────────────────────── /\n\n.panel-nav__item--active {\n color: var(--_nav-fg-primary);\n / Bold typography via ds-text (text-body-medium-emphasis) on the label /\n}\n\n/ ── Item icon ───────────────────────────────────────────────────────────── /\n\n.panel-nav__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n position: relative;\n z-index: 2;\n}\n\n/ ── Item label ──────────────────────────────────────────────────────────── /\n\n.panel-nav__item-label {\n position: relative;\n z-index: 2;\n flex: 1;\n 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 / stylelint-disable-next-line color-named -- mask luminance stops, not theme colors /\n mask-image: linear-gradient(to right, black 50%, transparent 100%);\n / stylelint-disable-next-line color-named -- mask luminance stops, not theme colors /\n -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n mask-size: 200% 100%;\n -webkit-mask-size: 200% 100%;\n mask-position: 0% 0;\n -webkit-mask-position: 0% 0;\n transition:\n opacity var(--_nav-label-fade-motion) 0ms,\n mask-position var(--_nav-label-fade-motion) 0ms,\n -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n padding: 0 var(--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 z-index: 2;\n right: calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));\n top: calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));\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: padding2 + 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: padding2 + item2 + 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 position: absolute;\n left: var(--_nav-padding-x);\n top: var(--_nav-padding-y);\n --ds-button-unfilled-fg: var(--_nav-fg-secondary);\n --ds-button-unfilled-fg-active: var(--_nav-fg-primary);\n --ds-interaction-hover: var(--_nav-hover);\n --ds-interaction-pressed: var(--_nav-pressed);\n --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/ ── Footer user — absolutely positioned, slides from row to below gear ───── /\n\n.panel-nav__footer-user {\n position: absolute;\n / 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: calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));\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 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 / stylelint-disable-next-line color-named -- near-invisible hit-test fill; not a theme color /\n background: rgba(0, 0, 0, 0.001);\n}\n\n/ Resize overlay line /\n.panel-nav__resize-handle::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: var(--dimension-stroke-width-025, 2px);\n background: var(--color-foreground-primary);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n opacity: 1;\n}\n\n/ ── Reduced motion ──────────────────────────────────────────────────────── /\n\n@media (prefers-reduced-motion: reduce) {\n .panel-nav,\n .panel-nav ,\n .panel-nav ::before,\n .panel-nav ::after,\n .panel-nav__resize-handle,\n .panel-nav__resize-handle::before,\n .panel-nav__resize-handle::after {\n /* Near-instant — browsers treat 0 as \"no transition\" and can skip the end state. /\n transition-duration: var(--effect-animation-duration-instant) !important;\n animation-duration: var(--effect-animation-duration-instant) !important;\n transition-delay: var(--effect-animation-duration-instant) !important;\n }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, Method, 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 PANEL_NAV_USER_MENU_PLACEMENT,\n type PanelNavGroup,\n type PanelNavItem,\n type PanelNavRouterMode,\n type PanelNavUserActionDetail,\n} from './panel-nav-types';\nimport { scrollEdgeFadeClassMap } from '../../utils/scroll-edge-fade';\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 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 onCollapsedChange(_next: boolean, prev: boolean \| undefined) {\n if (prev === undefined) return;\n this.startCollapseAnimation();\n }\n\n @Watch('viewportNarrow')\n onViewportNarrowChange(_next: boolean, prev: boolean \| undefined) {\n if (prev === undefined) return;\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.rovingIndex = 0;\n this.syncActiveFromUrl();\n }\n\n @Watch('activeId')\n @Watch('urlDerivedActiveId')\n onActiveIdChange() {\n / Active route updates aria-current only — roving tab stop stays user-controlled. /\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 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 const widthBefore = panel?.getBoundingClientRect().width ?? 0;\n if (this.transitionEndHandler) {\n panel?.removeEventListener('transitionend', this.transitionEndHandler);\n }\n this.transitionEndHandler = (e: TransitionEvent) => {\n if (e.propertyName === 'width') {\n this.finishCollapseAnimation(panel);\n }\n };\n panel?.addEventListener('transitionend', this.transitionEndHandler);\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (!this.isAnimating) return;\n const widthAfter = panel?.getBoundingClientRect().width ?? 0;\n if (Math.abs(widthAfter - widthBefore) < 1) {\n this.finishCollapseAnimation(panel);\n }\n });\n });\n }\n\n private finishCollapseAnimation(panel: HTMLElement \| null) {\n if (!this.isAnimating) return;\n this.isAnimating = false;\n this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n if (this.transitionEndHandler) {\n panel?.removeEventListener('transitionend', this.transitionEndHandler);\n }\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 getFooterRovingIndex(): number {\n return 1 + this.getAllItems().length;\n }\n\n private getUserRovingIndex(): number {\n return this.getFooterRovingIndex() + 1;\n }\n\n private getRovingElement(index: number): HTMLElement \| null {\n const itemCount = this.getAllItems().length;\n if (index === 0) {\n return this.el.querySelector('.panel-nav__header-btn');\n }\n if (index >= 1 && index <= itemCount) {\n const items = this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item');\n return items[index - 1] ?? null;\n }\n if (index === this.getFooterRovingIndex()) {\n return this.el.querySelector('.panel-nav__footer-btn .button-icon');\n }\n if (index === this.getUserRovingIndex()) {\n return this.el.querySelector('.panel-nav__footer-user');\n }\n return null;\n }\n\n private focusRovingAt(index: number) {\n this.rovingIndex = index;\n this.getRovingElement(index)?.focus({ preventScroll: true });\n }\n\n private activateRovingIndex(index: number) {\n const itemCount = this.getAllItems().length;\n const items = this.getAllItems();\n if (index === 0) {\n this.handleToggle();\n return;\n }\n if (index >= 1 && index <= itemCount) {\n this.handleItemClick(items[index - 1].id);\n return;\n }\n if (index === this.getFooterRovingIndex()) {\n this.handleFooterAction();\n return;\n }\n if (index === this.getUserRovingIndex()) {\n const anchor = this.el.querySelector(`#${PANEL_NAV_USER_MENU_ANCHOR_ID}`) as HTMLElement \| null;\n if (anchor) this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n }\n }\n\n private handleRovingKeyDown(e: KeyboardEvent, index: number) {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.activateRovingIndex(index);\n return;\n }\n\n const footerIdx = this.getFooterRovingIndex();\n const userIdx = this.getUserRovingIndex();\n let next: number \| undefined;\n\n switch (e.key) {\n case 'ArrowDown':\n if (index === userIdx) return;\n if (index === footerIdx) next = userIdx;\n else next = index + 1;\n break;\n case 'ArrowUp':\n if (index === 0) return;\n if (index === userIdx) next = footerIdx;\n else if (index === footerIdx) next = footerIdx - 1;\n else next = index - 1;\n break;\n case 'ArrowRight':\n if (index === footerIdx) next = userIdx;\n else return;\n break;\n case 'ArrowLeft':\n if (index === userIdx) next = footerIdx;\n else return;\n break;\n case 'Home':\n e.preventDefault();\n next = 0;\n break;\n case 'End':\n e.preventDefault();\n next = userIdx;\n break;\n default:\n return;\n }\n\n if (next === undefined \|\| next === index) return;\n e.preventDefault();\n this.focusRovingAt(next);\n }\n\n private handleItemClick(id: string) {\n this.dsNavSelect.emit(id);\n }\n\n private handleToggle() {\n this.applyToggle(!this.collapsed);\n }\n\n /* Toggle expanded/collapsed panel nav — used by shell keyboard shortcuts. /\n @Method()\n async toggleCollapsed() {\n this.handleToggle();\n }\n\n private handleFooterAction() {\n this.dsNavFooterAction.emit();\n }\n\n private handleUserAction(e: MouseEvent) {\n const anchor = e.currentTarget as HTMLElement;\n this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n }\n\n private clearEdgeOverlayTimer() {\n if (this.edgeOverlayTimer !== null) {\n window.clearTimeout(this.edgeOverlayTimer);\n this.edgeOverlayTimer = null;\n }\n }\n\n private handleResizeHandleMouseEnter() {\n this.clearEdgeOverlayTimer();\n this.edgeOverlayTimer = window.setTimeout(() => {\n this.showEdgeOverlay = true;\n this.edgeOverlayTimer = null;\n }, 500);\n }\n\n private handleResizeHandleMouseLeave() {\n if (this.isDragging) return;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n }\n\n private handleResizeHandleMouseDown(e: MouseEvent) {\n e.preventDefault();\n e.stopPropagation();\n\n const wasCollapsed = this.collapsed \|\| this.viewportNarrow;\n this.isDragging = true;\n this.dragStartX = e.clientX;\n this.didSnap = false;\n this.lastDeltaX = 0;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n const onMove = (ev: MouseEvent) => {\n const deltaX = ev.clientX - this.dragStartX;\n this.lastDeltaX = Math.abs(deltaX);\n if (this.didSnap) return;\n if (!wasCollapsed && deltaX < -8) {\n this.applyToggle(true);\n this.didSnap = true;\n } else if (wasCollapsed && deltaX > 8) {\n this.applyToggle(false);\n this.didSnap = true;\n }\n };\n\n const onUp = () => {\n if (!this.didSnap && this.lastDeltaX < 3) {\n this.applyToggle(!wasCollapsed);\n }\n this.isDragging = false;\n this.showEdgeOverlay = false;\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('mouseup', onUp);\n this.globalMouseMoveHandler = undefined;\n this.globalMouseUpHandler = undefined;\n };\n\n this.globalMouseMoveHandler = onMove;\n this.globalMouseUpHandler = onUp;\n window.addEventListener('mousemove', onMove);\n window.addEventListener('mouseup', onUp);\n }\n\n private renderFooterAction(isDashboardChrome: boolean) {\n const footerLabel = isDashboardChrome ? 'Open settings' : 'Go to dashboard';\n return (\n <ds-tooltip label={footerLabel} side=\"right\" size=\"sm\">\n <ds-button-unfilled variant=\"icon\"\n class=\"panel-nav__footer-btn\"\n icon={isDashboardChrome ? 'Gear' : 'Dashboard'}\n activeFill={false}\n hasBorder={false}\n focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}\n aria-label={footerLabel}\n onDsClick={() => this.handleFooterAction()}\n onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}\n onFocusin={() => { this.rovingIndex = this.getFooterRovingIndex(); }}\n />\n </ds-tooltip>\n );\n }\n\n private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {\n const userLabel = collapsed ? `User: ${userName}` : `User menu for ${userName}`;\n const userButton = (\n <button\n type=\"button\"\n id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n class=\"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill\"\n tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}\n aria-label={userLabel}\n onClick={(e) => this.handleUserAction(e)}\n onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}\n onFocus={() => { this.rovingIndex = this.getUserRovingIndex(); }}\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 );\n\n if (!collapsed) return userButton;\n\n return (\n <ds-tooltip label={userLabel} side=\"right\" size=\"sm\">\n {userButton}\n </ds-tooltip>\n );\n }\n\n private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n const isActive = item.id === this.effectiveActiveId;\n const rovingPosition = idx + 1;\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: {\n 'panel-nav__item': true,\n 'panel-nav__item--active': isActive,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n },\n 'aria-current': isActive ? ('page' as const) : undefined,\n tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,\n onClick: () => this.handleItemClick(item.id),\n onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),\n onFocus: () => { this.rovingIndex = rovingPosition; },\n };\n\n const useAnchor = this.routerMode === 'anchor' && item.href;\n const control = useAnchor\n ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n\n if (!collapsed) return control;\n\n return (\n <ds-tooltip label={item.label} side=\"right\" size=\"sm\">\n {control}\n </ds-tooltip>\n );\n }\n\n render() {\n const chromeStyle = this.renderedStyle;\n const isDashboardChrome = chromeStyle === 'dashboard';\n const isDashboard = this.navStyle === 'dashboard';\n const collapsed = this.collapsed \|\| this.viewportNarrow;\n const { userName, userInitial } = this;\n\n const navCls: Record<string, boolean> = {\n 'panel-nav': true,\n 'panel-nav--dashboard': isDashboard,\n 'panel-nav--settings': !isDashboard,\n 'panel-nav--collapsed': collapsed,\n 'panel-nav--animating': this.isAnimating,\n };\n\n return (\n <Host style={{ display: 'block', position: 'relative' }}>\n <nav\n class={navCls}\n aria-label={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 ds-focus-ring-inset ds-interaction-fill\"\n tabIndex={this.rovingIndex === 0 ? 0 : -1}\n onClick={() => this.handleToggle()}\n onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}\n onFocus={() => { this.rovingIndex = 0; }}\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 ...scrollEdgeFadeClassMap({ edges: 'bottom' }),\n }}\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 {this.renderFooterAction(isDashboardChrome)}\n {this.renderFooterUser(collapsed, userName, userInitial)}\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":[]}
1	+ {"version":3,"names":["scrollEdgeFadeClassMap","opts","edges","Array","isArray","classes","hidden","edge","atEnd","allAtEnd","every","PANEL_NAV_USER_MENU_PLACEMENT","side","align","sideOffset","alignOffset","TOKEN_CSS_LENGTHS","space050","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","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","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","effectiveDisableViewTransition","el","onCollapsedChange","_next","prev","startCollapseAnimation","onViewportNarrowChange","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","syncActiveFromUrl","onActiveIdChange","onCurrentUrlChange","onNavStyleChange","newVal","componentWillLoad","resolvePanelNavStyle","stored","localStorage","getItem","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","dsChromeTransitionStart","emit","source","panel","querySelector","widthBefore","getBoundingClientRect","width","transitionEndHandler","e","propertyName","finishCollapseAnimation","addEventListener","requestAnimationFrame","widthAfter","Math","abs","dsChromeTransitionEnd","innerWidth","resizeObserver","ResizeObserver","observe","disconnect","getAllItems","shouldResyncPanelNavStyle","remaining","HOST_PROP_SYNC_BUDGET","tick","queueMicrotask","applyToggle","next","setItem","String","dsNavToggle","flatMap","getFooterRovingIndex","getUserRovingIndex","getRovingElement","index","itemCount","querySelectorAll","focusRovingAt","focus","preventScroll","activateRovingIndex","handleToggle","handleItemClick","handleFooterAction","anchor","dsNavUserAction","menuPlacement","handleRovingKeyDown","key","preventDefault","footerIdx","userIdx","dsNavSelect","toggleCollapsed","dsNavFooterAction","handleUserAction","currentTarget","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","body","cursor","userSelect","onMove","ev","deltaX","onUp","renderFooterAction","isDashboardChrome","footerLabel","h","label","size","variant","class","icon","activeFill","hasBorder","focusTabIndex","onDsClick","onKeyDown","onFocusin","renderFooterUser","tipLabel","userButton","type","tabIndex","onClick","onFocus","as","color","name","renderNavItem","idx","isActive","rovingPosition","itemContent","flag","dot","background","sharedProps","useAnchor","control","render","chromeStyle","isDashboard","navCls","Host","display","position","viewBox","fill","xmlns","focusable","d","flatIdx","map","group","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/utils/scroll-edge-fade.ts","src/wc/components/Menu/menu-placement.ts","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":["/** CSS custom property for scroll-edge fade depth (dimension token or length). /\nexport const SCROLL_EDGE_FADE_SIZE_VAR = '--ds-scroll-edge-fade-size';\n\nexport const SCROLL_EDGE_FADE_DEFAULT_SIZE = 'var(--dimension-size-600)';\n\nexport type ScrollEdgeFadeEdge = 'top' \| 'bottom' \| 'left' \| 'right';\n\nexport type ScrollEdgeFadeSizeToken =\n \| 'size-000'\n \| 'size-050'\n \| 'size-075'\n \| 'size-100'\n \| 'size-150'\n \| 'size-200'\n \| 'size-250'\n \| 'size-300'\n \| 'size-400'\n \| 'size-500'\n \| 'size-600'\n \| 'size-800';\n\nexport type ScrollEdgeFadeSize = ScrollEdgeFadeSizeToken \| (string & {});\n\nconst SIZE_VALUE: Record<ScrollEdgeFadeSizeToken, string> = {\n 'size-000': 'var(--dimension-size-000)',\n 'size-050': 'var(--dimension-size-050)',\n 'size-075': 'var(--dimension-size-075)',\n 'size-100': 'var(--dimension-size-100)',\n 'size-150': 'var(--dimension-size-150)',\n 'size-200': 'var(--dimension-size-200)',\n 'size-250': 'var(--dimension-size-250)',\n 'size-300': 'var(--dimension-size-300)',\n 'size-400': 'var(--dimension-size-400)',\n 'size-500': 'var(--dimension-size-500)',\n 'size-600': 'var(--dimension-size-600)',\n 'size-800': 'var(--dimension-size-800)',\n};\n\nconst SIZE_REF = `var(${SCROLL_EDGE_FADE_SIZE_VAR}, ${SCROLL_EDGE_FADE_DEFAULT_SIZE})`;\n\nexport interface ScrollEdgeFadeOptions {\n /* One or more edges to fade. /\n edges: ScrollEdgeFadeEdge \| ScrollEdgeFadeEdge[];\n /\n When true, or when every listed edge is at its scroll limit, removes the mask.\n * Pass a per-edge map to hide only the edges that are flush (panel-nav bottom fade).\n /\n atEnd?: boolean \| Partial<Record<ScrollEdgeFadeEdge, boolean>>;\n /* Force the mask off regardless of scroll position (`ds-fade` `visible={false}`). /\n hidden?: boolean;\n}\n\n/* Resolve a dimension size token name or raw CSS length for `--ds-scroll-edge-fade-size`. /\nexport function resolveScrollEdgeFadeSize(\n size: ScrollEdgeFadeSize = 'size-600',\n height?: string,\n): string {\n if (height) return height;\n return Object.prototype.hasOwnProperty.call(SIZE_VALUE, size)\n ? SIZE_VALUE[size as ScrollEdgeFadeSizeToken]\n : size;\n}\n\n/* Inline style map setting fade depth on a scroll container. /\nexport function scrollEdgeFadeSizeStyle(\n size: ScrollEdgeFadeSize = 'size-600',\n height?: string,\n): Record<string, string> {\n return {\n [SCROLL_EDGE_FADE_SIZE_VAR]: resolveScrollEdgeFadeSize(size, height),\n };\n}\n\n/\n Alpha mask for a scroll container edge — content fades to transparent so\n * textured backgrounds (shell gradients, images) show through.\n /\nexport function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {\n switch (edge) {\n case 'top':\n return `linear-gradient(to bottom, #000 0, #000 50%, transparent 100%)`;\n case 'bottom':\n return `linear-gradient(to bottom, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n case 'left':\n return `linear-gradient(to right, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n case 'right':\n return `linear-gradient(to left, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n }\n}\n\n/* Inline style map for a masked scroll region (single edge). /\nexport function scrollEdgeFadeMaskStyle(\n edge: ScrollEdgeFadeEdge,\n size: ScrollEdgeFadeSize = 'size-600',\n height?: string,\n): Record<string, string> {\n const mask = scrollEdgeFadeMaskImage(edge);\n return {\n ...scrollEdgeFadeSizeStyle(size, height),\n WebkitMaskImage: mask,\n maskImage: mask,\n WebkitMaskSize: '100% 100%',\n maskSize: '100% 100%',\n };\n}\n\n/* Class map for `scroll-edge-fade` modifiers — pair with `scroll-edge-fade.css`. /\nexport function scrollEdgeFadeClassMap(opts: ScrollEdgeFadeOptions): Record<string, boolean> {\n const edges = Array.isArray(opts.edges) ? opts.edges : [opts.edges];\n const classes: Record<string, boolean> = {\n 'scroll-edge-fade': true,\n 'scroll-edge-fade--hidden': opts.hidden === true,\n };\n\n for (const edge of edges) {\n classes[`scroll-edge-fade--${edge}`] = true;\n }\n\n const { atEnd } = opts;\n if (atEnd === true) {\n classes['scroll-edge-fade--at-end'] = true;\n } else if (atEnd && typeof atEnd === 'object') {\n const allAtEnd = edges.every(edge => atEnd[edge]);\n if (allAtEnd) {\n classes['scroll-edge-fade--at-end'] = true;\n }\n }\n\n return classes;\n}\n\n/* Whether a scroll container is flush with the given edge (within `threshold` px). /\nexport function isScrollAtEdge(\n el: HTMLElement,\n edge: ScrollEdgeFadeEdge,\n threshold = 2,\n): boolean {\n switch (edge) {\n case 'top':\n return el.scrollTop <= threshold;\n case 'bottom':\n return el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;\n case 'left':\n return el.scrollLeft <= threshold;\n case 'right':\n return el.scrollWidth - el.scrollLeft - el.clientWidth <= threshold;\n }\n}\n","import { TOKEN_CSS_LENGTHS } from '../../utils/token-defaults';\nimport type { MenuAlign, MenuSide } from './menu-position';\n\n/* Placement props bindable on `ds-menu` (side, align, offsets). /\nexport interface MenuPlacement {\n side: MenuSide;\n align: MenuAlign;\n sideOffset: number \| string;\n alignOffset: number \| string;\n}\n\n/\n Canonical `ds-menu` placement for the panel-nav footer user menu.\n * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).\n \n Not for BarNav overflow menus — those use `side=\"bottom\"` / `align=\"end\"` internally.\n * `align: 'end'` bottom-aligns on the anchor; offsets nudge into the content area:\n * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).\n * - `alignOffset` space-050 (4px): 4px below the footer user row.\n /\nexport const PANEL_NAV_USER_MENU_PLACEMENT = {\n side: 'right',\n align: 'end',\n sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',\n alignOffset: TOKEN_CSS_LENGTHS.space050,\n} as const satisfies MenuPlacement;\n","/* Nav chrome style slot — dashboard vs settings. Colors unified for now; texture hooks use the class. /\nexport type NavChromeStyle = 'dashboard' \| 'settings';\n\n/* Document hint for first paint before framework props land. /\nexport const NAV_STYLE_HINT_ATTR = 'data-nav-style';\n\nexport function readNavStyleAttr(attr: string \| null): NavChromeStyle \| undefined {\n if (attr === 'dashboard' \|\| attr === 'settings') return attr;\n return undefined;\n}\n\nexport function setNavStyleHint(style: NavChromeStyle): void {\n if (typeof document === 'undefined') return;\n document.documentElement.setAttribute(NAV_STYLE_HINT_ATTR, style);\n}\n\nexport function clearNavStyleHint(): void {\n if (typeof document === 'undefined') return;\n document.documentElement.removeAttribute(NAV_STYLE_HINT_ATTR);\n}\n\nexport function resolveNavChromeStyle(\n styleProp: NavChromeStyle,\n hostAttr: string \| null,\n docHint?: string \| null,\n): NavChromeStyle {\n const fromHost = readNavStyleAttr(hostAttr);\n if (fromHost) return fromHost;\n\n const hint =\n docHint !== undefined\n ? docHint\n : typeof document !== 'undefined'\n ? document.documentElement.getAttribute(NAV_STYLE_HINT_ATTR)\n : null;\n const fromHint = readNavStyleAttr(hint);\n if (fromHint) return fromHint;\n\n return styleProp;\n}\n\nexport function shouldResyncNavChromeStyle(\n renderedStyle: NavChromeStyle,\n style: NavChromeStyle,\n): boolean {\n return renderedStyle !== style;\n}\n","import type { 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 { MenuPlacement } from '../Menu/menu-placement';\nimport { PANEL_NAV_USER_MENU_PLACEMENT } from '../Menu/menu-placement';\nimport 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 /* Recommended `ds-menu` placement — spread onto external user menu instance. /\n menuPlacement: MenuPlacement;\n}\n\nexport { PANEL_NAV_USER_MENU_PLACEMENT };\n","/\n Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through. Pair with `.scroll-edge-fade--at-end` when flush.\n \n @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n /\n\n.scroll-edge-fade {\n --ds-scroll-edge-fade-size: var(--dimension-size-600);\n}\n\n/ Mask gradients use #000 / transparent as luminance stops — not theme colors. /\n/ stylelint-disable color-no-hex /\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.scroll-edge-fade--hidden {\n -webkit-mask-image: none;\n mask-image: none;\n}\n\n/ stylelint-enable color-no-hex /\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n/ ── Theme variables ──────────────────────────────────────────────────────── /\n\n.panel-nav {\n / ─ Sizes ─ /\n --_nav-width: var(--dimension-panel-width-2xs);\n --_nav-width-collapsed: var(--dimension-size-600);\n --_nav-item-height: var(--dimension-size-400, 32px);\n --_nav-padding-x: var(--dimension-space-100, 8px);\n --_nav-padding-y: var(--dimension-space-100, 8px);\n / gear button outer width = padding2 + 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 --ds-interaction-hover: var(--_nav-hover);\n --ds-interaction-pressed: var(--_nav-pressed);\n --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/ ── Default chrome overrides ────────────────────────────────────────────── /\n\n/ Shell-owned chrome (bg + wash) — panel is a transparent frame. /\n:host-context(ds-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 --ds-interaction-hover: var(--_nav-hover);\n --ds-interaction-pressed: var(--_nav-pressed);\n --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/ ── Shell ───────────────────────────────────────────────────────────────── /\n\n.panel-nav {\n display: flex;\n flex-direction: column;\n position: relative;\n width: var(--_nav-width);\n min-width: var(--_nav-width);\n height: 100%;\n background-color: var(--_nav-bg);\n border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n box-sizing: border-box;\n overflow: visible;\n transition:\n width var(--_nav-expand-motion),\n min-width var(--_nav-expand-motion),\n background-color var(--effect-motion-short-3, 200ms ease),\n border-color var(--effect-motion-short-3, 200ms ease);\n font-family: var(--typography-font-family, 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 / Re-assert after unset — required for `.ds-interaction-fill` stacking. /\n position: relative;\n z-index: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-primary);\n flex-shrink: 0;\n box-sizing: border-box;\n transition: color var(--effect-motion-short-3, 200ms ease);\n / Hover/press: `.ds-interaction-fill` (tokens from --_nav-* via --ds-interaction-). /\n}\n\n/* Logo — visible by default; instant swap to toggle on hover (no crossfade overlap) /\n.panel-nav__header-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 2;\n opacity: 1;\n}\n\n.panel-nav__m-mark {\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n display: block;\n}\n\n/ Toggle icon — stacked on logo; under hover wash (::after z-index 3) /\n.panel-nav__header-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n z-index: 2;\n opacity: 0;\n pointer-events: none;\n}\n\n.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 / Re-assert after unset — required for `.ds-interaction-fill` stacking. /\n position: relative;\n z-index: 0;\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050, 4px);\n padding: 0 var(--dimension-space-075, 6px);\n height: var(--dimension-size-400, 32px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n box-sizing: border-box;\n width: 100%;\n user-select: none;\n transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n / Hover/press: `.ds-interaction-fill` — no --selected (icon/type weight only). /\n}\n\n/ ── Active item ─────────────────────────────────────────────────────────── /\n\n.panel-nav__item--active {\n color: var(--_nav-fg-primary);\n / Bold typography via ds-text (text-body-medium-emphasis) on the label /\n}\n\n/ ── Item icon ───────────────────────────────────────────────────────────── /\n\n.panel-nav__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n position: relative;\n z-index: 2;\n}\n\n/ ── Item label ──────────────────────────────────────────────────────────── /\n\n.panel-nav__item-label {\n position: relative;\n z-index: 2;\n flex: 1;\n 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 / stylelint-disable-next-line color-named -- mask luminance stops, not theme colors /\n mask-image: linear-gradient(to right, black 50%, transparent 100%);\n / stylelint-disable-next-line color-named -- mask luminance stops, not theme colors /\n -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n mask-size: 200% 100%;\n -webkit-mask-size: 200% 100%;\n mask-position: 0% 0;\n -webkit-mask-position: 0% 0;\n transition:\n opacity var(--_nav-label-fade-motion) 0ms,\n mask-position var(--_nav-label-fade-motion) 0ms,\n -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n padding: 0 var(--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 z-index: 2;\n right: calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));\n top: calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));\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: padding2 + 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: padding2 + item2 + 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 position: absolute;\n left: var(--_nav-padding-x);\n top: var(--_nav-padding-y);\n --ds-button-unfilled-fg: var(--_nav-fg-secondary);\n --ds-button-unfilled-fg-active: var(--_nav-fg-primary);\n --ds-interaction-hover: var(--_nav-hover);\n --ds-interaction-pressed: var(--_nav-pressed);\n --ds-focus-ring-color: var(--_nav-focus);\n}\n\n/ ── Footer user — absolutely positioned, slides from row to below gear ───── /\n\n.panel-nav__footer-user {\n position: absolute;\n / 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: calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));\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 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 / stylelint-disable-next-line color-named -- near-invisible hit-test fill; not a theme color /\n background: rgba(0, 0, 0, 0.001);\n}\n\n/ Resize overlay line /\n.panel-nav__resize-handle::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: var(--dimension-stroke-width-025, 2px);\n background: var(--color-foreground-primary);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n opacity: 1;\n}\n\n/ ── Reduced motion ──────────────────────────────────────────────────────── /\n\n@media (prefers-reduced-motion: reduce) {\n .panel-nav,\n .panel-nav ,\n .panel-nav ::before,\n .panel-nav ::after,\n .panel-nav__resize-handle,\n .panel-nav__resize-handle::before,\n .panel-nav__resize-handle::after {\n /* Near-instant — browsers treat 0 as \"no transition\" and can skip the end state. /\n transition-duration: var(--effect-animation-duration-instant) !important;\n animation-duration: var(--effect-animation-duration-instant) !important;\n transition-delay: var(--effect-animation-duration-instant) !important;\n }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, Method, 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 PANEL_NAV_USER_MENU_PLACEMENT,\n type PanelNavGroup,\n type PanelNavItem,\n type PanelNavRouterMode,\n type PanelNavUserActionDetail,\n} from './panel-nav-types';\nimport { scrollEdgeFadeClassMap } from '../../utils/scroll-edge-fade';\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 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 onCollapsedChange(_next: boolean, prev: boolean \| undefined) {\n if (prev === undefined) return;\n this.startCollapseAnimation();\n }\n\n @Watch('viewportNarrow')\n onViewportNarrowChange(_next: boolean, prev: boolean \| undefined) {\n if (prev === undefined) return;\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.rovingIndex = 0;\n this.syncActiveFromUrl();\n }\n\n @Watch('activeId')\n @Watch('urlDerivedActiveId')\n onActiveIdChange() {\n / Active route updates aria-current only — roving tab stop stays user-controlled. /\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 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 const widthBefore = panel?.getBoundingClientRect().width ?? 0;\n if (this.transitionEndHandler) {\n panel?.removeEventListener('transitionend', this.transitionEndHandler);\n }\n this.transitionEndHandler = (e: TransitionEvent) => {\n if (e.propertyName === 'width') {\n this.finishCollapseAnimation(panel);\n }\n };\n panel?.addEventListener('transitionend', this.transitionEndHandler);\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (!this.isAnimating) return;\n const widthAfter = panel?.getBoundingClientRect().width ?? 0;\n if (Math.abs(widthAfter - widthBefore) < 1) {\n this.finishCollapseAnimation(panel);\n }\n });\n });\n }\n\n private finishCollapseAnimation(panel: HTMLElement \| null) {\n if (!this.isAnimating) return;\n this.isAnimating = false;\n this.dsChromeTransitionEnd.emit({ source: 'panel-nav' });\n if (this.transitionEndHandler) {\n panel?.removeEventListener('transitionend', this.transitionEndHandler);\n }\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 getFooterRovingIndex(): number {\n return 1 + this.getAllItems().length;\n }\n\n private getUserRovingIndex(): number {\n return this.getFooterRovingIndex() + 1;\n }\n\n private getRovingElement(index: number): HTMLElement \| null {\n const itemCount = this.getAllItems().length;\n if (index === 0) {\n return this.el.querySelector('.panel-nav__header-btn');\n }\n if (index >= 1 && index <= itemCount) {\n const items = this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item');\n return items[index - 1] ?? null;\n }\n if (index === this.getFooterRovingIndex()) {\n return this.el.querySelector('.panel-nav__footer-btn .button-icon');\n }\n if (index === this.getUserRovingIndex()) {\n return this.el.querySelector('.panel-nav__footer-user');\n }\n return null;\n }\n\n private focusRovingAt(index: number) {\n this.rovingIndex = index;\n this.getRovingElement(index)?.focus({ preventScroll: true });\n }\n\n private activateRovingIndex(index: number) {\n const itemCount = this.getAllItems().length;\n const items = this.getAllItems();\n if (index === 0) {\n this.handleToggle();\n return;\n }\n if (index >= 1 && index <= itemCount) {\n this.handleItemClick(items[index - 1].id);\n return;\n }\n if (index === this.getFooterRovingIndex()) {\n this.handleFooterAction();\n return;\n }\n if (index === this.getUserRovingIndex()) {\n const anchor = this.el.querySelector(`#${PANEL_NAV_USER_MENU_ANCHOR_ID}`) as HTMLElement \| null;\n if (anchor) this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n }\n }\n\n private handleRovingKeyDown(e: KeyboardEvent, index: number) {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.activateRovingIndex(index);\n return;\n }\n\n const footerIdx = this.getFooterRovingIndex();\n const userIdx = this.getUserRovingIndex();\n let next: number \| undefined;\n\n switch (e.key) {\n case 'ArrowDown':\n if (index === userIdx) return;\n if (index === footerIdx) next = userIdx;\n else next = index + 1;\n break;\n case 'ArrowUp':\n if (index === 0) return;\n if (index === userIdx) next = footerIdx;\n else if (index === footerIdx) next = footerIdx - 1;\n else next = index - 1;\n break;\n case 'ArrowRight':\n if (index === footerIdx) next = userIdx;\n else return;\n break;\n case 'ArrowLeft':\n if (index === userIdx) next = footerIdx;\n else return;\n break;\n case 'Home':\n e.preventDefault();\n next = 0;\n break;\n case 'End':\n e.preventDefault();\n next = userIdx;\n break;\n default:\n return;\n }\n\n if (next === undefined \|\| next === index) return;\n e.preventDefault();\n this.focusRovingAt(next);\n }\n\n private handleItemClick(id: string) {\n this.dsNavSelect.emit(id);\n }\n\n private handleToggle() {\n this.applyToggle(!this.collapsed);\n }\n\n /* Toggle expanded/collapsed panel nav — used by shell keyboard shortcuts. /\n @Method()\n async toggleCollapsed() {\n this.handleToggle();\n }\n\n private handleFooterAction() {\n this.dsNavFooterAction.emit();\n }\n\n private handleUserAction(e: MouseEvent) {\n const anchor = e.currentTarget as HTMLElement;\n this.dsNavUserAction.emit({ anchor, menuPlacement: PANEL_NAV_USER_MENU_PLACEMENT });\n }\n\n private clearEdgeOverlayTimer() {\n if (this.edgeOverlayTimer !== null) {\n window.clearTimeout(this.edgeOverlayTimer);\n this.edgeOverlayTimer = null;\n }\n }\n\n private handleResizeHandleMouseEnter() {\n this.clearEdgeOverlayTimer();\n this.edgeOverlayTimer = window.setTimeout(() => {\n this.showEdgeOverlay = true;\n this.edgeOverlayTimer = null;\n }, 500);\n }\n\n private handleResizeHandleMouseLeave() {\n if (this.isDragging) return;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n }\n\n private handleResizeHandleMouseDown(e: MouseEvent) {\n e.preventDefault();\n e.stopPropagation();\n\n const wasCollapsed = this.collapsed \|\| this.viewportNarrow;\n this.isDragging = true;\n this.dragStartX = e.clientX;\n this.didSnap = false;\n this.lastDeltaX = 0;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n const onMove = (ev: MouseEvent) => {\n const deltaX = ev.clientX - this.dragStartX;\n this.lastDeltaX = Math.abs(deltaX);\n if (this.didSnap) return;\n if (!wasCollapsed && deltaX < -8) {\n this.applyToggle(true);\n this.didSnap = true;\n } else if (wasCollapsed && deltaX > 8) {\n this.applyToggle(false);\n this.didSnap = true;\n }\n };\n\n const onUp = () => {\n if (!this.didSnap && this.lastDeltaX < 3) {\n this.applyToggle(!wasCollapsed);\n }\n this.isDragging = false;\n this.showEdgeOverlay = false;\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('mouseup', onUp);\n this.globalMouseMoveHandler = undefined;\n this.globalMouseUpHandler = undefined;\n };\n\n this.globalMouseMoveHandler = onMove;\n this.globalMouseUpHandler = onUp;\n window.addEventListener('mousemove', onMove);\n window.addEventListener('mouseup', onUp);\n }\n\n private renderFooterAction(isDashboardChrome: boolean) {\n // Short chrome labels — same string for tip + aria (not \"Open/Go to …\").\n const footerLabel = isDashboardChrome ? 'Settings' : 'Dashboard';\n return (\n <ds-tooltip label={footerLabel} side=\"right\" size=\"sm\">\n <ds-button-unfilled variant=\"icon\"\n class=\"panel-nav__footer-btn\"\n icon={isDashboardChrome ? 'Gear' : 'Dashboard'}\n activeFill={false}\n hasBorder={false}\n focusTabIndex={this.rovingIndex === this.getFooterRovingIndex() ? 0 : -1}\n aria-label={footerLabel}\n onDsClick={() => this.handleFooterAction()}\n onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getFooterRovingIndex())}\n onFocusin={() => { this.rovingIndex = this.getFooterRovingIndex(); }}\n />\n </ds-tooltip>\n );\n }\n\n private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {\n // Always wrap so collapse morph CSS can transition on a stable button node.\n // Tip only when collapsed (empty label → ds-tooltip skips show).\n const tipLabel = collapsed ? 'Account' : '';\n const userButton = (\n <button\n type=\"button\"\n id={PANEL_NAV_USER_MENU_ANCHOR_ID}\n class=\"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill\"\n tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}\n aria-label=\"Account\"\n onClick={(e) => this.handleUserAction(e)}\n onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}\n onFocus={() => { this.rovingIndex = this.getUserRovingIndex(); }}\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 );\n\n return (\n <ds-tooltip label={tipLabel} side=\"right\" size=\"sm\">\n {userButton}\n </ds-tooltip>\n );\n }\n\n private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n const isActive = item.id === this.effectiveActiveId;\n const rovingPosition = idx + 1;\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: {\n 'panel-nav__item': true,\n 'panel-nav__item--active': isActive,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': true,\n },\n 'aria-current': isActive ? ('page' as const) : undefined,\n tabIndex: rovingPosition === this.rovingIndex ? 0 : -1,\n onClick: () => this.handleItemClick(item.id),\n onKeyDown: (e: KeyboardEvent) => this.handleRovingKeyDown(e, rovingPosition),\n onFocus: () => { this.rovingIndex = rovingPosition; },\n };\n\n const useAnchor = this.routerMode === 'anchor' && item.href;\n const control = useAnchor\n ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n\n // Always wrap so label fade CSS can transition on a stable item node.\n // Tip only when collapsed (empty label → ds-tooltip skips show).\n return (\n <ds-tooltip label={collapsed ? item.label : ''} side=\"right\" size=\"sm\">\n {control}\n </ds-tooltip>\n );\n }\n\n 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 };\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 ds-focus-ring-inset ds-interaction-fill\"\n tabIndex={this.rovingIndex === 0 ? 0 : -1}\n onClick={() => this.handleToggle()}\n onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, 0)}\n onFocus={() => { this.rovingIndex = 0; }}\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 ...scrollEdgeFadeClassMap({ edges: 'bottom' }),\n }}\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 {this.renderFooterAction(isDashboardChrome)}\n {this.renderFooterUser(collapsed, userName, userInitial)}\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 CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as o,a as i,t as a}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-EK1hOP19.js";import{d as r}from"./p-CuRjYmBk.js";import{d}from"./p-B82KZX9D.js";import{d as c}from"./p-DohXlNCJ.js";const h="search";const p={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function f(e,s){if(s){return n(s,[])}return e??[]}function m(e,s){return!e&&s==="idle"}function u(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const b=()=>`.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-reverse;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[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{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=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.rovingIndex=0;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=u(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return f(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const s=e.find((e=>e.id===h));const t=e.filter((e=>e.id!==h));return s?[s,...t]:t}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",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;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]??""}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){const t=e.ariaLabel??p[e.id];return o("ds-tooltip",{key:e.id,label:t,side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.orderedRailItems;const t=s.find((e=>e.id===h));const a=s.filter((e=>e.id!==h));const n=this.isDrawerPresent();const l=m(this.open,this.motion);return o(i,{key:"3d2ef377fa890a84ef0e913e375d425095815ce3",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":l},role:"complementary","aria-label":"Tools"},o("div",{key:"c067a6b972a8959c77e16248782d3b878cdbdcf8",class:"panel-tools__layout"},o("nav",{key:"1ddce6769574619296b7681c1ffdb23ffbca1a48",class:"panel-tools__rail","aria-label":"Tool shortcuts"},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t,0)):null,o("div",{key:"4d9eb84c906abce203cb9816f9508c7a014038d7",class:"panel-tools__rail-body"},a.map(((e,s)=>this.renderRailAction(e,t?s+1:s))))),o("div",{key:"3d00c3e2f2a231dde45947d30f73cdee92f44306",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"9accc3df7eed1a597c4ef30ee6c518540b3c6b3d",class:"panel-tools__drawer-surface"},o("header",{key:"6f1d13c16962fa4e031c5c8677343cb99a5156e9",class:"panel-tools__header"},o("span",{key:"4d181898366fb5234d840ddc491afc50bd83cd03",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"ee436cbace6d5e6fd961f2ba5b7066a949d638ee",class:"panel-tools__body"},o("div",{key:"2a23d5871290d6db98d2df05bd53207a91a4b358",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"067a45dc5b79990d68473fa3064c630b064d17b7",name:"search"})),o("div",{key:"b09766c3b26366d88a93be54ec453ec0e9ec2ed4",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"b40089d13f0467fd8d1d8a718f110b25e77f146f",name:"messages"})),o("div",{key:"3d709a1d529f73cb0d4b26b0fece7995aef4811d",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"ed124695c60940156767ca95bb2153bbcd8274d3",name:"stacks"})),o("div",{key:"1bfd84d1425452180b8e0c5662036ec45181e31e",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"a2ef35b1c8548ac00f7d1d91816e09516eee40f6",name:"activity"})),o("div",{key:"b040b2e781aa88e9a7e1023b1c5bcb950f294d99",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"6017d6b4f2c1ccd87f995a7932e525f52cf10dc5",name:"agents"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return b()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(a(e))){customElements.define(a(e),g)}break;case"ds-badge":if(!customElements.get(a(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){r()}break;case"ds-icon":if(!customElements.get(a(e))){d()}break;case"ds-tooltip":if(!customElements.get(a(e))){c()}break}}))}v();const _=g;const y=v;export{_ as DsPanelTools,y as defineCustomElement};
+import{p as e,H as s,c as t,h as o,a as i,t as a}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-EK1hOP19.js";import{d as r}from"./p-CuRjYmBk.js";import{d}from"./p-B82KZX9D.js";import{d as c}from"./p-CDHRJqea.js";const h="search";const p={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function f(e,s){if(s){return n(s,[])}return e??[]}function m(e,s){return!e&&s==="idle"}function u(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const b=()=>`.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-reverse;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[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{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=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.rovingIndex=0;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=u(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return f(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const s=e.find((e=>e.id===h));const t=e.filter((e=>e.id!==h));return s?[s,...t]:t}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",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;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]??""}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){const t=e.ariaLabel??p[e.id];return o("ds-tooltip",{key:e.id,label:t,side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.orderedRailItems;const t=s.find((e=>e.id===h));const a=s.filter((e=>e.id!==h));const n=this.isDrawerPresent();const l=m(this.open,this.motion);return o(i,{key:"3d2ef377fa890a84ef0e913e375d425095815ce3",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":l},role:"complementary","aria-label":"Tools"},o("div",{key:"c067a6b972a8959c77e16248782d3b878cdbdcf8",class:"panel-tools__layout"},o("nav",{key:"1ddce6769574619296b7681c1ffdb23ffbca1a48",class:"panel-tools__rail","aria-label":"Tool shortcuts"},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t,0)):null,o("div",{key:"4d9eb84c906abce203cb9816f9508c7a014038d7",class:"panel-tools__rail-body"},a.map(((e,s)=>this.renderRailAction(e,t?s+1:s))))),o("div",{key:"3d00c3e2f2a231dde45947d30f73cdee92f44306",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"9accc3df7eed1a597c4ef30ee6c518540b3c6b3d",class:"panel-tools__drawer-surface"},o("header",{key:"6f1d13c16962fa4e031c5c8677343cb99a5156e9",class:"panel-tools__header"},o("span",{key:"4d181898366fb5234d840ddc491afc50bd83cd03",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"ee436cbace6d5e6fd961f2ba5b7066a949d638ee",class:"panel-tools__body"},o("div",{key:"2a23d5871290d6db98d2df05bd53207a91a4b358",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"067a45dc5b79990d68473fa3064c630b064d17b7",name:"search"})),o("div",{key:"b09766c3b26366d88a93be54ec453ec0e9ec2ed4",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"b40089d13f0467fd8d1d8a718f110b25e77f146f",name:"messages"})),o("div",{key:"3d709a1d529f73cb0d4b26b0fece7995aef4811d",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"ed124695c60940156767ca95bb2153bbcd8274d3",name:"stacks"})),o("div",{key:"1bfd84d1425452180b8e0c5662036ec45181e31e",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"a2ef35b1c8548ac00f7d1d91816e09516eee40f6",name:"activity"})),o("div",{key:"b040b2e781aa88e9a7e1023b1c5bcb950f294d99",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"6017d6b4f2c1ccd87f995a7932e525f52cf10dc5",name:"agents"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return b()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(a(e))){customElements.define(a(e),g)}break;case"ds-badge":if(!customElements.get(a(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){r()}break;case"ds-icon":if(!customElements.get(a(e))){d()}break;case"ds-tooltip":if(!customElements.get(a(e))){c()}break}}))}v();const _=g;const y=v;export{_ as DsPanelTools,y as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

package/dist/components/ds-tooltip.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-DohXlNCJ.js";const t=o;const p=s;export{t as DsTooltip,p as defineCustomElement};
+import{T as o,d as s}from"./p-CDHRJqea.js";const t=o;const a=s;export{t as DsTooltip,a as defineCustomElement};
 //# sourceMappingURL=ds-tooltip.js.map

package/dist/components/p-CDHRJqea.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{a as e,T as r}from"./p-B_g8X0eh.js";import{r as a}from"./p-BWUTr_XN.js";import{r as h}from"./p-C1cBr-Ri.js";const l=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-label.sc-ds-tooltip{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.key-hint.sc-ds-tooltip{width:var(--ds-control-icon, var(--dimension-size-200));height:var(--ds-control-icon, var(--dimension-size-200));flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:"var(--typography-lineheight-md)",sm:"var(--typography-lineheight-sm)",xs:"var(--typography-lineheight-xs)"};const p={md:r.size400,sm:r.size300,xs:r.size200};let u=0;let m=0;let f=null;const g=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=e.space050;this.alignOffset=0;this.delay=r.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++m}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(f===this)f=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen\|\|this.popupEl)this.hideInstant();return}if(!this.popupEl\|\|!this.isOpen)return;this.renderPopupContent();this.calculatePosition()}get viewportPadPx(){return a(r.space050,r.space050)}get sideOffsetPx(){return a(this.sideOffset,r.space050)}get alignOffsetPx(){return a(this.alignOffset,0)}get hoverDelayMs(){return h(this.delay,r.animationDelayMedium3)}get instantReopenMs(){return h(r.animationDurationMedium1,r.animationDurationMedium1)}get fadeOutMs(){return h(r.motionShort3,r.animationDurationShort3)}get tooltipFallbackWidthPx(){return a(r.tooltipFallbackWidth,r.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=p[this.size];return a(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s)return;this.anchor=s;s.setAttribute("aria-describedby",this.tooltipId);s.addEventListener("mouseenter",this.mouseEnterHandler);s.addEventListener("mouseleave",this.mouseLeaveHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}hideInstant(){this.clearTimers();u=Date.now();if(f===this)f=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-u<this.instantReopenMs;if(f&&f!==this){f.hideInstant();t=true}f=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;u=Date.now();if(f===this)f=null;if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.calculatePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=d[this.size];const i=c[this.size];const s=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const o="sc-ds-tooltip";const n=this.shortcutKey&&this.shortcutKeyPosition==="start"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";const e=this.shortcutKey&&this.shortcutKeyPosition==="end"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";this.popupEl.innerHTML=`<div class="tooltip-inner ${s} ${o}">`+n+`<span class="tooltip-label ${t} ${o}" style="line-height:${i}">${v(this.label)}</span>`+e+`</div>`}calculatePosition(){if(!this.anchor\|\|!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth\|\|this.tooltipFallbackWidthPx;const o=t.offsetHeight\|\|this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,h=0;switch(this.side){case"top":h=i.top-o-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"bottom":h=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"left":a=i.left-s-n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break;case"right":a=i.right+n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break}const l=Math.min(Math.max(a,r),window.innerWidth-s-r);const d=Math.min(Math.max(h,r),window.innerHeight-o-r);t.style.transform=`translate(${Math.round(l)}px, ${Math.round(d)}px)`}render(){return s(o,{key:"608e8c701ab1755da852125ca3a988345f9285f5",style:{display:"contents"}},s("slot",{key:"5d7c992aefe4b18a4e9c10b30a8cc177c7e280d9"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return l()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function v(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function y(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),g)}break}}))}y();export{g as T,y as d};
2	+ //# sourceMappingURL=p-CDHRJqea.js.map

package/dist/components/p-CDHRJqea.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["tooltipCss","TEXT_VARIANT","md","sm","xs","LINE_HEIGHT","FALLBACK_HEIGHT","TOKEN_DEFAULTS","size400","size300","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","label","trim","hideInstant","renderPopupContent","calculatePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","el","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","remove","Date","now","instant","mountPopup","setTimeout","classList","add","tip","document","createElement","id","className","Object","assign","style","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","lineHeight","density","sc","startKey","shortcutKey","escapeHtml","endKey","innerHTML","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display","value","replace"],"sources":["src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n.tooltip-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n animation: none;\n opacity: 1;\n}\n\n.tooltip-popup--closing {\n animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n.key-hint {\n width: var(--ds-control-icon, var(--dimension-size-200));\n height: var(--ds-control-icon, var(--dimension-size-200));\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n border-bottom-width: var(--dimension-stroke-width-025);\n border-radius: var(--dimension-radius-025);\n color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\n/** Body text per control-density size (regular weight — not emphasis). */\nconst TEXT_VARIANT: Record<TooltipSize, string> = {\n md: 'text-body-medium',\n sm: 'text-body-small',\n xs: 'text-caption',\n};\n\nconst LINE_HEIGHT: Record<TooltipSize, string> = {\n md: 'var(--typography-lineheight-md)',\n sm: 'var(--typography-lineheight-sm)',\n xs: 'var(--typography-lineheight-xs)',\n};\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n md: TOKEN_DEFAULTS.size400,\n sm: TOKEN_DEFAULTS.size300,\n xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n tag: 'ds-tooltip',\n styleUrl: 'Tooltip.css',\n scoped: true,\n})\nexport class Tooltip {\n @Element() el!: HTMLElement;\n\n /**\n * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n */\n @Prop() label!: string;\n\n /** Control density (height, padding, type). */\n @Prop() size: TooltipSize = 'md';\n\n @Prop() side: TooltipSide = 'top';\n @Prop() align: TooltipAlign = 'center';\n /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n /**\n * Hover show delay before the tooltip appears.\n * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n * initial hover/focus show only — after a recent dismiss, reopen is instant.\n * Prefer the default; override only for denser chrome or rare/destructive actions.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n @Prop() shortcutKey: string | undefined;\n @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private anchor: HTMLElement | null = null;\n private popupEl: HTMLElement | null = null;\n private skipEnterAnimation = false;\n private isOpen = false;\n private mouseEnterHandler: () => void = () => this.show();\n private mouseLeaveHandler: () => void = () => this.hide();\n /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n private focusHandler: () => void = () => this.show();\n private blurHandler: (e: FocusEvent) => void = (e) => {\n const next = e.relatedTarget as Node | null;\n if (next && this.anchor?.contains(next)) return;\n this.hide();\n };\n\n componentDidLoad() {\n this.bindAnchor();\n }\n\n disconnectedCallback() {\n if (activeTooltip === this) activeTooltip = null;\n this.unbindAnchor();\n this.clearTimers();\n this.destroyPopup();\n }\n\n @Watch('label')\n @Watch('size')\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n @Watch('shortcutKey')\n @Watch('shortcutKeyPosition')\n onContentOrPositionChange() {\n if (!this.label?.trim()) {\n if (this.isOpen || this.popupEl) this.hideInstant();\n return;\n }\n if (!this.popupEl || !this.isOpen) return;\n this.renderPopupContent();\n this.calculatePosition();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get hoverDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n }\n\n private get instantReopenMs(): number {\n return resolveCssTimeMs(\n TOKEN_DEFAULTS.animationDurationMedium1,\n TOKEN_DEFAULTS.animationDurationMedium1,\n );\n }\n\n private get fadeOutMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get tooltipFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n }\n\n private get tooltipFallbackHeightPx(): number {\n const token = FALLBACK_HEIGHT[this.size];\n return resolveCssLengthPx(token, token);\n }\n\n private bindAnchor() {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const slotted = slot?.assignedElements?.() ?? [];\n const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (!child) return;\n this.anchor = child;\n child.setAttribute('aria-describedby', this.tooltipId);\n child.addEventListener('mouseenter', this.mouseEnterHandler);\n child.addEventListener('mouseleave', this.mouseLeaveHandler);\n child.addEventListener('focusin', this.focusHandler);\n child.addEventListener('focusout', this.blurHandler);\n }\n\n private unbindAnchor() {\n if (!this.anchor) return;\n this.anchor.removeAttribute('aria-describedby');\n this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n this.anchor.removeEventListener('focusin', this.focusHandler);\n this.anchor.removeEventListener('focusout', this.blurHandler);\n this.anchor = null;\n }\n\n private clearTimers() {\n if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private destroyPopup() {\n if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\n }\n\n /** Drop the open tip immediately (warm handoff to another tooltip). */\n private hideInstant() {\n this.clearTimers();\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }\n\n private show() {\n // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n // but no tip should appear.\n if (!this.label?.trim()) return;\n this.clearTimers();\n let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n if (activeTooltip && activeTooltip !== this) {\n activeTooltip.hideInstant();\n instant = true;\n }\n activeTooltip = this;\n this.skipEnterAnimation = instant;\n if (instant) {\n this.mountPopup();\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n if (!this.label?.trim()) return;\n this.mountPopup();\n }, this.hoverDelayMs);\n }\n\n private hide() {\n this.clearTimers();\n if (!this.popupEl && !this.isOpen) return;\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n if (!this.popupEl) {\n this.isOpen = false;\n return;\n }\n this.popupEl.classList.remove('tooltip-popup--instant');\n this.popupEl.classList.add('tooltip-popup--closing');\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }, this.fadeOutMs);\n }\n\n private mountPopup() {\n if (!this.popupEl) {\n const tip = document.createElement('div');\n tip.id = this.tooltipId;\n tip.setAttribute('role', 'tooltip');\n // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n tip.className = 'tooltip-popup sc-ds-tooltip';\n Object.assign(tip.style, {\n position: 'fixed',\n left: '0',\n top: '0',\n zIndex: 'var(--dimension-z-index-tooltip)',\n pointerEvents: 'none',\n });\n document.body.appendChild(tip);\n this.popupEl = tip;\n }\n\n this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n this.popupEl.classList.remove('tooltip-popup--closing');\n this.renderPopupContent();\n this.calculatePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = TEXT_VARIANT[this.size];\n const lineHeight = LINE_HEIGHT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const startKey =\n this.shortcutKey && this.shortcutKeyPosition === 'start'\n ? `<div class=\"key-hint ${sc}\" aria-hidden=\"true\"><span class=\"text-caption-emphasis ${sc}\">${escapeHtml(this.shortcutKey)}</span></div>`\n : '';\n const endKey =\n this.shortcutKey && this.shortcutKeyPosition === 'end'\n ? `<div class=\"key-hint ${sc}\" aria-hidden=\"true\"><span class=\"text-caption-emphasis ${sc}\">${escapeHtml(this.shortcutKey)}</span></div>`\n : '';\n\n this.popupEl.innerHTML =\n `<div class=\"tooltip-inner ${density} ${sc}\">` +\n startKey +\n `<span class=\"tooltip-label ${textVariant} ${sc}\" style=\"line-height:${lineHeight}\">${escapeHtml(this.label)}</span>` +\n endKey +\n `</div>`;\n }\n\n private calculatePosition() {\n if (!this.anchor || !this.popupEl) return;\n const tip = this.popupEl;\n const a = this.anchor.getBoundingClientRect();\n const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n const sideOffset = this.sideOffsetPx;\n const alignOffset = this.alignOffsetPx;\n const vpPad = this.viewportPadPx;\n let x = 0, y = 0;\n\n switch (this.side) {\n case 'top':\n y = a.top - th - sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'bottom':\n y = a.bottom + sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'left':\n x = a.left - tw - sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n case 'right':\n x = a.right + sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n }\n\n const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <slot />\n </Host>\n );\n }\n}\n\nfunction escapeHtml(value: string): string {\n return value\n .replace(/&/g, '&')\n .replace(/</g, '<')\n .replace(/>/g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, ''');\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/components/Tooltip/Tooltip.d.ts CHANGED Viewed

@@ -8,6 +8,10 @@ export type TooltipSize = 'md' | 'sm' | 'xs';
  */
 export declare class Tooltip {
     el: HTMLElement;
+    /**
+     * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay
+     * mounted for layout/animation stability (e.g. PanelNav expand/collapse).
+     */
     label: string;
     /** Control density (height, padding, type). */
     size: TooltipSize;

package/dist/types/components.d.ts CHANGED Viewed

@@ -1122,6 +1122,9 @@ export namespace Components {
           * @default TOKEN_DEFAULTS.animationDelayMedium3
          */
         "delay": number | string;
+        /**
+          * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay mounted for layout/animation stability (e.g. PanelNav expand/collapse).
+         */
         "label": string;
         "shortcutKey": string | undefined;
         /**
@@ -3026,6 +3029,9 @@ declare namespace LocalJSX {
           * @default TOKEN_DEFAULTS.animationDelayMedium3
          */
         "delay"?: number | string;
+        /**
+          * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay mounted for layout/animation stability (e.g. PanelNav expand/collapse).
+         */
         "label": string;
         "shortcutKey"?: string | undefined;
         /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/src/wc/components/PanelNav/PanelNav.tsx CHANGED Viewed

@@ -481,7 +481,8 @@ export class PanelNav {
   }
   private renderFooterAction(isDashboardChrome: boolean) {
-    const footerLabel = isDashboardChrome ? 'Open settings' : 'Go to dashboard';
+    // Short chrome labels — same string for tip + aria (not "Open/Go to …").
+    const footerLabel = isDashboardChrome ? 'Settings' : 'Dashboard';
     return (
       <ds-tooltip label={footerLabel} side="right" size="sm">
         <ds-button-unfilled variant="icon"
@@ -500,14 +501,16 @@ export class PanelNav {
   }
   private renderFooterUser(collapsed: boolean, userName: string, userInitial: string) {
-    const userLabel = collapsed ? `User: ${userName}` : `User menu for ${userName}`;
+    // Always wrap so collapse morph CSS can transition on a stable button node.
+    // Tip only when collapsed (empty label → ds-tooltip skips show).
+    const tipLabel = collapsed ? 'Account' : '';
     const userButton = (
       <button
         type="button"
         id={PANEL_NAV_USER_MENU_ANCHOR_ID}
         class="panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill"
         tabIndex={this.rovingIndex === this.getUserRovingIndex() ? 0 : -1}
-        aria-label={userLabel}
+        aria-label="Account"
         onClick={(e) => this.handleUserAction(e)}
         onKeyDown={(e: KeyboardEvent) => this.handleRovingKeyDown(e, this.getUserRovingIndex())}
         onFocus={() => { this.rovingIndex = this.getUserRovingIndex(); }}
@@ -535,10 +538,8 @@ export class PanelNav {
       </button>
     );
-    if (!collapsed) return userButton;
     return (
-      <ds-tooltip label={userLabel} side="right" size="sm">
+      <ds-tooltip label={tipLabel} side="right" size="sm">
         {userButton}
       </ds-tooltip>
     );
@@ -593,10 +594,10 @@ export class PanelNav {
       ? <a {...sharedProps} href={item.href}>{itemContent}</a>
       : <button {...sharedProps} type="button">{itemContent}</button>;
-    if (!collapsed) return control;
+    // Always wrap so label fade CSS can transition on a stable item node.
+    // Tip only when collapsed (empty label → ds-tooltip skips show).
     return (
-      <ds-tooltip label={item.label} side="right" size="sm">
+      <ds-tooltip label={collapsed ? item.label : ''} side="right" size="sm">
         {control}
       </ds-tooltip>
     );

package/src/wc/components/Tooltip/Tooltip.tsx CHANGED Viewed

@@ -42,6 +42,10 @@ let activeTooltip: Tooltip | null = null;
 export class Tooltip {
   @Element() el!: HTMLElement;
+  /**
+   * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay
+   * mounted for layout/animation stability (e.g. PanelNav expand/collapse).
+   */
   @Prop() label!: string;
   /** Control density (height, padding, type). */
@@ -101,6 +105,10 @@ export class Tooltip {
   @Watch('shortcutKey')
   @Watch('shortcutKeyPosition')
   onContentOrPositionChange() {
+    if (!this.label?.trim()) {
+      if (this.isOpen || this.popupEl) this.hideInstant();
+      return;
+    }
     if (!this.popupEl || !this.isOpen) return;
     this.renderPopupContent();
     this.calculatePosition();
@@ -187,6 +195,9 @@ export class Tooltip {
   }
   private show() {
+    // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)
+    // but no tip should appear.
+    if (!this.label?.trim()) return;
     this.clearTimers();
     let instant = Date.now() - lastDismissedAt < this.instantReopenMs;
     if (activeTooltip && activeTooltip !== this) {
@@ -201,6 +212,7 @@ export class Tooltip {
     }
     this.delayTimer = setTimeout(() => {
       this.delayTimer = null;
+      if (!this.label?.trim()) return;
       this.mountPopup();
     }, this.hoverDelayMs);
   }

package/src/wc/components.d.ts CHANGED Viewed

@@ -1122,6 +1122,9 @@ export namespace Components {
           * @default TOKEN_DEFAULTS.animationDelayMedium3
          */
         "delay": number | string;
+        /**
+          * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay mounted for layout/animation stability (e.g. PanelNav expand/collapse).
+         */
         "label": string;
         "shortcutKey": string | undefined;
         /**
@@ -3026,6 +3029,9 @@ declare namespace LocalJSX {
           * @default TOKEN_DEFAULTS.animationDelayMedium3
          */
         "delay"?: number | string;
+        /**
+          * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay mounted for layout/animation stability (e.g. PanelNav expand/collapse).
+         */
         "label": string;
         "shortcutKey"?: string | undefined;
         /**

package/dist/components/p-DohXlNCJ.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{a as e,T as r}from"./p-B_g8X0eh.js";import{r as a}from"./p-BWUTr_XN.js";import{r as h}from"./p-C1cBr-Ri.js";const d=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-label.sc-ds-tooltip{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.key-hint.sc-ds-tooltip{width:var(--ds-control-icon, var(--dimension-size-200));height:var(--ds-control-icon, var(--dimension-size-200));flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const l={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:"var(--typography-lineheight-md)",sm:"var(--typography-lineheight-sm)",xs:"var(--typography-lineheight-xs)"};const p={md:r.size400,sm:r.size300,xs:r.size200};let u=0;let m=0;let f=null;const g=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=e.space050;this.alignOffset=0;this.delay=r.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++m}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(f===this)f=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.popupEl\|\|!this.isOpen)return;this.renderPopupContent();this.calculatePosition()}get viewportPadPx(){return a(r.space050,r.space050)}get sideOffsetPx(){return a(this.sideOffset,r.space050)}get alignOffsetPx(){return a(this.alignOffset,0)}get hoverDelayMs(){return h(this.delay,r.animationDelayMedium3)}get instantReopenMs(){return h(r.animationDurationMedium1,r.animationDurationMedium1)}get fadeOutMs(){return h(r.motionShort3,r.animationDurationShort3)}get tooltipFallbackWidthPx(){return a(r.tooltipFallbackWidth,r.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=p[this.size];return a(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s)return;this.anchor=s;s.setAttribute("aria-describedby",this.tooltipId);s.addEventListener("mouseenter",this.mouseEnterHandler);s.addEventListener("mouseleave",this.mouseLeaveHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}hideInstant(){this.clearTimers();u=Date.now();if(f===this)f=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){this.clearTimers();let t=Date.now()-u<this.instantReopenMs;if(f&&f!==this){f.hideInstant();t=true}f=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;u=Date.now();if(f===this)f=null;if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.calculatePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=l[this.size];const i=c[this.size];const s=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const o="sc-ds-tooltip";const n=this.shortcutKey&&this.shortcutKeyPosition==="start"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";const e=this.shortcutKey&&this.shortcutKeyPosition==="end"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";this.popupEl.innerHTML=`<div class="tooltip-inner ${s} ${o}">`+n+`<span class="tooltip-label ${t} ${o}" style="line-height:${i}">${v(this.label)}</span>`+e+`</div>`}calculatePosition(){if(!this.anchor\|\|!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth\|\|this.tooltipFallbackWidthPx;const o=t.offsetHeight\|\|this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,h=0;switch(this.side){case"top":h=i.top-o-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"bottom":h=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"left":a=i.left-s-n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break;case"right":a=i.right+n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break}const d=Math.min(Math.max(a,r),window.innerWidth-s-r);const l=Math.min(Math.max(h,r),window.innerHeight-o-r);t.style.transform=`translate(${Math.round(d)}px, ${Math.round(l)}px)`}render(){return s(o,{key:"95a50ec851eddaa0a12d446389f12b83890364dd",style:{display:"contents"}},s("slot",{key:"b9408aeca3e0109c21edfd2a876ceeecd3f0a706"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return d()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function v(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function y(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),g)}break}}))}y();export{g as T,y as d};
2	- //# sourceMappingURL=p-DohXlNCJ.js.map

package/dist/components/p-DohXlNCJ.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["tooltipCss","TEXT_VARIANT","md","sm","xs","LINE_HEIGHT","FALLBACK_HEIGHT","TOKEN_DEFAULTS","size400","size300","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","renderPopupContent","calculatePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","el","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","remove","hideInstant","Date","now","instant","mountPopup","setTimeout","classList","add","tip","document","createElement","id","className","Object","assign","style","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","lineHeight","density","sc","startKey","shortcutKey","escapeHtml","endKey","innerHTML","label","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display","value","replace"],"sources":["src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n.tooltip-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n animation: none;\n opacity: 1;\n}\n\n.tooltip-popup--closing {\n animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n.key-hint {\n width: var(--ds-control-icon, var(--dimension-size-200));\n height: var(--ds-control-icon, var(--dimension-size-200));\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n border-bottom-width: var(--dimension-stroke-width-025);\n border-radius: var(--dimension-radius-025);\n color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\n/** Body text per control-density size (regular weight — not emphasis). */\nconst TEXT_VARIANT: Record<TooltipSize, string> = {\n md: 'text-body-medium',\n sm: 'text-body-small',\n xs: 'text-caption',\n};\n\nconst LINE_HEIGHT: Record<TooltipSize, string> = {\n md: 'var(--typography-lineheight-md)',\n sm: 'var(--typography-lineheight-sm)',\n xs: 'var(--typography-lineheight-xs)',\n};\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n md: TOKEN_DEFAULTS.size400,\n sm: TOKEN_DEFAULTS.size300,\n xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n tag: 'ds-tooltip',\n styleUrl: 'Tooltip.css',\n scoped: true,\n})\nexport class Tooltip {\n @Element() el!: HTMLElement;\n\n @Prop() label!: string;\n\n /** Control density (height, padding, type). */\n @Prop() size: TooltipSize = 'md';\n\n @Prop() side: TooltipSide = 'top';\n @Prop() align: TooltipAlign = 'center';\n /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n /**\n * Hover show delay before the tooltip appears.\n * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n * initial hover/focus show only — after a recent dismiss, reopen is instant.\n * Prefer the default; override only for denser chrome or rare/destructive actions.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n @Prop() shortcutKey: string | undefined;\n @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private anchor: HTMLElement | null = null;\n private popupEl: HTMLElement | null = null;\n private skipEnterAnimation = false;\n private isOpen = false;\n private mouseEnterHandler: () => void = () => this.show();\n private mouseLeaveHandler: () => void = () => this.hide();\n /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n private focusHandler: () => void = () => this.show();\n private blurHandler: (e: FocusEvent) => void = (e) => {\n const next = e.relatedTarget as Node | null;\n if (next && this.anchor?.contains(next)) return;\n this.hide();\n };\n\n componentDidLoad() {\n this.bindAnchor();\n }\n\n disconnectedCallback() {\n if (activeTooltip === this) activeTooltip = null;\n this.unbindAnchor();\n this.clearTimers();\n this.destroyPopup();\n }\n\n @Watch('label')\n @Watch('size')\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n @Watch('shortcutKey')\n @Watch('shortcutKeyPosition')\n onContentOrPositionChange() {\n if (!this.popupEl || !this.isOpen) return;\n this.renderPopupContent();\n this.calculatePosition();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get hoverDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n }\n\n private get instantReopenMs(): number {\n return resolveCssTimeMs(\n TOKEN_DEFAULTS.animationDurationMedium1,\n TOKEN_DEFAULTS.animationDurationMedium1,\n );\n }\n\n private get fadeOutMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get tooltipFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n }\n\n private get tooltipFallbackHeightPx(): number {\n const token = FALLBACK_HEIGHT[this.size];\n return resolveCssLengthPx(token, token);\n }\n\n private bindAnchor() {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const slotted = slot?.assignedElements?.() ?? [];\n const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (!child) return;\n this.anchor = child;\n child.setAttribute('aria-describedby', this.tooltipId);\n child.addEventListener('mouseenter', this.mouseEnterHandler);\n child.addEventListener('mouseleave', this.mouseLeaveHandler);\n child.addEventListener('focusin', this.focusHandler);\n child.addEventListener('focusout', this.blurHandler);\n }\n\n private unbindAnchor() {\n if (!this.anchor) return;\n this.anchor.removeAttribute('aria-describedby');\n this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n this.anchor.removeEventListener('focusin', this.focusHandler);\n this.anchor.removeEventListener('focusout', this.blurHandler);\n this.anchor = null;\n }\n\n private clearTimers() {\n if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private destroyPopup() {\n if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\n }\n\n /** Drop the open tip immediately (warm handoff to another tooltip). */\n private hideInstant() {\n this.clearTimers();\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }\n\n private show() {\n this.clearTimers();\n let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n if (activeTooltip && activeTooltip !== this) {\n activeTooltip.hideInstant();\n instant = true;\n }\n activeTooltip = this;\n this.skipEnterAnimation = instant;\n if (instant) {\n this.mountPopup();\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n this.mountPopup();\n }, this.hoverDelayMs);\n }\n\n private hide() {\n this.clearTimers();\n if (!this.popupEl && !this.isOpen) return;\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n if (!this.popupEl) {\n this.isOpen = false;\n return;\n }\n this.popupEl.classList.remove('tooltip-popup--instant');\n this.popupEl.classList.add('tooltip-popup--closing');\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }, this.fadeOutMs);\n }\n\n private mountPopup() {\n if (!this.popupEl) {\n const tip = document.createElement('div');\n tip.id = this.tooltipId;\n tip.setAttribute('role', 'tooltip');\n // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n tip.className = 'tooltip-popup sc-ds-tooltip';\n Object.assign(tip.style, {\n position: 'fixed',\n left: '0',\n top: '0',\n zIndex: 'var(--dimension-z-index-tooltip)',\n pointerEvents: 'none',\n });\n document.body.appendChild(tip);\n this.popupEl = tip;\n }\n\n this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n this.popupEl.classList.remove('tooltip-popup--closing');\n this.renderPopupContent();\n this.calculatePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = TEXT_VARIANT[this.size];\n const lineHeight = LINE_HEIGHT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const startKey =\n this.shortcutKey && this.shortcutKeyPosition === 'start'\n ? `<div class=\"key-hint ${sc}\" aria-hidden=\"true\"><span class=\"text-caption-emphasis ${sc}\">${escapeHtml(this.shortcutKey)}</span></div>`\n : '';\n const endKey =\n this.shortcutKey && this.shortcutKeyPosition === 'end'\n ? `<div class=\"key-hint ${sc}\" aria-hidden=\"true\"><span class=\"text-caption-emphasis ${sc}\">${escapeHtml(this.shortcutKey)}</span></div>`\n : '';\n\n this.popupEl.innerHTML =\n `<div class=\"tooltip-inner ${density} ${sc}\">` +\n startKey +\n `<span class=\"tooltip-label ${textVariant} ${sc}\" style=\"line-height:${lineHeight}\">${escapeHtml(this.label)}</span>` +\n endKey +\n `</div>`;\n }\n\n private calculatePosition() {\n if (!this.anchor || !this.popupEl) return;\n const tip = this.popupEl;\n const a = this.anchor.getBoundingClientRect();\n const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n const sideOffset = this.sideOffsetPx;\n const alignOffset = this.alignOffsetPx;\n const vpPad = this.viewportPadPx;\n let x = 0, y = 0;\n\n switch (this.side) {\n case 'top':\n y = a.top - th - sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'bottom':\n y = a.bottom + sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'left':\n x = a.left - tw - sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n case 'right':\n x = a.right + sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n }\n\n const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <slot />\n </Host>\n );\n }\n}\n\nfunction escapeHtml(value: string): string {\n return value\n .replace(/&/g, '&')\n .replace(/</g, '<')\n .replace(/>/g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, ''');\n}\n"],"mappings":"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","ignoreList":[]}