@ds-mo/ui 2.1.1 → 2.2.0

package/README.md

@@ -69,7 +69,7 @@ All tags are `ds-*` custom elements. Grouped by role (see Storybook for props an
 
 ### Navigation
 - **TabGroup** (pill), **TabGroupNav** (underline), **Breadcrumb**
-- **AppShell**, **PanelNav**, **BarNav**, **BarNavAction**, **PanelTools**
+- **AppShell**, **PanelNav**, **BarNav**, **PanelTools**
 
 ### Status & layout
 - **EmptyState**, **Loader**, **Skeleton**, **Header**, **Fade**, **Scrollbar**

package/dist/.build-stamp

@@ -1 +1 @@
-1783118154132
+1783311103930

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

@@ -1,2 +1,2 @@
-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};
+import{p as s,H as t,c as i,h as e,a as n,t as r}from"./index.js";import{i as a}from"./p-BQq26pt9.js";import{s as o,p as h,d as l}from"./p-BOQnc-M4.js";import{C as c,c as d,a as f,b,r as u,d as v}from"./p-BiM6QBTF.js";import{d as p}from"./p-CiEc8Nwx.js";import{d as g}from"./p-CSc44rQs.js";import{d as m}from"./p-DqBCQRRd.js";import{d as y}from"./p-YzIqPOqL.js";import{d as _}from"./p-CZpCmCiq.js";function C(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function w(s){return C(s,'[role="tablist"]')}function k(s,t){const i=[];let e=[];for(const n of s){if(a(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,isSelected:n.id===t,isInactive:n.disabled})}if(e.length>0){i.push({items:e})}return i}function T(s,t){return k(M(s),t)}function x(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function O(s,t,i,e,n){if(s.length===0||t<=0)return 0;const r=P(s,s.length,e,n);if(r<=t)return s.length;const a=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=P(s,t,e,n);if(i>a)break;o=t}return o}function S(s){let t=s.length;while(t>0&&a(s[t-1])){t-=1}return s.slice(0,t)}function M(s){let t=0;while(t<s.length&&a(s[t])){t+=1}return s.slice(t)}function P(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const D=()=>`.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3),     border-color var(--effect-motion-short-3),     color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[gradient] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[grid] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-icon-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-icon-fg-active:var(--_bar-nav-fg-primary);--ds-button-unfilled-icon-hover-bg:var(--_bar-nav-hover);--ds-button-unfilled-icon-pressed-bg:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const F=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=d((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=u(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=v(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=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 hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}digestTabsConfig(s){return s.map((s=>a(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(b,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(b,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(o(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){const s=w(this.probeTabGroupEl);return s?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=w(this.probeTabGroupEl);if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const r=i.reduce(((s,t)=>s+t),0);const a=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-r-a);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false}}}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=x(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=O(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const r=S(this.resolvedTabs.slice(0,n));const a=this.resolvedTabs.slice(r.length);this.setOverflowTabLayout(r,a);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}incomingTabs(){return this.tabsJson?h(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=T(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=C(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}handleTabChange(s){this.selectTab(s.detail)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowDown"||s.key==="ArrowUp"||s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}render(){const s=this.basePath!==""&&this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const r=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"2ab4261f04e84de483858b6df0496a56ab8d94ba"},e("header",{key:"485e6914944bf9abcc676091a3b12b9bc6b03c27",class:{"bar-nav":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"57edea8364968cd6a43bb2c89beeb8b48dd82526",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("ds-tab-group-nav",{key:`probe-${i}`,ref:s=>{const t=s??null;if(t===this.probeTabGroupEl)return;this.probeTabGroupEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),t&&this.tabLayoutCommitted&&r.length>0&&e("div",{key:"b3a2615a2db4c67098d6084122b15597d907457e",class:"bar-nav__left"},e("ds-tab-group-nav",{key:`visible-${i}`,class:"bar-nav__tabs-visible",ref:s=>{this.visibleTabGroupEl=s??null},tabs:r,value:this.effectiveValue,onDsChange:s=>this.handleTabChange(s)})),t&&!this.tabLayoutCommitted&&e("div",{key:"1c701a40a5c5b43cfe36e3152f4fc0a66f106ec7",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("span",{key:"9b3f85820eeb33249d6bb9ff63f2c3215fed6ebe",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled-icon",{key:"fc6df3ab3bf7a3a1483bc7b4bc3fa894f9cbc4b6",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"aria-label":"More tabs",onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"f4e1616f7ebd15340aefede78a6bf2d39109e8a6",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:T(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return D()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],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}]}]);F.HOST_PROP_SYNC_BUDGET=8;F.INTRINSIC_WIDTH_RETRY_MAX=3;F.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;F.OVERFLOW_HYSTERESIS_PX=8;function E(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled-icon","ds-icon","ds-menu","ds-tab-group-nav"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),F)}break;case"ds-badge":if(!customElements.get(r(s))){p()}break;case"ds-button-unfilled-icon":if(!customElements.get(r(s))){g()}break;case"ds-icon":if(!customElements.get(r(s))){m()}break;case"ds-menu":if(!customElements.get(r(s))){y()}break;case"ds-tab-group-nav":if(!customElements.get(r(s))){_()}break}}))}E();const H=F;const q=E;export{H as DsBarNav,q as defineCustomElement};
 //# sourceMappingURL=ds-bar-nav.js.map

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

@@ -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","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":[]}
+{"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","tabsToOverflowMenuSections","trimLeadingDividers","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","visibleTabCountForWidth","itemWidths","availableWidth","overflowTriggerWidth","itemGap","listExtraWidth","fullWidth","widthForItemCount","availableForTabs","Math","max","count","i","width","trimTrailingDividers","end","slice","start","itemsWidth","reduce","sum","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","tabsJson","basePath","currentUrl","resolvedTabs","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","visibleTabs","overflowTabs","menuInitialFocusVisible","headerEl","triggerEl","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","intrinsicWidthRetryCount","tabLayoutPendingFrames","panelNavTransition","ChromeTransitionDepth","panelToolsTransition","overflowCoalescer","createRafCoalescer","updateTabsCollapsed","chromeTransitionShell","committedSection","pendingSection","onChromeTransitionStart","event","source","readChromeTransitionSource","enter","phase","readChromeTransitionPhase","onChromeTransitionEnd","exit","isActive","scheduleOverflowCheck","effectiveValue","hasOverflowTabs","digestTabsConfig","map","t","join","resetTabOverflowLayout","onHostPropsChange","applyHostProps","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","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","getLeftZoneAvailableWidth","headerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","clientWidth","getTabsIntrinsicWidth","tabList","scrollWidth","getHeaderGap","style","columnGap","gap","getOverflowTriggerReserveWidth","getBoundingClientRect","getProbeTabMetrics","children","Array","from","child","some","childrenWidth","gapWidth","setOverflowTabLayout","nextCollapsed","visibleChanged","overflowChanged","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","forceTabLayoutCommit","fallbackCollapsed","metrics","intrinsicWidth","TAB_LAYOUT_COMMIT_MAX_FRAMES","shouldCollapse","OVERFLOW_HYSTERESIS_PX","visibleCount","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","incomingTabs","parseJsonArrayProp","nextBasePath","sectionChanged","startsWith","tabsConfigChanged","hideTabs","deriveBarNavValueFromUrl","dsTabChange","emit","tab","focus","preventScroll","handleTabChange","toggleTabMenu","options","minWidth","focusVisible","handleTriggerKeyDown","key","preventDefault","setFocus","render","sectionReady","hasTabs","tabGroupKey","renderedTabs","h","Host","class","ref","inert","next","onDsChange","heading","icon","activeFill","haspopup","expanded","onDsClick","onKeyDown","side","align","sideOffset","alignOffset","initialFocusVisible","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 tabsToOverflowMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n  return tabsToMenuSections(trimLeadingDividers(tabs), selectedId);\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\nexport function visibleTabCountForWidth(\n  itemWidths: number[],\n  availableWidth: number,\n  overflowTriggerWidth: number,\n  itemGap: number,\n  listExtraWidth: number,\n): number {\n  if (itemWidths.length === 0 || availableWidth <= 0) return 0;\n\n  const fullWidth = widthForItemCount(itemWidths, itemWidths.length, itemGap, listExtraWidth);\n  if (fullWidth <= availableWidth) return itemWidths.length;\n\n  const availableForTabs = Math.max(0, availableWidth - overflowTriggerWidth);\n  let count = 0;\n\n  for (let i = 1; i <= itemWidths.length; i++) {\n    const width = widthForItemCount(itemWidths, i, itemGap, listExtraWidth);\n    if (width > availableForTabs) break;\n    count = i;\n  }\n\n  return count;\n}\n\nexport function trimTrailingDividers(tabs: TabItem[]): TabItem[] {\n  let end = tabs.length;\n  while (end > 0 && isTabDivider(tabs[end - 1])) {\n    end -= 1;\n  }\n  return tabs.slice(0, end);\n}\n\nfunction trimLeadingDividers(tabs: TabItem[]): TabItem[] {\n  let start = 0;\n  while (start < tabs.length && isTabDivider(tabs[start])) {\n    start += 1;\n  }\n  return tabs.slice(start);\n}\n\nfunction widthForItemCount(\n  itemWidths: number[],\n  count: number,\n  itemGap: number,\n  listExtraWidth: number,\n): number {\n  if (count <= 0) return 0;\n  const itemsWidth = itemWidths.slice(0, count).reduce((sum, width) => sum + width, 0);\n  return listExtraWidth + itemsWidth + itemGap * Math.max(0, count - 1);\n}\n","@import '../../utils/focus-ring.css';\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  --ds-focus-ring-color: var(--_bar-nav-focus);\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/* Overflow — keep fitting tabs visible and pin the overflow trigger to the far edge. */\n.bar-nav--tabs-collapsed {\n  display: flex;\n  gap: var(--dimension-space-100);\n  align-items: center;\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/* Overflow trigger — compact icon button aligned to the right edge. */\n.bar-nav__overflow-trigger {\n  margin-left: auto;\n  --ds-button-unfilled-icon-fg: var(--_bar-nav-fg-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--_bar-nav-fg-primary);\n  --ds-button-unfilled-icon-hover-bg: var(--_bar-nav-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--_bar-nav-pressed);\n  --ds-focus-ring-color: var(--_bar-nav-focus);\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  tabsOverflowContainer,\n  tabsToOverflowMenuSections,\n  trimTrailingDividers,\n  visibleTabCountForWidth,\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 visibleTabs: BarNavTab[] = [];\n  @State() private overflowTabs: BarNavTab[] = [];\n  @State() private menuInitialFocusVisible = 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: (HTMLElement & { setFocus?: () => Promise<void> }) | 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  });\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 hasOverflowTabs(): boolean {\n    return this.tabLayoutCommitted && this.tabsCollapsed && this.overflowTabs.length > 0;\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.menuInitialFocusVisible = false;\n    this.intrinsicWidthRetryCount = 0;\n    this.tabLayoutPendingFrames = 0;\n    this.visibleTabs = [];\n    this.overflowTabs = [];\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.menuInitialFocusVisible = false;\n      this.menuEl = null;\n    }\n    this.scheduleOverflowCheck();\n    if (collapsed) {\n      requestAnimationFrame(() => {\n        this.scheduleOverflowCheck();\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  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.overflowCoalescer.cancel();\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  /** 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 getHeaderGap(): number {\n    if (!this.headerEl) return 0;\n    const style = getComputedStyle(this.headerEl);\n    return parseFloat(style.columnGap || style.gap) || 0;\n  }\n\n  private getOverflowTriggerReserveWidth(): number {\n    if (!this.triggerEl) {\n      return 40;\n    }\n    return this.triggerEl.getBoundingClientRect().width + this.getHeaderGap();\n  }\n\n  private getProbeTabMetrics():\n    | {\n        itemWidths: number[];\n        itemGap: number;\n        listExtraWidth: number;\n      }\n    | null {\n    const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n    if (!tabList) return null;\n\n    const children = Array.from(tabList.children) as HTMLElement[];\n    const itemWidths = children.map(child => child.getBoundingClientRect().width);\n    if (itemWidths.length === 0 || itemWidths.some(width => width === 0)) return null;\n\n    const style = getComputedStyle(tabList);\n    const itemGap = parseFloat(style.columnGap || style.gap) || 0;\n    const childrenWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n    const gapWidth = itemGap * Math.max(0, itemWidths.length - 1);\n    const listExtraWidth = Math.max(0, tabList.scrollWidth - childrenWidth - gapWidth);\n\n    return { itemWidths, itemGap, listExtraWidth };\n  }\n\n  private setOverflowTabLayout(visibleTabs: BarNavTab[], overflowTabs: BarNavTab[]) {\n    const nextCollapsed = overflowTabs.length > 0;\n    const visibleChanged =\n      this.digestTabsConfig(visibleTabs) !== this.digestTabsConfig(this.visibleTabs);\n    const overflowChanged =\n      this.digestTabsConfig(overflowTabs) !== this.digestTabsConfig(this.overflowTabs);\n\n    if (visibleChanged) {\n      this.visibleTabs = visibleTabs;\n    }\n    if (overflowChanged) {\n      this.overflowTabs = overflowTabs;\n    }\n    if (nextCollapsed !== this.tabsCollapsed) {\n      this.tabsCollapsed = nextCollapsed;\n      if (!nextCollapsed) {\n        this.menuOpen = false;\n      }\n    }\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.setOverflowTabLayout(\n      fallbackCollapsed ? [] : this.resolvedTabs,\n      fallbackCollapsed ? this.resolvedTabs : [],\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.setOverflowTabLayout([], []);\n      }\n      this.intrinsicWidthRetryCount = 0;\n      this.tabLayoutPendingFrames = 0;\n      this.tabLayoutCommitted = true;\n      return;\n    }\n\n    const metrics = this.getProbeTabMetrics();\n    const intrinsicWidth = this.getTabsIntrinsicWidth();\n    if (!metrics || 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) {\n      this.setOverflowTabLayout(this.resolvedTabs, []);\n      this.tabLayoutCommitted = true;\n      return;\n    }\n\n    const visibleCount = visibleTabCountForWidth(\n      metrics.itemWidths,\n      this.getLeftZoneAvailableWidth(),\n      this.getOverflowTriggerReserveWidth(),\n      metrics.itemGap,\n      metrics.listExtraWidth,\n    );\n    const visibleTabs = trimTrailingDividers(this.resolvedTabs.slice(0, visibleCount));\n    const overflowTabs = this.resolvedTabs.slice(visibleTabs.length);\n    this.setOverflowTabLayout(visibleTabs, overflowTabs);\n    this.tabLayoutCommitted = true;\n  }\n\n  private syncMenuAnchor() {\n    if (!this.menuEl || !this.triggerEl || !this.hasOverflowTabs) 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    this.menuInitialFocusVisible = false;\n  }\n\n  private handleMenuClose() {\n    this.menuOpen = false;\n    this.menuInitialFocusVisible = 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 = tabsToOverflowMenuSections(this.overflowTabs, 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(options?: { focusVisible?: boolean }) {\n    if (this.menuOpen) {\n      this.menuOpen = false;\n      this.menuInitialFocusVisible = false;\n      return;\n    }\n\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n      this.menuEl.minWidth = '';\n      this.syncMenuSections();\n    }\n\n    this.menuInitialFocusVisible = options?.focusVisible ?? false;\n    this.menuOpen = true;\n  }\n\n  private handleTriggerKeyDown(e: KeyboardEvent) {\n    if (!this.hasOverflowTabs) 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({ focusVisible: true });\n      }\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.menuOpen = false;\n      this.menuInitialFocusVisible = false;\n      void this.triggerEl?.setFocus?.();\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    const renderedTabs = this.hasOverflowTabs ? this.visibleTabs : this.resolvedTabs;\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.hasOverflowTabs,\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 && renderedTabs.length > 0 && (\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={renderedTabs}\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.hasOverflowTabs && (\n              <ds-button-unfilled-icon\n                class={{\n                  'bar-nav__overflow-trigger': true,\n                }}\n                icon=\"Ellipses\"\n                isActive={this.menuOpen}\n                activeFill={false}\n                ref={(el?: HTMLDsButtonUnfilledIconElement) => {\n                  this.triggerEl = (el as (HTMLElement & { setFocus?: () => Promise<void> })) ?? null;\n                }}\n                haspopup=\"menu\"\n                expanded={this.menuOpen}\n                aria-label=\"More tabs\"\n                onDsClick={() => this.toggleTabMenu({ focusVisible: false })}\n                onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n              />\n            )}\n\n        </header>\n\n        {hasTabs && this.hasOverflowTabs && (\n          <ds-menu\n            ref={el => {\n              this.menuEl = (el as HTMLDsMenuElement) ?? null;\n            }}\n            open={this.menuOpen}\n            sections={tabsToOverflowMenuSections(this.overflowTabs, this.effectiveValue)}\n            side=\"bottom\"\n            align=\"end\"\n            sideOffset=\"calc(var(--dimension-space-100) + var(--dimension-space-050))\"\n            alignOffset=\"var(--dimension-space-050)\"\n            initialFocusVisible={this.menuInitialFocusVisible}\n            onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n            onDsClose={() => this.handleMenuClose()}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"8YASM,SAAUA,EACdC,EACAC,GAEA,IAAKD,EAAM,OAAO,KAClB,MAAME,EAAOF,EAAKG,YAAcH,EAChC,OAAOE,EAAKE,cAAcH,EAC5B,CAEM,SAAUI,EACdC,GAEA,OAAOP,EAAyBO,EAAY,mBAC9C,CCbM,SAAUC,EAAmBC,EAAiBC,GAClD,MAAMC,EAA0B,GAChC,IAAIC,EAA8B,GAElC,IAAK,MAAMC,KAAQJ,EAAM,CACvB,GAAIK,EAAaD,GAAO,CACtB,GAAID,EAAMG,OAAS,EAAG,CACpBJ,EAASK,KAAK,CAAEC,MAAOL,IACvBA,EAAQ,E,CAEV,Q,CAGFA,EAAMI,KAAK,CACTE,MAAOL,EAAKK,MACZC,MAAON,EAAKO,GACZC,WAAYR,EAAKO,KAAOV,EACxBY,WAAYT,EAAKU,U,CAIrB,GAAIX,EAAMG,OAAS,EAAG,CACpBJ,EAASK,KAAK,CAAEC,MAAOL,G,CAGzB,OAAOD,CACT,CAEM,SAAUa,EAA2Bf,EAAiBC,GAC1D,OAAOF,EAAmBiB,EAAoBhB,GAAOC,EACvD,CAYM,SAAUgB,EACdC,EACAC,EACAC,EACAC,EAAa,GAEb,MAAMC,EAAOJ,EAAqBC,EAClC,GAAIC,EAAW,CACb,OAAOE,GAAQD,C,CAEjB,OAAOC,EAAOD,CAChB,CAEM,SAAUE,EACdC,EACAC,EACAC,EACAC,EACAC,GAEA,GAAIJ,EAAWlB,SAAW,GAAKmB,GAAkB,EAAG,OAAO,EAE3D,MAAMI,EAAYC,EAAkBN,EAAYA,EAAWlB,OAAQqB,EAASC,GAC5E,GAAIC,GAAaJ,EAAgB,OAAOD,EAAWlB,OAEnD,MAAMyB,EAAmBC,KAAKC,IAAI,EAAGR,EAAiBC,GACtD,IAAIQ,EAAQ,EAEZ,IAAK,IAAIC,EAAI,EAAGA,GAAKX,EAAWlB,OAAQ6B,IAAK,CAC3C,MAAMC,EAAQN,EAAkBN,EAAYW,EAAGR,EAASC,GACxD,GAAIQ,EAAQL,EAAkB,MAC9BG,EAAQC,C,CAGV,OAAOD,CACT,CAEM,SAAUG,EAAqBrC,GACnC,IAAIsC,EAAMtC,EAAKM,OACf,MAAOgC,EAAM,GAAKjC,EAAaL,EAAKsC,EAAM,IAAK,CAC7CA,GAAO,C,CAET,OAAOtC,EAAKuC,MAAM,EAAGD,EACvB,CAEA,SAAStB,EAAoBhB,GAC3B,IAAIwC,EAAQ,EACZ,MAAOA,EAAQxC,EAAKM,QAAUD,EAAaL,EAAKwC,IAAS,CACvDA,GAAS,C,CAEX,OAAOxC,EAAKuC,MAAMC,EACpB,CAEA,SAASV,EACPN,EACAU,EACAP,EACAC,GAEA,GAAIM,GAAS,EAAG,OAAO,EACvB,MAAMO,EAAajB,EAAWe,MAAM,EAAGL,GAAOQ,QAAO,CAACC,EAAKP,IAAUO,EAAMP,GAAO,GAClF,OAAOR,EAAiBa,EAAad,EAAUK,KAAKC,IAAI,EAAGC,EAAQ,EACrE,CCjHA,MAAMU,EAAY,IAAM,ioI,MC6CXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,mFAOmDC,KAAAC,SAA2B,YAQpED,KAAAlD,KAAoB,GAGMkD,KAAAE,SAAmB,GAG5BF,KAAAxC,MAAgB,GASjCwC,KAAAG,SAAmB,GAGnBH,KAAAI,WAAqB,GAKZJ,KAAAK,aAA4B,GAC5BL,KAAAM,gBAA0B,GAC1BN,KAAAO,uBAAyB,MACzBP,KAAAQ,cAAgB,MAChBR,KAAAS,SAAW,MAEXT,KAAAU,mBAAqB,MACrBV,KAAAW,YAA2B,GAC3BX,KAAAY,aAA4B,GAC5BZ,KAAAa,wBAA0B,MAOnCb,KAAAc,SAA+B,KAC/Bd,KAAAe,UAAuE,KACvEf,KAAAgB,OAAmC,KACnChB,KAAAiB,kBAA0C,KAC1CjB,KAAAkB,gBAAwC,KACxClB,KAAAmB,eAAwC,KACxCnB,KAAAoB,yBAA2B,EAC3BpB,KAAAqB,uBAAyB,EAChBrB,KAAAsB,mBAAqB,IAAIC,EACzBvB,KAAAwB,qBAAuB,IAAID,EAC3BvB,KAAAyB,kBAAoBC,GAAmB,KACtD1B,KAAK2B,qBAAqB,IAEpB3B,KAAA4B,sBAA4C,KAEnC5B,KAAA6B,iBAAmB,GAEnB7B,KAAA8B,eAAiB,GAqH1B9B,KAAA+B,wBAA2BC,IACjC,MAAMC,EAASC,EAA2BF,GAC1C,GAAIC,IAAW,YAAa,CAC1BjC,KAAKsB,mBAAmBa,QACxB,M,CAEF,GAAIF,IAAW,cAAe,CAC5B,MAAMG,EAAQC,EAA0BL,IAAU,UAClD,GAAII,IAAU,UAAW,CACvBpC,KAAKwB,qBAAqBW,O,IASxBnC,KAAAsC,sBAAyBN,IAC/B,MAAMC,EAASC,EAA2BF,GAC1C,GAAIC,IAAW,YAAa,CAC1BjC,KAAKsB,mBAAmBiB,OACxB,IAAKvC,KAAKsB,mBAAmBkB,SAAU,CACrCxC,KAAKyC,uB,CAEP,M,CAEF,GAAIR,IAAW,cAAe,CAC5BjC,KAAKwB,qBAAqBe,OAC1BvC,KAAKyC,uB,EA2bV,CA3kBC,kBAAYC,GACV,GAAI1C,KAAKI,YAAcJ,KAAKG,SAAU,CACpC,OAAOH,KAAKM,e,CAEd,OAAON,KAAKxC,K,CAGd,mBAAYmF,GACV,OAAO3C,KAAKU,oBAAsBV,KAAKQ,eAAiBR,KAAKY,aAAaxD,OAAS,C,CAG7E,gBAAAwF,CAAiB9F,GACvB,OAAOA,EAAK+F,KAAIC,GAAM3F,EAAa2F,GAAK,IAAMA,EAAErF,KAAKsF,KAAK,I,CAGpD,sBAAAC,GACNhD,KAAKU,mBAAqB,MAC1BV,KAAKQ,cAAgB,MACrBR,KAAKS,SAAW,MAChBT,KAAKa,wBAA0B,MAC/Bb,KAAKoB,yBAA2B,EAChCpB,KAAKqB,uBAAyB,EAC9BrB,KAAKW,YAAc,GACnBX,KAAKY,aAAe,E,CAOtB,iBAAAqC,GACEjD,KAAKkD,gB,CAKP,iBAAAC,GACEnD,KAAKoD,mBACLpD,KAAKyC,uB,CAIP,gBAAAY,CAAiBC,GACf,GAAItD,KAAKgB,OAAQ,CACfhB,KAAKgB,OAAOsC,KAAOA,C,EAKvB,qBAAAC,CAAsBrF,EAAoBsF,GACxC,IAAKtF,EAAW,CACd8B,KAAKS,SAAW,MAChBT,KAAKa,wBAA0B,MAC/Bb,KAAKgB,OAAS,I,CAEhBhB,KAAKyC,wBACL,GAAIvE,EAAW,CACbuF,uBAAsB,KACpBzD,KAAKyC,uBAAuB,G,CAGhC,GAAIvE,GAAasF,IAAkBE,WAAaF,IAAkBtF,EAAW,OAC7EuF,uBAAsB,IAAMzD,KAAKyC,0BACjCkB,gBAAe,IAAM3D,KAAK4D,2B,CAG5B,iBAAAC,GACE7D,KAAKkD,gB,CAGP,gBAAAY,GACE9D,KAAK+D,wBACL/D,KAAKgE,+BACLhE,KAAKiE,wBACLjE,KAAKkE,gCACLlE,KAAKyC,uB,CAGP,kBAAA0B,GACE,GAAInE,KAAKoE,uBAAwB,CAC/BpE,KAAKqE,iBACL,M,CAEFrE,KAAKyC,wBACLzC,KAAKqE,gB,CAGP,oBAAAC,GACEtE,KAAKmB,gBAAgBoD,aACrBvE,KAAKmB,eAAiB,KACtBnB,KAAKyB,kBAAkB+C,SACvBxE,KAAKyE,iC,CAGC,6BAAAP,GACN,MAAMQ,EAAQ1E,KAAK2E,GAAGC,QAAQ,gBAC9B,IAAKF,EAAO,OACZ1E,KAAK4B,sBAAwB8C,EAC7BA,EAAMG,iBAAiBC,EAAyB9E,KAAK+B,yBACrD2C,EAAMG,iBAAiBE,EAAuB/E,KAAKsC,sB,CAG7C,+BAAAmC,GACN,IAAKzE,KAAK4B,sBAAuB,OACjC5B,KAAK4B,sBAAsBoD,oBACzBF,EACA9E,KAAK+B,yBAEP/B,KAAK4B,sBAAsBoD,oBACzBD,EACA/E,KAAKsC,uBAEPtC,KAAK4B,sBAAwB,I,CAiBvB,oBAAAwC,GACN,OAAOpE,KAAKsB,mBAAmBkB,UAAYxC,KAAKwB,qBAAqBgB,Q,CAmB/D,qBAAAuB,GACN,GAAIkB,EAAwBjF,KAAKK,aAAcL,KAAKlD,KAAMkD,KAAKE,UAAW,CACxEF,KAAKkD,gB,MACA,GAAIlD,KAAKI,YAAcJ,KAAKG,SAAU,CAC3CH,KAAKkF,kB,EAKD,4BAAAlB,GACN,IAAImB,EAAYxF,EAAOyF,sBACvB,MAAMC,EAAO,KACXrF,KAAK+D,wBACL,KAAMoB,EAAY,EAAG,CACnB1B,sBAAsB4B,E,GAG1B1B,eAAe0B,E,CAGT,qBAAApB,GACN,UAAWqB,iBAAmB,cAAgBtF,KAAKc,SAAU,OAC7Dd,KAAKmB,gBAAgBoD,aACrBvE,KAAKmB,eAAiB,IAAImE,gBAAe,KACvC,GAAItF,KAAKoE,uBAAwB,OACjCpE,KAAKyC,uBAAuB,IAE9BzC,KAAKmB,eAAeoE,QAAQvF,KAAKc,S,CAG3B,qBAAA2B,GACN,GAAIzC,KAAKoE,uBAAwB,OACjCpE,KAAKyB,kBAAkB+D,U,CAIjB,yBAAAC,GACN,IAAKzF,KAAKc,SAAU,OAAO,EAE3B,MAAM4E,EAAcC,iBAAiB3F,KAAKc,UAC1C,MAAM8E,GACHC,WAAWH,EAAYI,cAAgB,IAAMD,WAAWH,EAAYK,eAAiB,GAExF,OAAOjH,KAAKC,IAAI,EAAGiB,KAAKc,SAASkF,YAAcJ,E,CAGzC,qBAAAK,GACN,MAAMC,EAAUvJ,EAAuBqD,KAAKkB,iBAC5C,OAAOgF,GAASC,aAAe,C,CAGzB,YAAAC,GACN,IAAKpG,KAAKc,SAAU,OAAO,EAC3B,MAAMuF,EAAQV,iBAAiB3F,KAAKc,UACpC,OAAO+E,WAAWQ,EAAMC,WAAaD,EAAME,MAAQ,C,CAG7C,8BAAAC,GACN,IAAKxG,KAAKe,UAAW,CACnB,OAAO,E,CAET,OAAOf,KAAKe,UAAU0F,wBAAwBvH,MAAQc,KAAKoG,c,CAGrD,kBAAAM,GAON,MAAMR,EAAUvJ,EAAuBqD,KAAKkB,iBAC5C,IAAKgF,EAAS,OAAO,KAErB,MAAMS,EAAWC,MAAMC,KAAKX,EAAQS,UACpC,MAAMrI,EAAaqI,EAAS9D,KAAIiE,GAASA,EAAML,wBAAwBvH,QACvE,GAAIZ,EAAWlB,SAAW,GAAKkB,EAAWyI,MAAK7H,GAASA,IAAU,IAAI,OAAO,KAE7E,MAAMmH,EAAQV,iBAAiBO,GAC/B,MAAMzH,EAAUoH,WAAWQ,EAAMC,WAAaD,EAAME,MAAQ,EAC5D,MAAMS,EAAgB1I,EAAWkB,QAAO,CAACC,EAAKP,IAAUO,EAAMP,GAAO,GACrE,MAAM+H,EAAWxI,EAAUK,KAAKC,IAAI,EAAGT,EAAWlB,OAAS,GAC3D,MAAMsB,EAAiBI,KAAKC,IAAI,EAAGmH,EAAQC,YAAca,EAAgBC,GAEzE,MAAO,CAAE3I,aAAYG,UAASC,iB,CAGxB,oBAAAwI,CAAqBvG,EAA0BC,GACrD,MAAMuG,EAAgBvG,EAAaxD,OAAS,EAC5C,MAAMgK,EACJpH,KAAK4C,iBAAiBjC,KAAiBX,KAAK4C,iBAAiB5C,KAAKW,aACpE,MAAM0G,EACJrH,KAAK4C,iBAAiBhC,KAAkBZ,KAAK4C,iBAAiB5C,KAAKY,cAErE,GAAIwG,EAAgB,CAClBpH,KAAKW,YAAcA,C,CAErB,GAAI0G,EAAiB,CACnBrH,KAAKY,aAAeA,C,CAEtB,GAAIuG,IAAkBnH,KAAKQ,cAAe,CACxCR,KAAKQ,cAAgB2G,EACrB,IAAKA,EAAe,CAClBnH,KAAKS,SAAW,K,GAKd,2BAAA6G,GACN,GAAItH,KAAKoB,0BAA4BzB,EAAO4H,0BAA2B,OACvEvH,KAAKoB,2BACLqC,uBAAsB,IAAMzD,KAAKyC,yB,CAG3B,oBAAA+E,CAAqBC,GAC3BzH,KAAKoB,yBAA2B,EAChCpB,KAAKqB,uBAAyB,EAC9BrB,KAAKkH,qBACHO,EAAoB,GAAKzH,KAAKK,aAC9BoH,EAAoBzH,KAAKK,aAAe,IAE1CL,KAAKU,mBAAqB,I,CAGpB,mBAAAiB,GACN,IAAK3B,KAAKc,UAAYd,KAAKK,aAAajD,SAAW,GAAK4C,KAAKO,uBAAwB,CACnF,GAAIP,KAAKQ,cAAe,CACtBR,KAAKkH,qBAAqB,GAAI,G,CAEhClH,KAAKoB,yBAA2B,EAChCpB,KAAKqB,uBAAyB,EAC9BrB,KAAKU,mBAAqB,KAC1B,M,CAGF,MAAMgH,EAAU1H,KAAK0G,qBACrB,MAAMiB,EAAiB3H,KAAKiG,wBAC5B,IAAKyB,GAAWC,IAAmB,EAAG,CACpC3H,KAAKqB,wBAA0B,EAC/B,GAAIrB,KAAKoB,0BAA4BzB,EAAO4H,0BAA2B,CACrEvH,KAAKwH,qBAAqB,M,MACrB,GAAIxH,KAAKqB,wBAA0B1B,EAAOiI,6BAA8B,CAC7E5H,KAAKwH,qBAAqB,M,KACrB,CACLxH,KAAKsH,6B,CAEP,M,CAEFtH,KAAKoB,yBAA2B,EAChCpB,KAAKqB,uBAAyB,EAE9B,MAAMwG,EAAiB9J,EACrB4J,EACA3H,KAAKyF,4BACLzF,KAAKQ,cACLb,EAAOmI,wBAGT,IAAKD,EAAgB,CACnB7H,KAAKkH,qBAAqBlH,KAAKK,aAAc,IAC7CL,KAAKU,mBAAqB,KAC1B,M,CAGF,MAAMqH,EAAe1J,EACnBqJ,EAAQpJ,WACR0B,KAAKyF,4BACLzF,KAAKwG,iCACLkB,EAAQjJ,QACRiJ,EAAQhJ,gBAEV,MAAMiC,EAAcxB,EAAqBa,KAAKK,aAAahB,MAAM,EAAG0I,IACpE,MAAMnH,EAAeZ,KAAKK,aAAahB,MAAMsB,EAAYvD,QACzD4C,KAAKkH,qBAAqBvG,EAAaC,GACvCZ,KAAKU,mBAAqB,I,CAGpB,cAAA2D,GACN,IAAKrE,KAAKgB,SAAWhB,KAAKe,YAAcf,KAAK2C,gBAAiB,OAC9D3C,KAAKgB,OAAOgH,OAAShI,KAAKe,UAC1Bf,KAAKoD,kB,CAGC,gBAAA6E,CAAiBC,GACvB,MAAMC,EAAUD,EAAgCC,OAChD,GAAIA,GAAQ3K,QAAUkG,UAAW,CAC/B1D,KAAKoI,UAAUC,OAAOF,EAAO3K,O,CAE/BwC,KAAKS,SAAW,MAChBT,KAAKa,wBAA0B,K,CAGzB,eAAAyH,GACNtI,KAAKS,SAAW,MAChBT,KAAKa,wBAA0B,K,CAIzB,YAAA0H,GACN,OAAOvI,KAAKE,SACRsI,EAAmBxI,KAAKE,SAAU,IACjCF,KAAKlD,MAAQ,E,CAGZ,cAAAoG,GACN,MAAMuF,EAAezI,KAAKG,SAC1B,MAAMuI,EACJD,IAAiB,IACjBzI,KAAK6B,mBAAqB,IAC1B4G,IAAiBzI,KAAK6B,iBAExB,GAAI6G,EAAgB,CAClB1I,KAAKM,gBAAkB,GACvBN,KAAK6B,iBAAmB,GACxB7B,KAAK8B,eAAiB2G,EACtBzI,KAAKK,aAAe,GACpBL,KAAKgD,yBACL,M,CAGF,GAAIhD,KAAK8B,eAAgB,CACvB,IAAK2G,GAAgBA,IAAiBzI,KAAK8B,eAAgB,CACzD,M,CAEF,IAAK9B,KAAKI,WAAWuI,WAAW3I,KAAK8B,gBAAiB,CACpD,M,CAEF,MAAMhF,EAAOkD,KAAKuI,eAClB,GAAIzL,EAAKM,SAAW,EAAG,CACrB,M,CAEF4C,KAAK8B,eAAiB,E,CAGxB,MAAMhF,EAAOkD,KAAKuI,eAClB,MAAMK,EACJ5I,KAAK4C,iBAAiB9F,KAAUkD,KAAK4C,iBAAiB5C,KAAKK,cAE7DL,KAAKK,aAAevD,EACpBkD,KAAKkF,mBACLlF,KAAK6B,iBAAmB4G,EACxB,GAAIG,EAAmB,CACrB5I,KAAKgD,wB,CAEPhD,KAAKyC,uB,CAGC,gBAAAW,GACN,IAAKpD,KAAKgB,OAAQ,OAClBhB,KAAKgB,OAAOhE,SAAWa,EAA2BmC,KAAKY,aAAcZ,KAAK0C,e,CAGpE,gBAAAwC,GACN,MAAMpI,EAAOkD,KAAKuI,eAElB,IAAKvI,KAAKI,aAAeJ,KAAKG,SAAU,CACtCH,KAAKM,gBAAkB,GACvBN,KAAKO,uBAAyB,MAC9B,M,CAGF,IAAKP,KAAKI,WAAWuI,WAAW3I,KAAKG,UAAW,CAC9CH,KAAKM,gBAAkB,GACvBN,KAAKO,uBAAyB,MAC9B,M,CAGF,MAAM/C,MAAEA,EAAKqL,SAAEA,GAAaC,EAC1B9I,KAAKI,WACLJ,KAAKG,SACLrD,GAEFkD,KAAKM,gBAAkB9C,EACvBwC,KAAKO,uBAAyBsI,C,CAGxB,SAAAT,CAAU3K,GAChBuC,KAAKxC,MAAQC,EACbuC,KAAK+I,YAAYC,KAAKvL,E,CAIhB,uBAAAmG,GACN,MAAMqF,EAAM5M,EACV2D,KAAKiB,kBACL,iBAAiBjB,KAAK0C,oBAExBuG,GAAKC,MAAM,CAAEC,cAAe,M,CAGtB,eAAAC,CAAgBlB,GACtBlI,KAAKoI,UAAWF,EAA0BC,O,CAGpC,aAAAkB,CAAcC,GACpB,GAAItJ,KAAKS,SAAU,CACjBT,KAAKS,SAAW,MAChBT,KAAKa,wBAA0B,MAC/B,M,CAGF,GAAIb,KAAKgB,QAAUhB,KAAKe,UAAW,CACjCf,KAAKgB,OAAOgH,OAAShI,KAAKe,UAC1Bf,KAAKgB,OAAOuI,SAAW,GACvBvJ,KAAKoD,kB,CAGPpD,KAAKa,wBAA0ByI,GAASE,cAAgB,MACxDxJ,KAAKS,SAAW,I,CAGV,oBAAAgJ,CAAqBvB,GAC3B,IAAKlI,KAAK2C,gBAAiB,OAE3B,IAAK3C,KAAKS,SAAU,CAClB,GAAIyH,EAAEwB,MAAQ,aAAexB,EAAEwB,MAAQ,WAAaxB,EAAEwB,MAAQ,SAAWxB,EAAEwB,MAAQ,IAAK,CACtFxB,EAAEyB,iBACF3J,KAAKqJ,cAAc,CAAEG,aAAc,M,CAErC,M,CAGF,GAAItB,EAAEwB,MAAQ,SAAU,CACtBxB,EAAEyB,iBACF3J,KAAKS,SAAW,MAChBT,KAAKa,wBAA0B,WAC1Bb,KAAKe,WAAW6I,Y,EAIzB,MAAAC,GACE,MAAMC,EACJ9J,KAAKG,WAAa,IAAMH,KAAK6B,mBAAqB7B,KAAKG,SACzD,MAAM4J,EACJD,GAAgB9J,KAAKK,aAAajD,OAAS,IAAM4C,KAAKO,uBACxD,MAAMyJ,EAAchK,KAAKG,UAAY,aACrC,MAAM8J,EAAejK,KAAK2C,gBAAkB3C,KAAKW,YAAcX,KAAKK,aAEpE,OACE6J,EAACC,EAAI,CAAAT,IAAA,4CACHQ,EAAA,UAAAR,IAAA,2CACEU,MAAO,CACL,UAAW,KACX,qBAAsBpK,KAAKC,WAAa,YACxC,oBAAqBD,KAAKC,WAAa,WACvC,0BACE8J,GAAW/J,KAAK2C,iBAEpB0H,IAAK1F,IACH3E,KAAKc,SAAW6D,EAChB,GAAIA,IAAO3E,KAAKmB,eAAgB,CAC9BnB,KAAKiE,uB,IAIN8F,GACCG,EAAA,OAAAR,IAAA,2CAAKU,MAAM,sBAAqB,cAAa,OAAOE,MAAK,MACvDJ,EAAA,oBACER,IAAK,SAASM,IACdK,IAAK1F,IACH,MAAM4F,EAAO5F,GAAM,KACnB,GAAI4F,IAASvK,KAAKkB,gBAAiB,OACnClB,KAAKkB,gBAAkBqJ,EACvB,GAAIA,EAAM,CACRvK,KAAKoB,yBAA2B,EAChCpB,KAAKqB,uBAAyB,EAC9BrB,KAAKyC,uB,GAGT3F,KAAMkD,KAAKK,aACX7C,MAAOwC,KAAK0C,kBAKjBqH,GAAW/J,KAAKU,oBAAsBuJ,EAAa7M,OAAS,GAC3D8M,EAAA,OAAAR,IAAA,2CAAKU,MAAM,iBACTF,EAAA,oBACER,IAAK,WAAWM,IAChBI,MAAM,wBACNC,IAAK1F,IACH3E,KAAKiB,kBAAoB0D,GAAM,IAAI,EAErC7H,KAAMmN,EACNzM,MAAOwC,KAAK0C,eACZ8H,WAAatC,GAAalI,KAAKoJ,gBAAgBlB,MAKpD6B,IAAY/J,KAAKU,oBAChBwJ,EAAA,OAAAR,IAAA,2CAAKU,MAAM,wBAAuB,cAAa,UAG/CL,GAAW/J,KAAKyK,SAChBP,EAAA,QAAAR,IAAA,2CAAMU,MAAM,8CAA8CpK,KAAKyK,SAGhEV,GAAW/J,KAAK2C,iBACfuH,EAAA,2BAAAR,IAAA,2CACEU,MAAO,CACL,4BAA6B,MAE/BM,KAAK,WACLlI,SAAUxC,KAAKS,SACfkK,WAAY,MACZN,IAAM1F,IACJ3E,KAAKe,UAAa4D,GAA6D,IAAI,EAErFiG,SAAS,OACTC,SAAU7K,KAAKS,SAAQ,aACZ,YACXqK,UAAW,IAAM9K,KAAKqJ,cAAc,CAAEG,aAAc,QACpDuB,UAAY7C,GAAqBlI,KAAKyJ,qBAAqBvB,MAMlE6B,GAAW/J,KAAK2C,iBACfuH,EAAA,WAAAR,IAAA,2CACEW,IAAK1F,IACH3E,KAAKgB,OAAU2D,GAA4B,IAAI,EAEjDrB,KAAMtD,KAAKS,SACXzD,SAAUa,EAA2BmC,KAAKY,aAAcZ,KAAK0C,gBAC7DsI,KAAK,SACLC,MAAM,MACNC,WAAW,gEACXC,YAAY,6BACZC,oBAAqBpL,KAAKa,wBAC1BwK,WAAanD,GAAalI,KAAKiI,iBAAiBC,GAChDoD,UAAW,IAAMtL,KAAKsI,oB,2gCA7lBR3I,EAAAyF,sBAAwB,EACxBzF,EAAA4H,0BAA4B,EAC5B5H,EAAAiI,6BAA+B,GAC/BjI,EAAAmI,uBAAyB,E","ignoreList":[]}

package/dist/components/ds-breadcrumb.js

@@ -1,2 +1,2 @@
-import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"c83edf092e37ca66378ed729d2ea5fba64b93816"},a("nav",{key:"d4c6663353db2fa3a2097365a6894bd0c79e8589","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"4a5c409f7e6446b6fe76954309848bc721ebab63",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
+import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"18a93bad46568264a308c3aa3067dca124a42aac"},a("nav",{key:"a19a1a8233e23ea548544f09658cbc49211b9a75","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"1edb429d1686e8285bf707da5f0b46f410283d79",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
 //# sourceMappingURL=ds-breadcrumb.js.map

package/dist/components/ds-button-group.js

@@ -1,2 +1,2 @@
-import{p as t,H as o,c as r,h as s,a as i,t as d}from"./index.js";import{d as e}from"./p-CsO880L-.js";import{d as n}from"./p-DqBCQRRd.js";import{d as a}from"./p-DTjpgYJV.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const d=r.charAt(0).toUpperCase()+r.slice(1);const e=r==="none";const n={group:true,[`group${d}`]:true,groupRounded:this.rounded};return s(i,{key:"a49a471ef45ebc7caf2883cffaaf7b0970b12906"},s("div",{key:"d98701ed3c7826adfe98057c2a2f00f02f9fc404",class:n,role:"group"},t.map(((t,i)=>{const d=i===0;const n=i===o-1;const a=!d&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:d,last:n,middle:a,itemShort:e&&u==="secondary",[`roundedFirst${g}`]:!!(c&&d),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:e,dividerGhostXS:e&&this.size==="xs",dividerGhostSM:e&&this.size==="sm",dividerGhostLG:e&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(d(t))){customElements.define(d(t),p)}break;case"ds-button":if(!customElements.get(d(t))){e()}break;case"ds-icon":if(!customElements.get(d(t))){n()}break;case"ds-loader":if(!customElements.get(d(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
+import{p as t,H as o,c as r,h as s,a as i,t as e}from"./index.js";import{d}from"./p-CD3yg7ue.js";import{d as n}from"./p-DqBCQRRd.js";import{d as a}from"./p-DTjpgYJV.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const e=r.charAt(0).toUpperCase()+r.slice(1);const d=r==="none";const n={group:true,[`group${e}`]:true,groupRounded:this.rounded};return s(i,{key:"c6b74f44497bd0dcb51fbe14a89ecd641988ff74"},s("div",{key:"be1be0faa562c6aa404c222d4562d29e24e10e21",class:n,role:"group"},t.map(((t,i)=>{const e=i===0;const n=i===o-1;const a=!e&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:e,last:n,middle:a,itemShort:d&&u==="secondary",[`roundedFirst${g}`]:!!(c&&e),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:d,dividerGhostXS:d&&this.size==="xs",dividerGhostSM:d&&this.size==="sm",dividerGhostLG:d&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(e(t))){customElements.define(e(t),p)}break;case"ds-button":if(!customElements.get(e(t))){d()}break;case"ds-icon":if(!customElements.get(e(t))){n()}break;case"ds-loader":if(!customElements.get(e(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
 //# sourceMappingURL=ds-button-group.js.map

package/dist/components/ds-button-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["buttonGroupCss","ButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","elevation","size","rounded","render","count","length","elev","elevKey","charAt","toUpperCase","slice","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","variant","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","dividerGhostLG","intent","inactive","href","onDsClick","dsClick","emit","slot","name"],"sources":["src/wc/components/ButtonGroup/ButtonGroup.css?tag=ds-button-group&encapsulation=scoped","src/wc/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n   ButtonGroup — flush row of ds-button components.\n   The group container carries the elevation; individual button chrome\n   (shadow/border) is suppressed via .item.\n   ========================================================================== */\n\n.group {\n  display: inline-flex;\n  align-items: stretch;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n}\n\n/* Inset ring / highlight overlay — sits above button children */\n.group::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* ── Group-level elevation ──────────────────────────────────────────────── */\n\n.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }\n.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }\n\n.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }\n\n.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }\n.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }\n\n/* groupNone = ghost / primary — no shadow, no border */\n\n.groupRounded { border-radius: var(--dimension-radius-half); }\n\n/* ── Base item ─────────────────────────────────────────────────────────────── */\n\n.item {\n  flex-shrink: 0;\n  /* Suppress individual elevation so the group reads as one unit */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n.item:active {\n  transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  flex-shrink: 0;\n  background-color: var(--color-border-tertiary);\n  position: relative;\n  z-index: 1;\n  margin: 0 -0.5px;\n  pointer-events: none;\n}\n\n/* Ghost: short centred divider at icon height */\n.dividerGhost    { height: 20px; align-self: center; }\n.dividerGhostXS  { height: 12px; }\n.dividerGhostSM  { height: 16px; }\n.dividerGhostLG  { height: 24px; }\n\n/* Ghost hover-fade */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* ── Ghost interaction states: rounded chips ──────────────────────────────── */\n\n.group .itemShort::after {\n  border-top-left-radius:     var(--dimension-radius-050) !important;\n  border-top-right-radius:    var(--dimension-radius-050) !important;\n  border-bottom-right-radius: var(--dimension-radius-050) !important;\n  border-bottom-left-radius:  var(--dimension-radius-050) !important;\n}\n\n/* ── Border radius: flatten inner-facing corners ──────────────────────────── */\n\n.first {\n  border-top-right-radius:    0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n\n.last {\n  border-top-left-radius:    0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.middle {\n  border-radius: 0 !important;\n}\n\n/* Rounded group: first — left corners become pill */\n.groupRounded .first.itemShort::after {\n  border-top-left-radius:    var(--dimension-radius-half) !important;\n  border-bottom-left-radius: var(--dimension-radius-half) !important;\n}\n\n/* Rounded group: last — right corners become pill */\n.groupRounded .last.itemShort::after {\n  border-top-right-radius:    var(--dimension-radius-half) !important;\n  border-bottom-right-radius: var(--dimension-radius-half) !important;\n}\n\n/* ── Rounded: inner-edge padding correction ──────────────────────────────── */\n\n/* MD — base padding: space-100 */\n.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }\n.roundedLastMD  { padding-left:  var(--dimension-space-100) !important; }\n.roundedMidMD   { padding-left:  var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }\n\n/* SM — base padding: space-075 */\n.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }\n.roundedLastSM  { padding-left:  var(--dimension-space-075) !important; }\n.roundedMidSM   { padding-left:  var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }\n\n/* LG — base padding: space-150 */\n.roundedFirstLG { padding-right: var(--dimension-space-150) !important; }\n.roundedLastLG  { padding-left:  var(--dimension-space-150) !important; }\n.roundedMidLG   { padding-left:  var(--dimension-space-150) !important; padding-right: var(--dimension-space-150) !important; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';\n\nexport interface ButtonGroupItem {\n  label?: string;\n  /** Icon name for <ds-icon>. Set via JS property. */\n  icon?: string;\n  variant?: 'primary' | 'secondary';\n  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';\n  inactive?: boolean;\n  href?: string;\n}\n\n@Component({\n  tag: 'ds-button-group',\n  styleUrl: 'ButtonGroup.css',\n  scoped: true,\n})\nexport class ButtonGroup {\n  /**\n   * Array of button descriptors. Set via JS property.\n   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];\n   */\n  @Prop() items: ButtonGroupItem[] = [];\n\n  /** Chrome level for the group container. */\n  @Prop() elevation: ButtonGroupElevation = 'flat';\n\n  /** Size passed to each ds-button. */\n  @Prop() size: ButtonGroupSize = 'md';\n\n  /** Pill shape for group + buttons. */\n  @Prop() rounded: boolean = false;\n\n  /** Emits the index of the clicked item. */\n  @Event() dsClick!: EventEmitter<number>;\n\n  render() {\n    const items = this.items;\n    const count = items.length;\n    const elev = this.elevation;\n    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);\n    const isGhost = elev === 'none';\n\n    const groupCls: Record<string, boolean> = {\n      group: true,\n      [`group${elevKey}`]: true,\n      groupRounded: this.rounded,\n    };\n\n    return (\n      <Host>\n        <div class={groupCls} role=\"group\">\n          {items.map((item, i) => {\n            const isFirst = i === 0;\n            const isLast = i === count - 1;\n            const isMid = !isFirst && !isLast;\n            const variant = item.variant ?? 'secondary';\n            const isIconOnly = !!item.icon && !item.label;\n            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';\n            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';\n\n            const itemCls: Record<string, boolean> = {\n              item: true,\n              first: isFirst,\n              last: isLast,\n              middle: isMid,\n              itemShort: isGhost && variant === 'secondary',\n              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),\n              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),\n              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),\n            };\n\n            const dividerCls: Record<string, boolean> = {\n              divider: true,\n              dividerGhost: isGhost,\n              dividerGhostXS: isGhost && this.size === 'xs',\n              dividerGhostSM: isGhost && this.size === 'sm',\n              dividerGhostLG: isGhost && this.size === 'lg',\n            };\n\n            return [\n              i > 0 && (\n                <div class={dividerCls} aria-hidden=\"true\" />\n              ),\n              <ds-button\n                class={itemCls}\n                variant={variant}\n                intent={item.intent ?? 'none'}\n                elevation={elev}\n                size={this.size}\n                label={item.label}\n                rounded={this.rounded}\n                inactive={item.inactive}\n                href={item.href}\n                onDsClick={() => this.dsClick.emit(i)}\n              >\n                {item.icon && (\n                  <ds-icon slot=\"icon\" name={item.icon} />\n                )}\n              </ds-button>,\n            ];\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,uuG,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2EAUUC,KAAAC,MAA2B,GAG3BD,KAAAE,UAAkC,OAGlCF,KAAAG,KAAwB,KAGxBH,KAAAI,QAAmB,KA2E5B,CAtEC,MAAAC,GACE,MAAMJ,EAAQD,KAAKC,MACnB,MAAMK,EAAQL,EAAMM,OACpB,MAAMC,EAAOR,KAAKE,UAClB,MAAMO,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAUL,IAAS,OAEzB,MAAMM,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQN,KAAY,KACrBO,aAAchB,KAAKI,SAGrB,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxBpB,EAAMqB,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMlB,EAAQ,EAC7B,MAAMqB,GAASF,IAAYC,EAC3B,MAAME,EAAUL,EAAKK,SAAW,YAChC,MAAMC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBhC,KAAKI,UAAYyB,GAAc7B,KAAKG,OAAS,KAC5E,MAAM8B,EAAUjC,KAAKG,KAAKQ,cAE1B,MAAMuB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,GAAWe,IAAY,YAClC,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMY,EAAsC,CAC1CC,QAAS,KACTC,aAAc5B,EACd6B,eAAgB7B,GAAWb,KAAKG,OAAS,KACzCwC,eAAgB9B,GAAWb,KAAKG,OAAS,KACzCyC,eAAgB/B,GAAWb,KAAKG,OAAS,MAG3C,MAAO,CACLqB,EAAI,GACFP,EAAA,OAAKG,MAAOmB,EAAU,cAAc,SAEtCtB,EAAA,aACEG,MAAOc,EACPN,QAASA,EACTiB,OAAQtB,EAAKsB,QAAU,OACvB3C,UAAWM,EACXL,KAAMH,KAAKG,KACX4B,MAAOR,EAAKQ,MACZ3B,QAASJ,KAAKI,QACd0C,SAAUvB,EAAKuB,SACfC,KAAMxB,EAAKwB,KACXC,UAAW,IAAMhD,KAAKiD,QAAQC,KAAK1B,IAElCD,EAAKO,MACJb,EAAA,WAASkC,KAAK,OAAOC,KAAM7B,EAAKO,QAGrC,K","ignoreList":[]}
+{"version":3,"names":["buttonGroupCss","ButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","elevation","size","rounded","render","count","length","elev","elevKey","charAt","toUpperCase","slice","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","variant","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","dividerGhostLG","intent","inactive","href","onDsClick","dsClick","emit","slot","name"],"sources":["src/wc/components/ButtonGroup/ButtonGroup.css?tag=ds-button-group&encapsulation=scoped","src/wc/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n   ButtonGroup — flush row of ds-button components.\n   The group container carries the elevation; individual button chrome\n   (shadow/border) is suppressed via .item.\n   ========================================================================== */\n\n.group {\n  display: inline-flex;\n  align-items: stretch;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n}\n\n/* Inset ring / highlight overlay — sits above button children */\n.group::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* ── Group-level elevation ──────────────────────────────────────────────── */\n\n.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }\n.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }\n\n.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }\n\n.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }\n.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }\n\n/* groupNone = ghost / primary — no shadow, no border */\n\n.groupRounded { border-radius: var(--dimension-radius-half); }\n\n/* ── Base item ─────────────────────────────────────────────────────────────── */\n\n.item {\n  flex-shrink: 0;\n  /* Suppress individual elevation so the group reads as one unit */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n.item:active {\n  transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  flex-shrink: 0;\n  background-color: var(--color-border-tertiary);\n  position: relative;\n  z-index: 1;\n  margin: 0 -0.5px;\n  pointer-events: none;\n}\n\n/* Ghost: short centred divider at icon height */\n.dividerGhost    { height: 20px; align-self: center; }\n.dividerGhostXS  { height: 12px; }\n.dividerGhostSM  { height: 16px; }\n.dividerGhostLG  { height: 24px; }\n\n/* Ghost hover-fade */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* ── Ghost interaction states: rounded chips ──────────────────────────────── */\n\n.group .itemShort::after {\n  border-top-left-radius:     var(--dimension-radius-050) !important;\n  border-top-right-radius:    var(--dimension-radius-050) !important;\n  border-bottom-right-radius: var(--dimension-radius-050) !important;\n  border-bottom-left-radius:  var(--dimension-radius-050) !important;\n}\n\n/* ── Border radius: flatten inner-facing corners ──────────────────────────── */\n\n.first {\n  border-top-right-radius:    0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n\n.last {\n  border-top-left-radius:    0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.middle {\n  border-radius: 0 !important;\n}\n\n/* Rounded group: first — left corners become pill */\n.groupRounded .first.itemShort::after {\n  border-top-left-radius:    var(--dimension-radius-half) !important;\n  border-bottom-left-radius: var(--dimension-radius-half) !important;\n}\n\n/* Rounded group: last — right corners become pill */\n.groupRounded .last.itemShort::after {\n  border-top-right-radius:    var(--dimension-radius-half) !important;\n  border-bottom-right-radius: var(--dimension-radius-half) !important;\n}\n\n/* ── Rounded: inner-edge padding correction ──────────────────────────────── */\n\n/* MD — base padding: space-100 */\n.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }\n.roundedLastMD  { padding-left:  var(--dimension-space-100) !important; }\n.roundedMidMD   { padding-left:  var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }\n\n/* SM — base padding: space-075 */\n.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }\n.roundedLastSM  { padding-left:  var(--dimension-space-075) !important; }\n.roundedMidSM   { padding-left:  var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }\n\n/* LG — base padding: space-150 */\n.roundedFirstLG { padding-right: var(--dimension-space-150) !important; }\n.roundedLastLG  { padding-left:  var(--dimension-space-150) !important; }\n.roundedMidLG   { padding-left:  var(--dimension-space-150) !important; padding-right: var(--dimension-space-150) !important; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';\n\nexport interface ButtonGroupItem {\n  label?: string;\n  /** Icon name for <ds-icon>. Set via JS property. */\n  icon?: string;\n  variant?: 'primary' | 'secondary';\n  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';\n  inactive?: boolean;\n  href?: string;\n}\n\n@Component({\n  tag: 'ds-button-group',\n  styleUrl: 'ButtonGroup.css',\n  scoped: true,\n})\nexport class ButtonGroup {\n  /**\n   * Array of button descriptors. Set via JS property.\n   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];\n   */\n  @Prop() items: ButtonGroupItem[] = [];\n\n  /** Chrome level for the group container. */\n  @Prop() elevation: ButtonGroupElevation = 'flat';\n\n  /** Size passed to each ds-button. */\n  @Prop() size: ButtonGroupSize = 'md';\n\n  /** Pill shape for group + buttons. */\n  @Prop() rounded: boolean = false;\n\n  /** Emits the index of the clicked item. */\n  @Event() dsClick!: EventEmitter<number>;\n\n  render() {\n    const items = this.items;\n    const count = items.length;\n    const elev = this.elevation;\n    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);\n    const isGhost = elev === 'none';\n\n    const groupCls: Record<string, boolean> = {\n      group: true,\n      [`group${elevKey}`]: true,\n      groupRounded: this.rounded,\n    };\n\n    return (\n      <Host>\n        <div class={groupCls} role=\"group\">\n          {items.map((item, i) => {\n            const isFirst = i === 0;\n            const isLast = i === count - 1;\n            const isMid = !isFirst && !isLast;\n            const variant = item.variant ?? 'secondary';\n            const isIconOnly = !!item.icon && !item.label;\n            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';\n            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';\n\n            const itemCls: Record<string, boolean> = {\n              item: true,\n              first: isFirst,\n              last: isLast,\n              middle: isMid,\n              itemShort: isGhost && variant === 'secondary',\n              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),\n              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),\n              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),\n            };\n\n            const dividerCls: Record<string, boolean> = {\n              divider: true,\n              dividerGhost: isGhost,\n              dividerGhostXS: isGhost && this.size === 'xs',\n              dividerGhostSM: isGhost && this.size === 'sm',\n              dividerGhostLG: isGhost && this.size === 'lg',\n            };\n\n            return [\n              i > 0 && (\n                <div class={dividerCls} aria-hidden=\"true\" />\n              ),\n              <ds-button\n                class={itemCls}\n                variant={variant}\n                intent={item.intent ?? 'none'}\n                elevation={elev}\n                size={this.size}\n                label={item.label}\n                rounded={this.rounded}\n                inactive={item.inactive}\n                href={item.href}\n                onDsClick={() => this.dsClick.emit(i)}\n              >\n                {item.icon && (\n                  <ds-icon slot=\"icon\" name={item.icon} />\n                )}\n              </ds-button>,\n            ];\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAiB,IAAM,uuG,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2EAUUC,KAAAC,MAA2B,GAG3BD,KAAAE,UAAkC,OAGlCF,KAAAG,KAAwB,KAGxBH,KAAAI,QAAmB,KA2E5B,CAtEC,MAAAC,GACE,MAAMJ,EAAQD,KAAKC,MACnB,MAAMK,EAAQL,EAAMM,OACpB,MAAMC,EAAOR,KAAKE,UAClB,MAAMO,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAUL,IAAS,OAEzB,MAAMM,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQN,KAAY,KACrBO,aAAchB,KAAKI,SAGrB,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxBpB,EAAMqB,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMlB,EAAQ,EAC7B,MAAMqB,GAASF,IAAYC,EAC3B,MAAME,EAAUL,EAAKK,SAAW,YAChC,MAAMC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBhC,KAAKI,UAAYyB,GAAc7B,KAAKG,OAAS,KAC5E,MAAM8B,EAAUjC,KAAKG,KAAKQ,cAE1B,MAAMuB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,GAAWe,IAAY,YAClC,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMY,EAAsC,CAC1CC,QAAS,KACTC,aAAc5B,EACd6B,eAAgB7B,GAAWb,KAAKG,OAAS,KACzCwC,eAAgB9B,GAAWb,KAAKG,OAAS,KACzCyC,eAAgB/B,GAAWb,KAAKG,OAAS,MAG3C,MAAO,CACLqB,EAAI,GACFP,EAAA,OAAKG,MAAOmB,EAAU,cAAc,SAEtCtB,EAAA,aACEG,MAAOc,EACPN,QAASA,EACTiB,OAAQtB,EAAKsB,QAAU,OACvB3C,UAAWM,EACXL,KAAMH,KAAKG,KACX4B,MAAOR,EAAKQ,MACZ3B,QAASJ,KAAKI,QACd0C,SAAUvB,EAAKuB,SACfC,KAAMxB,EAAKwB,KACXC,UAAW,IAAMhD,KAAKiD,QAAQC,KAAK1B,IAElCD,EAAKO,MACJb,EAAA,WAASkC,KAAK,OAAOC,KAAM7B,EAAKO,QAGrC,K","ignoreList":[]}

package/dist/components/ds-button-unfilled-icon.d.ts

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

package/dist/components/ds-button-unfilled-icon.js

@@ -0,0 +1,2 @@
+import{B as s,d as o}from"./p-CSc44rQs.js";const r=s;const t=o;export{r as DsButtonUnfilledIcon,t as defineCustomElement};
+//# sourceMappingURL=ds-button-unfilled-icon.js.map

package/dist/components/ds-button.js

@@ -1,2 +1,2 @@
-import{B as s,d as o}from"./p-CsO880L-.js";const t=s;const p=o;export{t as DsButton,p as defineCustomElement};
+import{B as o,d as s}from"./p-CD3yg7ue.js";const t=o;const p=s;export{t as DsButton,p as defineCustomElement};
 //# sourceMappingURL=ds-button.js.map

package/dist/components/ds-checkbox.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let 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};
+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:"eb7e03a1cbd56f5c9707db465b8a806436f598cd",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:"e4bc1400a89f9a30173dd840c0f87b600ce45202",class:{box:true,"box--marked":e}},e&&c("span",{key:"52b41e5f98be1e0a372e57501baf2b40e7ec4fcf",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"5dca735b85156b67a2dbc9f19bd6a9c5d7007296",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
 //# sourceMappingURL=ds-checkbox.js.map

package/dist/components/ds-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as d,a as l,t}from"./index.js";const 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};
+import{p as e,H as s,h as d,a as l,t}from"./index.js";const i=()=>`.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 c=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++c}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"df91f7a99822f14d78e283d134076d0c4060aedd"},d("div",{key:"8ddfcb675249d1fd1064ad30c4171e65cdc0e71a",class:"field"},d("label",{key:"f626ce3736d1373b8d113f38c1438ee7bdf1415b",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"27d8811b8dcb5f43a332340f822ce58ba1e4d27c"})))}static get style(){return i()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){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),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

package/dist/components/ds-menu.js

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-CuuuDjJJ.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
+import{M as o,d as s}from"./p-YzIqPOqL.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
 //# sourceMappingURL=ds-menu.js.map