@ds-mo/ui 1.8.0 → 1.9.0

package/dist/.build-stamp

@@ -1 +1 @@
-1782858993080
+1783043299448

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as l,a,t}from"./index.js";import{b as n,c as h,a as i,S as p,d as c,s as o,e as d,f as r,g as f,h as b}from"./p-BucV1U6A.js";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__workspace.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;min-width:0}.app-shell__content.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;overflow:auto}.app-shell__tools.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;display:flex}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const g=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 l=s.style;for(const[s,a]of Object.entries(e)){if(a===null)l.removeProperty(s);else l.setProperty(s,a)}}clearGradientVars(s){const e=[n,h,i,p,c];for(const l of s){for(const s of e)l.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 l=[this.el,s,e].filter((s=>s!==null));if(!this.gradient){this.clearGradientVars(l);return}const a=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:o();const t=this.el.getBoundingClientRect();const _=this.el.querySelector(".app-shell__panel");const g=_?.getBoundingClientRect().width??0;const u=b({width:t.width,height:t.height});const y=f();const m=r(g);const v=d;for(const s of l){if(s===this.el){this.applyGradientVars(s,{[n]:a,[h]:u,[i]:y,[p]:m,[c]:v});continue}const e=s.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(s,{[n]:a,[h]:u,[c]:v,[i]:e?null:y,[p]:e?m:null})}}render(){const s={"app-shell":true,"app-shell--gradient":this.gradient};return l(a,{key:"1b22d064dc46112d99beac7f1d5d5ba432cfe2fb",class:s},l("div",{key:"32d93e02d70eb3b254030a488ed38907d252c039",class:"app-shell__row"},l("div",{key:"f28e0eb26d96425e918e16476e3a54205e1c796a",class:"app-shell__panel"},l("slot",{key:"e81d9a9041d0f16f5f6beddbd2fc11e4e5c5d499",name:"panel"})),l("div",{key:"908eb3060827e3638e620dda1ebeefff9a7745ac",class:"app-shell__main"},l("div",{key:"336fa05f5468cb2b7869a7d7f9cabfea45bddc6c",class:"app-shell__bar"},l("slot",{key:"396bf4ce86669dfe8af339bcc3c11d37a94223fc",name:"bar"})),l("div",{key:"a7241e25add956c450651f98e50577099fd54523",class:"app-shell__workspace"},l("div",{key:"4f67f563cdbc72b8f23e32bc20b3d77e5ee6e29b",class:"app-shell__content"},l("slot",{key:"b1036019165de60174f6d6f73cdbc96bdcc3f987"})),l("div",{key:"815c5ff838f7fc7370ba2f1d5d364e48c78f8cba",class:"app-shell__tools"},l("slot",{key:"0fa5209ede6ea76cbf131f5a1d735039fd577f2d",name:"tools"}))))))}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 u(){if(typeof customElements==="undefined"){return}const s=["ds-app-shell"];s.forEach((s=>{switch(s){case"ds-app-shell":if(!customElements.get(t(s))){customElements.define(t(s),g)}break}}))}u();const y=g;const m=u;export{y as DsAppShell,m as defineCustomElement};
+import{p as e,H as s,h as l,a,t}from"./index.js";const n="--ds-shell-gradient-image";const i="--ds-shell-gradient-size";const h="--ds-shell-gradient-position-panel";const o="--ds-shell-gradient-position-bar";const r="--ds-shell-gradient-opacity";const p="0.1";const c="100% 100% at 0% 0%";function d(){return`radial-gradient(${c}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`}function g(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function f(){return"0 0"}function b(e){return`${-Math.round(e)}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--gradient.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary);--_shell-chrome-grid-cell:var(--dimension-size-050);--_shell-chrome-grid-stroke:var(--dimension-stroke-width-012);--_shell-chrome-grid-line:var(--color-foreground-quaternary);--_shell-chrome-grid-opacity:0.1}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before,.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{z-index:2;opacity:var(--_shell-chrome-grid-opacity);background-image:repeating-linear-gradient(     120deg,     var(--_shell-chrome-grid-line) 0,     var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke),     transparent var(--_shell-chrome-grid-stroke),     transparent var(--_shell-chrome-grid-cell)   )}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:row;position:relative;z-index:1}.app-shell__stack.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}.app-shell__bar.sc-ds-app-shell{flex:0 0 auto}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;overflow:auto}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;display:flex}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const u=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.gradientSrc="";this.resizeObserver=null}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.scheduleChromeSync()}scheduleChromeSync(){this.syncChrome();requestAnimationFrame((()=>this.syncChrome()))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>this.scheduleChromeSync()));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e);this.scheduleChromeSync()}applyGradientVars(e,s){const l=e.style;for(const[e,a]of Object.entries(s)){if(a===null)l.removeProperty(e);else l.setProperty(e,a)}}clearGradientPaintVars(e){const s=[n,i,r];for(const l of e){for(const e of s)l.style.removeProperty(e)}}syncChromeLayoutVars(e,s,l,a){if(e){e.style.setProperty(h,l)}if(s){s.style.setProperty(o,a)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const l=[this.el,e,s].filter((e=>e!==null));const a=this.el.getBoundingClientRect();const t=this.el.querySelector(".app-shell__panel");const c=t?.getBoundingClientRect().width??0;const _=f();const u=b(c);this.syncChromeLayoutVars(e,s,_,u);if(!this.gradient){this.clearGradientPaintVars(l);return}const m=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:d();const v=g({width:a.width,height:a.height});const y=p;for(const e of l){if(e===this.el){this.applyGradientVars(e,{[n]:m,[i]:v,[h]:_,[o]:u,[r]:y});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[n]:m,[i]:v,[r]:y,[h]:s?null:_,[o]:s?u:null})}}render(){const e={"app-shell":true,"app-shell--gradient":this.gradient,[`app-shell--${this.navStyle}`]:true};return l(a,{key:"53dc309bad5adeb6bc2d1dd7c759a5279ad9cd63",class:e},l("div",{key:"eacaf3329b0859c88f2a71268338c28d78351310",class:"app-shell__row"},this.gradient?l("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,l("div",{key:"dfed3190f0e3e25fa5786175f231e4b8f55c757a",class:"app-shell__panel"},l("slot",{key:"5fd476333a7aa2e803cbe8d9931c0efdd95d93be",name:"panel"})),l("div",{key:"d9005c006d7260239481da1f02496a6e2ae5a554",class:"app-shell__main"},l("div",{key:"5b73f58e4c113fea40ebe8aa32784fac1f6ad250",class:"app-shell__stack"},l("div",{key:"18a73c2555eb91c8a5e2c1a0cc1287f806b461b2",class:"app-shell__bar"},l("slot",{key:"6a02f6375b1753801585746fcc3046826a42ab8f",name:"bar"})),l("div",{key:"0975d9fb5e888363cae0de60f08afd282ba0578e",class:"app-shell__content"},l("slot",{key:"9be67e171b1bb0e4af2ab0101045ae6909fd4614"}))),l("div",{key:"4bcccb9998ce9308181b7916df0290c36a3e2d26",class:"app-shell__tools"},l("slot",{key:"1464f24ea3b2c0484d2ae12e82ecdcd45e929feb",name:"tools"})))))}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 e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(t(e))){customElements.define(t(e),u)}break}}))}m();const v=u;const y=m;export{v as DsAppShell,y as defineCustomElement};
 //# sourceMappingURL=ds-app-shell.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["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","SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","key","panel","bar","setAttribute","filter","image","trim","shellGradientImageForStyle","shellRect","getBoundingClientRect","panelWidth","width","size","shellGradientSize","height","panelPosition","shellGradientPositionPanel","barPosition","shellGradientPositionBar","opacity","SHELL_GRADIENT_OPACITY","isBar","tagName","toLowerCase","render","shellCls","h","Host","class"],"sources":["src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":[":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__workspace {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  min-width: 0;\n}\n\n.app-shell__content {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.app-shell__tools {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n}\n\n.app-shell__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n  SHELL_GRADIENT_IMAGE_VAR,\n  SHELL_GRADIENT_OPACITY,\n  SHELL_GRADIENT_OPACITY_VAR,\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n  SHELL_GRADIENT_SIZE_VAR,\n  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__workspace\">\n              <div class=\"app-shell__content\">\n                <slot />\n              </div>\n              <div class=\"app-shell__tools\">\n                <slot name=\"tools\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oJAAA,MAAMA,EAAc,IAAM,wqC,MCoBbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAOmDC,KAAAC,SAA2B,aAGnDD,KAAAE,SAAoB,MAMrCF,KAAAG,YAAsB,GAItBH,KAAAI,eAAwC,IAqJjD,CAnJC,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,CACXC,EACAC,EACAC,EACAC,EACAC,GAEF,IAAK,MAAMhB,KAAUU,EAAS,CAC5B,IAAK,MAAMO,KAAON,EAAMX,EAAOE,MAAMK,eAAeU,E,EAIhD,mBAAAhC,GACN,MAAMiC,EAAQvC,KAAKgB,GAAGE,cAAc,gBACpC,MAAMsB,EAAMxC,KAAKgB,GAAGE,cAAc,cAClC,GAAIqB,EAAO,CACTA,EAAME,aAAa,YAAazC,KAAKC,UACrCsC,EAAMtC,SAAWD,KAAKC,Q,CAExB,GAAIuC,EAAK,CACPA,EAAIC,aAAa,YAAazC,KAAKC,UACnCuC,EAAIvC,SAAWD,KAAKC,Q,EAIhB,kBAAAQ,GACN,MAAM8B,EAAQvC,KAAKgB,GAAGE,cAAc,gBACpC,MAAMsB,EAAMxC,KAAKgB,GAAGE,cAAc,cAClC,MAAMa,EAAU,CAAC/B,KAAKgB,GAAIuB,EAAOC,GAAKE,QAAQ1B,GAA0BA,IAAO,OAE/E,IAAKhB,KAAKE,SAAU,CAClBF,KAAK8B,kBAAkBC,GACvB,M,CAGF,MAAMY,EAAQ3C,KAAKG,YAAYyC,OAC3B,OAAO5C,KAAKG,YAAYyC,UACxBC,IAEJ,MAAMC,EAAY9C,KAAKgB,GAAG+B,wBAC1B,MAAM9B,EAAYjB,KAAKgB,GAAGE,cAAc,qBACxC,MAAM8B,EAAa/B,GAAW8B,wBAAwBE,OAAS,EAE/D,MAAMC,EAAOC,EAAkB,CAC7BF,MAAOH,EAAUG,MACjBG,OAAQN,EAAUM,SAGpB,MAAMC,EAAgBC,IACtB,MAAMC,EAAcC,EAAyBR,GAC7C,MAAMS,EAAUC,EAEhB,IAAK,MAAMrC,KAAUU,EAAS,CAC5B,GAAIV,IAAWrB,KAAKgB,GAAI,CACtBhB,KAAKoB,kBAAkBC,EAAQ,CAC7BY,CAACA,GAA2BU,EAC5BT,CAACA,GAA0BgB,EAC3Bf,CAACA,GAAoCkB,EACrCjB,CAACA,GAAkCmB,EACnClB,CAACA,GAA6BoB,IAEhC,Q,CAGF,MAAME,EAAQtC,EAAOuC,QAAQC,gBAAkB,aAC/C7D,KAAKoB,kBAAkBC,EAAQ,CAC7BY,CAACA,GAA2BU,EAC5BT,CAACA,GAA0BgB,EAC3Bb,CAACA,GAA6BoB,EAC9BtB,CAACA,GAAoCwB,EAAQ,KAAON,EACpDjB,CAACA,GAAkCuB,EAAQJ,EAAc,M,EAK/D,MAAAO,GACE,MAAMC,EAAoC,CACxC,YAAa,KACb,sBAAuB/D,KAAKE,UAG9B,OACE8D,EAACC,EAAI,CAAA3B,IAAA,2CAAC4B,MAAOH,GACXC,EAAA,OAAA1B,IAAA,2CAAK4B,MAAM,kBACTF,EAAA,OAAA1B,IAAA,2CAAK4B,MAAM,oBACTF,EAAA,QAAA1B,IAAA,2CAAMd,KAAK,WAEbwC,EAAA,OAAA1B,IAAA,2CAAK4B,MAAM,mBACTF,EAAA,OAAA1B,IAAA,2CAAK4B,MAAM,kBACTF,EAAA,QAAA1B,IAAA,2CAAMd,KAAK,SAEbwC,EAAA,OAAA1B,IAAA,2CAAK4B,MAAM,wBACTF,EAAA,OAAA1B,IAAA,2CAAK4B,MAAM,sBACTF,EAAA,QAAA1B,IAAA,8CAEF0B,EAAA,OAAA1B,IAAA,2CAAK4B,MAAM,oBACTF,EAAA,QAAA1B,IAAA,2CAAMd,KAAK,c","ignoreList":[]}
+{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","SHELL_GRADIENT_OPACITY","GRADIENT_GEOMETRY","buildShellRadialGradient","shellGradientSize","layout","Math","round","width","height","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradient","gradientSrc","resizeObserver","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","scheduleChromeSync","syncChrome","requestAnimationFrame","disconnectedCallback","disconnect","onShellPropsChange","panel","el","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","applyGradientVars","target","vars","style","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","key","syncChromeLayoutVars","panelPosition","barPosition","filter","shellRect","getBoundingClientRect","image","trim","size","opacity","isBar","tagName","toLowerCase","render","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-gradient.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark blue intent).\n */\nexport function buildShellRadialGradient(): string {\n  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImage(): string {\n  return buildShellRadialGradient();\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\nexport function shellGradientSize(layout: ShellGradientLayout): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n",":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.app-shell {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  font-family: var(--typography-font-family, system-ui);\n}\n\n:host(.app-shell--gradient) {\n  --_shell-chrome-bg: var(--color-background-secondary);\n  --_shell-chrome-grid-cell: var(--dimension-size-050);\n  --_shell-chrome-grid-stroke: var(--dimension-stroke-width-012);\n  --_shell-chrome-grid-line: var(--color-foreground-quaternary);\n  --_shell-chrome-grid-opacity: 0.1;\n}\n\n.app-shell__row {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash + grid use background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase.\n */\n.app-shell__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome {\n  background-color: var(--_shell-chrome-bg);\n}\n\n/* Layer stack (bottom → top): bg → wash (::before) → grid (::after) */\n:host(.app-shell--gradient) .app-shell__chrome::before,\n:host(.app-shell--gradient) .app-shell__chrome::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome::before {\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome::after {\n  z-index: 2;\n  opacity: var(--_shell-chrome-grid-opacity);\n  background-image: repeating-linear-gradient(\n    120deg,\n    var(--_shell-chrome-grid-line) 0,\n    var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke),\n    transparent var(--_shell-chrome-grid-stroke),\n    transparent var(--_shell-chrome-grid-cell)\n  );\n}\n\n.app-shell__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.app-shell__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.app-shell__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  z-index: 1;\n}\n\n.app-shell__stack {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.app-shell__bar {\n  flex: 0 0 auto;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.app-shell__content {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n:host(.app-shell--gradient) .app-shell__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.app-shell__tools {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n}\n\n.app-shell__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n  SHELL_GRADIENT_IMAGE_VAR,\n  SHELL_GRADIENT_OPACITY,\n  SHELL_GRADIENT_OPACITY_VAR,\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n  SHELL_GRADIENT_SIZE_VAR,\n  buildShellRadialGradient,\n  shellGradientPositionBar,\n  shellGradientPositionPanel,\n  shellGradientSize,\n} from '../../nav/shell-gradient';\n\n@Component({\n  tag: 'ds-app-shell',\n  styleUrl: 'AppShell.css',\n  scoped: true,\n})\nexport class AppShell {\n  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /** When `true`, paints the shared chrome surface (bg + wash + grid) behind panel, bar, and tools. */\n  @Prop({ reflect: true }) gradient: boolean = false;\n\n  /**\n   * Optional custom gradient for `background-image` (e.g. SVG URL).\n   * When set, overrides the built-in radial wash.\n   */\n  @Prop() gradientSrc: string = '';\n\n  @Element() el!: HTMLElement;\n\n  private resizeObserver: ResizeObserver | null = null;\n\n  componentDidLoad() {\n    this.syncSlottedNavStyle();\n    this.connectMetricsObserver();\n    this.scheduleChromeSync();\n  }\n\n  private scheduleChromeSync() {\n    this.syncChrome();\n    requestAnimationFrame(() => this.syncChrome());\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  @Watch('navStyle')\n  @Watch('gradient')\n  @Watch('gradientSrc')\n  onShellPropsChange() {\n    this.syncSlottedNavStyle();\n    this.scheduleChromeSync();\n  }\n\n  private syncSlottedNavStyle() {\n    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    if (panel) {\n      panel.setAttribute('nav-style', this.navStyle);\n      panel.navStyle = this.navStyle;\n    }\n    if (bar) {\n      bar.setAttribute('nav-style', this.navStyle);\n      bar.navStyle = this.navStyle;\n    }\n  }\n\n  private connectMetricsObserver() {\n    this.resizeObserver = new ResizeObserver(() => this.scheduleChromeSync());\n    this.resizeObserver.observe(this.el);\n    const panelWrap = this.el.querySelector('.app-shell__panel');\n    if (panelWrap) this.resizeObserver.observe(panelWrap);\n    this.scheduleChromeSync();\n  }\n\n  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n    const style = target.style;\n    for (const [name, value] of Object.entries(vars)) {\n      if (value === null) style.removeProperty(name);\n      else style.setProperty(name, value);\n    }\n  }\n\n  private clearGradientPaintVars(targets: HTMLElement[]) {\n    const keys = [\n      SHELL_GRADIENT_IMAGE_VAR,\n      SHELL_GRADIENT_SIZE_VAR,\n      SHELL_GRADIENT_OPACITY_VAR,\n    ];\n    for (const target of targets) {\n      for (const key of keys) target.style.removeProperty(key);\n    }\n  }\n\n  /** Panel/bar wash offsets for scroll fades and badge rings. */\n  private syncChromeLayoutVars(\n    panel: HTMLElement | null,\n    bar: HTMLElement | null,\n    panelPosition: string,\n    barPosition: string,\n  ) {\n    if (panel) {\n      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n    }\n    if (bar) {\n      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n    }\n  }\n\n  private syncChrome() {\n    const panel = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n    const targets = [this.el, panel, bar].filter((el): el is HTMLElement => el !== null);\n\n    const shellRect = this.el.getBoundingClientRect();\n    const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;\n    const panelWidth = panelWrap?.getBoundingClientRect().width ?? 0;\n\n    const panelPosition = shellGradientPositionPanel();\n    const barPosition = shellGradientPositionBar(panelWidth);\n\n    this.syncChromeLayoutVars(panel, bar, panelPosition, barPosition);\n\n    if (!this.gradient) {\n      this.clearGradientPaintVars(targets);\n      return;\n    }\n\n    const image = this.gradientSrc.trim()\n      ? `url(${this.gradientSrc.trim()})`\n      : buildShellRadialGradient();\n\n    const size = shellGradientSize({\n      width: shellRect.width,\n      height: shellRect.height,\n      panelWidth,\n    });\n    const opacity = SHELL_GRADIENT_OPACITY;\n\n    for (const target of targets) {\n      if (target === this.el) {\n        this.applyGradientVars(target, {\n          [SHELL_GRADIENT_IMAGE_VAR]: image,\n          [SHELL_GRADIENT_SIZE_VAR]: size,\n          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n          [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        });\n        continue;\n      }\n\n      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n      this.applyGradientVars(target, {\n        [SHELL_GRADIENT_IMAGE_VAR]: image,\n        [SHELL_GRADIENT_SIZE_VAR]: size,\n        [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n      });\n    }\n  }\n\n  render() {\n    const shellCls: Record<string, boolean> = {\n      'app-shell': true,\n      'app-shell--gradient': this.gradient,\n      [`app-shell--${this.navStyle}`]: true,\n    };\n\n    return (\n      <Host class={shellCls}>\n        <div class=\"app-shell__row\">\n          {this.gradient ? <div class=\"app-shell__chrome\" aria-hidden=\"true\" /> : null}\n          <div class=\"app-shell__panel\">\n            <slot name=\"panel\" />\n          </div>\n          <div class=\"app-shell__main\">\n            <div class=\"app-shell__stack\">\n              <div class=\"app-shell__bar\">\n                <slot name=\"bar\" />\n              </div>\n              <div class=\"app-shell__content\">\n                <slot />\n              </div>\n            </div>\n            <div class=\"app-shell__tools\">\n              <slot name=\"tools\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-badge.js

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-CX7-_qOW.js";const t=o;const p=s;export{t as DsBadge,p as defineCustomElement};
+import{B as o,d as s}from"./p-CiEc8Nwx.js";const t=o;const c=s;export{t as DsBadge,c as defineCustomElement};
 //# sourceMappingURL=ds-badge.js.map

package/dist/components/ds-banner.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as n,h as t,a as i,t as r}from"./index.js";import{r as a}from"./p-BvmooLHV.js";import{T as o}from"./p-BRju0sEC.js";const d=()=>`.banner-surface.sc-ds-banner{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--dimension-radius-075)}.banner-header-surface.sc-ds-banner{width:100%;height:var(--dimension-space-100);flex-shrink:0;overflow:hidden;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.banner-header.sc-ds-banner{width:100%;height:100%;background:repeating-linear-gradient(     -45deg,     var(--banner-content),     var(--banner-content) var(--dimension-size-100),     transparent var(--dimension-size-100),     transparent var(--dimension-size-200)   )}.banner-body.sc-ds-banner{padding:var(--dimension-space-075);min-height:var(--dimension-size-400);display:flex;align-items:flex-start;gap:var(--dimension-space-075)}.banner-message.sc-ds-banner{color:var(--banner-content);line-height:var(--typography-lineheight-md);display:block;flex:1;min-width:0}.banner-dismiss.sc-ds-banner{background:none;border:none;margin:0;padding:var(--dimension-space-025);color:var(--banner-content);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--dimension-radius-050);position:relative;font-size:18px;line-height:1}.banner-dismiss.sc-ds-banner::before{content:'';position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));pointer-events:none}.banner-dismiss.sc-ds-banner:hover::before{background-color:var(--color-interaction-hover)}.banner-dismiss.sc-ds-banner:active::before{background-color:var(--color-interaction-pressed)}.banner-dismiss.sc-ds-banner:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.floating-position.sc-ds-banner{position:fixed;top:var(--dimension-space-200);left:50%;transform:translateX(-50%);pointer-events:none}.floating-toast.sc-ds-banner{pointer-events:auto;animation:bannerFadeIn var(--effect-motion-short-2, 150ms) forwards}.floating-toast--closing.sc-ds-banner{animation:bannerFadeOut var(--effect-motion-short-3, 200ms) forwards}@keyframes bannerFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes bannerFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsDismiss=n(this,"dsDismiss");this.intent="neutral";this.contrast="medium";this.message="";this.header=false;this.floating=false;this.showDismiss=false;this.dismissLabel="Dismiss";this.closing=false;this.dismissTimer=null;this.closeTimer=null}get fadeOutMs(){return a(o.motionShort3,o.animationDurationShort3)}get autoDismissMs(){return a(o.animationDelayLong2,o.animationDelayLong2)}componentDidLoad(){if(this.floating&&this.message)this.scheduleDismiss()}onMessageChange(e){if(this.floating&&e){this.closing=false;this.scheduleDismiss()}}disconnectedCallback(){this.clearTimers()}clearTimers(){if(this.dismissTimer){clearTimeout(this.dismissTimer);this.dismissTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}scheduleDismiss(){this.clearTimers();this.dismissTimer=setTimeout((()=>{this.dismissTimer=null;this.beginClose()}),this.autoDismissMs)}beginClose(){this.clearTimers();if(this.floating){this.closing=true;this.closeTimer=setTimeout((()=>{this.closing=false;this.closeTimer=null;this.dsDismiss.emit()}),this.fadeOutMs)}else{this.dsDismiss.emit()}}getContentColor(){if(this.contrast==="bold")return"var(--color-foreground-on-bold-background-primary)";const e=this.contrast==="faint"?"bold":this.contrast==="medium"?"strong":"medium";return`var(--color-foreground-${e}-${this.intent})`}getBg(){return`var(--color-background-${this.contrast}-${this.intent})`}getElevation(){return this.floating?"var(--effect-elevation-elevated-floating)":"var(--effect-elevation-elevated-sm)"}render(){const e=this.getContentColor();const s=this.intent==="negative";const n=t("div",{class:{"banner-wrapper":true},style:{"--banner-content":e},role:s?"alert":"status","aria-live":s?undefined:"polite"},t("div",{class:"banner-surface",style:{backgroundColor:this.getBg(),boxShadow:this.getElevation()}},this.header&&t("div",{class:"banner-header-surface"},t("div",{class:"banner-header"})),t("div",{class:"banner-body"},t("span",{class:"text-body-medium banner-message"},this.message),this.showDismiss&&t("button",{type:"button",class:"banner-dismiss",onClick:()=>this.beginClose(),"aria-label":this.dismissLabel},"×"))));if(this.floating){return t(i,{style:{display:"contents"}},t("div",{class:"floating-position",style:{zIndex:"9998"}},t("div",{class:{"floating-toast":true,"floating-toast--closing":this.closing}},n)))}return t(i,{style:{display:"contents"}},n)}static get watchers(){return{message:[{onMessageChange:0}]}}static get style(){return d()}},[2,"ds-banner",{intent:[1],contrast:[1],message:[1],header:[4],floating:[4],showDismiss:[4,"show-dismiss"],dismissLabel:[1,"dismiss-label"],closing:[32]},undefined,{message:[{onMessageChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-banner"];e.forEach((e=>{switch(e){case"ds-banner":if(!customElements.get(r(e))){customElements.define(r(e),l)}break}}))}c();const h=l;const m=c;export{h as DsBanner,m as defineCustomElement};
+import{p as e,H as s,c as n,h as t,a as i,t as r}from"./index.js";import{r as a}from"./p-C1cBr-Ri.js";import{T as o}from"./p-BRju0sEC.js";const d=()=>`.banner-surface.sc-ds-banner{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--dimension-radius-075)}.banner-header-surface.sc-ds-banner{width:100%;height:var(--dimension-space-100);flex-shrink:0;overflow:hidden;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.banner-header.sc-ds-banner{width:100%;height:100%;background:repeating-linear-gradient(     -45deg,     var(--banner-content),     var(--banner-content) var(--dimension-size-100),     transparent var(--dimension-size-100),     transparent var(--dimension-size-200)   )}.banner-body.sc-ds-banner{padding:var(--dimension-space-075);min-height:var(--dimension-size-400);display:flex;align-items:flex-start;gap:var(--dimension-space-075)}.banner-message.sc-ds-banner{color:var(--banner-content);line-height:var(--typography-lineheight-md);display:block;flex:1;min-width:0}.banner-dismiss.sc-ds-banner{background:none;border:none;margin:0;padding:var(--dimension-space-025);color:var(--banner-content);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--dimension-radius-050);position:relative;font-size:18px;line-height:1}.banner-dismiss.sc-ds-banner::before{content:'';position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));pointer-events:none}.banner-dismiss.sc-ds-banner:hover::before{background-color:var(--color-interaction-hover)}.banner-dismiss.sc-ds-banner:active::before{background-color:var(--color-interaction-pressed)}.banner-dismiss.sc-ds-banner:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.floating-position.sc-ds-banner{position:fixed;top:var(--dimension-space-200);left:50%;transform:translateX(-50%);pointer-events:none}.floating-toast.sc-ds-banner{pointer-events:auto;animation:bannerFadeIn var(--effect-motion-short-2, 150ms) forwards}.floating-toast--closing.sc-ds-banner{animation:bannerFadeOut var(--effect-motion-short-3, 200ms) forwards}@keyframes bannerFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes bannerFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsDismiss=n(this,"dsDismiss");this.intent="neutral";this.contrast="medium";this.message="";this.header=false;this.floating=false;this.showDismiss=false;this.dismissLabel="Dismiss";this.closing=false;this.dismissTimer=null;this.closeTimer=null}get fadeOutMs(){return a(o.motionShort3,o.animationDurationShort3)}get autoDismissMs(){return a(o.animationDelayLong2,o.animationDelayLong2)}componentDidLoad(){if(this.floating&&this.message)this.scheduleDismiss()}onMessageChange(e){if(this.floating&&e){this.closing=false;this.scheduleDismiss()}}disconnectedCallback(){this.clearTimers()}clearTimers(){if(this.dismissTimer){clearTimeout(this.dismissTimer);this.dismissTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}scheduleDismiss(){this.clearTimers();this.dismissTimer=setTimeout((()=>{this.dismissTimer=null;this.beginClose()}),this.autoDismissMs)}beginClose(){this.clearTimers();if(this.floating){this.closing=true;this.closeTimer=setTimeout((()=>{this.closing=false;this.closeTimer=null;this.dsDismiss.emit()}),this.fadeOutMs)}else{this.dsDismiss.emit()}}getContentColor(){if(this.contrast==="bold")return"var(--color-foreground-on-bold-background-primary)";const e=this.contrast==="faint"?"bold":this.contrast==="medium"?"strong":"medium";return`var(--color-foreground-${e}-${this.intent})`}getBg(){return`var(--color-background-${this.contrast}-${this.intent})`}getElevation(){return this.floating?"var(--effect-elevation-elevated-floating)":"var(--effect-elevation-elevated-sm)"}render(){const e=this.getContentColor();const s=this.intent==="negative";const n=t("div",{class:{"banner-wrapper":true},style:{"--banner-content":e},role:s?"alert":"status","aria-live":s?undefined:"polite"},t("div",{class:"banner-surface",style:{backgroundColor:this.getBg(),boxShadow:this.getElevation()}},this.header&&t("div",{class:"banner-header-surface"},t("div",{class:"banner-header"})),t("div",{class:"banner-body"},t("span",{class:"text-body-medium banner-message"},this.message),this.showDismiss&&t("button",{type:"button",class:"banner-dismiss",onClick:()=>this.beginClose(),"aria-label":this.dismissLabel},"×"))));if(this.floating){return t(i,{style:{display:"contents"}},t("div",{class:"floating-position",style:{zIndex:"9998"}},t("div",{class:{"floating-toast":true,"floating-toast--closing":this.closing}},n)))}return t(i,{style:{display:"contents"}},n)}static get watchers(){return{message:[{onMessageChange:0}]}}static get style(){return d()}},[2,"ds-banner",{intent:[1],contrast:[1],message:[1],header:[4],floating:[4],showDismiss:[4,"show-dismiss"],dismissLabel:[1,"dismiss-label"],closing:[32]},undefined,{message:[{onMessageChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-banner"];e.forEach((e=>{switch(e){case"ds-banner":if(!customElements.get(r(e))){customElements.define(r(e),l)}break}}))}c();const h=l;const m=c;export{h as DsBanner,m as defineCustomElement};
 //# sourceMappingURL=ds-banner.js.map

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

@@ -1,2 +1,2 @@
-import{B as s,d as o}from"./p-DrvpsLK6.js";const p=s;const r=o;export{p as DsBarNavAction,r as defineCustomElement};
+import{B as o,d as s}from"./p-CCZFMcLe.js";const t=o;const c=s;export{t as DsBarNavAction,c as defineCustomElement};
 //# sourceMappingURL=ds-bar-nav-action.js.map

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

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as a,h as s,a as i,t as n}from"./index.js";import{S as r}from"./p-B8VZmH43.js";import{g as o,i as h}from"./p-BQq26pt9.js";import{d}from"./p-CX7-_qOW.js";import{d as b}from"./p-DrvpsLK6.js";import{d as c}from"./p-DqBCQRRd.js";import{d as l}from"./p-C4VSrrAB.js";import{d as v}from"./p-DZDXwEMg.js";function u(t,e,a){if(!t||!e){return{value:"",hideTabs:false}}if(t!==e&&!t.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=t.slice(e.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=o(a);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const r=n.find((t=>t.id===i));if(r){return{value:r.id,hideTabs:false}}return{value:"",hideTabs:true}}function f(t,e,a,s,i,n){const r=a?g(a,[]):e??[];const o=n?g(n,[]):i??[];return t.length===0&&r.length>0||s.length===0&&o.length>0}function g(t,e){if(Array.isArray(t))return t;if(typeof t==="string"&&t!==""){try{const a=JSON.parse(t);return Array.isArray(a)?a:e}catch{return e}}return e}function p(t,e){if(!t)return null;const a=t.shadowRoot??t;return a.querySelector(e)}function m(t){return p(t,'[role="tablist"]')}function _(t,e){const a=[];let s=[];for(const i of t){if(h(i)){if(s.length>0){a.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===e,isInactive:i.disabled})}if(s.length>0){a.push({items:s})}return a}function y(t,e){const a=o(t);return a.find((t=>t.id===e))??a[0]}function k(t,e){return y(t,e)?.label??"Tabs"}function w(t,e,a,s=2){const i=t-e;if(a){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);-webkit-user-select:none;user-select:none;transition:background-color var(--effect-motion-short-3),     border-color var(--effect-motion-short-3),     color var(--effect-motion-short-3)}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;-webkit-user-select:none;user-select:none}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const C=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsTabChange=a(this,"dsTabChange");this.dsActionChange=a(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;this.committedSection="";this.pendingSection=""}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}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(t){if(this.menuEl){this.menuEl.open=t}}onTabsCollapsedChange(t,e){if(!t){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(t){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(t||e===undefined||e===t)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(f(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=t.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(a)}};queueMicrotask(a)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(t=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(t||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const t=this.triggerLabelTextEl;if(!t||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const e=t.scrollWidth>t.clientWidth+1;if(e!==this.triggerLabelTruncated){this.triggerLabelTruncated=e}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const t=getComputedStyle(this.headerEl);const e=parseFloat(t.columnGap||t.gap||"0")||0;const a=this.headerEl.querySelector(".bar-nav__actions");const s=a?.offsetWidth??0;const i=(parseFloat(t.paddingLeft)||0)+(parseFloat(t.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:a?e:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const t=m(this.probeTabGroupEl);return t?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=t.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const t=this.getTabsIntrinsicWidth();if(t===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=w(t,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(t){const e=t.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}incomingTabs(){return this.tabsJson?g(this.tabsJson,[]):this.tabs??[]}incomingActions(){return this.actionsJson?g(this.actionsJson,[]):this.actions??[]}applyHostProps(){const t=this.basePath;const e=t!==""&&this.committedSection!==""&&t!==this.committedSection;if(e){this.urlDerivedValue="";this.committedSection="";this.pendingSection=t;this.resolvedTabs=[];this.resolvedActions=this.incomingActions();return}if(this.pendingSection){if(!t||t!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const e=this.incomingTabs();if(e.length===0){return}this.pendingSection=""}this.resolvedTabs=this.incomingTabs();this.resolvedActions=this.incomingActions();this.syncValueFromUrl();this.committedSection=t;this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){const t=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:e,hideTabs:a}=u(this.currentUrl,this.basePath,t);this.urlDerivedValue=e;this.hideTabsForDetailRoute=a}selectTab(t){this.value=t;this.dsTabChange.emit(t)}focusVisibleSelectedTab(){const t=p(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);t?.focus({preventScroll:true})}handleTabChange(t){this.selectTab(t.detail)}handleActionChange(t,e){const a=e.detail;this.dsActionChange.emit({id:t,selected:a})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(t){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(t.key==="ArrowDown"||t.key==="ArrowUp"||t.key==="Enter"||t.key===" "){t.preventDefault();this.toggleTabMenu()}return}if(t.key==="Escape"){t.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}get tabSurface(){return this.navStyle==="navigation"?"navigation":undefined}render(){const t=this.basePath!==""&&this.committedSection===this.basePath;const e=t&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const a=this.tabSurface;const n=this.basePath||"no-section";return s(i,{key:"36abc46ef7e5a72a0651d74e81a70dde3c1c3999"},s("header",{key:"2c95c4f4c9fd8b176c3c50f230fb368bb7ebe085",class:{"bar-nav":true,"bar-nav--navigation":this.navStyle==="navigation","bar-nav--default":this.navStyle==="default","bar-nav--tabs-collapsed":e&&this.tabsCollapsed},style:{viewTransitionName:r},ref:t=>{this.headerEl=t;if(t&&!this.resizeObserver){this.setupOverflowObserver()}}},e&&s("div",{key:"f952c70775f249b190e5a46fd0675f19131b154d",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:`probe-${n}`,ref:t=>{this.probeTabGroupEl=t??null;if(t){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue,background:a})),e&&!this.tabsCollapsed&&s("div",{key:"58c8f4aba9611114751618d94d9c06024f7194a4",class:"bar-nav__left"},s("ds-tab-group-nav",{key:`visible-${n}`,class:"bar-nav__tabs-visible",ref:t=>{this.visibleTabGroupEl=t??null},tabs:this.resolvedTabs,value:this.effectiveValue,background:a,onDsChange:t=>this.handleTabChange(t)})),!e&&this.heading&&s("span",{key:"da5e245ddc914d4b9c3f0cba14f5058c5890d853",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),e&&this.tabsCollapsed&&s("button",{key:"980d3f08b6308e208ad25af50fd19350a8078545",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:t=>{this.triggerEl=t},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:t=>this.handleTriggerKeyDown(t)},s("span",{key:"ed67079852f04254d2c0d2d3ebb9d42bc47a2372",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:"11688242e3c5e7b9527ce6d9ead8fbff6b3ae9e5",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:t=>{const e=t??null;if(e===this.triggerLabelTextEl)return;this.triggerLabelTextEl=e;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"09777c746acd709ae35dc571487fd99960389fa9",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"81d34b4edcbba1aa5617d07cf67420bed2474588",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),e&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"765f77b56ded51bb6cef5bb59401c92f8f47b7b2",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"38524868ac769e4c7d4fd60829c44bbc109ca99c",class:"bar-nav__actions"},this.resolvedActions.map((t=>s("ds-bar-nav-action",{key:t.id,icon:t.icon,selected:t.selected??false,dot:t.dot??false,inactive:t.inactive,"aria-label":t.ariaLabel??t.id,background:a,onDsChange:e=>this.handleActionChange(t.id,e)}))))),e&&this.tabsCollapsed&&s("ds-menu",{key:"14b2fd27dd66195ae469fe98ff94b4d2ac85e3f6",ref:t=>{this.menuEl=t??null},open:this.menuOpen,sections:_(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:t=>this.handleMenuSelect(t),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],actions:[{onHostPropsChange:0}],actionsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return 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],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],actions:[{onHostPropsChange:0}],actionsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function T(){if(typeof customElements==="undefined"){return}const t=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];t.forEach((t=>{switch(t){case"ds-bar-nav":if(!customElements.get(n(t))){customElements.define(n(t),C)}break;case"ds-badge":if(!customElements.get(n(t))){d()}break;case"ds-bar-nav-action":if(!customElements.get(n(t))){b()}break;case"ds-icon":if(!customElements.get(n(t))){c()}break;case"ds-menu":if(!customElements.get(n(t))){l()}break;case"ds-tab-group-nav":if(!customElements.get(n(t))){v()}break}}))}T();const z=C;const S=T;export{z as DsBarNav,S as defineCustomElement};
+import{p as t,H as a,c as s,h as e,a as i,t as n}from"./index.js";import{s as r,p as o,d as h}from"./p-Dl1GvZQ2.js";import{g as d,i as b}from"./p-BQq26pt9.js";import{d as c}from"./p-CiEc8Nwx.js";import{d as l}from"./p-CCZFMcLe.js";import{d as v}from"./p-DqBCQRRd.js";import{d as f}from"./p-CuuuDjJJ.js";import{d as u}from"./p-DlsexsFg.js";function g(t,a){if(!t)return null;const s=t.shadowRoot??t;return s.querySelector(a)}function p(t){return g(t,'[role="tablist"]')}function m(t,a){const s=[];let e=[];for(const i of t){if(b(i)){if(e.length>0){s.push({items:e});e=[]}continue}e.push({label:i.label,value:i.id,isSelected:i.id===a,isInactive:i.disabled})}if(e.length>0){s.push({items:e})}return s}function _(t,a){const s=d(t);return s.find((t=>t.id===a))??s[0]}function y(t,a){return _(t,a)?.label??"Tabs"}function k(t,a,s,e=2){const i=t-a;if(s){return i>-e}return i>e}const w=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;transition:background-color var(--effect-motion-short-3),     border-color var(--effect-motion-short-3),     color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[gradient] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_bar-nav-fg-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--_bar-nav-hover);--_pressed-bg:var(--_bar-nav-pressed);--_dot:var(--_bar-nav-dot);--_dot-ring:var(--_bar-nav-bg)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--dimension-size-400)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--dimension-size-400)),     transparent 100%   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const x=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.dsTabChange=s(this,"dsTabChange");this.dsActionChange=s(this,"dsActionChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0;this.committedSection="";this.pendingSection=""}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return y(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!_(this.resolvedTabs,this.effectiveValue)?.dot}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(t){if(this.menuEl){this.menuEl.open=t}}onTabsCollapsedChange(t,a){if(!t){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(t){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(t||a===undefined||a===t)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(r(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let a=t.HOST_PROP_SYNC_BUDGET;const s=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(s)}};queueMicrotask(s)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(t=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(t||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const t=this.triggerLabelTextEl;if(!t||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const a=t.scrollWidth>t.clientWidth+1;if(a!==this.triggerLabelTruncated){this.triggerLabelTruncated=a}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const t=getComputedStyle(this.headerEl);const a=parseFloat(t.columnGap||t.gap||"0")||0;const s=this.headerEl.querySelector(".bar-nav__actions");const e=s?.offsetWidth??0;const i=(parseFloat(t.paddingLeft)||0)+(parseFloat(t.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:s?a:0;const r=this.headerEl.clientWidth-i-e-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const t=p(this.probeTabGroupEl);return t?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=t.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const t=this.getTabsIntrinsicWidth();if(t===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const a=k(t,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(a!==this.tabsCollapsed){this.tabsCollapsed=a;if(!a){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(t){const a=t.detail;if(a?.value!==undefined){this.selectTab(String(a.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}incomingTabs(){return this.tabsJson?o(this.tabsJson,[]):this.tabs??[]}incomingActions(){return this.actionsJson?o(this.actionsJson,[]):this.actions??[]}applyHostProps(){const t=this.basePath;const a=t!==""&&this.committedSection!==""&&t!==this.committedSection;if(a){this.urlDerivedValue="";this.committedSection="";this.pendingSection=t;this.resolvedTabs=[];this.resolvedActions=this.incomingActions();return}if(this.pendingSection){if(!t||t!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const a=this.incomingTabs();if(a.length===0){return}this.pendingSection=""}this.resolvedTabs=this.incomingTabs();this.resolvedActions=this.incomingActions();this.syncValueFromUrl();this.committedSection=t;this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=m(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){const t=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:a,hideTabs:s}=h(this.currentUrl,this.basePath,t);this.urlDerivedValue=a;this.hideTabsForDetailRoute=s}selectTab(t){this.value=t;this.dsTabChange.emit(t)}focusVisibleSelectedTab(){const t=g(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);t?.focus({preventScroll:true})}handleTabChange(t){this.selectTab(t.detail)}handleActionChange(t,a){const s=a.detail;this.dsActionChange.emit({id:t,selected:s})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(t){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(t.key==="ArrowDown"||t.key==="ArrowUp"||t.key==="Enter"||t.key===" "){t.preventDefault();this.toggleTabMenu()}return}if(t.key==="Escape"){t.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}render(){const t=this.basePath!==""&&this.committedSection===this.basePath;const a=t&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const s=this.basePath||"no-section";return e(i,{key:"2ff547fe6ebb8f5aa17b30a20a436fc5c2b8fc75"},e("header",{key:"7c88c669d64b91569e3d9aa2a6f0de0956588e49",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},ref:t=>{this.headerEl=t;if(t&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&e("div",{key:"fc29973927e1d460c4bb80dd6130631d8805aca1",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("ds-tab-group-nav",{key:`probe-${s}`,ref:t=>{this.probeTabGroupEl=t??null;if(t){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),a&&!this.tabsCollapsed&&e("div",{key:"ae57bea6885eac877ff444039da65fca28730d86",class:"bar-nav__left"},e("ds-tab-group-nav",{key:`visible-${s}`,class:"bar-nav__tabs-visible",ref:t=>{this.visibleTabGroupEl=t??null},tabs:this.resolvedTabs,value:this.effectiveValue,onDsChange:t=>this.handleTabChange(t)})),!a&&this.heading&&e("span",{key:"11ef1b192400cd655a11460fe924d3f627b00781",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&e("button",{key:"75adf0a20847a45174bed264c38855095e508fb8",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:t=>{this.triggerEl=t},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:t=>this.handleTriggerKeyDown(t)},e("span",{key:"4b9d05bc0a2b79aa55ba7d280ef2e69cbd7ff332",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},e("span",{key:"47a91c33a5e951e7d980141306663557644c59db",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:t=>{const a=t??null;if(a===this.triggerLabelTextEl)return;this.triggerLabelTextEl=a;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&e("ds-badge",{key:"14f905957e861e5fc45be1e68343f73c4ecdb60c",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),e("ds-icon",{key:"1ee995a3253c2742f67e1f0f11b18ce382e80a2d",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&e("div",{key:"703a4fbbae8704f1447b2190982dfdbef738b74a",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&e("div",{key:"ca3344145d61120c7e19a7bd5e1843a6d7663e5a",class:"bar-nav__actions"},this.resolvedActions.map((t=>e("ds-bar-nav-action",{key:t.id,icon:t.icon,selected:t.selected??false,dot:t.dot??false,inactive:t.inactive,"aria-label":t.ariaLabel??t.id,onDsChange:a=>this.handleActionChange(t.id,a)}))))),a&&this.tabsCollapsed&&e("ds-menu",{key:"ebfab76ff9a905b65c16dc08dc45f2a11dba98c1",ref:t=>{this.menuEl=t??null},open:this.menuOpen,sections:m(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:t=>this.handleMenuSelect(t),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],actions:[{onHostPropsChange:0}],actionsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return w()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],actions:[{onHostPropsChange:0}],actionsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);x.HOST_PROP_SYNC_BUDGET=8;x.INTRINSIC_WIDTH_RETRY_MAX=3;function C(){if(typeof customElements==="undefined"){return}const t=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];t.forEach((t=>{switch(t){case"ds-bar-nav":if(!customElements.get(n(t))){customElements.define(n(t),x)}break;case"ds-badge":if(!customElements.get(n(t))){c()}break;case"ds-bar-nav-action":if(!customElements.get(n(t))){l()}break;case"ds-icon":if(!customElements.get(n(t))){v()}break;case"ds-menu":if(!customElements.get(n(t))){f()}break;case"ds-tab-group-nav":if(!customElements.get(n(t))){u()}break}}))}C();const z=x;const T=C;export{z as DsBarNav,T as defineCustomElement};
 //# 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","committedSection","pendingSection","effectiveValue","activeTabLabel","activeTabHasDot","dot","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","scheduleOverflowCheck","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","updateTriggerLabelTruncation","disconnectedCallback","disconnect","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","updateTabsCollapsed","disconnectOnly","el","truncated","scrollWidth","clientWidth","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","gap","parseFloat","columnGap","actionsEl","actionsWidth","offsetWidth","horizontalPadding","paddingLeft","paddingRight","spacing","getPropertyValue","trim","available","Math","max","getTabsIntrinsicWidth","tabList","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","intrinsicWidth","shouldCollapse","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","incomingTabs","incomingActions","nextBasePath","sectionChanged","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","tabSurface","render","sectionReady","hasTabs","tabGroupKey","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-types';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n  const sections: MenuSection[] = [];\n  let batch: MenuSection['items'] = [];\n\n  for (const item of tabs) {\n    if (isTabDivider(item)) {\n      if (batch.length > 0) {\n        sections.push({ items: batch });\n        batch = [];\n      }\n      continue;\n    }\n\n    batch.push({\n      label: item.label,\n      value: item.id,\n      isSelected: item.id === selectedId,\n      isInactive: item.disabled,\n    });\n  }\n\n  if (batch.length > 0) {\n    sections.push({ items: batch });\n  }\n\n  return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n  const selectable = getSelectableTabs(tabs);\n  return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n  return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n  tabListScrollWidth: number,\n  containerClientWidth: number,\n  collapsed: boolean,\n  hysteresis = 2,\n): boolean {\n  const diff = tabListScrollWidth - containerClientWidth;\n  if (collapsed) {\n    return diff > -hysteresis;\n  }\n  return diff > hysteresis;\n}\n",":host {\n  display: block;\n}\n\n.bar-nav {\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n  background-color: var(--_bar-nav-bg);\n  color: var(--_bar-nav-fg-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  transition:\n    background-color var(--effect-motion-short-3),\n    border-color var(--effect-motion-short-3),\n    color var(--effect-motion-short-3);\n}\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  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Right zone — pinned to the end; header gap is the min space from tabs/trigger */\n.bar-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex: 0 0 auto;\n  margin-left: auto;\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  State,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\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  @Element() el!: HTMLElement;\n\n  /**\n   * Tab items for the left section.\n   * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n   */\n  @Prop() tabs: BarNavTab[] = [];\n\n  /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n  /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Action items rendered in the right section.\n   * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n   */\n  @Prop() actions: BarNavActionItem[] = [];\n\n  /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n  /**\n   * Fallback heading shown when no tabs are provided.\n   * When tabs are present the heading is hidden.\n   */\n  @Prop() heading: string | undefined;\n\n  /** 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  /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n  @State() private committedSection = '';\n  /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n  @State() private pendingSection = '';\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) {\n      return this.urlDerivedValue;\n    }\n    return this.value;\n  }\n\n  private get activeTabLabel(): string {\n    return getActiveTabLabel(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private get activeTabHasDot(): boolean {\n    return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;\n  }\n\n  @Watch('tabs')\n  @Watch('tabsJson')\n  @Watch('actions')\n  @Watch('actionsJson')\n  @Watch('currentUrl')\n  @Watch('basePath')\n  onHostPropsChange() {\n    this.applyHostProps();\n  }\n\n  @Watch('value')\n  @Watch('urlDerivedValue')\n  onSelectionChange() {\n    this.syncMenuSections();\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('menuOpen')\n  onMenuOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('tabsCollapsed')\n  onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n    if (!collapsed) {\n      this.menuOpen = false;\n      this.menuEl = null;\n      this.triggerLabelTruncated = false;\n      this.syncTriggerLabelObserver();\n    }\n    this.scheduleOverflowCheck();\n    if (collapsed) {\n      requestAnimationFrame(() => {\n        this.scheduleOverflowCheck();\n        this.syncTriggerLabelObserver();\n      });\n    }\n    if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n    queueMicrotask(() => this.focusVisibleSelectedTab());\n  }\n\n  componentWillLoad() {\n    this.applyHostProps();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.setupOverflowObserver();\n    this.scheduleOverflowCheck();\n  }\n\n  componentDidRender() {\n    this.scheduleOverflowCheck();\n    this.syncMenuAnchor();\n    if (this.tabsCollapsed) {\n      this.updateTriggerLabelTruncation();\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.syncTriggerLabelObserver(true);\n  }\n\n  /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (\n      shouldResyncBarNavProps(\n        this.resolvedTabs,\n        this.tabs,\n        this.tabsJson,\n        this.resolvedActions,\n        this.actions,\n        this.actionsJson,\n      )\n    ) {\n      this.applyHostProps();\n    } else if (this.currentUrl && this.basePath) {\n      this.syncValueFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  private setupOverflowObserver() {\n    if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowCheck());\n    this.resizeObserver.observe(this.headerEl);\n  }\n\n  private scheduleOverflowCheck() {\n    if (this.overflowCheckScheduled) return;\n    this.overflowCheckScheduled = true;\n    requestAnimationFrame(() => {\n      this.overflowCheckScheduled = false;\n      this.updateTabsCollapsed();\n      this.updateTriggerLabelTruncation();\n    });\n  }\n\n  private syncTriggerLabelObserver(disconnectOnly = false) {\n    this.triggerLabelObserver?.disconnect();\n    this.triggerLabelObserver = null;\n\n    if (disconnectOnly || !this.tabsCollapsed || !this.triggerLabelTextEl) {\n      return;\n    }\n\n    this.updateTriggerLabelTruncation();\n\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.triggerLabelObserver = new ResizeObserver(() => this.updateTriggerLabelTruncation());\n    this.triggerLabelObserver.observe(this.triggerLabelTextEl);\n    if (this.triggerEl) {\n      this.triggerLabelObserver.observe(this.triggerEl);\n    }\n  }\n\n  private updateTriggerLabelTruncation() {\n    const el = this.triggerLabelTextEl;\n    if (!el || !this.tabsCollapsed) {\n      if (this.triggerLabelTruncated) {\n        this.triggerLabelTruncated = false;\n      }\n      return;\n    }\n\n    const truncated = el.scrollWidth > el.clientWidth + 1;\n    if (truncated !== this.triggerLabelTruncated) {\n      this.triggerLabelTruncated = truncated;\n    }\n  }\n\n  /** Width left for tabs after actions. */\n  private getLeftZoneAvailableWidth(): number {\n    if (!this.headerEl) return 0;\n\n    const headerStyle = getComputedStyle(this.headerEl);\n    const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;\n    const actionsEl = this.headerEl.querySelector('.bar-nav__actions') as HTMLElement | null;\n    const actionsWidth = actionsEl?.offsetWidth ?? 0;\n    const horizontalPadding =\n      (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n    const spacing = this.tabsCollapsed\n      ? parseFloat(\n          getComputedStyle(this.headerEl).getPropertyValue('--dimension-space-100').trim(),\n        ) || 8\n      : actionsEl\n        ? gap\n        : 0;\n    const available =\n      this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;\n\n    return Math.max(0, available);\n  }\n\n  private getTabsIntrinsicWidth(): number {\n    const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n    return tabList?.scrollWidth ?? 0;\n  }\n\n  private scheduleIntrinsicWidthRetry() {\n    if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n    this.intrinsicWidthRetryCount++;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n  }\n\n  private updateTabsCollapsed() {\n    if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n      if (this.tabsCollapsed) {\n        this.tabsCollapsed = false;\n        this.menuOpen = false;\n      }\n      this.intrinsicWidthRetryCount = 0;\n      return;\n    }\n\n    const intrinsicWidth = this.getTabsIntrinsicWidth();\n    if (intrinsicWidth === 0) {\n      this.scheduleIntrinsicWidthRetry();\n      return;\n    }\n    this.intrinsicWidthRetryCount = 0;\n\n    const shouldCollapse = tabsOverflowContainer(\n      intrinsicWidth,\n      this.getLeftZoneAvailableWidth(),\n      this.tabsCollapsed,\n    );\n\n    if (shouldCollapse !== this.tabsCollapsed) {\n      this.tabsCollapsed = shouldCollapse;\n      if (!shouldCollapse) {\n        this.menuOpen = false;\n      }\n    }\n  }\n\n  private syncMenuAnchor() {\n    if (!this.menuEl || !this.triggerEl || !this.tabsCollapsed) return;\n    this.menuEl.anchor = this.triggerEl;\n    this.syncMenuSections();\n  }\n\n  private handleMenuSelect(e: Event) {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.selectTab(String(detail.value));\n    }\n    this.menuOpen = false;\n  }\n\n  private handleMenuClose() {\n    this.menuOpen = false;\n  }\n\n  /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n  private incomingTabs(): BarNavTab[] {\n    return this.tabsJson\n      ? parseJsonArrayProp(this.tabsJson, [])\n      : (this.tabs ?? []);\n  }\n\n  private incomingActions(): BarNavActionItem[] {\n    return this.actionsJson\n      ? parseJsonArrayProp(this.actionsJson, [])\n      : (this.actions ?? []);\n  }\n\n  private applyHostProps() {\n    const nextBasePath = this.basePath;\n    const sectionChanged =\n      nextBasePath !== '' &&\n      this.committedSection !== '' &&\n      nextBasePath !== this.committedSection;\n\n    if (sectionChanged) {\n      this.urlDerivedValue = '';\n      this.committedSection = '';\n      this.pendingSection = nextBasePath;\n      this.resolvedTabs = [];\n      this.resolvedActions = this.incomingActions();\n      return;\n    }\n\n    if (this.pendingSection) {\n      if (!nextBasePath || nextBasePath !== this.pendingSection) {\n        return;\n      }\n      if (!this.currentUrl.startsWith(this.pendingSection)) {\n        return;\n      }\n      const tabs = this.incomingTabs();\n      if (tabs.length === 0) {\n        return;\n      }\n      this.pendingSection = '';\n    }\n\n    this.resolvedTabs = this.incomingTabs();\n    this.resolvedActions = this.incomingActions();\n    this.syncValueFromUrl();\n    this.committedSection = nextBasePath;\n    this.intrinsicWidthRetryCount = 0;\n    this.scheduleOverflowCheck();\n  }\n\n  private syncMenuSections() {\n    if (!this.menuEl) return;\n    this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private syncValueFromUrl() {\n    const tabs = this.incomingTabs();\n\n    if (!this.currentUrl || !this.basePath) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    if (!this.currentUrl.startsWith(this.basePath)) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    const { value, hideTabs } = deriveBarNavValueFromUrl(\n      this.currentUrl,\n      this.basePath,\n      tabs,\n    );\n    this.urlDerivedValue = value;\n    this.hideTabsForDetailRoute = hideTabs;\n  }\n\n  private selectTab(id: string) {\n    this.value = id;\n    this.dsTabChange.emit(id);\n  }\n\n  /** Move focus to the selected tab in the visible tab group (after expand). */\n  private focusVisibleSelectedTab() {\n    const tab = queryWithinComponentHost(\n      this.visibleTabGroupEl,\n      `[data-tab-id=\"${this.effectiveValue}\"]`,\n    );\n    tab?.focus({ preventScroll: true });\n  }\n\n  private handleTabChange(e: Event) {\n    this.selectTab((e as CustomEvent<string>).detail);\n  }\n\n  private handleActionChange(actionId: string, e: Event) {\n    const selected = (e as CustomEvent<boolean>).detail;\n    this.dsActionChange.emit({ id: actionId, selected });\n  }\n\n  private toggleTabMenu() {\n    if (this.menuOpen) {\n      this.menuOpen = false;\n      return;\n    }\n\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n      this.menuEl.minWidth = `${this.triggerEl.offsetWidth}px`;\n      this.syncMenuSections();\n    }\n\n    this.menuOpen = true;\n  }\n\n  private handleTriggerKeyDown(e: KeyboardEvent) {\n    if (!this.tabsCollapsed) return;\n\n    if (!this.menuOpen) {\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this.toggleTabMenu();\n      }\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.menuOpen = false;\n      this.triggerEl?.focus();\n    }\n  }\n\n  private get tabSurface(): BarNavActionBackground | undefined {\n    return this.navStyle === 'navigation' ? 'navigation' : undefined;\n  }\n\n  render() {\n    const sectionReady =\n      this.basePath !== '' && this.committedSection === this.basePath;\n    const hasTabs =\n      sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n    const tabSurface = this.tabSurface;\n    const tabGroupKey = this.basePath || 'no-section';\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                  key={`probe-${tabGroupKey}`}\n                  ref={el => {\n                    this.probeTabGroupEl = el ?? null;\n                    if (el) {\n                      this.intrinsicWidthRetryCount = 0;\n                      this.scheduleOverflowCheck();\n                    }\n                  }}\n                  tabs={this.resolvedTabs}\n                  value={this.effectiveValue}\n                  background={tabSurface}\n                />\n              </div>\n            )}\n\n            {hasTabs && !this.tabsCollapsed && (\n              <div class=\"bar-nav__left\">\n                <ds-tab-group-nav\n                  key={`visible-${tabGroupKey}`}\n                  class=\"bar-nav__tabs-visible\"\n                  ref={el => {\n                    this.visibleTabGroupEl = el ?? null;\n                  }}\n                  tabs={this.resolvedTabs}\n                  value={this.effectiveValue}\n                  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":["queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","tabs","selectedId","sections","batch","item","isTabDivider","length","push","items","label","value","id","isSelected","isInactive","disabled","getActiveTab","selectable","getSelectableTabs","find","tab","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","tabsJson","actions","actionsJson","basePath","currentUrl","resolvedTabs","resolvedActions","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","committedSection","pendingSection","effectiveValue","activeTabLabel","activeTabHasDot","dot","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","scheduleOverflowCheck","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","updateTriggerLabelTruncation","disconnectedCallback","disconnect","shouldResyncBarNavProps","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","updateTabsCollapsed","disconnectOnly","el","truncated","scrollWidth","clientWidth","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","gap","parseFloat","columnGap","actionsEl","actionsWidth","offsetWidth","horizontalPadding","paddingLeft","paddingRight","spacing","getPropertyValue","trim","available","Math","max","getTabsIntrinsicWidth","tabList","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","intrinsicWidth","shouldCollapse","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","incomingTabs","parseJsonArrayProp","incomingActions","nextBasePath","sectionChanged","startsWith","hideTabs","deriveBarNavValueFromUrl","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","render","sectionReady","hasTabs","tabGroupKey","h","Host","class","ref","inert","onDsChange","heading","type","onClick","onKeyDown","next","variant","background","name","size","color","map","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["export type QueryableHost = {\n  shadowRoot?: ShadowRoot | null;\n  querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n  host: QueryableHost | null | undefined,\n  selector: string,\n): HTMLElement | null {\n  if (!host) return null;\n  const root = host.shadowRoot ?? host;\n  return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n  tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n  return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/menu-types';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n  const sections: MenuSection[] = [];\n  let batch: MenuSection['items'] = [];\n\n  for (const item of tabs) {\n    if (isTabDivider(item)) {\n      if (batch.length > 0) {\n        sections.push({ items: batch });\n        batch = [];\n      }\n      continue;\n    }\n\n    batch.push({\n      label: item.label,\n      value: item.id,\n      isSelected: item.id === selectedId,\n      isInactive: item.disabled,\n    });\n  }\n\n  if (batch.length > 0) {\n    sections.push({ items: batch });\n  }\n\n  return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n  const selectable = getSelectableTabs(tabs);\n  return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n  return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n  tabListScrollWidth: number,\n  containerClientWidth: number,\n  collapsed: boolean,\n  hysteresis = 2,\n): boolean {\n  const diff = tabListScrollWidth - containerClientWidth;\n  if (collapsed) {\n    return diff > -hysteresis;\n  }\n  return diff > hysteresis;\n}\n",":host {\n  display: block;\n}\n\n.bar-nav {\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n  background-color: var(--_bar-nav-bg);\n  color: var(--_bar-nav-fg-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  transition:\n    background-color var(--effect-motion-short-3),\n    border-color var(--effect-motion-short-3),\n    color var(--effect-motion-short-3);\n  isolation: isolate;\n  /* Default chrome — app surfaces */\n  --_bar-nav-bg: var(--color-background-secondary);\n  --_bar-nav-border: var(--color-border-tertiary);\n  --_bar-nav-fg-primary: var(--color-foreground-primary);\n  --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n  --_bar-nav-hover: var(--color-interaction-hover);\n  --_bar-nav-pressed: var(--color-interaction-pressed);\n  --_bar-nav-focus: var(--color-interaction-focus);\n  --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n  --_bar-nav-bg: var(--color-background-secondary);\n  --_bar-nav-border: var(--color-border-tertiary);\n  --_bar-nav-fg-primary: var(--color-foreground-primary);\n  --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n  --_bar-nav-hover: var(--color-interaction-hover);\n  --_bar-nav-pressed: var(--color-interaction-pressed);\n  --_bar-nav-focus: var(--color-interaction-focus);\n  --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash + grid) — bar is a transparent frame. */\n:host-context(ds-app-shell[gradient]) .bar-nav {\n  background-color: transparent;\n}\n\n.bar-nav > :not(.bar-nav__tabs-probe) {\n  position: relative;\n  z-index: 3;\n}\n\n/* Collapsed — explicit spacer keeps the 8px minimum while the trigger can shrink. */\n.bar-nav--tabs-collapsed {\n  display: flex;\n  gap: 0;\n  align-items: center;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 100%;\n  width: auto;\n  overflow: hidden;\n}\n\n.bar-nav__between {\n  flex: 1 1 0%;\n  min-width: var(--dimension-space-100);\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label {\n  flex: 1 1 0%;\n  min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__tab-trigger-label-text {\n  display: block;\n  flex: 1 1 0%;\n  min-width: 0;\n}\n\n.bar-nav--tabs-collapsed .bar-nav__actions {\n  flex: 0 0 auto;\n  margin-left: 0;\n}\n\n/* Expanded tabs — consume space between start and actions */\n.bar-nav__left {\n  position: relative;\n  flex: 1 1 0%;\n  min-width: 0;\n  width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.bar-nav__left ds-tab-group-nav {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Unconstrained width so intrinsic tab row width is measurable while collapsed */\n.bar-nav__tabs-probe {\n  position: absolute;\n  left: 0;\n  top: 0;\n  visibility: hidden;\n  pointer-events: none;\n  overflow: visible;\n  width: max-content;\n  max-width: none;\n  z-index: -1;\n}\n\n.bar-nav__tabs-probe ds-tab-group-nav {\n  width: max-content;\n}\n\n.bar-nav__tabs-visible {\n  width: 100%;\n  min-width: 0;\n}\n\n/* In-flow placeholder while measuring overflow — avoids layout jump; hidden from view/accessibility. */\n.bar-nav__tabs-pending {\n  flex: 1;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  visibility: hidden;\n  pointer-events: none;\n}\n\n/* Collapsed tab trigger — mirrors TabGroup .tab (+ chevron when collapsed) */\n.bar-nav__tab-trigger {\n  all: unset;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex: 0 1 auto;\n  min-width: 0;\n  width: max-content;\n  max-width: 100%;\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--_bar-nav-fg-primary);\n  position: relative;\n  transition: color var(--effect-motion-short-2);\n  height: var(--dimension-size-400);\n  --_hover-bg: var(--_bar-nav-hover);\n  --_pressed-bg: var(--_bar-nav-pressed);\n  --_dot: var(--_bar-nav-dot);\n  --_dot-ring: var(--_bar-nav-bg);\n}\n\n.bar-nav__tab-trigger::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n  z-index: 2;\n}\n\n.bar-nav__tab-trigger:hover::after {\n  background: var(--_hover-bg);\n  transition: none;\n}\n\n.bar-nav__tab-trigger:active::after {\n  background: var(--_pressed-bg);\n  transition: none;\n}\n\n.bar-nav__tab-trigger:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.bar-nav__tab-trigger--open::after {\n  background: var(--_hover-bg);\n}\n\n.bar-nav__tab-trigger-label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 100%;\n  padding: 0 var(--dimension-space-025);\n  overflow: hidden;\n  --_fade-right: var(--dimension-space-025);\n  z-index: 1;\n}\n\n.bar-nav__tab-trigger-label--truncated::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: var(--_fade-right);\n  bottom: 0;\n  width: var(--dimension-size-400);\n  background: linear-gradient(to right, transparent, var(--_bar-nav-bg));\n  pointer-events: none;\n  z-index: 1;\n}\n\n.bar-nav__tab-trigger-label-text {\n  display: inline-block;\n  max-width: 100%;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  vertical-align: bottom;\n}\n\n.bar-nav__tab-trigger-label-text--truncated {\n  -webkit-mask-image: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--dimension-size-400)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--dimension-size-400)),\n    transparent 100%\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.bar-nav__tab-trigger-label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n  --_fade-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n.bar-nav__tab-trigger-dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.bar-nav__tab-trigger-chevron {\n  position: relative;\n  flex-shrink: 0;\n  z-index: 1;\n}\n\n/* Fallback heading when no tabs — matches a single (selected) tab so the area\n   name shares the tab label's type token, color, height and horizontal inset.\n   Inset = tab button padding (space-075, 6px) + label inset (space-025, 2px). */\n.bar-nav__heading {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  color: var(--_bar-nav-fg-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Right zone — pinned to the end; header gap is the min space from tabs/trigger */\n.bar-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex: 0 0 auto;\n  margin-left: auto;\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  State,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\nimport {\n  deriveBarNavValueFromUrl,\n  parseJsonArrayProp,\n  shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n  getTabListFromTabGroup,\n  queryWithinComponentHost,\n  type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n  getActiveTab,\n  getActiveTabLabel,\n  tabsOverflowContainer,\n  tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\n\n@Component({\n  tag: 'ds-bar-nav',\n  styleUrl: 'BarNav.css',\n  scoped: true,\n})\nexport class BarNav {\n  /** Style slot: `dashboard` or `settings`. Colors match for now. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Tab items for the left section.\n   * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n   */\n  @Prop() tabs: BarNavTab[] = [];\n\n  /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n  /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Action items rendered in the right section.\n   * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n   */\n  @Prop() actions: BarNavActionItem[] = [];\n\n  /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n  /**\n   * Fallback heading shown when no tabs are provided.\n   * When tabs are present the heading is hidden.\n   */\n  @Prop() heading: string | undefined;\n\n  /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n  @Prop() basePath: string = '';\n\n  /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n  @Prop() currentUrl: string = '';\n\n  /** Emitted when the active tab changes. Detail = tab id. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  /** Emitted when an action button is toggled. Detail = { id, selected }. */\n  @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n  @State() private resolvedTabs: BarNavTab[] = [];\n  @State() private resolvedActions: BarNavActionItem[] = [];\n  @State() private urlDerivedValue: string = '';\n  @State() private hideTabsForDetailRoute = false;\n  @State() private tabsCollapsed = false;\n  @State() private menuOpen = false;\n  /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n  @State() private tabLayoutCommitted = false;\n  @State() private triggerLabelTruncated = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n  private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n\n  private headerEl: HTMLElement | null = null;\n  private triggerEl: HTMLButtonElement | null = null;\n  private triggerLabelTextEl: HTMLElement | null = null;\n  private triggerLabelObserver: ResizeObserver | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  private visibleTabGroupEl: QueryableHost | null = null;\n  private probeTabGroupEl: QueryableHost | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private overflowCheckScheduled = false;\n  private intrinsicWidthRetryCount = 0;\n  /** Matches `basePath` once tabs + URL are reconciled for the active section. */\n  @State() private committedSection = '';\n  /** Section waiting for URL + tabs to catch up after a cross-area navigation. */\n  @State() private pendingSection = '';\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) {\n      return this.urlDerivedValue;\n    }\n    return this.value;\n  }\n\n  private get activeTabLabel(): string {\n    return getActiveTabLabel(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private get activeTabHasDot(): boolean {\n    return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;\n  }\n\n  @Watch('tabs')\n  @Watch('tabsJson')\n  @Watch('actions')\n  @Watch('actionsJson')\n  @Watch('currentUrl')\n  @Watch('basePath')\n  onHostPropsChange() {\n    this.applyHostProps();\n  }\n\n  @Watch('value')\n  @Watch('urlDerivedValue')\n  onSelectionChange() {\n    this.syncMenuSections();\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('menuOpen')\n  onMenuOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('tabsCollapsed')\n  onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n    if (!collapsed) {\n      this.menuOpen = false;\n      this.menuEl = null;\n      this.triggerLabelTruncated = false;\n      this.syncTriggerLabelObserver();\n    }\n    this.scheduleOverflowCheck();\n    if (collapsed) {\n      requestAnimationFrame(() => {\n        this.scheduleOverflowCheck();\n        this.syncTriggerLabelObserver();\n      });\n    }\n    if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n    queueMicrotask(() => this.focusVisibleSelectedTab());\n  }\n\n  componentWillLoad() {\n    this.applyHostProps();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.setupOverflowObserver();\n    this.scheduleOverflowCheck();\n  }\n\n  componentDidRender() {\n    this.scheduleOverflowCheck();\n    this.syncMenuAnchor();\n    if (this.tabsCollapsed) {\n      this.updateTriggerLabelTruncation();\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.syncTriggerLabelObserver(true);\n  }\n\n  /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (\n      shouldResyncBarNavProps(\n        this.resolvedTabs,\n        this.tabs,\n        this.tabsJson,\n        this.resolvedActions,\n        this.actions,\n        this.actionsJson,\n      )\n    ) {\n      this.applyHostProps();\n    } else if (this.currentUrl && this.basePath) {\n      this.syncValueFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  private setupOverflowObserver() {\n    if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowCheck());\n    this.resizeObserver.observe(this.headerEl);\n  }\n\n  private scheduleOverflowCheck() {\n    if (this.overflowCheckScheduled) return;\n    this.overflowCheckScheduled = true;\n    requestAnimationFrame(() => {\n      this.overflowCheckScheduled = false;\n      this.updateTabsCollapsed();\n      this.updateTriggerLabelTruncation();\n    });\n  }\n\n  private syncTriggerLabelObserver(disconnectOnly = false) {\n    this.triggerLabelObserver?.disconnect();\n    this.triggerLabelObserver = null;\n\n    if (disconnectOnly || !this.tabsCollapsed || !this.triggerLabelTextEl) {\n      return;\n    }\n\n    this.updateTriggerLabelTruncation();\n\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.triggerLabelObserver = new ResizeObserver(() => this.updateTriggerLabelTruncation());\n    this.triggerLabelObserver.observe(this.triggerLabelTextEl);\n    if (this.triggerEl) {\n      this.triggerLabelObserver.observe(this.triggerEl);\n    }\n  }\n\n  private updateTriggerLabelTruncation() {\n    const el = this.triggerLabelTextEl;\n    if (!el || !this.tabsCollapsed) {\n      if (this.triggerLabelTruncated) {\n        this.triggerLabelTruncated = false;\n      }\n      return;\n    }\n\n    const truncated = el.scrollWidth > el.clientWidth + 1;\n    if (truncated !== this.triggerLabelTruncated) {\n      this.triggerLabelTruncated = truncated;\n    }\n  }\n\n  /** Width left for tabs after actions. */\n  private getLeftZoneAvailableWidth(): number {\n    if (!this.headerEl) return 0;\n\n    const headerStyle = getComputedStyle(this.headerEl);\n    const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;\n    const actionsEl = this.headerEl.querySelector('.bar-nav__actions') as HTMLElement | null;\n    const actionsWidth = actionsEl?.offsetWidth ?? 0;\n    const horizontalPadding =\n      (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n    const spacing = this.tabsCollapsed\n      ? parseFloat(\n          getComputedStyle(this.headerEl).getPropertyValue('--dimension-space-100').trim(),\n        ) || 8\n      : actionsEl\n        ? gap\n        : 0;\n    const available =\n      this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;\n\n    return Math.max(0, available);\n  }\n\n  private getTabsIntrinsicWidth(): number {\n    const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n    return tabList?.scrollWidth ?? 0;\n  }\n\n  private scheduleIntrinsicWidthRetry() {\n    if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n    this.intrinsicWidthRetryCount++;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n  }\n\n  private updateTabsCollapsed() {\n    if (!this.headerEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n      if (this.tabsCollapsed) {\n        this.tabsCollapsed = false;\n        this.menuOpen = false;\n      }\n      this.intrinsicWidthRetryCount = 0;\n      return;\n    }\n\n    const intrinsicWidth = this.getTabsIntrinsicWidth();\n    if (intrinsicWidth === 0) {\n      this.scheduleIntrinsicWidthRetry();\n      return;\n    }\n    this.intrinsicWidthRetryCount = 0;\n\n    const shouldCollapse = tabsOverflowContainer(\n      intrinsicWidth,\n      this.getLeftZoneAvailableWidth(),\n      this.tabsCollapsed,\n    );\n\n    if (shouldCollapse !== this.tabsCollapsed) {\n      this.tabsCollapsed = shouldCollapse;\n      if (!shouldCollapse) {\n        this.menuOpen = false;\n      }\n    }\n  }\n\n  private syncMenuAnchor() {\n    if (!this.menuEl || !this.triggerEl || !this.tabsCollapsed) return;\n    this.menuEl.anchor = this.triggerEl;\n    this.syncMenuSections();\n  }\n\n  private handleMenuSelect(e: Event) {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.selectTab(String(detail.value));\n    }\n    this.menuOpen = false;\n  }\n\n  private handleMenuClose() {\n    this.menuOpen = false;\n  }\n\n  /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */\n  private incomingTabs(): BarNavTab[] {\n    return this.tabsJson\n      ? parseJsonArrayProp(this.tabsJson, [])\n      : (this.tabs ?? []);\n  }\n\n  private incomingActions(): BarNavActionItem[] {\n    return this.actionsJson\n      ? parseJsonArrayProp(this.actionsJson, [])\n      : (this.actions ?? []);\n  }\n\n  private applyHostProps() {\n    const nextBasePath = this.basePath;\n    const sectionChanged =\n      nextBasePath !== '' &&\n      this.committedSection !== '' &&\n      nextBasePath !== this.committedSection;\n\n    if (sectionChanged) {\n      this.urlDerivedValue = '';\n      this.committedSection = '';\n      this.pendingSection = nextBasePath;\n      this.resolvedTabs = [];\n      this.resolvedActions = this.incomingActions();\n      return;\n    }\n\n    if (this.pendingSection) {\n      if (!nextBasePath || nextBasePath !== this.pendingSection) {\n        return;\n      }\n      if (!this.currentUrl.startsWith(this.pendingSection)) {\n        return;\n      }\n      const tabs = this.incomingTabs();\n      if (tabs.length === 0) {\n        return;\n      }\n      this.pendingSection = '';\n    }\n\n    this.resolvedTabs = this.incomingTabs();\n    this.resolvedActions = this.incomingActions();\n    this.syncValueFromUrl();\n    this.committedSection = nextBasePath;\n    this.intrinsicWidthRetryCount = 0;\n    this.scheduleOverflowCheck();\n  }\n\n  private syncMenuSections() {\n    if (!this.menuEl) return;\n    this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private syncValueFromUrl() {\n    const tabs = this.incomingTabs();\n\n    if (!this.currentUrl || !this.basePath) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    if (!this.currentUrl.startsWith(this.basePath)) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    const { value, hideTabs } = deriveBarNavValueFromUrl(\n      this.currentUrl,\n      this.basePath,\n      tabs,\n    );\n    this.urlDerivedValue = value;\n    this.hideTabsForDetailRoute = hideTabs;\n  }\n\n  private selectTab(id: string) {\n    this.value = id;\n    this.dsTabChange.emit(id);\n  }\n\n  /** Move focus to the selected tab in the visible tab group (after expand). */\n  private focusVisibleSelectedTab() {\n    const tab = queryWithinComponentHost(\n      this.visibleTabGroupEl,\n      `[data-tab-id=\"${this.effectiveValue}\"]`,\n    );\n    tab?.focus({ preventScroll: true });\n  }\n\n  private handleTabChange(e: Event) {\n    this.selectTab((e as CustomEvent<string>).detail);\n  }\n\n  private handleActionChange(actionId: string, e: Event) {\n    const selected = (e as CustomEvent<boolean>).detail;\n    this.dsActionChange.emit({ id: actionId, selected });\n  }\n\n  private toggleTabMenu() {\n    if (this.menuOpen) {\n      this.menuOpen = false;\n      return;\n    }\n\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n      this.menuEl.minWidth = `${this.triggerEl.offsetWidth}px`;\n      this.syncMenuSections();\n    }\n\n    this.menuOpen = true;\n  }\n\n  private handleTriggerKeyDown(e: KeyboardEvent) {\n    if (!this.tabsCollapsed) return;\n\n    if (!this.menuOpen) {\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this.toggleTabMenu();\n      }\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.menuOpen = false;\n      this.triggerEl?.focus();\n    }\n  }\n\n  render() {\n    const sectionReady =\n      this.basePath !== '' && this.committedSection === this.basePath;\n    const hasTabs =\n      sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n    const tabGroupKey = this.basePath || 'no-section';\n\n    return (\n      <Host>\n        <header\n          class={{\n            'bar-nav': true,\n            'bar-nav--dashboard': this.navStyle === 'dashboard',\n            'bar-nav--settings': this.navStyle === 'settings',\n            'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,\n          }}\n          ref={el => {\n            this.headerEl = el as HTMLElement;\n            if (el && !this.resizeObserver) {\n              this.setupOverflowObserver();\n            }\n          }}\n        >\n            {hasTabs && (\n              <div class=\"bar-nav__tabs-probe\" aria-hidden=\"true\" inert>\n                <ds-tab-group-nav\n                  key={`probe-${tabGroupKey}`}\n                  ref={el => {\n                    this.probeTabGroupEl = el ?? null;\n                    if (el) {\n                      this.intrinsicWidthRetryCount = 0;\n                      this.scheduleOverflowCheck();\n                    }\n                  }}\n                  tabs={this.resolvedTabs}\n                  value={this.effectiveValue}\n                />\n              </div>\n            )}\n\n            {hasTabs && !this.tabsCollapsed && (\n              <div class=\"bar-nav__left\">\n                <ds-tab-group-nav\n                  key={`visible-${tabGroupKey}`}\n                  class=\"bar-nav__tabs-visible\"\n                  ref={el => {\n                    this.visibleTabGroupEl = el ?? null;\n                  }}\n                  tabs={this.resolvedTabs}\n                  value={this.effectiveValue}\n                  onDsChange={(e: Event) => this.handleTabChange(e)}\n                />\n              </div>\n            )}\n\n            {!hasTabs && this.heading && (\n              <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n            )}\n\n            {hasTabs && this.tabsCollapsed && (\n              <button\n                type=\"button\"\n                class={{\n                  'bar-nav__tab-trigger': true,\n                  'bar-nav__tab-trigger--open': this.menuOpen,\n                }}\n                ref={el => {\n                  this.triggerEl = el as HTMLButtonElement;\n                }}\n                aria-haspopup=\"menu\"\n                aria-expanded={this.menuOpen}\n                aria-label={`${this.activeTabLabel} tabs`}\n                onClick={() => this.toggleTabMenu()}\n                onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n              >\n                <span\n                  class={{\n                    'bar-nav__tab-trigger-label': true,\n                    'bar-nav__tab-trigger-label--dot': this.activeTabHasDot,\n                    'bar-nav__tab-trigger-label--truncated': this.triggerLabelTruncated,\n                  }}\n                >\n                  <span\n                    class={{\n                      'bar-nav__tab-trigger-label-text': true,\n                      'bar-nav__tab-trigger-label-text--truncated': this.triggerLabelTruncated,\n                      'text-body-medium-emphasis': true,\n                    }}\n                    ref={el => {\n                      const next = el ?? null;\n                      if (next === this.triggerLabelTextEl) return;\n                      this.triggerLabelTextEl = next;\n                      if (this.tabsCollapsed) {\n                        this.syncTriggerLabelObserver();\n                      }\n                    }}\n                  >\n                    {this.activeTabLabel}\n                  </span>\n                  {this.activeTabHasDot && (\n                    <ds-badge\n                      class=\"bar-nav__tab-trigger-dot\"\n                      variant=\"dot\"\n                      background=\"var(--_bar-nav-bg)\"\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n                <ds-icon\n                  name=\"ChevronDown\"\n                  size=\"md\"\n                  color=\"inherit\"\n                  class=\"bar-nav__tab-trigger-chevron\"\n                />\n              </button>\n            )}\n\n            {hasTabs && this.tabsCollapsed && this.resolvedActions.length > 0 && (\n              <div class=\"bar-nav__between\" aria-hidden=\"true\" />\n            )}\n\n          {this.resolvedActions.length > 0 && (\n            <div class=\"bar-nav__actions\">\n              {this.resolvedActions.map(action => (\n                <ds-bar-nav-action\n                  key={action.id}\n                  icon={action.icon}\n                  selected={action.selected ?? false}\n                  dot={action.dot ?? false}\n                  inactive={action.inactive}\n                  aria-label={action.ariaLabel ?? action.id}\n                  onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n                />\n              ))}\n            </div>\n          )}\n\n        </header>\n\n        {hasTabs && this.tabsCollapsed && (\n          <ds-menu\n            ref={el => {\n              this.menuEl = (el as HTMLDsMenuElement) ?? null;\n            }}\n            open={this.menuOpen}\n            sections={tabsToMenuSections(this.resolvedTabs, this.effectiveValue)}\n            side=\"bottom\"\n            align=\"start\"\n            onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n            onDsClose={() => this.handleMenuClose()}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-fade.js

@@ -1,2 +1,2 @@
-import{p as e,H as a,h as t,a as r,t as s}from"./index.js";import{i as d}from"./p-TtnqbcnR.js";const i=()=>`.sc-ds-fade-h{--ds-fade-size:var(--dimension-size-600);--ds-fade-bg:var(--color-background-secondary);--ds-fade-offset:0;position:absolute;pointer-events:none;z-index:10;opacity:1;transform:translateZ(0);backface-visibility:hidden;transition:opacity var(--effect-motion-short-3)}.fade--hidden.sc-ds-fade-h{opacity:0}.fade--vertical-edge.sc-ds-fade-h{height:var(--ds-fade-size)}.fade--horizontal-edge.sc-ds-fade-h{width:var(--ds-fade-size)}@media (prefers-reduced-motion: reduce){.sc-ds-fade-h{transition:none}}.fade--top.sc-ds-fade-h{top:var(--ds-fade-offset);left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}.fade--bottom.sc-ds-fade-h{bottom:var(--ds-fade-offset);left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}.fade--left.sc-ds-fade-h{top:0;bottom:0;left:var(--ds-fade-offset);background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}.fade--right.sc-ds-fade-h{top:0;bottom:0;right:var(--ds-fade-offset);background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}.fade--shell-gradient.sc-ds-fade-h{background:transparent}.fade--shell-gradient.sc-ds-fade-h::before,.fade--shell-gradient.sc-ds-fade-h::after{content:'';position:absolute;inset:0;pointer-events:none}.fade--shell-gradient.fade--top.sc-ds-fade-h::before{background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}.fade--shell-gradient.fade--bottom.sc-ds-fade-h::before{background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}.fade--shell-gradient.fade--left.sc-ds-fade-h::before{background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}.fade--shell-gradient.fade--right.sc-ds-fade-h::before{background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}.fade--shell-gradient.sc-ds-fade-h::after{opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.fade--shell-gradient.fade--shell-gradient-panel.sc-ds-fade-h::after{background-position:var(--ds-shell-gradient-position-panel, 0 0)}.fade--shell-gradient.fade--shell-gradient-bar.sc-ds-fade-h::after{background-position:var(--ds-shell-gradient-position-bar, 0 0)}.fade--shell-gradient.fade--top.sc-ds-fade-h::after{-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%)}.fade--shell-gradient.fade--bottom.sc-ds-fade-h::after{-webkit-mask-image:linear-gradient(to top, #000 0%, transparent 100%);mask-image:linear-gradient(to top, #000 0%, transparent 100%)}.fade--shell-gradient.fade--left.sc-ds-fade-h::after{-webkit-mask-image:linear-gradient(to right, #000 0%, transparent 100%);mask-image:linear-gradient(to right, #000 0%, transparent 100%)}.fade--shell-gradient.fade--right.sc-ds-fade-h::after{-webkit-mask-image:linear-gradient(to left, #000 0%, transparent 100%);mask-image:linear-gradient(to left, #000 0%, transparent 100%)}`;const n={"size-000":"var(--dimension-size-000)","size-050":"var(--dimension-size-050)","size-075":"var(--dimension-size-075)","size-100":"var(--dimension-size-100)","size-150":"var(--dimension-size-150)","size-200":"var(--dimension-size-200)","size-250":"var(--dimension-size-250)","size-300":"var(--dimension-size-300)","size-400":"var(--dimension-size-400)","size-500":"var(--dimension-size-500)","size-600":"var(--dimension-size-600)","size-800":"var(--dimension-size-800)"};const o={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",navigation:"var(--color-navigation-background)",media:"var(--color-media-background)","always-dark":"var(--color-always-dark-background)",inverted:"var(--color-inverted-background)"};const f=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.shellGradientChrome=null;this.side="bottom";this.size="size-600";this.surface="default";this.background="var(--color-background-secondary)";this.visible=true}componentDidLoad(){this.syncShellGradient()}syncShellGradient(){if(!d(this.el)){this.shellGradientChrome=null;return}this.shellGradientChrome=this.el.closest("ds-bar-nav")?"bar":"panel"}resolveSize(){if(this.height)return this.height;return Object.prototype.hasOwnProperty.call(n,this.size)?n[this.size]:this.size}resolveBackground(){if(this.background!=="var(--color-background-secondary)")return this.background;return o[this.surface]}render(){const e=this.side==="top"||this.side==="bottom";return t(r,{key:"2593eb02835060275deefcd4f25888f317c8a6d7","aria-hidden":"true",class:{fade:true,"fade--hidden":!this.visible,"fade--vertical-edge":e,"fade--horizontal-edge":!e,"fade--shell-gradient":this.shellGradientChrome!==null,"fade--shell-gradient-panel":this.shellGradientChrome==="panel","fade--shell-gradient-bar":this.shellGradientChrome==="bar",[`fade--${this.side}`]:true},style:{"--ds-fade-size":this.resolveSize(),"--ds-fade-bg":this.resolveBackground()}})}get el(){return this}static get style(){return i()}},[2,"ds-fade",{side:[1],size:[1],height:[1],surface:[1],background:[1],visible:[4],shellGradientChrome:[32]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-fade"];e.forEach((e=>{switch(e){case"ds-fade":if(!customElements.get(s(e))){customElements.define(s(e),f)}break}}))}l();const g=f;const c=l;export{g as DsFade,c as defineCustomElement};
+import{p as e,H as a,h as t,a as r,t as s}from"./index.js";import{i as d}from"./p-g6MCxfm4.js";const i=()=>`.sc-ds-fade-h{--ds-fade-size:var(--dimension-size-600);--ds-fade-bg:var(--color-background-secondary);--ds-fade-offset:0;position:absolute;pointer-events:none;z-index:10;opacity:1;transform:translateZ(0);backface-visibility:hidden;transition:opacity var(--effect-motion-short-3)}.fade--hidden.sc-ds-fade-h{opacity:0}.fade--vertical-edge.sc-ds-fade-h{height:var(--ds-fade-size)}.fade--horizontal-edge.sc-ds-fade-h{width:var(--ds-fade-size)}@media (prefers-reduced-motion: reduce){.sc-ds-fade-h{transition:none}}.fade--top.sc-ds-fade-h{top:var(--ds-fade-offset);left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}.fade--bottom.sc-ds-fade-h{bottom:var(--ds-fade-offset);left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}.fade--left.sc-ds-fade-h{top:0;bottom:0;left:var(--ds-fade-offset);background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}.fade--right.sc-ds-fade-h{top:0;bottom:0;right:var(--ds-fade-offset);background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}.fade--shell-gradient.sc-ds-fade-h{background:transparent}.fade--shell-gradient.sc-ds-fade-h::before,.fade--shell-gradient.sc-ds-fade-h::after{content:'';position:absolute;inset:0;pointer-events:none}.fade--shell-gradient.fade--top.sc-ds-fade-h::before{background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}.fade--shell-gradient.fade--bottom.sc-ds-fade-h::before{background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}.fade--shell-gradient.fade--left.sc-ds-fade-h::before{background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}.fade--shell-gradient.fade--right.sc-ds-fade-h::before{background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}.fade--shell-gradient.sc-ds-fade-h::after{opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat;background-position:0 0;background-attachment:fixed}.fade--shell-gradient.fade--top.sc-ds-fade-h::after{-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%)}.fade--shell-gradient.fade--bottom.sc-ds-fade-h::after{-webkit-mask-image:linear-gradient(to top, #000 0%, transparent 100%);mask-image:linear-gradient(to top, #000 0%, transparent 100%)}.fade--shell-gradient.fade--left.sc-ds-fade-h::after{-webkit-mask-image:linear-gradient(to right, #000 0%, transparent 100%);mask-image:linear-gradient(to right, #000 0%, transparent 100%)}.fade--shell-gradient.fade--right.sc-ds-fade-h::after{-webkit-mask-image:linear-gradient(to left, #000 0%, transparent 100%);mask-image:linear-gradient(to left, #000 0%, transparent 100%)}`;const n={"size-000":"var(--dimension-size-000)","size-050":"var(--dimension-size-050)","size-075":"var(--dimension-size-075)","size-100":"var(--dimension-size-100)","size-150":"var(--dimension-size-150)","size-200":"var(--dimension-size-200)","size-250":"var(--dimension-size-250)","size-300":"var(--dimension-size-300)","size-400":"var(--dimension-size-400)","size-500":"var(--dimension-size-500)","size-600":"var(--dimension-size-600)","size-800":"var(--dimension-size-800)"};const o={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",navigation:"var(--color-navigation-background)",media:"var(--color-media-background)","always-dark":"var(--color-always-dark-background)",inverted:"var(--color-inverted-background)"};const f=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.shellGradientChrome=null;this.side="bottom";this.size="size-600";this.surface="default";this.background="var(--color-background-secondary)";this.visible=true}componentDidLoad(){this.syncShellGradient()}syncShellGradient(){if(!d(this.el)){this.shellGradientChrome=null;return}this.shellGradientChrome=this.el.closest("ds-bar-nav")?"bar":"panel"}resolveSize(){if(this.height)return this.height;return Object.prototype.hasOwnProperty.call(n,this.size)?n[this.size]:this.size}resolveBackground(){if(this.background!=="var(--color-background-secondary)")return this.background;return o[this.surface]}render(){const e=this.side==="top"||this.side==="bottom";return t(r,{key:"2593eb02835060275deefcd4f25888f317c8a6d7","aria-hidden":"true",class:{fade:true,"fade--hidden":!this.visible,"fade--vertical-edge":e,"fade--horizontal-edge":!e,"fade--shell-gradient":this.shellGradientChrome!==null,"fade--shell-gradient-panel":this.shellGradientChrome==="panel","fade--shell-gradient-bar":this.shellGradientChrome==="bar",[`fade--${this.side}`]:true},style:{"--ds-fade-size":this.resolveSize(),"--ds-fade-bg":this.resolveBackground()}})}get el(){return this}static get style(){return i()}},[2,"ds-fade",{side:[1],size:[1],height:[1],surface:[1],background:[1],visible:[4],shellGradientChrome:[32]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-fade"];e.forEach((e=>{switch(e){case"ds-fade":if(!customElements.get(s(e))){customElements.define(s(e),f)}break}}))}l();const g=f;const c=l;export{g as DsFade,c as defineCustomElement};
 //# sourceMappingURL=ds-fade.js.map

package/dist/components/ds-fade.js.map

@@ -1 +1 @@
-{"version":3,"names":["fadeCss","SIZE_VALUE","SURFACE_BACKGROUND","default","primary","secondary","navigation","media","inverted","Fade","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","shellGradientChrome","side","size","surface","background","visible","componentDidLoad","syncShellGradient","isShellGradientActive","el","closest","resolveSize","height","Object","prototype","hasOwnProperty","call","resolveBackground","render","isVerticalEdge","h","Host","key","class","fade","style"],"sources":["src/wc/components/Fade/Fade.css?tag=ds-fade&encapsulation=scoped","src/wc/components/Fade/Fade.tsx"],"sourcesContent":[":host {\n  --ds-fade-size: var(--dimension-size-600);\n  --ds-fade-bg: var(--color-background-secondary);\n  --ds-fade-offset: 0;\n\n  position: absolute;\n  pointer-events: none;\n  z-index: 10;\n  opacity: 1;\n  transform: translateZ(0);\n  backface-visibility: hidden;\n  transition: opacity var(--effect-motion-short-3);\n}\n\n:host(.fade--hidden) {\n  opacity: 0;\n}\n\n:host(.fade--vertical-edge) {\n  height: var(--ds-fade-size);\n}\n\n:host(.fade--horizontal-edge) {\n  width: var(--ds-fade-size);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host { transition: none; }\n}\n\n:host(.fade--top) {\n  top: var(--ds-fade-offset); left: 0; right: 0;\n  background: linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%);\n}\n\n:host(.fade--bottom) {\n  bottom: var(--ds-fade-offset); left: 0; right: 0;\n  background: linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--left) {\n  top: 0; bottom: 0; left: var(--ds-fade-offset);\n  background: linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--right) {\n  top: 0; bottom: 0; right: var(--ds-fade-offset);\n  background: linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n/* Shell gradient — base fill + wash (matches panel-nav / bar-nav ::before stacks). */\n:host(.fade--shell-gradient) {\n  background: transparent;\n}\n\n:host(.fade--shell-gradient)::before,\n:host(.fade--shell-gradient)::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n:host(.fade--shell-gradient.fade--top)::before {\n  background: linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--bottom)::before {\n  background: linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--left)::before {\n  background: linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--right)::before {\n  background: linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient)::after {\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n:host(.fade--shell-gradient.fade--shell-gradient-panel)::after {\n  background-position: var(--ds-shell-gradient-position-panel, 0 0);\n}\n\n:host(.fade--shell-gradient.fade--shell-gradient-bar)::after {\n  background-position: var(--ds-shell-gradient-position-bar, 0 0);\n}\n\n:host(.fade--shell-gradient.fade--top)::after {\n  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);\n  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--bottom)::after {\n  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);\n  mask-image: linear-gradient(to top, #000 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--left)::after {\n  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);\n  mask-image: linear-gradient(to right, #000 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--right)::after {\n  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);\n  mask-image: linear-gradient(to left, #000 0%, transparent 100%);\n}\n","import { Component, Prop, Element, State, h, Host } from '@stencil/core';\nimport { isShellGradientActive } from '../../nav/badge-gradient-ring';\n\nexport type FadeSide = 'top' | 'bottom' | 'left' | 'right';\nexport type FadeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'navigation'\n  | 'media'\n  | 'always-dark'\n  | 'inverted';\nexport type FadeSizeToken =\n  | 'size-000'\n  | 'size-050'\n  | 'size-075'\n  | 'size-100'\n  | 'size-150'\n  | 'size-200'\n  | 'size-250'\n  | 'size-300'\n  | 'size-400'\n  | 'size-500'\n  | 'size-600'\n  | 'size-800';\nexport type FadeSize = FadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<FadeSizeToken, string> = {\n  'size-000': 'var(--dimension-size-000)',\n  'size-050': 'var(--dimension-size-050)',\n  'size-075': 'var(--dimension-size-075)',\n  'size-100': 'var(--dimension-size-100)',\n  'size-150': 'var(--dimension-size-150)',\n  'size-200': 'var(--dimension-size-200)',\n  'size-250': 'var(--dimension-size-250)',\n  'size-300': 'var(--dimension-size-300)',\n  'size-400': 'var(--dimension-size-400)',\n  'size-500': 'var(--dimension-size-500)',\n  'size-600': 'var(--dimension-size-600)',\n  'size-800': 'var(--dimension-size-800)',\n};\n\nconst SURFACE_BACKGROUND: Record<FadeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  navigation: 'var(--color-navigation-background)',\n  media: 'var(--color-media-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n  inverted: 'var(--color-inverted-background)',\n};\n\n@Component({\n  tag: 'ds-fade',\n  styleUrl: 'Fade.css',\n  scoped: true,\n})\nexport class Fade {\n  @Element() el!: HTMLElement;\n\n  /** When under `ds-app-shell[gradient]`, composites the shell wash over the base fade. */\n  @State() private shellGradientChrome: 'panel' | 'bar' | null = null;\n\n  /** Edge where the fade is anchored. */\n  @Prop() side: FadeSide = 'bottom';\n\n  /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */\n  @Prop() size: FadeSize = 'size-600';\n\n  /**\n   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.\n   * Prefer `size`.\n   */\n  @Prop() height: string | undefined;\n\n  /** Surface context used to choose the fade target background token. */\n  @Prop() surface: FadeSurface = 'default';\n\n  /** Direct background override for contexts that already expose a resolved surface var. */\n  @Prop() background: string = 'var(--color-background-secondary)';\n\n  /** Controls visibility without removing the element from layout/positioning. */\n  @Prop() visible: boolean = true;\n\n  componentDidLoad() {\n    this.syncShellGradient();\n  }\n\n  private syncShellGradient() {\n    if (!isShellGradientActive(this.el)) {\n      this.shellGradientChrome = null;\n      return;\n    }\n    this.shellGradientChrome = this.el.closest('ds-bar-nav') ? 'bar' : 'panel';\n  }\n\n  private resolveSize(): string {\n    if (this.height) return this.height;\n\n    return Object.prototype.hasOwnProperty.call(SIZE_VALUE, this.size)\n      ? SIZE_VALUE[this.size as FadeSizeToken]\n      : this.size;\n  }\n\n  private resolveBackground(): string {\n    if (this.background !== 'var(--color-background-secondary)') return this.background;\n    return SURFACE_BACKGROUND[this.surface];\n  }\n\n  render() {\n    const isVerticalEdge = this.side === 'top' || this.side === 'bottom';\n\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          fade: true,\n          'fade--hidden': !this.visible,\n          'fade--vertical-edge': isVerticalEdge,\n          'fade--horizontal-edge': !isVerticalEdge,\n          'fade--shell-gradient': this.shellGradientChrome !== null,\n          'fade--shell-gradient-panel': this.shellGradientChrome === 'panel',\n          'fade--shell-gradient-bar': this.shellGradientChrome === 'bar',\n          [`fade--${this.side}`]: true,\n        }}\n        style={{\n          '--ds-fade-size': this.resolveSize(),\n          '--ds-fade-bg': this.resolveBackground(),\n        } as Record<string, string>}\n      />\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAU,IAAM,+iGC2BtB,MAAMC,EAA4C,CAChD,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,6BAGd,MAAMC,EAAkD,CACtDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,WAAY,qCACZC,MAAO,gCACP,cAAe,sCACfC,SAAU,oC,MAQCC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CASmBC,KAAAC,oBAA8C,KAGvDD,KAAAE,KAAiB,SAGjBF,KAAAG,KAAiB,WASjBH,KAAAI,QAAuB,UAGvBJ,KAAAK,WAAqB,oCAGrBL,KAAAM,QAAmB,IAkD5B,CAhDC,gBAAAC,GACEP,KAAKQ,mB,CAGC,iBAAAA,GACN,IAAKC,EAAsBT,KAAKU,IAAK,CACnCV,KAAKC,oBAAsB,KAC3B,M,CAEFD,KAAKC,oBAAsBD,KAAKU,GAAGC,QAAQ,cAAgB,MAAQ,O,CAG7D,WAAAC,GACN,GAAIZ,KAAKa,OAAQ,OAAOb,KAAKa,OAE7B,OAAOC,OAAOC,UAAUC,eAAeC,KAAK9B,EAAYa,KAAKG,MACzDhB,EAAWa,KAAKG,MAChBH,KAAKG,I,CAGH,iBAAAe,GACN,GAAIlB,KAAKK,aAAe,oCAAqC,OAAOL,KAAKK,WACzE,OAAOjB,EAAmBY,KAAKI,Q,CAGjC,MAAAe,GACE,MAAMC,EAAiBpB,KAAKE,OAAS,OAASF,KAAKE,OAAS,SAE5D,OACEmB,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,KAAM,KACN,gBAAiBzB,KAAKM,QACtB,sBAAuBc,EACvB,yBAA0BA,EAC1B,uBAAwBpB,KAAKC,sBAAwB,KACrD,6BAA8BD,KAAKC,sBAAwB,QAC3D,2BAA4BD,KAAKC,sBAAwB,MACzD,CAAC,SAASD,KAAKE,QAAS,MAE1BwB,MAAO,CACL,iBAAkB1B,KAAKY,cACvB,eAAgBZ,KAAKkB,sB","ignoreList":[]}
+{"version":3,"names":["fadeCss","SIZE_VALUE","SURFACE_BACKGROUND","default","primary","secondary","navigation","media","inverted","Fade","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","shellGradientChrome","side","size","surface","background","visible","componentDidLoad","syncShellGradient","isShellGradientActive","el","closest","resolveSize","height","Object","prototype","hasOwnProperty","call","resolveBackground","render","isVerticalEdge","h","Host","key","class","fade","style"],"sources":["src/wc/components/Fade/Fade.css?tag=ds-fade&encapsulation=scoped","src/wc/components/Fade/Fade.tsx"],"sourcesContent":[":host {\n  --ds-fade-size: var(--dimension-size-600);\n  --ds-fade-bg: var(--color-background-secondary);\n  --ds-fade-offset: 0;\n\n  position: absolute;\n  pointer-events: none;\n  z-index: 10;\n  opacity: 1;\n  transform: translateZ(0);\n  backface-visibility: hidden;\n  transition: opacity var(--effect-motion-short-3);\n}\n\n:host(.fade--hidden) {\n  opacity: 0;\n}\n\n:host(.fade--vertical-edge) {\n  height: var(--ds-fade-size);\n}\n\n:host(.fade--horizontal-edge) {\n  width: var(--ds-fade-size);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host { transition: none; }\n}\n\n:host(.fade--top) {\n  top: var(--ds-fade-offset); left: 0; right: 0;\n  background: linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%);\n}\n\n:host(.fade--bottom) {\n  bottom: var(--ds-fade-offset); left: 0; right: 0;\n  background: linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--left) {\n  top: 0; bottom: 0; left: var(--ds-fade-offset);\n  background: linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--right) {\n  top: 0; bottom: 0; right: var(--ds-fade-offset);\n  background: linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n/* Shell gradient — base fill + wash (matches panel-nav / bar-nav ::before stacks). */\n:host(.fade--shell-gradient) {\n  background: transparent;\n}\n\n:host(.fade--shell-gradient)::before,\n:host(.fade--shell-gradient)::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n:host(.fade--shell-gradient.fade--top)::before {\n  background: linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--bottom)::before {\n  background: linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--left)::before {\n  background: linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--right)::before {\n  background: linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient)::after {\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n  background-position: 0 0;\n  background-attachment: fixed;\n}\n\n:host(.fade--shell-gradient.fade--top)::after {\n  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);\n  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--bottom)::after {\n  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);\n  mask-image: linear-gradient(to top, #000 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--left)::after {\n  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);\n  mask-image: linear-gradient(to right, #000 0%, transparent 100%);\n}\n\n:host(.fade--shell-gradient.fade--right)::after {\n  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);\n  mask-image: linear-gradient(to left, #000 0%, transparent 100%);\n}\n","import { Component, Prop, Element, State, h, Host } from '@stencil/core';\nimport { isShellGradientActive } from '../../nav/badge-gradient-ring';\n\nexport type FadeSide = 'top' | 'bottom' | 'left' | 'right';\nexport type FadeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'navigation'\n  | 'media'\n  | 'always-dark'\n  | 'inverted';\nexport type FadeSizeToken =\n  | 'size-000'\n  | 'size-050'\n  | 'size-075'\n  | 'size-100'\n  | 'size-150'\n  | 'size-200'\n  | 'size-250'\n  | 'size-300'\n  | 'size-400'\n  | 'size-500'\n  | 'size-600'\n  | 'size-800';\nexport type FadeSize = FadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<FadeSizeToken, string> = {\n  'size-000': 'var(--dimension-size-000)',\n  'size-050': 'var(--dimension-size-050)',\n  'size-075': 'var(--dimension-size-075)',\n  'size-100': 'var(--dimension-size-100)',\n  'size-150': 'var(--dimension-size-150)',\n  'size-200': 'var(--dimension-size-200)',\n  'size-250': 'var(--dimension-size-250)',\n  'size-300': 'var(--dimension-size-300)',\n  'size-400': 'var(--dimension-size-400)',\n  'size-500': 'var(--dimension-size-500)',\n  'size-600': 'var(--dimension-size-600)',\n  'size-800': 'var(--dimension-size-800)',\n};\n\nconst SURFACE_BACKGROUND: Record<FadeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  navigation: 'var(--color-navigation-background)',\n  media: 'var(--color-media-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n  inverted: 'var(--color-inverted-background)',\n};\n\n@Component({\n  tag: 'ds-fade',\n  styleUrl: 'Fade.css',\n  scoped: true,\n})\nexport class Fade {\n  @Element() el!: HTMLElement;\n\n  /** When under `ds-app-shell[gradient]`, composites the shell wash over the base fade. */\n  @State() private shellGradientChrome: 'panel' | 'bar' | null = null;\n\n  /** Edge where the fade is anchored. */\n  @Prop() side: FadeSide = 'bottom';\n\n  /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */\n  @Prop() size: FadeSize = 'size-600';\n\n  /**\n   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.\n   * Prefer `size`.\n   */\n  @Prop() height: string | undefined;\n\n  /** Surface context used to choose the fade target background token. */\n  @Prop() surface: FadeSurface = 'default';\n\n  /** Direct background override for contexts that already expose a resolved surface var. */\n  @Prop() background: string = 'var(--color-background-secondary)';\n\n  /** Controls visibility without removing the element from layout/positioning. */\n  @Prop() visible: boolean = true;\n\n  componentDidLoad() {\n    this.syncShellGradient();\n  }\n\n  private syncShellGradient() {\n    if (!isShellGradientActive(this.el)) {\n      this.shellGradientChrome = null;\n      return;\n    }\n    this.shellGradientChrome = this.el.closest('ds-bar-nav') ? 'bar' : 'panel';\n  }\n\n  private resolveSize(): string {\n    if (this.height) return this.height;\n\n    return Object.prototype.hasOwnProperty.call(SIZE_VALUE, this.size)\n      ? SIZE_VALUE[this.size as FadeSizeToken]\n      : this.size;\n  }\n\n  private resolveBackground(): string {\n    if (this.background !== 'var(--color-background-secondary)') return this.background;\n    return SURFACE_BACKGROUND[this.surface];\n  }\n\n  render() {\n    const isVerticalEdge = this.side === 'top' || this.side === 'bottom';\n\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          fade: true,\n          'fade--hidden': !this.visible,\n          'fade--vertical-edge': isVerticalEdge,\n          'fade--horizontal-edge': !isVerticalEdge,\n          'fade--shell-gradient': this.shellGradientChrome !== null,\n          'fade--shell-gradient-panel': this.shellGradientChrome === 'panel',\n          'fade--shell-gradient-bar': this.shellGradientChrome === 'bar',\n          [`fade--${this.side}`]: true,\n        }}\n        style={{\n          '--ds-fade-size': this.resolveSize(),\n          '--ds-fade-bg': this.resolveBackground(),\n        } as Record<string, string>}\n      />\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAU,IAAM,21FC2BtB,MAAMC,EAA4C,CAChD,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,6BAGd,MAAMC,EAAkD,CACtDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,WAAY,qCACZC,MAAO,gCACP,cAAe,sCACfC,SAAU,oC,MAQCC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CASmBC,KAAAC,oBAA8C,KAGvDD,KAAAE,KAAiB,SAGjBF,KAAAG,KAAiB,WASjBH,KAAAI,QAAuB,UAGvBJ,KAAAK,WAAqB,oCAGrBL,KAAAM,QAAmB,IAkD5B,CAhDC,gBAAAC,GACEP,KAAKQ,mB,CAGC,iBAAAA,GACN,IAAKC,EAAsBT,KAAKU,IAAK,CACnCV,KAAKC,oBAAsB,KAC3B,M,CAEFD,KAAKC,oBAAsBD,KAAKU,GAAGC,QAAQ,cAAgB,MAAQ,O,CAG7D,WAAAC,GACN,GAAIZ,KAAKa,OAAQ,OAAOb,KAAKa,OAE7B,OAAOC,OAAOC,UAAUC,eAAeC,KAAK9B,EAAYa,KAAKG,MACzDhB,EAAWa,KAAKG,MAChBH,KAAKG,I,CAGH,iBAAAe,GACN,GAAIlB,KAAKK,aAAe,oCAAqC,OAAOL,KAAKK,WACzE,OAAOjB,EAAmBY,KAAKI,Q,CAGjC,MAAAe,GACE,MAAMC,EAAiBpB,KAAKE,OAAS,OAASF,KAAKE,OAAS,SAE5D,OACEmB,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,KAAM,KACN,gBAAiBzB,KAAKM,QACtB,sBAAuBc,EACvB,yBAA0BA,EAC1B,uBAAwBpB,KAAKC,sBAAwB,KACrD,6BAA8BD,KAAKC,sBAAwB,QAC3D,2BAA4BD,KAAKC,sBAAwB,MACzD,CAAC,SAASD,KAAKE,QAAS,MAE1BwB,MAAO,CACL,iBAAkB1B,KAAKY,cACvB,eAAgBZ,KAAKkB,sB","ignoreList":[]}