@ds-mo/ui 1.4.0 → 1.5.0

package/dist/.build-stamp

@@ -0,0 +1 @@
+1782167329114

package/dist/components/ds-app-shell.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsAppShell extends Components.DsAppShell, HTMLElement {}
+export const DsAppShell: {
+    prototype: DsAppShell;
+    new (): DsAppShell;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-app-shell.js

@@ -0,0 +1,2 @@
+import{p as s,H as e,h as t,a,t as n}from"./index.js";const l="--ds-shell-gradient-image";const i="--ds-shell-gradient-size";const o="--ds-shell-gradient-position-panel";const h="--ds-shell-gradient-position-bar";const c="--ds-shell-gradient-opacity";const r="0.1";const p="128.57% 141.42% at 0% 0%";function d(){return`radial-gradient(${p}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`}function f(s){return d()}function b(s){return`${Math.round(s.width)}px ${Math.round(s.height)}px`}function u(){return"0 0"}function g(s){return`${-Math.round(s)}px 0`}const _=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%}.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:column}.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-height:0;overflow:auto}`;const y=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.navStyle="navigation";this.gradient=false;this.gradientSrc="";this.resizeObserver=null}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.scheduleGradientVars()}scheduleGradientVars(){this.updateGradientVars();requestAnimationFrame((()=>this.updateGradientVars()))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleGradientVars()}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>this.scheduleGradientVars()));this.resizeObserver.observe(this.el);const s=this.el.querySelector(".app-shell__panel");const e=this.el.querySelector(".app-shell__bar");if(s)this.resizeObserver.observe(s);if(e)this.resizeObserver.observe(e);this.scheduleGradientVars()}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)}}clearGradientVars(s){const e=[l,i,o,h,c];for(const t of s){for(const s of e)t.style.removeProperty(s)}}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}}updateGradientVars(){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));if(!this.gradient){this.clearGradientVars(t);return}const a=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:f();const n=this.el.getBoundingClientRect();const p=this.el.querySelector(".app-shell__panel");const d=p?.getBoundingClientRect().width??0;const _=b({width:n.width,height:n.height});const y=u();const m=g(d);const v=r;for(const s of t){if(s===this.el){this.applyGradientVars(s,{[l]:a,[i]:_,[o]:y,[h]:m,[c]:v});continue}const e=s.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(s,{[l]:a,[i]:_,[c]:v,[o]:e?null:y,[h]:e?m:null})}}render(){const s={"app-shell":true,"app-shell--gradient":this.gradient};return t(a,{key:"1b22d064dc46112d99beac7f1d5d5ba432cfe2fb",class:s},t("div",{key:"32d93e02d70eb3b254030a488ed38907d252c039",class:"app-shell__row"},t("div",{key:"f28e0eb26d96425e918e16476e3a54205e1c796a",class:"app-shell__panel"},t("slot",{key:"e81d9a9041d0f16f5f6beddbd2fc11e4e5c5d499",name:"panel"})),t("div",{key:"908eb3060827e3638e620dda1ebeefff9a7745ac",class:"app-shell__main"},t("div",{key:"336fa05f5468cb2b7869a7d7f9cabfea45bddc6c",class:"app-shell__bar"},t("slot",{key:"396bf4ce86669dfe8af339bcc3c11d37a94223fc",name:"bar"})),t("div",{key:"54193b499051f194c3453b372bea1f9bb3419d94",class:"app-shell__content"},t("slot",{key:"e0694f34623d244d4ca200df2526abc821baf7bb"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}]}}static get style(){return _()}},[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 m(){if(typeof customElements==="undefined"){return}const s=["ds-app-shell"];s.forEach((s=>{switch(s){case"ds-app-shell":if(!customElements.get(n(s))){customElements.define(n(s),y)}break}}))}m();const v=y;const x=m;export{v as DsAppShell,x as defineCustomElement};
+//# sourceMappingURL=ds-app-shell.js.map

package/dist/components/ds-app-shell.js.map

@@ -0,0 +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","shellGradientImageForStyle","_style","shellGradientSize","layout","Math","round","width","height","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradient","gradientSrc","resizeObserver","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","scheduleGradientVars","updateGradientVars","requestAnimationFrame","disconnectedCallback","disconnect","onShellPropsChange","ResizeObserver","observe","el","panelWrap","querySelector","barWrap","applyGradientVars","target","vars","style","name","value","Object","entries","removeProperty","setProperty","clearGradientVars","targets","keys","key","panel","bar","setAttribute","filter","image","trim","shellRect","getBoundingClientRect","size","panelPosition","barPosition","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":["import type { NavChromeStyle } from './nav-chrome';\n\n/** 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\n/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\nconst GRADIENT_GEOMETRY = '128.57% 141.42% at 0% 0%';\n\n/**\n * Unified shell radial — same wash for all nav chrome styles.\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-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImageForStyle(_style: NavChromeStyle): 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",":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.app-shell__row {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n}\n\n.app-shell__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\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: 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-height: 0;\n  overflow: auto;\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  shellGradientImageForStyle,\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 = 'navigation';\n\n  /** When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds. */\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.scheduleGradientVars();\n  }\n\n  private scheduleGradientVars() {\n    this.updateGradientVars();\n    requestAnimationFrame(() => this.updateGradientVars());\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.scheduleGradientVars();\n  }\n\n  private connectMetricsObserver() {\n    this.resizeObserver = new ResizeObserver(() => this.scheduleGradientVars());\n    this.resizeObserver.observe(this.el);\n    const panelWrap = this.el.querySelector('.app-shell__panel');\n    const barWrap = this.el.querySelector('.app-shell__bar');\n    if (panelWrap) this.resizeObserver.observe(panelWrap);\n    if (barWrap) this.resizeObserver.observe(barWrap);\n    this.scheduleGradientVars();\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 clearGradientVars(targets: HTMLElement[]) {\n    const keys = [\n      SHELL_GRADIENT_IMAGE_VAR,\n      SHELL_GRADIENT_SIZE_VAR,\n      SHELL_GRADIENT_POSITION_PANEL_VAR,\n      SHELL_GRADIENT_POSITION_BAR_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  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 updateGradientVars() {\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    if (!this.gradient) {\n      this.clearGradientVars(targets);\n      return;\n    }\n\n    const image = this.gradientSrc.trim()\n      ? `url(${this.gradientSrc.trim()})`\n      : shellGradientImageForStyle(this.navStyle);\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 size = shellGradientSize({\n      width: shellRect.width,\n      height: shellRect.height,\n      panelWidth,\n    });\n    const panelPosition = shellGradientPositionPanel();\n    const barPosition = shellGradientPositionBar(panelWidth);\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    };\n\n    return (\n      <Host class={shellCls}>\n        <div class=\"app-shell__row\">\n          <div class=\"app-shell__panel\">\n            <slot name=\"panel\" />\n          </div>\n          <div class=\"app-shell__main\">\n            <div class=\"app-shell__bar\">\n              <slot name=\"bar\" />\n            </div>\n            <div class=\"app-shell__content\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAGO,MAAMA,EAA2B,4BACjC,MAAMC,EAA0B,2BAChC,MAAMC,EAAoC,qCAC1C,MAAMC,EAAkC,mCACxC,MAAMC,EAA6B,8BAGnC,MAAMC,EAAyB,MAEtC,MAAMC,EAAoB,2B,SAMVC,IACd,MAAO,mBAAmBD,yJAC5B,CAGM,SAAUE,EAA2BC,GACzC,OAAOF,GACT,CAQM,SAAUG,EAAkBC,GAChC,MAAO,GAAGC,KAAKC,MAAMF,EAAOG,YAAYF,KAAKC,MAAMF,EAAOI,WAC5D,C,SAEgBC,IACd,MAAO,KACT,CAEM,SAAUC,EAAyBC,GACvC,MAAO,IAAIN,KAAKC,MAAMK,QACxB,CC3CA,MAAMC,EAAc,IAAM,81B,MCoBbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAOmDC,KAAAC,SAA2B,aAGnDD,KAAAE,SAAoB,MAMrCF,KAAAG,YAAsB,GAItBH,KAAAI,eAAwC,IAgJjD,CA9IC,gBAAAC,GACEL,KAAKM,sBACLN,KAAKO,yBACLP,KAAKQ,sB,CAGC,oBAAAA,GACNR,KAAKS,qBACLC,uBAAsB,IAAMV,KAAKS,sB,CAGnC,oBAAAE,GACEX,KAAKI,gBAAgBQ,aACrBZ,KAAKI,eAAiB,I,CAMxB,kBAAAS,GACEb,KAAKM,sBACLN,KAAKQ,sB,CAGC,sBAAAD,GACNP,KAAKI,eAAiB,IAAIU,gBAAe,IAAMd,KAAKQ,yBACpDR,KAAKI,eAAeW,QAAQf,KAAKgB,IACjC,MAAMC,EAAYjB,KAAKgB,GAAGE,cAAc,qBACxC,MAAMC,EAAUnB,KAAKgB,GAAGE,cAAc,mBACtC,GAAID,EAAWjB,KAAKI,eAAeW,QAAQE,GAC3C,GAAIE,EAASnB,KAAKI,eAAeW,QAAQI,GACzCnB,KAAKQ,sB,CAGC,iBAAAY,CAAkBC,EAAqBC,GAC7C,MAAMC,EAAQF,EAAOE,MACrB,IAAK,MAAOC,EAAMC,KAAUC,OAAOC,QAAQL,GAAO,CAChD,GAAIG,IAAU,KAAMF,EAAMK,eAAeJ,QACpCD,EAAMM,YAAYL,EAAMC,E,EAIzB,iBAAAK,CAAkBC,GACxB,MAAMC,EAAO,CACXzD,EACAC,EACAC,EACAC,EACAC,GAEF,IAAK,MAAM0C,KAAUU,EAAS,CAC5B,IAAK,MAAME,KAAOD,EAAMX,EAAOE,MAAMK,eAAeK,E,EAIhD,mBAAA3B,GACN,MAAM4B,EAAQlC,KAAKgB,GAAGE,cAAc,gBACpC,MAAMiB,EAAMnC,KAAKgB,GAAGE,cAAc,cAClC,GAAIgB,EAAO,CACTA,EAAME,aAAa,YAAapC,KAAKC,UACrCiC,EAAMjC,SAAWD,KAAKC,Q,CAExB,GAAIkC,EAAK,CACPA,EAAIC,aAAa,YAAapC,KAAKC,UACnCkC,EAAIlC,SAAWD,KAAKC,Q,EAIhB,kBAAAQ,GACN,MAAMyB,EAAQlC,KAAKgB,GAAGE,cAAc,gBACpC,MAAMiB,EAAMnC,KAAKgB,GAAGE,cAAc,cAClC,MAAMa,EAAU,CAAC/B,KAAKgB,GAAIkB,EAAOC,GAAKE,QAAQrB,GAA0BA,IAAO,OAE/E,IAAKhB,KAAKE,SAAU,CAClBF,KAAK8B,kBAAkBC,GACvB,M,CAGF,MAAMO,EAAQtC,KAAKG,YAAYoC,OAC3B,OAAOvC,KAAKG,YAAYoC,UACxBxD,IAEJ,MAAMyD,EAAYxC,KAAKgB,GAAGyB,wBAC1B,MAAMxB,EAAYjB,KAAKgB,GAAGE,cAAc,qBACxC,MAAMzB,EAAawB,GAAWwB,wBAAwBpD,OAAS,EAE/D,MAAMqD,EAAOzD,EAAkB,CAC7BI,MAAOmD,EAAUnD,MACjBC,OAAQkD,EAAUlD,SAGpB,MAAMqD,EAAgBpD,IACtB,MAAMqD,EAAcpD,EAAyBC,GAC7C,MAAMoD,EAAUjE,EAEhB,IAAK,MAAMyC,KAAUU,EAAS,CAC5B,GAAIV,IAAWrB,KAAKgB,GAAI,CACtBhB,KAAKoB,kBAAkBC,EAAQ,CAC7B9C,CAACA,GAA2B+D,EAC5B9D,CAACA,GAA0BkE,EAC3BjE,CAACA,GAAoCkE,EACrCjE,CAACA,GAAkCkE,EACnCjE,CAACA,GAA6BkE,IAEhC,Q,CAGF,MAAMC,EAAQzB,EAAO0B,QAAQC,gBAAkB,aAC/ChD,KAAKoB,kBAAkBC,EAAQ,CAC7B9C,CAACA,GAA2B+D,EAC5B9D,CAACA,GAA0BkE,EAC3B/D,CAACA,GAA6BkE,EAC9BpE,CAACA,GAAoCqE,EAAQ,KAAOH,EACpDjE,CAACA,GAAkCoE,EAAQF,EAAc,M,EAK/D,MAAAK,GACE,MAAMC,EAAoC,CACxC,YAAa,KACb,sBAAuBlD,KAAKE,UAG9B,OACEiD,EAACC,EAAI,CAAAnB,IAAA,2CAACoB,MAAOH,GACXC,EAAA,OAAAlB,IAAA,2CAAKoB,MAAM,kBACTF,EAAA,OAAAlB,IAAA,2CAAKoB,MAAM,oBACTF,EAAA,QAAAlB,IAAA,2CAAMT,KAAK,WAEb2B,EAAA,OAAAlB,IAAA,2CAAKoB,MAAM,mBACTF,EAAA,OAAAlB,IAAA,2CAAKoB,MAAM,kBACTF,EAAA,QAAAlB,IAAA,2CAAMT,KAAK,SAEb2B,EAAA,OAAAlB,IAAA,2CAAKoB,MAAM,sBACTF,EAAA,QAAAlB,IAAA,gD","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as a,H as e,c as t,h as s,a as i,t as n}from"./index.js";import{S as r}from"./p-DznbYg1m.js";import{g as o,i as h}from"./p-BQq26pt9.js";import{d}from"./p-B_enucPQ.js";import{d as b}from"./p-_LI2ymhS.js";import{d as c}from"./p-DqBCQRRd.js";import{d as l}from"./p-CpbnmEu1.js";import{d as v}from"./p-DceSoh5V.js";function f(a,e,t){if(!a||!e){return{value:"",hideTabs:false}}if(a!==e&&!a.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=a.slice(e.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=o(t);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const r=n.find((a=>a.id===i));if(r){return{value:r.id,hideTabs:false}}return{value:"",hideTabs:true}}function u(a,e,t,s,i,n){const r=t?g(t,[]):e??[];const o=n?g(n,[]):i??[];return a.length===0&&r.length>0||s.length===0&&o.length>0}function g(a,e){if(Array.isArray(a))return a;if(typeof a==="string"&&a!==""){try{const t=JSON.parse(a);return Array.isArray(t)?t:e}catch{return e}}return e}function p(a,e){if(!a)return null;const t=a.shadowRoot??a;return t.querySelector(e)}function m(a){return p(a,'[role="tablist"]')}function _(a,e){const t=[];let s=[];for(const i of a){if(h(i)){if(s.length>0){t.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===e,isInactive:i.disabled})}if(s.length>0){t.push({items:s})}return t}function y(a,e){const t=o(a);return t.find((a=>a.id===e))??t[0]}function k(a,e){return y(a,e)?.label??"Tabs"}function w(a,e,t,s=2){const i=a-e;if(t){return i>-s}return i>s}const x=()=>`.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);transition:background-color var(--effect-motion-short-3),     border-color var(--effect-motion-short-3),     color var(--effect-motion-short-3)}.bar-nav--default.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)}.bar-nav--navigation.sc-ds-bar-nav{--_bar-nav-bg:var(--color-navigation-background);--_bar-nav-border:var(--color-navigation-border-tertiary);--_bar-nav-fg-primary:var(--color-navigation-foreground-primary);--_bar-nav-fg-secondary:var(--color-navigation-foreground-secondary);--_bar-nav-hover:var(--color-navigation-interaction-hover);--_bar-nav-pressed:var(--color-navigation-interaction-pressed);--_bar-nav-focus:var(--color-navigation-interaction-focus);--_bar-nav-dot:var(--color-navigation-foreground-brand)}.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}.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 C=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.navStyle="default";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}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return k(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!y(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?g(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?g(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(a){if(this.menuEl){this.menuEl.open=a}}onTabsCollapsedChange(a,e){if(!a){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(a){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(a||e===undefined||e===a)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}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(u(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=a.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(t)}};queueMicrotask(t)}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(a=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(a||!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 a=this.triggerLabelTextEl;if(!a||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const e=a.scrollWidth>a.clientWidth+1;if(e!==this.triggerLabelTruncated){this.triggerLabelTruncated=e}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const a=getComputedStyle(this.headerEl);const e=parseFloat(a.columnGap||a.gap||"0")||0;const t=this.headerEl.querySelector(".bar-nav__actions");const s=t?.offsetWidth??0;const i=(parseFloat(a.paddingLeft)||0)+(parseFloat(a.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:t?e:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const a=m(this.probeTabGroupEl);return a?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=a.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 a=this.getTabsIntrinsicWidth();if(a===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=w(a,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);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(a){const e=a.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:a,hideTabs:e}=f(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=a;this.hideTabsForDetailRoute=e}selectTab(a){this.value=a;this.dsTabChange.emit(a)}focusVisibleSelectedTab(){const a=p(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);a?.focus({preventScroll:true})}handleTabChange(a){this.selectTab(a.detail)}handleActionChange(a,e){const t=e.detail;this.dsActionChange.emit({id:a,selected:t})}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(a){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(a.key==="ArrowDown"||a.key==="ArrowUp"||a.key==="Enter"||a.key===" "){a.preventDefault();this.toggleTabMenu()}return}if(a.key==="Escape"){a.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}get tabSurface(){return this.navStyle==="navigation"?"navigation":undefined}render(){const a=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.tabSurface;return s(i,{key:"7e641e23ce2dd35c24cfa703c9d262362bdde855"},s("header",{key:"c727d27f8a2bfff94b42f15db783b9face7098f6",class:{"bar-nav":true,"bar-nav--navigation":this.navStyle==="navigation","bar-nav--default":this.navStyle==="default","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},style:{viewTransitionName:r},ref:a=>{this.headerEl=a;if(a&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&s("div",{key:"a237045bb6646dd51cd62e2b6799412f403457a2",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:"dd053f55c8f738a3645b8f94d8b17d627606c537",ref:a=>{this.probeTabGroupEl=a??null;if(a){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue,background:e})),a&&!this.tabsCollapsed&&s("div",{key:"85606147847d16e086c36f16665f8af842bf598f",class:"bar-nav__left"},s("ds-tab-group-nav",{key:"558a684d4a0f73a885a32909ebcd2101ce035780",class:"bar-nav__tabs-visible",ref:a=>{this.visibleTabGroupEl=a??null},tabs:this.resolvedTabs,value:this.effectiveValue,background:e,onDsChange:a=>this.handleTabChange(a)})),!a&&this.heading&&s("span",{key:"3775475d9c79078d1797757a98c03db19334cf6f",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&s("button",{key:"f3a170f42b0c781e048f8f9398f5938f97aff92c",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:a=>{this.triggerEl=a},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:a=>this.handleTriggerKeyDown(a)},s("span",{key:"07c90e6264c5636944680451e0c1b89bc3470a2a",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},s("span",{key:"54c7357b701858b2d05824f3cac39003bda26e8d",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:a=>{const e=a??null;if(e===this.triggerLabelTextEl)return;this.triggerLabelTextEl=e;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"94618fb7922938b92159c38b4900de4dc8c9ce27",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"2566a308b90761d0b6bb9ad3d41b3e5a10a4e218",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"895791a2f34560f87bef98e5df4e5f5c7dbdde8d",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"54442d862cc26f74b3e5496021b303cbc3fa99f8",class:"bar-nav__actions"},this.resolvedActions.map((a=>s("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:e=>this.handleActionChange(a.id,e)}))))),a&&this.tabsCollapsed&&s("ds-menu",{key:"fa553ba9588b806df0c61c1389ef847acdae0ed5",ref:a=>{this.menuEl=a??null},open:this.menuOpen,sections:_(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:a=>this.handleMenuSelect(a),onDsClose:()=>this.handleMenuClose()}))}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return x()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],navStyle:[513,"nav-style"],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function T(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(n(a))){customElements.define(n(a),C)}break;case"ds-badge":if(!customElements.get(n(a))){d()}break;case"ds-bar-nav-action":if(!customElements.get(n(a))){b()}break;case"ds-icon":if(!customElements.get(n(a))){c()}break;case"ds-menu":if(!customElements.get(n(a))){l()}break;case"ds-tab-group-nav":if(!customElements.get(n(a))){v()}break}}))}T();const z=C;const S=T;export{z as DsBarNav,S as defineCustomElement};
+import{p as a,H as e,c as t,h as s,a as i,t as n}from"./index.js";import{S as r}from"./p-DznbYg1m.js";import{g as o,i as d}from"./p-BQq26pt9.js";import{d as h}from"./p-B_enucPQ.js";import{d as b}from"./p-_LI2ymhS.js";import{d as c}from"./p-DqBCQRRd.js";import{d as l}from"./p-CpbnmEu1.js";import{d as v}from"./p-DceSoh5V.js";function f(a,e,t){if(!a||!e){return{value:"",hideTabs:false}}if(a!==e&&!a.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=a.slice(e.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=o(t);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const r=n.find((a=>a.id===i));if(r){return{value:r.id,hideTabs:false}}return{value:"",hideTabs:true}}function u(a,e,t,s,i,n){const r=t?g(t,[]):e??[];const o=n?g(n,[]):i??[];return a.length===0&&r.length>0||s.length===0&&o.length>0}function g(a,e){if(Array.isArray(a))return a;if(typeof a==="string"&&a!==""){try{const t=JSON.parse(a);return Array.isArray(t)?t:e}catch{return e}}return e}function p(a,e){if(!a)return null;const t=a.shadowRoot??a;return t.querySelector(e)}function m(a){return p(a,'[role="tablist"]')}function _(a,e){const t=[];let s=[];for(const i of a){if(d(i)){if(s.length>0){t.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===e,isInactive:i.disabled})}if(s.length>0){t.push({items:s})}return t}function y(a,e){const t=o(a);return t.find((a=>a.id===e))??t[0]}function k(a,e){return y(a,e)?.label??"Tabs"}function w(a,e,t,s=2){const i=a-e;if(t){return i>-s}return i>s}const x=()=>`.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);transition:background-color var(--effect-motion-short-3),     border-color var(--effect-motion-short-3),     color var(--effect-motion-short-3)}ds-app-shell[gradient].sc-ds-bar-nav-h,ds-app-shell[gradient] .sc-ds-bar-nav-h{--ds-shell-gradient-opacity:0.1}.bar-nav.sc-ds-bar-nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--ds-shell-gradient-position-bar, 0 0);background-repeat:no-repeat}.bar-nav--default.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)}.bar-nav--navigation.sc-ds-bar-nav{--_bar-nav-bg:var(--color-navigation-background);--_bar-nav-border:var(--color-navigation-border-tertiary);--_bar-nav-fg-primary:var(--color-navigation-foreground-primary);--_bar-nav-fg-secondary:var(--color-navigation-foreground-secondary);--_bar-nav-hover:var(--color-navigation-interaction-hover);--_bar-nav-pressed:var(--color-navigation-interaction-pressed);--_bar-nav-focus:var(--color-navigation-interaction-focus);--_bar-nav-dot:var(--color-navigation-foreground-brand)}.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}.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 C=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.navStyle="default";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}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return k(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!y(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?g(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?g(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(a){if(this.menuEl){this.menuEl.open=a}}onTabsCollapsedChange(a,e){if(!a){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(a){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(a||e===undefined||e===a)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}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(u(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=a.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(t)}};queueMicrotask(t)}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(a=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(a||!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 a=this.triggerLabelTextEl;if(!a||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const e=a.scrollWidth>a.clientWidth+1;if(e!==this.triggerLabelTruncated){this.triggerLabelTruncated=e}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const a=getComputedStyle(this.headerEl);const e=parseFloat(a.columnGap||a.gap||"0")||0;const t=this.headerEl.querySelector(".bar-nav__actions");const s=t?.offsetWidth??0;const i=(parseFloat(a.paddingLeft)||0)+(parseFloat(a.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:t?e:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const a=m(this.probeTabGroupEl);return a?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=a.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 a=this.getTabsIntrinsicWidth();if(a===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=w(a,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);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(a){const e=a.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:a,hideTabs:e}=f(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=a;this.hideTabsForDetailRoute=e}selectTab(a){this.value=a;this.dsTabChange.emit(a)}focusVisibleSelectedTab(){const a=p(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);a?.focus({preventScroll:true})}handleTabChange(a){this.selectTab(a.detail)}handleActionChange(a,e){const t=e.detail;this.dsActionChange.emit({id:a,selected:t})}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(a){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(a.key==="ArrowDown"||a.key==="ArrowUp"||a.key==="Enter"||a.key===" "){a.preventDefault();this.toggleTabMenu()}return}if(a.key==="Escape"){a.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}get tabSurface(){return this.navStyle==="navigation"?"navigation":undefined}render(){const a=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.tabSurface;return s(i,{key:"33da1d7ce43e3dd8dce75a099b07640c5f1d6f84"},s("header",{key:"f19ca4404e1792078ff7f5139d6be1ab042fe413",class:{"bar-nav":true,"bar-nav--navigation":this.navStyle==="navigation","bar-nav--default":this.navStyle==="default","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},style:{viewTransitionName:r},ref:a=>{this.headerEl=a;if(a&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&s("div",{key:"b8413a359e92cf997539baf5bd6cfa31ee651a2e",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:"fb1655cb894f477a20c7fc9c115c65d13107e29b",ref:a=>{this.probeTabGroupEl=a??null;if(a){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue,background:e})),a&&!this.tabsCollapsed&&s("div",{key:"e7f1d1a17d1066a1ab8176a77d2fe6a5292191aa",class:"bar-nav__left"},s("ds-tab-group-nav",{key:"c27ff659074d68142fceee3f6f3cb85b4e3d4a51",class:"bar-nav__tabs-visible",ref:a=>{this.visibleTabGroupEl=a??null},tabs:this.resolvedTabs,value:this.effectiveValue,background:e,onDsChange:a=>this.handleTabChange(a)})),!a&&this.heading&&s("span",{key:"e172c94515fbcac2cf10edbf0d7a8721fd4c7bc2",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&s("button",{key:"d3b8912dce74a554725d5d26c099e9acc93ea58a",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:a=>{this.triggerEl=a},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:a=>this.handleTriggerKeyDown(a)},s("span",{key:"9769b123abad90bb4442782a56c0f19aadd9e8f2",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},s("span",{key:"4a5e71313e536d829a7e2a7be18f285a4b072193",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:a=>{const e=a??null;if(e===this.triggerLabelTextEl)return;this.triggerLabelTextEl=e;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"60d13afa8219b962a4707ac3e000a2a70204bc30",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"e1dc20d24b29dfd44e92a5dc7b8f30a1b9cf0128",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"f4ee3beb48119d5eced323a1e731bdf15ccc87d7",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"b4ccbdb8c6616b1f7a363ca84810fa2d30805e75",class:"bar-nav__actions"},this.resolvedActions.map((a=>s("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:e=>this.handleActionChange(a.id,e)}))))),a&&this.tabsCollapsed&&s("ds-menu",{key:"16d3c2b8f8c2a56e73e6f7ea956f4f7cda1bfed5",ref:a=>{this.menuEl=a??null},open:this.menuOpen,sections:_(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:a=>this.handleMenuSelect(a),onDsClose:()=>this.handleMenuClose()}))}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return x()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],navStyle:[513,"nav-style"],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function T(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(n(a))){customElements.define(n(a),C)}break;case"ds-badge":if(!customElements.get(n(a))){h()}break;case"ds-bar-nav-action":if(!customElements.get(n(a))){b()}break;case"ds-icon":if(!customElements.get(n(a))){c()}break;case"ds-menu":if(!customElements.get(n(a))){l()}break;case"ds-tab-group-nav":if(!customElements.get(n(a))){v()}break}}))}T();const z=C;const S=T;export{z as DsBarNav,S as defineCustomElement};
 //# sourceMappingURL=ds-bar-nav.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsJson","resolvedActions","actions","actionsJson","tabsIncoming","parseJsonArrayProp","actionsIncoming","fallback","Array","isArray","parsed","JSON","parse","queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","selectedId","sections","batch","item","isTabDivider","push","items","label","isSelected","isInactive","disabled","getActiveTab","selectable","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","currentUrl","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","effectiveValue","activeTabLabel","activeTabHasDot","dot","onPropsChange","syncValueFromUrl","scheduleOverflowCheck","onUrlChange","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","updateTriggerLabelTruncation","disconnectedCallback","disconnect","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","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","tabSurface","render","hasTabs","h","Host","class","style","viewTransitionName","SHELL_BAR_NAV_VT_NAME","ref","inert","background","onDsChange","heading","type","onClick","onKeyDown","next","variant","name","size","color","map","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","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":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\n\nexport interface BarNavUrlState {\n  /** Tab id derived from the URL, or empty when none applies. */\n  value: string;\n  /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n  hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n *  Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n  path: string,\n  basePath: string,\n  tabs: BarNavTab[],\n): BarNavUrlState {\n  if (!path || !basePath) {\n    return { value: '', hideTabs: false };\n  }\n\n  if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n    return { value: '', hideTabs: false };\n  }\n\n  const remainder = path.slice(basePath.length);\n  const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n  const selectableTabs = getSelectableTabs(tabs);\n\n  if (!seg) {\n    return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n  }\n\n  const tab = selectableTabs.find(t => t.id === seg);\n  if (tab) {\n    return { value: tab.id, hideTabs: false };\n  }\n\n  return { value: '', hideTabs: true };\n}\n\n/** True when host array/json props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(\n  resolvedTabs: BarNavTab[],\n  tabs: BarNavTab[],\n  tabsJson: string,\n  resolvedActions: BarNavActionItem[],\n  actions: BarNavActionItem[],\n  actionsJson: string,\n): boolean {\n  const tabsIncoming = tabsJson\n    ? parseJsonArrayProp(tabsJson, [])\n    : (tabs ?? []);\n  const actionsIncoming = actionsJson\n    ? parseJsonArrayProp(actionsJson, [])\n    : (actions ?? []);\n\n  return (\n    (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||\n    (resolvedActions.length === 0 && actionsIncoming.length > 0)\n  );\n}\n\n/** Parse tabs/actions from either a JSON attribute string or a JS property array. */\nexport function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {\n  if (Array.isArray(value)) return value;\n  if (typeof value === 'string' && value !== '') {\n    try {\n      const parsed = JSON.parse(value);\n      return Array.isArray(parsed) ? parsed : fallback;\n    } catch {\n      return fallback;\n    }\n  }\n  return fallback;\n}\n","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';\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  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}\n\n/* Default chrome — matches standard app surfaces (former secondary bar) */\n.bar-nav--default {\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/* Navigation chrome — sync with ds-panel-nav navigation style */\n.bar-nav--navigation {\n  --_bar-nav-bg: var(--color-navigation-background);\n  --_bar-nav-border: var(--color-navigation-border-tertiary);\n  --_bar-nav-fg-primary: var(--color-navigation-foreground-primary);\n  --_bar-nav-fg-secondary: var(--color-navigation-foreground-secondary);\n  --_bar-nav-hover: var(--color-navigation-interaction-hover);\n  --_bar-nav-pressed: var(--color-navigation-interaction-pressed);\n  --_bar-nav-focus: var(--color-navigation-interaction-focus);\n  --_bar-nav-dot: var(--color-navigation-foreground-brand);\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}\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  Watch,\n  State,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/Menu';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport { SHELL_BAR_NAV_VT_NAME } from '../../nav/shell-view-transition';\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  /**\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  /** Chrome style: `navigation` = navigation tokens, `default` = app tokens.\n   *  Property: `navStyle`. HTML attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'default';\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\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  onPropsChange() {\n    this.resolvedTabs = this.tabsJson\n      ? parseJsonArrayProp(this.tabsJson, [])\n      : (this.tabs ?? []);\n    this.resolvedActions = this.actionsJson\n      ? parseJsonArrayProp(this.actionsJson, [])\n      : (this.actions ?? []);\n    this.syncValueFromUrl();\n    this.intrinsicWidthRetryCount = 0;\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('currentUrl')\n  @Watch('basePath')\n  onUrlChange() {\n    this.syncValueFromUrl();\n    this.scheduleOverflowCheck();\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.onPropsChange();\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.onPropsChange();\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  private syncMenuSections() {\n    if (!this.menuEl) return;\n    this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private syncValueFromUrl() {\n    if (!this.currentUrl || !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      this.resolvedTabs,\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  private get tabSurface(): BarNavActionBackground | undefined {\n    return this.navStyle === 'navigation' ? 'navigation' : undefined;\n  }\n\n  render() {\n    const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n    const tabSurface = this.tabSurface;\n\n    return (\n      <Host>\n        <header\n          class={{\n            'bar-nav': true,\n            'bar-nav--navigation': this.navStyle === 'navigation',\n            'bar-nav--default': this.navStyle === 'default',\n            'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,\n          }}\n          style={{ viewTransitionName: SHELL_BAR_NAV_VT_NAME }}\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                  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                  background={tabSurface}\n                />\n              </div>\n            )}\n\n            {hasTabs && !this.tabsCollapsed && (\n              <div class=\"bar-nav__left\">\n                <ds-tab-group-nav\n                  class=\"bar-nav__tabs-visible\"\n                  ref={el => {\n                    this.visibleTabGroupEl = el ?? null;\n                  }}\n                  tabs={this.resolvedTabs}\n                  value={this.effectiveValue}\n                  background={tabSurface}\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                  background={tabSurface}\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":[]}
+{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsJson","resolvedActions","actions","actionsJson","tabsIncoming","parseJsonArrayProp","actionsIncoming","fallback","Array","isArray","parsed","JSON","parse","queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","selectedId","sections","batch","item","isTabDivider","push","items","label","isSelected","isInactive","disabled","getActiveTab","selectable","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","currentUrl","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","effectiveValue","activeTabLabel","activeTabHasDot","dot","onPropsChange","syncValueFromUrl","scheduleOverflowCheck","onUrlChange","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","updateTriggerLabelTruncation","disconnectedCallback","disconnect","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","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","tabSurface","render","hasTabs","h","Host","class","style","viewTransitionName","SHELL_BAR_NAV_VT_NAME","ref","inert","background","onDsChange","heading","type","onClick","onKeyDown","next","variant","name","size","color","map","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","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":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\n\nexport interface BarNavUrlState {\n  /** Tab id derived from the URL, or empty when none applies. */\n  value: string;\n  /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n  hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n *  Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n  path: string,\n  basePath: string,\n  tabs: BarNavTab[],\n): BarNavUrlState {\n  if (!path || !basePath) {\n    return { value: '', hideTabs: false };\n  }\n\n  if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n    return { value: '', hideTabs: false };\n  }\n\n  const remainder = path.slice(basePath.length);\n  const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n  const selectableTabs = getSelectableTabs(tabs);\n\n  if (!seg) {\n    return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n  }\n\n  const tab = selectableTabs.find(t => t.id === seg);\n  if (tab) {\n    return { value: tab.id, hideTabs: false };\n  }\n\n  return { value: '', hideTabs: true };\n}\n\n/** True when host array/json props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(\n  resolvedTabs: BarNavTab[],\n  tabs: BarNavTab[],\n  tabsJson: string,\n  resolvedActions: BarNavActionItem[],\n  actions: BarNavActionItem[],\n  actionsJson: string,\n): boolean {\n  const tabsIncoming = tabsJson\n    ? parseJsonArrayProp(tabsJson, [])\n    : (tabs ?? []);\n  const actionsIncoming = actionsJson\n    ? parseJsonArrayProp(actionsJson, [])\n    : (actions ?? []);\n\n  return (\n    (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||\n    (resolvedActions.length === 0 && actionsIncoming.length > 0)\n  );\n}\n\n/** Parse tabs/actions from either a JSON attribute string or a JS property array. */\nexport function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {\n  if (Array.isArray(value)) return value;\n  if (typeof value === 'string' && value !== '') {\n    try {\n      const parsed = JSON.parse(value);\n      return Array.isArray(parsed) ? parsed : fallback;\n    } catch {\n      return fallback;\n    }\n  }\n  return fallback;\n}\n","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';\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  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}\n\n:host-context(ds-app-shell[gradient]) {\n  --ds-shell-gradient-opacity: 0.1;\n}\n\n.bar-nav::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\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-position: var(--ds-shell-gradient-position-bar, 0 0);\n  background-repeat: no-repeat;\n}\n\n/* Default chrome — matches standard app surfaces (former secondary bar) */\n.bar-nav--default {\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/* Navigation chrome — sync with ds-panel-nav navigation style */\n.bar-nav--navigation {\n  --_bar-nav-bg: var(--color-navigation-background);\n  --_bar-nav-border: var(--color-navigation-border-tertiary);\n  --_bar-nav-fg-primary: var(--color-navigation-foreground-primary);\n  --_bar-nav-fg-secondary: var(--color-navigation-foreground-secondary);\n  --_bar-nav-hover: var(--color-navigation-interaction-hover);\n  --_bar-nav-pressed: var(--color-navigation-interaction-pressed);\n  --_bar-nav-focus: var(--color-navigation-interaction-focus);\n  --_bar-nav-dot: var(--color-navigation-foreground-brand);\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}\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  Watch,\n  State,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/Menu';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport { SHELL_BAR_NAV_VT_NAME } from '../../nav/shell-view-transition';\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  /**\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  /** Chrome style: `navigation` = navigation tokens, `default` = app tokens.\n   *  Property: `navStyle`. HTML attribute: `nav-style`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'default';\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\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  onPropsChange() {\n    this.resolvedTabs = this.tabsJson\n      ? parseJsonArrayProp(this.tabsJson, [])\n      : (this.tabs ?? []);\n    this.resolvedActions = this.actionsJson\n      ? parseJsonArrayProp(this.actionsJson, [])\n      : (this.actions ?? []);\n    this.syncValueFromUrl();\n    this.intrinsicWidthRetryCount = 0;\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('currentUrl')\n  @Watch('basePath')\n  onUrlChange() {\n    this.syncValueFromUrl();\n    this.scheduleOverflowCheck();\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.onPropsChange();\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.onPropsChange();\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  private syncMenuSections() {\n    if (!this.menuEl) return;\n    this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private syncValueFromUrl() {\n    if (!this.currentUrl || !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      this.resolvedTabs,\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  private get tabSurface(): BarNavActionBackground | undefined {\n    return this.navStyle === 'navigation' ? 'navigation' : undefined;\n  }\n\n  render() {\n    const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n    const tabSurface = this.tabSurface;\n\n    return (\n      <Host>\n        <header\n          class={{\n            'bar-nav': true,\n            'bar-nav--navigation': this.navStyle === 'navigation',\n            'bar-nav--default': this.navStyle === 'default',\n            'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,\n          }}\n          style={{ viewTransitionName: SHELL_BAR_NAV_VT_NAME }}\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                  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                  background={tabSurface}\n                />\n              </div>\n            )}\n\n            {hasTabs && !this.tabsCollapsed && (\n              <div class=\"bar-nav__left\">\n                <ds-tab-group-nav\n                  class=\"bar-nav__tabs-visible\"\n                  ref={el => {\n                    this.visibleTabGroupEl = el ?? null;\n                  }}\n                  tabs={this.resolvedTabs}\n                  value={this.effectiveValue}\n                  background={tabSurface}\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                  background={tabSurface}\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":[]}

package/dist/components/ds-checkbox.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let n=0;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++n}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"2fe9993383566619b0317d67dfe616143540195d",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"601103bbc7e7540b7f5d596c70f8df817ee1ec6c",class:{box:true,"box--marked":e}},e&&c("span",{key:"3c660f726dc2e2c40360fa4ec5f6660af0989ca5",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"4e093cd91726322d663cef3e61d097b97e325345",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),a)}break}}))}d();const h=a;const l=d;export{h as DsCheckbox,l as defineCustomElement};
+import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"0daae1bf8d4200e9eb8a9871891607fa6f86b53d",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"14d40b4cb1248a8a8b2ba9e937b475c7d683ff9b",class:{box:true,"box--marked":e}},e&&c("span",{key:"cb57bd0979d3a90e75fe5db1310da14d4dc5b01f",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"2dd41545723ee5d50bf12c8dab2b306cbecc166c",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
 //# sourceMappingURL=ds-checkbox.js.map

package/dist/components/ds-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as d,a as l,t}from"./index.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"c09c4245b4c55dee46f2ce7fa7684e71748a55f1"},d("div",{key:"aba8706c496f107cb64bd1c22f812ca290d807b1",class:"field"},d("label",{key:"a50f2952d36ed02b909e0d9054dcd923927ca591",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"15a41141b29a35bc81e545e21e9383fe2cfe7781"})))}static get style(){return c()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),a)}break}}))}f();const n=a;const o=f;export{n as DsField,o as defineCustomElement};
+import{p as e,H as s,h as d,a as l,t}from"./index.js";const f=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"e20fcfe3ad1c31a9000dc472f36657d9a5db5bd3"},d("div",{key:"c015b92e8e4421a4566edefbf0a7e2aeddf8e43e",class:"field"},d("label",{key:"81915a24be294e9af82ea55f6c158a2e3d8cbccf",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"3e1ee5e1a4f9773fff608067b75d057a9126b1f5"})))}static get style(){return f()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),a)}break}}))}c();const n=a;const o=c;export{n as DsField,o as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as a,c as n,h as t,a as i,t as s}from"./index.js";import{e as o,r,s as d,a as l}from"./p-DznbYg1m.js";import{d as c}from"./p-B_enucPQ.js";import{d as v}from"./p-vW9EMP8s.js";import{d as p}from"./p-DqBCQRRd.js";import{d as h}from"./p-C9za7IDu.js";const f="data-nav-style";function m(e){if(e==="navigation"||e==="default")return e;return undefined}function u(e,a,n=(typeof document!=="undefined"?document.documentElement.getAttribute(f):null)){return m(a)??m(n)??e}function _(e,a){return e!==a}function b(e,a){return e===a||e.startsWith(`${a}/`)}function g(e,a){if(!e)return"";let n="";let t=0;for(const i of a){if(!i.href)continue;if(b(e,i.href)&&i.href.length>t){n=i.id;t=i.href.length}}return n}function y(e){return e.reduce(((e,a)=>e+a.items.length),0)}function x(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function k(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function w(e,a){return y(e)===0&&y(x(a))>0}const C=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:200px;--_nav-width-collapsed:48px;--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}.panel-nav--default.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui)}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-motion-short-2, 100ms ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-fade.sc-ds-panel-nav{--ds-fade-offset:100%}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),     color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav--navigation.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--default.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:10;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-background-bold-brand);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const z=new WeakMap;const I=new WeakMap;const A=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="navigation";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="navigation";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return k(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=x(e);this.syncRovingIndex();this.syncActiveFromUrl()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}async onNavStyleChange(e){if(this.effectiveDisableViewTransition){this.renderedStyle=e;return}z.get(this)?.skipTransition();z.delete(this);const a=document;if(typeof a.startViewTransition!=="function"){this.renderedStyle=e;return}o();const n=r(this.el.querySelector(".panel-nav__footer-btn"));d(n);const t=a.startViewTransition((()=>new Promise((a=>{I.set(this,a);this.renderedStyle=e}))));z.set(this,t);t.finished.finally((()=>{if(z.get(this)===t)z.delete(this);I.delete(this)}));t.ready.then((()=>l(n))).catch((()=>{}))}componentWillLoad(){this.renderedStyle=u(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}componentDidRender(){const e=I.get(this);if(e){I.delete(this);e()}}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;const e=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.isAnimating=false;e?.removeEventListener("transitionend",this.transitionEndHandler)}};e?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=g(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){this.syncRenderedStyleIfNeeded();if(w(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}syncRenderedStyleIfNeeded(){if(!_(this.renderedStyle,this.navStyle))return;if(this.effectiveDisableViewTransition){z.get(this)?.skipTransition();z.delete(this);this.renderedStyle=this.navStyle}else{void this.onNavStyleChange(this.navStyle)}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.dsNavToggle.emit(e);if(this.storageKey){this.collapsed=e;try{localStorage.setItem(this.storageKey,String(e))}catch{}}}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}syncRovingIndex(){const e=this.getAllItems().findIndex((e=>e.id===this.effectiveActiveId));this.rovingIndex=e>=0?e:0}handleItemKeyDown(e,a){const n=this.getAllItems().length;let t;switch(e.key){case"ArrowDown":e.preventDefault();t=(a+1)%n;break;case"ArrowUp":e.preventDefault();t=(a-1+n)%n;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(){this.dsNavUserAction.emit()}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(e,a,n){const i=e.id===this.effectiveActiveId;const s=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const o={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?e.label:undefined,tabIndex:a===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleItemKeyDown(e,a),onFocus:()=>{this.rovingIndex=a}};const r=this.routerMode==="anchor"&&e.href;return r?t("a",{...o,href:e.href},s):t("button",{...o,type:"button"},s)}render(){const e=this.renderedStyle==="navigation";const a=this.collapsed||this.viewportNarrow;const{userName:n,userInitial:s}=this;const o={"panel-nav":true,"panel-nav--navigation":e,"panel-nav--default":!e,"panel-nav--collapsed":a,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"312b1d2747d462dc4f912b15b507bb00fdedca6c",style:{display:"block",position:"relative"}},t("nav",{key:"62b7c86492506d61bb2e60af4a5ff82a3f5fa5cc",class:o,"aria-label":e?"Main navigation":"Settings navigation"},t("div",{key:"f6ef22d4167f15c53615c84ce85d3d1720a07232",class:"panel-nav__header"},t("button",{key:"8ef91d5eb7a5a5314bb4df608f866d9baafb9c32",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":a?"Expand navigation":"Collapse navigation","aria-expanded":a?"false":"true"},t("span",{key:"9de272e66df4474525498006007c9e5ed2ce824e",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"1d0a9a65e528d449d0c33f016f4e364e151309a5",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"b9a27b1f9e3bce2dd1865d0475edaffdd88f5c63",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"2c88ddcb0fabdc8f5a386c0c7096b44c6f2c73f7",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"07f5d9e2c9786c8b197069aafe6fe8f98fe9f0ee",name:a?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"d931ed4919a017bb4c8a705d5f800cd01d603c30",class:"panel-nav__body",onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,e++,a))))))})()),t("div",{key:"a40dd59e1a02acd5371df4e60de57783bb9bf064",class:"panel-nav__footer"},t("ds-fade",{key:"c819f544dc9a031653a3c5c818e308cc15dfd124",class:"panel-nav__footer-fade",side:"bottom",size:"size-600",background:"var(--_nav-bg)",visible:!this.atBottom}),t("button",{key:"c7ae3cadff848916f2a4311dc665cc9733079c68",type:"button",class:"panel-nav__footer-btn",title:e?"Settings":"Dashboard","aria-label":e?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"6aa8e28c39fbdb8acee516b1a9cee77a61d9dbdb",name:e?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"f21e3b4556c626f7e1ec84cb6ce5f1dd3f7bb453",type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":a?`User: ${n}`:`User menu for ${n}`,onClick:()=>this.handleUserAction()},t("span",{key:"8c04c3a8c99a4156b38dac7d1ac36b02fe5fa5dc",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"e2b82b8ec0654c44888a40e14c5a72d3048550c1",class:"panel-nav__item-label-text"},t("ds-text",{key:"039e63623980bc96fb53fc3c2bd7b576264d8f58",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),t("span",{key:"30426035243845936819c5d4f7ceb35168879d8c",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"a38f7fc0ddf4c201405826235d9d60a77dee7a1d",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"12b30a3ae45d0c06858c1ec7ed1a94bfc1315647",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"f897eb81815c7575836dad1d7e2a66fd232b5ae4",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"51363070b5fc30dbc0a73f2de58c3a8a2ad20c1a",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"994e0a77ab5a4463f692cd1f346f9e4e08058afc",class:"panel-nav__user-initial"},t("ds-text",{key:"6f00da08a7d40608c07ee23c926b8a8b27577ca4",as:"span",variant:"text-caption-emphasis",color:"inherit"},s))))))),!this.viewportNarrow&&t("div",{key:"8a987aa7b95215d2f898e01feff49d7c1555a40a",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return C()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);A.HOST_PROP_SYNC_BUDGET=8;function S(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-fade","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),A)}break;case"ds-badge":if(!customElements.get(s(e))){c()}break;case"ds-fade":if(!customElements.get(s(e))){v()}break;case"ds-icon":if(!customElements.get(s(e))){p()}break;case"ds-text":if(!customElements.get(s(e))){h()}break}}))}S();const D=A;const N=S;export{D as DsPanelNav,N as defineCustomElement};
+import{p as e,H as a,c as n,h as t,a as i,t as s}from"./index.js";import{e as o,r,s as l,a as d}from"./p-DznbYg1m.js";import{d as c}from"./p-B_enucPQ.js";import{d as v}from"./p-vW9EMP8s.js";import{d as p}from"./p-DqBCQRRd.js";import{d as h}from"./p-C9za7IDu.js";const f="data-nav-style";function m(e){if(e==="navigation"||e==="default")return e;return undefined}function u(e,a,n=(typeof document!=="undefined"?document.documentElement.getAttribute(f):null)){return m(a)??m(n)??e}function _(e,a){return e!==a}function b(e,a){return e===a||e.startsWith(`${a}/`)}function g(e,a){if(!e)return"";let n="";let t=0;for(const i of a){if(!i.href)continue;if(b(e,i.href)&&i.href.length>t){n=i.id;t=i.href.length}}return n}function y(e){return e.reduce(((e,a)=>e+a.items.length),0)}function x(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function k(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function w(e,a){return y(e)===0&&y(x(a))>0}const z=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:200px;--_nav-width-collapsed:48px;--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}ds-app-shell[gradient].sc-ds-panel-nav-h,ds-app-shell[gradient] .sc-ds-panel-nav-h{--ds-shell-gradient-opacity:0.1}.panel-nav--default.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui)}.panel-nav.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--ds-shell-gradient-position-panel, 0 0);background-repeat:no-repeat}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-motion-short-2, 100ms ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-fade.sc-ds-panel-nav{--ds-fade-offset:100%}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),     color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav--navigation.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--default.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:10;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-background-bold-brand);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const C=new WeakMap;const I=new WeakMap;const A=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="navigation";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="navigation";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return k(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=x(e);this.syncRovingIndex();this.syncActiveFromUrl()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}async onNavStyleChange(e){if(this.effectiveDisableViewTransition){this.renderedStyle=e;return}C.get(this)?.skipTransition();C.delete(this);const a=document;if(typeof a.startViewTransition!=="function"){this.renderedStyle=e;return}o();const n=r(this.el.querySelector(".panel-nav__footer-btn"));l(n);const t=a.startViewTransition((()=>new Promise((a=>{I.set(this,a);this.renderedStyle=e}))));C.set(this,t);t.finished.finally((()=>{if(C.get(this)===t)C.delete(this);I.delete(this)}));t.ready.then((()=>d(n))).catch((()=>{}))}componentWillLoad(){this.renderedStyle=u(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}componentDidRender(){const e=I.get(this);if(e){I.delete(this);e()}}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;const e=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.isAnimating=false;e?.removeEventListener("transitionend",this.transitionEndHandler)}};e?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=g(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){this.syncRenderedStyleIfNeeded();if(w(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}syncRenderedStyleIfNeeded(){if(!_(this.renderedStyle,this.navStyle))return;if(this.effectiveDisableViewTransition){C.get(this)?.skipTransition();C.delete(this);this.renderedStyle=this.navStyle}else{void this.onNavStyleChange(this.navStyle)}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.dsNavToggle.emit(e);if(this.storageKey){this.collapsed=e;try{localStorage.setItem(this.storageKey,String(e))}catch{}}}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}syncRovingIndex(){const e=this.getAllItems().findIndex((e=>e.id===this.effectiveActiveId));this.rovingIndex=e>=0?e:0}handleItemKeyDown(e,a){const n=this.getAllItems().length;let t;switch(e.key){case"ArrowDown":e.preventDefault();t=(a+1)%n;break;case"ArrowUp":e.preventDefault();t=(a-1+n)%n;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(){this.dsNavUserAction.emit()}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(e,a,n){const i=e.id===this.effectiveActiveId;const s=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const o={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?e.label:undefined,tabIndex:a===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleItemKeyDown(e,a),onFocus:()=>{this.rovingIndex=a}};const r=this.routerMode==="anchor"&&e.href;return r?t("a",{...o,href:e.href},s):t("button",{...o,type:"button"},s)}render(){const e=this.renderedStyle==="navigation";const a=this.collapsed||this.viewportNarrow;const{userName:n,userInitial:s}=this;const o={"panel-nav":true,"panel-nav--navigation":e,"panel-nav--default":!e,"panel-nav--collapsed":a,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"2cfa0a04db72904ea3452a58bcff4ea41c359dc6",style:{display:"block",position:"relative"}},t("nav",{key:"4cfe6abef2f3d1addf08774d48fefe002ffdab7a",class:o,"aria-label":e?"Main navigation":"Settings navigation"},t("div",{key:"76ebd2ff672bf3ce580d0dcf70a378501a1edea5",class:"panel-nav__header"},t("button",{key:"3a7548a767d79f2c5daca0b8b367454fdb91ec43",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":a?"Expand navigation":"Collapse navigation","aria-expanded":a?"false":"true"},t("span",{key:"ef625c8a5cded53a4bc5b30c523eca862d785547",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"dbcb09ab7b4eaa7c1292adc648facd92d1763890",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"24e7a88cbb8ea259d0eaf4743d241c8dc8160bcd",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"d4c546d781816f098b22a88374fb61a5dc3445ae",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"c042e68c62f162a08992c4332f40dfc779dc46fb",name:a?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"d93ebb7b1d8794ddd4fcd88cddc6a795b1350c87",class:"panel-nav__body",onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,e++,a))))))})()),t("div",{key:"b0d0cf43aff6797cb759581726d05918370edec4",class:"panel-nav__footer"},t("ds-fade",{key:"8cc4d2b1d34fc599a1f7a00b79126dc1db30ab7d",class:"panel-nav__footer-fade",side:"bottom",size:"size-600",background:"var(--_nav-bg)",visible:!this.atBottom}),t("button",{key:"ab528eec8a988c716e84a512b3c5abfe50bf32eb",type:"button",class:"panel-nav__footer-btn",title:e?"Settings":"Dashboard","aria-label":e?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"da531ce0cfbc294754d80e44554f85f085a8779a",name:e?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"24cdad9021633fc27efd59fb8c7d0409027d3006",type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":a?`User: ${n}`:`User menu for ${n}`,onClick:()=>this.handleUserAction()},t("span",{key:"5d73fca02c33819045da7d1a210acb325ad21247",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"ba424eeb1a8e003f21c07115188e5707f5c7cbce",class:"panel-nav__item-label-text"},t("ds-text",{key:"fe62fe33e0ad47df46c90f16824c4e999b95096f",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),t("span",{key:"ca11f8b34559252b803ba506516630d10b9cb81e",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"e947753f9612553d0b7f708dacdcf4c73c73c989",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"1df830873d739d757c087769eb4289546611073f",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"31c92397131dc5b879038dcccc7e35323acf3ff3",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"3d03451cb51f6db37d3f74988225fec7ec57f9b6",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"5b4ebcc4e0f8755b4e33c533f975db421d6b62ee",class:"panel-nav__user-initial"},t("ds-text",{key:"1a8018fbd3674845fe09d6314e261c4a27a48697",as:"span",variant:"text-caption-emphasis",color:"inherit"},s))))))),!this.viewportNarrow&&t("div",{key:"61a3793e9885b99a0c4ee1239a4caef0a102b66a",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return z()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);A.HOST_PROP_SYNC_BUDGET=8;function S(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-fade","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),A)}break;case"ds-badge":if(!customElements.get(s(e))){c()}break;case"ds-fade":if(!customElements.get(s(e))){v()}break;case"ds-icon":if(!customElements.get(s(e))){p()}break;case"ds-text":if(!customElements.get(s(e))){h()}break}}))}S();const D=A;const N=S;export{D as DsPanelNav,N as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map