@ds-mo/ui 2.10.4 → 2.11.1

package/dist/.build-stamp

@@ -1 +1 @@
-1783542984412
+1783564915141

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

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as t,a as n,t as i}from"./index.js";import{D as a,r as l,d as o,e as r,f as h,g as c,h as p,s as d,i as f,j as u,b,k as g}from"./p-Bz3jyrDV.js";import{C as v,c as m,r as y,a as _,b as x}from"./p-BiM6QBTF.js";const w={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function k(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function P(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function S(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function z(e){if(!k(e))return null;const s=S(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=w[s];if(t)return`open-tool:${t}`;return null}function C(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function j(e){return{expandedPx:C(e,"--_nav-width"),collapsedPx:C(e,"--_nav-width-collapsed")}}function V(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function B(e,s){return s?e.collapsedPx:e.expandedPx}const D=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools'     'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const L=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.gradientSrc="";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new v;this.chromeSyncCoalescer=m((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(y(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=l();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(y(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(_,this.onChromeTransitionStart);this.el.addEventListener(x,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(_,this.onChromeTransitionStart);this.el.removeEventListener(x,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=j(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[o,r,h];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(c,t)}if(s){s.style.setProperty(p,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=V(e,s);return B(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=V(e,s);return B(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return l()}chromeLayerActive(){return this.gradient}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(P(e.target))return;const s=z(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(c);if(s)s.style.removeProperty(p)};if(!this.gradient){this.clearGradientPaintVars(t);n();return}const i=this.resolveViewportDimensions();const a=this.resolvePanelWidthPx(e);const l=d();const v=f(a);this.syncChromeLayoutVars(e,s,l,v);const m=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:u(this.gradientPreset);const y=g({width:i.width,height:i.height});const _=b;for(const e of t){if(e===this.el){this.applyGradientVars(e,{[o]:m,[r]:y,[c]:l,[p]:v,[h]:_});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[o]:m,[r]:y,[h]:_,[c]:s?null:l,[p]:s?v:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":this.gradient,[`app-shell--${this.navStyle}`]:true};return t(n,{key:"454767764d08d86cefa06b69faf524198afc7ce6",class:s},t("div",{key:"9d44be4d3db9bbd995c923aa45a1ffc4520b6689",class:"app-shell__row"},e?t("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,t("div",{key:"d60e7a9f777c7c5f916ce3fcf61546338012201a",class:"app-shell__panel"},t("slot",{key:"7f756321cb08fb587e5eb4f5f32c24bf91e3d8ee",name:"panel"})),t("div",{key:"12e451bb9b9984e6a25d80267acb31683e48ea25",class:"app-shell__main"},t("div",{key:"e6096c1d462749e6bc43610ffc643a61731e8925",class:"app-shell__bar"},t("slot",{key:"cb4ba5296adc1d76d241cff67df1470d01dadb58",name:"bar"})),t("div",{key:"2d8a39e719c554c1094a7dc34a0c4f0528c3beca",class:"app-shell__tools"},t("slot",{key:"b7d65d9129b19bcebc18ae56e07343300caaf347",name:"tools"})),t("div",{key:"f12fe1a7535e4444248a11c097543be9a2c7570a",class:"app-shell__content"},t("slot",{key:"7cc1671aae11ec97c92a33644ffb452ae4ac71ea"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return D()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradient:[516],gradientSrc:[1,"gradient-src"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function E(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(i(e))){customElements.define(i(e),L)}break}}))}E();const W=L;const O=E;export{W as DsAppShell,O as defineCustomElement};
+import{p as e,H as s,h as t,a as n,t as i}from"./index.js";import{D as a,r as l,d as o,e as r,f as h,g as c,h as p,s as d,i as f,j as u,b,k as g}from"./p-Bz3jyrDV.js";import{C as v,c as m,r as y,a as _,b as x}from"./p-BiM6QBTF.js";const w={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function k(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function P(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function S(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function z(e){if(!k(e))return null;const s=S(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=w[s];if(t)return`open-tool:${t}`;return null}function C(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function j(e){return{expandedPx:C(e,"--_nav-width"),collapsedPx:C(e,"--_nav-width-collapsed")}}function V(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function B(e,s){return s?e.collapsedPx:e.expandedPx}const D=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools'     'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const L=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.gradientSrc="";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new v;this.chromeSyncCoalescer=m((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(y(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=l();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(y(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(_,this.onChromeTransitionStart);this.el.addEventListener(x,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(_,this.onChromeTransitionStart);this.el.removeEventListener(x,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=j(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[o,r,h];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(c,t)}if(s){s.style.setProperty(p,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=V(e,s);return B(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=V(e,s);return B(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return l()}chromeLayerActive(){return this.gradient}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(P(e.target))return;const s=z(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(c);if(s)s.style.removeProperty(p)};if(!this.gradient){this.clearGradientPaintVars(t);n();return}const i=this.resolveViewportDimensions();const a=this.resolvePanelWidthPx(e);const l=d();const v=f(a);this.syncChromeLayoutVars(e,s,l,v);const m=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:u(this.gradientPreset);const y=g({width:i.width,height:i.height});const _=b;for(const e of t){if(e===this.el){this.applyGradientVars(e,{[o]:m,[r]:y,[c]:l,[p]:v,[h]:_});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[o]:m,[r]:y,[h]:_,[c]:s?null:l,[p]:s?v:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":this.gradient,[`app-shell--${this.navStyle}`]:true};return t(n,{key:"b6e514d9f2aeab91543f60bb6c3c2b1e7e901453",class:s},t("div",{key:"edef1f9baa83cb2a9ee9cd73c65330eeb49c9bf7",class:"app-shell__row"},e?t("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,t("div",{key:"fb31c3638d1ef9d3d7a5a49668432baee63348a4",class:"app-shell__panel"},t("slot",{key:"4cfd3ecbc428fdf681787fb1b627f4d089325c06",name:"panel"})),t("div",{key:"ec570587ad5ac3e4406c5a58c412d9f2f3a351b5",class:"app-shell__main"},t("div",{key:"d0b9bf82080f3230e8853daf7c276bdf2ea18050",class:"app-shell__bar"},t("slot",{key:"d091f4c45b34403cf6788acf43b2d8735972bea8",name:"bar"})),t("div",{key:"f8656ae56aef93503046311a4a60dc98cdd5afe5",class:"app-shell__tools"},t("slot",{key:"cdba054b8d6c348192defc28e5f0a46df203b300",name:"tools"})),t("div",{key:"e339b7fb00988b77de9e55319d779cbe4dae33ce",class:"app-shell__content"},t("slot",{key:"847e317e814b2a2d687ce7f71db543ca3d6a58b7"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return D()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradient:[516],gradientSrc:[1,"gradient-src"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function E(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(i(e))){customElements.define(i(e),L)}break}}))}E();const W=L;const O=E;export{W as DsAppShell,O as defineCustomElement};
 //# sourceMappingURL=ds-app-shell.js.map

package/dist/components/ds-banner.js

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

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

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

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

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-DFAxTEe4.js";const t=o;const p=s;export{t as DsButtonFilled,p as defineCustomElement};
+import{B as o,d as s}from"./p-BMQbEIrQ.js";const r=o;const t=s;export{r as DsButtonFilled,t as defineCustomElement};
 //# sourceMappingURL=ds-button-filled.js.map

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

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

package/dist/components/ds-card-data-viz.d.ts

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

package/dist/components/ds-card-data-viz.js

@@ -0,0 +1,2 @@
+import{p as a,H as d,h as e,a as i,t as s}from"./index.js";import{d as r}from"./p-DOU4cbpc.js";const t=()=>`.sc-ds-card-data-viz-h{display:block;box-sizing:border-box;width:var(--_card-data-viz-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card-data-viz__header.sc-ds-card-data-viz{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-data-viz__title-wrap.sc-ds-card-data-viz{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-data-viz__title.sc-ds-card-data-viz{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card-data-viz__body.sc-ds-card-data-viz{display:flex;flex-direction:column;gap:var(--dimension-space-200);min-height:var(--dimension-card-width-sm);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card-data-viz__chart-region.sc-ds-card-data-viz{display:flex;justify-content:center;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400)}.card-data-viz__legend-region.sc-ds-card-data-viz{padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100)}`;const c={xs:"var(--dimension-card-width-xs)",sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n=a(class a extends d{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md";this.hasChartSlot=false;this.hasLegendSlot=false}componentWillRender(){this.hasChartSlot=!!this.el.querySelector(':scope > [slot="chart"]');this.hasLegendSlot=!!this.el.querySelector(':scope > [slot="legend"]')}render(){return e(i,{key:"02e9e594d4fc518e57919d337abf2556dd46aece",class:"card-data-viz",style:{"--_card-data-viz-width":c[this.cardWidth]}},e("header",{key:"7dca7e07f84ba9e2db3ef9844023f2ed95579df8",class:"card-data-viz__header"},e("div",{key:"3313cba7c0a3f61a0eaa1783447ee085e3044a1c",class:"card-data-viz__title-wrap"},e("ds-text",{key:"b0f60df9b266b8b2cac3a251aac24d760c5fccac",class:"card-data-viz__title",variant:"text-title-small",color:"primary",as:"h2"},this.heading))),e("div",{key:"fc3e3a9af00d0f5dc464a914a959b18921400b85",class:"card-data-viz__body"},this.hasChartSlot&&e("div",{key:"5e200c314d92f4d7e73bb790717469151ac949a0",class:"card-data-viz__chart-region"},e("slot",{key:"1d5d010ffbbbfdb9cc2a01ca48b2f28720d201bf",name:"chart"})),this.hasLegendSlot&&e("div",{key:"7e9ef114d2ac528a03396343c1f9089790ebce88",class:"card-data-viz__legend-region"},e("slot",{key:"0b3dd934c157faec7202621cb20ef737d14c651c",name:"legend"}))))}get el(){return this}static get style(){return t()}},[262,"ds-card-data-viz",{heading:[1],cardWidth:[1,"card-width"],hasChartSlot:[32],hasLegendSlot:[32]}]);function o(){if(typeof customElements==="undefined"){return}const a=["ds-card-data-viz","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz":if(!customElements.get(s(a))){customElements.define(s(a),n)}break;case"ds-text":if(!customElements.get(s(a))){r()}break}}))}o();const l=n;const v=o;export{l as DsCardDataViz,v as defineCustomElement};
+//# sourceMappingURL=ds-card-data-viz.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardDataVizCss","CARD_WIDTH_VARS","xs","sm","md","lg","CardDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","hasChartSlot","hasLegendSlot","componentWillRender","el","querySelector","render","h","Host","key","class","style","variant","color","as","heading","name"],"sources":["src/wc/components/CardDataViz/CardDataViz.css?tag=ds-card-data-viz&encapsulation=scoped","src/wc/components/CardDataViz/CardDataViz.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  max-width: 100%;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n  overflow: hidden;\n}\n\n.card-data-viz__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n.card-data-viz__title-wrap {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__title {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  padding: var(--dimension-space-025);\n}\n\n.card-data-viz__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200);\n  min-height: var(--dimension-card-width-sm);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n/*\n * Chart and legend regions carry their own padding (instead of one flat body padding) so the\n * 16px gap between them comes from the body's own `gap`, not doubled-up padding at their\n * shared edge — each region's padding is 0 on the side that touches the other region.\n */\n.card-data-viz__chart-region {\n  display: flex;\n  justify-content: center;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n}\n\n/* 8px here + the legend item's own 6px padding + the legend text's own 2px padding = 16px total. */\n.card-data-viz__legend-region {\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n","import { Component, Element, State, h, Host, Prop } from '@stencil/core';\n\nexport type CardDataVizWidth = 'xs' | 'sm' | 'md' | 'lg';\n\nconst CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {\n  xs: 'var(--dimension-card-width-xs)',\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\n/**\n * Copied from CardSetting as a starting scaffold — header edit affordance removed for now\n * (data-viz widgets don't have an obvious \"edit\" action the way settings fields do); revisit\n * once the data-viz card's real header actions (menu, caption, footer stat) are designed.\n */\n@Component({\n  tag: 'ds-card-data-viz',\n  styleUrl: 'CardDataViz.css',\n  scoped: true,\n})\nexport class CardDataViz {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token. */\n  @Prop() cardWidth: CardDataVizWidth = 'md';\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector(':scope > [slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector(':scope > [slot=\"legend\"]');\n  }\n\n  render() {\n    return (\n      <Host class=\"card-data-viz\" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>\n        <header class=\"card-data-viz__header\">\n          <div class=\"card-data-viz__title-wrap\">\n            <ds-text class=\"card-data-viz__title\" variant=\"text-title-small\" color=\"primary\" as=\"h2\">\n              {this.heading}\n            </ds-text>\n          </div>\n        </header>\n        <div class=\"card-data-viz__body\">\n          {this.hasChartSlot && (\n            <div class=\"card-data-viz__chart-region\">\n              <slot name=\"chart\" />\n            </div>\n          )}\n          {this.hasLegendSlot && (\n            <div class=\"card-data-viz__legend-region\">\n              <slot name=\"legend\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAiB,IAAM,6kDCI7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kC,MAaOC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,4CAYUC,KAAAC,UAA8B,KAKrBD,KAAAE,aAAe,MACfF,KAAAG,cAAgB,KAgClC,CA9BC,mBAAAC,GACEJ,KAAKE,eAAiBF,KAAKK,GAAGC,cAAc,2BAC5CN,KAAKG,gBAAkBH,KAAKK,GAAGC,cAAc,2B,CAG/C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,MAAO,CAAE,yBAA0BtB,EAAgBU,KAAKC,aAClFO,EAAA,UAAAE,IAAA,2CAAQC,MAAM,yBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACTH,EAAA,WAAAE,IAAA,2CAASC,MAAM,uBAAuBE,QAAQ,mBAAmBC,MAAM,UAAUC,GAAG,MACjFf,KAAKgB,WAIZR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACRX,KAAKE,cACJM,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,WAGdjB,KAAKG,eACJK,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gCACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,a","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as t,H as s,c as e,h as i,a as d,t as a}from"./index.js";import{d as r}from"./p-EK1hOP19.js";import{d as n}from"./p-DFAxTEe4.js";import{d as o}from"./p-Ba1QXRnN.js";import{d as c}from"./p-BdP53fjF.js";import{d as l}from"./p-BGZjpSXm.js";const b=()=>`.sc-ds-card-setting-h{display:block;box-sizing:border-box;width:var(--_card-setting-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}.card-setting__title-wrap.sc-ds-card-setting{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__title.sc-ds-card-setting{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{min-height:var(--dimension-card-width-sm);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const g={xs:"var(--dimension-card-width-xs)",sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const m="var(--color-foreground-faint-brand)";const f=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsEditingChange=e(this,"dsEditingChange");this.cardWidth="md";this.editing=false;this.enterEdit=()=>{this.dsEditingChange.emit(true)};this.exitEdit=()=>{this.dsEditingChange.emit(false)}}render(){const t=this.editing;return i(d,{key:"4f94c23d7ebe0a936caa0aff515a1b1c54677d5a",class:{"card-setting":true,"card-setting--editing":t},style:{"--_card-setting-width":g[this.cardWidth]}},i("header",{key:"75057ed730217be99d410625cadfab6c318d927e",class:"card-setting__header"},i("div",{key:"7481228dc7c1a51b550104d03b568da9a227d82a",class:"card-setting__title-wrap"},i("ds-text",{key:"414ce78aa091876baffa7ee225f664c3c942e943",class:"card-setting__title",variant:"text-title-small",color:t?m:"primary",as:"h2"},this.heading)),!t?i("ds-button-unfilled-icon",{type:"button",icon:"Pencil","aria-label":"Edit",onDsClick:this.enterEdit}):i("div",{class:"card-setting__actions"},i("ds-button-unfilled-icon",{type:"button",icon:"Cross",backgroundContrast:"bold","has-border":true,"aria-label":"Cancel",onDsClick:this.exitEdit}),i("ds-button-filled",{type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":"Save",onDsClick:this.exitEdit}))),i("div",{key:"74a6b2ef67b41eecffbbf40181f0374fb7f68b0d",class:"card-setting__body"},i("slot",{key:"172c22dcca24fa0bdaef3407266694b933002b71"})))}static get style(){return b()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled-icon","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-card-setting":if(!customElements.get(a(t))){customElements.define(a(t),f)}break;case"ds-badge":if(!customElements.get(a(t))){r()}break;case"ds-button-filled":if(!customElements.get(a(t))){n()}break;case"ds-button-unfilled-icon":if(!customElements.get(a(t))){o()}break;case"ds-icon":if(!customElements.get(a(t))){c()}break;case"ds-text":if(!customElements.get(a(t))){l()}break}}))}h();const u=f;const p=h;export{u as DsCardSetting,p as defineCustomElement};
+import{p as t,H as s,c as e,h as i,a as d,t as r}from"./index.js";import{d as a}from"./p-EK1hOP19.js";import{d as n}from"./p-BMQbEIrQ.js";import{d as o}from"./p-BSFgy5r6.js";import{d as c}from"./p-8Nt92j1-.js";import{d as l}from"./p-DOU4cbpc.js";const b=()=>`.sc-ds-card-setting-h{display:block;box-sizing:border-box;width:var(--_card-setting-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}.card-setting__title-wrap.sc-ds-card-setting{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__title.sc-ds-card-setting{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{min-height:var(--dimension-card-width-sm);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const g={xs:"var(--dimension-card-width-xs)",sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const m="var(--color-foreground-faint-brand)";const h=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsEditingChange=e(this,"dsEditingChange");this.cardWidth="md";this.editing=false;this.enterEdit=()=>{this.dsEditingChange.emit(true)};this.exitEdit=()=>{this.dsEditingChange.emit(false)}}render(){const t=this.editing;return i(d,{key:"f539f8076546598adc3e932e9f4f3eebae654084",class:{"card-setting":true,"card-setting--editing":t},style:{"--_card-setting-width":g[this.cardWidth]}},i("header",{key:"a48d998d82a979bc9632407ec599bdeb37b284b6",class:"card-setting__header"},i("div",{key:"bd903764f4f997f8c4a25d21fd607052e3c5e32a",class:"card-setting__title-wrap"},i("ds-text",{key:"e8d37c44a74b7479f2b374f1dc6c56f19626a7da",class:"card-setting__title",variant:"text-title-small",color:t?m:"primary",as:"h2"},this.heading)),!t?i("ds-button-unfilled-icon",{type:"button",icon:"Pencil","aria-label":"Edit",onDsClick:this.enterEdit}):i("div",{class:"card-setting__actions"},i("ds-button-unfilled-icon",{type:"button",icon:"Cross",backgroundContrast:"bold","has-border":true,"aria-label":"Cancel",onDsClick:this.exitEdit}),i("ds-button-filled",{type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":"Save",onDsClick:this.exitEdit}))),i("div",{key:"13301bf8e2368c5da46272b4b5250a8c569bf519",class:"card-setting__body"},i("slot",{key:"e92fd908d1e27e769201bceb3d532820997f429b"})))}static get style(){return b()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled-icon","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-card-setting":if(!customElements.get(r(t))){customElements.define(r(t),h)}break;case"ds-badge":if(!customElements.get(r(t))){a()}break;case"ds-button-filled":if(!customElements.get(r(t))){n()}break;case"ds-button-unfilled-icon":if(!customElements.get(r(t))){o()}break;case"ds-icon":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}u();const f=h;const p=u;export{f as DsCardSetting,p as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

package/dist/components/{ds-card.d.ts → ds-chart-bar.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface DsCard extends Components.DsCard, HTMLElement {}
-export const DsCard: {
-    prototype: DsCard;
-    new (): DsCard;
+interface DsChartBar extends Components.DsChartBar, HTMLElement {}
+export const DsChartBar: {
+    prototype: DsChartBar;
+    new (): DsChartBar;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1,2 @@
+import{p as t,H as s,h as a,a as r,t as e}from"./index.js";import{c}from"./p-CMv_7vFs.js";import{m as i,b as n,l as o}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:inherit}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-tertiary);font-size:var(--typography-fontsize-xs)}.chart-bar__bar.sc-ds-chart-bar{rx:var(--dimension-radius-050)}`;const l={top:16,right:16,bottom:24,left:32};const d=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.data=[];this.width=480;this.height=240}render(){const t=this.width-l.left-l.right;const s=this.height-l.top-l.bottom;const e=i(this.data,(t=>t.value))??0;const h=n().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=o().domain([0,e||1]).range([s,0]).nice();const b=d.ticks(4);return a(r,{key:"a3d5ae10d50bf6f3c967a11bf71eb9cc82d98257",class:"chart-bar"},a("svg",{key:"e91a4db78ba3f0a373f7540ec1461461732a7ca9",class:"chart-bar__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.data.map((t=>`${t.label}: ${t.value}`)).join(", ")},a("g",{key:"af84bc2e91e00c3e370033ee7ae9ecb55933576c",transform:`translate(${l.left}, ${l.top})`},b.map((s=>a("g",{key:`grid-${s}`,transform:`translate(0, ${d(s)})`},a("line",{class:"chart-bar__gridline",x1:0,x2:t}),a("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},s)))),this.data.map(((t,r)=>{const e=h.bandwidth();const i=h(t.label)??0;const n=d(t.value);return a("g",{key:t.label},a("rect",{class:"chart-bar__bar",x:i,y:n,width:e,height:s-n,fill:t.color??c(r)}),a("text",{class:"chart-bar__axis-label",x:i+e/2,y:s+16,"text-anchor":"middle"},t.label))})))))}static get style(){return h()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}b();const f=d;const m=b;export{f as DsChartBar,m as defineCustomElement};
+//# sourceMappingURL=ds-chart-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["chartBarCss","MARGIN","top","right","bottom","left","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","data","width","height","render","innerWidth","innerHeight","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","viewBox","role","join","transform","tick","x1","x2","x","i","barWidth","bandwidth","barX","barY","y","fill","color","categoryColor"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  font-family: inherit;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n.chart-bar__axis-label {\n  fill: var(--color-foreground-tertiary);\n  font-size: var(--typography-fontsize-xs);\n}\n\n.chart-bar__bar {\n  rx: var(--dimension-radius-050);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const yMax = max(this.data, d => d.value) ?? 0;\n\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar\">\n        <svg\n          class=\"chart-bar__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-bar__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={innerHeight - barY}\n                    fill={d.color ?? categoryColor(i)}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {d.label}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4IAAA,MAAMA,EAAc,IAAM,0UCM1B,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,I,MAO1CC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAqB,GACrBD,KAAAE,MAAgB,IAChBF,KAAAG,OAAiB,GAsE1B,CApEC,MAAAC,GACE,MAAMC,EAAaL,KAAKE,MAAQZ,EAAOI,KAAOJ,EAAOE,MACrD,MAAMc,EAAcN,KAAKG,OAASb,EAAOC,IAAMD,EAAOG,OAEtD,MAAMc,EAAOC,EAAIR,KAAKC,MAAMQ,GAAKA,EAAEC,SAAU,EAE7C,MAAMC,EAASC,IACZC,OAAOb,KAAKC,KAAKa,KAAIL,GAAKA,EAAEM,SAC5BC,MAAM,CAAC,EAAGX,IACVY,QAAQ,KAEX,MAAMC,EAASC,IACZN,OAAO,CAAC,EAAGN,GAAQ,IACnBS,MAAM,CAACV,EAAa,IACpBc,OAEH,MAAMC,EAASH,EAAOI,MAAM,GAE5B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,iBACNC,QAAS,OAAO3B,KAAKE,SAASF,KAAKG,SACnCD,MAAOF,KAAKE,MACZC,OAAQH,KAAKG,OACbyB,KAAK,MAAK,aACE5B,KAAKC,KAAKa,KAAIL,GAAK,GAAGA,EAAEM,UAAUN,EAAEC,UAASmB,KAAK,OAE9DN,EAAA,KAAAE,IAAA,2CAAGK,UAAW,aAAaxC,EAAOI,SAASJ,EAAOC,QAC/C8B,EAAOP,KAAIiB,GACVR,EAAA,KAAGE,IAAK,QAAQM,IAAQD,UAAW,gBAAgBZ,EAAOa,OACxDR,EAAA,QAAMG,MAAM,sBAAsBM,GAAI,EAAGC,GAAI5B,IAC7CkB,EAAA,QAAMG,MAAM,wBAAwBQ,GAAG,EAAE,cAAc,MAAK,oBAAmB,UAC5EH,MAKN/B,KAAKC,KAAKa,KAAI,CAACL,EAAG0B,KACjB,MAAMC,EAAWzB,EAAO0B,YACxB,MAAMC,EAAO3B,EAAOF,EAAEM,QAAU,EAChC,MAAMwB,EAAOrB,EAAOT,EAAEC,OACtB,OACEa,EAAA,KAAGE,IAAKhB,EAAEM,OACRQ,EAAA,QACEG,MAAM,iBACNQ,EAAGI,EACHE,EAAGD,EACHrC,MAAOkC,EACPjC,OAAQG,EAAciC,EACtBE,KAAMhC,EAAEiC,OAASC,EAAcR,KAEjCZ,EAAA,QACEG,MAAM,wBACNQ,EAAGI,EAAOF,EAAW,EACrBI,EAAGlC,EAAc,GAAE,cACP,UAEXG,EAAEM,OAEH,M","ignoreList":[]}

package/dist/components/ds-chart-donut.d.ts

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

package/dist/components/ds-chart-donut.js

@@ -0,0 +1,2 @@
+import{p as t,H as n,c as e,h as s,a as i,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{T as c}from"./p-bDf6yBQd.js";import{r as a}from"./p-BWUTr_XN.js";import{w as u,c as f,a as h}from"./p-CrCGIx8s.js";import{f as l}from"./p-DEpLlQZK.js";function d(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let s=0;let i=n.length;while(s<i){const r=Math.ceil((s+i)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){s=r}else{i=r-1}}return s>0?`${n.slice(0,s)}…`:"…"}const p=Math.abs;const y=Math.atan2;const v=Math.cos;const g=Math.max;const m=Math.min;const b=Math.sin;const x=Math.sqrt;const M=1e-12;const _=Math.PI;const w=_/2;const k=2*_;function $(t){return t>1?0:t<-1?_:Math.acos(t)}function A(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function j(t){return t.innerRadius}function z(t){return t.outerRadius}function C(t){return t.startAngle}function E(t){return t.endAngle}function B(t){return t&&t.padAngle}function L(t,n,e,s,i,r,o,c){var a=e-t,u=s-n,f=o-i,h=c-r,l=h*a-f*u;if(l*l<M)return;l=(f*(n-r)-h*(t-i))/l;return[t+l*a,n+l*u]}function N(t,n,e,s,i,r,o){var c=t-e,a=n-s,u=(o?r:-r)/x(c*c+a*a),f=u*a,h=-u*c,l=t+f,d=n+h,p=e+f,y=s+h,v=(l+p)/2,m=(d+y)/2,b=p-l,M=y-d,_=b*b+M*M,w=i-r,k=l*y-p*d,$=(M<0?-1:1)*x(g(0,w*w*_-k*k)),A=(k*M-b*$)/_,j=(-k*b-M*$)/_,z=(k*M+b*$)/_,C=(-k*b+M*$)/_,E=A-v,B=j-m,L=z-v,N=C-m;if(E*E+B*B>L*L+N*N)A=z,j=C;return{cx:A,cy:j,x01:-f,y01:-h,x11:A*(i/w-1),y11:j*(i/w-1)}}function T(){var t=j,n=z,e=f(0),s=null,i=C,r=E,o=B,c=null,a=u(h);function h(){var u,f,h=+t.apply(this,arguments),l=+n.apply(this,arguments),d=i.apply(this,arguments)-w,g=r.apply(this,arguments)-w,j=p(g-d),z=g>d;if(!c)c=u=a();if(l<h)f=l,l=h,h=f;if(!(l>M))c.moveTo(0,0);else if(j>k-M){c.moveTo(l*v(d),l*b(d));c.arc(0,0,l,d,g,!z);if(h>M){c.moveTo(h*v(g),h*b(g));c.arc(0,0,h,g,d,z)}}else{var C=d,E=g,B=d,T=g,D=j,F=j,H=o.apply(this,arguments)/2,Q=H>M&&(s?+s.apply(this,arguments):x(h*h+l*l)),R=m(p(l-h)/2,+e.apply(this,arguments)),V=R,G=R,I,K;if(Q>M){var S=A(Q/h*b(H)),U=A(Q/l*b(H));if((D-=S*2)>M)S*=z?1:-1,B+=S,T-=S;else D=0,B=T=(d+g)/2;if((F-=U*2)>M)U*=z?1:-1,C+=U,E-=U;else F=0,C=E=(d+g)/2}var W=l*v(C),X=l*b(C),Z=h*v(T),q=h*b(T);if(R>M){var J=l*v(E),O=l*b(E),P=h*v(B),Y=h*b(B),tt;if(j<_){if(tt=L(W,X,P,Y,J,O,Z,q)){var nt=W-tt[0],et=X-tt[1],st=J-tt[0],it=O-tt[1],rt=1/b($((nt*st+et*it)/(x(nt*nt+et*et)*x(st*st+it*it)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);V=m(R,(h-ot)/(rt-1));G=m(R,(l-ot)/(rt+1))}else{V=G=0}}}if(!(F>M))c.moveTo(W,X);else if(G>M){I=N(P,Y,W,X,l,G,z);K=N(J,O,Z,q,l,G,z);c.moveTo(I.cx+I.x01,I.cy+I.y01);if(G<R)c.arc(I.cx,I.cy,G,y(I.y01,I.x01),y(K.y01,K.x01),!z);else{c.arc(I.cx,I.cy,G,y(I.y01,I.x01),y(I.y11,I.x11),!z);c.arc(0,0,l,y(I.cy+I.y11,I.cx+I.x11),y(K.cy+K.y11,K.cx+K.x11),!z);c.arc(K.cx,K.cy,G,y(K.y11,K.x11),y(K.y01,K.x01),!z)}}else c.moveTo(W,X),c.arc(0,0,l,C,E,!z);if(!(h>M)||!(D>M))c.lineTo(Z,q);else if(V>M){I=N(Z,q,J,O,h,-V,z);K=N(W,X,P,Y,h,-V,z);c.lineTo(I.cx+I.x01,I.cy+I.y01);if(V<R)c.arc(I.cx,I.cy,V,y(I.y01,I.x01),y(K.y01,K.x01),!z);else{c.arc(I.cx,I.cy,V,y(I.y01,I.x01),y(I.y11,I.x11),!z);c.arc(0,0,h,y(I.cy+I.y11,I.cx+I.x11),y(K.cy+K.y11,K.cx+K.x11),z);c.arc(K.cx,K.cy,V,y(K.y11,K.x11),y(K.y01,K.x01),!z)}}else c.arc(0,0,h,T,B,z)}c.closePath();if(u)return c=null,u+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,s=(+i.apply(this,arguments)+ +r.apply(this,arguments))/2-_/2;return[v(s)*e,b(s)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:f(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),h):e};h.padRadius=function(t){return arguments.length?(s=t==null?null:typeof t==="function"?t:f(+t),h):s};h.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),h):i};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),h):o};h.context=function(t){return arguments.length?(c=t==null?null:t,h):c};return h}function D(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function F(t){return t}function H(){var t=F,n=D,e=null,s=f(0),i=f(k),r=f(0);function o(o){var c,a=(o=h(o)).length,u,f,l=0,d=new Array(a),p=new Array(a),y=+s.apply(this,arguments),v=Math.min(k,Math.max(-k,i.apply(this,arguments)-y)),g,m=Math.min(Math.abs(v)/a,r.apply(this,arguments)),b=m*(v<0?-1:1),x;for(c=0;c<a;++c){if((x=p[d[c]=c]=+t(o[c],c,o))>0){l+=x}}if(n!=null)d.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)d.sort((function(t,n){return e(o[t],o[n])}));for(c=0,f=l?(v-a*b)/l:0;c<a;++c,y=g){u=d[c],x=p[u],g=y+(x>0?x*f:0)+b,p[u]={data:o[u],index:c,value:x,startAngle:y,endAngle:g,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),o):s};o.endAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),o):i};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),o):r};return o}const Q=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:inherit;user-select:none}.chart-donut__wrapper.sc-ds-chart-donut{position:relative}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:pointer;transition:opacity var(--effect-motion-short-2)}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-size:var(--typography-fontsize-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const R=.25;const V=0;const G=.82;const I=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.data=[];this.size=175;this.thickness=c.size200;this.cornerRadius=c.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText=""}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}componentDidRender(){const t=this.size/2;const n=a(this.thickness,c.size200);const e=t-n;const s=e*2*G;const i=this.data.reduce(((t,n)=>t+n.value),0);const r=this.centerValue??l(i);if(this.valueTextEl){const t=d(this.valueTextEl,r,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const o=this.centerCaption??"";if(this.captionTextEl&&o){const t=d(this.captionTextEl,o,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.size/2;const n=a(this.thickness,c.size200);const e=a(this.cornerRadius,c.radius025);const r=t-n;const u=this.data.reduce(((t,n)=>t+n.value),0);const f=u<=0;const h=this.activeLabel??this.hoveredLabel;const d=T().innerRadius(r).outerRadius(t).cornerRadius(e).padAngle(this.gap*Math.PI/180);const p=f?[]:H().value((t=>t.value)).sort(null)(this.data);const y=f?T().innerRadius(r).outerRadius(t)({startAngle:0,endAngle:Math.PI*2}):null;const v=a(c.lineheightXl,32);const g=a(c.lineheightMd,20);const m=this.centerCaption?t-(V+g)/2:t;const b=t+(v+V)/2;const x=this.centerValue??l(u);const M=this.centerCaption??"";return s(i,{key:"334f7c40e714304872549b5a677353c5c88af4b2",class:"chart-donut"},s("div",{key:"27e87ee038ddae37a2198837e0a0aff4955e18d0",class:"chart-donut__wrapper",style:{width:`${this.size}px`,height:`${this.size}px`}},s("svg",{key:"03d4e8b4a96767adc01583145f5959c3c478f1e5",class:"chart-donut__svg",viewBox:`0 0 ${this.size} ${this.size}`,width:this.size,height:this.size},s("g",{key:"d6c87aafc09e67b0a38e9879fedd213eab896c6b",transform:`translate(${t}, ${t})`},f?s("path",{d:y??undefined,fill:"var(--color-background-faint-neutral)","aria-label":"No data"}):p.map(((t,n)=>{const e=this.data[n];const i=h!=null&&e.label!==h;return s("path",{key:e.label,d:d(t)??undefined,fill:e.color??o(n),opacity:i?R:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:()=>this.handleHover(e),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),s("text",{key:"076e6a1d4b6099a7c5f3367abfa9dd4f4bbb0f9d",class:"chart-donut__center-value",x:t,y:m,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||x),M&&s("text",{key:"349dc60e9cd4507f307fbce297940814b3d43593",class:"chart-donut__center-caption",x:t,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||M))))}static get style(){return Q()}},[2,"ds-chart-donut",{data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32]}]);function K(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),I)}break}}))}K();const S=I;const U=K;export{S as DsChartDonut,U as defineCustomElement};
+//# sourceMappingURL=ds-chart-donut.js.map

package/dist/components/ds-chart-donut.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["truncateSvgTextToWidth","el","text","maxWidth","textContent","getComputedTextLength","lo","hi","length","mid","Math","ceil","slice","abs","atan2","cos","max","min","sin","sqrt","epsilon","pi","PI","halfPi","tau","acos","x","asin","arcInnerRadius","d","innerRadius","arcOuterRadius","outerRadius","arcStartAngle","startAngle","arcEndAngle","endAngle","arcPadAngle","padAngle","intersect","x0","y0","x1","y1","x2","y2","x3","y3","x10","y10","x32","y32","t","cornerTangents","r1","rc","cw","x01","y01","ox","oy","x11","y11","x00","y00","dx","dy","d2","r","D","cx0","cy0","cx1","cy1","dx0","dy0","dx1","dy1","cx","cy","arc","cornerRadius","constant","padRadius","context","path","withPath","buffer","r0","apply","this","arguments","a0","a1","da","moveTo","a01","a11","a00","a10","da0","da1","ap","rp","rc0","rc1","t0","t1","p0","p1","oc","ax","ay","bx","by","kc","lc","lineTo","closePath","centroid","a","_","descending","b","NaN","identity","pie","value","sortValues","sort","data","i","n","array","j","k","sum","index","Array","arcs","p","pa","v","chartDonutCss","DIMMED_OPACITY","CENTER_GAP_PX","CENTER_TEXT_SAFE_WIDTH_RATIO","ChartDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","size","thickness","TOKEN_DEFAULTS","size200","radius025","gap","activeLabel","hoveredLabel","displayedValueText","displayedCaptionText","handleHover","datum","label","dsSliceHover","emit","componentDidRender","radius","thicknessPx","resolveCssLengthPx","total","reduce","fullValueText","centerValue","formatCompactNumber","valueTextEl","truncated","fullCaptionText","centerCaption","captionTextEl","render","cornerRadiusPx","isEmpty","highlightLabel","arcGenerator","slices","emptyRingPath","valueLineHeight","lineheightXl","captionLineHeight","lineheightMd","centerValueY","centerCaptionY","h","Host","key","class","style","width","height","viewBox","transform","undefined","fill","map","isDimmed","color","categoryColor","opacity","tabindex","role","onMouseEnter","onMouseLeave","onFocus","onBlur","y","ref"],"sources":["src/wc/utils/truncate-svg-text.ts","node_modules/d3-shape/src/math.js","node_modules/d3-shape/src/arc.js","node_modules/d3-shape/src/descending.js","node_modules/d3-shape/src/identity.js","node_modules/d3-shape/src/pie.js","src/wc/components/ChartDonut/ChartDonut.css?tag=ds-chart-donut&encapsulation=scoped","src/wc/components/ChartDonut/ChartDonut.tsx"],"sourcesContent":["/**\n * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n *\n * Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n */\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n  el.textContent = text;\n  if (maxWidth <= 0 || el.getComputedTextLength() <= maxWidth) return text;\n\n  let lo = 0;\n  let hi = text.length;\n  while (lo < hi) {\n    const mid = Math.ceil((lo + hi) / 2);\n    el.textContent = `${text.slice(0, mid)}…`;\n    if (el.getComputedTextLength() <= maxWidth) {\n      lo = mid;\n    } else {\n      hi = mid - 1;\n    }\n  }\n  return lo > 0 ? `${text.slice(0, lo)}…` : '…';\n}\n","export const abs = Math.abs;\nexport const atan2 = Math.atan2;\nexport const cos = Math.cos;\nexport const max = Math.max;\nexport const min = Math.min;\nexport const sin = Math.sin;\nexport const sqrt = Math.sqrt;\n\nexport const epsilon = 1e-12;\nexport const pi = Math.PI;\nexport const halfPi = pi / 2;\nexport const tau = 2 * pi;\n\nexport function acos(x) {\n  return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\n\nexport function asin(x) {\n  return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);\n}\n","import constant from \"./constant.js\";\nimport {abs, acos, asin, atan2, cos, epsilon, halfPi, max, min, pi, sin, sqrt, tau} from \"./math.js\";\nimport {withPath} from \"./path.js\";\n\nfunction arcInnerRadius(d) {\n  return d.innerRadius;\n}\n\nfunction arcOuterRadius(d) {\n  return d.outerRadius;\n}\n\nfunction arcStartAngle(d) {\n  return d.startAngle;\n}\n\nfunction arcEndAngle(d) {\n  return d.endAngle;\n}\n\nfunction arcPadAngle(d) {\n  return d && d.padAngle; // Note: optional!\n}\n\nfunction intersect(x0, y0, x1, y1, x2, y2, x3, y3) {\n  var x10 = x1 - x0, y10 = y1 - y0,\n      x32 = x3 - x2, y32 = y3 - y2,\n      t = y32 * x10 - x32 * y10;\n  if (t * t < epsilon) return;\n  t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;\n  return [x0 + t * x10, y0 + t * y10];\n}\n\n// Compute perpendicular offset line of length rc.\n// http://mathworld.wolfram.com/Circle-LineIntersection.html\nfunction cornerTangents(x0, y0, x1, y1, r1, rc, cw) {\n  var x01 = x0 - x1,\n      y01 = y0 - y1,\n      lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),\n      ox = lo * y01,\n      oy = -lo * x01,\n      x11 = x0 + ox,\n      y11 = y0 + oy,\n      x10 = x1 + ox,\n      y10 = y1 + oy,\n      x00 = (x11 + x10) / 2,\n      y00 = (y11 + y10) / 2,\n      dx = x10 - x11,\n      dy = y10 - y11,\n      d2 = dx * dx + dy * dy,\n      r = r1 - rc,\n      D = x11 * y10 - x10 * y11,\n      d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),\n      cx0 = (D * dy - dx * d) / d2,\n      cy0 = (-D * dx - dy * d) / d2,\n      cx1 = (D * dy + dx * d) / d2,\n      cy1 = (-D * dx + dy * d) / d2,\n      dx0 = cx0 - x00,\n      dy0 = cy0 - y00,\n      dx1 = cx1 - x00,\n      dy1 = cy1 - y00;\n\n  // Pick the closer of the two intersection points.\n  // TODO Is there a faster way to determine which intersection to use?\n  if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;\n\n  return {\n    cx: cx0,\n    cy: cy0,\n    x01: -ox,\n    y01: -oy,\n    x11: cx0 * (r1 / r - 1),\n    y11: cy0 * (r1 / r - 1)\n  };\n}\n\nexport default function() {\n  var innerRadius = arcInnerRadius,\n      outerRadius = arcOuterRadius,\n      cornerRadius = constant(0),\n      padRadius = null,\n      startAngle = arcStartAngle,\n      endAngle = arcEndAngle,\n      padAngle = arcPadAngle,\n      context = null,\n      path = withPath(arc);\n\n  function arc() {\n    var buffer,\n        r,\n        r0 = +innerRadius.apply(this, arguments),\n        r1 = +outerRadius.apply(this, arguments),\n        a0 = startAngle.apply(this, arguments) - halfPi,\n        a1 = endAngle.apply(this, arguments) - halfPi,\n        da = abs(a1 - a0),\n        cw = a1 > a0;\n\n    if (!context) context = buffer = path();\n\n    // Ensure that the outer radius is always larger than the inner radius.\n    if (r1 < r0) r = r1, r1 = r0, r0 = r;\n\n    // Is it a point?\n    if (!(r1 > epsilon)) context.moveTo(0, 0);\n\n    // Or is it a circle or annulus?\n    else if (da > tau - epsilon) {\n      context.moveTo(r1 * cos(a0), r1 * sin(a0));\n      context.arc(0, 0, r1, a0, a1, !cw);\n      if (r0 > epsilon) {\n        context.moveTo(r0 * cos(a1), r0 * sin(a1));\n        context.arc(0, 0, r0, a1, a0, cw);\n      }\n    }\n\n    // Or is it a circular or annular sector?\n    else {\n      var a01 = a0,\n          a11 = a1,\n          a00 = a0,\n          a10 = a1,\n          da0 = da,\n          da1 = da,\n          ap = padAngle.apply(this, arguments) / 2,\n          rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),\n          rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),\n          rc0 = rc,\n          rc1 = rc,\n          t0,\n          t1;\n\n      // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.\n      if (rp > epsilon) {\n        var p0 = asin(rp / r0 * sin(ap)),\n            p1 = asin(rp / r1 * sin(ap));\n        if ((da0 -= p0 * 2) > epsilon) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;\n        else da0 = 0, a00 = a10 = (a0 + a1) / 2;\n        if ((da1 -= p1 * 2) > epsilon) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;\n        else da1 = 0, a01 = a11 = (a0 + a1) / 2;\n      }\n\n      var x01 = r1 * cos(a01),\n          y01 = r1 * sin(a01),\n          x10 = r0 * cos(a10),\n          y10 = r0 * sin(a10);\n\n      // Apply rounded corners?\n      if (rc > epsilon) {\n        var x11 = r1 * cos(a11),\n            y11 = r1 * sin(a11),\n            x00 = r0 * cos(a00),\n            y00 = r0 * sin(a00),\n            oc;\n\n        // Restrict the corner radius according to the sector angle. If this\n        // intersection fails, it’s probably because the arc is too small, so\n        // disable the corner radius entirely.\n        if (da < pi) {\n          if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {\n            var ax = x01 - oc[0],\n                ay = y01 - oc[1],\n                bx = x11 - oc[0],\n                by = y11 - oc[1],\n                kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),\n                lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);\n            rc0 = min(rc, (r0 - lc) / (kc - 1));\n            rc1 = min(rc, (r1 - lc) / (kc + 1));\n          } else {\n            rc0 = rc1 = 0;\n          }\n        }\n      }\n\n      // Is the sector collapsed to a line?\n      if (!(da1 > epsilon)) context.moveTo(x01, y01);\n\n      // Does the sector’s outer ring have rounded corners?\n      else if (rc1 > epsilon) {\n        t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);\n        t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);\n\n        context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);\n          context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the outer ring just a circular arc?\n      else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);\n\n      // Is there no inner ring, and it’s a circular sector?\n      // Or perhaps it’s an annular sector collapsed due to padding?\n      if (!(r0 > epsilon) || !(da0 > epsilon)) context.lineTo(x10, y10);\n\n      // Does the sector’s inner ring (or point) have rounded corners?\n      else if (rc0 > epsilon) {\n        t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);\n        t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);\n\n        context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n        // Have the corners merged?\n        if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n        // Otherwise, draw the two corners and the ring.\n        else {\n          context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n          context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);\n          context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n        }\n      }\n\n      // Or is the inner ring just a circular arc?\n      else context.arc(0, 0, r0, a10, a00, cw);\n    }\n\n    context.closePath();\n\n    if (buffer) return context = null, buffer + \"\" || null;\n  }\n\n  arc.centroid = function() {\n    var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,\n        a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;\n    return [cos(a) * r, sin(a) * r];\n  };\n\n  arc.innerRadius = function(_) {\n    return arguments.length ? (innerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : innerRadius;\n  };\n\n  arc.outerRadius = function(_) {\n    return arguments.length ? (outerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : outerRadius;\n  };\n\n  arc.cornerRadius = function(_) {\n    return arguments.length ? (cornerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : cornerRadius;\n  };\n\n  arc.padRadius = function(_) {\n    return arguments.length ? (padRadius = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), arc) : padRadius;\n  };\n\n  arc.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : startAngle;\n  };\n\n  arc.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : endAngle;\n  };\n\n  arc.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : padAngle;\n  };\n\n  arc.context = function(_) {\n    return arguments.length ? ((context = _ == null ? null : _), arc) : context;\n  };\n\n  return arc;\n}\n","export default function(a, b) {\n  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n","export default function(d) {\n  return d;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport descending from \"./descending.js\";\nimport identity from \"./identity.js\";\nimport {tau} from \"./math.js\";\n\nexport default function() {\n  var value = identity,\n      sortValues = descending,\n      sort = null,\n      startAngle = constant(0),\n      endAngle = constant(tau),\n      padAngle = constant(0);\n\n  function pie(data) {\n    var i,\n        n = (data = array(data)).length,\n        j,\n        k,\n        sum = 0,\n        index = new Array(n),\n        arcs = new Array(n),\n        a0 = +startAngle.apply(this, arguments),\n        da = Math.min(tau, Math.max(-tau, endAngle.apply(this, arguments) - a0)),\n        a1,\n        p = Math.min(Math.abs(da) / n, padAngle.apply(this, arguments)),\n        pa = p * (da < 0 ? -1 : 1),\n        v;\n\n    for (i = 0; i < n; ++i) {\n      if ((v = arcs[index[i] = i] = +value(data[i], i, data)) > 0) {\n        sum += v;\n      }\n    }\n\n    // Optionally sort the arcs by previously-computed values or by data.\n    if (sortValues != null) index.sort(function(i, j) { return sortValues(arcs[i], arcs[j]); });\n    else if (sort != null) index.sort(function(i, j) { return sort(data[i], data[j]); });\n\n    // Compute the arcs! They are stored in the original data's order.\n    for (i = 0, k = sum ? (da - n * pa) / sum : 0; i < n; ++i, a0 = a1) {\n      j = index[i], v = arcs[j], a1 = a0 + (v > 0 ? v * k : 0) + pa, arcs[j] = {\n        data: data[j],\n        index: i,\n        value: v,\n        startAngle: a0,\n        endAngle: a1,\n        padAngle: p\n      };\n    }\n\n    return arcs;\n  }\n\n  pie.value = function(_) {\n    return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), pie) : value;\n  };\n\n  pie.sortValues = function(_) {\n    return arguments.length ? (sortValues = _, sort = null, pie) : sortValues;\n  };\n\n  pie.sort = function(_) {\n    return arguments.length ? (sort = _, sortValues = null, pie) : sort;\n  };\n\n  pie.startAngle = function(_) {\n    return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : startAngle;\n  };\n\n  pie.endAngle = function(_) {\n    return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : endAngle;\n  };\n\n  pie.padAngle = function(_) {\n    return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : padAngle;\n  };\n\n  return pie;\n}\n",":host {\n  display: inline-block;\n  font-family: inherit;\n  user-select: none;\n}\n\n.chart-donut__wrapper {\n  position: relative;\n}\n\n.chart-donut__svg path {\n  cursor: pointer;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__svg path:focus-visible {\n  outline: none;\n  stroke: var(--color-interaction-focus);\n  stroke-width: 2;\n}\n\n/* Matches ds-text's text-title-large variant. */\n.chart-donut__center-value {\n  fill: var(--color-foreground-primary);\n  font-size: var(--typography-fontsize-xl);\n  font-weight: var(--typography-weight-semibold);\n  letter-spacing: var(--typography-letterspacing-negative-double);\n  cursor: default;\n}\n\n/* Matches ds-text's text-body-medium variant. */\n.chart-donut__center-caption {\n  fill: var(--color-foreground-secondary);\n  font-size: var(--typography-fontsize-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  cursor: default;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { arc, pie } from 'd3-shape';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst DIMMED_OPACITY = 0.25;\n/** Gap between the center value and caption line boxes. */\nconst CENTER_GAP_PX = 0;\n/** Fraction of the inner-circle diameter center text is allowed to use before truncating. */\nconst CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;\n\n@Component({\n  tag: 'ds-chart-donut',\n  styleUrl: 'ChartDonut.css',\n  scoped: true,\n})\nexport class ChartDonut {\n  /** Slices to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() size: number = 175;\n  /** Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). */\n  @Prop() thickness: number | string = TOKEN_DEFAULTS.size200;\n  /** Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). */\n  @Prop() cornerRadius: number | string = TOKEN_DEFAULTS.radius025;\n  /** Gap between slices, in degrees. */\n  @Prop() gap: number = 1;\n  /** Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\"). */\n  @Prop() centerValue: string | undefined;\n  /** Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase. */\n  @Prop() centerCaption: string | undefined;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\n   * Falls back to this component's own pointer/focus hover when unset.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  @State() private hoveredLabel: string | null = null;\n  /** Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. */\n  @State() private displayedValueText: string = '';\n  @State() private displayedCaptionText: string = '';\n\n  /** Fires with the hovered/focused slice's datum, or `null` on leave/blur. */\n  @Event() dsSliceHover!: EventEmitter<ChartDatum | null>;\n\n  private valueTextEl?: SVGTextElement;\n  private captionTextEl?: SVGTextElement;\n\n  private handleHover(datum: ChartDatum | null) {\n    this.hoveredLabel = datum?.label ?? null;\n    this.dsSliceHover.emit(datum);\n  }\n\n  componentDidRender() {\n    const radius = this.size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const innerRadius = radius - thicknessPx;\n    const maxWidth = innerRadius * 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n\n    const fullValueText = this.centerValue ?? formatCompactNumber(total);\n    if (this.valueTextEl) {\n      const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);\n      if (truncated !== this.displayedValueText) this.displayedValueText = truncated;\n      else this.valueTextEl.textContent = truncated;\n    }\n\n    const fullCaptionText = this.centerCaption ?? '';\n    if (this.captionTextEl && fullCaptionText) {\n      const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);\n      if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;\n      else this.captionTextEl.textContent = truncated;\n    }\n  }\n\n  render() {\n    const radius = this.size / 2;\n    const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n    const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);\n    const innerRadius = radius - thicknessPx;\n    const total = this.data.reduce((sum, d) => sum + d.value, 0);\n    // d3's pie() divides each value by the total to get an angle — with an all-zero total\n    // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.\n    const isEmpty = total <= 0;\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-legend row).\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    const arcGenerator = arc<{ startAngle: number; endAngle: number }>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadiusPx)\n      .padAngle((this.gap * Math.PI) / 180);\n\n    const slices = isEmpty\n      ? []\n      : pie<ChartDatum>()\n          .value(d => d.value)\n          .sort(null)(this.data);\n\n    const emptyRingPath = isEmpty\n      ? arc<{ startAngle: number; endAngle: number }>()\n          .innerRadius(innerRadius)\n          .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })\n      : null;\n\n    // Precise vertical centering for the two-line center text, using the real line-height of\n    // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.\n    const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);\n    const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);\n    const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;\n    const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;\n\n    // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).\n    const fullValueText = this.centerValue ?? formatCompactNumber(total);\n    const fullCaptionText = this.centerCaption ?? '';\n\n    return (\n      <Host class=\"chart-donut\">\n        <div class=\"chart-donut__wrapper\" style={{ width: `${this.size}px`, height: `${this.size}px` }}>\n          <svg\n            class=\"chart-donut__svg\"\n            viewBox={`0 0 ${this.size} ${this.size}`}\n            width={this.size}\n            height={this.size}\n          >\n            <g transform={`translate(${radius}, ${radius})`}>\n              {isEmpty ? (\n                <path d={emptyRingPath ?? undefined} fill=\"var(--color-background-faint-neutral)\" aria-label=\"No data\" />\n              ) : (\n                slices.map((slice, i) => {\n                  const datum = this.data[i];\n                  const isDimmed = highlightLabel != null && datum.label !== highlightLabel;\n                  return (\n                    <path\n                      key={datum.label}\n                      d={arcGenerator(slice) ?? undefined}\n                      fill={datum.color ?? categoryColor(i)}\n                      opacity={isDimmed ? DIMMED_OPACITY : 1}\n                      tabindex={0}\n                      role=\"img\"\n                      aria-label={`${datum.label}: ${datum.value}`}\n                      onMouseEnter={() => this.handleHover(datum)}\n                      onMouseLeave={() => this.handleHover(null)}\n                      onFocus={() => this.handleHover(datum)}\n                      onBlur={() => this.handleHover(null)}\n                    />\n                  );\n                })\n              )}\n            </g>\n            <text\n              class=\"chart-donut__center-value\"\n              x={radius}\n              y={centerValueY}\n              text-anchor=\"middle\"\n              dominant-baseline=\"central\"\n              ref={el => {\n                this.valueTextEl = (el as SVGTextElement) ?? undefined;\n              }}\n            >\n              {this.displayedValueText || fullValueText}\n            </text>\n            {fullCaptionText && (\n              <text\n                class=\"chart-donut__center-caption\"\n                x={radius}\n                y={centerCaptionY}\n                text-anchor=\"middle\"\n                dominant-baseline=\"central\"\n                ref={el => {\n                  this.captionTextEl = (el as SVGTextElement) ?? undefined;\n                }}\n              >\n                {this.displayedCaptionText || fullCaptionText}\n              </text>\n            )}\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-chart-legend.d.ts

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

package/dist/components/ds-chart-legend.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,c as s,h as i,a as n,t as a}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{d as c}from"./p-DOU4cbpc.js";import{f as d}from"./p-DEpLlQZK.js";const l=()=>`.sc-ds-chart-legend-h{display:block;font-family:inherit;user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(50%, 1fr) auto auto;row-gap:var(--dimension-space-050)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex}.chart-legend__item.sc-ds-chart-legend{position:relative;z-index:0;box-sizing:border-box;height:var(--dimension-size-400);align-items:center;padding:0 var(--dimension-space-075);border-radius:var(--dimension-radius-025);text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:transparent;pointer-events:none}.chart-legend__item.sc-ds-chart-legend:hover::after{background:var(--color-interaction-hover)}.chart-legend__item--interactive.sc-ds-chart-legend:active::after{background:var(--color-interaction-pressed)}.chart-legend__item--interactive.sc-ds-chart-legend:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:-2px}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--dimension-space-075)}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{padding:0 var(--dimension-space-025);margin-right:var(--dimension-space-200);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--typography-lineheight-md)}.chart-legend__percentage.sc-ds-chart-legend{padding:0 var(--dimension-space-025);text-align:right;line-height:var(--typography-lineheight-md)}.chart-legend__value.sc-ds-chart-legend{padding:0 var(--dimension-space-025);margin-right:var(--dimension-space-200);text-align:right;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--typography-lineheight-md)}`;const o=.25;const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=s(this,"dsItemHover");this.dsItemClick=s(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,t)=>{this.dsItemClick.emit({item:e,originalEvent:t})}}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,t)=>e+(t.value??0)),0);const t=this.activeLabel??this.hoveredLabel;return i(n,{key:"5f404737cd0957a3850023f57b0f5fb46c0984dc",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true}},i("ul",{key:"1b0b222ce902a0b89aa7c28981b48918552fdbbc",class:"chart-legend__list",onMouseLeave:()=>this.handleHover(null)},this.items.map(((s,n)=>{const a=t!=null&&s.label!==t;const c=s.href?"a":"div";return i("li",{class:"chart-legend__list-item",key:s.label},i(c,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!s.href},style:{opacity:a?String(o):"1"},href:s.href,onClick:s.href?e=>this.handleClick(s,e):undefined,onMouseEnter:()=>this.handleHover(s),onFocus:()=>this.handleHover(s),onBlur:()=>this.handleHover(null)},i("span",{class:"chart-legend__swatch-box"},i("span",{class:"chart-legend__swatch",style:{backgroundColor:s.color??r(n)}})),i("span",{class:"chart-legend__label",title:s.label},i("ds-text",{as:"span",variant:"text-body-medium",color:"secondary"},s.label)),s.value!=null&&i("span",{class:"chart-legend__value",title:String(s.value)},i("ds-text",{as:"span",variant:"text-body-medium",color:"primary"},d(s.value))),s.value!=null&&this.showPercentage&&i("span",{class:"chart-legend__percentage"},i("ds-text",{as:"span",variant:"text-body-medium",color:"primary"},(e?s.value/e*100:0).toFixed(1),"%"))))}))))}static get style(){return l()}},[2,"ds-chart-legend",{items:[16],direction:[1],showPercentage:[4,"show-percentage"],activeLabel:[1,"active-label"],hoveredLabel:[32]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(a(e))){customElements.define(a(e),h)}break;case"ds-text":if(!customElements.get(a(e))){c()}break}}))}g();const m=h;const p=g;export{m as DsChartLegend,p as defineCustomElement};
+//# sourceMappingURL=ds-chart-legend.js.map

package/dist/components/ds-chart-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","map","i","isDimmed","RowTag","href","style","opacity","String","onClick","e","undefined","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","title","as","variant","formatCompactNumber","toFixed"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: inherit;\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so it can be hovered/clicked\n   as a whole row while its children still align to the list's shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n/*\n * Vertical: list is the grid; each item spans it via subgrid so the data columns line up.\n * Label always gets at least 50% of the row (minmax floor) and grows via 1fr if the other\n * columns need less; value/percentage are `auto` — sized to their own content — so this holds\n * up whether there are 1, 2, or more data columns, instead of hardcoding a fixed split.\n */\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(50%, 1fr) auto auto;\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n}\n\n/*\n * 32px tall via a fixed `height` + `align-items: center` — same recipe as PanelNav's and BarNav's\n * items — rather than deriving it from padding + line-height math. That math broke once text\n * moved into a wrapped <ds-text>: the row's height ends up depending on whatever line-height a\n * plain wrapper span happens to inherit, which is fragile. A fixed height sidesteps that\n * entirely — content is centered regardless of its own font metrics. Padding is horizontal-only\n * (matches PanelNav) since the fixed height already handles vertical spacing.\n * Column spacing is per-pair via margins (not a uniform column-gap): the swatch-box+label read as\n * one unit (8px between them), while label→percentage→value are separate data points (16px between each).\n */\n.chart-legend__item {\n  /* z-index (any non-auto value) is required, not just position:relative, to make this row its\n     own stacking context — otherwise the ::after fill's z-index:-1 below escapes past this row\n     and can paint behind some ancestor's opaque background instead of just behind this row's text. */\n  position: relative;\n  z-index: 0;\n  box-sizing: border-box;\n  height: var(--dimension-size-400);\n  align-items: center;\n  padding: 0 var(--dimension-space-075);\n  border-radius: var(--dimension-radius-025);\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Same interaction-fill pattern as our buttons: an absolutely-positioned pseudo-layer using the\n   semantic --color-interaction-* tokens, painted behind the row's own content (negative z-index),\n   instead of setting background-color directly on the row. */\n.chart-legend__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n.chart-legend__item:hover::after {\n  background: var(--color-interaction-hover);\n}\n\n.chart-legend__item--interactive:active::after {\n  background: var(--color-interaction-pressed);\n}\n\n.chart-legend__item--interactive:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: -2px;\n}\n\n/* 20px box balances the 12px swatch against the row's 20px text line-height; also carries the\n   6px gap to the label, since box+swatch+label read as a single \"series\" unit. */\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-075);\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n/*\n * Typography (color/size/weight/letter-spacing) now comes from the nested <ds-text\n * variant=\"text-body-medium\">; these classes only own layout — grid participation, spacing,\n * and truncation. <ds-text>'s host is `display: contents` (no box of its own), so classes\n * placed directly on <ds-text> would silently no-op for anything box-model related — that's\n * why the layout class lives on this wrapping <span> instead of on <ds-text> itself.\n *\n * .chart-legend__item's fixed height (not this line-height) is what keeps the row itself at\n * exactly 32px. line-height is still set here so this wrapper's own box tightly hugs its actual\n * text — without it, the wrapper inherits the browser's default line-height (~24px, since\n * nothing sets its own font-size), and `align-items: center` would then center an oversized\n * wrapper whose text isn't necessarily centered within it, not the text itself.\n */\n.chart-legend__label {\n  padding: 0 var(--dimension-space-025);\n  margin-right: var(--dimension-space-200);\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: var(--typography-lineheight-md);\n}\n\n.chart-legend__percentage {\n  padding: 0 var(--dimension-space-025);\n  text-align: right;\n  line-height: var(--typography-lineheight-md);\n}\n\n/* Value and percentage read as equal-weight data (see the nested <ds-text>, same variant for\n   both) — percentage sits last since it's inherently bounded (never exceeds \"100.0%\"), so its\n   content-sized column never needs more room than that. */\n.chart-legend__value {\n  padding: 0 var(--dimension-space-025);\n  margin-right: var(--dimension-space-200);\n  text-align: right;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  line-height: var(--typography-lineheight-md);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\n\nconst DIMMED_OPACITY = 0.25;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    return (\n      <Host class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul class=\"chart-legend__list\" onMouseLeave={() => this.handleHover(null)}>\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const RowTag = item.href ? 'a' : 'div';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!item.href,\n                  }}\n                  style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}\n                  href={item.href}\n                  onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={() => this.handleHover(item)}\n                  onFocus={() => this.handleHover(item)}\n                  onBlur={() => this.handleHover(null)}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n                  </span>\n                  <span class=\"chart-legend__label\" title={item.label}>\n                    <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\">\n                      {item.label}\n                    </ds-text>\n                  </span>\n                  {item.value != null && (\n                    <span class=\"chart-legend__value\" title={String(item.value)}>\n                      <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                        {formatCompactNumber(item.value)}\n                      </ds-text>\n                    </span>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <span class=\"chart-legend__percentage\">\n                      <ds-text as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                        {(total ? (item.value / total) * 100 : 0).toFixed(1)}%\n                      </ds-text>\n                    </span>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,koFCO7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAOUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAO1BH,KAAAI,YAA6B,KAIpBJ,KAAAK,aAA8B,KAYvCL,KAAAM,YAAc,CAACC,EAAuBC,KAC5CR,KAAKS,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CA+DjD,CArES,WAAAG,CAAYJ,GAClBP,KAAKK,aAAeE,GAAMK,OAAS,KACnCZ,KAAKa,YAAYH,KAAKH,E,CAOxB,MAAAO,GACE,MAAMC,EAAQf,KAAKC,MAAMe,QAAO,CAACC,EAAKV,IAASU,GAAOV,EAAKW,OAAS,IAAI,GAGxE,MAAMC,EAAiBnB,KAAKI,aAAeJ,KAAKK,aAEhD,OACEe,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,eAAgB,KAAM,CAAC,iBAAiBvB,KAAKE,aAAc,OAIxEkB,EAAA,MAAAE,IAAA,2CAAIC,MAAM,qBAAqBC,aAAc,IAAMxB,KAAKW,YAAY,OACjEX,KAAKC,MAAMwB,KAAI,CAAClB,EAAMmB,KACrB,MAAMC,EAAWR,GAAkB,MAAQZ,EAAKK,QAAUO,EAC1D,MAAMS,EAASrB,EAAKsB,KAAO,IAAM,MAEjC,OACET,EAAA,MAAIG,MAAM,0BAA0BD,IAAKf,EAAKK,OAC5CQ,EAACQ,EAAM,CACLL,MAAO,CACL,qBAAsB,KACtB,oCAAqChB,EAAKsB,MAE5CC,MAAO,CAAEC,QAASJ,EAAWK,OAAOtC,GAAkB,KACtDmC,KAAMtB,EAAKsB,KACXI,QAAS1B,EAAKsB,KAAQK,GAAkBlC,KAAKM,YAAYC,EAAM2B,GAAKC,UACpEC,aAAc,IAAMpC,KAAKW,YAAYJ,GACrC8B,QAAS,IAAMrC,KAAKW,YAAYJ,GAChC+B,OAAQ,IAAMtC,KAAKW,YAAY,OAE/BS,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBO,MAAO,CAAES,gBAAiBhC,EAAKiC,OAASC,EAAcf,OAE3FN,EAAA,QAAMG,MAAM,sBAAsBmB,MAAOnC,EAAKK,OAC5CQ,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,aACjDjC,EAAKK,QAGTL,EAAKW,OAAS,MACbE,EAAA,QAAMG,MAAM,sBAAsBmB,MAAOV,OAAOzB,EAAKW,QACnDE,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,WACjDK,EAAoBtC,EAAKW,SAI/BX,EAAKW,OAAS,MAAQlB,KAAKG,gBAC1BiB,EAAA,QAAMG,MAAM,4BACVH,EAAA,WAASuB,GAAG,OAAOC,QAAQ,mBAAmBJ,MAAM,YAChDzB,EAASR,EAAKW,MAAQH,EAAS,IAAM,GAAG+B,QAAQ,GAC1C,OAIb,K","ignoreList":[]}

package/dist/components/ds-chart-line.d.ts

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

package/dist/components/ds-chart-line.js

@@ -0,0 +1,2 @@
+import{p as t,H as n,h as i,a as s,t as e}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{m as c,p as a,l as o}from"./p-CzBnvtcz.js";import{w as l,c as h,a as f}from"./p-CrCGIx8s.js";function u(t){this._context=t}u.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,n){t=+t,n=+n;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._context.lineTo(t,n);break}}};function d(t){return new u(t)}function p(t){return t[0]}function m(t){return t[1]}function y(t,n){var i=h(true),s=null,e=d,r=null,c=l(a);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?m:h(n);function a(a){var o,l=(a=f(a)).length,h,u=false,d;if(s==null)r=e(d=c());for(o=0;o<=l;++o){if(!(o<l&&i(h=a[o],o,a))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,o,a),+n(h,o,a))}if(d)return r=null,d+""||null}a.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),a):t};a.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),a):n};a.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),a):i};a.curve=function(t){return arguments.length?(e=t,s!=null&&(r=e(s)),a):e};a.context=function(t){return arguments.length?(t==null?s=r=null:r=e(s=t),a):s};return a}const _=()=>`.sc-ds-chart-line-h{display:inline-block;font-family:inherit}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:1}.chart-line__axis-label.sc-ds-chart-line{fill:var(--color-foreground-tertiary);font-size:var(--typography-fontsize-xs)}.chart-line__path.sc-ds-chart-line{fill:none;stroke-width:2}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:1.5}`;const x={top:16,right:16,bottom:24,left:32};const k=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true}render(){const t=this.width-x.left-x.right;const n=this.height-x.top-x.bottom;const e=this.series.flatMap((t=>t.data));const l=c(e)??0;const h=a().domain(this.categories.map(((t,n)=>n))).range([0,t]);const f=o().domain([0,l||1]).range([n,0]).nice();const u=y().x(((t,n)=>h(n)??0)).y((t=>f(t)));const d=f.ticks(4);return i(s,{key:"345bed782323807628b6489c280618a205dce8c4",class:"chart-line"},i("svg",{key:"38234fbf8a17d7c2e89f8f2d09962bcad6c519a2",class:"chart-line__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},i("g",{key:"93e3cfde16e4740a0af75990f43d4d5b4935ae38",transform:`translate(${x.left}, ${x.top})`},d.map((n=>i("g",{key:`grid-${n}`,transform:`translate(0, ${f(n)})`},i("line",{class:"chart-line__gridline",x1:0,x2:t}),i("text",{class:"chart-line__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},n)))),this.categories.map(((t,s)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:h(s)??0,y:n+16,"text-anchor":"middle"},t))),this.series.map(((t,n)=>{const s=t.color??r(n);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:u(t.data)??undefined,stroke:s}),this.showPoints&&t.data.map(((n,e)=>i("circle",{key:`${t.name}-${e}`,class:"chart-line__point",cx:h(e)??0,cy:f(n),r:3,fill:s}))))})))))}static get style(){return _()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(e(t))){customElements.define(e(t),k)}break}}))}b();const g=k;const v=b;export{g as DsChartLine,v as defineCustomElement};
+//# sourceMappingURL=ds-chart-line.js.map

package/dist/components/ds-chart-line.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Linear","context","this","_context","prototype","areaStart","_line","areaEnd","NaN","lineStart","_point","lineEnd","closePath","point","x","y","lineTo","moveTo","curveLinear","p","lineShape","defined","constant","curve","output","path","withPath","line","undefined","pointX","pointY","data","i","n","array","length","d","defined0","buffer","_","arguments","chartLineCss","MARGIN","top","right","bottom","left","ChartLine","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","series","categories","width","height","showPoints","render","innerWidth","innerHeight","allValues","flatMap","s","yMax","max","xScale","scalePoint","domain","map","range","yScale","scaleLinear","nice","lineGenerator","yTicks","ticks","h","Host","key","class","viewBox","role","name","join","transform","tick","x1","x2","label","si","color","categoryColor","stroke","cx","cy","r","fill"],"sources":["node_modules/d3-shape/src/curve/linear.js","node_modules/d3-shape/src/point.js","node_modules/d3-shape/src/line.js","src/wc/components/ChartLine/ChartLine.css?tag=ds-chart-line&encapsulation=scoped","src/wc/components/ChartLine/ChartLine.tsx"],"sourcesContent":["function Linear(context) {\n  this._context = context;\n}\n\nLinear.prototype = {\n  areaStart: function() {\n    this._line = 0;\n  },\n  areaEnd: function() {\n    this._line = NaN;\n  },\n  lineStart: function() {\n    this._point = 0;\n  },\n  lineEnd: function() {\n    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n    this._line = 1 - this._line;\n  },\n  point: function(x, y) {\n    x = +x, y = +y;\n    switch (this._point) {\n      case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n      case 1: this._point = 2; // falls through\n      default: this._context.lineTo(x, y); break;\n    }\n  }\n};\n\nexport default function(context) {\n  return new Linear(context);\n}\n","export function x(p) {\n  return p[0];\n}\n\nexport function y(p) {\n  return p[1];\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport curveLinear from \"./curve/linear.js\";\nimport {withPath} from \"./path.js\";\nimport {x as pointX, y as pointY} from \"./point.js\";\n\nexport default function(x, y) {\n  var defined = constant(true),\n      context = null,\n      curve = curveLinear,\n      output = null,\n      path = withPath(line);\n\n  x = typeof x === \"function\" ? x : (x === undefined) ? pointX : constant(x);\n  y = typeof y === \"function\" ? y : (y === undefined) ? pointY : constant(y);\n\n  function line(data) {\n    var i,\n        n = (data = array(data)).length,\n        d,\n        defined0 = false,\n        buffer;\n\n    if (context == null) output = curve(buffer = path());\n\n    for (i = 0; i <= n; ++i) {\n      if (!(i < n && defined(d = data[i], i, data)) === defined0) {\n        if (defined0 = !defined0) output.lineStart();\n        else output.lineEnd();\n      }\n      if (defined0) output.point(+x(d, i, data), +y(d, i, data));\n    }\n\n    if (buffer) return output = null, buffer + \"\" || null;\n  }\n\n  line.x = function(_) {\n    return arguments.length ? (x = typeof _ === \"function\" ? _ : constant(+_), line) : x;\n  };\n\n  line.y = function(_) {\n    return arguments.length ? (y = typeof _ === \"function\" ? _ : constant(+_), line) : y;\n  };\n\n  line.defined = function(_) {\n    return arguments.length ? (defined = typeof _ === \"function\" ? _ : constant(!!_), line) : defined;\n  };\n\n  line.curve = function(_) {\n    return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;\n  };\n\n  line.context = function(_) {\n    return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;\n  };\n\n  return line;\n}\n",":host {\n  display: inline-block;\n  font-family: inherit;\n}\n\n.chart-line__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n.chart-line__axis-label {\n  fill: var(--color-foreground-tertiary);\n  font-size: var(--typography-fontsize-xs);\n}\n\n.chart-line__path {\n  fill: none;\n  stroke-width: 2;\n}\n\n.chart-line__point {\n  stroke: var(--color-background-primary);\n  stroke-width: 1.5;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { line as lineShape } from 'd3-shape';\nimport { scaleLinear, scalePoint } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartSeries } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-line',\n  styleUrl: 'ChartLine.css',\n  scoped: true,\n})\nexport class ChartLine {\n  /** One or more series to plot. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n  @Prop() showPoints: boolean = true;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const allValues = this.series.flatMap(s => s.data);\n    const yMax = max(allValues) ?? 0;\n\n    const xScale = scalePoint<number>()\n      .domain(this.categories.map((_, i) => i))\n      .range([0, innerWidth]);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const lineGenerator = lineShape<number>()\n      .x((_, i) => xScale(i) ?? 0)\n      .y(d => yScale(d));\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-line\">\n        <svg\n          class=\"chart-line__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.series.map(s => s.name).join(', ')}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-line__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-line__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.categories.map((label, i) => (\n              <text\n                key={`x-${label}`}\n                class=\"chart-line__axis-label\"\n                x={xScale(i) ?? 0}\n                y={innerHeight + 16}\n                text-anchor=\"middle\"\n              >\n                {label}\n              </text>\n            ))}\n\n            {this.series.map((s, si) => {\n              const color = s.color ?? categoryColor(si);\n              return (\n                <g key={s.name}>\n                  <path class=\"chart-line__path\" d={lineGenerator(s.data) ?? undefined} stroke={color} />\n                  {this.showPoints &&\n                    s.data.map((d, i) => (\n                      <circle\n                        key={`${s.name}-${i}`}\n                        class=\"chart-line__point\"\n                        cx={xScale(i) ?? 0}\n                        cy={yScale(d)}\n                        r={3}\n                        fill={color}\n                      />\n                    ))}\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}