@ds-mo/ui 0.14.0 → 0.14.1

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

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

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

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as a,a as i,t as n}from"./index.js";import{g as r,i as o,d as h}from"./p-D7yiCGVn.js";import{d as c}from"./p-CY_Dybmd.js";import{d}from"./p-CNhBzIIb.js";import{d as l}from"./p-DDnk3est.js";function b(e,s,t){if(!e||!s){return{value:"",hideTabs:false}}if(e!==s&&!e.startsWith(`${s}/`)){return{value:"",hideTabs:false}}const a=e.slice(s.length);const i=a.startsWith("/")?a.slice(1).split("/")[0]:"";const n=r(t);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const o=n.find((e=>e.id===i));if(o){return{value:o.id,hideTabs:false}}return{value:"",hideTabs:true}}function u(e,s,t,a,i,n){const r=t?f(t,[]):s??[];const o=n?f(n,[]):i??[];return e.length===0&&r.length>0||a.length===0&&o.length>0}function f(e,s){if(Array.isArray(e))return e;if(typeof e==="string"&&e!==""){try{const t=JSON.parse(e);return Array.isArray(t)?t:s}catch{return s}}return s}function v(e,s){if(!e)return null;const t=e.shadowRoot??e;return t.querySelector(s)}function g(e){return v(e,'[role="tablist"]')}function p(e,s){const t=[];let a=[];for(const i of e){if(o(i)){if(a.length>0){t.push({items:a});a=[]}continue}a.push({label:i.label,value:i.id,isSelected:i.id===s,isInactive:i.disabled})}if(a.length>0){t.push({items:a})}return t}function m(e,s){const t=r(e);return t.find((e=>e.id===s))??t[0]}function _(e,s){return m(e,s)?.label??"Tabs"}function k(e,s,t,a=2){const i=e-s;if(t){return i>-a}return i>a}const y=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;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(--color-border-tertiary)}.bg-primary.sc-ds-bar-nav{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-bar-nav{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-bar-nav{background-color:transparent}.bg-translucent.sc-ds-bar-nav{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.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.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.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tab-trigger.sc-ds-bar-nav{display:inline-flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-primary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:1;min-width:0;height:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.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:background var(--effect-animation-duration-short-3) var(--effect-animation-easing-ease-out)}.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(--color-interaction-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;min-width:0;padding:0 var(--dimension-space-025);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-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;width:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));height:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));border-radius:var(--dimension-radius-half);background:var(--_dot);box-shadow:0 0 0 var(--dimension-stroke-width-018) var(--_dot-ring);pointer-events:none}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{flex-shrink:0}.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(--color-foreground-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const C=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.background="secondary";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.leftEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return _(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!m(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?f(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?f(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onTabsCollapsedChange(e,s){if(!e){this.menuOpen=false;this.menuEl=null}this.scheduleOverflowCheck();if(e||s===undefined||s===e)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null}syncHostPropsIfNeeded(){if(u(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let s=e.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--s>0){requestAnimationFrame(t)}};queueMicrotask(t)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.leftEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.leftEl);const e=this.leftEl.parentElement;if(e){this.resizeObserver.observe(e)}}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed()}))}getLeftZoneAvailableWidth(){if(!this.leftEl)return 0;const e=this.leftEl.parentElement;if(!e?.classList.contains("bar-nav")){return this.leftEl.clientWidth}const s=getComputedStyle(e);const t=parseFloat(s.columnGap||s.gap||"0")||0;const a=e.querySelector(".bar-nav__actions");const i=a?.offsetWidth??0;const n=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);const r=e.clientWidth-n-i-(a?t:0);return Math.max(0,r)}getTabsIntrinsicWidth(){const e=g(this.probeTabGroupEl);return e?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=e.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.leftEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const e=this.getTabsIntrinsicWidth();if(e===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const s=k(e,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(s!==this.tabsCollapsed){this.tabsCollapsed=s;if(!s){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(e){const s=e.detail;if(s?.value!==undefined){this.selectTab(String(s.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=p(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:e,hideTabs:s}=b(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=e;this.hideTabsForDetailRoute=s}selectTab(e){this.value=e;this.dsTabChange.emit(e)}focusVisibleSelectedTab(){const e=v(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);e?.focus({preventScroll:true})}handleTabChange(e){this.selectTab(e.detail)}handleActionChange(e,s){const t=s.detail;this.dsActionChange.emit({id:e,selected:t})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(e){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="Enter"||e.key===" "){e.preventDefault();this.toggleTabMenu()}return}if(e.key==="Escape"){e.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}render(){const e=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const s={};const t=s[this.background];return a(i,{key:"5ef004ed914e608f40add95325876389c58bdd25"},a("header",{key:"2cc292c63c94e369533db1aa3defaae321dc546d",class:{"bar-nav":true,[`bg-${this.background}`]:true}},a("div",{key:"e086e9eb43671efdcf4a7b08aaf592639331708a",class:"bar-nav__left",ref:e=>{this.leftEl=e;if(e&&!this.resizeObserver){this.setupOverflowObserver()}}},e&&a("div",{key:"c4c6716ee452196ea9671134241a92116ad4a0f0",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},a("ds-tab-group",{key:"7a710cdc5a4cca064b1accd8f2e06caee1a92fc5",ref:e=>{this.probeTabGroupEl=e??null;if(e){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),e&&!this.tabsCollapsed&&a("ds-tab-group",{key:"b8b78980a9c7eb0d0ba2f9423ea961eb159334d2",class:"bar-nav__tabs-visible",ref:e=>{this.visibleTabGroupEl=e},tabs:this.resolvedTabs,value:this.effectiveValue,onDsChange:e=>this.handleTabChange(e)}),!e&&this.heading&&a("span",{key:"e30645f9ae7d02771d2bf816e9db1ff3def66840",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),e&&this.tabsCollapsed&&a("button",{key:"3a2e412b614bcb1b081f815e97e22cc3ffe82df2",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:e=>{this.triggerEl=e},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:e=>this.handleTriggerKeyDown(e)},a("span",{key:"00604d9b6ecc85f774c63a097a2e742bcf14e305",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"text-body-medium-emphasis":true}},this.activeTabLabel,this.activeTabHasDot&&a("span",{key:"36be14f82eafc2bd7a637878e0ad1be6a11e00af",class:"bar-nav__tab-trigger-dot","aria-hidden":"true"})),a("ds-icon",{key:"bda8220b8e5e7ac63658bf8183e10edab4306cc7",name:"ChevronDown",size:"sm",color:"inherit",class:"bar-nav__tab-trigger-chevron"}))),this.resolvedActions.length>0&&a("div",{key:"dd6deb4d3893fe73845630346d9cddd04883bba6",class:"bar-nav__actions"},this.resolvedActions.map((e=>a("ds-bar-nav-action",{key:e.id,icon:e.icon,selected:e.selected??false,dot:e.dot??false,inactive:e.inactive,"aria-label":e.ariaLabel??e.id,background:t,onDsChange:s=>this.handleActionChange(e.id,s)}))))),e&&this.tabsCollapsed&&a("ds-menu",{key:"df7a44dd0d810eb0fa97df83772d269c413c39aa",ref:e=>{this.menuEl=e??null},open:this.menuOpen,sections:p(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:e=>this.handleMenuSelect(e),onDsClose:()=>this.handleMenuClose()}))}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return y()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],background:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function w(){if(typeof customElements==="undefined"){return}const e=["ds-bar-nav","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group"];e.forEach((e=>{switch(e){case"ds-bar-nav":if(!customElements.get(n(e))){customElements.define(n(e),C)}break;case"ds-bar-nav-action":if(!customElements.get(n(e))){c()}break;case"ds-icon":if(!customElements.get(n(e))){d()}break;case"ds-menu":if(!customElements.get(n(e))){l()}break;case"ds-tab-group":if(!customElements.get(n(e))){h()}break}}))}w();const x=C;const T=w;export{x as DsBarNav,T as defineCustomElement};
+import{p as e,H as s,c as t,h as i,a,t as n}from"./index.js";import{g as r,i as o,d as h}from"./p-BDEBPT9d.js";import{d as c}from"./p-CCqEKyy5.js";import{d}from"./p-ww8gtHIq.js";import{d as l}from"./p-DDnk3est.js";function b(e,s,t){if(!e||!s){return{value:"",hideTabs:false}}if(e!==s&&!e.startsWith(`${s}/`)){return{value:"",hideTabs:false}}const i=e.slice(s.length);const a=i.startsWith("/")?i.slice(1).split("/")[0]:"";const n=r(t);if(!a){return{value:n[0]?.id??"",hideTabs:false}}const o=n.find((e=>e.id===a));if(o){return{value:o.id,hideTabs:false}}return{value:"",hideTabs:true}}function u(e,s,t,i,a,n){const r=t?f(t,[]):s??[];const o=n?f(n,[]):a??[];return e.length===0&&r.length>0||i.length===0&&o.length>0}function f(e,s){if(Array.isArray(e))return e;if(typeof e==="string"&&e!==""){try{const t=JSON.parse(e);return Array.isArray(t)?t:s}catch{return s}}return s}function v(e,s){if(!e)return null;const t=e.shadowRoot??e;return t.querySelector(s)}function g(e){return v(e,'[role="tablist"]')}function p(e,s){const t=[];let i=[];for(const a of e){if(o(a)){if(i.length>0){t.push({items:i});i=[]}continue}i.push({label:a.label,value:a.id,isSelected:a.id===s,isInactive:a.disabled})}if(i.length>0){t.push({items:i})}return t}function m(e,s){const t=r(e);return t.find((e=>e.id===s))??t[0]}function _(e,s){return m(e,s)?.label??"Tabs"}function y(e,s,t,i=2){const a=e-s;if(t){return a>-i}return a>i}const k=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;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(--color-border-tertiary)}.bg-primary.sc-ds-bar-nav{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-bar-nav{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-bar-nav{background-color:transparent}.bg-translucent.sc-ds-bar-nav{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.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.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.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{display:inline-flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-primary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:1;min-width:0;height:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.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:background var(--effect-animation-duration-short-3) var(--effect-animation-easing-ease-out)}.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(--color-interaction-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;min-width:0;padding:0 var(--dimension-space-025);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-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;width:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));height:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));border-radius:var(--dimension-radius-half);background:var(--_dot);box-shadow:0 0 0 var(--dimension-stroke-width-018) var(--_dot-ring);pointer-events:none}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{flex-shrink:0}.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(--color-foreground-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const C=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.background="secondary";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.leftEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return _(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!m(this.resolvedTabs,this.effectiveValue)?.dot}digestTabsConfig(e){return e.map((e=>o(e)?"|":e.id)).join(",")}onPropsChange(){const e=this.tabsJson?f(this.tabsJson,[]):this.tabs??[];const s=this.actionsJson?f(this.actionsJson,[]):this.actions??[];if(this.digestTabsConfig(e)!==this.digestTabsConfig(this.resolvedTabs)){this.tabLayoutCommitted=false}this.resolvedTabs=e;this.resolvedActions=s;this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onTabsCollapsedChange(e,s){if(!e){this.menuOpen=false;this.menuEl=null}this.scheduleOverflowCheck();if(e||s===undefined||s===e)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null}syncHostPropsIfNeeded(){if(u(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let s=e.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--s>0){requestAnimationFrame(t)}};queueMicrotask(t)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.leftEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.leftEl);const e=this.leftEl.parentElement;if(e){this.resizeObserver.observe(e)}}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed()}))}getLeftZoneAvailableWidth(){if(!this.leftEl)return 0;const e=this.leftEl.parentElement;if(!e?.classList.contains("bar-nav")){return this.leftEl.clientWidth}const s=getComputedStyle(e);const t=parseFloat(s.columnGap||s.gap||"0")||0;const i=e.querySelector(".bar-nav__actions");const a=i?.offsetWidth??0;const n=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);const r=e.clientWidth-n-a-(i?t:0);return Math.max(0,r)}getTabsIntrinsicWidth(){const e=g(this.probeTabGroupEl);return e?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=e.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.leftEl){return}if(this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;this.tabLayoutCommitted=true;return}const s=this.getTabsIntrinsicWidth();if(s===0){if(this.intrinsicWidthRetryCount>=e.INTRINSIC_WIDTH_RETRY_MAX){this.intrinsicWidthRetryCount=0;this.tabsCollapsed=false;this.tabLayoutCommitted=true}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;const t=y(s,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(t!==this.tabsCollapsed){this.tabsCollapsed=t;if(!t){this.menuOpen=false}}this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(e){const s=e.detail;if(s?.value!==undefined){this.selectTab(String(s.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=p(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:e,hideTabs:s}=b(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=e;this.hideTabsForDetailRoute=s}selectTab(e){this.value=e;this.dsTabChange.emit(e)}focusVisibleSelectedTab(){const e=v(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);e?.focus({preventScroll:true})}handleTabChange(e){this.selectTab(e.detail)}handleActionChange(e,s){const t=s.detail;this.dsActionChange.emit({id:e,selected:t})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(e){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="Enter"||e.key===" "){e.preventDefault();this.toggleTabMenu()}return}if(e.key==="Escape"){e.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}render(){const e=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const s={};const t=s[this.background];return i(a,{key:"006f2c11e03a3c8161d9899b1deaa40b7ebf2b0d"},i("header",{key:"1ae5a81f693b9c8f282d289df7267f3e58c50ff2",class:{"bar-nav":true,[`bg-${this.background}`]:true}},i("div",{key:"a84c933e86293d248f371bbfce1e2b1f99a1659c",class:"bar-nav__left",ref:e=>{this.leftEl=e;if(e&&!this.resizeObserver){this.setupOverflowObserver()}}},e&&i("div",{key:"ee32fe53cfb8fed17623a04ae4851e8a5e5c708a",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},i("ds-tab-group",{key:"7b95612fdb120891e6d1a4a5be42e02dc5c8ef99",ref:e=>{this.probeTabGroupEl=e??null;if(e){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue})),e&&this.tabLayoutCommitted&&!this.tabsCollapsed&&i("ds-tab-group",{key:"66ca0bf07996a57029c01d45931c9aae3a362fab",class:"bar-nav__tabs-visible",ref:e=>{this.visibleTabGroupEl=e},tabs:this.resolvedTabs,value:this.effectiveValue,onDsChange:e=>this.handleTabChange(e)}),e&&!this.tabLayoutCommitted&&i("div",{key:"118f82468731716377189c0fa1c1605fe0a90cd0",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!e&&this.heading&&i("span",{key:"b281544284429e8cc2290b6e03db7d1d92099e8e",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),e&&this.tabLayoutCommitted&&this.tabsCollapsed&&i("button",{key:"8d8bff4ec43c0c0e326092f9d0ce63d829a6cc22",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:e=>{this.triggerEl=e},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:e=>this.handleTriggerKeyDown(e)},i("span",{key:"ef164e49153d8e136f50a5a851a144ca436f7872",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"text-body-medium-emphasis":true}},this.activeTabLabel,this.activeTabHasDot&&i("span",{key:"4d62b31c37b160e1f37d3594b3a9b9a17129b549",class:"bar-nav__tab-trigger-dot","aria-hidden":"true"})),i("ds-icon",{key:"a019efbc88b22bd54e20f91e79fa1126f4ec62cd",name:"ChevronDown",size:"sm",color:"inherit",class:"bar-nav__tab-trigger-chevron"}))),this.resolvedActions.length>0&&i("div",{key:"4cdc621192ab54fc40a500f4aed5f2d0eda418df",class:"bar-nav__actions"},this.resolvedActions.map((e=>i("ds-bar-nav-action",{key:e.id,icon:e.icon,selected:e.selected??false,dot:e.dot??false,inactive:e.inactive,"aria-label":e.ariaLabel??e.id,background:t,onDsChange:s=>this.handleActionChange(e.id,s)}))))),e&&this.tabsCollapsed&&i("ds-menu",{key:"c9e1457fb23bb91153e2af56231ce6e1f266cf20",ref:e=>{this.menuEl=e??null},open:this.menuOpen,sections:p(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:e=>this.handleMenuSelect(e),onDsClose:()=>this.handleMenuClose()}))}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return k()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],background:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function w(){if(typeof customElements==="undefined"){return}const e=["ds-bar-nav","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group"];e.forEach((e=>{switch(e){case"ds-bar-nav":if(!customElements.get(n(e))){customElements.define(n(e),C)}break;case"ds-bar-nav-action":if(!customElements.get(n(e))){c()}break;case"ds-icon":if(!customElements.get(n(e))){d()}break;case"ds-menu":if(!customElements.get(n(e))){l()}break;case"ds-tab-group":if(!customElements.get(n(e))){h()}break}}))}w();const x=C;const T=w;export{x as DsBarNav,T as defineCustomElement};
 //# sourceMappingURL=ds-bar-nav.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsJson","resolvedActions","actions","actionsJson","tabsIncoming","parseJsonArrayProp","actionsIncoming","fallback","Array","isArray","parsed","JSON","parse","queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","selectedId","sections","batch","item","isTabDivider","push","items","label","isSelected","isInactive","disabled","getActiveTab","selectable","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","currentUrl","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","leftEl","triggerEl","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","effectiveValue","activeTabLabel","activeTabHasDot","dot","onPropsChange","syncValueFromUrl","scheduleOverflowCheck","onUrlChange","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","undefined","requestAnimationFrame","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","disconnectedCallback","disconnect","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","header","parentElement","updateTabsCollapsed","getLeftZoneAvailableWidth","classList","contains","clientWidth","headerStyle","getComputedStyle","gap","parseFloat","columnGap","actionsEl","actionsWidth","offsetWidth","horizontalPadding","paddingLeft","paddingRight","available","Math","max","getTabsIntrinsicWidth","tabList","scrollWidth","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","intrinsicWidth","shouldCollapse","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","render","hasTabs","bgToActionBg","actionBg","h","Host","class","ref","el","inert","onDsChange","heading","type","onClick","onKeyDown","name","size","color","map","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavActionItem, BarNavTab } from './BarNav';\n\nexport interface BarNavUrlState {\n  /** Tab id derived from the URL, or empty when none applies. */\n  value: string;\n  /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n  hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n *  Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n  path: string,\n  basePath: string,\n  tabs: BarNavTab[],\n): BarNavUrlState {\n  if (!path || !basePath) {\n    return { value: '', hideTabs: false };\n  }\n\n  if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n    return { value: '', hideTabs: false };\n  }\n\n  const remainder = path.slice(basePath.length);\n  const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n  const selectableTabs = getSelectableTabs(tabs);\n\n  if (!seg) {\n    return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n  }\n\n  const tab = selectableTabs.find(t => t.id === seg);\n  if (tab) {\n    return { value: tab.id, hideTabs: false };\n  }\n\n  return { value: '', hideTabs: true };\n}\n\n/** True when host array/json props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(\n  resolvedTabs: BarNavTab[],\n  tabs: BarNavTab[],\n  tabsJson: string,\n  resolvedActions: BarNavActionItem[],\n  actions: BarNavActionItem[],\n  actionsJson: string,\n): boolean {\n  const tabsIncoming = tabsJson\n    ? parseJsonArrayProp(tabsJson, [])\n    : (tabs ?? []);\n  const actionsIncoming = actionsJson\n    ? parseJsonArrayProp(actionsJson, [])\n    : (actions ?? []);\n\n  return (\n    (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||\n    (resolvedActions.length === 0 && actionsIncoming.length > 0)\n  );\n}\n\n/** Parse tabs/actions from either a JSON attribute string or a JS property array. */\nexport function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {\n  if (Array.isArray(value)) return value;\n  if (typeof value === 'string' && value !== '') {\n    try {\n      const parsed = JSON.parse(value);\n      return Array.isArray(parsed) ? parsed : fallback;\n    } catch {\n      return fallback;\n    }\n  }\n  return fallback;\n}\n","type QueryableHost = {\n  shadowRoot?: ShadowRoot | null;\n  querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n  host: QueryableHost | null | undefined,\n  selector: string,\n): HTMLElement | null {\n  if (!host) return null;\n  const root = host.shadowRoot ?? host;\n  return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n  tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n  return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/Menu';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n  const sections: MenuSection[] = [];\n  let batch: MenuSection['items'] = [];\n\n  for (const item of tabs) {\n    if (isTabDivider(item)) {\n      if (batch.length > 0) {\n        sections.push({ items: batch });\n        batch = [];\n      }\n      continue;\n    }\n\n    batch.push({\n      label: item.label,\n      value: item.id,\n      isSelected: item.id === selectedId,\n      isInactive: item.disabled,\n    });\n  }\n\n  if (batch.length > 0) {\n    sections.push({ items: batch });\n  }\n\n  return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n  const selectable = getSelectableTabs(tabs);\n  return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n  return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n  tabListScrollWidth: number,\n  containerClientWidth: number,\n  collapsed: boolean,\n  hysteresis = 2,\n): boolean {\n  const diff = tabListScrollWidth - containerClientWidth;\n  if (collapsed) {\n    return diff > -hysteresis;\n  }\n  return diff > hysteresis;\n}\n",":host {\n  display: block;\n}\n\n.bar-nav {\n  display: flex;\n  align-items: center;\n  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(--color-border-tertiary);\n}\n\n/* Background variants — mirrors ds-header pattern */\n.bg-primary     { background-color: var(--color-background-primary); }\n.bg-secondary   { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Left zone — always consume remaining header width (even when collapsed to a narrow trigger) */\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 {\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 {\n  width: max-content;\n}\n\n.bar-nav__tabs-visible {\n  width: 100%;\n  min-width: 0;\n}\n\n/* Collapsed tab trigger — tab interaction pattern, not ds-button */\n.bar-nav__tab-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  max-width: 100%;\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-primary);\n  position: relative;\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 1;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\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: background var(--effect-animation-duration-short-3) var(--effect-animation-easing-ease-out);\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(--color-interaction-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  min-width: 0;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.bar-nav__tab-trigger-label--dot {\n  padding-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  width: var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));\n  height: var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));\n  border-radius: var(--dimension-radius-half);\n  background: var(--_dot);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-018) var(--_dot-ring);\n  pointer-events: none;\n}\n\n.bar-nav__tab-trigger-chevron {\n  flex-shrink: 0;\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(--color-foreground-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Right zone — action buttons, hugging right */\n.bar-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  State,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/Menu';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { TabItem } from '../TabGroup/tab-item-utils';\nimport {\n  deriveBarNavValueFromUrl,\n  parseJsonArrayProp,\n  shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n  getTabListFromTabGroup,\n  queryWithinComponentHost,\n} from './bar-nav-dom-utils';\nimport {\n  getActiveTab,\n  getActiveTabLabel,\n  tabsOverflowContainer,\n  tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\n\nexport type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n/** Same shape as `TabItem` — supports `{ type: 'divider' }` between tab groups. */\nexport type BarNavTab = TabItem;\n\nexport interface BarNavActionItem {\n  id: string;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this action button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  inactive?: boolean;\n  ariaLabel?: string;\n}\n\n@Component({\n  tag: 'ds-bar-nav',\n  styleUrl: 'BarNav.css',\n  scoped: true,\n})\nexport class BarNav {\n  /**\n   * Tab items for the left section.\n   * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n   */\n  @Prop() tabs: BarNavTab[] = [];\n\n  /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n  /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Action items rendered in the right section.\n   * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n   */\n  @Prop() actions: BarNavActionItem[] = [];\n\n  /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n  /**\n   * Fallback heading shown when no tabs are provided.\n   * When tabs are present the heading is hidden.\n   */\n  @Prop() heading: string | undefined;\n\n  /** Surface background variant. */\n  @Prop() background: BarNavBackground = 'secondary';\n\n  /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n  @Prop() basePath: string = '';\n\n  /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n  @Prop() currentUrl: string = '';\n\n  /** Emitted when the active tab changes. Detail = tab id. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  /** Emitted when an action button is toggled. Detail = { id, selected }. */\n  @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n  @State() private resolvedTabs: BarNavTab[] = [];\n  @State() private resolvedActions: BarNavActionItem[] = [];\n  @State() private urlDerivedValue: string = '';\n  @State() private hideTabsForDetailRoute = false;\n  @State() private tabsCollapsed = false;\n  @State() private menuOpen = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n  private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n\n  private leftEl: HTMLElement | null = null;\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  private visibleTabGroupEl: HTMLDsTabGroupElement | null = null;\n  private probeTabGroupEl: HTMLDsTabGroupElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private overflowCheckScheduled = false;\n  private intrinsicWidthRetryCount = 0;\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) {\n      return this.urlDerivedValue;\n    }\n    return this.value;\n  }\n\n  private get activeTabLabel(): string {\n    return getActiveTabLabel(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private get activeTabHasDot(): boolean {\n    return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;\n  }\n\n  @Watch('tabs')\n  @Watch('tabsJson')\n  @Watch('actions')\n  @Watch('actionsJson')\n  onPropsChange() {\n    this.resolvedTabs = this.tabsJson\n      ? parseJsonArrayProp(this.tabsJson, [])\n      : (this.tabs ?? []);\n    this.resolvedActions = this.actionsJson\n      ? parseJsonArrayProp(this.actionsJson, [])\n      : (this.actions ?? []);\n    this.syncValueFromUrl();\n    this.intrinsicWidthRetryCount = 0;\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('currentUrl')\n  @Watch('basePath')\n  onUrlChange() {\n    this.syncValueFromUrl();\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('value')\n  @Watch('urlDerivedValue')\n  onSelectionChange() {\n    this.syncMenuSections();\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('menuOpen')\n  onMenuOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('tabsCollapsed')\n  onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n    if (!collapsed) {\n      this.menuOpen = false;\n      this.menuEl = null;\n    }\n    this.scheduleOverflowCheck();\n    if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n    queueMicrotask(() => this.focusVisibleSelectedTab());\n  }\n\n  componentWillLoad() {\n    this.onPropsChange();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.setupOverflowObserver();\n    this.scheduleOverflowCheck();\n  }\n\n  componentDidRender() {\n    this.scheduleOverflowCheck();\n    this.syncMenuAnchor();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (\n      shouldResyncBarNavProps(\n        this.resolvedTabs,\n        this.tabs,\n        this.tabsJson,\n        this.resolvedActions,\n        this.actions,\n        this.actionsJson,\n      )\n    ) {\n      this.onPropsChange();\n    } else if (this.currentUrl && this.basePath) {\n      this.syncValueFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  private setupOverflowObserver() {\n    if (typeof ResizeObserver === 'undefined' || !this.leftEl) return;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowCheck());\n    this.resizeObserver.observe(this.leftEl);\n    const header = this.leftEl.parentElement;\n    if (header) {\n      this.resizeObserver.observe(header);\n    }\n  }\n\n  private scheduleOverflowCheck() {\n    if (this.overflowCheckScheduled) return;\n    this.overflowCheckScheduled = true;\n    requestAnimationFrame(() => {\n      this.overflowCheckScheduled = false;\n      this.updateTabsCollapsed();\n    });\n  }\n\n  /** Width left for tabs after actions — stable while collapsed (unlike leftEl box when hugging the trigger). */\n  private getLeftZoneAvailableWidth(): number {\n    if (!this.leftEl) return 0;\n\n    const header = this.leftEl.parentElement;\n    if (!header?.classList.contains('bar-nav')) {\n      return this.leftEl.clientWidth;\n    }\n\n    const headerStyle = getComputedStyle(header);\n    const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;\n    const actionsEl = header.querySelector('.bar-nav__actions') as HTMLElement | null;\n    const actionsWidth = actionsEl?.offsetWidth ?? 0;\n    const horizontalPadding =\n      (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n    const available = header.clientWidth - horizontalPadding - actionsWidth - (actionsEl ? gap : 0);\n\n    return Math.max(0, available);\n  }\n\n  private getTabsIntrinsicWidth(): number {\n    const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n    return tabList?.scrollWidth ?? 0;\n  }\n\n  private scheduleIntrinsicWidthRetry() {\n    if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n    this.intrinsicWidthRetryCount++;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n  }\n\n  private updateTabsCollapsed() {\n    if (!this.leftEl || this.resolvedTabs.length === 0 || this.hideTabsForDetailRoute) {\n      if (this.tabsCollapsed) {\n        this.tabsCollapsed = false;\n        this.menuOpen = false;\n      }\n      this.intrinsicWidthRetryCount = 0;\n      return;\n    }\n\n    const intrinsicWidth = this.getTabsIntrinsicWidth();\n    if (intrinsicWidth === 0) {\n      this.scheduleIntrinsicWidthRetry();\n      return;\n    }\n    this.intrinsicWidthRetryCount = 0;\n\n    const shouldCollapse = tabsOverflowContainer(\n      intrinsicWidth,\n      this.getLeftZoneAvailableWidth(),\n      this.tabsCollapsed,\n    );\n\n    if (shouldCollapse !== this.tabsCollapsed) {\n      this.tabsCollapsed = shouldCollapse;\n      if (!shouldCollapse) {\n        this.menuOpen = false;\n      }\n    }\n  }\n\n  private syncMenuAnchor() {\n    if (!this.menuEl || !this.triggerEl || !this.tabsCollapsed) return;\n    this.menuEl.anchor = this.triggerEl;\n    this.syncMenuSections();\n  }\n\n  private handleMenuSelect(e: Event) {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.selectTab(String(detail.value));\n    }\n    this.menuOpen = false;\n  }\n\n  private handleMenuClose() {\n    this.menuOpen = false;\n  }\n\n  private syncMenuSections() {\n    if (!this.menuEl) return;\n    this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private syncValueFromUrl() {\n    if (!this.currentUrl || !this.basePath) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    const { value, hideTabs } = deriveBarNavValueFromUrl(\n      this.currentUrl,\n      this.basePath,\n      this.resolvedTabs,\n    );\n    this.urlDerivedValue = value;\n    this.hideTabsForDetailRoute = hideTabs;\n  }\n\n  private selectTab(id: string) {\n    this.value = id;\n    this.dsTabChange.emit(id);\n  }\n\n  /** Move focus to the selected tab in the visible tab group (after expand). */\n  private focusVisibleSelectedTab() {\n    const tab = queryWithinComponentHost(\n      this.visibleTabGroupEl,\n      `[data-tab-id=\"${this.effectiveValue}\"]`,\n    );\n    tab?.focus({ preventScroll: true });\n  }\n\n  private handleTabChange(e: Event) {\n    this.selectTab((e as CustomEvent<string>).detail);\n  }\n\n  private handleActionChange(actionId: string, e: Event) {\n    const selected = (e as CustomEvent<boolean>).detail;\n    this.dsActionChange.emit({ id: actionId, selected });\n  }\n\n  private toggleTabMenu() {\n    if (this.menuOpen) {\n      this.menuOpen = false;\n      return;\n    }\n\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n      this.menuEl.minWidth = `${this.triggerEl.offsetWidth}px`;\n      this.syncMenuSections();\n    }\n\n    this.menuOpen = true;\n  }\n\n  private handleTriggerKeyDown(e: KeyboardEvent) {\n    if (!this.tabsCollapsed) return;\n\n    if (!this.menuOpen) {\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this.toggleTabMenu();\n      }\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.menuOpen = false;\n      this.triggerEl?.focus();\n    }\n  }\n\n  render() {\n    const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n\n    const bgToActionBg: Partial<Record<BarNavBackground, BarNavActionBackground>> = {};\n    const actionBg: BarNavActionBackground | undefined = bgToActionBg[this.background];\n\n    return (\n      <Host>\n        <header class={{ 'bar-nav': true, [`bg-${this.background}`]: true }}>\n\n          <div\n            class=\"bar-nav__left\"\n            ref={el => {\n              this.leftEl = 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\n                  ref={el => {\n                    this.probeTabGroupEl = (el as HTMLDsTabGroupElement) ?? null;\n                    if (el) {\n                      this.intrinsicWidthRetryCount = 0;\n                      this.scheduleOverflowCheck();\n                    }\n                  }}\n                  tabs={this.resolvedTabs}\n                  value={this.effectiveValue}\n                />\n              </div>\n            )}\n\n            {hasTabs && !this.tabsCollapsed && (\n              <ds-tab-group\n                class=\"bar-nav__tabs-visible\"\n                ref={el => {\n                  this.visibleTabGroupEl = el as HTMLDsTabGroupElement;\n                }}\n                tabs={this.resolvedTabs}\n                value={this.effectiveValue}\n                onDsChange={(e: Event) => this.handleTabChange(e)}\n              />\n            )}\n\n            {!hasTabs && this.heading && (\n              <span class=\"bar-nav__heading text-body-medium-emphasis\">{this.heading}</span>\n            )}\n\n            {hasTabs && this.tabsCollapsed && (\n              <button\n                type=\"button\"\n                class={{\n                  'bar-nav__tab-trigger': true,\n                  'bar-nav__tab-trigger--open': this.menuOpen,\n                }}\n                ref={el => {\n                  this.triggerEl = el as HTMLButtonElement;\n                }}\n                aria-haspopup=\"menu\"\n                aria-expanded={this.menuOpen}\n                aria-label={`${this.activeTabLabel} tabs`}\n                onClick={() => this.toggleTabMenu()}\n                onKeyDown={(e: KeyboardEvent) => this.handleTriggerKeyDown(e)}\n              >\n                <span class={{\n                  'bar-nav__tab-trigger-label': true,\n                  'bar-nav__tab-trigger-label--dot': this.activeTabHasDot,\n                  'text-body-medium-emphasis': true,\n                }}>\n                  {this.activeTabLabel}\n                  {this.activeTabHasDot && (\n                    <span class=\"bar-nav__tab-trigger-dot\" aria-hidden=\"true\" />\n                  )}\n                </span>\n                <ds-icon\n                  name=\"ChevronDown\"\n                  size=\"sm\"\n                  color=\"inherit\"\n                  class=\"bar-nav__tab-trigger-chevron\"\n                />\n              </button>\n            )}\n          </div>\n\n          {this.resolvedActions.length > 0 && (\n            <div class=\"bar-nav__actions\">\n              {this.resolvedActions.map(action => (\n                <ds-bar-nav-action\n                  key={action.id}\n                  icon={action.icon}\n                  selected={action.selected ?? false}\n                  dot={action.dot ?? false}\n                  inactive={action.inactive}\n                  aria-label={action.ariaLabel ?? action.id}\n                  background={actionBg}\n                  onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n                />\n              ))}\n            </div>\n          )}\n\n        </header>\n\n        {hasTabs && this.tabsCollapsed && (\n          <ds-menu\n            ref={el => {\n              this.menuEl = (el as HTMLDsMenuElement) ?? null;\n            }}\n            open={this.menuOpen}\n            sections={tabsToMenuSections(this.resolvedTabs, this.effectiveValue)}\n            side=\"bottom\"\n            align=\"start\"\n            onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n            onDsClose={() => this.handleMenuClose()}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["deriveBarNavValueFromUrl","path","basePath","tabs","value","hideTabs","startsWith","remainder","slice","length","seg","split","selectableTabs","getSelectableTabs","id","tab","find","t","shouldResyncBarNavProps","resolvedTabs","tabsJson","resolvedActions","actions","actionsJson","tabsIncoming","parseJsonArrayProp","actionsIncoming","fallback","Array","isArray","parsed","JSON","parse","queryWithinComponentHost","host","selector","root","shadowRoot","querySelector","getTabListFromTabGroup","tabGroupEl","tabsToMenuSections","selectedId","sections","batch","item","isTabDivider","push","items","label","isSelected","isInactive","disabled","getActiveTab","selectable","getActiveTabLabel","tabsOverflowContainer","tabListScrollWidth","containerClientWidth","collapsed","hysteresis","diff","barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","currentUrl","urlDerivedValue","hideTabsForDetailRoute","tabsCollapsed","menuOpen","tabLayoutCommitted","leftEl","triggerEl","menuEl","visibleTabGroupEl","probeTabGroupEl","resizeObserver","overflowCheckScheduled","intrinsicWidthRetryCount","effectiveValue","activeTabLabel","activeTabHasDot","dot","digestTabsConfig","map","join","onPropsChange","nextTabs","nextActions","syncValueFromUrl","scheduleOverflowCheck","onUrlChange","onSelectionChange","syncMenuSections","onMenuOpenChange","open","onTabsCollapsedChange","prevCollapsed","undefined","requestAnimationFrame","queueMicrotask","focusVisibleSelectedTab","componentWillLoad","componentDidLoad","syncHostPropsIfNeeded","scheduleDeferredHostPropSync","setupOverflowObserver","componentDidRender","syncMenuAnchor","disconnectedCallback","disconnect","remaining","HOST_PROP_SYNC_BUDGET","tick","ResizeObserver","observe","header","parentElement","updateTabsCollapsed","getLeftZoneAvailableWidth","classList","contains","clientWidth","headerStyle","getComputedStyle","gap","parseFloat","columnGap","actionsEl","actionsWidth","offsetWidth","horizontalPadding","paddingLeft","paddingRight","available","Math","max","getTabsIntrinsicWidth","tabList","scrollWidth","scheduleIntrinsicWidthRetry","INTRINSIC_WIDTH_RETRY_MAX","intrinsicWidth","shouldCollapse","anchor","handleMenuSelect","e","detail","selectTab","String","handleMenuClose","dsTabChange","emit","focus","preventScroll","handleTabChange","handleActionChange","actionId","selected","dsActionChange","toggleTabMenu","minWidth","handleTriggerKeyDown","key","preventDefault","render","hasTabs","bgToActionBg","actionBg","h","Host","class","ref","el","inert","onDsChange","heading","type","onClick","onKeyDown","name","size","color","action","icon","inactive","ariaLabel","side","align","onDsSelect","onDsClose"],"sources":["src/wc/components/BarNav/bar-nav-utils.ts","src/wc/components/BarNav/bar-nav-dom-utils.ts","src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts","src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":["import { getSelectableTabs } from '../TabGroup/tab-item-utils';\nimport type { BarNavActionItem, BarNavTab } from './BarNav';\n\nexport interface BarNavUrlState {\n  /** Tab id derived from the URL, or empty when none applies. */\n  value: string;\n  /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */\n  hideTabs: boolean;\n}\n\n/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.\n *  Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */\nexport function deriveBarNavValueFromUrl(\n  path: string,\n  basePath: string,\n  tabs: BarNavTab[],\n): BarNavUrlState {\n  if (!path || !basePath) {\n    return { value: '', hideTabs: false };\n  }\n\n  if (path !== basePath && !path.startsWith(`${basePath}/`)) {\n    return { value: '', hideTabs: false };\n  }\n\n  const remainder = path.slice(basePath.length);\n  const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';\n  const selectableTabs = getSelectableTabs(tabs);\n\n  if (!seg) {\n    return { value: selectableTabs[0]?.id ?? '', hideTabs: false };\n  }\n\n  const tab = selectableTabs.find(t => t.id === seg);\n  if (tab) {\n    return { value: tab.id, hideTabs: false };\n  }\n\n  return { value: '', hideTabs: true };\n}\n\n/** True when host array/json props have data but resolved internal state is still empty. */\nexport function shouldResyncBarNavProps(\n  resolvedTabs: BarNavTab[],\n  tabs: BarNavTab[],\n  tabsJson: string,\n  resolvedActions: BarNavActionItem[],\n  actions: BarNavActionItem[],\n  actionsJson: string,\n): boolean {\n  const tabsIncoming = tabsJson\n    ? parseJsonArrayProp(tabsJson, [])\n    : (tabs ?? []);\n  const actionsIncoming = actionsJson\n    ? parseJsonArrayProp(actionsJson, [])\n    : (actions ?? []);\n\n  return (\n    (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||\n    (resolvedActions.length === 0 && actionsIncoming.length > 0)\n  );\n}\n\n/** Parse tabs/actions from either a JSON attribute string or a JS property array. */\nexport function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {\n  if (Array.isArray(value)) return value;\n  if (typeof value === 'string' && value !== '') {\n    try {\n      const parsed = JSON.parse(value);\n      return Array.isArray(parsed) ? parsed : fallback;\n    } catch {\n      return fallback;\n    }\n  }\n  return fallback;\n}\n","type QueryableHost = {\n  shadowRoot?: ShadowRoot | null;\n  querySelector: (selectors: string) => Element | null;\n};\n\n/**\n * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).\n * Use for child nodes owned by ds-tab-group and similar components.\n */\nexport function queryWithinComponentHost(\n  host: QueryableHost | null | undefined,\n  selector: string,\n): HTMLElement | null {\n  if (!host) return null;\n  const root = host.shadowRoot ?? host;\n  return root.querySelector(selector) as HTMLElement | null;\n}\n\nexport function getTabListFromTabGroup(\n  tabGroupEl: QueryableHost | null | undefined,\n): HTMLElement | null {\n  return queryWithinComponentHost(tabGroupEl, '[role=\"tablist\"]');\n}\n","import type { MenuSection } from '../Menu/Menu';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\n/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */\nexport function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {\n  const sections: MenuSection[] = [];\n  let batch: MenuSection['items'] = [];\n\n  for (const item of tabs) {\n    if (isTabDivider(item)) {\n      if (batch.length > 0) {\n        sections.push({ items: batch });\n        batch = [];\n      }\n      continue;\n    }\n\n    batch.push({\n      label: item.label,\n      value: item.id,\n      isSelected: item.id === selectedId,\n      isInactive: item.disabled,\n    });\n  }\n\n  if (batch.length > 0) {\n    sections.push({ items: batch });\n  }\n\n  return sections;\n}\n\nexport function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {\n  const selectable = getSelectableTabs(tabs);\n  return selectable.find(tab => tab.id === selectedId) ?? selectable[0];\n}\n\nexport function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {\n  return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';\n}\n\n/** True when tablist content exceeds the available width (with optional hysteresis). */\nexport function tabsOverflowContainer(\n  tabListScrollWidth: number,\n  containerClientWidth: number,\n  collapsed: boolean,\n  hysteresis = 2,\n): boolean {\n  const diff = tabListScrollWidth - containerClientWidth;\n  if (collapsed) {\n    return diff > -hysteresis;\n  }\n  return diff > hysteresis;\n}\n",":host {\n  display: block;\n}\n\n.bar-nav {\n  display: flex;\n  align-items: center;\n  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(--color-border-tertiary);\n}\n\n/* Background variants — mirrors ds-header pattern */\n.bg-primary     { background-color: var(--color-background-primary); }\n.bg-secondary   { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Left zone — always consume remaining header width (even when collapsed to a narrow trigger) */\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 {\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 {\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 — tab interaction pattern, not ds-button */\n.bar-nav__tab-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  max-width: 100%;\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-primary);\n  position: relative;\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 1;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\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: background var(--effect-animation-duration-short-3) var(--effect-animation-easing-ease-out);\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(--color-interaction-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  min-width: 0;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.bar-nav__tab-trigger-label--dot {\n  padding-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  width: var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));\n  height: var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));\n  border-radius: var(--dimension-radius-half);\n  background: var(--_dot);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-018) var(--_dot-ring);\n  pointer-events: none;\n}\n\n.bar-nav__tab-trigger-chevron {\n  flex-shrink: 0;\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(--color-foreground-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Right zone — action buttons, hugging right */\n.bar-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  State,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { MenuItemData } from '../Menu/Menu';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport { isTabDivider, type TabItem } from '../TabGroup/tab-item-utils';\nimport {\n  deriveBarNavValueFromUrl,\n  parseJsonArrayProp,\n  shouldResyncBarNavProps,\n} from './bar-nav-utils';\nimport {\n  getTabListFromTabGroup,\n  queryWithinComponentHost,\n} from './bar-nav-dom-utils';\nimport {\n  getActiveTab,\n  getActiveTabLabel,\n  tabsOverflowContainer,\n  tabsToMenuSections,\n} from './bar-nav-tabs-menu-utils';\n\nexport type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n/** Same shape as `TabItem` — supports `{ type: 'divider' }` between tab groups. */\nexport type BarNavTab = TabItem;\n\nexport interface BarNavActionItem {\n  id: string;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this action button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  inactive?: boolean;\n  ariaLabel?: string;\n}\n\n@Component({\n  tag: 'ds-bar-nav',\n  styleUrl: 'BarNav.css',\n  scoped: true,\n})\nexport class BarNav {\n  /**\n   * Tab items for the left section.\n   * Set via JS property: `el.tabs = [...]`. Replace the array reference to update.\n   */\n  @Prop() tabs: BarNavTab[] = [];\n\n  /** JSON fallback for `tabs` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n\n  /** ID of the currently active tab. Overridden when `currentUrl` + `basePath` are set. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Action items rendered in the right section.\n   * Set via JS property: `el.actions = [...]`. Replace the array reference to update.\n   */\n  @Prop() actions: BarNavActionItem[] = [];\n\n  /** JSON fallback for `actions` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'actions-json' }) actionsJson: string = '';\n\n  /**\n   * Fallback heading shown when no tabs are provided.\n   * When tabs are present the heading is hidden.\n   */\n  @Prop() heading: string | undefined;\n\n  /** Surface background variant. */\n  @Prop() background: BarNavBackground = 'secondary';\n\n  /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */\n  @Prop() basePath: string = '';\n\n  /** Current route URL. When set with `basePath`, the active tab is derived automatically. */\n  @Prop() currentUrl: string = '';\n\n  /** Emitted when the active tab changes. Detail = tab id. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  /** Emitted when an action button is toggled. Detail = { id, selected }. */\n  @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n  @State() private resolvedTabs: BarNavTab[] = [];\n  @State() private resolvedActions: BarNavActionItem[] = [];\n  @State() private urlDerivedValue: string = '';\n  @State() private hideTabsForDetailRoute = false;\n  @State() private tabsCollapsed = false;\n  @State() private menuOpen = false;\n  /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */\n  @State() private tabLayoutCommitted = false;\n\n  private static readonly HOST_PROP_SYNC_BUDGET = 8;\n  private static readonly INTRINSIC_WIDTH_RETRY_MAX = 3;\n\n  private leftEl: HTMLElement | null = null;\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  private visibleTabGroupEl: HTMLDsTabGroupElement | null = null;\n  private probeTabGroupEl: HTMLDsTabGroupElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private overflowCheckScheduled = false;\n  private intrinsicWidthRetryCount = 0;\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) {\n      return this.urlDerivedValue;\n    }\n    return this.value;\n  }\n\n  private get activeTabLabel(): string {\n    return getActiveTabLabel(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private get activeTabHasDot(): boolean {\n    return !!getActiveTab(this.resolvedTabs, this.effectiveValue)?.dot;\n  }\n\n  private digestTabsConfig(tabs: BarNavTab[]): string {\n    return tabs\n      .map(t => (isTabDivider(t) ? '|' : t.id))\n      .join(',');\n  }\n\n  @Watch('tabs')\n  @Watch('tabsJson')\n  @Watch('actions')\n  @Watch('actionsJson')\n  onPropsChange() {\n    const nextTabs = this.tabsJson\n      ? parseJsonArrayProp(this.tabsJson, [])\n      : (this.tabs ?? []);\n    const nextActions = this.actionsJson\n      ? parseJsonArrayProp(this.actionsJson, [])\n      : (this.actions ?? []);\n\n    if (this.digestTabsConfig(nextTabs) !== this.digestTabsConfig(this.resolvedTabs)) {\n      this.tabLayoutCommitted = false;\n    }\n\n    this.resolvedTabs = nextTabs;\n    this.resolvedActions = nextActions;\n    this.syncValueFromUrl();\n    this.intrinsicWidthRetryCount = 0;\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('currentUrl')\n  @Watch('basePath')\n  onUrlChange() {\n    this.syncValueFromUrl();\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('value')\n  @Watch('urlDerivedValue')\n  onSelectionChange() {\n    this.syncMenuSections();\n    this.scheduleOverflowCheck();\n  }\n\n  @Watch('menuOpen')\n  onMenuOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('tabsCollapsed')\n  onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined) {\n    if (!collapsed) {\n      this.menuOpen = false;\n      this.menuEl = null;\n    }\n    this.scheduleOverflowCheck();\n    if (collapsed || prevCollapsed === undefined || prevCollapsed === collapsed) return;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n    queueMicrotask(() => this.focusVisibleSelectedTab());\n  }\n\n  componentWillLoad() {\n    this.onPropsChange();\n  }\n\n  componentDidLoad() {\n    this.syncHostPropsIfNeeded();\n    this.scheduleDeferredHostPropSync();\n    this.setupOverflowObserver();\n    this.scheduleOverflowCheck();\n  }\n\n  componentDidRender() {\n    this.scheduleOverflowCheck();\n    this.syncMenuAnchor();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n  }\n\n  /** Re-resolve props assigned by the host after componentWillLoad (Angular ngAfterViewInit). */\n  private syncHostPropsIfNeeded() {\n    if (\n      shouldResyncBarNavProps(\n        this.resolvedTabs,\n        this.tabs,\n        this.tabsJson,\n        this.resolvedActions,\n        this.actions,\n        this.actionsJson,\n      )\n    ) {\n      this.onPropsChange();\n    } else if (this.currentUrl && this.basePath) {\n      this.syncValueFromUrl();\n    }\n  }\n\n  /** Poll across animation frames — host props may land without triggering @Watch. */\n  private scheduleDeferredHostPropSync() {\n    let remaining = BarNav.HOST_PROP_SYNC_BUDGET;\n    const tick = () => {\n      this.syncHostPropsIfNeeded();\n      if (--remaining > 0) {\n        requestAnimationFrame(tick);\n      }\n    };\n    queueMicrotask(tick);\n  }\n\n  private setupOverflowObserver() {\n    if (typeof ResizeObserver === 'undefined' || !this.leftEl) return;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowCheck());\n    this.resizeObserver.observe(this.leftEl);\n    const header = this.leftEl.parentElement;\n    if (header) {\n      this.resizeObserver.observe(header);\n    }\n  }\n\n  private scheduleOverflowCheck() {\n    if (this.overflowCheckScheduled) return;\n    this.overflowCheckScheduled = true;\n    requestAnimationFrame(() => {\n      this.overflowCheckScheduled = false;\n      this.updateTabsCollapsed();\n    });\n  }\n\n  /** Width left for tabs after actions — stable while collapsed (unlike leftEl box when hugging the trigger). */\n  private getLeftZoneAvailableWidth(): number {\n    if (!this.leftEl) return 0;\n\n    const header = this.leftEl.parentElement;\n    if (!header?.classList.contains('bar-nav')) {\n      return this.leftEl.clientWidth;\n    }\n\n    const headerStyle = getComputedStyle(header);\n    const gap = parseFloat(headerStyle.columnGap || headerStyle.gap || '0') || 0;\n    const actionsEl = header.querySelector('.bar-nav__actions') as HTMLElement | null;\n    const actionsWidth = actionsEl?.offsetWidth ?? 0;\n    const horizontalPadding =\n      (parseFloat(headerStyle.paddingLeft) || 0) + (parseFloat(headerStyle.paddingRight) || 0);\n    const available = header.clientWidth - horizontalPadding - actionsWidth - (actionsEl ? gap : 0);\n\n    return Math.max(0, available);\n  }\n\n  private getTabsIntrinsicWidth(): number {\n    const tabList = getTabListFromTabGroup(this.probeTabGroupEl);\n    return tabList?.scrollWidth ?? 0;\n  }\n\n  private scheduleIntrinsicWidthRetry() {\n    if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) return;\n    this.intrinsicWidthRetryCount++;\n    requestAnimationFrame(() => this.scheduleOverflowCheck());\n  }\n\n  private updateTabsCollapsed() {\n    if (!this.leftEl) {\n      return;\n    }\n\n    if (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.tabLayoutCommitted = true;\n      return;\n    }\n\n    const intrinsicWidth = this.getTabsIntrinsicWidth();\n    if (intrinsicWidth === 0) {\n      if (this.intrinsicWidthRetryCount >= BarNav.INTRINSIC_WIDTH_RETRY_MAX) {\n        this.intrinsicWidthRetryCount = 0;\n        this.tabsCollapsed = false;\n        this.tabLayoutCommitted = true;\n      } else {\n        this.scheduleIntrinsicWidthRetry();\n      }\n      return;\n    }\n    this.intrinsicWidthRetryCount = 0;\n\n    const shouldCollapse = tabsOverflowContainer(\n      intrinsicWidth,\n      this.getLeftZoneAvailableWidth(),\n      this.tabsCollapsed,\n    );\n\n    if (shouldCollapse !== this.tabsCollapsed) {\n      this.tabsCollapsed = shouldCollapse;\n      if (!shouldCollapse) {\n        this.menuOpen = false;\n      }\n    }\n\n    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  private syncMenuSections() {\n    if (!this.menuEl) return;\n    this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);\n  }\n\n  private syncValueFromUrl() {\n    if (!this.currentUrl || !this.basePath) {\n      this.urlDerivedValue = '';\n      this.hideTabsForDetailRoute = false;\n      return;\n    }\n\n    const { value, hideTabs } = deriveBarNavValueFromUrl(\n      this.currentUrl,\n      this.basePath,\n      this.resolvedTabs,\n    );\n    this.urlDerivedValue = value;\n    this.hideTabsForDetailRoute = hideTabs;\n  }\n\n  private selectTab(id: string) {\n    this.value = id;\n    this.dsTabChange.emit(id);\n  }\n\n  /** Move focus to the selected tab in the visible tab group (after expand). */\n  private focusVisibleSelectedTab() {\n    const tab = queryWithinComponentHost(\n      this.visibleTabGroupEl,\n      `[data-tab-id=\"${this.effectiveValue}\"]`,\n    );\n    tab?.focus({ preventScroll: true });\n  }\n\n  private handleTabChange(e: Event) {\n    this.selectTab((e as CustomEvent<string>).detail);\n  }\n\n  private handleActionChange(actionId: string, e: Event) {\n    const selected = (e as CustomEvent<boolean>).detail;\n    this.dsActionChange.emit({ id: actionId, selected });\n  }\n\n  private toggleTabMenu() {\n    if (this.menuOpen) {\n      this.menuOpen = false;\n      return;\n    }\n\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n      this.menuEl.minWidth = `${this.triggerEl.offsetWidth}px`;\n      this.syncMenuSections();\n    }\n\n    this.menuOpen = true;\n  }\n\n  private handleTriggerKeyDown(e: KeyboardEvent) {\n    if (!this.tabsCollapsed) return;\n\n    if (!this.menuOpen) {\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this.toggleTabMenu();\n      }\n      return;\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.menuOpen = false;\n      this.triggerEl?.focus();\n    }\n  }\n\n  render() {\n    const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;\n\n    const bgToActionBg: Partial<Record<BarNavBackground, BarNavActionBackground>> = {};\n    const actionBg: BarNavActionBackground | undefined = bgToActionBg[this.background];\n\n    return (\n      <Host>\n        <header class={{ 'bar-nav': true, [`bg-${this.background}`]: true }}>\n\n          <div\n            class=\"bar-nav__left\"\n            ref={el => {\n              this.leftEl = 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\n                  ref={el => {\n                    this.probeTabGroupEl = (el as HTMLDsTabGroupElement) ?? null;\n                    if (el) {\n                      this.intrinsicWidthRetryCount = 0;\n                      this.scheduleOverflowCheck();\n                    }\n                  }}\n                  tabs={this.resolvedTabs}\n                  value={this.effectiveValue}\n                />\n              </div>\n            )}\n\n            {hasTabs && this.tabLayoutCommitted && !this.tabsCollapsed && (\n              <ds-tab-group\n                class=\"bar-nav__tabs-visible\"\n                ref={el => {\n                  this.visibleTabGroupEl = el as HTMLDsTabGroupElement;\n                }}\n                tabs={this.resolvedTabs}\n                value={this.effectiveValue}\n                onDsChange={(e: Event) => this.handleTabChange(e)}\n              />\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 class={{\n                  'bar-nav__tab-trigger-label': true,\n                  'bar-nav__tab-trigger-label--dot': this.activeTabHasDot,\n                  'text-body-medium-emphasis': true,\n                }}>\n                  {this.activeTabLabel}\n                  {this.activeTabHasDot && (\n                    <span class=\"bar-nav__tab-trigger-dot\" aria-hidden=\"true\" />\n                  )}\n                </span>\n                <ds-icon\n                  name=\"ChevronDown\"\n                  size=\"sm\"\n                  color=\"inherit\"\n                  class=\"bar-nav__tab-trigger-chevron\"\n                />\n              </button>\n            )}\n          </div>\n\n          {this.resolvedActions.length > 0 && (\n            <div class=\"bar-nav__actions\">\n              {this.resolvedActions.map(action => (\n                <ds-bar-nav-action\n                  key={action.id}\n                  icon={action.icon}\n                  selected={action.selected ?? false}\n                  dot={action.dot ?? false}\n                  inactive={action.inactive}\n                  aria-label={action.ariaLabel ?? action.id}\n                  background={actionBg}\n                  onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n                />\n              ))}\n            </div>\n          )}\n\n        </header>\n\n        {hasTabs && this.tabsCollapsed && (\n          <ds-menu\n            ref={el => {\n              this.menuEl = (el as HTMLDsMenuElement) ?? null;\n            }}\n            open={this.menuOpen}\n            sections={tabsToMenuSections(this.resolvedTabs, this.effectiveValue)}\n            side=\"bottom\"\n            align=\"start\"\n            onDsSelect={(e: Event) => this.handleMenuSelect(e)}\n            onDsClose={() => this.handleMenuClose()}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-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:"2a76050ba6cd6bad3a9bbaafea5fe57264d783ea"},a("nav",{key:"c3472027d72fc9d7349c99a858efd21ca8938d83","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"9aa6e39de29cab52f3282e0967823892f55e2c37",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:"fac200c42958ff509766bc188ba6ab974414be80"},a("nav",{key:"691199251c2d28c82c8fd93d66ded3558cfa3053","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"4fa1f8ec9ed3ab983e43d8ea5c30a8d13df38205",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-D3CwGoIu.js";import{d as n}from"./p-CNhBzIIb.js";import{d as a}from"./p-BcuUR5Ao.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:"0723f2c9222f3e8910fd2138d59fea711ff0a53e"},s("div",{key:"bca1d6481096afc0c52a90fb0c34c732bd42d3d1",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 d}from"./index.js";import{d as e}from"./p-DiHfQFKR.js";import{d as n}from"./p-ww8gtHIq.js";import{d as a}from"./p-BcuUR5Ao.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:"5f97376b37bed13b422cde2d8d02da067cb9361b"},s("div",{key:"00eee8a706a06c8ac5cb082d290b97f6a96897a3",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};
 //# sourceMappingURL=ds-button-group.js.map

package/dist/components/ds-button.js

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

package/dist/components/ds-card.js

@@ -1,2 +1,2 @@
-import{p as e,H as d,h as s,a,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends d{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return s(a,{key:"ce92b38282a23fbe29844f0dc5ff616e75732961",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},s("slot",{key:"0a16deee120500196acd2ed283267f8faef751ab",name:"header"}),s("div",{key:"f1843602b5f5be953d58942f1fc9e5ec6bc5ac64",class:"body"},s("slot",{key:"5d939eff91d52099f0169321f60398a78e7673e3"})),s("slot",{key:"18ddef54bc19303df452714595f9240d2e45aa22",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
+import{p as e,H as a,h as d,a as s,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return d(s,{key:"adb5cffde6394edfb602832dd1bae7b269c70cae",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},d("slot",{key:"a971a97e4aeffbc84ef3f118d89b9a7a9a15296a",name:"header"}),d("div",{key:"946ac50abd4c2189550e652f9317ebb1b0959824",class:"body"},d("slot",{key:"dd811ec0b60dad8d05634a4516c3bf72df873969"})),d("slot",{key:"43597ac67bc08c85e545252a06b2c7051f145e45",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
 //# sourceMappingURL=ds-card.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat)     { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n  padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  @Prop() elevation: CardElevation = 'elevated';\n  @Prop() radius: CardRadius = 'lg';\n\n  render() {\n    return (\n      <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n        <slot name=\"header\" />\n        <div class=\"body\">\n          <slot />\n        </div>\n        <slot name=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAU,IAAM,2hC,MCUTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,UAA2B,WAC3BD,KAAAE,OAAqB,IAa9B,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,KAAM,KAAM,CAAC,aAAaR,KAAKC,aAAc,KAAM,CAAC,UAAUD,KAAKE,UAAW,OAC3FE,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACXL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}
+{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat)     { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n  padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  @Prop() elevation: CardElevation = 'elevated';\n  @Prop() radius: CardRadius = 'lg';\n\n  render() {\n    return (\n      <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n        <slot name=\"header\" />\n        <div class=\"body\">\n          <slot />\n        </div>\n        <slot name=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,2hC,MCUTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,UAA2B,WAC3BD,KAAAE,OAAqB,IAa9B,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,KAAM,KAAM,CAAC,aAAaR,KAAKC,aAAc,KAAM,CAAC,UAAUD,KAAKE,UAAW,OAC3FE,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACXL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}

package/dist/components/ds-checkbox.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let 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:"7e545faf426a51bd0ffb24a7bec2b3efde3bae74",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:"a9428d0c0b10c82fc7f3786587848b34d6f6a9bf",class:{box:true,"box--marked":e}},e&&c("span",{key:"3fb04c72dc7b5679813b53445068cdde5af64b2a",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"46736f45d8cc097750e6bb6a246ab85f2d108a6c",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:"8f9c42f24c050768c621ea7dfb377626a4377518",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:"2e10727aae11b503571d9b0f16a9adb08a41c66f",class:{box:true,"box--marked":e}},e&&c("span",{key:"f369faf7fd4d8293b82e10ad4c70929ecb2457e4",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"0e931fe60ed201c660999b6cf489418729bfa234",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-divider.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"eaa12b3814eaf77c8993f7c2113c4a72164af189",role:"separator","aria-orientation":this.orientation,class:{vertical:this.orientation==="vertical"}})}static get style(){return o()}},[1,"ds-divider",{orientation:[1]}]);function n(){if(typeof customElements==="undefined"){return}const t=["ds-divider"];t.forEach((t=>{switch(t){case"ds-divider":if(!customElements.get(r(t))){customElements.define(r(t),a)}break}}))}n();const c=a;const d=n;export{c as DsDivider,d as defineCustomElement};
+import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"9c69f9a78f2a08197be717cc52e43b039fef13bc",role:"separator","aria-orientation":this.orientation,class:{vertical:this.orientation==="vertical"}})}static get style(){return o()}},[1,"ds-divider",{orientation:[1]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-divider"];t.forEach((t=>{switch(t){case"ds-divider":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}c();const a=n;const d=c;export{a as DsDivider,d as defineCustomElement};
 //# sourceMappingURL=ds-divider.js.map

package/dist/components/ds-empty-state.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,a,t as n}from"./index.js";const o=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const c={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(a,{key:"76cb3345a348d2938b1b3f531cbb013a90e25752"},s("div",{key:"da315b928b0f917b4d2882cf99b1f37a8f5d8d36",class:"empty-state"},s("p",{key:"9d1785df6d65200c7adb1d63643a9b25871f31bf",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||c[this.type])))}static get style(){return o()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(n(t))){customElements.define(n(t),d)}break}}))}i();const r=d;const p=i;export{r as DsEmptyState,p as defineCustomElement};
+import{p as t,H as e,h as s,a as c,t as n}from"./index.js";const o=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const a={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(c,{key:"452f3dc088c95f003eff619455435893e613b794"},s("div",{key:"8cf7988d365c275dbe997961f22a77e9150dc04b",class:"empty-state"},s("p",{key:"d5ffda6a2ff29428c6247f470e4f2c28635f288b",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||a[this.type])))}static get style(){return o()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(n(t))){customElements.define(n(t),d)}break}}))}i();const r=d;const f=i;export{r as DsEmptyState,f as defineCustomElement};
 //# sourceMappingURL=ds-empty-state.js.map

package/dist/components/ds-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"names":["emptyStateCss","DEFAULT_MESSAGES","EmptyState","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","render","h","Host","key","class","style","color","message"],"sources":["src/wc/components/EmptyState/EmptyState.css?tag=ds-empty-state&encapsulation=scoped","src/wc/components/EmptyState/EmptyState.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n  width: 100%;\n}\n\n.empty-state p {\n  margin: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst DEFAULT_MESSAGES: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  @Prop() type: EmptyStateType = 'no-content';\n  @Prop() message: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          <p class=\"text-body-medium\" style={{ color: 'var(--color-foreground-secondary)' }}>\n            {this.message || DEFAULT_MESSAGES[this.type]}\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAgB,IAAM,uPCI5B,MAAMC,EAAmD,CACvD,aAAc,+BACd,aAAc,oBACd,oBAAqB,mDACrB,YAAa,uC,MAQFC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAuB,YAchC,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEC,MAAO,sCACzCR,KAAKS,SAAWf,EAAiBM,KAAKC,Q","ignoreList":[]}
+{"version":3,"names":["emptyStateCss","DEFAULT_MESSAGES","EmptyState","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","render","h","Host","key","class","style","color","message"],"sources":["src/wc/components/EmptyState/EmptyState.css?tag=ds-empty-state&encapsulation=scoped","src/wc/components/EmptyState/EmptyState.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n  width: 100%;\n}\n\n.empty-state p {\n  margin: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst DEFAULT_MESSAGES: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  @Prop() type: EmptyStateType = 'no-content';\n  @Prop() message: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          <p class=\"text-body-medium\" style={{ color: 'var(--color-foreground-secondary)' }}>\n            {this.message || DEFAULT_MESSAGES[this.type]}\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,IAAM,uPCI5B,MAAMC,EAAmD,CACvD,aAAc,+BACd,aAAc,oBACd,oBAAqB,mDACrB,YAAa,uC,MAQFC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAuB,YAchC,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEC,MAAO,sCACzCR,KAAKS,SAAWf,EAAiBM,KAAKC,Q","ignoreList":[]}

package/dist/components/ds-fade.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"090101e0050533d42dbdec4ea8e338d1bffc2df5","aria-hidden":"true",class:{fade:true,[`fade--${this.side}`]:true},style:{height:this.height,"--ds-fade-bg":this.background}})}static get style(){return o()}},[1,"ds-fade",{side:[1],height:[1],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-fade"];t.forEach((t=>{switch(t){case"ds-fade":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const i=n;const f=d;export{i as DsFade,f as defineCustomElement};
+import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"7ce5b7eb85f645786047e7d714b3ca0304cdcaf9","aria-hidden":"true",class:{fade:true,[`fade--${this.side}`]:true},style:{height:this.height,"--ds-fade-bg":this.background}})}static get style(){return o()}},[1,"ds-fade",{side:[1],height:[1],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-fade"];t.forEach((t=>{switch(t){case"ds-fade":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const i=n;const f=d;export{i as DsFade,f as defineCustomElement};
 //# sourceMappingURL=ds-fade.js.map

package/dist/components/ds-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as l,a as d,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 a=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 l(d,{key:"4f80f2e5f97b2c4ae647ec96438f7a1c2b26d9a1"},l("div",{key:"c0231a9b907e26a3715b654c9e872e1f4be7e69d",class:"field"},l("label",{key:"08570d74783a8faebcca93941a89ffa26005a5ee",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),l("slot",{key:"1ce17b5bd251429d6887d7c87b8f9056ed30c23a"})))}static get style(){return i()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),a)}break}}))}f();const n=a;const o=f;export{n as DsField,o as defineCustomElement};
+import{p as e,H as s,h as d,a as l,t}from"./index.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const f=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:"c970d55db8bf13d1f275b89b98f83c76f04b99b6"},d("div",{key:"18fdd33a044d4d229ac0c9ee3272715c4890734a",class:"field"},d("label",{key:"8eaf6c5cca3e30d691b680ca590547ceb9078b76",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"732e0db03f6dcf6ed92694bb71632b48ec28b9bf"})))}static get style(){return c()}},[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-header.js

@@ -1,2 +1,2 @@
-import{p as e,H as a,h as r,a as s,t as d}from"./index.js";const t=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const n=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"d924edf8fb0a301d591b9e2bbcfddf17fe34796d",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},r("div",{key:"ab7d047a5c45fd30e59be99772177e656a253277",class:"left"},r("slot",{key:"554a2c44fad2d17e51d04fe885e04970697feb85",name:"left"}),this.heading&&r("span",{key:"277049357e9d5a6d520afc068609d45c3e33d11b",class:"title text-title-small"},this.heading)),r("div",{key:"6926973b60c198ad2f8441377460b37dbf2c12ff",class:"center"},r("slot",{key:"4285a2e8780f1d5511290435a1102a9f1a22ad6c",name:"center"})),r("div",{key:"f72ad4768c034804ab1e293f39b1c2846a27d596",class:"right"},r("slot",{key:"9ac865b6bdae54a708e73edd9d4aa7c0de938669",name:"right"})))}static get style(){return t()}},[262,"ds-header",{heading:[1],background:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(d(e))){customElements.define(d(e),n)}break}}))}c();const i=n;const o=c;export{i as DsHeader,o as defineCustomElement};
+import{p as e,H as r,h as a,a as s,t as c}from"./index.js";const t=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return a(s,{key:"ecee3cb0f642adad30d3fcfe1cf4519149cc562d",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},a("div",{key:"526ee34b3d1b4739833bab34f342111c940da48f",class:"left"},a("slot",{key:"24a68920d25f3490150c8b2943b25194066b7484",name:"left"}),this.heading&&a("span",{key:"6839317c208a609644396ab0190c5cd07b65a770",class:"title text-title-small"},this.heading)),a("div",{key:"8ec948a0a79ff567d9c066b844ccbd159ed9070c",class:"center"},a("slot",{key:"c5976d9c28c930c7678a7d4f2a3bc52cbdaca036",name:"center"})),a("div",{key:"dc3472378d3905492449815f6904c73d220cfafd",class:"right"},a("slot",{key:"ca660be77975885e37cbe6e5155cf615ac42d43e",name:"right"})))}static get style(){return t()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(c(e))){customElements.define(c(e),d)}break}}))}n();const i=d;const o=n;export{i as DsHeader,o as defineCustomElement};
 //# sourceMappingURL=ds-header.js.map

package/dist/components/ds-icon.js

@@ -1,2 +1,2 @@
-import{I as o,d as s}from"./p-CNhBzIIb.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
+import{I as o,d as s}from"./p-ww8gtHIq.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
 //# sourceMappingURL=ds-icon.js.map

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as e,H as i,c as s,h as a,a as t,t as r}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const r=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return a(t,{key:"3ac505ec397fb982bdd70cef6c45815a17eae394",class:"input-container"},a("div",{key:"ef0e1d8fbb82ea87bae7a71d7ed626d59621f65e",class:{wrapper:true,"wrapper--error":this.error}},a("div",{key:"8c1240520cb8730484fde29e3a190f3482d1c8f8",class:"row"},a("input",{key:"eec0fe44636a237e5f2af0e87de4a963bdfe94ce",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":r,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&a("button",{key:"378e0a9f389cf6d35d25c23f67a163bacc4e8efc",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},a("span",{key:"a3ba17f07bbafa4e2a676fa5c94590a8e4089d1d","aria-hidden":"true"},"×")),a("span",{key:"1b7644195500693d2b220d5bad152af80df70a9b",class:"suffix"},a("slot",{key:"d5c708936955fa25e908f2df4c034d1fbdfef8ab",name:"suffix"})))),s&&a("div",{key:"5df686241138c500dbe688da3197f0b1d86e429e",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
+import{p as e,H as i,c as s,h as t,a as r,t as a}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const a=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(r,{key:"db71f64e7623ad2993dff18bbb70c2e5a2061bfb",class:"input-container"},t("div",{key:"dfdc1d9c8f2a96e3f595d592dc7cef330bf05023",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"1f9779f00f1f84f6d744082796e51d2d07f26be0",class:"row"},t("input",{key:"a6509ac7ae729f294b5d2f374aa621b5f668b9fd",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":a,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"84c4aab006d790846398057ae4f8a2d8c386d05a",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"dd731bf3b948bd884ddc0decd21c8092bf2c2e5b","aria-hidden":"true"},"×")),t("span",{key:"049aad008ec53fe3da905304db9e1a526594d271",class:"suffix"},t("slot",{key:"880a1d10244b6677d1dd9ed726558d23403d40e5",name:"suffix"})))),s&&t("div",{key:"2d9d069efe3a21b24e54e41b0b39d5a3cf7476e1",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

package/dist/components/ds-label-wrap.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as t,a,t as i}from"./index.js";const l=()=>`.label-wrap.sc-ds-label-wrap-h{display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0;padding:0 var(--dimension-space-050)}.size-xs.sc-ds-label-wrap-h,.size-sm.sc-ds-label-wrap-h{padding:0 var(--dimension-space-025)}.truncate.sc-ds-label-wrap-h{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.size="md";this.truncate=false}render(){return t(a,{key:"257df8bf93f21f0905e6b659d6342d2bba19917b",class:{"label-wrap":true,"size-xs":this.size==="xs","size-sm":this.size==="sm","size-lg":this.size==="lg",truncate:this.truncate}},t("slot",{key:"65bb9c0c981bd2f24dbd66e5b2a92f856fc25263"}))}static get style(){return l()}},[262,"ds-label-wrap",{size:[1],truncate:[4]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-label-wrap"];s.forEach((s=>{switch(s){case"ds-label-wrap":if(!customElements.get(i(s))){customElements.define(i(s),n)}break}}))}r();const c=n;const d=r;export{c as DsLabelWrap,d as defineCustomElement};
+import{p as s,H as e,h as t,a,t as i}from"./index.js";const l=()=>`.label-wrap.sc-ds-label-wrap-h{display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0;padding:0 var(--dimension-space-050)}.size-xs.sc-ds-label-wrap-h,.size-sm.sc-ds-label-wrap-h{padding:0 var(--dimension-space-025)}.truncate.sc-ds-label-wrap-h{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.size="md";this.truncate=false}render(){return t(a,{key:"442625e7ba3f6b8bb7fbf7d9130e931d5f6ada4b",class:{"label-wrap":true,"size-xs":this.size==="xs","size-sm":this.size==="sm","size-lg":this.size==="lg",truncate:this.truncate}},t("slot",{key:"231f8a4b4a23e746731904cef57335b33738eb1d"}))}static get style(){return l()}},[262,"ds-label-wrap",{size:[1],truncate:[4]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-label-wrap"];s.forEach((s=>{switch(s){case"ds-label-wrap":if(!customElements.get(i(s))){customElements.define(i(s),n)}break}}))}r();const c=n;const d=r;export{c as DsLabelWrap,d as defineCustomElement};
 //# sourceMappingURL=ds-label-wrap.js.map

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as a,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const s=this.getFocusables(t);if(!s.length){e.preventDefault();t.focus();return}const a=s[0];const o=s[s.length-1];const i=document.activeElement;if(e.shiftKey){if(i===a||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();a.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return a(o,{key:"dae15144ffd073bf959eb119cdbcc71b95166c45",style:{display:"contents"}},a("div",{key:"32631ebf49571f8879d41880dea3130b7c911726",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},a("div",{key:"6d913af69abb87248fe2395213dc2cb0aa4083b2",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},a("div",{key:"c694078f8165ae3da02089b23d06ed41105e99de",class:"modal-header"},a("h2",{key:"0d709591c19ab9f7139732a6d49053d0d4df1caf",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&a("div",{key:"fff945ddfdfb09efa8d36adeacf161df2868bed1",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),a("div",{key:"80e3d6b4df11131f3b5550ca1dceb29fe932b1e5",class:"modal-body"},a("slot",{key:"870dc88bf70a88537cb040f4d7d75171540842b8"})),a("div",{key:"494dcab1be6dc1ccf5f8041365ce6f70ed2cbe00",class:"modal-footer"},a("slot",{key:"61079317362dbfb5f15c88aa71ddf4247748ec61",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}f();const h=m;const u=f;export{h as DsModal,u as defineCustomElement};
+import{p as e,H as t,c as s,h as a,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const s=this.getFocusables(t);if(!s.length){e.preventDefault();t.focus();return}const a=s[0];const o=s[s.length-1];const i=document.activeElement;if(e.shiftKey){if(i===a||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();a.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return a(o,{key:"c64fa3ca90f86c5fb83bd7ffa7c6976ad7c5b287",style:{display:"contents"}},a("div",{key:"56b5ed067931e2c69cb595fb1e6992b475b24705",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},a("div",{key:"67c47a220ff00d910233faed11235b769663f258",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},a("div",{key:"078db1531e6abd71f8a9590ead9bd81ed48bff45",class:"modal-header"},a("h2",{key:"20ac0c6953cdb7b752f1a77e49493c051774d128",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&a("div",{key:"ba1923639fe4651c9a82ec4ced3a1936db2ba1fc",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),a("div",{key:"eb135b3ea77a214f492cb288edd67bb63cd67125",class:"modal-body"},a("slot",{key:"88d5ef949ca6e1c51154f52294cdc03f5883f156"})),a("div",{key:"458f0830f40c104d8e54058264d654f89d42f13e",class:"modal-footer"},a("slot",{key:"0c3ccd4878eca5abd18f714cc535886ff140e38a",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}f();const h=m;const u=f;export{h as DsModal,u as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map