@ds-mo/ui 2.6.0 → 2.6.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 (29) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/components/ds-app-shell.js +1 -1
  3. package/dist/components/ds-app-shell.js.map +1 -1
  4. package/dist/components/ds-bar-nav.js +1 -1
  5. package/dist/components/ds-menu.js +1 -1
  6. package/dist/components/ds-panel-nav.js +1 -1
  7. package/dist/components/ds-panel-nav.js.map +1 -1
  8. package/dist/components/ds-select.js +1 -1
  9. package/dist/components/ds-shell-gradient-picker.js +1 -1
  10. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  11. package/dist/components/p-Bknnbbb7.js +2 -0
  12. package/dist/components/p-Bknnbbb7.js.map +1 -0
  13. package/dist/components/{p-BgiK3sHs.js → p-DOMIPWaB.js} +2 -2
  14. package/dist/components/p-DuI6g-ke.js +2 -0
  15. package/dist/components/p-DuI6g-ke.js.map +1 -0
  16. package/dist/components/{p-CLmK4lRE.js → p-Rn0--Bsl.js} +2 -2
  17. package/dist/types/components/Menu/menu-placement.d.ts +2 -1
  18. package/dist/types/components/ShellGradientSwatch/ShellGradientSwatch.d.ts +1 -1
  19. package/dist/types/components.d.ts +2 -2
  20. package/package.json +1 -1
  21. package/src/wc/components/Menu/menu-placement.ts +2 -1
  22. package/src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx +6 -2
  23. package/src/wc/components.d.ts +2 -2
  24. package/dist/components/p-BU5fKLdO.js +0 -2
  25. package/dist/components/p-BU5fKLdO.js.map +0 -1
  26. package/dist/components/p-DKG6W4pb.js +0 -2
  27. package/dist/components/p-DKG6W4pb.js.map +0 -1
  28. /package/dist/components/{p-BgiK3sHs.js.map → p-DOMIPWaB.js.map} +0 -0
  29. /package/dist/components/{p-CLmK4lRE.js.map → p-Rn0--Bsl.js.map} +0 -0
package/dist/.build-stamp CHANGED
@@ -1 +1 @@
1
- 1783437834388
1
+ 1783439859918
package/dist/components/ds-app-shell.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,h as t,a as n,t as i}from"./index.js";import{D as l,b as a}from"./p-BU5fKLdO.js";import{C as r,c as o,r as h,a as p,b as c}from"./p-BiM6QBTF.js";const d={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function f(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function u(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function g(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function b(e){if(!f(e))return null;const s=g(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=d[s];if(t)return`open-tool:${t}`;return null}const m="--ds-shell-gradient-image";const v="--ds-shell-gradient-size";const _="--ds-shell-gradient-position-panel";const y="--ds-shell-gradient-position-bar";const x="--ds-shell-gradient-opacity";const w="0.1";function k(e=l){return a(e)}function P(e){const s=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!s)return{width:0,height:0};const t=s.visualViewport;return{width:Math.round(t?.width??s.innerWidth),height:Math.round(t?.height??s.innerHeight)}}function S(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function z(){return"0 0"}function C(e){return`${-Math.round(e)}px 0`}function L(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function B(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function V(e,s){return s?e.collapsedPx:e.expandedPx}const $=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h,.app-shell--grid.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell--grid.sc-ds-app-shell-h{--_shell-chrome-grid-cell:var(--dimension-size-050);--_shell-chrome-grid-stroke:var(--dimension-stroke-width-012);--_shell-chrome-grid-line:var(--color-foreground-quaternary);--_shell-chrome-grid-opacity:0.1}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell,.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before,.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{z-index:2;opacity:var(--_shell-chrome-grid-opacity);background-image:repeating-linear-gradient( 120deg, var(--_shell-chrome-grid-line) 0, var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke), transparent var(--_shell-chrome-grid-stroke), transparent var(--_shell-chrome-grid-cell) )}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell,.app-shell--grid.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const j=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.grid=false;this.gradientSrc="";this.gradientPreset=l;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new r;this.chromeSyncCoalescer=o((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(h(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=P();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(h(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(c,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(c,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=M(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[m,v,x];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(_,t)}if(s){s.style.setProperty(y,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=B(e,s);return V(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=B(e,s);return V(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return P()}chromeLayerActive(){return this.gradient||this.grid}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(u(e.target))return;const s=b(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(_);if(s)s.style.removeProperty(y)};if(!this.chromeLayerActive()){this.clearGradientPaintVars(t);n();return}if(!this.gradient){this.clearGradientPaintVars(t);n();return}const i=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const a=z();const r=C(l);this.syncChromeLayoutVars(e,s,a,r);const o=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:k(this.gradientPreset);const h=S({width:i.width,height:i.height});const p=w;for(const e of t){if(e===this.el){this.applyGradientVars(e,{[m]:o,[v]:h,[_]:a,[y]:r,[x]:p});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[m]:o,[v]:h,[x]:p,[_]:s?null:a,[y]:s?r:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":this.gradient,"app-shell--grid":this.grid,[`app-shell--${this.navStyle}`]:true};return t(n,{key:"a0cd0de8a2cf289d4a710657799dac6fd19ae770",class:s},t("div",{key:"e73093e1f6201b335926015b6ccd2aef52c5981d",class:"app-shell__row"},e?t("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,t("div",{key:"4caeff52bdb288d6a8de724bf99db02c56e3900e",class:"app-shell__panel"},t("slot",{key:"e2b5b514f17020f993408e435947628c6837d092",name:"panel"})),t("div",{key:"a8e8d71a0f3f27719bccbcf2135d761f3a71fae8",class:"app-shell__main"},t("div",{key:"085ffb3d569d895a2512aec7f64ea2658fceb761",class:"app-shell__bar"},t("slot",{key:"c8a9cd5b75ac0f1f87d03625fb958ba6e295e42e",name:"bar"})),t("div",{key:"fc3b33ca4c8d370899bd4305b0d7f5e620321b95",class:"app-shell__tools"},t("slot",{key:"e141097239288951509685e629333f52098e95bc",name:"tools"})),t("div",{key:"d2289ab8dbb4863c0f59519f63deab148cde12c4",class:"app-shell__content"},t("slot",{key:"873eedd04fe1de6329dbf241968e41dde793c168"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],grid:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return $()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradient:[516],grid:[516],gradientSrc:[1,"gradient-src"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],grid:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function D(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(i(e))){customElements.define(i(e),j)}break}}))}D();const E=j;const O=D;export{E as DsAppShell,O as defineCustomElement};
1
+ import{p as e,H as s,h as t,a as i,t as n}from"./index.js";import{D as l,r as a,d as r,e as o,f as h,g as p,h as c,s as d,i as f,j as u,b as g,k as b}from"./p-DuI6g-ke.js";import{C as m,c as v,r as _,a as y,b as x}from"./p-BiM6QBTF.js";const k={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function w(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function P(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const i=s.getAttribute("role");if(i==="textbox"||i==="combobox"||i==="searchbox")return true;return Boolean(s.isContentEditable)}function S(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function z(e){if(!w(e))return null;const s=S(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=k[s];if(t)return`open-tool:${t}`;return null}function C(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const i=t.getBoundingClientRect().width;e.removeChild(t);return i}function j(e){return{expandedPx:C(e,"--_nav-width"),collapsedPx:C(e,"--_nav-width-collapsed")}}function D(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function L(e,s){return s?e.collapsedPx:e.expandedPx}const V=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h,.app-shell--grid.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell--grid.sc-ds-app-shell-h{--_shell-chrome-grid-cell:var(--dimension-size-050);--_shell-chrome-grid-stroke:var(--dimension-stroke-width-012);--_shell-chrome-grid-line:var(--color-foreground-quaternary);--_shell-chrome-grid-opacity:0.1}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell,.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before,.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{z-index:2;opacity:var(--_shell-chrome-grid-opacity);background-image:repeating-linear-gradient( 120deg, var(--_shell-chrome-grid-line) 0, var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke), transparent var(--_shell-chrome-grid-stroke), transparent var(--_shell-chrome-grid-cell) )}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell,.app-shell--grid.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const B=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.grid=false;this.gradientSrc="";this.gradientPreset=l;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new m;this.chromeSyncCoalescer=v((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(_(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=a();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(_(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(y,this.onChromeTransitionStart);this.el.addEventListener(x,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(y,this.onChromeTransitionStart);this.el.removeEventListener(x,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=j(e)}applyGradientVars(e,s){const t=e.style;for(const[e,i]of Object.entries(s)){if(i===null)t.removeProperty(e);else t.setProperty(e,i)}}clearGradientPaintVars(e){const s=[r,o,h];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,i){if(e){e.style.setProperty(p,t)}if(s){s.style.setProperty(c,i)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=D(e,s);return L(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const i=t?.getBoundingClientRect().width??0;if(i>0)return i;if(this.panelWidthTokens.expandedPx>0){const t=D(e,s);return L(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return a()}chromeLayerActive(){return this.gradient||this.grid}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(P(e.target))return;const s=z(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const i=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void i?.closeDrawer();return}if(s.startsWith("open-tool:")&&i){const e=s.slice("open-tool:".length);void i.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const i=()=>{if(e)e.style.removeProperty(p);if(s)s.style.removeProperty(c)};if(!this.chromeLayerActive()){this.clearGradientPaintVars(t);i();return}if(!this.gradient){this.clearGradientPaintVars(t);i();return}const n=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const a=d();const m=f(l);this.syncChromeLayoutVars(e,s,a,m);const v=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:u(this.gradientPreset);const _=b({width:n.width,height:n.height});const y=g;for(const e of t){if(e===this.el){this.applyGradientVars(e,{[r]:v,[o]:_,[p]:a,[c]:m,[h]:y});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[r]:v,[o]:_,[h]:y,[p]:s?null:a,[c]:s?m:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":this.gradient,"app-shell--grid":this.grid,[`app-shell--${this.navStyle}`]:true};return t(i,{key:"a0cd0de8a2cf289d4a710657799dac6fd19ae770",class:s},t("div",{key:"e73093e1f6201b335926015b6ccd2aef52c5981d",class:"app-shell__row"},e?t("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,t("div",{key:"4caeff52bdb288d6a8de724bf99db02c56e3900e",class:"app-shell__panel"},t("slot",{key:"e2b5b514f17020f993408e435947628c6837d092",name:"panel"})),t("div",{key:"a8e8d71a0f3f27719bccbcf2135d761f3a71fae8",class:"app-shell__main"},t("div",{key:"085ffb3d569d895a2512aec7f64ea2658fceb761",class:"app-shell__bar"},t("slot",{key:"c8a9cd5b75ac0f1f87d03625fb958ba6e295e42e",name:"bar"})),t("div",{key:"fc3b33ca4c8d370899bd4305b0d7f5e620321b95",class:"app-shell__tools"},t("slot",{key:"e141097239288951509685e629333f52098e95bc",name:"tools"})),t("div",{key:"d2289ab8dbb4863c0f59519f63deab148cde12c4",class:"app-shell__content"},t("slot",{key:"873eedd04fe1de6329dbf241968e41dde793c168"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],grid:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return V()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradient:[516],grid:[516],gradientSrc:[1,"gradient-src"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],grid:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function E(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(n(e))){customElements.define(n(e),B)}break}}))}E();const W=B;const O=E;export{W as DsAppShell,O as defineCustomElement};
2
2
  //# sourceMappingURL=ds-app-shell.js.map
package/dist/components/ds-app-shell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["TOOL_SHORTCUT_KEYS","k","a","s","m","n","isBareShellShortcutKey","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","SHELL_GRADIENT_OPACITY","buildShellRadialGradient","preset","DEFAULT_SHELL_GRADIENT_PRESET","buildShellRadialGradientForPreset","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradient","grid","gradientSrc","gradientPreset","shortcutsEnabled","resizeObserver","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","schedule","panel","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","handleWindowKeyDown","action","preventDefault","tools","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","trim","size","opacity","isBar","tagName","render","chromeActive","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-shortcuts.ts","src/wc/nav/shell-gradient.ts","src/wc/nav/shell-chrome-metrics.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellShortcutAction =\n | 'toggle-panel-nav'\n | 'close-panel-tools'\n | `open-tool:${PanelToolsToolId}`;\n\nconst TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {\n k: 'search',\n a: 'agents',\n s: 'stacks',\n m: 'messages',\n n: 'activity',\n};\n\n/** Tool shortcut keys (K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */\nexport function isBareShellShortcutKey(\n e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): boolean {\n return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;\n}\n\n/** Skip shell shortcuts while typing in an editable control. */\nexport function isEditableShortcutTarget(target: EventTarget | null): boolean {\n if (!target || typeof target !== 'object') return false;\n if (!('closest' in target) || typeof target.closest !== 'function') return false;\n\n const el = target as Element & { isContentEditable?: boolean };\n\n const editable = el.closest(\n 'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]',\n );\n if (editable) return true;\n\n const role = el.getAttribute('role');\n if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;\n\n return Boolean(el.isContentEditable);\n}\n\nfunction normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {\n if (e.key === '[' || e.code === 'BracketLeft') return '[';\n if (e.key === ']' || e.code === 'BracketRight') return ']';\n return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();\n}\n\n/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */\nexport function resolveShellShortcut(\n e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n if (!isBareShellShortcutKey(e)) return null;\n\n const key = normalizedShortcutKey(e);\n if (key === '[') return 'toggle-panel-nav';\n if (key === ']') return 'close-panel-tools';\n\n const toolId = TOOL_SHORTCUT_KEYS[key];\n if (toolId) return `open-tool:${toolId}`;\n\n return null;\n}\n","/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n buildShellRadialGradientForPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n SHELL_GRADIENT_PRESETS,\n SHELL_GRADIENT_PRESET_LABELS,\n buildShellRadialGradientForPreset,\n isShellGradientPreset,\n shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\n/** Whether the shared chrome layer (bg + optional wash/grid) should mount. */\nexport function shellChromeLayerActive(gradient: boolean, grid: boolean): boolean {\n return gradient || grid;\n}\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image (`gradientSrc` on shell overrides). */\nexport function shellGradientImage(\n preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n width: number;\n height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-app-shell` element box — the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n if (!w) return { width: 0, height: 0 };\n\n const visual = w.visualViewport;\n return {\n width: Math.round(visual?.width ?? w.innerWidth),\n height: Math.round(visual?.height ?? w.innerHeight),\n };\n}\n\nexport interface ShellGradientLayout {\n width: number;\n height: number;\n panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n if (typeof document === 'undefined') return 0;\n\n const probe = document.createElement('div');\n probe.style.cssText =\n 'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n cssVarName +\n ');';\n context.appendChild(probe);\n const width = probe.getBoundingClientRect().width;\n context.removeChild(probe);\n return width;\n}\n\nexport interface PanelNavWidthTokens {\n expandedPx: number;\n collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n return {\n expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n };\n}\n\nexport function isPanelNavCollapsed(\n panelNavHost: HTMLElement | null,\n navRoot: HTMLElement | null,\n): boolean {\n if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n tokens: PanelNavWidthTokens,\n collapsed: boolean,\n): number {\n return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n return shellGradientPositionBar(panelWidthPx);\n}\n",":host {\n display: block;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.app-shell {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n font-family: var(--typography-font-family, system-ui);\n}\n\n:host(.app-shell--gradient),\n:host(.app-shell--grid) {\n --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n:host(.app-shell--grid) {\n --_shell-chrome-grid-cell: var(--dimension-size-050);\n --_shell-chrome-grid-stroke: var(--dimension-stroke-width-012);\n --_shell-chrome-grid-line: var(--color-foreground-quaternary);\n --_shell-chrome-grid-opacity: 0.1;\n}\n\n.app-shell__row {\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n height: 100%;\n position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash + grid use background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.app-shell__chrome {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome,\n:host(.app-shell--grid) .app-shell__chrome {\n background-color: var(--_shell-chrome-bg);\n}\n\n/* Layer stack (bottom → top): bg → wash (::before) → grid (::after) */\n:host(.app-shell--gradient) .app-shell__chrome::before,\n:host(.app-shell--grid) .app-shell__chrome::after {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n background-position: 0 0;\n background-attachment: fixed;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome::before {\n z-index: 1;\n opacity: var(--ds-shell-gradient-opacity, 1);\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-repeat: no-repeat;\n}\n\n:host(.app-shell--grid) .app-shell__chrome::after {\n z-index: 2;\n opacity: var(--_shell-chrome-grid-opacity);\n background-image: repeating-linear-gradient(\n 120deg,\n var(--_shell-chrome-grid-line) 0,\n var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke),\n transparent var(--_shell-chrome-grid-stroke),\n transparent var(--_shell-chrome-grid-cell)\n );\n}\n\n.app-shell__panel {\n flex: 0 0 auto;\n min-height: 0;\n height: 100%;\n position: relative;\n /* Above main so resize handle line can paint over the workspace edge */\n z-index: 2;\n}\n\n.app-shell__panel ::slotted(ds-panel-nav) {\n display: block;\n height: 100%;\n}\n\n.app-shell__main {\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-areas:\n 'bar tools'\n 'content tools';\n position: relative;\n z-index: 1;\n}\n\n.app-shell__bar {\n grid-area: bar;\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n display: block;\n}\n\n.app-shell__content {\n grid-area: content;\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n contain: layout;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n:host(.app-shell--gradient) .app-shell__content,\n:host(.app-shell--grid) .app-shell__content {\n position: relative;\n z-index: 1;\n background-color: var(--color-background-primary);\n}\n\n.app-shell__tools {\n grid-area: tools;\n flex: 0 0 auto;\n min-width: 0;\n min-height: 0;\n height: 100%;\n display: flex;\n position: relative;\n z-index: 0;\n overflow: hidden;\n}\n\n.app-shell__tools ::slotted(ds-panel-tools) {\n display: block;\n height: 100%;\n min-height: 0;\n}\n","import { Component, Prop, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n isEditableShortcutTarget,\n resolveShellShortcut,\n} from '../../nav/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n type ShellGradientPreset,\n} from '../../nav/shell-gradient-presets';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionDepth,\n createRafCoalescer,\n readChromeTransitionSource,\n} from '../../nav/chrome-transition';\nimport {\n isPanelNavCollapsed,\n panelWidthPxFromTokens,\n readPanelNavWidthTokens,\n type PanelNavWidthTokens,\n} from '../../nav/shell-chrome-metrics';\nimport {\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_OPACITY,\n SHELL_GRADIENT_OPACITY_VAR,\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n SHELL_GRADIENT_SIZE_VAR,\n buildShellRadialGradient,\n readShellViewportDimensions,\n shellGradientPositionBar,\n shellGradientPositionPanel,\n shellGradientSize,\n} from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-app-shell',\n styleUrl: 'AppShell.css',\n scoped: true,\n})\nexport class AppShell {\n /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n /** When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout). */\n @Prop({ reflect: true }) gradient: boolean = false;\n\n /** When `true`, paints the diagonal grid overlay on the shared chrome layer. Independent of `gradient`. */\n @Prop({ reflect: true }) grid: boolean = false;\n\n /**\n * Optional custom gradient for `background-image` (e.g. SVG URL).\n * When set, overrides the built-in radial wash.\n */\n @Prop() gradientSrc: string = '';\n\n /**\n * Built-in shell wash preset when `gradient` is true.\n * `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.\n */\n @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n DEFAULT_SHELL_GRADIENT_PRESET;\n\n /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n @Element() el!: HTMLElement;\n\n private resizeObserver: ResizeObserver | null = null;\n private readonly panelNavTransition = new ChromeTransitionDepth();\n private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n private cachedViewportWidth = 0;\n private cachedViewportHeight = 0;\n private onWindowResize = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n private onVisualViewportChange = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n\n componentDidLoad() {\n this.syncSlottedNavStyle();\n this.connectMetricsObserver();\n this.connectViewportListeners();\n this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n requestAnimationFrame(() => {\n this.cachePanelWidthTokens();\n this.scheduleChromeSync();\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.disconnectViewportListeners();\n this.chromeSyncCoalescer.cancel();\n this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n @Watch('navStyle')\n @Watch('gradient')\n @Watch('grid')\n @Watch('gradientSrc')\n @Watch('gradientPreset')\n onShellPropsChange() {\n this.syncSlottedNavStyle();\n this.scheduleChromeSync();\n }\n\n private onChromeTransitionStart = (event: Event) => {\n if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n this.panelNavTransition.enter();\n const viewport = readShellViewportDimensions();\n this.cachedViewportWidth = viewport.width;\n this.cachedViewportHeight = viewport.height;\n this.syncChrome();\n };\n\n private onChromeTransitionEnd = (event: Event) => {\n if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleChromeSync();\n }\n };\n\n /** Coalesce ResizeObserver bursts to one layout read per frame. */\n private scheduleChromeSync() {\n this.chromeSyncCoalescer.schedule();\n }\n\n private syncSlottedNavStyle() {\n const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n if (panel) {\n panel.setAttribute('nav-style', this.navStyle);\n panel.navStyle = this.navStyle;\n }\n if (bar) {\n bar.setAttribute('nav-style', this.navStyle);\n bar.navStyle = this.navStyle;\n }\n }\n\n private connectMetricsObserver() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n });\n this.resizeObserver.observe(this.el);\n const panelWrap = this.el.querySelector('.app-shell__panel');\n if (panelWrap) this.resizeObserver.observe(panelWrap);\n }\n\n private connectViewportListeners() {\n if (typeof window === 'undefined') return;\n\n window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n const visual = window.visualViewport;\n if (visual) {\n visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n }\n }\n\n private disconnectViewportListeners() {\n if (typeof window === 'undefined') return;\n\n window.removeEventListener('resize', this.onWindowResize);\n\n const visual = window.visualViewport;\n if (visual) {\n visual.removeEventListener('resize', this.onVisualViewportChange);\n visual.removeEventListener('scroll', this.onVisualViewportChange);\n }\n }\n\n private cachePanelWidthTokens() {\n const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n if (!navRoot) return;\n this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n }\n\n private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n const style = target.style;\n for (const [name, value] of Object.entries(vars)) {\n if (value === null) style.removeProperty(name);\n else style.setProperty(name, value);\n }\n }\n\n private clearGradientPaintVars(targets: HTMLElement[]) {\n const keys = [\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_SIZE_VAR,\n SHELL_GRADIENT_OPACITY_VAR,\n ];\n for (const target of targets) {\n for (const key of keys) target.style.removeProperty(key);\n }\n }\n\n /** Panel/bar wash offsets for scroll fades and badge rings. */\n private syncChromeLayoutVars(\n panel: HTMLElement | null,\n bar: HTMLElement | null,\n panelPosition: string,\n barPosition: string,\n ) {\n if (panel) {\n panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n }\n if (bar) {\n bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n }\n }\n\n private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n }\n\n const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;\n const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n if (measured > 0) return measured;\n\n if (this.panelWidthTokens.expandedPx > 0) {\n const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n }\n\n return 0;\n }\n\n /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n private resolveViewportDimensions(): { width: number; height: number } {\n if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n return {\n width: this.cachedViewportWidth,\n height: this.cachedViewportHeight,\n };\n }\n\n return readShellViewportDimensions();\n }\n\n private chromeLayerActive(): boolean {\n return this.gradient || this.grid;\n }\n\n @Listen('keydown', { target: 'window', capture: true })\n handleWindowKeyDown(e: KeyboardEvent) {\n if (!this.shortcutsEnabled) return;\n if (isEditableShortcutTarget(e.target)) return;\n\n const action = resolveShellShortcut(e);\n if (!action) return;\n\n e.preventDefault();\n\n const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n const tools = this.el.querySelector('ds-panel-tools') as HTMLDsPanelToolsElement | null;\n\n if (action === 'toggle-panel-nav') {\n void panel?.toggleCollapsed();\n return;\n }\n\n if (action === 'close-panel-tools') {\n void tools?.closeDrawer();\n return;\n }\n\n if (action.startsWith('open-tool:') && tools) {\n const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n void tools.activateTool(toolId);\n }\n }\n\n private syncChrome() {\n const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n const clearLayoutVars = () => {\n if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n };\n\n if (!this.chromeLayerActive()) {\n this.clearGradientPaintVars(targets);\n clearLayoutVars();\n return;\n }\n\n if (!this.gradient) {\n this.clearGradientPaintVars(targets);\n clearLayoutVars();\n return;\n }\n\n const viewport = this.resolveViewportDimensions();\n const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n const panelPosition = shellGradientPositionPanel();\n const barPosition = shellGradientPositionBar(panelWidth);\n\n this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n const image = this.gradientSrc.trim()\n ? `url(${this.gradientSrc.trim()})`\n : buildShellRadialGradient(this.gradientPreset);\n\n const size = shellGradientSize({\n width: viewport.width,\n height: viewport.height,\n });\n const opacity = SHELL_GRADIENT_OPACITY;\n\n for (const target of targets) {\n if (target === this.el) {\n this.applyGradientVars(target, {\n [SHELL_GRADIENT_IMAGE_VAR]: image,\n [SHELL_GRADIENT_SIZE_VAR]: size,\n [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n });\n continue;\n }\n\n const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n this.applyGradientVars(target, {\n [SHELL_GRADIENT_IMAGE_VAR]: image,\n [SHELL_GRADIENT_SIZE_VAR]: size,\n [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n });\n }\n }\n\n render() {\n const chromeActive = this.chromeLayerActive();\n const shellCls: Record<string, boolean> = {\n 'app-shell': true,\n 'app-shell--gradient': this.gradient,\n 'app-shell--grid': this.grid,\n [`app-shell--${this.navStyle}`]: true,\n };\n\n return (\n <Host class={shellCls}>\n <div class=\"app-shell__row\">\n {chromeActive ? <div class=\"app-shell__chrome\" aria-hidden=\"true\" /> : null}\n <div class=\"app-shell__panel\">\n <slot name=\"panel\" />\n </div>\n <div class=\"app-shell__main\">\n <div class=\"app-shell__bar\">\n <slot name=\"bar\" />\n </div>\n <div class=\"app-shell__tools\">\n <slot name=\"tools\" />\n </div>\n <div class=\"app-shell__content\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["TOOL_SHORTCUT_KEYS","k","a","s","m","n","isBareShellShortcutKey","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","width","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradient","grid","gradientSrc","gradientPreset","DEFAULT_SHELL_GRADIENT_PRESET","shortcutsEnabled","resizeObserver","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","readShellViewportDimensions","height","onChromeTransitionEnd","exit","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","schedule","panel","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","window","passive","visual","visualViewport","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_OPACITY_VAR","syncChromeLayoutVars","panelPosition","barPosition","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","handleWindowKeyDown","action","preventDefault","tools","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","panelWidth","shellGradientPositionPanel","shellGradientPositionBar","image","trim","buildShellRadialGradient","size","shellGradientSize","opacity","SHELL_GRADIENT_OPACITY","isBar","tagName","render","chromeActive","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-shortcuts.ts","src/wc/nav/shell-chrome-metrics.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellShortcutAction =\n | 'toggle-panel-nav'\n | 'close-panel-tools'\n | `open-tool:${PanelToolsToolId}`;\n\nconst TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {\n k: 'search',\n a: 'agents',\n s: 'stacks',\n m: 'messages',\n n: 'activity',\n};\n\n/** Tool shortcut keys (K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */\nexport function isBareShellShortcutKey(\n e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): boolean {\n return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;\n}\n\n/** Skip shell shortcuts while typing in an editable control. */\nexport function isEditableShortcutTarget(target: EventTarget | null): boolean {\n if (!target || typeof target !== 'object') return false;\n if (!('closest' in target) || typeof target.closest !== 'function') return false;\n\n const el = target as Element & { isContentEditable?: boolean };\n\n const editable = el.closest(\n 'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]',\n );\n if (editable) return true;\n\n const role = el.getAttribute('role');\n if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;\n\n return Boolean(el.isContentEditable);\n}\n\nfunction normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {\n if (e.key === '[' || e.code === 'BracketLeft') return '[';\n if (e.key === ']' || e.code === 'BracketRight') return ']';\n return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();\n}\n\n/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */\nexport function resolveShellShortcut(\n e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n if (!isBareShellShortcutKey(e)) return null;\n\n const key = normalizedShortcutKey(e);\n if (key === '[') return 'toggle-panel-nav';\n if (key === ']') return 'close-panel-tools';\n\n const toolId = TOOL_SHORTCUT_KEYS[key];\n if (toolId) return `open-tool:${toolId}`;\n\n return null;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n if (typeof document === 'undefined') return 0;\n\n const probe = document.createElement('div');\n probe.style.cssText =\n 'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n cssVarName +\n ');';\n context.appendChild(probe);\n const width = probe.getBoundingClientRect().width;\n context.removeChild(probe);\n return width;\n}\n\nexport interface PanelNavWidthTokens {\n expandedPx: number;\n collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n return {\n expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n };\n}\n\nexport function isPanelNavCollapsed(\n panelNavHost: HTMLElement | null,\n navRoot: HTMLElement | null,\n): boolean {\n if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n tokens: PanelNavWidthTokens,\n collapsed: boolean,\n): number {\n return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n return shellGradientPositionBar(panelWidthPx);\n}\n",":host {\n display: block;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n.app-shell {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n font-family: var(--typography-font-family, system-ui);\n}\n\n:host(.app-shell--gradient),\n:host(.app-shell--grid) {\n --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n:host(.app-shell--grid) {\n --_shell-chrome-grid-cell: var(--dimension-size-050);\n --_shell-chrome-grid-stroke: var(--dimension-stroke-width-012);\n --_shell-chrome-grid-line: var(--color-foreground-quaternary);\n --_shell-chrome-grid-opacity: 0.1;\n}\n\n.app-shell__row {\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n height: 100%;\n position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash + grid use background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.app-shell__chrome {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome,\n:host(.app-shell--grid) .app-shell__chrome {\n background-color: var(--_shell-chrome-bg);\n}\n\n/* Layer stack (bottom → top): bg → wash (::before) → grid (::after) */\n:host(.app-shell--gradient) .app-shell__chrome::before,\n:host(.app-shell--grid) .app-shell__chrome::after {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n background-position: 0 0;\n background-attachment: fixed;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome::before {\n z-index: 1;\n opacity: var(--ds-shell-gradient-opacity, 1);\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-repeat: no-repeat;\n}\n\n:host(.app-shell--grid) .app-shell__chrome::after {\n z-index: 2;\n opacity: var(--_shell-chrome-grid-opacity);\n background-image: repeating-linear-gradient(\n 120deg,\n var(--_shell-chrome-grid-line) 0,\n var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke),\n transparent var(--_shell-chrome-grid-stroke),\n transparent var(--_shell-chrome-grid-cell)\n );\n}\n\n.app-shell__panel {\n flex: 0 0 auto;\n min-height: 0;\n height: 100%;\n position: relative;\n /* Above main so resize handle line can paint over the workspace edge */\n z-index: 2;\n}\n\n.app-shell__panel ::slotted(ds-panel-nav) {\n display: block;\n height: 100%;\n}\n\n.app-shell__main {\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-areas:\n 'bar tools'\n 'content tools';\n position: relative;\n z-index: 1;\n}\n\n.app-shell__bar {\n grid-area: bar;\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n display: block;\n}\n\n.app-shell__content {\n grid-area: content;\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n contain: layout;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n:host(.app-shell--gradient) .app-shell__content,\n:host(.app-shell--grid) .app-shell__content {\n position: relative;\n z-index: 1;\n background-color: var(--color-background-primary);\n}\n\n.app-shell__tools {\n grid-area: tools;\n flex: 0 0 auto;\n min-width: 0;\n min-height: 0;\n height: 100%;\n display: flex;\n position: relative;\n z-index: 0;\n overflow: hidden;\n}\n\n.app-shell__tools ::slotted(ds-panel-tools) {\n display: block;\n height: 100%;\n min-height: 0;\n}\n","import { Component, Prop, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n isEditableShortcutTarget,\n resolveShellShortcut,\n} from '../../nav/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n type ShellGradientPreset,\n} from '../../nav/shell-gradient-presets';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionDepth,\n createRafCoalescer,\n readChromeTransitionSource,\n} from '../../nav/chrome-transition';\nimport {\n isPanelNavCollapsed,\n panelWidthPxFromTokens,\n readPanelNavWidthTokens,\n type PanelNavWidthTokens,\n} from '../../nav/shell-chrome-metrics';\nimport {\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_OPACITY,\n SHELL_GRADIENT_OPACITY_VAR,\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n SHELL_GRADIENT_SIZE_VAR,\n buildShellRadialGradient,\n readShellViewportDimensions,\n shellGradientPositionBar,\n shellGradientPositionPanel,\n shellGradientSize,\n} from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-app-shell',\n styleUrl: 'AppShell.css',\n scoped: true,\n})\nexport class AppShell {\n /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n /** When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout). */\n @Prop({ reflect: true }) gradient: boolean = false;\n\n /** When `true`, paints the diagonal grid overlay on the shared chrome layer. Independent of `gradient`. */\n @Prop({ reflect: true }) grid: boolean = false;\n\n /**\n * Optional custom gradient for `background-image` (e.g. SVG URL).\n * When set, overrides the built-in radial wash.\n */\n @Prop() gradientSrc: string = '';\n\n /**\n * Built-in shell wash preset when `gradient` is true.\n * `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.\n */\n @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n DEFAULT_SHELL_GRADIENT_PRESET;\n\n /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n @Element() el!: HTMLElement;\n\n private resizeObserver: ResizeObserver | null = null;\n private readonly panelNavTransition = new ChromeTransitionDepth();\n private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n private cachedViewportWidth = 0;\n private cachedViewportHeight = 0;\n private onWindowResize = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n private onVisualViewportChange = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n\n componentDidLoad() {\n this.syncSlottedNavStyle();\n this.connectMetricsObserver();\n this.connectViewportListeners();\n this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n requestAnimationFrame(() => {\n this.cachePanelWidthTokens();\n this.scheduleChromeSync();\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.disconnectViewportListeners();\n this.chromeSyncCoalescer.cancel();\n this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n @Watch('navStyle')\n @Watch('gradient')\n @Watch('grid')\n @Watch('gradientSrc')\n @Watch('gradientPreset')\n onShellPropsChange() {\n this.syncSlottedNavStyle();\n this.scheduleChromeSync();\n }\n\n private onChromeTransitionStart = (event: Event) => {\n if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n this.panelNavTransition.enter();\n const viewport = readShellViewportDimensions();\n this.cachedViewportWidth = viewport.width;\n this.cachedViewportHeight = viewport.height;\n this.syncChrome();\n };\n\n private onChromeTransitionEnd = (event: Event) => {\n if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleChromeSync();\n }\n };\n\n /** Coalesce ResizeObserver bursts to one layout read per frame. */\n private scheduleChromeSync() {\n this.chromeSyncCoalescer.schedule();\n }\n\n private syncSlottedNavStyle() {\n const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n if (panel) {\n panel.setAttribute('nav-style', this.navStyle);\n panel.navStyle = this.navStyle;\n }\n if (bar) {\n bar.setAttribute('nav-style', this.navStyle);\n bar.navStyle = this.navStyle;\n }\n }\n\n private connectMetricsObserver() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n });\n this.resizeObserver.observe(this.el);\n const panelWrap = this.el.querySelector('.app-shell__panel');\n if (panelWrap) this.resizeObserver.observe(panelWrap);\n }\n\n private connectViewportListeners() {\n if (typeof window === 'undefined') return;\n\n window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n const visual = window.visualViewport;\n if (visual) {\n visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n }\n }\n\n private disconnectViewportListeners() {\n if (typeof window === 'undefined') return;\n\n window.removeEventListener('resize', this.onWindowResize);\n\n const visual = window.visualViewport;\n if (visual) {\n visual.removeEventListener('resize', this.onVisualViewportChange);\n visual.removeEventListener('scroll', this.onVisualViewportChange);\n }\n }\n\n private cachePanelWidthTokens() {\n const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n if (!navRoot) return;\n this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n }\n\n private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n const style = target.style;\n for (const [name, value] of Object.entries(vars)) {\n if (value === null) style.removeProperty(name);\n else style.setProperty(name, value);\n }\n }\n\n private clearGradientPaintVars(targets: HTMLElement[]) {\n const keys = [\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_SIZE_VAR,\n SHELL_GRADIENT_OPACITY_VAR,\n ];\n for (const target of targets) {\n for (const key of keys) target.style.removeProperty(key);\n }\n }\n\n /** Panel/bar wash offsets for scroll fades and badge rings. */\n private syncChromeLayoutVars(\n panel: HTMLElement | null,\n bar: HTMLElement | null,\n panelPosition: string,\n barPosition: string,\n ) {\n if (panel) {\n panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n }\n if (bar) {\n bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n }\n }\n\n private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n }\n\n const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;\n const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n if (measured > 0) return measured;\n\n if (this.panelWidthTokens.expandedPx > 0) {\n const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n }\n\n return 0;\n }\n\n /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n private resolveViewportDimensions(): { width: number; height: number } {\n if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n return {\n width: this.cachedViewportWidth,\n height: this.cachedViewportHeight,\n };\n }\n\n return readShellViewportDimensions();\n }\n\n private chromeLayerActive(): boolean {\n return this.gradient || this.grid;\n }\n\n @Listen('keydown', { target: 'window', capture: true })\n handleWindowKeyDown(e: KeyboardEvent) {\n if (!this.shortcutsEnabled) return;\n if (isEditableShortcutTarget(e.target)) return;\n\n const action = resolveShellShortcut(e);\n if (!action) return;\n\n e.preventDefault();\n\n const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n const tools = this.el.querySelector('ds-panel-tools') as HTMLDsPanelToolsElement | null;\n\n if (action === 'toggle-panel-nav') {\n void panel?.toggleCollapsed();\n return;\n }\n\n if (action === 'close-panel-tools') {\n void tools?.closeDrawer();\n return;\n }\n\n if (action.startsWith('open-tool:') && tools) {\n const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n void tools.activateTool(toolId);\n }\n }\n\n private syncChrome() {\n const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n const clearLayoutVars = () => {\n if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n };\n\n if (!this.chromeLayerActive()) {\n this.clearGradientPaintVars(targets);\n clearLayoutVars();\n return;\n }\n\n if (!this.gradient) {\n this.clearGradientPaintVars(targets);\n clearLayoutVars();\n return;\n }\n\n const viewport = this.resolveViewportDimensions();\n const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n const panelPosition = shellGradientPositionPanel();\n const barPosition = shellGradientPositionBar(panelWidth);\n\n this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n const image = this.gradientSrc.trim()\n ? `url(${this.gradientSrc.trim()})`\n : buildShellRadialGradient(this.gradientPreset);\n\n const size = shellGradientSize({\n width: viewport.width,\n height: viewport.height,\n });\n const opacity = SHELL_GRADIENT_OPACITY;\n\n for (const target of targets) {\n if (target === this.el) {\n this.applyGradientVars(target, {\n [SHELL_GRADIENT_IMAGE_VAR]: image,\n [SHELL_GRADIENT_SIZE_VAR]: size,\n [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n });\n continue;\n }\n\n const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n this.applyGradientVars(target, {\n [SHELL_GRADIENT_IMAGE_VAR]: image,\n [SHELL_GRADIENT_SIZE_VAR]: size,\n [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n });\n }\n }\n\n render() {\n const chromeActive = this.chromeLayerActive();\n const shellCls: Record<string, boolean> = {\n 'app-shell': true,\n 'app-shell--gradient': this.gradient,\n 'app-shell--grid': this.grid,\n [`app-shell--${this.navStyle}`]: true,\n };\n\n return (\n <Host class={shellCls}>\n <div class=\"app-shell__row\">\n {chromeActive ? <div class=\"app-shell__chrome\" aria-hidden=\"true\" /> : null}\n <div class=\"app-shell__panel\">\n <slot name=\"panel\" />\n </div>\n <div class=\"app-shell__main\">\n <div class=\"app-shell__bar\">\n <slot name=\"bar\" />\n </div>\n <div class=\"app-shell__tools\">\n <slot name=\"tools\" />\n </div>\n <div class=\"app-shell__content\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/ds-bar-nav.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as s,H as t,c as i,h as e,a as n,t as a}from"./index.js";import{i as r}from"./p-BQq26pt9.js";import{s as o,p as h,d as l}from"./p-BOQnc-M4.js";import{C as c,c as d,a as f,b as u,r as b,d as v}from"./p-BiM6QBTF.js";import{d as p}from"./p-CiEc8Nwx.js";import{d as g}from"./p-BTndnbR_.js";import{d as m}from"./p-DqBCQRRd.js";import{d as _}from"./p-CLmK4lRE.js";import{d as y}from"./p-BgiK3sHs.js";import{d as w}from"./p-DKG6W4pb.js";import{d as C}from"./p-D4zKc1RW.js";function k(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function T(s){return k(s,'[role="tablist"]')}function x(s,t){const i=[];let e=[];for(const n of s){if(r(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,isSelected:n.id===t,isInactive:n.disabled})}if(e.length>0){i.push({items:e})}return i}function F(s,t){return x(S(s),t)}function E(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function M(s,t,i,e,n){if(s.length===0||t<=0)return 0;const a=D(s,s.length,e,n);if(a<=t)return s.length;const r=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=D(s,t,e,n);if(i>r)break;o=t}return o}function O(s){let t=s.length;while(t>0&&r(s[t-1])){t-=1}return s.slice(0,t)}function S(s){let t=0;while(t<s.length&&r(s[t])){t+=1}return s.slice(t)}function D(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const P=()=>`.sc-ds-bar-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-bar-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-bar-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-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-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-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[gradient] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-icon-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-icon-fg-active:var(--_bar-nav-fg-primary);--ds-button-unfilled-icon-hover-bg:var(--_bar-nav-hover);--ds-button-unfilled-icon-pressed-bg:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const H=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=d((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=v(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}digestTabsConfig(s){return s.map((s=>r(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(o(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){const s=T(this.probeTabGroupEl);return s?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=T(this.probeTabGroupEl);if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const a=i.reduce(((s,t)=>s+t),0);const r=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-a-r);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false}}}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=E(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=M(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const a=O(this.resolvedTabs.slice(0,n));const r=this.resolvedTabs.slice(a.length);this.setOverflowTabLayout(a,r);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}incomingTabs(){return this.tabsJson?h(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=F(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=k(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}handleTabChange(s){this.selectTab(s.detail)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuOpen=true}handleTabRovingExit(s){if(s.detail!=="end"||!this.hasOverflowTabs)return;this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.()}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;void this.visibleTabGroupEl?.focusLastTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}render(){const s=this.basePath!==""&&this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const a=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"84d2f09b219a4ab8b226a6546f3bf908b4d78fd1"},e("header",{key:"421804bb4079f65fa0453a715a0f7753ba1862fc",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"85298c11d8e3e034b9d01560a1d6037d14696eba",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("ds-tab-group-nav",{key:`probe-${i}`,ref:s=>{const t=s??null;if(t===this.probeTabGroupEl)return;this.probeTabGroupEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),t&&this.tabLayoutCommitted&&a.length>0&&e("div",{key:"a83aba2d87cb0f2c6e6267aa5ad467de045b1f79",class:"bar-nav__left"},e("ds-tab-group-nav",{key:`visible-${i}`,class:"bar-nav__tabs-visible",ref:s=>{this.visibleTabGroupEl=s??null},tabs:a,value:this.effectiveValue,selectionFollowsFocus:false,rovingEnabled:!this.overflowRovingFocused,onDsChange:s=>this.handleTabChange(s),onDsRovingExit:s=>this.handleTabRovingExit(s),onFocusin:()=>{this.overflowRovingFocused=false}})),t&&!this.tabLayoutCommitted&&e("div",{key:"8295cd2792c4e014a8721ad0137730e6197d45fb",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("span",{key:"c5ed1b5eedc293ba1ce97b1d15b73337d5e1b79c",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled-icon",{key:"31e7ad1f4cfa7d51642bb3ceb1abed79ec219340",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"aria-label":"More tabs",onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"3a4adcd67485a373b2198245c2ce433ae3dcb764",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:F(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return P()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);H.HOST_PROP_SYNC_BUDGET=8;H.INTRINSIC_WIDTH_RETRY_MAX=3;H.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;H.OVERFLOW_HYSTERESIS_PX=8;function R(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled-icon","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-tab-group-nav"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(a(s))){customElements.define(a(s),H)}break;case"ds-badge":if(!customElements.get(a(s))){p()}break;case"ds-button-unfilled-icon":if(!customElements.get(a(s))){g()}break;case"ds-icon":if(!customElements.get(a(s))){m()}break;case"ds-menu":if(!customElements.get(a(s))){_()}break;case"ds-shell-gradient-picker":if(!customElements.get(a(s))){y()}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(s))){w()}break;case"ds-tab-group-nav":if(!customElements.get(a(s))){C()}break}}))}R();const j=H;const L=R;export{j as DsBarNav,L as defineCustomElement};
1
+ import{p as s,H as t,c as i,h as e,a as n,t as a}from"./index.js";import{i as r}from"./p-BQq26pt9.js";import{s as o,p as h,d as l}from"./p-BOQnc-M4.js";import{C as c,c as d,a as f,b as u,r as b,d as v}from"./p-BiM6QBTF.js";import{d as p}from"./p-CiEc8Nwx.js";import{d as g}from"./p-BTndnbR_.js";import{d as m}from"./p-DqBCQRRd.js";import{d as _}from"./p-Rn0--Bsl.js";import{d as y}from"./p-DOMIPWaB.js";import{d as w}from"./p-Bknnbbb7.js";import{d as C}from"./p-D4zKc1RW.js";function k(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function T(s){return k(s,'[role="tablist"]')}function x(s,t){const i=[];let e=[];for(const n of s){if(r(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,isSelected:n.id===t,isInactive:n.disabled})}if(e.length>0){i.push({items:e})}return i}function F(s,t){return x(E(s),t)}function M(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function O(s,t,i,e,n){if(s.length===0||t<=0)return 0;const a=P(s,s.length,e,n);if(a<=t)return s.length;const r=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=P(s,t,e,n);if(i>r)break;o=t}return o}function S(s){let t=s.length;while(t>0&&r(s[t-1])){t-=1}return s.slice(0,t)}function E(s){let t=0;while(t<s.length&&r(s[t])){t+=1}return s.slice(t)}function P(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const D=()=>`.sc-ds-bar-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-bar-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-bar-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-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-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-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[gradient] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-icon-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-icon-fg-active:var(--_bar-nav-fg-primary);--ds-button-unfilled-icon-hover-bg:var(--_bar-nav-hover);--ds-button-unfilled-icon-pressed-bg:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const R=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=d((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=v(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}digestTabsConfig(s){return s.map((s=>r(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(o(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){const s=T(this.probeTabGroupEl);return s?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=T(this.probeTabGroupEl);if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const a=i.reduce(((s,t)=>s+t),0);const r=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-a-r);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false}}}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=M(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=O(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const a=S(this.resolvedTabs.slice(0,n));const r=this.resolvedTabs.slice(a.length);this.setOverflowTabLayout(a,r);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}incomingTabs(){return this.tabsJson?h(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=F(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=k(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}handleTabChange(s){this.selectTab(s.detail)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuOpen=true}handleTabRovingExit(s){if(s.detail!=="end"||!this.hasOverflowTabs)return;this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.()}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;void this.visibleTabGroupEl?.focusLastTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}render(){const s=this.basePath!==""&&this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const a=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"84d2f09b219a4ab8b226a6546f3bf908b4d78fd1"},e("header",{key:"421804bb4079f65fa0453a715a0f7753ba1862fc",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"85298c11d8e3e034b9d01560a1d6037d14696eba",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("ds-tab-group-nav",{key:`probe-${i}`,ref:s=>{const t=s??null;if(t===this.probeTabGroupEl)return;this.probeTabGroupEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),t&&this.tabLayoutCommitted&&a.length>0&&e("div",{key:"a83aba2d87cb0f2c6e6267aa5ad467de045b1f79",class:"bar-nav__left"},e("ds-tab-group-nav",{key:`visible-${i}`,class:"bar-nav__tabs-visible",ref:s=>{this.visibleTabGroupEl=s??null},tabs:a,value:this.effectiveValue,selectionFollowsFocus:false,rovingEnabled:!this.overflowRovingFocused,onDsChange:s=>this.handleTabChange(s),onDsRovingExit:s=>this.handleTabRovingExit(s),onFocusin:()=>{this.overflowRovingFocused=false}})),t&&!this.tabLayoutCommitted&&e("div",{key:"8295cd2792c4e014a8721ad0137730e6197d45fb",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("span",{key:"c5ed1b5eedc293ba1ce97b1d15b73337d5e1b79c",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled-icon",{key:"31e7ad1f4cfa7d51642bb3ceb1abed79ec219340",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"aria-label":"More tabs",onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"3a4adcd67485a373b2198245c2ce433ae3dcb764",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:F(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return D()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);R.HOST_PROP_SYNC_BUDGET=8;R.INTRINSIC_WIDTH_RETRY_MAX=3;R.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;R.OVERFLOW_HYSTERESIS_PX=8;function H(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled-icon","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-tab-group-nav"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(a(s))){customElements.define(a(s),R)}break;case"ds-badge":if(!customElements.get(a(s))){p()}break;case"ds-button-unfilled-icon":if(!customElements.get(a(s))){g()}break;case"ds-icon":if(!customElements.get(a(s))){m()}break;case"ds-menu":if(!customElements.get(a(s))){_()}break;case"ds-shell-gradient-picker":if(!customElements.get(a(s))){y()}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(s))){w()}break;case"ds-tab-group-nav":if(!customElements.get(a(s))){C()}break}}))}H();const j=R;const L=H;export{j as DsBarNav,L as defineCustomElement};
2
2
  //# sourceMappingURL=ds-bar-nav.js.map
package/dist/components/ds-menu.js CHANGED
@@ -1,2 +1,2 @@
1
- import{M as o,d as s}from"./p-CLmK4lRE.js";const t=o;const m=s;export{t as DsMenu,m as defineCustomElement};
1
+ import{M as s,d as o}from"./p-Rn0--Bsl.js";const t=s;const n=o;export{t as DsMenu,n as defineCustomElement};
2
2
  //# sourceMappingURL=ds-menu.js.map
package/dist/components/ds-panel-nav.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as a,c as n,h as s,a as t,t as i}from"./index.js";import{d as o}from"./p-CiEc8Nwx.js";import{d as r}from"./p-BTndnbR_.js";import{d as l}from"./p-DqBCQRRd.js";import{d}from"./p-C9za7IDu.js";import{T as c}from"./p-BRju0sEC.js";const v={side:"right",align:"start",sideOffset:c.space050,alignOffset:0};const p="data-nav-style";function h(e){if(e==="dashboard"||e==="settings")return e;return undefined}function f(e,a,n){const s=h(a);if(s)return s;const t=typeof document!=="undefined"?document.documentElement.getAttribute(p):null;const i=h(t);if(i)return i;return e}function u(e,a){return e!==a}function m(e,a){return e===a||e.startsWith(`${a}/`)}function g(e,a){if(!e)return"";let n="";let s=0;for(const t of a){if(!t.href)continue;if(m(e,t.href)&&t.href.length>s){n=t.id;s=t.href.length}}return n}function b(e){return e.reduce(((e,a)=>e+a.items.length),0)}function _(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function y(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function x(e,a){return b(e)===0&&b(_(a))>0}const k="ds-panel-nav-user-menu-anchor";const w=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to bottom, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to left, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to left, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const z=()=>`.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))}.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-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,ds-app-shell[grid].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[grid] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion), min-width var(--_nav-expand-motion), background-color var(--effect-motion-short-3, 200ms ease), border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms, max-height var(--_nav-label-fade-motion) 0ms, padding var(--_nav-label-fade-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms, mask-position var(--_nav-label-fade-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right: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-icon-fg:var(--_nav-fg-secondary);--ds-button-unfilled-icon-fg-active:var(--_nav-fg-primary);--ds-button-unfilled-icon-hover-bg:var(--_nav-hover);--ds-button-unfilled-icon-pressed-bg: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:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const C=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return y(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=_(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=f(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const a=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const n=e?.getBoundingClientRect().width??0;if(Math.abs(n-a)<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=g(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(u(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(x(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const a=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=a){const a=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return a[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 a=this.getAllItems().length;const n=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=a){this.handleItemClick(n[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${k}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:v})}}handleRovingKeyDown(e,a){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(a);return}const n=this.getFooterRovingIndex();const s=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(a===s)return;if(a===n)t=s;else t=a+1;break;case"ArrowUp":if(a===0)return;if(a===s)t=n;else if(a===n)t=n-1;else t=a-1;break;case"ArrowRight":if(a===n)t=s;else return;break;case"ArrowLeft":if(a===s)t=n;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=s;break;default:return}if(t===undefined||t===a)return;e.preventDefault();this.focusRovingAt(t)}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a,menuPlacement:v})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const s=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",s);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=s;window.addEventListener("mousemove",n);window.addEventListener("mouseup",s)}renderNavItem(e,a,n){const t=e.id===this.effectiveActiveId;const i=a+1;const o=[s("span",{class:"panel-nav__item-icon"},s("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),s("span",{class:"panel-nav__item-label"},s("span",{class:"panel-nav__item-label-text"},s("ds-text",{as:"span",variant:t?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&s("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},"aria-current":t?"page":undefined,title:n?e.label:undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const l=this.routerMode==="anchor"&&e.href;return l?s("a",{...r,href:e.href},o):s("button",{...r,type:"button"},o)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":i,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return s(t,{key:"8b23d553e483cb1ba292a0c772e6fedb8989294b",style:{display:"block",position:"relative"}},s("nav",{key:"57079ba047c7268e7f5b3042416dbc58fff37486",class:l,"aria-label":a?"Dashboard navigation":"Settings navigation"},s("div",{key:"294462c9de6ef149d8e412769f414ab989f0bb7e",class:"panel-nav__header"},s("button",{key:"e5f7863e0a496a72736f152cb1b72f0b457f0568",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":i?"Expand navigation":"Collapse navigation","aria-expanded":i?"false":"true"},s("span",{key:"f7f364b7c180df165810cdaf860503b7fbfe910a",class:"panel-nav__header-logo","aria-hidden":"true"},s("svg",{key:"e6da4d17b193659f0e24af9755df2dc142ba9cc2",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},s("path",{key:"68a134b7d29f6742ef502c3f1746e9bd4d3a8645",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"}))),s("span",{key:"2d3b9775118bc0b3d8c5cb1797d3c49b4f80fe1b",class:"panel-nav__header-toggle","aria-hidden":"true"},s("ds-icon",{key:"b4cc435527a73527a286a2d8c1ff7dbf43e73ff8",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),s("div",{key:"16905cbf63c054c126ee69dfbc7b16011c3a4dc5",class:{"panel-nav__body":true,"scroll-edge-fade":true,"scroll-edge-fade--bottom":true,"scroll-edge-fade--at-end":this.atBottom},onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((a=>s("div",{class:"panel-nav__group"},a.label&&s("span",{class:"panel-nav__group-label"},s("span",{class:"panel-nav__item-label-text"},s("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label))),a.items.map((a=>this.renderNavItem(a,e++,i))))))})()),s("div",{key:"6e5e87c5ffe0f61acd7ced05bed714b264f1c567",class:"panel-nav__footer"},s("ds-button-unfilled-icon",{key:"fc822269fd0ef9992ec21339641d97460d02ca09",class:"panel-nav__footer-btn",icon:a?"Gear":"Dashboard",activeFill:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}),s("button",{key:"2a83af162818584a7d5e07eb1fddce77dc2cc9e5",type:"button",id:k,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":i?`User: ${o}`:`User menu for ${o}`,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},s("span",{key:"aeebfcefa0089ddd69cf186c04eb0ae774d66a5f",class:"panel-nav__item-label panel-nav__footer-user-label"},s("span",{key:"e98f86985c9a609e8626e9f17681e762c7247ce9",class:"panel-nav__item-label-text"},s("ds-text",{key:"53a85049918335a1ae04119b602aaa0828b4a10a",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},o))),s("span",{key:"240062b9367bac0e1991cc53d4e1038c48b6f6e9",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},s("span",{key:"2fc021525bf2a5a510c1600b61618f061102cdb5",class:"panel-nav__footer-icon-expanded"},s("ds-icon",{key:"db4d4f636c6e559090ebc8cabc233dbb36ac07b4",name:"ChevronUpDown",size:"md",color:"inherit"})),s("span",{key:"452f3fa48754c3f86868ee30c141856f7067efbe",class:"panel-nav__footer-icon-collapsed"},s("ds-icon",{key:"317460bcab1f3b21b05049305a749adccbfb5901",name:"Circle",size:"md",color:"inherit"}),s("span",{key:"e89d8ea7f22f32438ad31b52910549fd5170c0c9",class:"panel-nav__user-initial"},s("ds-text",{key:"8ce7eb4696d09e713f4128b565127b8728f53899",as:"span",variant:"text-caption-emphasis",color:"inherit"},r))))))),!this.viewportNarrow&&s("div",{key:"62b7c73cfd08294358bf1decc3e14222296383f1",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 w()+z()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],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}]}]);C.HOST_PROP_SYNC_BUDGET=8;function A(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled-icon","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),C)}break;case"ds-badge":if(!customElements.get(i(e))){o()}break;case"ds-button-unfilled-icon":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){l()}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}A();const I=C;const D=A;export{I as DsPanelNav,D as defineCustomElement};
1
+ import{p as e,H as a,c as n,h as s,a as t,t as i}from"./index.js";import{d as o}from"./p-CiEc8Nwx.js";import{d as r}from"./p-BTndnbR_.js";import{d as l}from"./p-DqBCQRRd.js";import{d}from"./p-C9za7IDu.js";import{T as c}from"./p-BRju0sEC.js";const v={side:"right",align:"end",sideOffset:c.space050,alignOffset:0};const p="data-nav-style";function h(e){if(e==="dashboard"||e==="settings")return e;return undefined}function f(e,a,n){const s=h(a);if(s)return s;const t=typeof document!=="undefined"?document.documentElement.getAttribute(p):null;const i=h(t);if(i)return i;return e}function u(e,a){return e!==a}function m(e,a){return e===a||e.startsWith(`${a}/`)}function g(e,a){if(!e)return"";let n="";let s=0;for(const t of a){if(!t.href)continue;if(m(e,t.href)&&t.href.length>s){n=t.id;s=t.href.length}}return n}function b(e){return e.reduce(((e,a)=>e+a.items.length),0)}function _(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function y(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function x(e,a){return b(e)===0&&b(_(a))>0}const k="ds-panel-nav-user-menu-anchor";const w=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to bottom, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to left, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to left, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const z=()=>`.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))}.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-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,ds-app-shell[grid].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[grid] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion), min-width var(--_nav-expand-motion), background-color var(--effect-motion-short-3, 200ms ease), border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms, max-height var(--_nav-label-fade-motion) 0ms, padding var(--_nav-label-fade-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms, mask-position var(--_nav-label-fade-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right: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-icon-fg:var(--_nav-fg-secondary);--ds-button-unfilled-icon-fg-active:var(--_nav-fg-primary);--ds-button-unfilled-icon-hover-bg:var(--_nav-hover);--ds-button-unfilled-icon-pressed-bg: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:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const C=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return y(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=_(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=f(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const a=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const n=e?.getBoundingClientRect().width??0;if(Math.abs(n-a)<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=g(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(u(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(x(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const a=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=a){const a=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return a[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 a=this.getAllItems().length;const n=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=a){this.handleItemClick(n[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${k}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:v})}}handleRovingKeyDown(e,a){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(a);return}const n=this.getFooterRovingIndex();const s=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(a===s)return;if(a===n)t=s;else t=a+1;break;case"ArrowUp":if(a===0)return;if(a===s)t=n;else if(a===n)t=n-1;else t=a-1;break;case"ArrowRight":if(a===n)t=s;else return;break;case"ArrowLeft":if(a===s)t=n;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=s;break;default:return}if(t===undefined||t===a)return;e.preventDefault();this.focusRovingAt(t)}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a,menuPlacement:v})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const s=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",s);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=s;window.addEventListener("mousemove",n);window.addEventListener("mouseup",s)}renderNavItem(e,a,n){const t=e.id===this.effectiveActiveId;const i=a+1;const o=[s("span",{class:"panel-nav__item-icon"},s("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),s("span",{class:"panel-nav__item-label"},s("span",{class:"panel-nav__item-label-text"},s("ds-text",{as:"span",variant:t?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&s("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},"aria-current":t?"page":undefined,title:n?e.label:undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const l=this.routerMode==="anchor"&&e.href;return l?s("a",{...r,href:e.href},o):s("button",{...r,type:"button"},o)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":i,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return s(t,{key:"8b23d553e483cb1ba292a0c772e6fedb8989294b",style:{display:"block",position:"relative"}},s("nav",{key:"57079ba047c7268e7f5b3042416dbc58fff37486",class:l,"aria-label":a?"Dashboard navigation":"Settings navigation"},s("div",{key:"294462c9de6ef149d8e412769f414ab989f0bb7e",class:"panel-nav__header"},s("button",{key:"e5f7863e0a496a72736f152cb1b72f0b457f0568",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":i?"Expand navigation":"Collapse navigation","aria-expanded":i?"false":"true"},s("span",{key:"f7f364b7c180df165810cdaf860503b7fbfe910a",class:"panel-nav__header-logo","aria-hidden":"true"},s("svg",{key:"e6da4d17b193659f0e24af9755df2dc142ba9cc2",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},s("path",{key:"68a134b7d29f6742ef502c3f1746e9bd4d3a8645",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"}))),s("span",{key:"2d3b9775118bc0b3d8c5cb1797d3c49b4f80fe1b",class:"panel-nav__header-toggle","aria-hidden":"true"},s("ds-icon",{key:"b4cc435527a73527a286a2d8c1ff7dbf43e73ff8",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),s("div",{key:"16905cbf63c054c126ee69dfbc7b16011c3a4dc5",class:{"panel-nav__body":true,"scroll-edge-fade":true,"scroll-edge-fade--bottom":true,"scroll-edge-fade--at-end":this.atBottom},onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((a=>s("div",{class:"panel-nav__group"},a.label&&s("span",{class:"panel-nav__group-label"},s("span",{class:"panel-nav__item-label-text"},s("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label))),a.items.map((a=>this.renderNavItem(a,e++,i))))))})()),s("div",{key:"6e5e87c5ffe0f61acd7ced05bed714b264f1c567",class:"panel-nav__footer"},s("ds-button-unfilled-icon",{key:"fc822269fd0ef9992ec21339641d97460d02ca09",class:"panel-nav__footer-btn",icon:a?"Gear":"Dashboard",activeFill:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}),s("button",{key:"2a83af162818584a7d5e07eb1fddce77dc2cc9e5",type:"button",id:k,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":i?`User: ${o}`:`User menu for ${o}`,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},s("span",{key:"aeebfcefa0089ddd69cf186c04eb0ae774d66a5f",class:"panel-nav__item-label panel-nav__footer-user-label"},s("span",{key:"e98f86985c9a609e8626e9f17681e762c7247ce9",class:"panel-nav__item-label-text"},s("ds-text",{key:"53a85049918335a1ae04119b602aaa0828b4a10a",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},o))),s("span",{key:"240062b9367bac0e1991cc53d4e1038c48b6f6e9",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},s("span",{key:"2fc021525bf2a5a510c1600b61618f061102cdb5",class:"panel-nav__footer-icon-expanded"},s("ds-icon",{key:"db4d4f636c6e559090ebc8cabc233dbb36ac07b4",name:"ChevronUpDown",size:"md",color:"inherit"})),s("span",{key:"452f3fa48754c3f86868ee30c141856f7067efbe",class:"panel-nav__footer-icon-collapsed"},s("ds-icon",{key:"317460bcab1f3b21b05049305a749adccbfb5901",name:"Circle",size:"md",color:"inherit"}),s("span",{key:"e89d8ea7f22f32438ad31b52910549fd5170c0c9",class:"panel-nav__user-initial"},s("ds-text",{key:"8ce7eb4696d09e713f4128b565127b8728f53899",as:"span",variant:"text-caption-emphasis",color:"inherit"},r))))))),!this.viewportNarrow&&s("div",{key:"62b7c73cfd08294358bf1decc3e14222296383f1",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 w()+z()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],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}]}]);C.HOST_PROP_SYNC_BUDGET=8;function A(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled-icon","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),C)}break;case"ds-badge":if(!customElements.get(i(e))){o()}break;case"ds-button-unfilled-icon":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){l()}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}A();const I=C;const D=A;export{I as DsPanelNav,D as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-nav.js.map