@ds-mo/ui 1.9.1 → 1.10.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.
- package/dist/.build-stamp +1 -1
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-app-shell.js.map +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/p-DN65lYYc.js +2 -0
- package/dist/components/p-DN65lYYc.js.map +1 -0
- package/dist/types/components/AppShell/AppShell.d.ts +12 -1
- package/dist/types/components/BarNav/BarNav.d.ts +10 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +4 -0
- package/dist/types/components/PanelTools/PanelTools.d.ts +4 -0
- package/dist/types/components.d.ts +16 -0
- package/dist/types/nav/chrome-transition.d.ts +8 -0
- package/dist/types/nav/index.d.ts +4 -0
- package/dist/types/nav/shell-chrome-metrics.d.ts +12 -0
- package/package.json +4 -4
- package/src/angular/proxies.ts +20 -2
- package/src/react/ds-panel-nav.ts +5 -1
- package/src/react/ds-panel-tools.ts +11 -3
- package/src/wc/components/AppShell/AppShell.tsx +106 -16
- package/src/wc/components/BarNav/BarNav.tsx +91 -2
- package/src/wc/components/PanelNav/PanelNav.tsx +10 -0
- package/src/wc/components/PanelTools/PanelTools.tsx +10 -0
- package/src/wc/components.d.ts +16 -0
- package/src/wc/nav/chrome-transition.ts +10 -0
- package/src/wc/nav/index.ts +13 -0
- package/src/wc/nav/shell-chrome-metrics.ts +49 -0
package/dist/.build-stamp
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1783096509261
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as s,H as e,h as t,a,t as l}from"./index.js";import{C as i,a as n,r as h,i as o,p as r}from"./p-DN65lYYc.js";const p="--ds-shell-gradient-image";const c="--ds-shell-gradient-size";const d="--ds-shell-gradient-position-panel";const f="--ds-shell-gradient-position-bar";const g="--ds-shell-gradient-opacity";const u="0.1";const b="100% 100% at 0% 0%";function _(){return`radial-gradient(${b}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`}function m(s){return`${Math.round(s.width)}px ${Math.round(s.height)}px`}function v(){return"0 0"}function y(s){return`${-Math.round(s)}px 0`}const x=()=>`.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{--_shell-chrome-bg:var(--color-background-secondary);--_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{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before,.app-shell--gradient.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--gradient.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:flex;flex-direction:row;position:relative;z-index:1}.app-shell__stack.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;z-index:1;overflow:hidden}.app-shell__bar.sc-ds-app-shell{flex:0 0 auto}.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{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{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{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 k=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.gradientSrc="";this.resizeObserver=null;this.chromeSyncRafId=0;this.chromeTransitionDepth=0;this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedShellWidth=0;this.cachedShellHeight=0;this.onChromeTransitionStart=s=>{const e=s.detail?.source;if(e==="panel-nav"){this.chromeTransitionDepth+=1;this.cachedShellWidth=this.el.clientWidth;this.cachedShellHeight=this.el.clientHeight;this.syncChrome()}};this.onChromeTransitionEnd=s=>{const e=s.detail?.source;if(e!=="panel-nav")return;this.chromeTransitionDepth=Math.max(0,this.chromeTransitionDepth-1);if(this.chromeTransitionDepth===0){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.el.addEventListener(i,this.onChromeTransitionStart);this.el.addEventListener(n,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;if(this.chromeSyncRafId){cancelAnimationFrame(this.chromeSyncRafId);this.chromeSyncRafId=0}this.el.removeEventListener(i,this.onChromeTransitionStart);this.el.removeEventListener(n,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){if(this.chromeSyncRafId)return;this.chromeSyncRafId=requestAnimationFrame((()=>{this.chromeSyncRafId=0;this.syncChrome()}))}syncSlottedNavStyle(){const s=this.el.querySelector("ds-panel-nav");const e=this.el.querySelector("ds-bar-nav");if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.chromeTransitionDepth>0)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const s=this.el.querySelector(".app-shell__panel");if(s)this.resizeObserver.observe(s)}cachePanelWidthTokens(){const s=this.el.querySelector("ds-panel-nav .panel-nav");if(!s)return;this.panelWidthTokens=h(s)}applyGradientVars(s,e){const t=s.style;for(const[s,a]of Object.entries(e)){if(a===null)t.removeProperty(s);else t.setProperty(s,a)}}clearGradientPaintVars(s){const e=[p,c,g];for(const t of s){for(const s of e)t.style.removeProperty(s)}}syncChromeLayoutVars(s,e,t,a){if(s){s.style.setProperty(d,t)}if(e){e.style.setProperty(f,a)}}resolvePanelWidthPx(s){const e=s?.querySelector(".panel-nav");if(this.chromeTransitionDepth>0&&this.panelWidthTokens.expandedPx>0){const t=o(s,e);return r(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const a=t?.getBoundingClientRect().width??0;if(a>0)return a;if(this.panelWidthTokens.expandedPx>0){const t=o(s,e);return r(this.panelWidthTokens,t)}return 0}resolveShellDimensions(){if(this.chromeTransitionDepth>0&&this.cachedShellWidth>0){return{width:this.cachedShellWidth,height:this.cachedShellHeight||this.el.clientHeight}}const s=this.el.getBoundingClientRect();return{width:s.width,height:s.height}}syncChrome(){const s=this.el.querySelector("ds-panel-nav");const e=this.el.querySelector("ds-bar-nav");const t=[this.el,s,e].filter((s=>s!==null));const{width:a,height:l}=this.resolveShellDimensions();const i=this.resolvePanelWidthPx(s);const n=v();const h=y(i);this.syncChromeLayoutVars(s,e,n,h);if(!this.gradient){this.clearGradientPaintVars(t);return}const o=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:_();const r=m({width:a,height:l});const b=u;for(const s of t){if(s===this.el){this.applyGradientVars(s,{[p]:o,[c]:r,[d]:n,[f]:h,[g]:b});continue}const e=s.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(s,{[p]:o,[c]:r,[g]:b,[d]:e?null:n,[f]:e?h:null})}}render(){const s={"app-shell":true,"app-shell--gradient":this.gradient,[`app-shell--${this.navStyle}`]:true};return t(a,{key:"e2fbf1affdf17be0014ddfd4a61a03095876050a",class:s},t("div",{key:"dd139b4802c2cf7600bded271aed1bb951782202",class:"app-shell__row"},this.gradient?t("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,t("div",{key:"dfbfa85f829e73dc23e564407b496f6473a24d58",class:"app-shell__panel"},t("slot",{key:"cd8b80a337470bc415a059ac98d9034df1231989",name:"panel"})),t("div",{key:"03c340a7cb65647f4917c94b96bdf51a1ab4b38c",class:"app-shell__main"},t("div",{key:"ac01c5874c8b05f4ea4a55f4099f57fab62a4fa7",class:"app-shell__stack"},t("div",{key:"cfaa4df620975e68f6cfd77c348bcdd9a633e75c",class:"app-shell__bar"},t("slot",{key:"f23c862beb6ce8b7d2d084737f5ab4db2784ca01",name:"bar"})),t("div",{key:"5107c56ebf44f1e04271d97a93dd104f4b2a5fa3",class:"app-shell__content"},t("slot",{key:"a6c5b62fc847eaaeec20481749327f22e8d34f1d"}))),t("div",{key:"ddf87982e4dda5b771c138c24a53fdfa7be72140",class:"app-shell__tools"},t("slot",{key:"6e29288b7acd9e49a399ebabfa1943e9575969d9",name:"tools"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}]}}static get style(){return x()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradient:[516],gradientSrc:[1,"gradient-src"]},undefined,{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}]}]);function w(){if(typeof customElements==="undefined"){return}const s=["ds-app-shell"];s.forEach((s=>{switch(s){case"ds-app-shell":if(!customElements.get(l(s))){customElements.define(l(s),k)}break}}))}w();const S=k;const z=w;export{S as DsAppShell,z as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-app-shell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","SHELL_GRADIENT_OPACITY","GRADIENT_GEOMETRY","buildShellRadialGradient","shellGradientSize","layout","Math","round","width","height","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradient","gradientSrc","resizeObserver","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","scheduleChromeSync","syncChrome","requestAnimationFrame","disconnectedCallback","disconnect","onShellPropsChange","panel","el","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","applyGradientVars","target","vars","style","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","key","syncChromeLayoutVars","panelPosition","barPosition","filter","shellRect","getBoundingClientRect","image","trim","size","opacity","isBar","tagName","toLowerCase","render","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-gradient.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** 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\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark blue intent).\n */\nexport function buildShellRadialGradient(): string {\n return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImage(): string {\n return buildShellRadialGradient();\n}\n\nexport interface ShellGradientLayout {\n width: number;\n height: number;\n panelWidth: number;\n}\n\nexport function shellGradientSize(layout: ShellGradientLayout): string {\n return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n return `${-Math.round(panelWidth)}px 0`;\n}\n\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",":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 --_shell-chrome-bg: var(--color-background-secondary);\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.\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 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--gradient) .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--gradient) .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: flex;\n flex-direction: row;\n position: relative;\n z-index: 1;\n}\n\n.app-shell__stack {\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.app-shell__bar {\n flex: 0 0 auto;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n display: block;\n}\n\n.app-shell__content {\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n:host(.app-shell--gradient) .app-shell__content {\n position: relative;\n z-index: 1;\n background-color: var(--color-background-primary);\n}\n\n.app-shell__tools {\n flex: 0 0 auto;\n min-height: 0;\n height: 100%;\n display: flex;\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, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\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 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 shared chrome surface (bg + wash + grid) behind panel, bar, and tools. */\n @Prop({ reflect: true }) gradient: 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 @Element() el!: HTMLElement;\n\n private resizeObserver: ResizeObserver | null = null;\n\n componentDidLoad() {\n this.syncSlottedNavStyle();\n this.connectMetricsObserver();\n this.scheduleChromeSync();\n }\n\n private scheduleChromeSync() {\n this.syncChrome();\n requestAnimationFrame(() => this.syncChrome());\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n @Watch('navStyle')\n @Watch('gradient')\n @Watch('gradientSrc')\n onShellPropsChange() {\n this.syncSlottedNavStyle();\n this.scheduleChromeSync();\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(() => this.scheduleChromeSync());\n this.resizeObserver.observe(this.el);\n const panelWrap = this.el.querySelector('.app-shell__panel');\n if (panelWrap) this.resizeObserver.observe(panelWrap);\n this.scheduleChromeSync();\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 syncChrome() {\n const panel = 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, panel, bar].filter((el): el is HTMLElement => el !== null);\n\n const shellRect = this.el.getBoundingClientRect();\n const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;\n const panelWidth = panelWrap?.getBoundingClientRect().width ?? 0;\n\n const panelPosition = shellGradientPositionPanel();\n const barPosition = shellGradientPositionBar(panelWidth);\n\n this.syncChromeLayoutVars(panel, bar, panelPosition, barPosition);\n\n if (!this.gradient) {\n this.clearGradientPaintVars(targets);\n return;\n }\n\n const image = this.gradientSrc.trim()\n ? `url(${this.gradientSrc.trim()})`\n : buildShellRadialGradient();\n\n const size = shellGradientSize({\n width: shellRect.width,\n height: shellRect.height,\n panelWidth,\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 shellCls: Record<string, boolean> = {\n 'app-shell': true,\n 'app-shell--gradient': this.gradient,\n [`app-shell--${this.navStyle}`]: true,\n };\n\n return (\n <Host class={shellCls}>\n <div class=\"app-shell__row\">\n {this.gradient ? <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__stack\">\n <div class=\"app-shell__bar\">\n <slot name=\"bar\" />\n </div>\n <div class=\"app-shell__content\">\n <slot />\n </div>\n </div>\n <div class=\"app-shell__tools\">\n <slot name=\"tools\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","SHELL_GRADIENT_OPACITY","GRADIENT_GEOMETRY","buildShellRadialGradient","shellGradientSize","layout","Math","round","width","height","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradient","gradientSrc","resizeObserver","chromeSyncRafId","chromeTransitionDepth","panelWidthTokens","expandedPx","collapsedPx","cachedShellWidth","cachedShellHeight","onChromeTransitionStart","event","source","detail","el","clientWidth","clientHeight","syncChrome","onChromeTransitionEnd","max","scheduleChromeSync","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","disconnectedCallback","disconnect","cancelAnimationFrame","removeEventListener","onShellPropsChange","panel","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","navRoot","readPanelNavWidthTokens","applyGradientVars","target","vars","style","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","key","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","collapsed","isPanelNavCollapsed","panelWidthPxFromTokens","measured","getBoundingClientRect","resolveShellDimensions","rect","filter","shellWidth","shellHeight","image","trim","size","opacity","isBar","tagName","toLowerCase","render","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-gradient.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** 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\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark blue intent).\n */\nexport function buildShellRadialGradient(): string {\n return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImage(): string {\n return buildShellRadialGradient();\n}\n\nexport interface ShellGradientLayout {\n width: number;\n height: number;\n panelWidth: number;\n}\n\nexport function shellGradientSize(layout: ShellGradientLayout): string {\n return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n return `${-Math.round(panelWidth)}px 0`;\n}\n\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",":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 --_shell-chrome-bg: var(--color-background-secondary);\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.\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 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--gradient) .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--gradient) .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: flex;\n flex-direction: row;\n position: relative;\n z-index: 1;\n}\n\n.app-shell__stack {\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n z-index: 1;\n overflow: hidden;\n}\n\n.app-shell__bar {\n flex: 0 0 auto;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n display: block;\n}\n\n.app-shell__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 position: relative;\n z-index: 1;\n background-color: var(--color-background-primary);\n}\n\n.app-shell__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, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n type ChromeTransitionDetail,\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 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 shared chrome surface (bg + wash + grid) behind panel, bar, and tools. */\n @Prop({ reflect: true }) gradient: 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 @Element() el!: HTMLElement;\n\n private resizeObserver: ResizeObserver | null = null;\n private chromeSyncRafId = 0;\n private chromeTransitionDepth = 0;\n private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n private cachedShellWidth = 0;\n private cachedShellHeight = 0;\n\n componentDidLoad() {\n this.syncSlottedNavStyle();\n this.connectMetricsObserver();\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 if (this.chromeSyncRafId) {\n cancelAnimationFrame(this.chromeSyncRafId);\n this.chromeSyncRafId = 0;\n }\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('gradientSrc')\n onShellPropsChange() {\n this.syncSlottedNavStyle();\n this.scheduleChromeSync();\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n if (source === 'panel-nav') {\n this.chromeTransitionDepth += 1;\n this.cachedShellWidth = this.el.clientWidth;\n this.cachedShellHeight = this.el.clientHeight;\n this.syncChrome();\n }\n };\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n if (source !== 'panel-nav') return;\n\n this.chromeTransitionDepth = Math.max(0, this.chromeTransitionDepth - 1);\n if (this.chromeTransitionDepth === 0) {\n this.scheduleChromeSync();\n }\n };\n\n /** Coalesce ResizeObserver bursts to one layout read per frame. */\n private scheduleChromeSync() {\n if (this.chromeSyncRafId) return;\n this.chromeSyncRafId = requestAnimationFrame(() => {\n this.chromeSyncRafId = 0;\n this.syncChrome();\n });\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.chromeTransitionDepth > 0) 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 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.chromeTransitionDepth > 0 && 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 private resolveShellDimensions(): { width: number; height: number } {\n if (this.chromeTransitionDepth > 0 && this.cachedShellWidth > 0) {\n return {\n width: this.cachedShellWidth,\n height: this.cachedShellHeight || this.el.clientHeight,\n };\n }\n\n const rect = this.el.getBoundingClientRect();\n return { width: rect.width, height: rect.height };\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 { width: shellWidth, height: shellHeight } = this.resolveShellDimensions();\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 if (!this.gradient) {\n this.clearGradientPaintVars(targets);\n return;\n }\n\n const image = this.gradientSrc.trim()\n ? `url(${this.gradientSrc.trim()})`\n : buildShellRadialGradient();\n\n const size = shellGradientSize({\n width: shellWidth,\n height: shellHeight,\n panelWidth,\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 shellCls: Record<string, boolean> = {\n 'app-shell': true,\n 'app-shell--gradient': this.gradient,\n [`app-shell--${this.navStyle}`]: true,\n };\n\n return (\n <Host class={shellCls}>\n <div class=\"app-shell__row\">\n {this.gradient ? <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__stack\">\n <div class=\"app-shell__bar\">\n <slot name=\"bar\" />\n </div>\n <div class=\"app-shell__content\">\n <slot />\n </div>\n </div>\n <div class=\"app-shell__tools\">\n <slot name=\"tools\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as a,c as s,h as e,a as i,t as n}from"./index.js";import{s as r,p as o,d as h}from"./p-Dl1GvZQ2.js";import{g as d,i as b}from"./p-BQq26pt9.js";import{d as c}from"./p-CiEc8Nwx.js";import{d as l}from"./p-CCZFMcLe.js";import{d as v}from"./p-DqBCQRRd.js";import{d as f}from"./p-CuuuDjJJ.js";import{d as u}from"./p-DlsexsFg.js";function g(t,a){if(!t)return null;const s=t.shadowRoot??t;return s.querySelector(a)}function p(t){return g(t,'[role="tablist"]')}function m(t,a){const s=[];let e=[];for(const i of t){if(b(i)){if(e.length>0){s.push({items:e});e=[]}continue}e.push({label:i.label,value:i.id,isSelected:i.id===a,isInactive:i.disabled})}if(e.length>0){s.push({items:e})}return s}function _(t,a){const s=d(t);return s.find((t=>t.id===a))??s[0]}function y(t,a){return _(t,a)?.label??"Tabs"}function k(t,a,s,e=2){const i=t-a;if(s){return i>-e}return i>e}const w=()=>`.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;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)}.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{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:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.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__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_bar-nav-fg-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--_bar-nav-hover);--_pressed-bg:var(--_bar-nav-pressed);--_dot:var(--_bar-nav-dot);--_dot-ring:var(--_bar-nav-bg)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.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}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const x=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.dsTabChange=s(this,"dsTabChange");this.dsActionChange=s(this,"dsActionChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0;this.committedSection="";this.pendingSection=""}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return y(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!_(this.resolvedTabs,this.effectiveValue)?.dot}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(t){if(this.menuEl){this.menuEl.open=t}}onTabsCollapsedChange(t,a){if(!t){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(t){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(t||a===undefined||a===t)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(r(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let a=t.HOST_PROP_SYNC_BUDGET;const s=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(s)}};queueMicrotask(s)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(t=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(t||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const t=this.triggerLabelTextEl;if(!t||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const a=t.scrollWidth>t.clientWidth+1;if(a!==this.triggerLabelTruncated){this.triggerLabelTruncated=a}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const t=getComputedStyle(this.headerEl);const a=parseFloat(t.columnGap||t.gap||"0")||0;const s=this.headerEl.querySelector(".bar-nav__actions");const e=s?.offsetWidth??0;const i=(parseFloat(t.paddingLeft)||0)+(parseFloat(t.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:s?a:0;const r=this.headerEl.clientWidth-i-e-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const t=p(this.probeTabGroupEl);return t?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=t.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const t=this.getTabsIntrinsicWidth();if(t===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const a=k(t,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(a!==this.tabsCollapsed){this.tabsCollapsed=a;if(!a){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(t){const a=t.detail;if(a?.value!==undefined){this.selectTab(String(a.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}incomingTabs(){return this.tabsJson?o(this.tabsJson,[]):this.tabs??[]}incomingActions(){return this.actionsJson?o(this.actionsJson,[]):this.actions??[]}applyHostProps(){const t=this.basePath;const a=t!==""&&this.committedSection!==""&&t!==this.committedSection;if(a){this.urlDerivedValue="";this.committedSection="";this.pendingSection=t;this.resolvedTabs=[];this.resolvedActions=this.incomingActions();return}if(this.pendingSection){if(!t||t!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const a=this.incomingTabs();if(a.length===0){return}this.pendingSection=""}this.resolvedTabs=this.incomingTabs();this.resolvedActions=this.incomingActions();this.syncValueFromUrl();this.committedSection=t;this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=m(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){const t=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:a,hideTabs:s}=h(this.currentUrl,this.basePath,t);this.urlDerivedValue=a;this.hideTabsForDetailRoute=s}selectTab(t){this.value=t;this.dsTabChange.emit(t)}focusVisibleSelectedTab(){const t=g(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);t?.focus({preventScroll:true})}handleTabChange(t){this.selectTab(t.detail)}handleActionChange(t,a){const s=a.detail;this.dsActionChange.emit({id:t,selected:s})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(t){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(t.key==="ArrowDown"||t.key==="ArrowUp"||t.key==="Enter"||t.key===" "){t.preventDefault();this.toggleTabMenu()}return}if(t.key==="Escape"){t.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}render(){const t=this.basePath!==""&&this.committedSection===this.basePath;const a=t&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const s=this.basePath||"no-section";return e(i,{key:"2ff547fe6ebb8f5aa17b30a20a436fc5c2b8fc75"},e("header",{key:"7c88c669d64b91569e3d9aa2a6f0de0956588e49",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},ref:t=>{this.headerEl=t;if(t&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&e("div",{key:"fc29973927e1d460c4bb80dd6130631d8805aca1",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("ds-tab-group-nav",{key:`probe-${s}`,ref:t=>{this.probeTabGroupEl=t??null;if(t){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),a&&!this.tabsCollapsed&&e("div",{key:"ae57bea6885eac877ff444039da65fca28730d86",class:"bar-nav__left"},e("ds-tab-group-nav",{key:`visible-${s}`,class:"bar-nav__tabs-visible",ref:t=>{this.visibleTabGroupEl=t??null},tabs:this.resolvedTabs,value:this.effectiveValue,onDsChange:t=>this.handleTabChange(t)})),!a&&this.heading&&e("span",{key:"11ef1b192400cd655a11460fe924d3f627b00781",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&e("button",{key:"75adf0a20847a45174bed264c38855095e508fb8",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:t=>{this.triggerEl=t},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:t=>this.handleTriggerKeyDown(t)},e("span",{key:"4b9d05bc0a2b79aa55ba7d280ef2e69cbd7ff332",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},e("span",{key:"47a91c33a5e951e7d980141306663557644c59db",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:t=>{const a=t??null;if(a===this.triggerLabelTextEl)return;this.triggerLabelTextEl=a;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&e("ds-badge",{key:"14f905957e861e5fc45be1e68343f73c4ecdb60c",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),e("ds-icon",{key:"1ee995a3253c2742f67e1f0f11b18ce382e80a2d",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&e("div",{key:"703a4fbbae8704f1447b2190982dfdbef738b74a",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&e("div",{key:"ca3344145d61120c7e19a7bd5e1843a6d7663e5a",class:"bar-nav__actions"},this.resolvedActions.map((t=>e("ds-bar-nav-action",{key:t.id,icon:t.icon,selected:t.selected??false,dot:t.dot??false,inactive:t.inactive,"aria-label":t.ariaLabel??t.id,onDsChange:a=>this.handleActionChange(t.id,a)}))))),a&&this.tabsCollapsed&&e("ds-menu",{key:"ebfab76ff9a905b65c16dc08dc45f2a11dba98c1",ref:t=>{this.menuEl=t??null},open:this.menuOpen,sections:m(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:t=>this.handleMenuSelect(t),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],actions:[{onHostPropsChange:0}],actionsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return w()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],actions:[{onHostPropsChange:0}],actionsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);x.HOST_PROP_SYNC_BUDGET=8;x.INTRINSIC_WIDTH_RETRY_MAX=3;function C(){if(typeof customElements==="undefined"){return}const t=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];t.forEach((t=>{switch(t){case"ds-bar-nav":if(!customElements.get(n(t))){customElements.define(n(t),x)}break;case"ds-badge":if(!customElements.get(n(t))){c()}break;case"ds-bar-nav-action":if(!customElements.get(n(t))){l()}break;case"ds-icon":if(!customElements.get(n(t))){v()}break;case"ds-menu":if(!customElements.get(n(t))){f()}break;case"ds-tab-group-nav":if(!customElements.get(n(t))){u()}break}}))}C();const z=x;const T=C;export{z as DsBarNav,T as defineCustomElement};
|
|
1
|
+
import{p as t,H as s,c as e,h as a,a as i,t as n}from"./index.js";import{s as r,p as o,d as h}from"./p-Dl1GvZQ2.js";import{g as d,i as l}from"./p-BQq26pt9.js";import{C as b,a as c,b as v}from"./p-DN65lYYc.js";import{d as f}from"./p-CiEc8Nwx.js";import{d as u}from"./p-CCZFMcLe.js";import{d as p}from"./p-DqBCQRRd.js";import{d as g}from"./p-CuuuDjJJ.js";import{d as m}from"./p-DlsexsFg.js";function _(t,s){if(!t)return null;const e=t.shadowRoot??t;return e.querySelector(s)}function y(t){return _(t,'[role="tablist"]')}function w(t,s){const e=[];let a=[];for(const i of t){if(l(i)){if(a.length>0){e.push({items:a});a=[]}continue}a.push({label:i.label,value:i.id,isSelected:i.id===s,isInactive:i.disabled})}if(a.length>0){e.push({items:a})}return e}function k(t,s){const e=d(t);return e.find((t=>t.id===s))??e[0]}function x(t,s){return k(t,s)?.label??"Tabs"}function C(t,s,e,a=2){const i=t-s;if(e){return i>-a}return i>a}const z=()=>`.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)}.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{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:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.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--tools-drawer-opening.sc-ds-bar-nav-h .bar-nav__left.sc-ds-bar-nav{display:none}.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__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_bar-nav-fg-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--_bar-nav-hover);--_pressed-bg:var(--_bar-nav-pressed);--_dot:var(--_bar-nav-dot);--_dot-ring:var(--_bar-nav-bg)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--dimension-size-400)), transparent 100% );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.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}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const T=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsTabChange=e(this,"dsTabChange");this.dsActionChange=e(this,"dsActionChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0;this.chromeTransitionDepth=0;this.chromeTransitionShell=null;this.toolsDrawerOpening=false;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=t=>{const s=t.detail?.source;if(s==="panel-nav"){this.chromeTransitionDepth+=1;return}if(s==="panel-tools"){this.toolsDrawerOpening=true;this.el.classList.add("bar-nav--tools-drawer-opening");if(this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute){this.tabsCollapsed=true;this.menuOpen=false}this.scheduleOverflowCheck()}};this.onChromeTransitionEnd=t=>{const s=t.detail?.source;if(s==="panel-nav"){this.chromeTransitionDepth=Math.max(0,this.chromeTransitionDepth-1);if(this.chromeTransitionDepth===0){this.scheduleOverflowCheck()}return}if(s==="panel-tools"){this.toolsDrawerOpening=false;this.el.classList.remove("bar-nav--tools-drawer-opening");this.scheduleOverflowCheck()}}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return x(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!k(this.resolvedTabs,this.effectiveValue)?.dot}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(t){if(this.menuEl){this.menuEl.open=t}}onTabsCollapsedChange(t,s){if(!t){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(t){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(t||s===undefined||s===t)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeTransitionDepth>0){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true);this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const t=this.el.closest("ds-app-shell");if(!t)return;this.chromeTransitionShell=t;t.addEventListener(b,this.onChromeTransitionStart);t.addEventListener(c,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(b,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(c,this.onChromeTransitionEnd);this.chromeTransitionShell=null}syncHostPropsIfNeeded(){if(r(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let s=t.HOST_PROP_SYNC_BUDGET;const e=()=>{this.syncHostPropsIfNeeded();if(--s>0){requestAnimationFrame(e)}};queueMicrotask(e)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeTransitionDepth>0)return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeTransitionDepth>0)return;if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;if(this.chromeTransitionDepth>0)return;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(t=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(t||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const t=this.triggerLabelTextEl;if(!t||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const s=t.scrollWidth>t.clientWidth+1;if(s!==this.triggerLabelTruncated){this.triggerLabelTruncated=s}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const t=getComputedStyle(this.headerEl);const s=parseFloat(t.columnGap||t.gap||"0")||0;const e=this.headerEl.querySelector(".bar-nav__actions");const a=e?.offsetWidth??0;const i=(parseFloat(t.paddingLeft)||0)+(parseFloat(t.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:e?s:0;const r=this.headerEl.clientWidth-i-a-n;return Math.max(0,r-this.toolsDrawerOpeningReservePx())}toolsDrawerOpeningReservePx(){if(!this.toolsDrawerOpening)return 0;const t=this.el.closest("ds-app-shell")?.querySelector("ds-panel-tools");if(!t)return 0;const s=v(t,"--_panel-tools-drawer-width");const e=t.querySelector(".panel-tools__drawer")?.getBoundingClientRect().width??0;return Math.max(0,s-e)}getTabsIntrinsicWidth(){const t=y(this.probeTabGroupEl);return t?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=t.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const s=this.getTabsIntrinsicWidth();if(s===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=C(s,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,t.OVERFLOW_HYSTERESIS_PX);if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(t){const s=t.detail;if(s?.value!==undefined){this.selectTab(String(s.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}incomingTabs(){return this.tabsJson?o(this.tabsJson,[]):this.tabs??[]}incomingActions(){return this.actionsJson?o(this.actionsJson,[]):this.actions??[]}applyHostProps(){const t=this.basePath;const s=t!==""&&this.committedSection!==""&&t!==this.committedSection;if(s){this.urlDerivedValue="";this.committedSection="";this.pendingSection=t;this.resolvedTabs=[];this.resolvedActions=this.incomingActions();return}if(this.pendingSection){if(!t||t!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const s=this.incomingTabs();if(s.length===0){return}this.pendingSection=""}this.resolvedTabs=this.incomingTabs();this.resolvedActions=this.incomingActions();this.syncValueFromUrl();this.committedSection=t;this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=w(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){const t=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:s,hideTabs:e}=h(this.currentUrl,this.basePath,t);this.urlDerivedValue=s;this.hideTabsForDetailRoute=e}selectTab(t){this.value=t;this.dsTabChange.emit(t)}focusVisibleSelectedTab(){const t=_(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);t?.focus({preventScroll:true})}handleTabChange(t){this.selectTab(t.detail)}handleActionChange(t,s){const e=s.detail;this.dsActionChange.emit({id:t,selected:e})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(t){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(t.key==="ArrowDown"||t.key==="ArrowUp"||t.key==="Enter"||t.key===" "){t.preventDefault();this.toggleTabMenu()}return}if(t.key==="Escape"){t.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}render(){const t=this.basePath!==""&&this.committedSection===this.basePath;const s=t&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.basePath||"no-section";return a(i,{key:"eda575e15438e24b0ecdc6787376ae313762da99"},a("header",{key:"d059f342a267c9f723d6137f7946abdf373055d8",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":s&&this.tabsCollapsed},ref:t=>{this.headerEl=t;if(t&&!this.resizeObserver){this.setupOverflowObserver()}}},s&&a("div",{key:"4bb4ff4463c11fb34dff8bb8c7462c3fee04e499",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},a("ds-tab-group-nav",{key:`probe-${e}`,ref:t=>{this.probeTabGroupEl=t??null;if(t){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),s&&!this.tabsCollapsed&&a("div",{key:"59bd2e10649a9bfbcff910fe18d08bef275f22c7",class:"bar-nav__left"},a("ds-tab-group-nav",{key:`visible-${e}`,class:"bar-nav__tabs-visible",ref:t=>{this.visibleTabGroupEl=t??null},tabs:this.resolvedTabs,value:this.effectiveValue,onDsChange:t=>this.handleTabChange(t)})),!s&&this.heading&&a("span",{key:"00fe94834d6d817afa88317e41281e59d71f6eb7",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),s&&this.tabsCollapsed&&a("button",{key:"284b91f0645aad55bd707055e773984c9b0528cb",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:t=>{this.triggerEl=t},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:t=>this.handleTriggerKeyDown(t)},a("span",{key:"49d22828c030f0f34870d0c84ff2a216e90af045",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},a("span",{key:"1195ca4cfa7abeeb78f73668d0361630c9933dd8",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:t=>{const s=t??null;if(s===this.triggerLabelTextEl)return;this.triggerLabelTextEl=s;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&a("ds-badge",{key:"d6575de534ddc4e4d07d2f0ed934b937819ce587",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),a("ds-icon",{key:"7ec1c1bc87e8f23d4c7b5fafd9e47dae0e09bbe1",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),s&&this.tabsCollapsed&&this.resolvedActions.length>0&&a("div",{key:"0fb271c1c84d4cce39cd535688e587a14230d32a",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&a("div",{key:"478ee4e894c535ca8c7779a24ec9e192a62b2938",class:"bar-nav__actions"},this.resolvedActions.map((t=>a("ds-bar-nav-action",{key:t.id,icon:t.icon,selected:t.selected??false,dot:t.dot??false,inactive:t.inactive,"aria-label":t.ariaLabel??t.id,onDsChange:s=>this.handleActionChange(t.id,s)}))))),s&&this.tabsCollapsed&&a("ds-menu",{key:"d5a2ae069a9a3cb2677f9e20375d3619e48a15b5",ref:t=>{this.menuEl=t??null},open:this.menuOpen,sections:w(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:t=>this.handleMenuSelect(t),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],actions:[{onHostPropsChange:0}],actionsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return z()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],actions:[{onHostPropsChange:0}],actionsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);T.HOST_PROP_SYNC_BUDGET=8;T.INTRINSIC_WIDTH_RETRY_MAX=3;T.OVERFLOW_HYSTERESIS_PX=8;function D(){if(typeof customElements==="undefined"){return}const t=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];t.forEach((t=>{switch(t){case"ds-bar-nav":if(!customElements.get(n(t))){customElements.define(n(t),T)}break;case"ds-badge":if(!customElements.get(n(t))){f()}break;case"ds-bar-nav-action":if(!customElements.get(n(t))){u()}break;case"ds-icon":if(!customElements.get(n(t))){p()}break;case"ds-menu":if(!customElements.get(n(t))){g()}break;case"ds-tab-group-nav":if(!customElements.get(n(t))){m()}break}}))}D();const P=T;const S=D;export{P as DsBarNav,S as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","tabs","selectedId","sections","batch","item","isTabDivider","length","push","items","label","value","id","isSelected","isInactive","disabled","getActiveTab","selectable","getSelectableTabs","find","tab","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","tabsJson","actions","actionsJson","basePath","currentUrl","resolvedTabs","resolvedActions","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","committedSection","pendingSection","effectiveValue","activeTabLabel","activeTabHasDot","dot","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","scheduleOverflowCheck","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","updateTriggerLabelTruncation","disconnectedCallback","disconnect","shouldResyncBarNavProps","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","updateTabsCollapsed","disconnectOnly","el","truncated","scrollWidth","clientWidth","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","gap","parseFloat","columnGap","actionsEl","actionsWidth","offsetWidth","horizontalPadding","paddingLeft","paddingRight","spacing","getPropertyValue","trim","available","Math","max","getTabsIntrinsicWidth","tabList","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","intrinsicWidth","shouldCollapse","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","incomingTabs","parseJsonArrayProp","incomingActions","nextBasePath","sectionChanged","startsWith","hideTabs","deriveBarNavValueFromUrl","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","render","sectionReady","hasTabs","tabGroupKey","h","Host","class","ref","inert","onDsChange","heading","type","onClick","onKeyDown","next","variant","background","name","size","color","map","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["export type QueryableHost = {\n shadowRoot?: ShadowRoot | null;\n querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n host: QueryableHost | null | undefined,\n selector: string,\n): HTMLElement | null {\n if (!host) return null;\n const root = host.shadowRoot ?? host;\n return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuSection['items'] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n isSelected: item.id === selectedId,\n isInactive: item.disabled,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n",":host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash + grid) — bar is a transparent frame. */\n:host-context(ds-app-shell[gradient]) .bar-nav {\n background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n position: relative;\n z-index: 3;\n}\n\n/* Collapsed — explicit spacer keeps the 8px minimum while the trigger can shrink. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: 0;\n align-items: center;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger {\n flex: 0 1 auto;\n min-width: 0;\n max-width: 100%;\n width: auto;\n overflow: hidden;\n}\n\n.bar-nav__between {\n flex: 1 1 0%;\n min-width: var(--dimension-space-100);\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label {\n flex: 1 1 0%;\n min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label-text {\n display: block;\n flex: 1 1 0%;\n min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__actions {\n flex: 0 0 auto;\n margin-left: 0;\n}\n\n/* Expanded tabs — consume space between start and actions */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__left ds-tab-group-nav {\n flex: 1;\n min-width: 0;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe ds-tab-group-nav {\n width: max-content;\n}\n\n.bar-nav__tabs-visible {\n width: 100%;\n min-width: 0;\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--dimension-size-400);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Collapsed tab trigger — mirrors TabGroup .tab (+ chevron when collapsed) */\n.bar-nav__tab-trigger {\n all: unset;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex: 0 1 auto;\n min-width: 0;\n width: max-content;\n max-width: 100%;\n padding: var(--dimension-space-075);\n background-color: transparent;\n border-radius: var(--dimension-radius-025);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--_bar-nav-fg-primary);\n position: relative;\n transition: color var(--effect-motion-short-2);\n height: var(--dimension-size-400);\n --_hover-bg: var(--_bar-nav-hover);\n --_pressed-bg: var(--_bar-nav-pressed);\n --_dot: var(--_bar-nav-dot);\n --_dot-ring: var(--_bar-nav-bg);\n}\n\n.bar-nav__tab-trigger::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025);\n background: transparent;\n pointer-events: none;\n transition: none;\n z-index: 2;\n}\n\n.bar-nav__tab-trigger:hover::after {\n background: var(--_hover-bg);\n transition: none;\n}\n\n.bar-nav__tab-trigger:active::after {\n background: var(--_pressed-bg);\n transition: none;\n}\n\n.bar-nav__tab-trigger:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n.bar-nav__tab-trigger--open::after {\n background: var(--_hover-bg);\n}\n\n.bar-nav__tab-trigger-label {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-width: 0;\n max-width: 100%;\n padding: 0 var(--dimension-space-025);\n overflow: hidden;\n --_fade-right: var(--dimension-space-025);\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-label--truncated::after {\n content: '';\n position: absolute;\n top: 0;\n right: var(--_fade-right);\n bottom: 0;\n width: var(--dimension-size-400);\n background: linear-gradient(to right, transparent, var(--_bar-nav-bg));\n pointer-events: none;\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-label-text {\n display: inline-block;\n max-width: 100%;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n vertical-align: bottom;\n}\n\n.bar-nav__tab-trigger-label-text--truncated {\n -webkit-mask-image: linear-gradient(\n to right,\n #000 0,\n #000 calc(100% - var(--dimension-size-400)),\n transparent 100%\n );\n mask-image: linear-gradient(\n to right,\n #000 0,\n #000 calc(100% - var(--dimension-size-400)),\n transparent 100%\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.bar-nav__tab-trigger-label--dot {\n padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n --_fade-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.bar-nav__tab-trigger-dot {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-chevron {\n position: relative;\n flex-shrink: 0;\n z-index: 1;\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px). */\n.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n color: var(--_bar-nav-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-user-select: none;\n user-select: none;\n}\n\n/* Right zone — pinned to the end; header gap is the min space from tabs/trigger */\n.bar-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex: 0 0 auto;\n margin-left: auto;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\nimport {\n deriveBarNavValueFromUrl,\n parseJsonArrayProp,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n getTabListFromTabGroup,\n queryWithinComponentHost,\n type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n getActiveTab,\n getActiveTabLabel,\n tabsOverflowContainer,\n tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /** Style slot: `dashboard` or `settings`. Colors match for now. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n @Element() el!: HTMLElement;\n\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Action items rendered in the right section.\n * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n */\n @Prop() actions: BarNavActionItem[] = [];\n\n /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n /** Emitted when an action button is toggled. Detail = { id, selected }. */\n @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private resolvedActions: BarNavActionItem[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private triggerLabelTruncated = false;\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: HTMLButtonElement | null = null;\n private triggerLabelTextEl: HTMLElement | null = null;\n private triggerLabelObserver: ResizeObserver | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabGroupEl: QueryableHost | null = null;\n private probeTabGroupEl: QueryableHost | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private overflowCheckScheduled = false;\n private intrinsicWidthRetryCount = 0;\n /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n @State() private committedSection = '';\n /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n @State() private pendingSection = '';\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get activeTabLabel(): string {\n return getActiveTabLabel(this.resolvedTabs, this.effectiveValue);\n }\n\n private get activeTabHasDot(): boolean {\n return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;\n }\n\n @Watch('tabs')\n @Watch('tabsJson')\n @Watch('actions')\n @Watch('actionsJson')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuEl = null;\n this.triggerLabelTruncated = false;\n this.syncTriggerLabelObserver();\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n this.syncTriggerLabelObserver();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n if (this.tabsCollapsed) {\n this.updateTriggerLabelTruncation();\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.syncTriggerLabelObserver(true);\n }\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (\n shouldResyncBarNavProps(\n this.resolvedTabs,\n this.tabs,\n this.tabsJson,\n this.resolvedActions,\n this.actions,\n this.actionsJson,\n )\n ) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowCheck());\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.overflowCheckScheduled) return;\n this.overflowCheckScheduled = true;\n requestAnimationFrame(() => {\n this.overflowCheckScheduled = false;\n this.updateTabsCollapsed();\n this.updateTriggerLabelTruncation();\n });\n }\n\n private syncTriggerLabelObserver(disconnectOnly = false) {\n this.triggerLabelObserver?.disconnect();\n this.triggerLabelObserver = null;\n\n if (disconnectOnly || !this.tabsCollapsed || !this.triggerLabelTextEl) {\n return;\n }\n\n this.updateTriggerLabelTruncation();\n\n if (typeof ResizeObserver === 'undefined') return;\n\n this.triggerLabelObserver = new ResizeObserver(() => this.updateTriggerLabelTruncation());\n this.triggerLabelObserver.observe(this.triggerLabelTextEl);\n if (this.triggerEl) {\n this.triggerLabelObserver.observe(this.triggerEl);\n }\n }\n\n private updateTriggerLabelTruncation() {\n const el = this.triggerLabelTextEl;\n if (!el || !this.tabsCollapsed) {\n if (this.triggerLabelTruncated) {\n this.triggerLabelTruncated = false;\n }\n return;\n }\n\n const truncated = el.scrollWidth > el.clientWidth + 1;\n if (truncated !== this.triggerLabelTruncated) {\n this.triggerLabelTruncated = truncated;\n }\n }\n\n /** Width left for tabs after actions. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;\n const actionsEl = this.headerEl.querySelector('.bar-nav__actions') as HTMLElement | null;\n const actionsWidth = actionsEl?.offsetWidth ?? 0;\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n const spacing = this.tabsCollapsed\n ? parseFloat(\n getComputedStyle(this.headerEl).getPropertyValue('--dimension-space-100').trim(),\n ) || 8\n : actionsEl\n ? gap\n : 0;\n const available =\n this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;\n\n return Math.max(0, available);\n }\n\n private getTabsIntrinsicWidth(): number {\n const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n return tabList?.scrollWidth ?? 0;\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.tabsCollapsed = false;\n this.menuOpen = false;\n }\n this.intrinsicWidthRetryCount = 0;\n return;\n }\n\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (intrinsicWidth === 0) {\n this.scheduleIntrinsicWidthRetry();\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n );\n\n if (shouldCollapse !== this.tabsCollapsed) {\n this.tabsCollapsed = shouldCollapse;\n if (!shouldCollapse) {\n this.menuOpen = false;\n }\n }\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.tabsCollapsed) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n }\n\n /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n private incomingTabs(): BarNavTab[] {\n return this.tabsJson\n ? parseJsonArrayProp(this.tabsJson, [])\n : (this.tabs ?? []);\n }\n\n private incomingActions(): BarNavActionItem[] {\n return this.actionsJson\n ? parseJsonArrayProp(this.actionsJson, [])\n : (this.actions ?? []);\n }\n\n private applyHostProps() {\n const nextBasePath = this.basePath;\n const sectionChanged =\n nextBasePath !== '' &&\n this.committedSection !== '' &&\n nextBasePath !== this.committedSection;\n\n if (sectionChanged) {\n this.urlDerivedValue = '';\n this.committedSection = '';\n this.pendingSection = nextBasePath;\n this.resolvedTabs = [];\n this.resolvedActions = this.incomingActions();\n return;\n }\n\n if (this.pendingSection) {\n if (!nextBasePath || nextBasePath !== this.pendingSection) {\n return;\n }\n if (!this.currentUrl.startsWith(this.pendingSection)) {\n return;\n }\n const tabs = this.incomingTabs();\n if (tabs.length === 0) {\n return;\n }\n this.pendingSection = '';\n }\n\n this.resolvedTabs = this.incomingTabs();\n this.resolvedActions = this.incomingActions();\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n this.intrinsicWidthRetryCount = 0;\n this.scheduleOverflowCheck();\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n const tabs = this.incomingTabs();\n\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n if (!this.currentUrl.startsWith(this.basePath)) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(\n this.currentUrl,\n this.basePath,\n tabs,\n );\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = queryWithinComponentHost(\n this.visibleTabGroupEl,\n `[data-tab-id=\"${this.effectiveValue}\"]`,\n );\n tab?.focus({ preventScroll: true });\n }\n\n private handleTabChange(e: Event) {\n this.selectTab((e as CustomEvent<string>).detail);\n }\n\n private handleActionChange(actionId: string, e: Event) {\n const selected = (e as CustomEvent<boolean>).detail;\n this.dsActionChange.emit({ id: actionId, selected });\n }\n\n private toggleTabMenu() {\n if (this.menuOpen) {\n this.menuOpen = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = `${this.triggerEl.offsetWidth}px`;\n this.syncMenuSections();\n }\n\n this.menuOpen = true;\n }\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.tabsCollapsed) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu();\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.triggerEl?.focus();\n }\n }\n\n render() {\n const sectionReady =\n this.basePath !== '' && this.committedSection === this.basePath;\n const hasTabs =\n sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n const tabGroupKey = this.basePath || 'no-section';\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n 'bar-nav--dashboard': this.navStyle === 'dashboard',\n 'bar-nav--settings': this.navStyle === 'settings',\n 'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,\n }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <ds-tab-group-nav\n key={`probe-${tabGroupKey}`}\n ref={el => {\n this.probeTabGroupEl = el ?? null;\n if (el) {\n this.intrinsicWidthRetryCount = 0;\n this.scheduleOverflowCheck();\n }\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n />\n </div>\n )}\n\n {hasTabs && !this.tabsCollapsed && (\n <div class=\"bar-nav__left\">\n <ds-tab-group-nav\n key={`visible-${tabGroupKey}`}\n class=\"bar-nav__tabs-visible\"\n ref={el => {\n this.visibleTabGroupEl = el ?? null;\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n onDsChange={(e: Event) => this.handleTabChange(e)}\n />\n </div>\n )}\n\n {!hasTabs && this.heading && (\n <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n )}\n\n {hasTabs && this.tabsCollapsed && (\n <button\n type=\"button\"\n class={{\n 'bar-nav__tab-trigger': true,\n 'bar-nav__tab-trigger--open': this.menuOpen,\n }}\n ref={el => {\n this.triggerEl = el as HTMLButtonElement;\n }}\n aria-haspopup=\"menu\"\n aria-expanded={this.menuOpen}\n aria-label={`${this.activeTabLabel} tabs`}\n onClick={() => this.toggleTabMenu()}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n >\n <span\n class={{\n 'bar-nav__tab-trigger-label': true,\n 'bar-nav__tab-trigger-label--dot': this.activeTabHasDot,\n 'bar-nav__tab-trigger-label--truncated': this.triggerLabelTruncated,\n }}\n >\n <span\n class={{\n 'bar-nav__tab-trigger-label-text': true,\n 'bar-nav__tab-trigger-label-text--truncated': this.triggerLabelTruncated,\n 'text-body-medium-emphasis': true,\n }}\n ref={el => {\n const next = el ?? null;\n if (next === this.triggerLabelTextEl) return;\n this.triggerLabelTextEl = next;\n if (this.tabsCollapsed) {\n this.syncTriggerLabelObserver();\n }\n }}\n >\n {this.activeTabLabel}\n </span>\n {this.activeTabHasDot && (\n <ds-badge\n class=\"bar-nav__tab-trigger-dot\"\n variant=\"dot\"\n background=\"var(--_bar-nav-bg)\"\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n <ds-icon\n name=\"ChevronDown\"\n size=\"md\"\n color=\"inherit\"\n class=\"bar-nav__tab-trigger-chevron\"\n />\n </button>\n )}\n\n {hasTabs && this.tabsCollapsed && this.resolvedActions.length > 0 && (\n <div class=\"bar-nav__between\" aria-hidden=\"true\" />\n )}\n\n {this.resolvedActions.length > 0 && (\n <div class=\"bar-nav__actions\">\n {this.resolvedActions.map(action => (\n <ds-bar-nav-action\n key={action.id}\n icon={action.icon}\n selected={action.selected ?? false}\n dot={action.dot ?? false}\n inactive={action.inactive}\n aria-label={action.ariaLabel ?? action.id}\n onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n />\n ))}\n </div>\n )}\n\n </header>\n\n {hasTabs && this.tabsCollapsed && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToMenuSections(this.resolvedTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"start\"\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"mVASM,SAAUA,EACdC,EACAC,GAEA,IAAKD,EAAM,OAAO,KAClB,MAAME,EAAOF,EAAKG,YAAcH,EAChC,OAAOE,EAAKE,cAAcH,EAC5B,CAEM,SAAUI,EACdC,GAEA,OAAOP,EAAyBO,EAAY,mBAC9C,CCbM,SAAUC,EAAmBC,EAAiBC,GAClD,MAAMC,EAA0B,GAChC,IAAIC,EAA8B,GAElC,IAAK,MAAMC,KAAQJ,EAAM,CACvB,GAAIK,EAAaD,GAAO,CACtB,GAAID,EAAMG,OAAS,EAAG,CACpBJ,EAASK,KAAK,CAAEC,MAAOL,IACvBA,EAAQ,E,CAEV,Q,CAGFA,EAAMI,KAAK,CACTE,MAAOL,EAAKK,MACZC,MAAON,EAAKO,GACZC,WAAYR,EAAKO,KAAOV,EACxBY,WAAYT,EAAKU,U,CAIrB,GAAIX,EAAMG,OAAS,EAAG,CACpBJ,EAASK,KAAK,CAAEC,MAAOL,G,CAGzB,OAAOD,CACT,CAEM,SAAUa,EAAaf,EAAiBC,GAC5C,MAAMe,EAAaC,EAAkBjB,GACrC,OAAOgB,EAAWE,MAAKC,GAAOA,EAAIR,KAAOV,KAAee,EAAW,EACrE,CAEM,SAAUI,EAAkBpB,EAAiBC,GACjD,OAAOc,EAAaf,EAAMC,IAAaQ,OAAS,MAClD,CAGM,SAAUY,EACdC,EACAC,EACAC,EACAC,EAAa,GAEb,MAAMC,EAAOJ,EAAqBC,EAClC,GAAIC,EAAW,CACb,OAAOE,GAAQD,C,CAEjB,OAAOC,EAAOD,CAChB,CC1DA,MAAME,EAAY,IAAM,47L,MCoCXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,gIAOmDC,KAAAC,SAA2B,YAQpED,KAAAjC,KAAoB,GAGMiC,KAAAE,SAAmB,GAG5BF,KAAAvB,MAAgB,GAMjCuB,KAAAG,QAA8B,GAGDH,KAAAI,YAAsB,GASnDJ,KAAAK,SAAmB,GAGnBL,KAAAM,WAAqB,GAQZN,KAAAO,aAA4B,GAC5BP,KAAAQ,gBAAsC,GACtCR,KAAAS,gBAA0B,GAC1BT,KAAAU,uBAAyB,MACzBV,KAAAW,cAAgB,MAChBX,KAAAY,SAAW,MAEXZ,KAAAa,mBAAqB,MACrBb,KAAAc,sBAAwB,MAKjCd,KAAAe,SAA+B,KAC/Bf,KAAAgB,UAAsC,KACtChB,KAAAiB,mBAAyC,KACzCjB,KAAAkB,qBAA8C,KAC9ClB,KAAAmB,OAAmC,KACnCnB,KAAAoB,kBAA0C,KAC1CpB,KAAAqB,gBAAwC,KACxCrB,KAAAsB,eAAwC,KACxCtB,KAAAuB,uBAAyB,MACzBvB,KAAAwB,yBAA2B,EAElBxB,KAAAyB,iBAAmB,GAEnBzB,KAAA0B,eAAiB,EA8hBnC,CA5hBC,kBAAYC,GACV,GAAI3B,KAAKM,YAAcN,KAAKK,SAAU,CACpC,OAAOL,KAAKS,e,CAEd,OAAOT,KAAKvB,K,CAGd,kBAAYmD,GACV,OAAOzC,EAAkBa,KAAKO,aAAcP,KAAK2B,e,CAGnD,mBAAYE,GACV,QAAS/C,EAAakB,KAAKO,aAAcP,KAAK2B,iBAAiBG,G,CASjE,iBAAAC,GACE/B,KAAKgC,gB,CAKP,iBAAAC,GACEjC,KAAKkC,mBACLlC,KAAKmC,uB,CAIP,gBAAAC,CAAiBC,GACf,GAAIrC,KAAKmB,OAAQ,CACfnB,KAAKmB,OAAOkB,KAAOA,C,EAKvB,qBAAAC,CAAsB/C,EAAoBgD,GACxC,IAAKhD,EAAW,CACdS,KAAKY,SAAW,MAChBZ,KAAKmB,OAAS,KACdnB,KAAKc,sBAAwB,MAC7Bd,KAAKwC,0B,CAEPxC,KAAKmC,wBACL,GAAI5C,EAAW,CACbkD,uBAAsB,KACpBzC,KAAKmC,wBACLnC,KAAKwC,0BAA0B,G,CAGnC,GAAIjD,GAAagD,IAAkBG,WAAaH,IAAkBhD,EAAW,OAC7EkD,uBAAsB,IAAMzC,KAAKmC,0BACjCQ,gBAAe,IAAM3C,KAAK4C,2B,CAG5B,iBAAAC,GACE7C,KAAKgC,gB,CAGP,gBAAAc,GACE9C,KAAK+C,wBACL/C,KAAKgD,+BACLhD,KAAKiD,wBACLjD,KAAKmC,uB,CAGP,kBAAAe,GACElD,KAAKmC,wBACLnC,KAAKmD,iBACL,GAAInD,KAAKW,cAAe,CACtBX,KAAKoD,8B,EAIT,oBAAAC,GACErD,KAAKsB,gBAAgBgC,aACrBtD,KAAKsB,eAAiB,KACtBtB,KAAKwC,yBAAyB,K,CAIxB,qBAAAO,GACN,GACEQ,EACEvD,KAAKO,aACLP,KAAKjC,KACLiC,KAAKE,SACLF,KAAKQ,gBACLR,KAAKG,QACLH,KAAKI,aAEP,CACAJ,KAAKgC,gB,MACA,GAAIhC,KAAKM,YAAcN,KAAKK,SAAU,CAC3CL,KAAKwD,kB,EAKD,4BAAAR,GACN,IAAIS,EAAY9D,EAAO+D,sBACvB,MAAMC,EAAO,KACX3D,KAAK+C,wBACL,KAAMU,EAAY,EAAG,CACnBhB,sBAAsBkB,E,GAG1BhB,eAAegB,E,CAGT,qBAAAV,GACN,UAAWW,iBAAmB,cAAgB5D,KAAKe,SAAU,OAC7Df,KAAKsB,gBAAgBgC,aACrBtD,KAAKsB,eAAiB,IAAIsC,gBAAe,IAAM5D,KAAKmC,0BACpDnC,KAAKsB,eAAeuC,QAAQ7D,KAAKe,S,CAG3B,qBAAAoB,GACN,GAAInC,KAAKuB,uBAAwB,OACjCvB,KAAKuB,uBAAyB,KAC9BkB,uBAAsB,KACpBzC,KAAKuB,uBAAyB,MAC9BvB,KAAK8D,sBACL9D,KAAKoD,8BAA8B,G,CAI/B,wBAAAZ,CAAyBuB,EAAiB,OAChD/D,KAAKkB,sBAAsBoC,aAC3BtD,KAAKkB,qBAAuB,KAE5B,GAAI6C,IAAmB/D,KAAKW,gBAAkBX,KAAKiB,mBAAoB,CACrE,M,CAGFjB,KAAKoD,+BAEL,UAAWQ,iBAAmB,YAAa,OAE3C5D,KAAKkB,qBAAuB,IAAI0C,gBAAe,IAAM5D,KAAKoD,iCAC1DpD,KAAKkB,qBAAqB2C,QAAQ7D,KAAKiB,oBACvC,GAAIjB,KAAKgB,UAAW,CAClBhB,KAAKkB,qBAAqB2C,QAAQ7D,KAAKgB,U,EAInC,4BAAAoC,GACN,MAAMY,EAAKhE,KAAKiB,mBAChB,IAAK+C,IAAOhE,KAAKW,cAAe,CAC9B,GAAIX,KAAKc,sBAAuB,CAC9Bd,KAAKc,sBAAwB,K,CAE/B,M,CAGF,MAAMmD,EAAYD,EAAGE,YAAcF,EAAGG,YAAc,EACpD,GAAIF,IAAcjE,KAAKc,sBAAuB,CAC5Cd,KAAKc,sBAAwBmD,C,EAKzB,yBAAAG,GACN,IAAKpE,KAAKe,SAAU,OAAO,EAE3B,MAAMsD,EAAcC,iBAAiBtE,KAAKe,UAC1C,MAAMwD,EAAMC,WAAWH,EAAYI,WAAaJ,EAAYE,KAAO,MAAQ,EAC3E,MAAMG,EAAY1E,KAAKe,SAASpD,cAAc,qBAC9C,MAAMgH,EAAeD,GAAWE,aAAe,EAC/C,MAAMC,GACHL,WAAWH,EAAYS,cAAgB,IAAMN,WAAWH,EAAYU,eAAiB,GACxF,MAAMC,EAAUhF,KAAKW,cACjB6D,WACEF,iBAAiBtE,KAAKe,UAAUkE,iBAAiB,yBAAyBC,SACvE,EACLR,EACEH,EACA,EACN,MAAMY,EACJnF,KAAKe,SAASoD,YAAcU,EAAoBF,EAAeK,EAEjE,OAAOI,KAAKC,IAAI,EAAGF,E,CAGb,qBAAAG,GACN,MAAMC,EAAU3H,EAAuBoC,KAAKqB,iBAC5C,OAAOkE,GAASrB,aAAe,C,CAGzB,2BAAAsB,GACN,GAAIxF,KAAKwB,0BAA4B7B,EAAO8F,0BAA2B,OACvEzF,KAAKwB,2BACLiB,uBAAsB,IAAMzC,KAAKmC,yB,CAG3B,mBAAA2B,GACN,IAAK9D,KAAKe,UAAYf,KAAKO,aAAalC,SAAW,GAAK2B,KAAKU,uBAAwB,CACnF,GAAIV,KAAKW,cAAe,CACtBX,KAAKW,cAAgB,MACrBX,KAAKY,SAAW,K,CAElBZ,KAAKwB,yBAA2B,EAChC,M,CAGF,MAAMkE,EAAiB1F,KAAKsF,wBAC5B,GAAII,IAAmB,EAAG,CACxB1F,KAAKwF,8BACL,M,CAEFxF,KAAKwB,yBAA2B,EAEhC,MAAMmE,EAAiBvG,EACrBsG,EACA1F,KAAKoE,4BACLpE,KAAKW,eAGP,GAAIgF,IAAmB3F,KAAKW,cAAe,CACzCX,KAAKW,cAAgBgF,EACrB,IAAKA,EAAgB,CACnB3F,KAAKY,SAAW,K,GAKd,cAAAuC,GACN,IAAKnD,KAAKmB,SAAWnB,KAAKgB,YAAchB,KAAKW,cAAe,OAC5DX,KAAKmB,OAAOyE,OAAS5F,KAAKgB,UAC1BhB,KAAKkC,kB,CAGC,gBAAA2D,CAAiBC,GACvB,MAAMC,EAAUD,EAAgCC,OAChD,GAAIA,GAAQtH,QAAUiE,UAAW,CAC/B1C,KAAKgG,UAAUC,OAAOF,EAAOtH,O,CAE/BuB,KAAKY,SAAW,K,CAGV,eAAAsF,GACNlG,KAAKY,SAAW,K,CAIV,YAAAuF,GACN,OAAOnG,KAAKE,SACRkG,EAAmBpG,KAAKE,SAAU,IACjCF,KAAKjC,MAAQ,E,CAGZ,eAAAsI,GACN,OAAOrG,KAAKI,YACRgG,EAAmBpG,KAAKI,YAAa,IACpCJ,KAAKG,SAAW,E,CAGf,cAAA6B,GACN,MAAMsE,EAAetG,KAAKK,SAC1B,MAAMkG,EACJD,IAAiB,IACjBtG,KAAKyB,mBAAqB,IAC1B6E,IAAiBtG,KAAKyB,iBAExB,GAAI8E,EAAgB,CAClBvG,KAAKS,gBAAkB,GACvBT,KAAKyB,iBAAmB,GACxBzB,KAAK0B,eAAiB4E,EACtBtG,KAAKO,aAAe,GACpBP,KAAKQ,gBAAkBR,KAAKqG,kBAC5B,M,CAGF,GAAIrG,KAAK0B,eAAgB,CACvB,IAAK4E,GAAgBA,IAAiBtG,KAAK0B,eAAgB,CACzD,M,CAEF,IAAK1B,KAAKM,WAAWkG,WAAWxG,KAAK0B,gBAAiB,CACpD,M,CAEF,MAAM3D,EAAOiC,KAAKmG,eAClB,GAAIpI,EAAKM,SAAW,EAAG,CACrB,M,CAEF2B,KAAK0B,eAAiB,E,CAGxB1B,KAAKO,aAAeP,KAAKmG,eACzBnG,KAAKQ,gBAAkBR,KAAKqG,kBAC5BrG,KAAKwD,mBACLxD,KAAKyB,iBAAmB6E,EACxBtG,KAAKwB,yBAA2B,EAChCxB,KAAKmC,uB,CAGC,gBAAAD,GACN,IAAKlC,KAAKmB,OAAQ,OAClBnB,KAAKmB,OAAOlD,SAAWH,EAAmBkC,KAAKO,aAAcP,KAAK2B,e,CAG5D,gBAAA6B,GACN,MAAMzF,EAAOiC,KAAKmG,eAElB,IAAKnG,KAAKM,aAAeN,KAAKK,SAAU,CACtCL,KAAKS,gBAAkB,GACvBT,KAAKU,uBAAyB,MAC9B,M,CAGF,IAAKV,KAAKM,WAAWkG,WAAWxG,KAAKK,UAAW,CAC9CL,KAAKS,gBAAkB,GACvBT,KAAKU,uBAAyB,MAC9B,M,CAGF,MAAMjC,MAAEA,EAAKgI,SAAEA,GAAaC,EAC1B1G,KAAKM,WACLN,KAAKK,SACLtC,GAEFiC,KAAKS,gBAAkBhC,EACvBuB,KAAKU,uBAAyB+F,C,CAGxB,SAAAT,CAAUtH,GAChBsB,KAAKvB,MAAQC,EACbsB,KAAK2G,YAAYC,KAAKlI,E,CAIhB,uBAAAkE,GACN,MAAM1D,EAAM5B,EACV0C,KAAKoB,kBACL,iBAAiBpB,KAAK2B,oBAExBzC,GAAK2H,MAAM,CAAEC,cAAe,M,CAGtB,eAAAC,CAAgBjB,GACtB9F,KAAKgG,UAAWF,EAA0BC,O,CAGpC,kBAAAiB,CAAmBC,EAAkBnB,GAC3C,MAAMoB,EAAYpB,EAA2BC,OAC7C/F,KAAKmH,eAAeP,KAAK,CAAElI,GAAIuI,EAAUC,Y,CAGnC,aAAAE,GACN,GAAIpH,KAAKY,SAAU,CACjBZ,KAAKY,SAAW,MAChB,M,CAGF,GAAIZ,KAAKmB,QAAUnB,KAAKgB,UAAW,CACjChB,KAAKmB,OAAOyE,OAAS5F,KAAKgB,UAC1BhB,KAAKmB,OAAOkG,SAAW,GAAGrH,KAAKgB,UAAU4D,gBACzC5E,KAAKkC,kB,CAGPlC,KAAKY,SAAW,I,CAGV,oBAAA0G,CAAqBxB,GAC3B,IAAK9F,KAAKW,cAAe,OAEzB,IAAKX,KAAKY,SAAU,CAClB,GAAIkF,EAAEyB,MAAQ,aAAezB,EAAEyB,MAAQ,WAAazB,EAAEyB,MAAQ,SAAWzB,EAAEyB,MAAQ,IAAK,CACtFzB,EAAE0B,iBACFxH,KAAKoH,e,CAEP,M,CAGF,GAAItB,EAAEyB,MAAQ,SAAU,CACtBzB,EAAE0B,iBACFxH,KAAKY,SAAW,MAChBZ,KAAKgB,WAAW6F,O,EAIpB,MAAAY,GACE,MAAMC,EACJ1H,KAAKK,WAAa,IAAML,KAAKyB,mBAAqBzB,KAAKK,SACzD,MAAMsH,EACJD,GAAgB1H,KAAKO,aAAalC,OAAS,IAAM2B,KAAKU,uBACxD,MAAMkH,EAAc5H,KAAKK,UAAY,aAErC,OACEwH,EAACC,EAAI,CAAAP,IAAA,4CACHM,EAAA,UAAAN,IAAA,2CACEQ,MAAO,CACL,UAAW,KACX,qBAAsB/H,KAAKC,WAAa,YACxC,oBAAqBD,KAAKC,WAAa,WACvC,0BAA2B0H,GAAW3H,KAAKW,eAE7CqH,IAAKhE,IACHhE,KAAKe,SAAWiD,EAChB,GAAIA,IAAOhE,KAAKsB,eAAgB,CAC9BtB,KAAKiD,uB,IAIN0E,GACCE,EAAA,OAAAN,IAAA,2CAAKQ,MAAM,sBAAqB,cAAa,OAAOE,MAAK,MACvDJ,EAAA,oBACEN,IAAK,SAASK,IACdI,IAAKhE,IACHhE,KAAKqB,gBAAkB2C,GAAM,KAC7B,GAAIA,EAAI,CACNhE,KAAKwB,yBAA2B,EAChCxB,KAAKmC,uB,GAGTpE,KAAMiC,KAAKO,aACX9B,MAAOuB,KAAK2B,kBAKjBgG,IAAY3H,KAAKW,eAChBkH,EAAA,OAAAN,IAAA,2CAAKQ,MAAM,iBACTF,EAAA,oBACEN,IAAK,WAAWK,IAChBG,MAAM,wBACNC,IAAKhE,IACHhE,KAAKoB,kBAAoB4C,GAAM,IAAI,EAErCjG,KAAMiC,KAAKO,aACX9B,MAAOuB,KAAK2B,eACZuG,WAAapC,GAAa9F,KAAK+G,gBAAgBjB,OAKnD6B,GAAW3H,KAAKmI,SAChBN,EAAA,QAAAN,IAAA,2CAAMQ,MAAM,8CAA8C/H,KAAKmI,SAGhER,GAAW3H,KAAKW,eACfkH,EAAA,UAAAN,IAAA,2CACEa,KAAK,SACLL,MAAO,CACL,uBAAwB,KACxB,6BAA8B/H,KAAKY,UAErCoH,IAAKhE,IACHhE,KAAKgB,UAAYgD,CAAuB,EACzC,gBACa,OAAM,gBACLhE,KAAKY,SAAQ,aAChB,GAAGZ,KAAK4B,sBACpByG,QAAS,IAAMrI,KAAKoH,gBACpBkB,UAAYxC,GAAqB9F,KAAKsH,qBAAqBxB,IAE3D+B,EAAA,QAAAN,IAAA,2CACEQ,MAAO,CACL,6BAA8B,KAC9B,kCAAmC/H,KAAK6B,gBACxC,wCAAyC7B,KAAKc,wBAGhD+G,EAAA,QAAAN,IAAA,2CACEQ,MAAO,CACL,kCAAmC,KACnC,6CAA8C/H,KAAKc,sBACnD,4BAA6B,MAE/BkH,IAAKhE,IACH,MAAMuE,EAAOvE,GAAM,KACnB,GAAIuE,IAASvI,KAAKiB,mBAAoB,OACtCjB,KAAKiB,mBAAqBsH,EAC1B,GAAIvI,KAAKW,cAAe,CACtBX,KAAKwC,0B,IAIRxC,KAAK4B,gBAEP5B,KAAK6B,iBACJgG,EAAA,YAAAN,IAAA,2CACEQ,MAAM,2BACNS,QAAQ,MACRC,WAAW,qBACXjK,MAAM,GAAE,cACI,UAIlBqJ,EAAA,WAAAN,IAAA,2CACEmB,KAAK,cACLC,KAAK,KACLC,MAAM,UACNb,MAAM,kCAKXJ,GAAW3H,KAAKW,eAAiBX,KAAKQ,gBAAgBnC,OAAS,GAC9DwJ,EAAA,OAAAN,IAAA,2CAAKQ,MAAM,mBAAkB,cAAa,SAG7C/H,KAAKQ,gBAAgBnC,OAAS,GAC7BwJ,EAAA,OAAAN,IAAA,2CAAKQ,MAAM,oBACR/H,KAAKQ,gBAAgBqI,KAAIC,GACxBjB,EAAA,qBACEN,IAAKuB,EAAOpK,GACZqK,KAAMD,EAAOC,KACb7B,SAAU4B,EAAO5B,UAAY,MAC7BpF,IAAKgH,EAAOhH,KAAO,MACnBkH,SAAUF,EAAOE,SAAQ,aACbF,EAAOG,WAAaH,EAAOpK,GACvCwJ,WAAapC,GAAa9F,KAAKgH,mBAAmB8B,EAAOpK,GAAIoH,SAQtE6B,GAAW3H,KAAKW,eACfkH,EAAA,WAAAN,IAAA,2CACES,IAAKhE,IACHhE,KAAKmB,OAAU6C,GAA4B,IAAI,EAEjD3B,KAAMrC,KAAKY,SACX3C,SAAUH,EAAmBkC,KAAKO,aAAcP,KAAK2B,gBACrDuH,KAAK,SACLC,MAAM,QACNC,WAAatD,GAAa9F,KAAK6F,iBAAiBC,GAChDuD,UAAW,IAAMrJ,KAAKkG,oB,+qCAxiBRvG,EAAA+D,sBAAwB,EACxB/D,EAAA8F,0BAA4B,E","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","tabs","selectedId","sections","batch","item","isTabDivider","length","push","items","label","value","id","isSelected","isInactive","disabled","getActiveTab","selectable","getSelectableTabs","find","tab","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","tabsJson","actions","actionsJson","basePath","currentUrl","resolvedTabs","resolvedActions","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","chromeTransitionDepth","chromeTransitionShell","toolsDrawerOpening","committedSection","pendingSection","onChromeTransitionStart","event","source","detail","el","classList","add","scheduleOverflowCheck","onChromeTransitionEnd","Math","max","remove","effectiveValue","activeTabLabel","activeTabHasDot","dot","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","bindChromeTransitionListeners","componentDidRender","syncMenuAnchor","updateTriggerLabelTruncation","disconnectedCallback","disconnect","unbindChromeTransitionListeners","shell","closest","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","removeEventListener","shouldResyncBarNavProps","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","updateTabsCollapsed","disconnectOnly","truncated","scrollWidth","clientWidth","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","gap","parseFloat","columnGap","actionsEl","actionsWidth","offsetWidth","horizontalPadding","paddingLeft","paddingRight","spacing","getPropertyValue","trim","available","toolsDrawerOpeningReservePx","tools","drawerTarget","readCssVarWidthPx","drawerNow","getBoundingClientRect","width","getTabsIntrinsicWidth","tabList","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","intrinsicWidth","shouldCollapse","OVERFLOW_HYSTERESIS_PX","anchor","handleMenuSelect","e","selectTab","String","handleMenuClose","incomingTabs","parseJsonArrayProp","incomingActions","nextBasePath","sectionChanged","startsWith","hideTabs","deriveBarNavValueFromUrl","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","render","sectionReady","hasTabs","tabGroupKey","h","Host","class","ref","inert","onDsChange","heading","type","onClick","onKeyDown","next","variant","background","name","size","color","map","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["export type QueryableHost = {\n shadowRoot?: ShadowRoot | null;\n querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n host: QueryableHost | null | undefined,\n selector: string,\n): HTMLElement | null {\n if (!host) return null;\n const root = host.shadowRoot ?? host;\n return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuSection['items'] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n isSelected: item.id === selectedId,\n isInactive: item.disabled,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n",":host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash + grid) — bar is a transparent frame. */\n:host-context(ds-app-shell[gradient]) .bar-nav {\n background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n position: relative;\n z-index: 3;\n}\n\n/* Collapsed — explicit spacer keeps the 8px minimum while the trigger can shrink. */\n.bar-nav--tabs-collapsed {\n display: flex;\n gap: 0;\n align-items: center;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger {\n flex: 0 1 auto;\n min-width: 0;\n max-width: 100%;\n width: auto;\n overflow: hidden;\n}\n\n.bar-nav__between {\n flex: 1 1 0%;\n min-width: var(--dimension-space-100);\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label {\n flex: 1 1 0%;\n min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label-text {\n display: block;\n flex: 1 1 0%;\n min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__actions {\n flex: 0 0 auto;\n margin-left: 0;\n}\n\n/* Expanded tabs — consume space between start and actions */\n.bar-nav__left {\n position: relative;\n flex: 1 1 0%;\n min-width: 0;\n width: 0;\n display: flex;\n align-items: center;\n}\n\n.bar-nav__left ds-tab-group-nav {\n flex: 1;\n min-width: 0;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n position: absolute;\n left: 0;\n top: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: visible;\n width: max-content;\n max-width: none;\n z-index: -1;\n}\n\n.bar-nav__tabs-probe ds-tab-group-nav {\n width: max-content;\n}\n\n.bar-nav__tabs-visible {\n width: 100%;\n min-width: 0;\n}\n\n/* Synchronous hide while tools drawer opens — Stencil collapse state paints a frame later. */\n:host(.bar-nav--tools-drawer-opening) .bar-nav__left {\n display: none;\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n flex: 1;\n min-width: 0;\n height: var(--dimension-size-400);\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Collapsed tab trigger — mirrors TabGroup .tab (+ chevron when collapsed) */\n.bar-nav__tab-trigger {\n all: unset;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex: 0 1 auto;\n min-width: 0;\n width: max-content;\n max-width: 100%;\n padding: var(--dimension-space-075);\n background-color: transparent;\n border-radius: var(--dimension-radius-025);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n color: var(--_bar-nav-fg-primary);\n position: relative;\n transition: color var(--effect-motion-short-2);\n height: var(--dimension-size-400);\n --_hover-bg: var(--_bar-nav-hover);\n --_pressed-bg: var(--_bar-nav-pressed);\n --_dot: var(--_bar-nav-dot);\n --_dot-ring: var(--_bar-nav-bg);\n}\n\n.bar-nav__tab-trigger::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025);\n background: transparent;\n pointer-events: none;\n transition: none;\n z-index: 2;\n}\n\n.bar-nav__tab-trigger:hover::after {\n background: var(--_hover-bg);\n transition: none;\n}\n\n.bar-nav__tab-trigger:active::after {\n background: var(--_pressed-bg);\n transition: none;\n}\n\n.bar-nav__tab-trigger:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n.bar-nav__tab-trigger--open::after {\n background: var(--_hover-bg);\n}\n\n.bar-nav__tab-trigger-label {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-width: 0;\n max-width: 100%;\n padding: 0 var(--dimension-space-025);\n overflow: hidden;\n --_fade-right: var(--dimension-space-025);\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-label--truncated::after {\n content: '';\n position: absolute;\n top: 0;\n right: var(--_fade-right);\n bottom: 0;\n width: var(--dimension-size-400);\n background: linear-gradient(to right, transparent, var(--_bar-nav-bg));\n pointer-events: none;\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-label-text {\n display: inline-block;\n max-width: 100%;\n box-sizing: border-box;\n white-space: nowrap;\n overflow: hidden;\n vertical-align: bottom;\n}\n\n.bar-nav__tab-trigger-label-text--truncated {\n -webkit-mask-image: linear-gradient(\n to right,\n #000 0,\n #000 calc(100% - var(--dimension-size-400)),\n transparent 100%\n );\n mask-image: linear-gradient(\n to right,\n #000 0,\n #000 calc(100% - var(--dimension-size-400)),\n transparent 100%\n );\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: 100% 100%;\n mask-size: 100% 100%;\n}\n\n.bar-nav__tab-trigger-label--dot {\n padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n --_fade-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.bar-nav__tab-trigger-dot {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.bar-nav__tab-trigger-chevron {\n position: relative;\n flex-shrink: 0;\n z-index: 1;\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n name shares the tab label's type token, color, height and horizontal inset.\n Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px). */\n.bar-nav__heading {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n color: var(--_bar-nav-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-user-select: none;\n user-select: none;\n}\n\n/* Right zone — pinned to the end; header gap is the min space from tabs/trigger */\n.bar-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n flex: 0 0 auto;\n margin-left: auto;\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n State,\n h,\n Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\nimport {\n deriveBarNavValueFromUrl,\n parseJsonArrayProp,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n getTabListFromTabGroup,\n queryWithinComponentHost,\n type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n getActiveTab,\n getActiveTabLabel,\n tabsOverflowContainer,\n tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n type ChromeTransitionDetail,\n} from '../../nav/chrome-transition';\nimport { readCssVarWidthPx } from '../../nav/shell-chrome-metrics';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /** Style slot: `dashboard` or `settings`. Colors match for now. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n @Element() el!: HTMLElement;\n\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Action items rendered in the right section.\n * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n */\n @Prop() actions: BarNavActionItem[] = [];\n\n /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n /** Emitted when an action button is toggled. Detail = { id, selected }. */\n @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private resolvedActions: BarNavActionItem[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private triggerLabelTruncated = false;\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: HTMLButtonElement | null = null;\n private triggerLabelTextEl: HTMLElement | null = null;\n private triggerLabelObserver: ResizeObserver | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabGroupEl: QueryableHost | null = null;\n private probeTabGroupEl: QueryableHost | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private overflowCheckScheduled = false;\n private intrinsicWidthRetryCount = 0;\n private chromeTransitionDepth = 0;\n private chromeTransitionShell: HTMLElement | null = null;\n private toolsDrawerOpening = false;\n /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n @State() private committedSection = '';\n /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n @State() private pendingSection = '';\n\n private get effectiveValue(): string {\n if (this.currentUrl && this.basePath) {\n return this.urlDerivedValue;\n }\n return this.value;\n }\n\n private get activeTabLabel(): string {\n return getActiveTabLabel(this.resolvedTabs, this.effectiveValue);\n }\n\n private get activeTabHasDot(): boolean {\n return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;\n }\n\n @Watch('tabs')\n @Watch('tabsJson')\n @Watch('actions')\n @Watch('actionsJson')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuEl = null;\n this.triggerLabelTruncated = false;\n this.syncTriggerLabelObserver();\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n this.syncTriggerLabelObserver();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.bindChromeTransitionListeners();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n if (this.chromeTransitionDepth > 0) {\n this.syncMenuAnchor();\n return;\n }\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n if (this.tabsCollapsed) {\n this.updateTriggerLabelTruncation();\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.syncTriggerLabelObserver(true);\n this.unbindChromeTransitionListeners();\n }\n\n private bindChromeTransitionListeners() {\n const shell = this.el.closest('ds-app-shell');\n if (!shell) return;\n this.chromeTransitionShell = shell;\n shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n private unbindChromeTransitionListeners() {\n if (!this.chromeTransitionShell) return;\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_START,\n this.onChromeTransitionStart,\n );\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_END,\n this.onChromeTransitionEnd,\n );\n this.chromeTransitionShell = null;\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n if (source === 'panel-nav') {\n this.chromeTransitionDepth += 1;\n return;\n }\n if (source === 'panel-tools') {\n this.toolsDrawerOpening = true;\n this.el.classList.add('bar-nav--tools-drawer-opening');\n if (this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute) {\n this.tabsCollapsed = true;\n this.menuOpen = false;\n }\n this.scheduleOverflowCheck();\n }\n };\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n if (source === 'panel-nav') {\n this.chromeTransitionDepth = Math.max(0, this.chromeTransitionDepth - 1);\n if (this.chromeTransitionDepth === 0) {\n this.scheduleOverflowCheck();\n }\n return;\n }\n if (source === 'panel-tools') {\n this.toolsDrawerOpening = false;\n this.el.classList.remove('bar-nav--tools-drawer-opening');\n this.scheduleOverflowCheck();\n }\n };\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (\n shouldResyncBarNavProps(\n this.resolvedTabs,\n this.tabs,\n this.tabsJson,\n this.resolvedActions,\n this.actions,\n this.actionsJson,\n )\n ) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => {\n if (this.chromeTransitionDepth > 0) return;\n this.scheduleOverflowCheck();\n });\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.chromeTransitionDepth > 0) return;\n if (this.overflowCheckScheduled) return;\n this.overflowCheckScheduled = true;\n requestAnimationFrame(() => {\n this.overflowCheckScheduled = false;\n if (this.chromeTransitionDepth > 0) return;\n this.updateTabsCollapsed();\n this.updateTriggerLabelTruncation();\n });\n }\n\n private syncTriggerLabelObserver(disconnectOnly = false) {\n this.triggerLabelObserver?.disconnect();\n this.triggerLabelObserver = null;\n\n if (disconnectOnly || !this.tabsCollapsed || !this.triggerLabelTextEl) {\n return;\n }\n\n this.updateTriggerLabelTruncation();\n\n if (typeof ResizeObserver === 'undefined') return;\n\n this.triggerLabelObserver = new ResizeObserver(() => this.updateTriggerLabelTruncation());\n this.triggerLabelObserver.observe(this.triggerLabelTextEl);\n if (this.triggerEl) {\n this.triggerLabelObserver.observe(this.triggerEl);\n }\n }\n\n private updateTriggerLabelTruncation() {\n const el = this.triggerLabelTextEl;\n if (!el || !this.tabsCollapsed) {\n if (this.triggerLabelTruncated) {\n this.triggerLabelTruncated = false;\n }\n return;\n }\n\n const truncated = el.scrollWidth > el.clientWidth + 1;\n if (truncated !== this.triggerLabelTruncated) {\n this.triggerLabelTruncated = truncated;\n }\n }\n\n /** Width left for tabs after actions. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;\n const actionsEl = this.headerEl.querySelector('.bar-nav__actions') as HTMLElement | null;\n const actionsWidth = actionsEl?.offsetWidth ?? 0;\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n const spacing = this.tabsCollapsed\n ? parseFloat(\n getComputedStyle(this.headerEl).getPropertyValue('--dimension-space-100').trim(),\n ) || 8\n : actionsEl\n ? gap\n : 0;\n const available =\n this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;\n\n return Math.max(0, available - this.toolsDrawerOpeningReservePx());\n }\n\n /** While the tools drawer is opening, reserve width not yet claimed by flex shrink. */\n private toolsDrawerOpeningReservePx(): number {\n if (!this.toolsDrawerOpening) return 0;\n\n const tools = this.el.closest('ds-app-shell')?.querySelector('ds-panel-tools') as HTMLElement | null;\n if (!tools) return 0;\n\n const drawerTarget = readCssVarWidthPx(tools, '--_panel-tools-drawer-width');\n const drawerNow =\n tools.querySelector('.panel-tools__drawer')?.getBoundingClientRect().width ?? 0;\n return Math.max(0, drawerTarget - drawerNow);\n }\n\n private getTabsIntrinsicWidth(): number {\n const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n return tabList?.scrollWidth ?? 0;\n }\n\n private scheduleIntrinsicWidthRetry() {\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n this.intrinsicWidthRetryCount++;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n }\n\n private updateTabsCollapsed() {\n if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n if (this.tabsCollapsed) {\n this.tabsCollapsed = false;\n this.menuOpen = false;\n }\n this.intrinsicWidthRetryCount = 0;\n return;\n }\n\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (intrinsicWidth === 0) {\n this.scheduleIntrinsicWidthRetry();\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n BarNav.OVERFLOW_HYSTERESIS_PX,\n );\n\n if (shouldCollapse !== this.tabsCollapsed) {\n this.tabsCollapsed = shouldCollapse;\n if (!shouldCollapse) {\n this.menuOpen = false;\n }\n }\n }\n\n private syncMenuAnchor() {\n if (!this.menuEl || !this.triggerEl || !this.tabsCollapsed) return;\n this.menuEl.anchor = this.triggerEl;\n this.syncMenuSections();\n }\n\n private handleMenuSelect(e: Event) {\n const detail = (e as CustomEvent<MenuItemData>).detail;\n if (detail?.value !== undefined) {\n this.selectTab(String(detail.value));\n }\n this.menuOpen = false;\n }\n\n private handleMenuClose() {\n this.menuOpen = false;\n }\n\n /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n private incomingTabs(): BarNavTab[] {\n return this.tabsJson\n ? parseJsonArrayProp(this.tabsJson, [])\n : (this.tabs ?? []);\n }\n\n private incomingActions(): BarNavActionItem[] {\n return this.actionsJson\n ? parseJsonArrayProp(this.actionsJson, [])\n : (this.actions ?? []);\n }\n\n private applyHostProps() {\n const nextBasePath = this.basePath;\n const sectionChanged =\n nextBasePath !== '' &&\n this.committedSection !== '' &&\n nextBasePath !== this.committedSection;\n\n if (sectionChanged) {\n this.urlDerivedValue = '';\n this.committedSection = '';\n this.pendingSection = nextBasePath;\n this.resolvedTabs = [];\n this.resolvedActions = this.incomingActions();\n return;\n }\n\n if (this.pendingSection) {\n if (!nextBasePath || nextBasePath !== this.pendingSection) {\n return;\n }\n if (!this.currentUrl.startsWith(this.pendingSection)) {\n return;\n }\n const tabs = this.incomingTabs();\n if (tabs.length === 0) {\n return;\n }\n this.pendingSection = '';\n }\n\n this.resolvedTabs = this.incomingTabs();\n this.resolvedActions = this.incomingActions();\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n this.intrinsicWidthRetryCount = 0;\n this.scheduleOverflowCheck();\n }\n\n private syncMenuSections() {\n if (!this.menuEl) return;\n this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n }\n\n private syncValueFromUrl() {\n const tabs = this.incomingTabs();\n\n if (!this.currentUrl || !this.basePath) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n if (!this.currentUrl.startsWith(this.basePath)) {\n this.urlDerivedValue = '';\n this.hideTabsForDetailRoute = false;\n return;\n }\n\n const { value, hideTabs } = deriveBarNavValueFromUrl(\n this.currentUrl,\n this.basePath,\n tabs,\n );\n this.urlDerivedValue = value;\n this.hideTabsForDetailRoute = hideTabs;\n }\n\n private selectTab(id: string) {\n this.value = id;\n this.dsTabChange.emit(id);\n }\n\n /** Move focus to the selected tab in the visible tab group (after expand). */\n private focusVisibleSelectedTab() {\n const tab = queryWithinComponentHost(\n this.visibleTabGroupEl,\n `[data-tab-id=\"${this.effectiveValue}\"]`,\n );\n tab?.focus({ preventScroll: true });\n }\n\n private handleTabChange(e: Event) {\n this.selectTab((e as CustomEvent<string>).detail);\n }\n\n private handleActionChange(actionId: string, e: Event) {\n const selected = (e as CustomEvent<boolean>).detail;\n this.dsActionChange.emit({ id: actionId, selected });\n }\n\n private toggleTabMenu() {\n if (this.menuOpen) {\n this.menuOpen = false;\n return;\n }\n\n if (this.menuEl && this.triggerEl) {\n this.menuEl.anchor = this.triggerEl;\n this.menuEl.minWidth = `${this.triggerEl.offsetWidth}px`;\n this.syncMenuSections();\n }\n\n this.menuOpen = true;\n }\n\n private handleTriggerKeyDown(e: KeyboardEvent) {\n if (!this.tabsCollapsed) return;\n\n if (!this.menuOpen) {\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.toggleTabMenu();\n }\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.menuOpen = false;\n this.triggerEl?.focus();\n }\n }\n\n render() {\n const sectionReady =\n this.basePath !== '' && this.committedSection === this.basePath;\n const hasTabs =\n sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n const tabGroupKey = this.basePath || 'no-section';\n\n return (\n <Host>\n <header\n class={{\n 'bar-nav': true,\n 'bar-nav--dashboard': this.navStyle === 'dashboard',\n 'bar-nav--settings': this.navStyle === 'settings',\n 'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,\n }}\n ref={el => {\n this.headerEl = el as HTMLElement;\n if (el && !this.resizeObserver) {\n this.setupOverflowObserver();\n }\n }}\n >\n {hasTabs && (\n <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n <ds-tab-group-nav\n key={`probe-${tabGroupKey}`}\n ref={el => {\n this.probeTabGroupEl = el ?? null;\n if (el) {\n this.intrinsicWidthRetryCount = 0;\n this.scheduleOverflowCheck();\n }\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n />\n </div>\n )}\n\n {hasTabs && !this.tabsCollapsed && (\n <div class=\"bar-nav__left\">\n <ds-tab-group-nav\n key={`visible-${tabGroupKey}`}\n class=\"bar-nav__tabs-visible\"\n ref={el => {\n this.visibleTabGroupEl = el ?? null;\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n onDsChange={(e: Event) => this.handleTabChange(e)}\n />\n </div>\n )}\n\n {!hasTabs && this.heading && (\n <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n )}\n\n {hasTabs && this.tabsCollapsed && (\n <button\n type=\"button\"\n class={{\n 'bar-nav__tab-trigger': true,\n 'bar-nav__tab-trigger--open': this.menuOpen,\n }}\n ref={el => {\n this.triggerEl = el as HTMLButtonElement;\n }}\n aria-haspopup=\"menu\"\n aria-expanded={this.menuOpen}\n aria-label={`${this.activeTabLabel} tabs`}\n onClick={() => this.toggleTabMenu()}\n onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n >\n <span\n class={{\n 'bar-nav__tab-trigger-label': true,\n 'bar-nav__tab-trigger-label--dot': this.activeTabHasDot,\n 'bar-nav__tab-trigger-label--truncated': this.triggerLabelTruncated,\n }}\n >\n <span\n class={{\n 'bar-nav__tab-trigger-label-text': true,\n 'bar-nav__tab-trigger-label-text--truncated': this.triggerLabelTruncated,\n 'text-body-medium-emphasis': true,\n }}\n ref={el => {\n const next = el ?? null;\n if (next === this.triggerLabelTextEl) return;\n this.triggerLabelTextEl = next;\n if (this.tabsCollapsed) {\n this.syncTriggerLabelObserver();\n }\n }}\n >\n {this.activeTabLabel}\n </span>\n {this.activeTabHasDot && (\n <ds-badge\n class=\"bar-nav__tab-trigger-dot\"\n variant=\"dot\"\n background=\"var(--_bar-nav-bg)\"\n label=\"\"\n aria-hidden=\"true\"\n />\n )}\n </span>\n <ds-icon\n name=\"ChevronDown\"\n size=\"md\"\n color=\"inherit\"\n class=\"bar-nav__tab-trigger-chevron\"\n />\n </button>\n )}\n\n {hasTabs && this.tabsCollapsed && this.resolvedActions.length > 0 && (\n <div class=\"bar-nav__between\" aria-hidden=\"true\" />\n )}\n\n {this.resolvedActions.length > 0 && (\n <div class=\"bar-nav__actions\">\n {this.resolvedActions.map(action => (\n <ds-bar-nav-action\n key={action.id}\n icon={action.icon}\n selected={action.selected ?? false}\n dot={action.dot ?? false}\n inactive={action.inactive}\n aria-label={action.ariaLabel ?? action.id}\n onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n />\n ))}\n </div>\n )}\n\n </header>\n\n {hasTabs && this.tabsCollapsed && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToMenuSections(this.resolvedTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"start\"\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|