@ds-mo/ui 1.7.2 → 1.7.4

package/dist/.build-stamp

@@ -1 +1 @@
-1782768132371
+1782770022521

package/dist/components/ds-badge.js

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

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

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

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

@@ -1,2 +1,2 @@
-import{p as a,H as e,c as t,h as s,a as i,t as n}from"./index.js";import{S as r}from"./p-DfL2MOso.js";import{g as o,i as d}from"./p-BQq26pt9.js";import{d as h}from"./p-DYP8Y00j.js";import{d as b}from"./p-CujDrEOs.js";import{d as l}from"./p-DqBCQRRd.js";import{d as c}from"./p-C4VSrrAB.js";import{d as v}from"./p-Bzf0naBt.js";function u(a,e,t){if(!a||!e){return{value:"",hideTabs:false}}if(a!==e&&!a.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=a.slice(e.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=o(t);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const r=n.find((a=>a.id===i));if(r){return{value:r.id,hideTabs:false}}return{value:"",hideTabs:true}}function f(a,e,t,s,i,n){const r=t?g(t,[]):e??[];const o=n?g(n,[]):i??[];return a.length===0&&r.length>0||s.length===0&&o.length>0}function g(a,e){if(Array.isArray(a))return a;if(typeof a==="string"&&a!==""){try{const t=JSON.parse(a);return Array.isArray(t)?t:e}catch{return e}}return e}function p(a,e){if(!a)return null;const t=a.shadowRoot??a;return t.querySelector(e)}function m(a){return p(a,'[role="tablist"]')}function _(a,e){const t=[];let s=[];for(const i of a){if(d(i)){if(s.length>0){t.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===e,isInactive:i.disabled})}if(s.length>0){t.push({items:s})}return t}function y(a,e){const t=o(a);return t.find((a=>a.id===e))??t[0]}function k(a,e){return y(a,e)?.label??"Tabs"}function w(a,e,t,s=2){const i=a-e;if(t){return i>-s}return i>s}const x=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);transition:background-color var(--effect-motion-short-3),     border-color var(--effect-motion-short-3),     color var(--effect-motion-short-3)}ds-app-shell[gradient].sc-ds-bar-nav-h,ds-app-shell[gradient] .sc-ds-bar-nav-h{--ds-shell-gradient-opacity:0.1}.bar-nav.sc-ds-bar-nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--ds-shell-gradient-position-bar, 0 0);background-repeat:no-repeat}.bar-nav--default.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}.bar-nav--navigation.sc-ds-bar-nav{--_bar-nav-bg:var(--color-navigation-background);--_bar-nav-border:var(--color-navigation-border-tertiary);--_bar-nav-fg-primary:var(--color-navigation-foreground-primary);--_bar-nav-fg-secondary:var(--color-navigation-foreground-secondary);--_bar-nav-hover:var(--color-navigation-interaction-hover);--_bar-nav-pressed:var(--color-navigation-interaction-pressed);--_bar-nav-focus:var(--color-navigation-interaction-focus);--_bar-nav-dot:var(--color-navigation-foreground-brand)}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_bar-nav-fg-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--_bar-nav-hover);--_pressed-bg:var(--_bar-nav-pressed);--_dot:var(--_bar-nav-dot);--_dot-ring:var(--_bar-nav-bg)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--dimension-size-400)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--dimension-size-400)),     transparent 100%   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const C=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.navStyle="default";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return k(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!y(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?g(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?g(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(a){if(this.menuEl){this.menuEl.open=a}}onTabsCollapsedChange(a,e){if(!a){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(a){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(a||e===undefined||e===a)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(f(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=a.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(t)}};queueMicrotask(t)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(a=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(a||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const a=this.triggerLabelTextEl;if(!a||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const e=a.scrollWidth>a.clientWidth+1;if(e!==this.triggerLabelTruncated){this.triggerLabelTruncated=e}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const a=getComputedStyle(this.headerEl);const e=parseFloat(a.columnGap||a.gap||"0")||0;const t=this.headerEl.querySelector(".bar-nav__actions");const s=t?.offsetWidth??0;const i=(parseFloat(a.paddingLeft)||0)+(parseFloat(a.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:t?e:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const a=m(this.probeTabGroupEl);return a?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=a.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const a=this.getTabsIntrinsicWidth();if(a===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=w(a,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(a){const e=a.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:a,hideTabs:e}=u(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=a;this.hideTabsForDetailRoute=e}selectTab(a){this.value=a;this.dsTabChange.emit(a)}focusVisibleSelectedTab(){const a=p(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);a?.focus({preventScroll:true})}handleTabChange(a){this.selectTab(a.detail)}handleActionChange(a,e){const t=e.detail;this.dsActionChange.emit({id:a,selected:t})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(a){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(a.key==="ArrowDown"||a.key==="ArrowUp"||a.key==="Enter"||a.key===" "){a.preventDefault();this.toggleTabMenu()}return}if(a.key==="Escape"){a.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}get tabSurface(){return this.navStyle==="navigation"?"navigation":undefined}render(){const a=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.tabSurface;return s(i,{key:"13b64b398235059b130d546361dbc27097275ded"},s("header",{key:"56e988414dd4c89e23acddeae9a13394a3b2bdc7",class:{"bar-nav":true,"bar-nav--navigation":this.navStyle==="navigation","bar-nav--default":this.navStyle==="default","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},style:{viewTransitionName:r},ref:a=>{this.headerEl=a;if(a&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&s("div",{key:"173741870957a08056fbfedb84babde5cab3b3dd",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:"1a418424651af6c243440b9699c705e1a75065c1",ref:a=>{this.probeTabGroupEl=a??null;if(a){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue,background:e})),a&&!this.tabsCollapsed&&s("div",{key:"a5e136099ccfcb93cd8e93705f9027e8e46141cc",class:"bar-nav__left"},s("ds-tab-group-nav",{key:"17ffd6afc7e36cae5bb19debabd5e2d05516320c",class:"bar-nav__tabs-visible",ref:a=>{this.visibleTabGroupEl=a??null},tabs:this.resolvedTabs,value:this.effectiveValue,background:e,onDsChange:a=>this.handleTabChange(a)})),!a&&this.heading&&s("span",{key:"52b92b66145666fefc86bd7ff0369f612999c9d8",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&s("button",{key:"eb1bf713c6419fd5739b1bc7d71ebdd80139e7e6",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:a=>{this.triggerEl=a},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:a=>this.handleTriggerKeyDown(a)},s("span",{key:"0fe185c52c53d5d0e13d9fb2f09f5623feb58ab3",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},s("span",{key:"86119c2e1bb7d2cd0afa9e61249a58c8dbe8f04f",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:a=>{const e=a??null;if(e===this.triggerLabelTextEl)return;this.triggerLabelTextEl=e;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"4d7cfa91725934a220ee20de5cacc76a373a208f",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"fc9fcb1da7f81d9a95e893ba93b5f59a25c8d960",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"5c6168cd82ea04de43800625dcbe63022f7fd843",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"9a8880270134a4b414d1e5f14bf88e377211426c",class:"bar-nav__actions"},this.resolvedActions.map((a=>s("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:e=>this.handleActionChange(a.id,e)}))))),a&&this.tabsCollapsed&&s("ds-menu",{key:"58db6c45a4aee54d94dd9a6945659b9584cbb203",ref:a=>{this.menuEl=a??null},open:this.menuOpen,sections:_(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:a=>this.handleMenuSelect(a),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return x()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],navStyle:[513,"nav-style"],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function T(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(n(a))){customElements.define(n(a),C)}break;case"ds-badge":if(!customElements.get(n(a))){h()}break;case"ds-bar-nav-action":if(!customElements.get(n(a))){b()}break;case"ds-icon":if(!customElements.get(n(a))){l()}break;case"ds-menu":if(!customElements.get(n(a))){c()}break;case"ds-tab-group-nav":if(!customElements.get(n(a))){v()}break}}))}T();const z=C;const D=T;export{z as DsBarNav,D as defineCustomElement};
+import{p as a,H as e,c as t,h as s,a as i,t as n}from"./index.js";import{S as r}from"./p-DfL2MOso.js";import{g as o,i as d}from"./p-BQq26pt9.js";import{d as h}from"./p-DAycHO-h.js";import{d as b}from"./p-CiQqF0cR.js";import{d as c}from"./p-DqBCQRRd.js";import{d as l}from"./p-C4VSrrAB.js";import{d as v}from"./p-D7HuiVTa.js";function u(a,e,t){if(!a||!e){return{value:"",hideTabs:false}}if(a!==e&&!a.startsWith(`${e}/`)){return{value:"",hideTabs:false}}const s=a.slice(e.length);const i=s.startsWith("/")?s.slice(1).split("/")[0]:"";const n=o(t);if(!i){return{value:n[0]?.id??"",hideTabs:false}}const r=n.find((a=>a.id===i));if(r){return{value:r.id,hideTabs:false}}return{value:"",hideTabs:true}}function f(a,e,t,s,i,n){const r=t?g(t,[]):e??[];const o=n?g(n,[]):i??[];return a.length===0&&r.length>0||s.length===0&&o.length>0}function g(a,e){if(Array.isArray(a))return a;if(typeof a==="string"&&a!==""){try{const t=JSON.parse(a);return Array.isArray(t)?t:e}catch{return e}}return e}function p(a,e){if(!a)return null;const t=a.shadowRoot??a;return t.querySelector(e)}function m(a){return p(a,'[role="tablist"]')}function _(a,e){const t=[];let s=[];for(const i of a){if(d(i)){if(s.length>0){t.push({items:s});s=[]}continue}s.push({label:i.label,value:i.id,isSelected:i.id===e,isInactive:i.disabled})}if(s.length>0){t.push({items:s})}return t}function y(a,e){const t=o(a);return t.find((a=>a.id===e))??t[0]}function k(a,e){return y(a,e)?.label??"Tabs"}function w(a,e,t,s=2){const i=a-e;if(t){return i>-s}return i>s}const x=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);transition:background-color var(--effect-motion-short-3),     border-color var(--effect-motion-short-3),     color var(--effect-motion-short-3)}ds-app-shell[gradient].sc-ds-bar-nav-h,ds-app-shell[gradient] .sc-ds-bar-nav-h{--ds-shell-gradient-opacity:0.1}.bar-nav.sc-ds-bar-nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--ds-shell-gradient-position-bar, 0 0);background-repeat:no-repeat}.bar-nav--default.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}.bar-nav--navigation.sc-ds-bar-nav{--_bar-nav-bg:var(--color-navigation-background);--_bar-nav-border:var(--color-navigation-border-tertiary);--_bar-nav-fg-primary:var(--color-navigation-foreground-primary);--_bar-nav-fg-secondary:var(--color-navigation-foreground-secondary);--_bar-nav-hover:var(--color-navigation-interaction-hover);--_bar-nav-pressed:var(--color-navigation-interaction-pressed);--_bar-nav-focus:var(--color-navigation-interaction-focus);--_bar-nav-dot:var(--color-navigation-foreground-brand)}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:0;align-items:center}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger.sc-ds-bar-nav{flex:0 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden}.bar-nav__between.sc-ds-bar-nav{flex:1 1 0%;min-width:var(--dimension-space-100)}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label.sc-ds-bar-nav{flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:block;flex:1 1 0%;min-width:0}.bar-nav--tabs-collapsed.sc-ds-bar-nav .bar-nav__actions.sc-ds-bar-nav{flex:0 0 auto;margin-left:0}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__tab-trigger.sc-ds-bar-nav{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--dimension-space-050);flex:0 1 auto;min-width:0;width:max-content;max-width:100%;padding:var(--dimension-space-075);background-color:transparent;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_bar-nav-fg-primary);position:relative;transition:color var(--effect-motion-short-2);height:var(--dimension-size-400);--_hover-bg:var(--_bar-nav-hover);--_pressed-bg:var(--_bar-nav-pressed);--_dot:var(--_bar-nav-dot);--_dot-ring:var(--_bar-nav-bg)}.bar-nav__tab-trigger.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none;z-index:2}.bar-nav__tab-trigger.sc-ds-bar-nav:hover::after{background:var(--_hover-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:active::after{background:var(--_pressed-bg);transition:none}.bar-nav__tab-trigger.sc-ds-bar-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--_bar-nav-focus);outline-offset:var(--dimension-space-025)}.bar-nav__tab-trigger--open.sc-ds-bar-nav::after{background:var(--_hover-bg)}.bar-nav__tab-trigger-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;padding:0 var(--dimension-space-025);overflow:hidden;--_fade-right:var(--dimension-space-025);z-index:1}.bar-nav__tab-trigger-label--truncated.sc-ds-bar-nav::after{content:'';position:absolute;top:0;right:var(--_fade-right);bottom:0;width:var(--dimension-size-400);background:linear-gradient(to right, transparent, var(--_bar-nav-bg));pointer-events:none;z-index:1}.bar-nav__tab-trigger-label-text.sc-ds-bar-nav{display:inline-block;max-width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;vertical-align:bottom}.bar-nav__tab-trigger-label-text--truncated.sc-ds-bar-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--dimension-size-400)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--dimension-size-400)),     transparent 100%   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.bar-nav__tab-trigger-label--dot.sc-ds-bar-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050));--_fade-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.bar-nav__tab-trigger-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none;z-index:1}.bar-nav__tab-trigger-chevron.sc-ds-bar-nav{position:relative;flex-shrink:0;z-index:1}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-left:auto}`;const C=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=t(this,"dsTabChange");this.dsActionChange=t(this,"dsActionChange");this.tabs=[];this.tabsJson="";this.value="";this.actions=[];this.actionsJson="";this.navStyle="default";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.resolvedActions=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.triggerLabelTruncated=false;this.headerEl=null;this.triggerEl=null;this.triggerLabelTextEl=null;this.triggerLabelObserver=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.overflowCheckScheduled=false;this.intrinsicWidthRetryCount=0}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get activeTabLabel(){return k(this.resolvedTabs,this.effectiveValue)}get activeTabHasDot(){return!!y(this.resolvedTabs,this.effectiveValue)?.dot}onPropsChange(){this.resolvedTabs=this.tabsJson?g(this.tabsJson,[]):this.tabs??[];this.resolvedActions=this.actionsJson?g(this.actionsJson,[]):this.actions??[];this.syncValueFromUrl();this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}onUrlChange(){this.syncValueFromUrl();this.scheduleOverflowCheck()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(a){if(this.menuEl){this.menuEl.open=a}}onTabsCollapsedChange(a,e){if(!a){this.menuOpen=false;this.menuEl=null;this.triggerLabelTruncated=false;this.syncTriggerLabelObserver()}this.scheduleOverflowCheck();if(a){requestAnimationFrame((()=>{this.scheduleOverflowCheck();this.syncTriggerLabelObserver()}))}if(a||e===undefined||e===a)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.onPropsChange()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.scheduleOverflowCheck()}componentDidRender(){this.scheduleOverflowCheck();this.syncMenuAnchor();if(this.tabsCollapsed){this.updateTriggerLabelTruncation()}}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.syncTriggerLabelObserver(true)}syncHostPropsIfNeeded(){if(f(this.resolvedTabs,this.tabs,this.tabsJson,this.resolvedActions,this.actions,this.actionsJson)){this.onPropsChange()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let e=a.HOST_PROP_SYNC_BUDGET;const t=()=>{this.syncHostPropsIfNeeded();if(--e>0){requestAnimationFrame(t)}};queueMicrotask(t)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>this.scheduleOverflowCheck()));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.overflowCheckScheduled)return;this.overflowCheckScheduled=true;requestAnimationFrame((()=>{this.overflowCheckScheduled=false;this.updateTabsCollapsed();this.updateTriggerLabelTruncation()}))}syncTriggerLabelObserver(a=false){this.triggerLabelObserver?.disconnect();this.triggerLabelObserver=null;if(a||!this.tabsCollapsed||!this.triggerLabelTextEl){return}this.updateTriggerLabelTruncation();if(typeof ResizeObserver==="undefined")return;this.triggerLabelObserver=new ResizeObserver((()=>this.updateTriggerLabelTruncation()));this.triggerLabelObserver.observe(this.triggerLabelTextEl);if(this.triggerEl){this.triggerLabelObserver.observe(this.triggerEl)}}updateTriggerLabelTruncation(){const a=this.triggerLabelTextEl;if(!a||!this.tabsCollapsed){if(this.triggerLabelTruncated){this.triggerLabelTruncated=false}return}const e=a.scrollWidth>a.clientWidth+1;if(e!==this.triggerLabelTruncated){this.triggerLabelTruncated=e}}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const a=getComputedStyle(this.headerEl);const e=parseFloat(a.columnGap||a.gap||"0")||0;const t=this.headerEl.querySelector(".bar-nav__actions");const s=t?.offsetWidth??0;const i=(parseFloat(a.paddingLeft)||0)+(parseFloat(a.paddingRight)||0);const n=this.tabsCollapsed?parseFloat(getComputedStyle(this.headerEl).getPropertyValue("--dimension-space-100").trim())||8:t?e:0;const r=this.headerEl.clientWidth-i-s-n;return Math.max(0,r)}getTabsIntrinsicWidth(){const a=m(this.probeTabGroupEl);return a?.scrollWidth??0}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=a.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.tabsCollapsed=false;this.menuOpen=false}this.intrinsicWidthRetryCount=0;return}const a=this.getTabsIntrinsicWidth();if(a===0){this.scheduleIntrinsicWidthRetry();return}this.intrinsicWidthRetryCount=0;const e=w(a,this.getLeftZoneAvailableWidth(),this.tabsCollapsed);if(e!==this.tabsCollapsed){this.tabsCollapsed=e;if(!e){this.menuOpen=false}}}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.tabsCollapsed)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(a){const e=a.detail;if(e?.value!==undefined){this.selectTab(String(e.value))}this.menuOpen=false}handleMenuClose(){this.menuOpen=false}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=_(this.resolvedTabs,this.effectiveValue)}syncValueFromUrl(){if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:a,hideTabs:e}=u(this.currentUrl,this.basePath,this.resolvedTabs);this.urlDerivedValue=a;this.hideTabsForDetailRoute=e}selectTab(a){this.value=a;this.dsTabChange.emit(a)}focusVisibleSelectedTab(){const a=p(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);a?.focus({preventScroll:true})}handleTabChange(a){this.selectTab(a.detail)}handleActionChange(a,e){const t=e.detail;this.dsActionChange.emit({id:a,selected:t})}toggleTabMenu(){if(this.menuOpen){this.menuOpen=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth=`${this.triggerEl.offsetWidth}px`;this.syncMenuSections()}this.menuOpen=true}handleTriggerKeyDown(a){if(!this.tabsCollapsed)return;if(!this.menuOpen){if(a.key==="ArrowDown"||a.key==="ArrowUp"||a.key==="Enter"||a.key===" "){a.preventDefault();this.toggleTabMenu()}return}if(a.key==="Escape"){a.preventDefault();this.menuOpen=false;this.triggerEl?.focus()}}get tabSurface(){return this.navStyle==="navigation"?"navigation":undefined}render(){const a=this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const e=this.tabSurface;return s(i,{key:"13b64b398235059b130d546361dbc27097275ded"},s("header",{key:"56e988414dd4c89e23acddeae9a13394a3b2bdc7",class:{"bar-nav":true,"bar-nav--navigation":this.navStyle==="navigation","bar-nav--default":this.navStyle==="default","bar-nav--tabs-collapsed":a&&this.tabsCollapsed},style:{viewTransitionName:r},ref:a=>{this.headerEl=a;if(a&&!this.resizeObserver){this.setupOverflowObserver()}}},a&&s("div",{key:"173741870957a08056fbfedb84babde5cab3b3dd",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},s("ds-tab-group-nav",{key:"1a418424651af6c243440b9699c705e1a75065c1",ref:a=>{this.probeTabGroupEl=a??null;if(a){this.intrinsicWidthRetryCount=0;this.scheduleOverflowCheck()}},tabs:this.resolvedTabs,value:this.effectiveValue,background:e})),a&&!this.tabsCollapsed&&s("div",{key:"a5e136099ccfcb93cd8e93705f9027e8e46141cc",class:"bar-nav__left"},s("ds-tab-group-nav",{key:"17ffd6afc7e36cae5bb19debabd5e2d05516320c",class:"bar-nav__tabs-visible",ref:a=>{this.visibleTabGroupEl=a??null},tabs:this.resolvedTabs,value:this.effectiveValue,background:e,onDsChange:a=>this.handleTabChange(a)})),!a&&this.heading&&s("span",{key:"52b92b66145666fefc86bd7ff0369f612999c9d8",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),a&&this.tabsCollapsed&&s("button",{key:"eb1bf713c6419fd5739b1bc7d71ebdd80139e7e6",type:"button",class:{"bar-nav__tab-trigger":true,"bar-nav__tab-trigger--open":this.menuOpen},ref:a=>{this.triggerEl=a},"aria-haspopup":"menu","aria-expanded":this.menuOpen,"aria-label":`${this.activeTabLabel} tabs`,onClick:()=>this.toggleTabMenu(),onKeyDown:a=>this.handleTriggerKeyDown(a)},s("span",{key:"0fe185c52c53d5d0e13d9fb2f09f5623feb58ab3",class:{"bar-nav__tab-trigger-label":true,"bar-nav__tab-trigger-label--dot":this.activeTabHasDot,"bar-nav__tab-trigger-label--truncated":this.triggerLabelTruncated}},s("span",{key:"86119c2e1bb7d2cd0afa9e61249a58c8dbe8f04f",class:{"bar-nav__tab-trigger-label-text":true,"bar-nav__tab-trigger-label-text--truncated":this.triggerLabelTruncated,"text-body-medium-emphasis":true},ref:a=>{const e=a??null;if(e===this.triggerLabelTextEl)return;this.triggerLabelTextEl=e;if(this.tabsCollapsed){this.syncTriggerLabelObserver()}}},this.activeTabLabel),this.activeTabHasDot&&s("ds-badge",{key:"4d7cfa91725934a220ee20de5cacc76a373a208f",class:"bar-nav__tab-trigger-dot",variant:"dot",background:"var(--_bar-nav-bg)",label:"","aria-hidden":"true"})),s("ds-icon",{key:"fc9fcb1da7f81d9a95e893ba93b5f59a25c8d960",name:"ChevronDown",size:"md",color:"inherit",class:"bar-nav__tab-trigger-chevron"})),a&&this.tabsCollapsed&&this.resolvedActions.length>0&&s("div",{key:"5c6168cd82ea04de43800625dcbe63022f7fd843",class:"bar-nav__between","aria-hidden":"true"}),this.resolvedActions.length>0&&s("div",{key:"9a8880270134a4b414d1e5f14bf88e377211426c",class:"bar-nav__actions"},this.resolvedActions.map((a=>s("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:e=>this.handleActionChange(a.id,e)}))))),a&&this.tabsCollapsed&&s("ds-menu",{key:"58db6c45a4aee54d94dd9a6945659b9584cbb203",ref:a=>{this.menuEl=a??null},open:this.menuOpen,sections:_(this.resolvedTabs,this.effectiveValue),side:"bottom",align:"start",onDsSelect:a=>this.handleMenuSelect(a),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return x()}},[2,"ds-bar-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],actions:[16],actionsJson:[1,"actions-json"],heading:[1],navStyle:[513,"nav-style"],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],resolvedActions:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],triggerLabelTruncated:[32]},undefined,{tabs:[{onPropsChange:0}],tabsJson:[{onPropsChange:0}],actions:[{onPropsChange:0}],actionsJson:[{onPropsChange:0}],currentUrl:[{onUrlChange:0}],basePath:[{onUrlChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;C.INTRINSIC_WIDTH_RETRY_MAX=3;function T(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-badge","ds-bar-nav-action","ds-icon","ds-menu","ds-tab-group-nav"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(n(a))){customElements.define(n(a),C)}break;case"ds-badge":if(!customElements.get(n(a))){h()}break;case"ds-bar-nav-action":if(!customElements.get(n(a))){b()}break;case"ds-icon":if(!customElements.get(n(a))){c()}break;case"ds-menu":if(!customElements.get(n(a))){l()}break;case"ds-tab-group-nav":if(!customElements.get(n(a))){v()}break}}))}T();const z=C;const D=T;export{z as DsBarNav,D as defineCustomElement};
 //# sourceMappingURL=ds-bar-nav.js.map

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

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

package/dist/components/ds-tab-group-nav.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-Bzf0naBt.js";const t=o;const a=s;export{t as DsTabGroupNav,a as defineCustomElement};
+import{T as o,d as s}from"./p-D7HuiVTa.js";const t=o;const a=s;export{t as DsTabGroupNav,a as defineCustomElement};
 //# sourceMappingURL=ds-tab-group-nav.js.map

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

@@ -1,2 +1,2 @@
-import{p as r,H as e,c as o,h as a,a as t,t as s}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p-DYP8Y00j.js";const c=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width: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)}.tab.sc-ds-tab-group::after{content:'';position:absolute;inset:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(r,e){this.value=r;this.dsChange.emit(r);if(e?.focus!==false){this.focusTab(r)}}focusTab(r){const e=this.el.querySelector(`[data-tab-id="${r}"]`);e?.focus({preventScroll:true})}onValueChange(r,e){if(e===undefined||r===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;const o=e.getAttribute("data-tab-id");if(o===r)return;const a=this.el.querySelector(`[data-tab-id="${r}"]`);if(a){a.focus({preventScroll:true})}else{e.blur()}}))}findEnabled(r,e){const o=this.selectableTabs;const a=o.length;for(let t=0;t<a;t++){const s=(r+e*(t+1)+a*(t+1))%a;if(!o[s]?.disabled)return s}return r}handleKeyDown(r){const e=this.selectableTabs;if(!e.length)return;const o=e.findIndex((r=>r.id===this.value));const a=this.orientation==="vertical";let t=null;if(!a){if(r.key==="ArrowRight"){t=this.findEnabled(o,1)}else if(r.key==="ArrowLeft"){t=this.findEnabled(o,-1)}}else{if(r.key==="ArrowDown"){t=this.findEnabled(o,1)}else if(r.key==="ArrowUp"){t=this.findEnabled(o,-1)}}if(r.key==="Home"){const r=e.findIndex((r=>!r.disabled));t=r===-1?null:r}else if(r.key==="End"){const r=[...e].reverse().findIndex((r=>!r.disabled));t=r===-1?null:e.length-1-r}if(t!==null){r.preventDefault();const o=e[t];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const e=this.orientation==="vertical";return a(t,{key:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},a("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",role:"tablist",class:{"tab-list":true,"tab-list--vertical":e},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":e?"vertical":undefined},this.tabs.map(((o,t)=>{if(n(o)){return a("div",{key:`divider-${t}`,class:{"tab-divider":true,"tab-divider--vertical":e},"aria-hidden":"true"},a("div",{class:"tab-divider__line"}))}const s=o.id===this.value;return a("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":s,[r]:!!r},"aria-selected":s,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:s?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},a("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[s?"text-body-small-emphasis":"text-body-small"]:true}},o.label,o.dot&&a("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),l)}break;case"ds-badge":if(!customElements.get(s(r))){d()}break}}))}b();const u=l;const g=b;export{u as DsTabGroup,g as defineCustomElement};
+import{p as r,H as e,c as o,h as a,a as t,t as s}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p-DAycHO-h.js";const c=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width: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)}.tab.sc-ds-tab-group::after{content:'';position:absolute;inset:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(r,e){this.value=r;this.dsChange.emit(r);if(e?.focus!==false){this.focusTab(r)}}focusTab(r){const e=this.el.querySelector(`[data-tab-id="${r}"]`);e?.focus({preventScroll:true})}onValueChange(r,e){if(e===undefined||r===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;const o=e.getAttribute("data-tab-id");if(o===r)return;const a=this.el.querySelector(`[data-tab-id="${r}"]`);if(a){a.focus({preventScroll:true})}else{e.blur()}}))}findEnabled(r,e){const o=this.selectableTabs;const a=o.length;for(let t=0;t<a;t++){const s=(r+e*(t+1)+a*(t+1))%a;if(!o[s]?.disabled)return s}return r}handleKeyDown(r){const e=this.selectableTabs;if(!e.length)return;const o=e.findIndex((r=>r.id===this.value));const a=this.orientation==="vertical";let t=null;if(!a){if(r.key==="ArrowRight"){t=this.findEnabled(o,1)}else if(r.key==="ArrowLeft"){t=this.findEnabled(o,-1)}}else{if(r.key==="ArrowDown"){t=this.findEnabled(o,1)}else if(r.key==="ArrowUp"){t=this.findEnabled(o,-1)}}if(r.key==="Home"){const r=e.findIndex((r=>!r.disabled));t=r===-1?null:r}else if(r.key==="End"){const r=[...e].reverse().findIndex((r=>!r.disabled));t=r===-1?null:e.length-1-r}if(t!==null){r.preventDefault();const o=e[t];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const e=this.orientation==="vertical";return a(t,{key:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},a("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",role:"tablist",class:{"tab-list":true,"tab-list--vertical":e},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":e?"vertical":undefined},this.tabs.map(((o,t)=>{if(n(o)){return a("div",{key:`divider-${t}`,class:{"tab-divider":true,"tab-divider--vertical":e},"aria-hidden":"true"},a("div",{class:"tab-divider__line"}))}const s=o.id===this.value;return a("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":s,[r]:!!r},"aria-selected":s,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:s?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},a("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[s?"text-body-small-emphasis":"text-body-small"]:true}},o.label,o.dot&&a("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),l)}break;case"ds-badge":if(!customElements.get(s(r))){d()}break}}))}b();const u=l;const g=b;export{u as DsTabGroup,g as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map

package/dist/components/{p-CujDrEOs.js → p-CiQqF0cR.js}

@@ -1,2 +1,2 @@
-import{p as o,H as n,c as r,h as a,a as e,t}from"./index.js";import{d as i}from"./p-DYP8Y00j.js";import{d as s}from"./p-DqBCQRRd.js";const c=()=>`.action-btn.sc-ds-bar-nav-action{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:var(--dimension-space-075);background:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;color:var(--color-foreground-secondary);box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;transition:color var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot-ring:var(--color-background-secondary)}.action-btn.sc-ds-bar-nav-action::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none}.action-btn.sc-ds-bar-nav-action:hover:not(.inactive)::after{background:var(--_hover-bg);transition:none}.action-btn.sc-ds-bar-nav-action:active:not(.inactive)::after{background:var(--_pressed-bg);transition:none}.action-btn.sc-ds-bar-nav-action:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.action-btn.selected.sc-ds-bar-nav-action{color:var(--color-foreground-primary)}.action-btn.inactive.sc-ds-bar-nav-action{opacity:0.5;cursor:not-allowed;pointer-events:none}.onMedium.sc-ds-bar-nav-action{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.onBold.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral)}.onBold.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onStrong.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral)}.onStrong.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onAlwaysDark.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-secondary);--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background)}.onAlwaysDark.selected.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-primary)}.onNavigation.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot-ring:var(--color-navigation-background)}.onNavigation.selected.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-primary)}.onNavigation.sc-ds-bar-nav-action:focus-visible{outline-color:var(--color-navigation-interaction-focus)}.action-btn__icon-wrap.sc-ds-bar-nav-action{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.action-btn__dot.sc-ds-bar-nav-action{position:absolute;top:0;right:0;pointer-events:none}`;const d=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.icon="";this.selected=false;this.dot=false;this.inactive=false;this.ariaLabel="action";this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.selected)}}render(){const o=this.background;const n={"action-btn":true,selected:this.selected,inactive:this.inactive,onMedium:o==="medium",onBold:o==="bold",onStrong:o==="strong",onAlwaysDark:o==="always-dark",onNavigation:o==="navigation"};return a(e,{key:"57b69eb521518d3b6f704744577eb8a2f03c8c8b"},a("button",{key:"7c143ab8690e9bbcd949606f15b12591d4c64e3a",type:"button",class:n,disabled:this.inactive,"aria-pressed":this.selected,"aria-label":this.ariaLabel,onClick:this.handleClick},a("span",{key:"3c6075a72e121a3841372f55f9753c2f72360dca",class:"action-btn__icon-wrap"},a("ds-icon",{key:"31669d5ef1360da0b6627bdc9d194df46474ad6a",name:this.icon,size:"md",color:"inherit"}),this.dot&&a("ds-badge",{key:"45f275b1db47869c9733fad4b9fd1e5e4875db48",class:"action-btn__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"}))))}get el(){return this}static get style(){return c()}},[2,"ds-bar-nav-action",{icon:[1],selected:[4],dot:[4],inactive:[4],ariaLabel:[1,"aria-label"],background:[1]}]);function l(){if(typeof customElements==="undefined"){return}const o=["ds-bar-nav-action","ds-badge","ds-icon"];o.forEach((o=>{switch(o){case"ds-bar-nav-action":if(!customElements.get(t(o))){customElements.define(t(o),d)}break;case"ds-badge":if(!customElements.get(t(o))){i()}break;case"ds-icon":if(!customElements.get(t(o))){s()}break}}))}l();export{d as B,l as d};
-//# sourceMappingURL=p-CujDrEOs.js.map
+import{p as o,H as n,c as r,h as a,a as e,t}from"./index.js";import{d as i}from"./p-DAycHO-h.js";import{d as s}from"./p-DqBCQRRd.js";const c=()=>`.action-btn.sc-ds-bar-nav-action{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:var(--dimension-space-075);background:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;color:var(--color-foreground-secondary);box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;transition:color var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot-ring:var(--color-background-secondary)}.action-btn.sc-ds-bar-nav-action::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none}.action-btn.sc-ds-bar-nav-action:hover:not(.inactive)::after{background:var(--_hover-bg);transition:none}.action-btn.sc-ds-bar-nav-action:active:not(.inactive)::after{background:var(--_pressed-bg);transition:none}.action-btn.sc-ds-bar-nav-action:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.action-btn.selected.sc-ds-bar-nav-action{color:var(--color-foreground-primary)}.action-btn.inactive.sc-ds-bar-nav-action{opacity:0.5;cursor:not-allowed;pointer-events:none}.onMedium.sc-ds-bar-nav-action{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.onBold.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral)}.onBold.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onStrong.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral)}.onStrong.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onAlwaysDark.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-secondary);--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background)}.onAlwaysDark.selected.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-primary)}.onNavigation.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot-ring:var(--color-navigation-background)}.onNavigation.selected.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-primary)}.onNavigation.sc-ds-bar-nav-action:focus-visible{outline-color:var(--color-navigation-interaction-focus)}.action-btn__icon-wrap.sc-ds-bar-nav-action{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.action-btn__dot.sc-ds-bar-nav-action{position:absolute;top:0;right:0;pointer-events:none}`;const d=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.icon="";this.selected=false;this.dot=false;this.inactive=false;this.ariaLabel="action";this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.selected)}}render(){const o=this.background;const n={"action-btn":true,selected:this.selected,inactive:this.inactive,onMedium:o==="medium",onBold:o==="bold",onStrong:o==="strong",onAlwaysDark:o==="always-dark",onNavigation:o==="navigation"};return a(e,{key:"57b69eb521518d3b6f704744577eb8a2f03c8c8b"},a("button",{key:"7c143ab8690e9bbcd949606f15b12591d4c64e3a",type:"button",class:n,disabled:this.inactive,"aria-pressed":this.selected,"aria-label":this.ariaLabel,onClick:this.handleClick},a("span",{key:"3c6075a72e121a3841372f55f9753c2f72360dca",class:"action-btn__icon-wrap"},a("ds-icon",{key:"31669d5ef1360da0b6627bdc9d194df46474ad6a",name:this.icon,size:"md",color:"inherit"}),this.dot&&a("ds-badge",{key:"45f275b1db47869c9733fad4b9fd1e5e4875db48",class:"action-btn__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"}))))}get el(){return this}static get style(){return c()}},[2,"ds-bar-nav-action",{icon:[1],selected:[4],dot:[4],inactive:[4],ariaLabel:[1,"aria-label"],background:[1]}]);function l(){if(typeof customElements==="undefined"){return}const o=["ds-bar-nav-action","ds-badge","ds-icon"];o.forEach((o=>{switch(o){case"ds-bar-nav-action":if(!customElements.get(t(o))){customElements.define(t(o),d)}break;case"ds-badge":if(!customElements.get(t(o))){i()}break;case"ds-icon":if(!customElements.get(t(o))){s()}break}}))}l();export{d as B,l as d};
+//# sourceMappingURL=p-CiQqF0cR.js.map

package/dist/components/{p-Bzf0naBt.js → p-D7HuiVTa.js}

@@ -1,2 +1,2 @@
-import{p as a,H as r,c as o,h as t,a as e,t as n}from"./index.js";import{g as i,i as s}from"./p-BQq26pt9.js";import{d}from"./p-DYP8Y00j.js";const c=()=>`.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);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-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width: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)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group-nav:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group-nav:disabled,.tab[aria-disabled="true"].sc-ds-tab-group-nav{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.on-navigation.sc-ds-tab-group-nav:focus-visible{outline-color:var(--color-navigation-interaction-focus)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=a(class a extends r{constructor(a){super();if(a!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(a,r){this.value=a;this.dsChange.emit(a);if(r?.focus!==false){this.focusTab(a)}}focusTab(a){const r=this.el.querySelector(`[data-tab-id="${a}"]`);r?.focus({preventScroll:true})}onValueChange(a,r){if(r===undefined||a===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const o=r.getAttribute("data-tab-id");if(o===a)return;const t=this.el.querySelector(`[data-tab-id="${a}"]`);if(t){t.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(a,r){const o=this.selectableTabs;const t=o.length;for(let e=0;e<t;e++){const n=(a+r*(e+1)+t*(e+1))%t;if(!o[n]?.disabled)return n}return a}handleKeyDown(a){const r=this.selectableTabs;if(!r.length)return;const o=r.findIndex((a=>a.id===this.value));const t=this.orientation==="vertical";let e=null;if(!t){if(a.key==="ArrowRight"){e=this.findEnabled(o,1)}else if(a.key==="ArrowLeft"){e=this.findEnabled(o,-1)}}else{if(a.key==="ArrowDown"){e=this.findEnabled(o,1)}else if(a.key==="ArrowUp"){e=this.findEnabled(o,-1)}}if(a.key==="Home"){const a=r.findIndex((a=>!a.disabled));e=a===-1?null:a}else if(a.key==="End"){const a=[...r].reverse().findIndex((a=>!a.disabled));e=a===-1?null:r.length-1-a}if(e!==null){a.preventDefault();const o=r[e];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}render(){const a=this.getBgClass();const r=this.orientation==="vertical";const o=this.background==="navigation";return t(e,{key:"c68d7a69a3c05c7e85e6ab4cf2be6d54351c55c1",class:"tab-group-nav-host"},t("div",{key:"4bf5c4ebc83ca93c0d7da6783f446de04a74854d",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":o},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((o,e)=>{if(s(o)){return t("div",{key:`divider-${e}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},t("div",{class:"tab-divider__line"}))}const n=o.id===this.value;return t("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":n,[a]:!!a},"aria-selected":n,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:n?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},t("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[n?"text-body-medium-emphasis":"text-body-medium"]:true}},o.label,o.dot&&t("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const a=["ds-tab-group-nav","ds-badge"];a.forEach((a=>{switch(a){case"ds-tab-group-nav":if(!customElements.get(n(a))){customElements.define(n(a),l)}break;case"ds-badge":if(!customElements.get(n(a))){d()}break}}))}b();export{l as T,b as d};
-//# sourceMappingURL=p-Bzf0naBt.js.map
+import{p as a,H as r,c as o,h as t,a as e,t as n}from"./index.js";import{g as i,i as s}from"./p-BQq26pt9.js";import{d}from"./p-DAycHO-h.js";const c=()=>`.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);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-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width: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)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group-nav:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group-nav:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group-nav:disabled,.tab[aria-disabled="true"].sc-ds-tab-group-nav{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.on-navigation.sc-ds-tab-group-nav:focus-visible{outline-color:var(--color-navigation-interaction-focus)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=a(class a extends r{constructor(a){super();if(a!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return i(this.tabs)}selectTab(a,r){this.value=a;this.dsChange.emit(a);if(r?.focus!==false){this.focusTab(a)}}focusTab(a){const r=this.el.querySelector(`[data-tab-id="${a}"]`);r?.focus({preventScroll:true})}onValueChange(a,r){if(r===undefined||a===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const o=r.getAttribute("data-tab-id");if(o===a)return;const t=this.el.querySelector(`[data-tab-id="${a}"]`);if(t){t.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(a,r){const o=this.selectableTabs;const t=o.length;for(let e=0;e<t;e++){const n=(a+r*(e+1)+t*(e+1))%t;if(!o[n]?.disabled)return n}return a}handleKeyDown(a){const r=this.selectableTabs;if(!r.length)return;const o=r.findIndex((a=>a.id===this.value));const t=this.orientation==="vertical";let e=null;if(!t){if(a.key==="ArrowRight"){e=this.findEnabled(o,1)}else if(a.key==="ArrowLeft"){e=this.findEnabled(o,-1)}}else{if(a.key==="ArrowDown"){e=this.findEnabled(o,1)}else if(a.key==="ArrowUp"){e=this.findEnabled(o,-1)}}if(a.key==="Home"){const a=r.findIndex((a=>!a.disabled));e=a===-1?null:a}else if(a.key==="End"){const a=[...r].reverse().findIndex((a=>!a.disabled));e=a===-1?null:r.length-1-a}if(e!==null){a.preventDefault();const o=r[e];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}render(){const a=this.getBgClass();const r=this.orientation==="vertical";const o=this.background==="navigation";return t(e,{key:"c68d7a69a3c05c7e85e6ab4cf2be6d54351c55c1",class:"tab-group-nav-host"},t("div",{key:"4bf5c4ebc83ca93c0d7da6783f446de04a74854d",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":o},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((o,e)=>{if(s(o)){return t("div",{key:`divider-${e}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},t("div",{class:"tab-divider__line"}))}const n=o.id===this.value;return t("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":n,[a]:!!a},"aria-selected":n,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:n?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},t("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[n?"text-body-medium-emphasis":"text-body-medium"]:true}},o.label,o.dot&&t("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const a=["ds-tab-group-nav","ds-badge"];a.forEach((a=>{switch(a){case"ds-tab-group-nav":if(!customElements.get(n(a))){customElements.define(n(a),l)}break;case"ds-badge":if(!customElements.get(n(a))){d()}break}}))}b();export{l as T,b as d};
+//# sourceMappingURL=p-D7HuiVTa.js.map

package/dist/components/p-DAycHO-h.js

@@ -0,0 +1,2 @@
+import{p as e,H as n,h as a,a as t,t as r}from"./index.js";import{c as i,b as s}from"./p-CXkDP-ct.js";const d="--_badge-gradient-position";function o(e){const n=e.closest("ds-app-shell");return n?.hasAttribute("gradient")===true}function c(e){const n=e.closest("ds-bar-nav");if(n){const e=n.shadowRoot??n;const a=e.querySelector(".bar-nav");if(a){return{element:a,chromeHost:n,positionVar:i}}}const a=e.closest("ds-panel-nav");if(a){const e=a.shadowRoot??a;const n=e.querySelector(".panel-nav");if(n){return{element:n,chromeHost:a,positionVar:s}}}return null}function g(e){const n=e.trim();if(!n)return{x:0,y:0};const a=n.split(/\s+/);const t=b(a[0]??"0");const r=b(a[1]??"0");return{x:t,y:r}}function b(e){const n=e.match(/^(-?[\d.]+)px$/);if(n)return Number(n[1]);return 0}function l(e,n,a){const t=e.getBoundingClientRect();const r=n.element.getBoundingClientRect();const i=t.left+t.width/2-r.left;const s=t.top+t.height/2-r.top;const{x:d,y:o}=g(a);return`${Math.round(d-i)}px ${Math.round(o-s)}px`}function u(e){const n=getComputedStyle(e.chromeHost);return n.getPropertyValue(e.positionVar).trim()||"0 0"}const h=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half);font-size:var(--typography-fontsize-xs);line-height:1}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--_badge-gradient-position, 0 0);background-repeat:no-repeat;opacity:var(--ds-shell-gradient-opacity, 1)}`;const f={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const m=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&o(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const n=this.el.closest("ds-app-shell");if(n)this.gradientObserver.observe(n);const a=this.el.closest("ds-bar-nav");if(a)this.gradientObserver.observe(a);const t=this.el.closest("ds-panel-nav");if(t)this.gradientObserver.observe(t)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const n={"--_badge-ring":e};if(!this.gradientBackground)return n;const a=c(this.el);if(!a)return n;n[d]=l(this.el,a,u(a));return n}render(){const e=this.variant==="dot";if(!e&&this.count===0)return a(t,{style:{display:"none"}});const n=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const i=this.background??f[this.surface];return a(t,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(i)},a("span",{class:{badge__mark:true,"text-caption-emphasis":!e},"aria-hidden":"true"},!e&&n))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return h()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"on-gradient-background"],isSelected:[4,"is-selected"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function k(){if(typeof customElements==="undefined"){return}const e=["ds-badge"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),m)}break}}))}k();export{m as B,k as d};
+//# sourceMappingURL=p-DAycHO-h.js.map

package/dist/components/p-DAycHO-h.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","findGradientSurface","barHost","root","shadowRoot","element","querySelector","chromeHost","positionVar","SHELL_GRADIENT_POSITION_BAR_VAR","panelHost","SHELL_GRADIENT_POSITION_PANEL_VAR","parseCssBackgroundPosition","value","trimmed","trim","x","y","parts","split","parseLength","token","px","match","Number","badgeGradientPosition","badgeHost","surface","shellPosition","badgeRect","getBoundingClientRect","surfaceRect","anchorX","left","width","anchorY","top","height","Math","round","readShellGradientPosition","styles","getComputedStyle","getPropertyValue","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","gradientBackground","isSelected","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","el","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","ariaLabel","label","background","class","badge","badge__mark"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  const shell = from.closest('ds-app-shell');\n  return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host. */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  const surface = findGradientSurface(badgeHost);\n  if (!surface) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  const shellPosition = readShellGradientPosition(surface);\n  badgeHost.style.setProperty(\n    BADGE_GRADIENT_POSITION_VAR,\n    badgeGradientPosition(badgeHost, surface, shellPosition),\n  );\n}\n",":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0;\n  border-radius: var(--dimension-radius-half);\n  font-size: var(--typography-fontsize-xs);\n  line-height: 1;\n}\n\n:host(.badge--selected) {\n  --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--_badge-gradient-position, 0 0);\n  background-repeat: no-repeat;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  badgeGradientPosition,\n  findGradientSurface,\n  isShellGradientActive,\n  readShellGradientPosition,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"+\". */\n  @Prop() max: number = 9;\n\n  /** Surface context for the ring around dots. */\n  @Prop() surface: BadgeSurface = 'default';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n   * set `on-gradient-background` to opt in/out explicitly.\n   */\n  @Prop({ attribute: 'on-gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n  @Prop() isSelected: boolean = false;\n\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground) return style;\n\n    const surface = findGradientSurface(this.el);\n    if (!surface) return style;\n\n    style[BADGE_GRADIENT_POSITION_VAR] = badgeGradientPosition(\n      this.el,\n      surface,\n      readShellGradientPosition(surface),\n    );\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? '+' : String(this.count);\n    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--selected': this.isSelected,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        aria-label={ariaLabel}\n        style={this.ringHostStyle(ring)}\n      >\n        <span\n          class={{\n            'badge__mark': true,\n            'text-caption-emphasis': !isDot,\n          }}\n          aria-hidden=\"true\"\n        >\n          {!isDot && display}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GACpC,MAAMC,EAAQD,EAAKE,QAAQ,gBAC3B,OAAOD,GAAOE,aAAa,cAAgB,IAC7C,CAGM,SAAUC,EAAoBJ,GAClC,MAAMK,EAAUL,EAAKE,QAAQ,cAC7B,GAAIG,EAAS,CACX,MAAMC,EAAOD,EAAQE,YAAcF,EACnC,MAAMG,EAAUF,EAAKG,cAAc,YACnC,GAAID,EAAS,CACX,MAAO,CACLA,QAASA,EACTE,WAAYL,EACZM,YAAaC,E,EAKnB,MAAMC,EAAYb,EAAKE,QAAQ,gBAC/B,GAAIW,EAAW,CACb,MAAMP,EAAOO,EAAUN,YAAcM,EACrC,MAAML,EAAUF,EAAKG,cAAc,cACnC,GAAID,EAAS,CACX,MAAO,CACLA,QAASA,EACTE,WAAYG,EACZF,YAAaG,E,EAKnB,OAAO,IACT,CAQM,SAAUC,EAA2BC,GACzC,MAAMC,EAAUD,EAAME,OACtB,IAAKD,EAAS,MAAO,CAAEE,EAAG,EAAGC,EAAG,GAEhC,MAAMC,EAAQJ,EAAQK,MAAM,OAC5B,MAAMH,EAAII,EAAYF,EAAM,IAAM,KAClC,MAAMD,EAAIG,EAAYF,EAAM,IAAM,KAClC,MAAO,CAAEF,IAAGC,IACd,CAEA,SAASG,EAAYC,GACnB,MAAMC,EAAKD,EAAME,MAAM,kBACvB,GAAID,EAAI,OAAOE,OAAOF,EAAG,IACzB,OAAO,CACT,C,SAMgBG,EACdC,EACAC,EACAC,GAEA,MAAMC,EAAYH,EAAUI,wBAC5B,MAAMC,EAAcJ,EAAQtB,QAAQyB,wBACpC,MAAME,EAAUH,EAAUI,KAAOJ,EAAUK,MAAQ,EAAIH,EAAYE,KACnE,MAAME,EAAUN,EAAUO,IAAMP,EAAUQ,OAAS,EAAIN,EAAYK,IACnE,MAAMpB,EAAEA,EAACC,EAAEA,GAAML,EAA2BgB,GAE5C,MAAO,GAAGU,KAAKC,MAAMvB,EAAIgB,QAAcM,KAAKC,MAAMtB,EAAIkB,MACxD,CAGM,SAAUK,EAA0Bb,GACxC,MAAMc,EAASC,iBAAiBf,EAAQpB,YACxC,OAAOkC,EAAOE,iBAAiBhB,EAAQnB,aAAaO,QAAU,KAChE,CC/FA,MAAM6B,EAAW,IAAM,8mECoBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAA/B,QAAwB,UAU8B+B,KAAAI,mBAA8B,MAGpFJ,KAAAK,WAAsB,MAMbL,KAAAM,sBAAwB,EAEjCN,KAAAO,iBAA0C,KAC1CP,KAAAQ,uBAA8C,IAkHvD,CAhHC,gBAAAC,GACET,KAAKU,iC,CAGP,oBAAAC,GACEX,KAAKY,wB,CAIP,yBAAAC,GACEb,KAAKc,sB,CAIC,+BAAAJ,GACN,IAAKV,KAAKI,oBAAsBlE,EAAsB8D,KAAKe,IAAK,CAC9Df,KAAKI,mBAAqB,I,CAG5B,GAAIJ,KAAKI,mBAAoB,CAC3BJ,KAAKc,sB,EAID,oBAAAA,GACNd,KAAKY,yBAEL,IAAKZ,KAAKI,mBAAoB,OAE9B,MAAMY,EAAS,KACbhB,KAAKM,uBAAyB,CAAC,EAEjCU,IAEAhB,KAAKQ,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCnB,KAAKO,iBAAmB,IAAIY,eAAeH,GAC3ChB,KAAKO,iBAAiBa,QAAQpB,KAAKe,IAEnC,MAAM3E,EAAQ4D,KAAKe,GAAG1E,QAAQ,gBAC9B,GAAID,EAAO4D,KAAKO,iBAAiBa,QAAQhF,GAEzC,MAAMiF,EAAMrB,KAAKe,GAAG1E,QAAQ,cAC5B,GAAIgF,EAAKrB,KAAKO,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQtB,KAAKe,GAAG1E,QAAQ,gBAC9B,GAAIiF,EAAOtB,KAAKO,iBAAiBa,QAAQE,E,EAIrC,sBAAAV,GACN,GAAIZ,KAAKQ,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUvB,KAAKQ,wBAC1CR,KAAKQ,uBAAyB,I,CAGhCR,KAAKO,kBAAkBiB,aACvBxB,KAAKO,iBAAmB,I,CAGlB,aAAAkB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK1B,KAAKI,mBAAoB,OAAOuB,EAErC,MAAM1D,EAAU1B,EAAoByD,KAAKe,IACzC,IAAK9C,EAAS,OAAO0D,EAErBA,EAAM1F,GAA+B8B,EACnCiC,KAAKe,GACL9C,EACAa,EAA0Bb,IAE5B,OAAO0D,C,CAGT,MAAAC,GACE,MAAMC,EAAQ7B,KAAKC,UAAY,MAE/B,IAAK4B,GAAS7B,KAAKE,QAAU,EAAG,OAAO4B,EAACC,EAAI,CAACJ,MAAO,CAAEK,QAAS,UAE/D,MAAMA,EAAUhC,KAAKE,MAAQF,KAAKG,IAAM,IAAM8B,OAAOjC,KAAKE,OAC1D,MAAMgC,EAAYlC,KAAKmC,QAAUN,EAAQ,eAAiBI,OAAOjC,KAAKE,QACtE,MAAMwB,EAAO1B,KAAKoC,YAAcjD,EAAaa,KAAK/B,SAElD,OACE6D,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmB7B,KAAKK,WACxB,gCAAiCL,KAAKI,oBACvC,aACW8B,EACZP,MAAO3B,KAAKyB,cAAcC,IAE1BI,EAAA,QACEO,MAAO,CACLE,YAAe,KACf,yBAA0BV,GAC3B,cACW,SAEVA,GAASG,G","ignoreList":[]}

package/dist/types/components/Badge/Badge.d.ts

@@ -22,15 +22,18 @@ export declare class Badge {
     isSelected: boolean;
     /** Accessible label. Defaults to the count as a string. */
     label: string | undefined;
+    /** Bumps on resize/layout so render recomputes gradient ring position. */
+    private gradientLayoutVersion;
     private gradientObserver;
     private gradientWindowListener;
     componentDidLoad(): void;
-    /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */
-    private enableShellGradientRingIfNeeded;
     disconnectedCallback(): void;
     gradientBackgroundChanged(): void;
+    /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */
+    private enableShellGradientRingIfNeeded;
     private bindGradientRingSync;
     private unbindGradientRingSync;
+    private ringHostStyle;
     render(): any;
 }
 //# sourceMappingURL=Badge.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/src/wc/components/Badge/Badge.tsx

@@ -1,8 +1,10 @@
-import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
+import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';
 import {
   BADGE_GRADIENT_POSITION_VAR,
+  badgeGradientPosition,
+  findGradientSurface,
   isShellGradientActive,
-  syncBadgeGradientPosition,
+  readShellGradientPosition,
 } from '../../nav/badge-gradient-ring';
 
 export type BadgeVariant = 'counter' | 'dot';
@@ -63,6 +65,9 @@ export class Badge {
   /** Accessible label. Defaults to the count as a string. */
   @Prop() label: string | undefined;
 
+  /** Bumps on resize/layout so render recomputes gradient ring position. */
+  @State() private gradientLayoutVersion = 0;
+
   private gradientObserver: ResizeObserver | null = null;
   private gradientWindowListener: (() => void) | null = null;
 
@@ -70,19 +75,8 @@ export class Badge {
     this.enableShellGradientRingIfNeeded();
   }
 
-  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */
-  private enableShellGradientRingIfNeeded() {
-    if (!this.gradientBackground && isShellGradientActive(this.el)) {
-      this.gradientBackground = true;
-      return;
-    }
-
-    this.bindGradientRingSync();
-  }
-
   disconnectedCallback() {
     this.unbindGradientRingSync();
-    this.el.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);
   }
 
   @Watch('gradientBackground')
@@ -90,12 +84,25 @@ export class Badge {
     this.bindGradientRingSync();
   }
 
+  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */
+  private enableShellGradientRingIfNeeded() {
+    if (!this.gradientBackground && isShellGradientActive(this.el)) {
+      this.gradientBackground = true;
+    }
+
+    if (this.gradientBackground) {
+      this.bindGradientRingSync();
+    }
+  }
+
   private bindGradientRingSync() {
     this.unbindGradientRingSync();
 
     if (!this.gradientBackground) return;
 
-    const update = () => syncBadgeGradientPosition(this.el);
+    const update = () => {
+      this.gradientLayoutVersion += 1;
+    };
     update();
 
     this.gradientWindowListener = update;
@@ -126,6 +133,23 @@ export class Badge {
     this.gradientObserver = null;
   }
 
+  private ringHostStyle(ring: string): Record<string, string> {
+    void this.gradientLayoutVersion;
+
+    const style: Record<string, string> = { '--_badge-ring': ring };
+    if (!this.gradientBackground) return style;
+
+    const surface = findGradientSurface(this.el);
+    if (!surface) return style;
+
+    style[BADGE_GRADIENT_POSITION_VAR] = badgeGradientPosition(
+      this.el,
+      surface,
+      readShellGradientPosition(surface),
+    );
+    return style;
+  }
+
   render() {
     const isDot = this.variant === 'dot';
 
@@ -145,7 +169,7 @@ export class Badge {
           'badge--on-gradient-background': this.gradientBackground,
         }}
         aria-label={ariaLabel}
-        style={{ '--_badge-ring': ring }}
+        style={this.ringHostStyle(ring)}
       >
         <span
           class={{

package/src/wc/nav/badge-gradient-ring.ts

@@ -20,24 +20,26 @@ export function isShellGradientActive(from: HTMLElement): boolean {
 
 /** Bar or panel chrome surface that owns the shell gradient stack. */
 export function findGradientSurface(from: HTMLElement): GradientSurface | null {
-  const barHost = from.closest('ds-bar-nav');
-  if (barHost instanceof HTMLElement && barHost.shadowRoot) {
-    const element = barHost.shadowRoot.querySelector('.bar-nav');
-    if (element instanceof HTMLElement) {
+  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;
+  if (barHost) {
+    const root = barHost.shadowRoot ?? barHost;
+    const element = root.querySelector('.bar-nav');
+    if (element) {
       return {
-        element,
+        element: element as HTMLElement,
         chromeHost: barHost,
         positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,
       };
     }
   }
 
-  const panelHost = from.closest('ds-panel-nav');
-  if (panelHost instanceof HTMLElement && panelHost.shadowRoot) {
-    const element = panelHost.shadowRoot.querySelector('.panel-nav');
-    if (element instanceof HTMLElement) {
+  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;
+  if (panelHost) {
+    const root = panelHost.shadowRoot ?? panelHost;
+    const element = root.querySelector('.panel-nav');
+    if (element) {
       return {
-        element,
+        element: element as HTMLElement,
         chromeHost: panelHost,
         positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,
       };

package/dist/components/p-DYP8Y00j.js

@@ -1,2 +0,0 @@
-import{p as e,H as n,h as a,a as t,t as r}from"./index.js";import{c as i,b as s}from"./p-CXkDP-ct.js";const d="--_badge-gradient-position";function o(e){const n=e.closest("ds-app-shell");return n?.hasAttribute("gradient")===true}function c(e){const n=e.closest("ds-bar-nav");if(n instanceof HTMLElement&&n.shadowRoot){const e=n.shadowRoot.querySelector(".bar-nav");if(e instanceof HTMLElement){return{element:e,chromeHost:n,positionVar:i}}}const a=e.closest("ds-panel-nav");if(a instanceof HTMLElement&&a.shadowRoot){const e=a.shadowRoot.querySelector(".panel-nav");if(e instanceof HTMLElement){return{element:e,chromeHost:a,positionVar:s}}}return null}function g(e){const n=e.trim();if(!n)return{x:0,y:0};const a=n.split(/\s+/);const t=b(a[0]??"0");const r=b(a[1]??"0");return{x:t,y:r}}function b(e){const n=e.match(/^(-?[\d.]+)px$/);if(n)return Number(n[1]);return 0}function l(e,n,a){const t=e.getBoundingClientRect();const r=n.element.getBoundingClientRect();const i=t.left+t.width/2-r.left;const s=t.top+t.height/2-r.top;const{x:d,y:o}=g(a);return`${Math.round(d-i)}px ${Math.round(o-s)}px`}function u(e){const n=getComputedStyle(e.chromeHost);return n.getPropertyValue(e.positionVar).trim()||"0 0"}function h(e){const n=c(e);if(!n){e.style.removeProperty(d);return}const a=u(n);e.style.setProperty(d,l(e,n,a))}const f=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half);font-size:var(--typography-fontsize-xs);line-height:1}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--_badge-gradient-position, 0 0);background-repeat:no-repeat;opacity:var(--ds-shell-gradient-opacity, 1)}`;const m={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const k=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&o(this.el)){this.gradientBackground=true;return}this.bindGradientRingSync()}disconnectedCallback(){this.unbindGradientRingSync();this.el.style.removeProperty(d)}gradientBackgroundChanged(){this.bindGradientRingSync()}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>h(this.el);e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const n=this.el.closest("ds-app-shell");if(n)this.gradientObserver.observe(n);const a=this.el.closest("ds-bar-nav");if(a)this.gradientObserver.observe(a);const t=this.el.closest("ds-panel-nav");if(t)this.gradientObserver.observe(t)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}render(){const e=this.variant==="dot";if(!e&&this.count===0)return a(t,{style:{display:"none"}});const n=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const i=this.background??m[this.surface];return a(t,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:{"--_badge-ring":i}},a("span",{class:{badge__mark:true,"text-caption-emphasis":!e},"aria-hidden":"true"},!e&&n))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return f()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"on-gradient-background"],isSelected:[4,"is-selected"],label:[1]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-badge"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),k)}break}}))}p();export{k as B,p as d};
-//# sourceMappingURL=p-DYP8Y00j.js.map

package/dist/components/p-DYP8Y00j.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","findGradientSurface","barHost","HTMLElement","shadowRoot","element","querySelector","chromeHost","positionVar","SHELL_GRADIENT_POSITION_BAR_VAR","panelHost","SHELL_GRADIENT_POSITION_PANEL_VAR","parseCssBackgroundPosition","value","trimmed","trim","x","y","parts","split","parseLength","token","px","match","Number","badgeGradientPosition","badgeHost","surface","shellPosition","badgeRect","getBoundingClientRect","surfaceRect","anchorX","left","width","anchorY","top","height","Math","round","readShellGradientPosition","styles","getComputedStyle","getPropertyValue","syncBadgeGradientPosition","style","removeProperty","setProperty","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","constructor","registerHost","this","variant","count","max","gradientBackground","isSelected","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","el","bindGradientRingSync","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","render","isDot","h","Host","display","String","ariaLabel","label","ring","background","class","badge","badge__mark"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  const shell = from.closest('ds-app-shell');\n  return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav');\n  if (barHost instanceof HTMLElement && barHost.shadowRoot) {\n    const element = barHost.shadowRoot.querySelector('.bar-nav');\n    if (element instanceof HTMLElement) {\n      return {\n        element,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav');\n  if (panelHost instanceof HTMLElement && panelHost.shadowRoot) {\n    const element = panelHost.shadowRoot.querySelector('.panel-nav');\n    if (element instanceof HTMLElement) {\n      return {\n        element,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host. */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  const surface = findGradientSurface(badgeHost);\n  if (!surface) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  const shellPosition = readShellGradientPosition(surface);\n  badgeHost.style.setProperty(\n    BADGE_GRADIENT_POSITION_VAR,\n    badgeGradientPosition(badgeHost, surface, shellPosition),\n  );\n}\n",":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0;\n  border-radius: var(--dimension-radius-half);\n  font-size: var(--typography-fontsize-xs);\n  line-height: 1;\n}\n\n:host(.badge--selected) {\n  --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--_badge-gradient-position, 0 0);\n  background-repeat: no-repeat;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n  syncBadgeGradientPosition,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"+\". */\n  @Prop() max: number = 9;\n\n  /** Surface context for the ring around dots. */\n  @Prop() surface: BadgeSurface = 'default';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n   * set `on-gradient-background` to opt in/out explicitly.\n   */\n  @Prop({ attribute: 'on-gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n  @Prop() isSelected: boolean = false;\n\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n      return;\n    }\n\n    this.bindGradientRingSync();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n    this.el.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => syncBadgeGradientPosition(this.el);\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? '+' : String(this.count);\n    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--selected': this.isSelected,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        aria-label={ariaLabel}\n        style={{ '--_badge-ring': ring }}\n      >\n        <span\n          class={{\n            'badge__mark': true,\n            'text-caption-emphasis': !isDot,\n          }}\n          aria-hidden=\"true\"\n        >\n          {!isDot && display}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GACpC,MAAMC,EAAQD,EAAKE,QAAQ,gBAC3B,OAAOD,GAAOE,aAAa,cAAgB,IAC7C,CAGM,SAAUC,EAAoBJ,GAClC,MAAMK,EAAUL,EAAKE,QAAQ,cAC7B,GAAIG,aAAmBC,aAAeD,EAAQE,WAAY,CACxD,MAAMC,EAAUH,EAAQE,WAAWE,cAAc,YACjD,GAAID,aAAmBF,YAAa,CAClC,MAAO,CACLE,UACAE,WAAYL,EACZM,YAAaC,E,EAKnB,MAAMC,EAAYb,EAAKE,QAAQ,gBAC/B,GAAIW,aAAqBP,aAAeO,EAAUN,WAAY,CAC5D,MAAMC,EAAUK,EAAUN,WAAWE,cAAc,cACnD,GAAID,aAAmBF,YAAa,CAClC,MAAO,CACLE,UACAE,WAAYG,EACZF,YAAaG,E,EAKnB,OAAO,IACT,CAQM,SAAUC,EAA2BC,GACzC,MAAMC,EAAUD,EAAME,OACtB,IAAKD,EAAS,MAAO,CAAEE,EAAG,EAAGC,EAAG,GAEhC,MAAMC,EAAQJ,EAAQK,MAAM,OAC5B,MAAMH,EAAII,EAAYF,EAAM,IAAM,KAClC,MAAMD,EAAIG,EAAYF,EAAM,IAAM,KAClC,MAAO,CAAEF,IAAGC,IACd,CAEA,SAASG,EAAYC,GACnB,MAAMC,EAAKD,EAAME,MAAM,kBACvB,GAAID,EAAI,OAAOE,OAAOF,EAAG,IACzB,OAAO,CACT,C,SAMgBG,EACdC,EACAC,EACAC,GAEA,MAAMC,EAAYH,EAAUI,wBAC5B,MAAMC,EAAcJ,EAAQtB,QAAQyB,wBACpC,MAAME,EAAUH,EAAUI,KAAOJ,EAAUK,MAAQ,EAAIH,EAAYE,KACnE,MAAME,EAAUN,EAAUO,IAAMP,EAAUQ,OAAS,EAAIN,EAAYK,IACnE,MAAMpB,EAAEA,EAACC,EAAEA,GAAML,EAA2BgB,GAE5C,MAAO,GAAGU,KAAKC,MAAMvB,EAAIgB,QAAcM,KAAKC,MAAMtB,EAAIkB,MACxD,CAGM,SAAUK,EAA0Bb,GACxC,MAAMc,EAASC,iBAAiBf,EAAQpB,YACxC,OAAOkC,EAAOE,iBAAiBhB,EAAQnB,aAAaO,QAAU,KAChE,CAGM,SAAU6B,EAA0BlB,GACxC,MAAMC,EAAU1B,EAAoByB,GACpC,IAAKC,EAAS,CACZD,EAAUmB,MAAMC,eAAenD,GAC/B,M,CAGF,MAAMiC,EAAgBY,EAA0Bb,GAChDD,EAAUmB,MAAME,YACdpD,EACA8B,EAAsBC,EAAWC,EAASC,GAE9C,CC5GA,MAAMoB,EAAW,IAAM,8mECkBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAtD,EALlB,WAAAwD,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAlC,QAAwB,UAU8BkC,KAAAI,mBAA8B,MAGpFJ,KAAAK,WAAsB,MAKtBL,KAAAM,iBAA0C,KAC1CN,KAAAO,uBAA8C,IA+FvD,CA7FC,gBAAAC,GACER,KAAKS,iC,CAIC,+BAAAA,GACN,IAAKT,KAAKI,oBAAsBrE,EAAsBiE,KAAKU,IAAK,CAC9DV,KAAKI,mBAAqB,KAC1B,M,CAGFJ,KAAKW,sB,CAGP,oBAAAC,GACEZ,KAAKa,yBACLb,KAAKU,GAAG1B,MAAMC,eAAenD,E,CAI/B,yBAAAgF,GACEd,KAAKW,sB,CAGC,oBAAAA,GACNX,KAAKa,yBAEL,IAAKb,KAAKI,mBAAoB,OAE9B,MAAMW,EAAS,IAAMhC,EAA0BiB,KAAKU,IACpDK,IAEAf,KAAKO,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzClB,KAAKM,iBAAmB,IAAIY,eAAeH,GAC3Cf,KAAKM,iBAAiBa,QAAQnB,KAAKU,IAEnC,MAAMzE,EAAQ+D,KAAKU,GAAGxE,QAAQ,gBAC9B,GAAID,EAAO+D,KAAKM,iBAAiBa,QAAQlF,GAEzC,MAAMmF,EAAMpB,KAAKU,GAAGxE,QAAQ,cAC5B,GAAIkF,EAAKpB,KAAKM,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQrB,KAAKU,GAAGxE,QAAQ,gBAC9B,GAAImF,EAAOrB,KAAKM,iBAAiBa,QAAQE,E,EAIrC,sBAAAR,GACN,GAAIb,KAAKO,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUtB,KAAKO,wBAC1CP,KAAKO,uBAAyB,I,CAGhCP,KAAKM,kBAAkBiB,aACvBvB,KAAKM,iBAAmB,I,CAG1B,MAAAkB,GACE,MAAMC,EAAQzB,KAAKC,UAAY,MAE/B,IAAKwB,GAASzB,KAAKE,QAAU,EAAG,OAAOwB,EAACC,EAAI,CAAC3C,MAAO,CAAE4C,QAAS,UAE/D,MAAMA,EAAU5B,KAAKE,MAAQF,KAAKG,IAAM,IAAM0B,OAAO7B,KAAKE,OAC1D,MAAM4B,EAAY9B,KAAK+B,QAAUN,EAAQ,eAAiBI,OAAO7B,KAAKE,QACtE,MAAM8B,EAAOhC,KAAKiC,YAAc7C,EAAaY,KAAKlC,SAElD,OACE4D,EAACC,EAAI,CACHO,MAAO,CACLC,MAAO,KACP,kBAAmBV,EACnB,aAAcA,EACd,kBAAmBzB,KAAKK,WACxB,gCAAiCL,KAAKI,oBACvC,aACW0B,EACZ9C,MAAO,CAAE,gBAAiBgD,IAE1BN,EAAA,QACEQ,MAAO,CACLE,YAAe,KACf,yBAA0BX,GAC3B,cACW,SAEVA,GAASG,G","ignoreList":[]}