@ds-mo/ui 1.11.5 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/components/ds-bar-nav.js +1 -1
  3. package/dist/components/ds-bar-nav.js.map +1 -1
  4. package/dist/components/ds-checkbox.js +1 -1
  5. package/dist/components/ds-field.js +1 -1
  6. package/dist/components/ds-panel-nav.js +1 -1
  7. package/dist/components/ds-panel-tools.js +1 -1
  8. package/dist/components/ds-slider.js +1 -1
  9. package/dist/components/ds-toggle.js +1 -1
  10. package/dist/components/p-BOQnc-M4.js +2 -0
  11. package/dist/components/p-BOQnc-M4.js.map +1 -0
  12. package/dist/types/components/BarNav/BarNav.d.ts +2 -17
  13. package/dist/types/components/BarNav/bar-nav-utils.d.ts +3 -3
  14. package/dist/types/components.d.ts +2 -28
  15. package/package.json +1 -1
  16. package/src/angular/proxies.ts +3 -8
  17. package/src/react/ds-bar-nav.ts +2 -8
  18. package/src/wc/components/BarNav/BarNav.tsx +4 -76
  19. package/src/wc/components/BarNav/bar-nav-utils.ts +3 -12
  20. package/src/wc/components.d.ts +2 -28
  21. package/dist/components/p-Dl1GvZQ2.js +0 -2
  22. package/dist/components/p-Dl1GvZQ2.js.map +0 -1
package/dist/.build-stamp CHANGED
@@ -1 +1 @@
1
- 1783106409493
1
+ 1783112533512
package/dist/components/ds-bar-nav.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as s,H as t,c as e,h as a,a as i,t as n}from"./index.js";import{g as r,i as o}from"./p-BQq26pt9.js";import{s as h,p as d,d as b}from"./p-Dl1GvZQ2.js";import{C as l,c,a as v,b as f,r as u,d as g}from"./p-BiM6QBTF.js";import{d as p}from"./p-CiEc8Nwx.js";import{d as m}from"./p-CCZFMcLe.js";import{d as _}from"./p-DqBCQRRd.js";import{d as y}from"./p-CuuuDjJJ.js";import{d as w}from"./p-DlsexsFg.js";function k(s,t){if(!s)return null;const e=s.shadowRoot??s;return e.querySelector(t)}function C(s){return k(s,'[role="tablist"]')}function x(s,t){const e=[];let a=[];for(const i of s){if(o(i)){if(a.length>0){e.push({items:a});a=[]}continue}a.push({label:i.label,value:i.id,isSelected:i.id===t,isInactive:i.disabled})}if(a.length>0){e.push({items:a})}return e}function T(s,t){const e=r(s);return e.find((s=>s.id===t))??e[0]}function z(s,t){return T(s,t)?.label??"Tabs"}function D(s,t,e,a=2){const i=s-t;if(e){return i>-a}return i>a}const P=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[gradient] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap: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 S=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=e(this,"dsTabChange");this.dsActionChange=e(this,"dsActionChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new l;this.panelToolsTransition=new l;this.overflowCoalescer=c((()=>{this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=u(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=g(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=u(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return z(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!T(this.resolvedTabs,this.effectiveValue)?.dot}digestTabsConfig(s){return s.map((s=>o(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.syncTriggerLabelObserver(true);this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(v,this.onChromeTransitionStart);s.addEventListener(f,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(v,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(h(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const e=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(e)}};queueMicrotask(e)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}syncTriggerLabelObserver(s=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(s||!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 s=this.triggerLabelTextEl;if(!s||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const t=s.scrollWidth>s.clientWidth+1;if(t!==this.triggerLabelTruncated){this.triggerLabelTruncated=t}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=parseFloat(s.columnGap||s.gap||"0")||0;const e=this.headerEl.querySelector(".bar-nav__actions");const a=e?.offsetWidth??0;const i=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:e?t:0;const r=this.headerEl.clientWidth-i-a-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const s=C(this.probeTabGroupEl);return s?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabsCollapsed=s;if(!s){this.menuOpen=false}this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getTabsIntrinsicWidth();if(t===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=D(t,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false}}this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}incomingTabs(){return this.tabsJson?d(this.tabsJson,[]):this.tabs??[]}incomingActions(){return this.actionsJson?d(this.actionsJson,[]):this.actions??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resolvedActions=this.incomingActions();this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const e=this.incomingTabs();const a=this.digestTabsConfig(e)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=e;this.resolvedActions=this.incomingActions();this.syncValueFromUrl();this.committedSection=s;if(a){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=x(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:e}=b(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=e}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=k(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}handleTabChange(s){this.selectTab(s.detail)}handleActionChange(s,t){const e=t.detail;this.dsActionChange.emit({id:s,selected:e})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(s){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(s.key==="ArrowDown"||s.key==="ArrowUp"||s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu()}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}render(){const s=this.basePath!==""&&this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.basePath||"no-section";return a(i,{key:"1cde49608302dfc07daf4be285e1f591e459f8be"},a("header",{key:"ad1737b497bfc6f342153ffb063a368fb0383917",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.tabLayoutCommitted&&this.tabsCollapsed},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&a("div",{key:"d48411a47b95232ac268014dc6d02d9cd235a0c0",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},a("ds-tab-group-nav",{key:`probe-${e}`,ref:s=>{const t=s??null;if(t===this.probeTabGroupEl)return;this.probeTabGroupEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),t&&this.tabLayoutCommitted&&!this.tabsCollapsed&&a("div",{key:"0c26c6441a225e80f1f636e8f11b77bddbd5343d",class:"bar-nav__left"},a("ds-tab-group-nav",{key:`visible-${e}`,class:"bar-nav__tabs-visible",ref:s=>{this.visibleTabGroupEl=s??null},tabs:this.resolvedTabs,value:this.effectiveValue,onDsChange:s=>this.handleTabChange(s)})),t&&!this.tabLayoutCommitted&&a("div",{key:"e2966af46e3fd044b81981923bb15e1fa49d95ef",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&a("span",{key:"a900ef7d0b4f84aa88d98c9900478a63fbb5c421",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),t&&this.tabLayoutCommitted&&this.tabsCollapsed&&a("button",{key:"78d3e9ece92a2efa508883e529cadd19df26c3b3",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:s=>{this.triggerEl=s},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:s=>this.handleTriggerKeyDown(s)},a("span",{key:"523a16138115e9605d61cb06e5ee8289d880636b",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},a("span",{key:"8de1274c331cbfde36b19d64e6c036f7e0a0508f",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:s=>{const t=s??null;if(t===this.triggerLabelTextEl)return;this.triggerLabelTextEl=t;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&a("ds-badge",{key:"1ae32e4f112a5ccb54112d0e8f1550a355f5dfee",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),a("ds-icon",{key:"1532597b5bd6a7e9dcc303fc8592c3237425b540",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),t&&this.tabLayoutCommitted&&this.tabsCollapsed&&this.resolvedActions.length>0&&a("div",{key:"3079fa97e37c59cdd2b7c7d821f93e3196154d90",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&a("div",{key:"840d8437a554eb14e4c4742f7ebb7cb2e1c5cbc9",class:"bar-nav__actions"},this.resolvedActions.map((s=>a("ds-bar-nav-action",{key:s.id,icon:s.icon,selected:s.selected??false,dot:s.dot??false,inactive:s.inactive,"aria-label":s.ariaLabel??s.id,onDsChange:t=>this.handleActionChange(s.id,t)}))))),t&&this.tabLayoutCommitted&&this.tabsCollapsed&&a("ds-menu",{key:"3338457ed4eaa059c87272ff7418d5f32052e823",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:x(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:s=>this.handleMenuSelect(s),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 P()}},[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}]}]);S.HOST_PROP_SYNC_BUDGET=8;S.INTRINSIC_WIDTH_RETRY_MAX=3;S.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;S.OVERFLOW_HYSTERESIS_PX=8;function H(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(n(s))){customElements.define(n(s),S)}break;case"ds-badge":if(!customElements.get(n(s))){p()}break;case"ds-bar-nav-action":if(!customElements.get(n(s))){m()}break;case"ds-icon":if(!customElements.get(n(s))){_()}break;case"ds-menu":if(!customElements.get(n(s))){y()}break;case"ds-tab-group-nav":if(!customElements.get(n(s))){w()}break}}))}H();const O=S;const F=H;export{O as DsBarNav,F as defineCustomElement};
1
+ import{p as t,H as s,c as e,h as a,a as i,t as r}from"./index.js";import{g as n,i as o}from"./p-BQq26pt9.js";import{s as h,p as d,d as b}from"./p-BOQnc-M4.js";import{C as l,c,a as v,b as f,r as u,d as g}from"./p-BiM6QBTF.js";import{d as p}from"./p-CiEc8Nwx.js";import{d as m}from"./p-DqBCQRRd.js";import{d as _}from"./p-CuuuDjJJ.js";import{d as y}from"./p-DlsexsFg.js";function w(t,s){if(!t)return null;const e=t.shadowRoot??t;return e.querySelector(s)}function k(t){return w(t,'[role="tablist"]')}function x(t,s){const e=[];let a=[];for(const i of t){if(o(i)){if(a.length>0){e.push({items:a});a=[]}continue}a.push({label:i.label,value:i.id,isSelected:i.id===s,isInactive:i.disabled})}if(a.length>0){e.push({items:a})}return e}function C(t,s){const e=n(t);return e.find((t=>t.id===s))??e[0]}function T(t,s){return C(t,s)?.label??"Tabs"}function z(t,s,e,a=2){const i=t-s;if(e){return i>-a}return i>a}const D=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[gradient] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:1 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.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__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}`;const O=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsTabChange=e(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.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.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new l;this.panelToolsTransition=new l;this.overflowCoalescer=c((()=>{this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=t=>{const s=u(t);if(s==="panel-nav"){this.panelNavTransition.enter();return}if(s==="panel-tools"){const s=g(t)??"opening";if(s==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=t=>{const s=u(t);if(s==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(s==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return T(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!C(this.resolvedTabs,this.effectiveValue)?.dot}digestTabsConfig(t){return t.map((t=>o(t)?"|":t.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(t){if(this.menuEl){this.menuEl.open=t}}onTabsCollapsedChange(t,s){if(!t){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(t){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(t||s===undefined||s===t)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.syncTriggerLabelObserver(true);this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const t=this.el.closest("ds-app-shell");if(!t)return;this.chromeTransitionShell=t;t.addEventListener(v,this.onChromeTransitionStart);t.addEventListener(f,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(v,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(h(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let s=t.HOST_PROP_SYNC_BUDGET;const e=()=>{this.syncHostPropsIfNeeded();if(--s>0){requestAnimationFrame(e)}};queueMicrotask(e)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}syncTriggerLabelObserver(t=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(t||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const t=this.triggerLabelTextEl;if(!t||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const s=t.scrollWidth>t.clientWidth+1;if(s!==this.triggerLabelTruncated){this.triggerLabelTruncated=s}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const t=getComputedStyle(this.headerEl);const s=(parseFloat(t.paddingLeft)||0)+(parseFloat(t.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-s)}getTabsIntrinsicWidth(){const t=k(this.probeTabGroupEl);return t?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=t.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabsCollapsed=t;if(!t){this.menuOpen=false}this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const s=this.getTabsIntrinsicWidth();if(s===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=t.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=t.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=z(s,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,t.OVERFLOW_HYSTERESIS_PX);if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false}}this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(t){const s=t.detail;if(s?.value!==undefined){this.selectTab(String(s.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}incomingTabs(){return this.tabsJson?d(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const t=this.basePath;const s=t!==""&&this.committedSection!==""&&t!==this.committedSection;if(s){this.urlDerivedValue="";this.committedSection="";this.pendingSection=t;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!t||t!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const s=this.incomingTabs();if(s.length===0){return}this.pendingSection=""}const e=this.incomingTabs();const a=this.digestTabsConfig(e)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=e;this.syncValueFromUrl();this.committedSection=t;if(a){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=x(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){const t=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:s,hideTabs:e}=b(this.currentUrl,this.basePath,t);this.urlDerivedValue=s;this.hideTabsForDetailRoute=e}selectTab(t){this.value=t;this.dsTabChange.emit(t)}focusVisibleSelectedTab(){const t=w(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);t?.focus({preventScroll:true})}handleTabChange(t){this.selectTab(t.detail)}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(t){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(t.key==="ArrowDown"||t.key==="ArrowUp"||t.key==="Enter"||t.key===" "){t.preventDefault();this.toggleTabMenu()}return}if(t.key==="Escape"){t.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}render(){const t=this.basePath!==""&&this.committedSection===this.basePath;const s=t&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.basePath||"no-section";return a(i,{key:"03cc8f27a798f26c0529f7624728ba73746a11a7"},a("header",{key:"d89a36eca95575e9eee36f05e07e32ad49be9a12",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":s&&this.tabLayoutCommitted&&this.tabsCollapsed},ref:t=>{this.headerEl=t;if(t&&!this.resizeObserver){this.setupOverflowObserver()}}},s&&a("div",{key:"bbd4362cdf3fbf79fb4c0df3753cb0be3659134f",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},a("ds-tab-group-nav",{key:`probe-${e}`,ref:t=>{const s=t??null;if(s===this.probeTabGroupEl)return;this.probeTabGroupEl=s;if(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),s&&this.tabLayoutCommitted&&!this.tabsCollapsed&&a("div",{key:"b1fdc4e235181eee7f40f19b50e9d11bc23597e5",class:"bar-nav__left"},a("ds-tab-group-nav",{key:`visible-${e}`,class:"bar-nav__tabs-visible",ref:t=>{this.visibleTabGroupEl=t??null},tabs:this.resolvedTabs,value:this.effectiveValue,onDsChange:t=>this.handleTabChange(t)})),s&&!this.tabLayoutCommitted&&a("div",{key:"479bedcd38a24a83d0ae7f0a046428541f79e057",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!s&&this.heading&&a("span",{key:"b7f782ff79e70c2018ed7d51777a55773946d8a0",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),s&&this.tabLayoutCommitted&&this.tabsCollapsed&&a("button",{key:"5be9466d91647940bcccc74a4e7f8e4af3f4d918",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:t=>{this.triggerEl=t},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:t=>this.handleTriggerKeyDown(t)},a("span",{key:"8f23ff702cc442e41dfa46b8068cb83d42cf04e9",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},a("span",{key:"4293b520435803b3f4e09fdd8c09ec32e600acd0",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:t=>{const s=t??null;if(s===this.triggerLabelTextEl)return;this.triggerLabelTextEl=s;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&a("ds-badge",{key:"d6f6a4ae393363bccc6024b6a06efabc7a2274f4",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),a("ds-icon",{key:"725fa4a9ab7c5d7c0ce88e79914002fb7da922e8",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"}))),s&&this.tabLayoutCommitted&&this.tabsCollapsed&&a("ds-menu",{key:"5f3378a2b4a1b16c0c4feaaf074695da52d9ecfa",ref:t=>{this.menuEl=t??null},open:this.menuOpen,sections:x(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}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return D()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);O.HOST_PROP_SYNC_BUDGET=8;O.INTRINSIC_WIDTH_RETRY_MAX=3;O.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;O.OVERFLOW_HYSTERESIS_PX=8;function S(){if(typeof customElements==="undefined"){return}const t=["ds-bar-nav","ds-badge","ds-icon","ds-menu","ds-tab-group-nav"];t.forEach((t=>{switch(t){case"ds-bar-nav":if(!customElements.get(r(t))){customElements.define(r(t),O)}break;case"ds-badge":if(!customElements.get(r(t))){p()}break;case"ds-icon":if(!customElements.get(r(t))){m()}break;case"ds-menu":if(!customElements.get(r(t))){_()}break;case"ds-tab-group-nav":if(!customElements.get(r(t))){y()}break}}))}S();const P=O;const H=S;export{P as DsBarNav,H as defineCustomElement};
2
2
  //# sourceMappingURL=ds-bar-nav.js.map
package/dist/components/ds-bar-nav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","tabs","selectedId","sections","batch","item","isTabDivider","length","push","items","label","value","id","isSelected","isInactive","disabled","getActiveTab","selectable","getSelectableTabs","find","tab","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","tabsJson","actions","actionsJson","basePath","currentUrl","resolvedTabs","resolvedActions","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","intrinsicWidthRetryCount","tabLayoutPendingFrames","panelNavTransition","ChromeTransitionDepth","panelToolsTransition","overflowCoalescer","createRafCoalescer","updateTabsCollapsed","updateTriggerLabelTruncation","chromeTransitionShell","committedSection","pendingSection","onChromeTransitionStart","event","source","readChromeTransitionSource","enter","phase","readChromeTransitionPhase","onChromeTransitionEnd","exit","isActive","scheduleOverflowCheck","effectiveValue","activeTabLabel","activeTabHasDot","dot","digestTabsConfig","map","t","join","resetTabOverflowLayout","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","bindChromeTransitionListeners","componentDidRender","chromeOverflowPaused","syncMenuAnchor","disconnectedCallback","disconnect","cancel","unbindChromeTransitionListeners","shell","el","closest","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","removeEventListener","shouldResyncBarNavProps","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","schedule","disconnectOnly","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","forceTabLayoutCommit","fallbackCollapsed","intrinsicWidth","TAB_LAYOUT_COMMIT_MAX_FRAMES","shouldCollapse","OVERFLOW_HYSTERESIS_PX","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","incomingTabs","parseJsonArrayProp","incomingActions","nextBasePath","sectionChanged","startsWith","tabsConfigChanged","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","next","onDsChange","heading","type","onClick","onKeyDown","variant","background","name","size","color","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["export type QueryableHost = {\n shadowRoot?: ShadowRoot | null;\n querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n host: QueryableHost | null | undefined,\n selector: string,\n): HTMLElement | null {\n if (!host) return null;\n const root = host.shadowRoot ?? host;\n return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuSection['items'] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n isSelected: item.id === selectedId,\n isInactive: item.disabled,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n",":host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash + grid) — bar is a transparent frame. */\n:host-context(ds-app-shell[gradient]) .bar-nav,\n:host-context(ds-app-shell[grid]) .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 { isTabDivider } from '../TabGroup/tab-item-utils';\nimport type { BarNavActionItem, BarNavTab } from './bar-nav-types';\nimport {\n deriveBarNavValueFromUrl,\n parseJsonArrayProp,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n getTabListFromTabGroup,\n queryWithinComponentHost,\n type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n getActiveTab,\n getActiveTabLabel,\n tabsOverflowContainer,\n tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionDepth,\n createRafCoalescer,\n readChromeTransitionSource,\n readChromeTransitionPhase,\n} from '../../nav/chrome-transition';\n\n@Component({\n tag: 'ds-bar-nav',\n styleUrl: 'BarNav.css',\n scoped: true,\n})\nexport class BarNav {\n /** Style slot: `dashboard` or `settings`. Colors match for now. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n @Element() el!: HTMLElement;\n\n /**\n * Tab items for the left section.\n * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n */\n @Prop() tabs: BarNavTab[] = [];\n\n /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Action items rendered in the right section.\n * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n */\n @Prop() actions: BarNavActionItem[] = [];\n\n /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n /**\n * Fallback heading shown when no tabs are provided.\n * When tabs are present the heading is hidden.\n */\n @Prop() heading: string | undefined;\n\n /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n @Prop() basePath: string = '';\n\n /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n @Prop() currentUrl: string = '';\n\n /** Emitted when the active tab changes. Detail = tab id. */\n @Event() dsTabChange!: EventEmitter<string>;\n\n /** Emitted when an action button is toggled. Detail = { id, selected }. */\n @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n @State() private resolvedTabs: BarNavTab[] = [];\n @State() private resolvedActions: BarNavActionItem[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private triggerLabelTruncated = false;\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: HTMLButtonElement | null = null;\n private triggerLabelTextEl: HTMLElement | null = null;\n private triggerLabelObserver: ResizeObserver | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabGroupEl: QueryableHost | null = null;\n private probeTabGroupEl: QueryableHost | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private intrinsicWidthRetryCount = 0;\n private tabLayoutPendingFrames = 0;\n private readonly panelNavTransition = new ChromeTransitionDepth();\n private readonly panelToolsTransition = new ChromeTransitionDepth();\n private readonly overflowCoalescer = createRafCoalescer(() => {\n this.updateTabsCollapsed();\n this.updateTriggerLabelTruncation();\n });\n private chromeTransitionShell: HTMLElement | null = null;\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 private digestTabsConfig(tabs: BarNavTab[]): string {\n return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n }\n\n private resetTabOverflowLayout() {\n this.tabLayoutCommitted = false;\n this.tabsCollapsed = false;\n this.menuOpen = false;\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n }\n\n @Watch('tabs')\n @Watch('tabsJson')\n @Watch('actions')\n @Watch('actionsJson')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuEl = null;\n this.triggerLabelTruncated = false;\n this.syncTriggerLabelObserver();\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n this.syncTriggerLabelObserver();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.bindChromeTransitionListeners();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n if (this.chromeOverflowPaused()) {\n this.syncMenuAnchor();\n return;\n }\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n if (this.tabsCollapsed) {\n this.updateTriggerLabelTruncation();\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.overflowCoalescer.cancel();\n this.syncTriggerLabelObserver(true);\n this.unbindChromeTransitionListeners();\n }\n\n private bindChromeTransitionListeners() {\n const shell = this.el.closest('ds-app-shell');\n if (!shell) return;\n this.chromeTransitionShell = shell;\n shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n private unbindChromeTransitionListeners() {\n if (!this.chromeTransitionShell) return;\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_START,\n this.onChromeTransitionStart,\n );\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_END,\n this.onChromeTransitionEnd,\n );\n this.chromeTransitionShell = null;\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.enter();\n return;\n }\n if (source === 'panel-tools') {\n const phase = readChromeTransitionPhase(event) ?? 'opening';\n if (phase === 'closing') {\n this.panelToolsTransition.enter();\n }\n }\n };\n\n private chromeOverflowPaused(): boolean {\n return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n }\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleOverflowCheck();\n }\n return;\n }\n if (source === 'panel-tools') {\n this.panelToolsTransition.exit();\n this.scheduleOverflowCheck();\n }\n };\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (\n shouldResyncBarNavProps(\n this.resolvedTabs,\n this.tabs,\n this.tabsJson,\n this.resolvedActions,\n this.actions,\n this.actionsJson,\n )\n ) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => {\n if (this.chromeOverflowPaused()) return;\n this.scheduleOverflowCheck();\n });\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.chromeOverflowPaused()) return;\n this.overflowCoalescer.schedule();\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 forceTabLayoutCommit(fallbackCollapsed: boolean) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.tabsCollapsed = fallbackCollapsed;\n if (!fallbackCollapsed) {\n this.menuOpen = false;\n }\n this.tabLayoutCommitted = true;\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 this.tabLayoutPendingFrames = 0;\n this.tabLayoutCommitted = true;\n return;\n }\n\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (intrinsicWidth === 0) {\n this.tabLayoutPendingFrames += 1;\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n this.forceTabLayoutCommit(false);\n } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n this.forceTabLayoutCommit(false);\n } else {\n this.scheduleIntrinsicWidthRetry();\n }\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n BarNav.OVERFLOW_HYSTERESIS_PX,\n );\n\n if (shouldCollapse !== this.tabsCollapsed) {\n this.tabsCollapsed = shouldCollapse;\n if (!shouldCollapse) {\n this.menuOpen = false;\n }\n }\n\n this.tabLayoutCommitted = true;\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 this.resetTabOverflowLayout();\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 const tabs = this.incomingTabs();\n const tabsConfigChanged =\n this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n this.resolvedTabs = tabs;\n this.resolvedActions = this.incomingActions();\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n if (tabsConfigChanged) {\n this.resetTabOverflowLayout();\n }\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':\n hasTabs && this.tabLayoutCommitted && 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 const next = el ?? null;\n if (next === this.probeTabGroupEl) return;\n this.probeTabGroupEl = next;\n if (next) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.scheduleOverflowCheck();\n }\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n />\n </div>\n )}\n\n {hasTabs && this.tabLayoutCommitted && !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.tabLayoutCommitted && (\n <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n )}\n\n {!hasTabs && this.heading && (\n <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n )}\n\n {hasTabs && this.tabLayoutCommitted && 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 &&\n this.tabLayoutCommitted &&\n this.tabsCollapsed &&\n 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.tabLayoutCommitted && 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":[]}
1
+ {"version":3,"names":["queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","tabs","selectedId","sections","batch","item","isTabDivider","length","push","items","label","value","id","isSelected","isInactive","disabled","getActiveTab","selectable","getSelectableTabs","find","tab","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","tabsJson","basePath","currentUrl","resolvedTabs","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","triggerLabelTruncated","headerEl","triggerEl","triggerLabelTextEl","triggerLabelObserver","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","intrinsicWidthRetryCount","tabLayoutPendingFrames","panelNavTransition","ChromeTransitionDepth","panelToolsTransition","overflowCoalescer","createRafCoalescer","updateTabsCollapsed","updateTriggerLabelTruncation","chromeTransitionShell","committedSection","pendingSection","onChromeTransitionStart","event","source","readChromeTransitionSource","enter","phase","readChromeTransitionPhase","onChromeTransitionEnd","exit","isActive","scheduleOverflowCheck","effectiveValue","activeTabLabel","activeTabHasDot","dot","digestTabsConfig","map","t","join","resetTabOverflowLayout","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","syncTriggerLabelObserver","requestAnimationFrame","undefined","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","bindChromeTransitionListeners","componentDidRender","chromeOverflowPaused","syncMenuAnchor","disconnectedCallback","disconnect","cancel","unbindChromeTransitionListeners","shell","el","closest","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","removeEventListener","shouldResyncBarNavProps","syncValueFromUrl","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","schedule","disconnectOnly","truncated","scrollWidth","clientWidth","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","Math","max","getTabsIntrinsicWidth","tabList","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","forceTabLayoutCommit","fallbackCollapsed","intrinsicWidth","TAB_LAYOUT_COMMIT_MAX_FRAMES","shouldCollapse","OVERFLOW_HYSTERESIS_PX","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","incomingTabs","parseJsonArrayProp","nextBasePath","sectionChanged","startsWith","tabsConfigChanged","hideTabs","deriveBarNavValueFromUrl","dsTabChange","emit","focus","preventScroll","handleTabChange","toggleTabMenu","minWidth","offsetWidth","handleTriggerKeyDown","key","preventDefault","render","sectionReady","hasTabs","tabGroupKey","h","Host","class","ref","inert","next","onDsChange","heading","type","onClick","onKeyDown","variant","background","name","size","color","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["export type QueryableHost = {\n shadowRoot?: ShadowRoot | null;\n querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n host: QueryableHost | null | undefined,\n selector: string,\n): HTMLElement | null {\n if (!host) return null;\n const root = host.shadowRoot ?? host;\n return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/menu-types';\nimport {\n getSelectableTabs,\n isTabDivider,\n type TabItem,\n type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n const sections: MenuSection[] = [];\n let batch: MenuSection['items'] = [];\n\n for (const item of tabs) {\n if (isTabDivider(item)) {\n if (batch.length > 0) {\n sections.push({ items: batch });\n batch = [];\n }\n continue;\n }\n\n batch.push({\n label: item.label,\n value: item.id,\n isSelected: item.id === selectedId,\n isInactive: item.disabled,\n });\n }\n\n if (batch.length > 0) {\n sections.push({ items: batch });\n }\n\n return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n const selectable = getSelectableTabs(tabs);\n return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n tabListScrollWidth: number,\n containerClientWidth: number,\n collapsed: boolean,\n hysteresis = 2,\n): boolean {\n const diff = tabListScrollWidth - containerClientWidth;\n if (collapsed) {\n return diff > -hysteresis;\n }\n return diff > hysteresis;\n}\n",":host {\n display: block;\n}\n\n.bar-nav {\n display: flex;\n align-items: center;\n position: relative;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n gap: var(--dimension-space-100);\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012) solid var(--_bar-nav-border);\n background-color: var(--_bar-nav-bg);\n color: var(--_bar-nav-fg-primary);\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-3),\n border-color var(--effect-motion-short-3),\n color var(--effect-motion-short-3);\n isolation: isolate;\n /* Default chrome — app surfaces */\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Style slots — same app tokens for now; hook texture/glyph layers later. */\n.bar-nav--dashboard,\n.bar-nav--settings {\n --_bar-nav-bg: var(--color-background-secondary);\n --_bar-nav-border: var(--color-border-tertiary);\n --_bar-nav-fg-primary: var(--color-foreground-primary);\n --_bar-nav-fg-secondary: var(--color-foreground-secondary);\n --_bar-nav-hover: var(--color-interaction-hover);\n --_bar-nav-pressed: var(--color-interaction-pressed);\n --_bar-nav-focus: var(--color-interaction-focus);\n --_bar-nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* Shell-owned chrome (bg + wash + grid) — bar is a transparent frame. */\n:host-context(ds-app-shell[gradient]) .bar-nav,\n:host-context(ds-app-shell[grid]) .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 — trigger grows to fill the header row. */\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: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n width: auto;\n overflow: hidden;\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/* Expanded tabs — consume full header width */\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","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 { isTabDivider } from '../TabGroup/tab-item-utils';\nimport type { BarNavTab } from './bar-nav-types';\nimport {\n deriveBarNavValueFromUrl,\n parseJsonArrayProp,\n shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n getTabListFromTabGroup,\n queryWithinComponentHost,\n type QueryableHost,\n} from './bar-nav-dom-utils';\nimport {\n getActiveTab,\n getActiveTabLabel,\n tabsOverflowContainer,\n tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionDepth,\n createRafCoalescer,\n readChromeTransitionSource,\n readChromeTransitionPhase,\n} from '../../nav/chrome-transition';\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 * 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 @State() private resolvedTabs: BarNavTab[] = [];\n @State() private urlDerivedValue: string = '';\n @State() private hideTabsForDetailRoute = false;\n @State() private tabsCollapsed = false;\n @State() private menuOpen = false;\n /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n @State() private tabLayoutCommitted = false;\n @State() private triggerLabelTruncated = false;\n\n private static readonly HOST_PROP_SYNC_BUDGET = 8;\n private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES = 16;\n private static readonly OVERFLOW_HYSTERESIS_PX = 8;\n\n private headerEl: HTMLElement | null = null;\n private triggerEl: HTMLButtonElement | null = null;\n private triggerLabelTextEl: HTMLElement | null = null;\n private triggerLabelObserver: ResizeObserver | null = null;\n private menuEl: HTMLDsMenuElement | null = null;\n private visibleTabGroupEl: QueryableHost | null = null;\n private probeTabGroupEl: QueryableHost | null = null;\n private resizeObserver: ResizeObserver | null = null;\n private intrinsicWidthRetryCount = 0;\n private tabLayoutPendingFrames = 0;\n private readonly panelNavTransition = new ChromeTransitionDepth();\n private readonly panelToolsTransition = new ChromeTransitionDepth();\n private readonly overflowCoalescer = createRafCoalescer(() => {\n this.updateTabsCollapsed();\n this.updateTriggerLabelTruncation();\n });\n private chromeTransitionShell: HTMLElement | null = null;\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 private digestTabsConfig(tabs: BarNavTab[]): string {\n return tabs.map(t => (isTabDivider(t) ? '|' : t.id)).join(',');\n }\n\n private resetTabOverflowLayout() {\n this.tabLayoutCommitted = false;\n this.tabsCollapsed = false;\n this.menuOpen = false;\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n }\n\n @Watch('tabs')\n @Watch('tabsJson')\n @Watch('currentUrl')\n @Watch('basePath')\n onHostPropsChange() {\n this.applyHostProps();\n }\n\n @Watch('value')\n @Watch('urlDerivedValue')\n onSelectionChange() {\n this.syncMenuSections();\n this.scheduleOverflowCheck();\n }\n\n @Watch('menuOpen')\n onMenuOpenChange(open: boolean) {\n if (this.menuEl) {\n this.menuEl.open = open;\n }\n }\n\n @Watch('tabsCollapsed')\n onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n if (!collapsed) {\n this.menuOpen = false;\n this.menuEl = null;\n this.triggerLabelTruncated = false;\n this.syncTriggerLabelObserver();\n }\n this.scheduleOverflowCheck();\n if (collapsed) {\n requestAnimationFrame(() => {\n this.scheduleOverflowCheck();\n this.syncTriggerLabelObserver();\n });\n }\n if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n requestAnimationFrame(() => this.scheduleOverflowCheck());\n queueMicrotask(() => this.focusVisibleSelectedTab());\n }\n\n componentWillLoad() {\n this.applyHostProps();\n }\n\n componentDidLoad() {\n this.syncHostPropsIfNeeded();\n this.scheduleDeferredHostPropSync();\n this.setupOverflowObserver();\n this.bindChromeTransitionListeners();\n this.scheduleOverflowCheck();\n }\n\n componentDidRender() {\n if (this.chromeOverflowPaused()) {\n this.syncMenuAnchor();\n return;\n }\n this.scheduleOverflowCheck();\n this.syncMenuAnchor();\n if (this.tabsCollapsed) {\n this.updateTriggerLabelTruncation();\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.overflowCoalescer.cancel();\n this.syncTriggerLabelObserver(true);\n this.unbindChromeTransitionListeners();\n }\n\n private bindChromeTransitionListeners() {\n const shell = this.el.closest('ds-app-shell');\n if (!shell) return;\n this.chromeTransitionShell = shell;\n shell.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n shell.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n private unbindChromeTransitionListeners() {\n if (!this.chromeTransitionShell) return;\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_START,\n this.onChromeTransitionStart,\n );\n this.chromeTransitionShell.removeEventListener(\n CHROME_TRANSITION_END,\n this.onChromeTransitionEnd,\n );\n this.chromeTransitionShell = null;\n }\n\n private onChromeTransitionStart = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.enter();\n return;\n }\n if (source === 'panel-tools') {\n const phase = readChromeTransitionPhase(event) ?? 'opening';\n if (phase === 'closing') {\n this.panelToolsTransition.enter();\n }\n }\n };\n\n private chromeOverflowPaused(): boolean {\n return this.panelNavTransition.isActive || this.panelToolsTransition.isActive;\n }\n\n private onChromeTransitionEnd = (event: Event) => {\n const source = readChromeTransitionSource(event);\n if (source === 'panel-nav') {\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleOverflowCheck();\n }\n return;\n }\n if (source === 'panel-tools') {\n this.panelToolsTransition.exit();\n this.scheduleOverflowCheck();\n }\n };\n\n /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n private syncHostPropsIfNeeded() {\n if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs, this.tabsJson)) {\n this.applyHostProps();\n } else if (this.currentUrl && this.basePath) {\n this.syncValueFromUrl();\n }\n }\n\n /** Poll across animation frames — host props may land without triggering @Watch. */\n private scheduleDeferredHostPropSync() {\n let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n const tick = () => {\n this.syncHostPropsIfNeeded();\n if (--remaining > 0) {\n requestAnimationFrame(tick);\n }\n };\n queueMicrotask(tick);\n }\n\n private setupOverflowObserver() {\n if (typeof ResizeObserver === 'undefined' || !this.headerEl) return;\n this.resizeObserver?.disconnect();\n this.resizeObserver = new ResizeObserver(() => {\n if (this.chromeOverflowPaused()) return;\n this.scheduleOverflowCheck();\n });\n this.resizeObserver.observe(this.headerEl);\n }\n\n private scheduleOverflowCheck() {\n if (this.chromeOverflowPaused()) return;\n this.overflowCoalescer.schedule();\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 available for the tab row or collapsed trigger. */\n private getLeftZoneAvailableWidth(): number {\n if (!this.headerEl) return 0;\n\n const headerStyle = getComputedStyle(this.headerEl);\n const horizontalPadding =\n (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n\n return Math.max(0, this.headerEl.clientWidth - horizontalPadding);\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 forceTabLayoutCommit(fallbackCollapsed: boolean) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.tabsCollapsed = fallbackCollapsed;\n if (!fallbackCollapsed) {\n this.menuOpen = false;\n }\n this.tabLayoutCommitted = true;\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 this.tabLayoutPendingFrames = 0;\n this.tabLayoutCommitted = true;\n return;\n }\n\n const intrinsicWidth = this.getTabsIntrinsicWidth();\n if (intrinsicWidth === 0) {\n this.tabLayoutPendingFrames += 1;\n if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n this.forceTabLayoutCommit(false);\n } else if (this.tabLayoutPendingFrames >= BarNav.TAB_LAYOUT_COMMIT_MAX_FRAMES) {\n this.forceTabLayoutCommit(false);\n } else {\n this.scheduleIntrinsicWidthRetry();\n }\n return;\n }\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n\n const shouldCollapse = tabsOverflowContainer(\n intrinsicWidth,\n this.getLeftZoneAvailableWidth(),\n this.tabsCollapsed,\n BarNav.OVERFLOW_HYSTERESIS_PX,\n );\n\n if (shouldCollapse !== this.tabsCollapsed) {\n this.tabsCollapsed = shouldCollapse;\n if (!shouldCollapse) {\n this.menuOpen = false;\n }\n }\n\n this.tabLayoutCommitted = true;\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 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.resetTabOverflowLayout();\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 const tabs = this.incomingTabs();\n const tabsConfigChanged =\n this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);\n\n this.resolvedTabs = tabs;\n this.syncValueFromUrl();\n this.committedSection = nextBasePath;\n if (tabsConfigChanged) {\n this.resetTabOverflowLayout();\n }\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 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':\n hasTabs && this.tabLayoutCommitted && 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 const next = el ?? null;\n if (next === this.probeTabGroupEl) return;\n this.probeTabGroupEl = next;\n if (next) {\n this.intrinsicWidthRetryCount = 0;\n this.tabLayoutPendingFrames = 0;\n this.scheduleOverflowCheck();\n }\n }}\n tabs={this.resolvedTabs}\n value={this.effectiveValue}\n />\n </div>\n )}\n\n {hasTabs && this.tabLayoutCommitted && !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.tabLayoutCommitted && (\n <div class=\"bar-nav__tabs-pending\" aria-hidden=\"true\" />\n )}\n\n {!hasTabs && this.heading && (\n <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n )}\n\n {hasTabs && this.tabLayoutCommitted && 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 </header>\n\n {hasTabs && this.tabLayoutCommitted && this.tabsCollapsed && (\n <ds-menu\n ref={el => {\n this.menuEl = (el as HTMLDsMenuElement) ?? null;\n }}\n open={this.menuOpen}\n sections={tabsToMenuSections(this.resolvedTabs, this.effectiveValue)}\n side=\"bottom\"\n align=\"start\"\n onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n onDsClose={() => this.handleMenuClose()}\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/ds-checkbox.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"f65a4e61bc5ac5478b7f9bf3a99ad341b91ee237",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"d7bb7e0acd68e343a8f0219b7827c5c430c066ff",class:{box:true,"box--marked":e}},e&&c("span",{key:"ab0b135f27b1006e151440eba2a9bd79b71ec8f5",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"91f5ebc4fabe496c7ab5906376412581921f7b2a",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
1
+ import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"0daae1bf8d4200e9eb8a9871891607fa6f86b53d",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"14d40b4cb1248a8a8b2ba9e937b475c7d683ff9b",class:{box:true,"box--marked":e}},e&&c("span",{key:"cb57bd0979d3a90e75fe5db1310da14d4dc5b01f",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"2dd41545723ee5d50bf12c8dab2b306cbecc166c",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
2
2
  //# sourceMappingURL=ds-checkbox.js.map
package/dist/components/ds-field.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,h as d,a as l,t}from"./index.js";const f=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"ad6f22a60d75a87125273d6ddedb21701bf8db22"},d("div",{key:"61fb8996ac564c76d460bf5c42ae206caff0da47",class:"field"},d("label",{key:"9285cd85133f2cb2175479bdb182e2faaf7ef57f",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"41990fec236d839a93071dac7fb92359508a651f"})))}static get style(){return f()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),a)}break}}))}c();const n=a;const o=c;export{n as DsField,o as defineCustomElement};
1
+ import{p as e,H as s,h as d,a as l,t}from"./index.js";const f=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"e20fcfe3ad1c31a9000dc472f36657d9a5db5bd3"},d("div",{key:"c015b92e8e4421a4566edefbf0a7e2aeddf8e43e",class:"field"},d("label",{key:"81915a24be294e9af82ea55f6c158a2e3d8cbccf",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"3e1ee5e1a4f9773fff608067b75d057a9126b1f5"})))}static get style(){return f()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),a)}break}}))}c();const n=a;const o=c;export{n as DsField,o as defineCustomElement};
2
2
  //# sourceMappingURL=ds-field.js.map
package/dist/components/ds-panel-nav.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as a,c as n,h as t,a as i,t as s}from"./index.js";import{d as o}from"./p-CiEc8Nwx.js";import{d as r}from"./p-DqBCQRRd.js";import{d as l}from"./p-C9za7IDu.js";const d="data-nav-style";function c(e){if(e==="dashboard"||e==="settings")return e;return undefined}function p(e,a,n){const t=c(a);if(t)return t;const i=typeof document!=="undefined"?document.documentElement.getAttribute(d):null;const s=c(i);if(s)return s;return e}function v(e,a){return e!==a}function h(e,a){return e===a||e.startsWith(`${a}/`)}function f(e,a){if(!e)return"";let n="";let t=0;for(const i of a){if(!i.href)continue;if(h(e,i.href)&&i.href.length>t){n=i.id;t=i.href.length}}return n}function m(e){return e.reduce(((e,a)=>e+a.items.length),0)}function u(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function b(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function _(e,a){return m(e)===0&&m(u(a))>0}const g="ds-panel-nav-user-menu-anchor";const y=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to bottom, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to left, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to left, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const x=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[gradient] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[grid].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[grid] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion), min-width var(--_nav-expand-motion), background-color var(--effect-motion-short-3, 200ms ease), border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms, max-height var(--_nav-label-fade-motion) 0ms, padding var(--_nav-label-fade-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms, mask-position var(--_nav-label-fade-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;pointer-events:none;transition:right var(--_nav-expand-motion), top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms, mask-position var(--_nav-label-fade-out-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms, max-height var(--_nav-label-fade-out-motion) 0ms, padding var(--_nav-label-fade-out-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__footer-btn.sc-ds-panel-nav ds-icon.sc-ds-panel-nav{position:relative;z-index:1}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion), right var(--_nav-expand-motion), top var(--_nav-expand-motion), color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const k=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return b(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=u(e);this.syncRovingIndex();this.syncActiveFromUrl()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=p(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const a=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const n=e?.getBoundingClientRect().width??0;if(Math.abs(n-a)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=f(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(v(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(_(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}syncRovingIndex(){const e=this.getAllItems().findIndex((e=>e.id===this.effectiveActiveId));this.rovingIndex=e>=0?e:0}handleItemKeyDown(e,a){const n=this.getAllItems().length;let t;switch(e.key){case"ArrowDown":e.preventDefault();t=(a+1)%n;break;case"ArrowUp":e.preventDefault();t=(a-1+n)%n;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(e,a,n){const i=e.id===this.effectiveActiveId;const s=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const o={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?e.label:undefined,tabIndex:a===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleItemKeyDown(e,a),onFocus:()=>{this.rovingIndex=a}};const r=this.routerMode==="anchor"&&e.href;return r?t("a",{...o,href:e.href},s):t("button",{...o,type:"button"},s)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const s=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":s,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"e41e517fc7bb587faf489ba45ea737bbd3dbc359",style:{display:"block",position:"relative"}},t("nav",{key:"e9e0d6a2e33a49cbc9c0f8b9ee16b85a32ccd897",class:l,"aria-label":a?"Dashboard navigation":"Settings navigation"},t("div",{key:"9f9bbf9f0e6a5f6baba8bcd78d3a0043272f011d",class:"panel-nav__header"},t("button",{key:"4d6cb47b636896750fdde25f86f534836863554b",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":s?"Expand navigation":"Collapse navigation","aria-expanded":s?"false":"true"},t("span",{key:"6a86a42d85aa60eb71d348bfe6302841fa1a03d1",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"db467c1fc53b06dd29775d16ee6a82d343c99802",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"1e4e16a7d436003b831ce5cd7b5167c5d6850e1e",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"87a420824763c0830232d59f710aa760b0f69013",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"5b0bc8661377bad5809aac625ee9f38c1c807e81",name:s?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"ccb60c37ed7cc8ba63b392b0f67ce835e2485a02",class:{"panel-nav__body":true,"scroll-edge-fade":true,"scroll-edge-fade--bottom":true,"scroll-edge-fade--at-end":this.atBottom},onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((a=>t("div",{class:"panel-nav__group"},a.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label))),a.items.map((a=>this.renderNavItem(a,e++,s))))))})()),t("div",{key:"aa6a8465fa0749cc37d2b36fd0f6928abe35c16c",class:"panel-nav__footer"},t("button",{key:"68df6533926b9901b64a1a44b0db9df373425f16",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"07ec6a8c45ad5510d6c9b158a11d50898f1615b3",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"c126f994da55665f95533c9c1e7c16d02021b532",type:"button",id:g,class:"panel-nav__item panel-nav__footer-user","aria-label":s?`User: ${o}`:`User menu for ${o}`,onClick:e=>this.handleUserAction(e)},t("span",{key:"5da6821cb21900317a648f80fe664231b55b1614",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"0d7850c90c316b08056e30a116bd6975ce938233",class:"panel-nav__item-label-text"},t("ds-text",{key:"4826a6d5ce11a39f79e1798eb0079b88b4bc4976",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},o))),t("span",{key:"94f54c383c89d24611e9aee709502027d860d621",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"c3508bf356d63064787f4d7fe23700b3285e5adb",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"363c2a0e591915db0cd1fcc39f41af44e452f12a",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"ffae61637fe80d07d568036d0bbc7c42e621f522",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"3d468abdb2256713e9c547f2f23f3656c579654f",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"ea35cc4bcbf8cf8d1b9fb0bad2d70ea803440917",class:"panel-nav__user-initial"},t("ds-text",{key:"f79afa7d77336777fe41c757f712acca0053c2ee",as:"span",variant:"text-caption-emphasis",color:"inherit"},r))))))),!this.viewportNarrow&&t("div",{key:"29dd512cf30bb1a86e462f8523e203c79b681f82",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return y()+x()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);k.HOST_PROP_SYNC_BUDGET=8;function w(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),k)}break;case"ds-badge":if(!customElements.get(s(e))){o()}break;case"ds-icon":if(!customElements.get(s(e))){r()}break;case"ds-text":if(!customElements.get(s(e))){l()}break}}))}w();const z=k;const C=w;export{z as DsPanelNav,C as defineCustomElement};
1
+ import{p as e,H as a,c as n,h as t,a as i,t as s}from"./index.js";import{d as o}from"./p-CiEc8Nwx.js";import{d as r}from"./p-DqBCQRRd.js";import{d as l}from"./p-C9za7IDu.js";const d="data-nav-style";function c(e){if(e==="dashboard"||e==="settings")return e;return undefined}function p(e,a,n){const t=c(a);if(t)return t;const i=typeof document!=="undefined"?document.documentElement.getAttribute(d):null;const s=c(i);if(s)return s;return e}function v(e,a){return e!==a}function h(e,a){return e===a||e.startsWith(`${a}/`)}function f(e,a){if(!e)return"";let n="";let t=0;for(const i of a){if(!i.href)continue;if(h(e,i.href)&&i.href.length>t){n=i.id;t=i.href.length}}return n}function m(e){return e.reduce(((e,a)=>e+a.items.length),0)}function u(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function b(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function _(e,a){return m(e)===0&&m(u(a))>0}const g="ds-panel-nav-user-menu-anchor";const y=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to bottom, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to right, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient( to left, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );mask-image:linear-gradient( to left, #000 0, #000 calc(100% - var(--ds-scroll-edge-fade-size)), transparent 100% );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const x=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[gradient] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[grid].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[grid] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion), min-width var(--_nav-expand-motion), background-color var(--effect-motion-short-3, 200ms ease), border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms, max-height var(--_nav-label-fade-motion) 0ms, padding var(--_nav-label-fade-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms, mask-position var(--_nav-label-fade-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;pointer-events:none;transition:right var(--_nav-expand-motion), top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms, mask-position var(--_nav-label-fade-out-motion) 0ms, -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms, max-height var(--_nav-label-fade-out-motion) 0ms, padding var(--_nav-label-fade-out-motion) 0ms, color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__footer-btn.sc-ds-panel-nav ds-icon.sc-ds-panel-nav{position:relative;z-index:1}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion), right var(--_nav-expand-motion), top var(--_nav-expand-motion), color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const k=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return b(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=u(e);this.syncRovingIndex();this.syncActiveFromUrl()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=p(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const a=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const n=e?.getBoundingClientRect().width??0;if(Math.abs(n-a)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=f(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(v(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(_(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}syncRovingIndex(){const e=this.getAllItems().findIndex((e=>e.id===this.effectiveActiveId));this.rovingIndex=e>=0?e:0}handleItemKeyDown(e,a){const n=this.getAllItems().length;let t;switch(e.key){case"ArrowDown":e.preventDefault();t=(a+1)%n;break;case"ArrowUp":e.preventDefault();t=(a-1+n)%n;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(e,a,n){const i=e.id===this.effectiveActiveId;const s=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const o={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?e.label:undefined,tabIndex:a===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleItemKeyDown(e,a),onFocus:()=>{this.rovingIndex=a}};const r=this.routerMode==="anchor"&&e.href;return r?t("a",{...o,href:e.href},s):t("button",{...o,type:"button"},s)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const s=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":s,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"bb9d612528b204b1dc2ae2f7ae99e239fd3ed9d6",style:{display:"block",position:"relative"}},t("nav",{key:"d925ee29d4d0d09b6b8c0ec6f19aa49d078558cf",class:l,"aria-label":a?"Dashboard navigation":"Settings navigation"},t("div",{key:"e13fb2deed187f510dcc9cccbf304415c733dd9a",class:"panel-nav__header"},t("button",{key:"f1e6645158deb72c31da4a29645e4eef61b16ed8",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":s?"Expand navigation":"Collapse navigation","aria-expanded":s?"false":"true"},t("span",{key:"52ed714c712dbb3c71a3d465762e27000b58a566",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"d58a095fed91f6d8a29f064c5217410653c3a60e",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"910ffc0fe9fe7b9e7cbb0dc3b79be988ec61e56f",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"2ce98c5d2ad2af2ac4edf2413a34e9a191ed62c9",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"b7af64d0a9585692347f83aba19b24dbbc5d9e81",name:s?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"87e15baf4e080030c58c323a0e654477a6b55643",class:{"panel-nav__body":true,"scroll-edge-fade":true,"scroll-edge-fade--bottom":true,"scroll-edge-fade--at-end":this.atBottom},onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((a=>t("div",{class:"panel-nav__group"},a.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label))),a.items.map((a=>this.renderNavItem(a,e++,s))))))})()),t("div",{key:"b5f148d41e06e8d1b10bc08ec539e198b9b63c22",class:"panel-nav__footer"},t("button",{key:"2aa43c43068c459eccd8b3b6cf4499e4119d7ffd",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"4843225224126eea5de3d76c2d53faf9a603d9f3",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"1a81a525ce0890f65b085a7d42c540da151679d0",type:"button",id:g,class:"panel-nav__item panel-nav__footer-user","aria-label":s?`User: ${o}`:`User menu for ${o}`,onClick:e=>this.handleUserAction(e)},t("span",{key:"dbc03b2c96bf02a3742985bf90021d26148cfdd3",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"fb3a7fbe2ab8abde4e112bd6c757ed0fbc4854de",class:"panel-nav__item-label-text"},t("ds-text",{key:"c6e3f4bf7b0c399c5aae9c1fd99736e9076a137e",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},o))),t("span",{key:"cfa81b40dd16847b352dd9847c2fd8a4432ba04b",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"385e48bbdb551e21af6c37ef4edd43e065f9dd35",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"0582e923bc07eebfb51615e0fa3a5907cf4a9b14",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"b64c28c25a19f709f48fe68cc778f29d2d3b2ad0",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"b3c123520f643dba95aa7e2662c060ec766083cc",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"c13d0110f6c832083a361b7c92e372cd218734fa",class:"panel-nav__user-initial"},t("ds-text",{key:"e560fe82d0316c3c0be706f221584c9ae677b603",as:"span",variant:"text-caption-emphasis",color:"inherit"},r))))))),!this.viewportNarrow&&t("div",{key:"f8cf3ba3f212b74a68365bf2b4350f9eea0dddbf",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return y()+x()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);k.HOST_PROP_SYNC_BUDGET=8;function w(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),k)}break;case"ds-badge":if(!customElements.get(s(e))){o()}break;case"ds-icon":if(!customElements.get(s(e))){r()}break;case"ds-text":if(!customElements.get(s(e))){l()}break}}))}w();const z=k;const C=w;export{z as DsPanelNav,C as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-nav.js.map
package/dist/components/ds-panel-tools.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as o,h as t,a,t as i}from"./index.js";import{p as l}from"./p-Dl1GvZQ2.js";import{d as n}from"./p-CiEc8Nwx.js";import{d as r}from"./p-CCZFMcLe.js";import{d}from"./p-DqBCQRRd.js";const c="search";const p={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function h(e,s){if(s){return l(s,[])}return e??[]}function f(e,s){return!e&&s==="idle"}const g=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=o(this,"dsToolChange");this.dsChromeTransitionStart=o(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=o(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=!this.isRailSelected(e);if(s){this.open=true;this.activeTool=e}else{this.open=false}this.dsToolChange.emit({id:e,selected:s})}}get railItems(){return h(this.items,this.itemsJson)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return p[this.activeTool]??""}renderRailAction(e){return t("ds-bar-nav-action",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,selected:this.isRailSelected(e.id),dot:e.dot??false,inactive:e.inactive,"aria-label":e.ariaLabel??p[e.id],onDsChange:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const s=this.railItems;const o=s.find((e=>e.id===c));const i=s.filter((e=>e.id!==c));const l=this.isDrawerPresent();const n=f(this.open,this.motion);return t(a,{key:"0d792e18861bf49c364902482879a7c2d3859789",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":n},role:"complementary","aria-label":"Tools"},t("div",{key:"02c21fce7a4360fabaf505239c6826437791d597",class:"panel-tools__layout"},t("div",{key:"fdd61024eafae7d4b2cde8582dffaaaad47736d6",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":l},"aria-hidden":l?null:"true",inert:l?undefined:true},t("div",{key:"b9cbcca8a1b653e87796f7596e5c6a135d1527b5",class:"panel-tools__drawer-surface"},t("header",{key:"2c1e4a702ff3a2085b94a4a89e6a27d7d8ce7fa2",class:"panel-tools__header"},t("span",{key:"ee200ebf37916c631b64bec99b806bc692f6a7fe",class:"panel-tools__title text-body-medium-emphasis"},e)),t("div",{key:"da853970cfc0aeed278cfd4fb7882e223545e717",class:"panel-tools__body"},t("div",{key:"5e929c6a39884795421a3b8fbed94874c743a7ff",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},t("slot",{key:"3520fddcd2f9604bc2945719832ca9550197649d",name:"search"})),t("div",{key:"8a2578baafa0962d398de1af6b08b35d47b1fde7",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},t("slot",{key:"13274e18e434f49dcee50b6fa277926eaf9f4eae",name:"messages"})),t("div",{key:"45438ed089ef619dffefcc59896407c30de6df6a",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},t("slot",{key:"8ddc1e00361646410cfdc853e89beafd5d74a755",name:"stacks"})),t("div",{key:"a26e41e25948631ff91dbe1eecb8f7b00b8fb4c8",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},t("slot",{key:"685ce23ff949fd8620d594e67535407ba02e74ed",name:"activity"})),t("div",{key:"a11694201a92f10c4d2c0547fda4d8ea2095d61f",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},t("slot",{key:"d8fcbc8a49442c3f790dc4d2884a98ea5ccc32d5",name:"agents"}))))),t("nav",{key:"5e470382e3c8014ec55e886ba43d92ae2117bd7c",class:"panel-tools__rail","aria-label":"Tool shortcuts"},o?t("div",{class:"panel-tools__rail-header"},this.renderRailAction(o)):null,t("div",{key:"09d6d4e0dd00200435ab77afe7b92646db12b9ba",class:"panel-tools__rail-body"},i.map((e=>this.renderRailAction(e)))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return g()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-bar-nav-action","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),m)}break;case"ds-badge":if(!customElements.get(i(e))){n()}break;case"ds-bar-nav-action":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break}}))}b();const _=m;const u=b;export{_ as DsPanelTools,u as defineCustomElement};
1
+ import{p as e,H as s,c as o,h as t,a,t as i}from"./index.js";import{p as l}from"./p-BOQnc-M4.js";import{d as n}from"./p-CiEc8Nwx.js";import{d as r}from"./p-CCZFMcLe.js";import{d}from"./p-DqBCQRRd.js";const c="search";const p={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function h(e,s){if(s){return l(s,[])}return e??[]}function f(e,s){return!e&&s==="idle"}const b=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=o(this,"dsToolChange");this.dsChromeTransitionStart=o(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=o(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=!this.isRailSelected(e);if(s){this.open=true;this.activeTool=e}else{this.open=false}this.dsToolChange.emit({id:e,selected:s})}}get railItems(){return h(this.items,this.itemsJson)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return p[this.activeTool]??""}renderRailAction(e){return t("ds-bar-nav-action",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,selected:this.isRailSelected(e.id),dot:e.dot??false,inactive:e.inactive,"aria-label":e.ariaLabel??p[e.id],onDsChange:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const s=this.railItems;const o=s.find((e=>e.id===c));const i=s.filter((e=>e.id!==c));const l=this.isDrawerPresent();const n=f(this.open,this.motion);return t(a,{key:"4ff3bf3d922536137e7efb400e545302780fde8e",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":n},role:"complementary","aria-label":"Tools"},t("div",{key:"db4bb04d2e504e1584284e14e159d757d14cb22b",class:"panel-tools__layout"},t("div",{key:"bad14534a3181d1ff2561f37b4d47e3f706bbfcd",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":l},"aria-hidden":l?null:"true",inert:l?undefined:true},t("div",{key:"fc08c5adf6f412507817b940957d5acb14118758",class:"panel-tools__drawer-surface"},t("header",{key:"4e82edb57b9662798e7059c439bd79f3516bed3d",class:"panel-tools__header"},t("span",{key:"2fe67fef28d03fd737ed885c2cb11a45ccbf94ab",class:"panel-tools__title text-body-medium-emphasis"},e)),t("div",{key:"9e308536bdd5af1febbf734ffd6db3c6032d2969",class:"panel-tools__body"},t("div",{key:"692975633f9824d3a5f7c418b3e70d36b2571612",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},t("slot",{key:"83224b262ad87d246793e5061095e9fe28cfa5f6",name:"search"})),t("div",{key:"4d4cc2d708058c3a2d15ec28c10b2c12e520291a",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},t("slot",{key:"509f3ef51327feba50e71e5bbab78fdf31b893ef",name:"messages"})),t("div",{key:"1fdb5fb36f8eed603265f05b8f99c74329e03ae1",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},t("slot",{key:"5f0d8907d2284da9bdecff1915e41cbca70c3775",name:"stacks"})),t("div",{key:"ed17bcfaff19e711cc16238d4cf6a3e0241ac4af",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},t("slot",{key:"1e151950dfdaf974757f9291aa5bf8ad6284ac17",name:"activity"})),t("div",{key:"3f091058a1c11f712367b48ff26a9dd9e3314070",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},t("slot",{key:"c1510e39fe54fd8dcbf8490d37120f6cf39443ab",name:"agents"}))))),t("nav",{key:"9792f64e0a9d7c76b6eb241f9f6a83bf53fd63a7",class:"panel-tools__rail","aria-label":"Tool shortcuts"},o?t("div",{class:"panel-tools__rail-header"},this.renderRailAction(o)):null,t("div",{key:"07cc1860f54fee4fe4bc99dceadc48f831ea4ecb",class:"panel-tools__rail-body"},i.map((e=>this.renderRailAction(e)))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return b()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-bar-nav-action","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-badge":if(!customElements.get(i(e))){n()}break;case"ds-bar-nav-action":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break}}))}m();const _=g;const u=m;export{_ as DsPanelTools,u as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-tools.js.map
package/dist/components/ds-slider.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"b803246efd0959e5bc0b3e7d8126bb5e1e66f5cb",class:"field"},t("div",{key:"f796de799ecc63de71b5682d0587824fda2bc6da",class:"label-row"},t("label",{key:"33bc9ac9257872cc0b97713bf56485a6d5c714be",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"7e53d9127d4417b4aa4e62b03d7036ff88888957",class:"text-body-small-emphasis"},this.value)),t("div",{key:"2ffec2aefe63cad03f0956d459f3b87f9c189a8a",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"c9c03e5097bf341238da0384b69d8e996dd7db07",class:"track-inner"},t("div",{key:"baefb6c879dab9d4fa62ce9c1b716705a9f74b4d",class:"fill-track"},t("div",{key:"cff189e1e3cec755e887c595f4ff004e27d4fc52",class:"fill"})),t("div",{key:"4b1a1c832f7cd8e5968213fe115f1cfbad21cece",class:"thumb"})),t("input",{key:"641fe832d1464c47822afc92444d71d9fbcd6be2",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
1
+ import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"b7147eb06d8859e3ea03073d333d63a63036add4",class:"field"},t("div",{key:"0589ac26bd05288a044485f19120397b78829e03",class:"label-row"},t("label",{key:"bd75405a27b95edc41bcaca9425c04f15819e5c2",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"901b006fb1ce96b3f7ba99ff0e22bfdbe75d28e4",class:"text-body-small-emphasis"},this.value)),t("div",{key:"bea458e318e0e49c24ed71583d8907bfeea76232",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"3052ee819db6afa6c64419d523bd715e56fe9962",class:"track-inner"},t("div",{key:"b21f54daa9dc732b660f30d36422a5335b4ec1bf",class:"fill-track"},t("div",{key:"80e5450d9e68a5cd81544d70e8fb8c3c134f0642",class:"fill"})),t("div",{key:"0622efb3f3e7473ad69cce52cfe917dd959d02b6",class:"thumb"})),t("input",{key:"07429f1ea6ec9885b162c0dfa755e9129a9a3250",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
2
2
  //# sourceMappingURL=ds-slider.js.map
package/dist/components/ds-toggle.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"31ffb11dfe3122e90053dd8e3f3222d867a89787",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"acda9cfb48d0dd0a9ec8e22273181eda851ad0c8",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
1
+ import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"a343baedfb36edf3eb39682b05d72a66fcca29d1",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"e92a69389de75fd134d748644ebc1f9550aa8292",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
2
2
  //# sourceMappingURL=ds-toggle.js.map
package/dist/components/p-BOQnc-M4.js ADDED
@@ -0,0 +1,2 @@
1
+ import{g as r}from"./p-BQq26pt9.js";function e(e,t,n){if(!e||!t){return{value:"",hideTabs:false}}if(e!==t&&!e.startsWith(`${t}/`)){return{value:"",hideTabs:false}}const s=e.slice(t.length);const a=s.startsWith("/")?s.slice(1).split("/")[0]:"";const u=r(n);if(!a){return{value:u[0]?.id??"",hideTabs:false}}const i=u.find((r=>r.id===a));if(i){return{value:i.id,hideTabs:false}}return{value:"",hideTabs:true}}function t(r,e,t){const s=t?n(t,[]):e??[];return r.length===0&&s.length>0}function n(r,e){if(Array.isArray(r))return r;if(typeof r==="string"&&r!==""){try{const t=JSON.parse(r);return Array.isArray(t)?t:e}catch{return e}}return e}export{e as d,n as p,t as s};
2
+ //# sourceMappingURL=p-BOQnc-M4.js.map
package/dist/components/p-BOQnc-M4.js.map ADDED
@@ -0,0 +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","tabsIncoming","parseJsonArrayProp","fallback","Array","isArray","parsed","JSON","parse"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { 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): boolean {\n const tabsIncoming = tabsJson\n ? parseJsonArrayProp(tabsJson, [])\n : (tabs ?? []);\n\n return resolvedTabs.length === 0 && tabsIncoming.length > 0;\n}\n\n/** Parse tabs 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"],"mappings":"6CAYgBA,EACdC,EACAC,EACAC,GAEA,IAAKF,IAASC,EAAU,CACtB,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,GAAIJ,IAASC,IAAaD,EAAKK,WAAW,GAAGJ,MAAc,CACzD,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,MAAME,EAAYN,EAAKO,MAAMN,EAASO,QACtC,MAAMC,EAAMH,EAAUD,WAAW,KAAOC,EAAUC,MAAM,GAAGG,MAAM,KAAK,GAAK,GAC3E,MAAMC,EAAiBC,EAAkBV,GAEzC,IAAKO,EAAK,CACR,MAAO,CAAEN,MAAOQ,EAAe,IAAIE,IAAM,GAAIT,SAAU,M,CAGzD,MAAMU,EAAMH,EAAeI,MAAKC,GAAKA,EAAEH,KAAOJ,IAC9C,GAAIK,EAAK,CACP,MAAO,CAAEX,MAAOW,EAAID,GAAIT,SAAU,M,CAGpC,MAAO,CAAED,MAAO,GAAIC,SAAU,KAChC,C,SAGgBa,EACdC,EACAhB,EACAiB,GAEA,MAAMC,EAAeD,EACjBE,EAAmBF,EAAU,IAC5BjB,GAAQ,GAEb,OAAOgB,EAAaV,SAAW,GAAKY,EAAaZ,OAAS,CAC5D,CAGM,SAAUa,EAAsBlB,EAAiCmB,GACrE,GAAIC,MAAMC,QAAQrB,GAAQ,OAAOA,EACjC,UAAWA,IAAU,UAAYA,IAAU,GAAI,CAC7C,IACE,MAAMsB,EAASC,KAAKC,MAAMxB,GAC1B,OAAOoB,MAAMC,QAAQC,GAAUA,EAASH,C,CACxC,MACA,OAAOA,C,EAGX,OAAOA,CACT,Q","ignoreList":[]}
package/dist/types/components/BarNav/BarNav.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { EventEmitter } from '../../stencil-public-runtime';
2
2
  import type { NavChromeStyle } from '../../nav/nav-chrome';
3
- import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
3
+ import type { BarNavTab } from './bar-nav-types';
4
4
  export declare class BarNav {
5
5
  /** Style slot: `dashboard` or `settings`. Colors match for now. */
6
6
  navStyle: NavChromeStyle;
@@ -14,13 +14,6 @@ export declare class BarNav {
14
14
  tabsJson: string;
15
15
  /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */
16
16
  value: string;
17
- /**
18
- * Action items rendered in the right section.
19
- * Set via JS property: `el.actions = [...]`. Replace the array reference to update.
20
- */
21
- actions: BarNavActionItem[];
22
- /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */
23
- actionsJson: string;
24
17
  /**
25
18
  * Fallback heading shown when no tabs are provided.
26
19
  * When tabs are present the heading is hidden.
@@ -32,13 +25,7 @@ export declare class BarNav {
32
25
  currentUrl: string;
33
26
  /** Emitted when the active tab changes. Detail = tab id. */
34
27
  dsTabChange: EventEmitter<string>;
35
- /** Emitted when an action button is toggled. Detail = { id, selected }. */
36
- dsActionChange: EventEmitter<{
37
- id: string;
38
- selected: boolean;
39
- }>;
40
28
  private resolvedTabs;
41
- private resolvedActions;
42
29
  private urlDerivedValue;
43
30
  private hideTabsForDetailRoute;
44
31
  private tabsCollapsed;
@@ -94,7 +81,7 @@ export declare class BarNav {
94
81
  private scheduleOverflowCheck;
95
82
  private syncTriggerLabelObserver;
96
83
  private updateTriggerLabelTruncation;
97
- /** Width left for tabs after actions. */
84
+ /** Width available for the tab row or collapsed trigger. */
98
85
  private getLeftZoneAvailableWidth;
99
86
  private getTabsIntrinsicWidth;
100
87
  private scheduleIntrinsicWidthRetry;
@@ -105,7 +92,6 @@ export declare class BarNav {
105
92
  private handleMenuClose;
106
93
  /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */
107
94
  private incomingTabs;
108
- private incomingActions;
109
95
  private applyHostProps;
110
96
  private syncMenuSections;
111
97
  private syncValueFromUrl;
@@ -113,7 +99,6 @@ export declare class BarNav {
113
99
  /** Move focus to the selected tab in the visible tab group (after expand). */
114
100
  private focusVisibleSelectedTab;
115
101
  private handleTabChange;
116
- private handleActionChange;
117
102
  private toggleTabMenu;
118
103
  private handleTriggerKeyDown;
119
104
  render(): any;
package/dist/types/components/BarNav/bar-nav-utils.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
1
+ import type { BarNavTab } from './bar-nav-types';
2
2
  export interface BarNavUrlState {
3
3
  /** Tab id derived from the URL, or empty when none applies. */
4
4
  value: string;
@@ -9,7 +9,7 @@ export interface BarNavUrlState {
9
9
  * Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */
10
10
  export declare function deriveBarNavValueFromUrl(path: string, basePath: string, tabs: BarNavTab[]): BarNavUrlState;
11
11
  /** True when host array/json props have data but resolved internal state is still empty. */
12
- export declare function shouldResyncBarNavProps(resolvedTabs: BarNavTab[], tabs: BarNavTab[], tabsJson: string, resolvedActions: BarNavActionItem[], actions: BarNavActionItem[], actionsJson: string): boolean;
13
- /** Parse tabs/actions from either a JSON attribute string or a JS property array. */
12
+ export declare function shouldResyncBarNavProps(resolvedTabs: BarNavTab[], tabs: BarNavTab[], tabsJson: string): boolean;
13
+ /** Parse tabs from either a JSON attribute string or a JS property array. */
14
14
  export declare function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[];
15
15
  //# sourceMappingURL=bar-nav-utils.d.ts.map
package/dist/types/components.d.ts CHANGED
@@ -9,7 +9,7 @@ import { AccordionItemData } from "./components/Accordion/Accordion";
9
9
  import { NavChromeStyle } from "./nav/nav-chrome";
10
10
  import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
11
11
  import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
12
- import { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
12
+ import { BarNavTab } from "./components/BarNav/bar-nav-types";
13
13
  import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
14
14
  import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
15
15
  import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -47,7 +47,7 @@ export { AccordionItemData } from "./components/Accordion/Accordion";
47
47
  export { NavChromeStyle } from "./nav/nav-chrome";
48
48
  export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
49
49
  export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
50
- export { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
50
+ export { BarNavTab } from "./components/BarNav/bar-nav-types";
51
51
  export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
52
52
  export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
53
53
  export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -192,16 +192,6 @@ export namespace Components {
192
192
  "showDismiss": boolean;
193
193
  }
194
194
  interface DsBarNav {
195
- /**
196
- * Action items rendered in the right section. Set via JS property: `el.actions = [...]`. Replace the array reference to update.
197
- * @default []
198
- */
199
- "actions": BarNavActionItem[];
200
- /**
201
- * JSON fallback for `actions` — useful when framework bindings don't propagate arrays.
202
- * @default ''
203
- */
204
- "actionsJson": string;
205
195
  /**
206
196
  * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
207
197
  * @default ''
@@ -1240,7 +1230,6 @@ declare global {
1240
1230
  };
1241
1231
  interface HTMLDsBarNavElementEventMap {
1242
1232
  "dsTabChange": string;
1243
- "dsActionChange": { id: string; selected: boolean };
1244
1233
  }
1245
1234
  interface HTMLDsBarNavElement extends Components.DsBarNav, HTMLStencilElement {
1246
1235
  addEventListener<K extends keyof HTMLDsBarNavElementEventMap>(type: K, listener: (this: HTMLDsBarNavElement, ev: DsBarNavCustomEvent<HTMLDsBarNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1880,16 +1869,6 @@ declare namespace LocalJSX {
1880
1869
  "showDismiss"?: boolean;
1881
1870
  }
1882
1871
  interface DsBarNav {
1883
- /**
1884
- * Action items rendered in the right section. Set via JS property: `el.actions = [...]`. Replace the array reference to update.
1885
- * @default []
1886
- */
1887
- "actions"?: BarNavActionItem[];
1888
- /**
1889
- * JSON fallback for `actions` — useful when framework bindings don't propagate arrays.
1890
- * @default ''
1891
- */
1892
- "actionsJson"?: string;
1893
1872
  /**
1894
1873
  * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
1895
1874
  * @default ''
@@ -1909,10 +1888,6 @@ declare namespace LocalJSX {
1909
1888
  * @default 'dashboard'
1910
1889
  */
1911
1890
  "navStyle"?: NavChromeStyle;
1912
- /**
1913
- * Emitted when an action button is toggled. Detail = { id, selected }.
1914
- */
1915
- "onDsActionChange"?: (event: DsBarNavCustomEvent<{ id: string; selected: boolean }>) => void;
1916
1891
  /**
1917
1892
  * Emitted when the active tab changes. Detail = tab id.
1918
1893
  */
@@ -2907,7 +2882,6 @@ declare namespace LocalJSX {
2907
2882
  "navStyle": NavChromeStyle;
2908
2883
  "tabsJson": string;
2909
2884
  "value": string;
2910
- "actionsJson": string;
2911
2885
  "heading": string | undefined;
2912
2886
  "basePath": string;
2913
2887
  "currentUrl": string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/ui",
3
- "version": "1.11.5",
3
+ "version": "2.0.0",
4
4
  "description": "CompoMo — composable web components styled with TokoMo design tokens",
5
5
  "keywords": [
6
6
  "web-components",
package/src/angular/proxies.ts CHANGED
@@ -110,21 +110,20 @@ export declare interface DsBanner extends Components.DsBanner {
110
110
 
111
111
 
112
112
  @ProxyCmp({
113
- inputs: ['actions', 'actionsJson', 'basePath', 'currentUrl', 'heading', 'navStyle', 'tabs', 'tabsJson', 'value']
113
+ inputs: ['basePath', 'currentUrl', 'heading', 'navStyle', 'tabs', 'tabsJson', 'value']
114
114
  })
115
115
  @Component({
116
116
  selector: 'ds-bar-nav',
117
117
  changeDetection: ChangeDetectionStrategy.OnPush,
118
118
  template: '<ng-content></ng-content>',
119
119
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
120
- inputs: ['actions', 'actionsJson', 'basePath', 'currentUrl', 'heading', 'navStyle', 'tabs', 'tabsJson', 'value'],
121
- outputs: ['dsTabChange', 'dsActionChange'],
120
+ inputs: ['basePath', 'currentUrl', 'heading', 'navStyle', 'tabs', 'tabsJson', 'value'],
121
+ outputs: ['dsTabChange'],
122
122
  standalone: false
123
123
  })
124
124
  export class DsBarNav {
125
125
  protected el: HTMLDsBarNavElement;
126
126
  @Output() dsTabChange = new EventEmitter<CustomEvent<string>>();
127
- @Output() dsActionChange = new EventEmitter<CustomEvent<{ id: string; selected: boolean }>>();
128
127
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
129
128
  c.detach();
130
129
  this.el = r.nativeElement;
@@ -137,10 +136,6 @@ export declare interface DsBarNav extends Components.DsBarNav {
137
136
  * Emitted when the active tab changes. Detail = tab id.
138
137
  */
139
138
  dsTabChange: EventEmitter<CustomEvent<string>>;
140
- /**
141
- * Emitted when an action button is toggled. Detail = { id, selected }.
142
- */
143
- dsActionChange: EventEmitter<CustomEvent<{ id: string; selected: boolean }>>;
144
139
  }
145
140
 
146
141
 
package/src/react/ds-bar-nav.ts CHANGED
@@ -15,19 +15,13 @@ import { type DsBarNavCustomEvent } from "@ds-mo/ui";
15
15
  import type { Components } from "@ds-mo/ui/dist/components";
16
16
  import { DsBarNav as DsBarNavElement, defineCustomElement as defineDsBarNav } from "@ds-mo/ui/dist/components/ds-bar-nav.js";
17
17
 
18
- export type DsBarNavEvents = {
19
- onDsTabChange: EventName<DsBarNavCustomEvent<string>>,
20
- onDsActionChange: EventName<DsBarNavCustomEvent<{ id: string; selected: boolean }>>
21
- };
18
+ export type DsBarNavEvents = { onDsTabChange: EventName<DsBarNavCustomEvent<string>> };
22
19
 
23
20
  export const DsBarNav: StencilReactComponent<DsBarNavElement, DsBarNavEvents, Components.DsBarNav> = /*@__PURE__*/ createComponent<DsBarNavElement, DsBarNavEvents, Components.DsBarNav>({
24
21
  tagName: 'ds-bar-nav',
25
22
  elementClass: DsBarNavElement,
26
23
  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
27
24
  react: React,
28
- events: {
29
- onDsTabChange: 'dsTabChange',
30
- onDsActionChange: 'dsActionChange'
31
- } as DsBarNavEvents,
25
+ events: { onDsTabChange: 'dsTabChange' } as DsBarNavEvents,
32
26
  defineCustomElement: defineDsBarNav
33
27
  });
package/src/wc/components/BarNav/BarNav.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  import type { NavChromeStyle } from '../../nav/nav-chrome';
13
13
  import type { MenuItemData } from '../Menu/menu-types';
14
14
  import { isTabDivider } from '../TabGroup/tab-item-utils';
15
- import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
15
+ import type { BarNavTab } from './bar-nav-types';
16
16
  import {
17
17
  deriveBarNavValueFromUrl,
18
18
  parseJsonArrayProp,
@@ -61,15 +61,6 @@ export class BarNav {
61
61
  /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */
62
62
  @Prop({ mutable: true }) value: string = '';
63
63
 
64
- /**
65
- * Action items rendered in the right section.
66
- * Set via JS property: `el.actions = [...]`. Replace the array reference to update.
67
- */
68
- @Prop() actions: BarNavActionItem[] = [];
69
-
70
- /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */
71
- @Prop({ attribute: 'actions-json' }) actionsJson: string = '';
72
-
73
64
  /**
74
65
  * Fallback heading shown when no tabs are provided.
75
66
  * When tabs are present the heading is hidden.
@@ -85,11 +76,7 @@ export class BarNav {
85
76
  /** Emitted when the active tab changes. Detail = tab id. */
86
77
  @Event() dsTabChange!: EventEmitter<string>;
87
78
 
88
- /** Emitted when an action button is toggled. Detail = { id, selected }. */
89
- @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;
90
-
91
79
  @State() private resolvedTabs: BarNavTab[] = [];
92
- @State() private resolvedActions: BarNavActionItem[] = [];
93
80
  @State() private urlDerivedValue: string = '';
94
81
  @State() private hideTabsForDetailRoute = false;
95
82
  @State() private tabsCollapsed = false;
@@ -154,8 +141,6 @@ export class BarNav {
154
141
 
155
142
  @Watch('tabs')
156
143
  @Watch('tabsJson')
157
- @Watch('actions')
158
- @Watch('actionsJson')
159
144
  @Watch('currentUrl')
160
145
  @Watch('basePath')
161
146
  onHostPropsChange() {
@@ -284,16 +269,7 @@ export class BarNav {
284
269
 
285
270
  /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */
286
271
  private syncHostPropsIfNeeded() {
287
- if (
288
- shouldResyncBarNavProps(
289
- this.resolvedTabs,
290
- this.tabs,
291
- this.tabsJson,
292
- this.resolvedActions,
293
- this.actions,
294
- this.actionsJson,
295
- )
296
- ) {
272
+ if (shouldResyncBarNavProps(this.resolvedTabs, this.tabs, this.tabsJson)) {
297
273
  this.applyHostProps();
298
274
  } else if (this.currentUrl && this.basePath) {
299
275
  this.syncValueFromUrl();
@@ -361,27 +337,15 @@ export class BarNav {
361
337
  }
362
338
  }
363
339
 
364
- /** Width left for tabs after actions. */
340
+ /** Width available for the tab row or collapsed trigger. */
365
341
  private getLeftZoneAvailableWidth(): number {
366
342
  if (!this.headerEl) return 0;
367
343
 
368
344
  const headerStyle = getComputedStyle(this.headerEl);
369
- const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;
370
- const actionsEl = this.headerEl.querySelector('.bar-nav__actions') as HTMLElement | null;
371
- const actionsWidth = actionsEl?.offsetWidth ?? 0;
372
345
  const horizontalPadding =
373
346
  (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);
374
- const spacing = this.tabsCollapsed
375
- ? parseFloat(
376
- getComputedStyle(this.headerEl).getPropertyValue('--dimension-space-100').trim(),
377
- ) || 8
378
- : actionsEl
379
- ? gap
380
- : 0;
381
- const available =
382
- this.headerEl.clientWidth - horizontalPadding - actionsWidth - spacing;
383
347
 
384
- return Math.max(0, available);
348
+ return Math.max(0, this.headerEl.clientWidth - horizontalPadding);
385
349
  }
386
350
 
387
351
  private getTabsIntrinsicWidth(): number {
@@ -474,12 +438,6 @@ export class BarNav {
474
438
  : (this.tabs ?? []);
475
439
  }
476
440
 
477
- private incomingActions(): BarNavActionItem[] {
478
- return this.actionsJson
479
- ? parseJsonArrayProp(this.actionsJson, [])
480
- : (this.actions ?? []);
481
- }
482
-
483
441
  private applyHostProps() {
484
442
  const nextBasePath = this.basePath;
485
443
  const sectionChanged =
@@ -492,7 +450,6 @@ export class BarNav {
492
450
  this.committedSection = '';
493
451
  this.pendingSection = nextBasePath;
494
452
  this.resolvedTabs = [];
495
- this.resolvedActions = this.incomingActions();
496
453
  this.resetTabOverflowLayout();
497
454
  return;
498
455
  }
@@ -516,7 +473,6 @@ export class BarNav {
516
473
  this.digestTabsConfig(tabs) !== this.digestTabsConfig(this.resolvedTabs);
517
474
 
518
475
  this.resolvedTabs = tabs;
519
- this.resolvedActions = this.incomingActions();
520
476
  this.syncValueFromUrl();
521
477
  this.committedSection = nextBasePath;
522
478
  if (tabsConfigChanged) {
@@ -572,11 +528,6 @@ export class BarNav {
572
528
  this.selectTab((e as CustomEvent<string>).detail);
573
529
  }
574
530
 
575
- private handleActionChange(actionId: string, e: Event) {
576
- const selected = (e as CustomEvent<boolean>).detail;
577
- this.dsActionChange.emit({ id: actionId, selected });
578
- }
579
-
580
531
  private toggleTabMenu() {
581
532
  if (this.menuOpen) {
582
533
  this.menuOpen = false;
@@ -736,29 +687,6 @@ export class BarNav {
736
687
  </button>
737
688
  )}
738
689
 
739
- {hasTabs &&
740
- this.tabLayoutCommitted &&
741
- this.tabsCollapsed &&
742
- this.resolvedActions.length > 0 && (
743
- <div class="bar-nav__between" aria-hidden="true" />
744
- )}
745
-
746
- {this.resolvedActions.length > 0 && (
747
- <div class="bar-nav__actions">
748
- {this.resolvedActions.map(action => (
749
- <ds-bar-nav-action
750
- key={action.id}
751
- icon={action.icon}
752
- selected={action.selected ?? false}
753
- dot={action.dot ?? false}
754
- inactive={action.inactive}
755
- aria-label={action.ariaLabel ?? action.id}
756
- onDsChange={(e: Event) => this.handleActionChange(action.id, e)}
757
- />
758
- ))}
759
- </div>
760
- )}
761
-
762
690
  </header>
763
691
 
764
692
  {hasTabs && this.tabLayoutCommitted && this.tabsCollapsed && (
package/src/wc/components/BarNav/bar-nav-utils.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { getSelectableTabs } from '../TabGroup/tab-item-utils';
2
- import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
2
+ import type { BarNavTab } from './bar-nav-types';
3
3
 
4
4
  export interface BarNavUrlState {
5
5
  /** Tab id derived from the URL, or empty when none applies. */
@@ -44,24 +44,15 @@ export function shouldResyncBarNavProps(
44
44
  resolvedTabs: BarNavTab[],
45
45
  tabs: BarNavTab[],
46
46
  tabsJson: string,
47
- resolvedActions: BarNavActionItem[],
48
- actions: BarNavActionItem[],
49
- actionsJson: string,
50
47
  ): boolean {
51
48
  const tabsIncoming = tabsJson
52
49
  ? parseJsonArrayProp(tabsJson, [])
53
50
  : (tabs ?? []);
54
- const actionsIncoming = actionsJson
55
- ? parseJsonArrayProp(actionsJson, [])
56
- : (actions ?? []);
57
51
 
58
- return (
59
- (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||
60
- (resolvedActions.length === 0 && actionsIncoming.length > 0)
61
- );
52
+ return resolvedTabs.length === 0 && tabsIncoming.length > 0;
62
53
  }
63
54
 
64
- /** Parse tabs/actions from either a JSON attribute string or a JS property array. */
55
+ /** Parse tabs from either a JSON attribute string or a JS property array. */
65
56
  export function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {
66
57
  if (Array.isArray(value)) return value;
67
58
  if (typeof value === 'string' && value !== '') {
package/src/wc/components.d.ts CHANGED
@@ -9,7 +9,7 @@ import { AccordionItemData } from "./components/Accordion/Accordion";
9
9
  import { NavChromeStyle } from "./nav/nav-chrome";
10
10
  import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
11
11
  import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
12
- import { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
12
+ import { BarNavTab } from "./components/BarNav/bar-nav-types";
13
13
  import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
14
14
  import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
15
15
  import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -47,7 +47,7 @@ export { AccordionItemData } from "./components/Accordion/Accordion";
47
47
  export { NavChromeStyle } from "./nav/nav-chrome";
48
48
  export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
49
49
  export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
50
- export { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
50
+ export { BarNavTab } from "./components/BarNav/bar-nav-types";
51
51
  export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
52
52
  export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
53
53
  export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -192,16 +192,6 @@ export namespace Components {
192
192
  "showDismiss": boolean;
193
193
  }
194
194
  interface DsBarNav {
195
- /**
196
- * Action items rendered in the right section. Set via JS property: `el.actions = [...]`. Replace the array reference to update.
197
- * @default []
198
- */
199
- "actions": BarNavActionItem[];
200
- /**
201
- * JSON fallback for `actions` — useful when framework bindings don't propagate arrays.
202
- * @default ''
203
- */
204
- "actionsJson": string;
205
195
  /**
206
196
  * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
207
197
  * @default ''
@@ -1240,7 +1230,6 @@ declare global {
1240
1230
  };
1241
1231
  interface HTMLDsBarNavElementEventMap {
1242
1232
  "dsTabChange": string;
1243
- "dsActionChange": { id: string; selected: boolean };
1244
1233
  }
1245
1234
  interface HTMLDsBarNavElement extends Components.DsBarNav, HTMLStencilElement {
1246
1235
  addEventListener<K extends keyof HTMLDsBarNavElementEventMap>(type: K, listener: (this: HTMLDsBarNavElement, ev: DsBarNavCustomEvent<HTMLDsBarNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1880,16 +1869,6 @@ declare namespace LocalJSX {
1880
1869
  "showDismiss"?: boolean;
1881
1870
  }
1882
1871
  interface DsBarNav {
1883
- /**
1884
- * Action items rendered in the right section. Set via JS property: `el.actions = [...]`. Replace the array reference to update.
1885
- * @default []
1886
- */
1887
- "actions"?: BarNavActionItem[];
1888
- /**
1889
- * JSON fallback for `actions` — useful when framework bindings don't propagate arrays.
1890
- * @default ''
1891
- */
1892
- "actionsJson"?: string;
1893
1872
  /**
1894
1873
  * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
1895
1874
  * @default ''
@@ -1909,10 +1888,6 @@ declare namespace LocalJSX {
1909
1888
  * @default 'dashboard'
1910
1889
  */
1911
1890
  "navStyle"?: NavChromeStyle;
1912
- /**
1913
- * Emitted when an action button is toggled. Detail = { id, selected }.
1914
- */
1915
- "onDsActionChange"?: (event: DsBarNavCustomEvent<{ id: string; selected: boolean }>) => void;
1916
1891
  /**
1917
1892
  * Emitted when the active tab changes. Detail = tab id.
1918
1893
  */
@@ -2907,7 +2882,6 @@ declare namespace LocalJSX {
2907
2882
  "navStyle": NavChromeStyle;
2908
2883
  "tabsJson": string;
2909
2884
  "value": string;
2910
- "actionsJson": string;
2911
2885
  "heading": string | undefined;
2912
2886
  "basePath": string;
2913
2887
  "currentUrl": string;
package/dist/components/p-Dl1GvZQ2.js DELETED
@@ -1,2 +0,0 @@
1
- import{g as r}from"./p-BQq26pt9.js";function t(t,e,n){if(!t||!e){return{value:"",hideTabs:false}}if(t!==e&&!t.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=t.slice(e.length);const a=s.startsWith("/")?s.slice(1).split("/")[0]:"";const u=r(n);if(!a){return{value:u[0]?.id??"",hideTabs:false}}const i=u.find((r=>r.id===a));if(i){return{value:i.id,hideTabs:false}}return{value:"",hideTabs:true}}function e(r,t,e,s,a,u){const i=e?n(e,[]):t??[];const f=u?n(u,[]):a??[];return r.length===0&&i.length>0||s.length===0&&f.length>0}function n(r,t){if(Array.isArray(r))return r;if(typeof r==="string"&&r!==""){try{const e=JSON.parse(r);return Array.isArray(e)?e:t}catch{return t}}return t}export{t as d,n as p,e as s};
2
- //# sourceMappingURL=p-Dl1GvZQ2.js.map
package/dist/components/p-Dl1GvZQ2.js.map DELETED
@@ -1 +0,0 @@
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"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts"],"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"],"mappings":"6CAYgBA,EACdC,EACAC,EACAC,GAEA,IAAKF,IAASC,EAAU,CACtB,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,GAAIJ,IAASC,IAAaD,EAAKK,WAAW,GAAGJ,MAAc,CACzD,MAAO,CAAEE,MAAO,GAAIC,SAAU,M,CAGhC,MAAME,EAAYN,EAAKO,MAAMN,EAASO,QACtC,MAAMC,EAAMH,EAAUD,WAAW,KAAOC,EAAUC,MAAM,GAAGG,MAAM,KAAK,GAAK,GAC3E,MAAMC,EAAiBC,EAAkBV,GAEzC,IAAKO,EAAK,CACR,MAAO,CAAEN,MAAOQ,EAAe,IAAIE,IAAM,GAAIT,SAAU,M,CAGzD,MAAMU,EAAMH,EAAeI,MAAKC,GAAKA,EAAEH,KAAOJ,IAC9C,GAAIK,EAAK,CACP,MAAO,CAAEX,MAAOW,EAAID,GAAIT,SAAU,M,CAGpC,MAAO,CAAED,MAAO,GAAIC,SAAU,KAChC,CAGM,SAAUa,EACdC,EACAhB,EACAiB,EACAC,EACAC,EACAC,GAEA,MAAMC,EAAeJ,EACjBK,EAAmBL,EAAU,IAC5BjB,GAAQ,GACb,MAAMuB,EAAkBH,EACpBE,EAAmBF,EAAa,IAC/BD,GAAW,GAEhB,OACGH,EAAaV,SAAW,GAAKe,EAAaf,OAAS,GACnDY,EAAgBZ,SAAW,GAAKiB,EAAgBjB,OAAS,CAE9D,CAGM,SAAUgB,EAAsBrB,EAAiCuB,GACrE,GAAIC,MAAMC,QAAQzB,GAAQ,OAAOA,EACjC,UAAWA,IAAU,UAAYA,IAAU,GAAI,CAC7C,IACE,MAAM0B,EAASC,KAAKC,MAAM5B,GAC1B,OAAOwB,MAAMC,QAAQC,GAAUA,EAASH,C,CACxC,MACA,OAAOA,C,EAGX,OAAOA,CACT,Q","ignoreList":[]}