@ds-mo/ui 6.0.0 → 6.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/agent.json +1 -1
  3. package/dist/components/ds-app-shell.js +1 -1
  4. package/dist/components/ds-app-shell.js.map +1 -1
  5. package/dist/components/ds-bar-nav.js +1 -1
  6. package/dist/components/ds-chart-bar.js +1 -1
  7. package/dist/components/ds-chart-donut.js +1 -1
  8. package/dist/components/ds-chart-line.js +1 -1
  9. package/dist/components/ds-checkbox.js +1 -1
  10. package/dist/components/ds-field.js +1 -1
  11. package/dist/components/ds-menu.js +1 -1
  12. package/dist/components/ds-panel-nav.js +1 -1
  13. package/dist/components/ds-panel-tools.js +1 -1
  14. package/dist/components/ds-panel-tools.js.map +1 -1
  15. package/dist/components/ds-select.js +1 -1
  16. package/dist/components/ds-shell-gradient-picker.js +1 -1
  17. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  18. package/dist/components/ds-slider.js +1 -1
  19. package/dist/components/ds-slider.js.map +1 -1
  20. package/dist/components/ds-tooltip-data-viz.js +1 -1
  21. package/dist/components/{p-B-cWYMqs.js → p-B5kfuVQz.js} +2 -2
  22. package/dist/components/{p-_OGE_E6L.js → p-DHwtgzjP.js} +2 -2
  23. package/dist/components/{p-DkIbxCpi.js → p-RBe9XqjU.js} +2 -2
  24. package/dist/docs/components.json +1 -1
  25. package/dist/types/components/PanelTools/PanelTools.d.ts +2 -0
  26. package/package.json +1 -1
  27. /package/dist/components/{p-B-cWYMqs.js.map → p-B5kfuVQz.js.map} +0 -0
  28. /package/dist/components/{p-_OGE_E6L.js.map → p-DHwtgzjP.js.map} +0 -0
  29. /package/dist/components/{p-DkIbxCpi.js.map → p-RBe9XqjU.js.map} +0 -0
package/dist/.build-stamp CHANGED
@@ -1 +1 @@
1
- 1783987573003
1
+ 1783994464603
package/dist/agent.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
3
  "package": "@ds-mo/ui",
4
- "packageVersion": "6.0.0",
4
+ "packageVersion": "6.0.1",
5
5
  "kind": "components",
6
6
  "entries": [
7
7
  {
package/dist/components/ds-app-shell.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,t as s,H as t,h as n,a as i}from"./index.js";import{D as a,c as l,n as o,s as r}from"./p-D0B9uDTP.js";import{e as h,c as d,r as c,a as p,b as u}from"./p-BKhG2xrW.js";const f={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function b(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function g(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 m(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 v(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!b(e))return null;const s=m(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=f[s];if(t)return`open-tool:${t}`;return null}const y="--ds-shell-gradient-image";const _="--ds-shell-gradient-size";const x="--ds-shell-gradient-position-panel";const w="--ds-shell-gradient-position-bar";const k="--ds-shell-gradient-opacity";function P(e=a){return l(e)}function z(e){const s=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!s)return{width:0,height:0};const t=s.visualViewport;return{width:Math.round(t?.width??s.innerWidth),height:Math.round(t?.height??s.innerHeight)}}function S(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function C(){return"0 0"}function D(e){return`${-Math.round(e)}px 0`}function L(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 M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(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 j(e,s){return s?e.collapsedPx:e.expandedPx}const B=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;--ds-shell-panel-tools-width:var(--dimension-panel-width-sm)}@media (min-width: 768px) and (max-width: 1199px){.sc-ds-app-shell-h{--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}}.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 W=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=d((()=>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(c(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=z();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(c(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(u,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(u,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=M(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=[y,_,k];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(x,t)}if(s){s.style.setProperty(w,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=V(e,s);return j(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 j(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return o(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const s=v(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(x);if(s)s.style.removeProperty(w)};const i=o(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(t);n();return}const a=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const h=C();const d=D(l);this.syncChromeLayoutVars(e,s,h,d);const c=P(i);const p=S({width:a.width,height:a.height});const u=r(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[y]:c,[_]:p,[x]:h,[w]:d,[k]:u});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:c,[_]:p,[k]:u,[x]:s?null:h,[w]:s?d:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"44f9aed7809c500fc5eeb6d760b1c8ef387fd693",class:s},n("div",{key:"933ce38b8edc171bd85eca64af407f4e403b8310",class:"app-shell__row"},e?n("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,n("div",{key:"6d94a83308b10df7ef6f31c58c0e9243617dd959",class:"app-shell__panel"},n("slot",{key:"860d1763ed31251abae5ee2350f104b7af08ce57",name:"panel"})),n("div",{key:"5e1704d21df96812de03b7d0e388e654d3c487a9",class:"app-shell__main"},n("div",{key:"c5c0eb9099abd90a3e7d43d4f798fbbe94051438",class:"app-shell__bar"},n("slot",{key:"9c57201b210ee0f7d856c86806df9e31a838475f",name:"bar"})),n("div",{key:"6166885053a943b775185aa8e61591bc19aabb83",class:"app-shell__tools"},n("slot",{key:"dc446d5d9d9ff4cdcaa4c960dd1e156de26c287c",name:"tools"})),n("div",{key:"9a1dd8954e28ca8d1d69c5c716cfd453314b7edb",class:"app-shell__content"},n("slot",{key:"b58f371725b5dd628d53bae02e9a5ac2c4742d7c"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return B()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(s(e))){customElements.define(s(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
1
+ import{p as e,t,H as s,h as n,a as i}from"./index.js";import{D as a,c as o,n as l,s as r}from"./p-D0B9uDTP.js";import{e as h,c,r as p,a as d,b as f}from"./p-BKhG2xrW.js";const u={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function b(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function g(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const t=e;const s=t.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(s)return true;const n=t.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(t.isContentEditable)}function m(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 v(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!b(e))return null;const t=m(e);if(t==="[")return"toggle-panel-nav";if(t==="]")return"close-panel-tools";const s=u[t];if(s)return`open-tool:${s}`;return null}const y="--ds-shell-gradient-image";const _="--ds-shell-gradient-size";const x="--ds-shell-gradient-position-panel";const w="--ds-shell-gradient-position-bar";const k="--ds-shell-gradient-opacity";function P(e=a){return o(e)}function z(e){const t=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!t)return{width:0,height:0};const s=t.visualViewport;return{width:Math.round(s?.width??t.innerWidth),height:Math.round(s?.height??t.innerHeight)}}function S(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function C(){return"0 0"}function D(e){return`${-Math.round(e)}px 0`}function L(e,t){if(typeof document==="undefined")return 0;const s=document.createElement("div");s.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+t+");";e.appendChild(s);const n=s.getBoundingClientRect().width;e.removeChild(s);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function V(e,t){if(t?.classList.contains("panel-nav--collapsed"))return true;const s=e?.collapsed;return s===true}function j(e,t){return t?e.collapsedPx:e.expandedPx}const B=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;--ds-shell-panel-tools-width:var(--dimension-panel-width-sm)}@media (min-width: 768px) and (max-width: 1199px){.sc-ds-app-shell-h{--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}}.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)}.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;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__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 W=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=c((()=>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(p(e)!=="panel-nav")return;this.panelNavTransition.enter();const t=z();this.cachedViewportWidth=t.width;this.cachedViewportHeight=t.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(p(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(d,this.onChromeTransitionStart);this.el.addEventListener(f,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(d,this.onChromeTransitionStart);this.el.removeEventListener(f,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(t){t.setAttribute("nav-style",this.navStyle);t.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=M(e)}applyGradientVars(e,t){const s=e.style;for(const[e,n]of Object.entries(t)){if(n===null)s.removeProperty(e);else s.setProperty(e,n)}}clearGradientPaintVars(e){const t=[y,_,k];for(const s of e){for(const e of t)s.style.removeProperty(e)}}syncChromeLayoutVars(e,t,s,n){if(e){e.style.setProperty(x,s)}if(t){t.style.setProperty(w,n)}}resolvePanelWidthPx(e){const t=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}const s=this.el.querySelector(".app-shell__panel");const n=s?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return l(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const t=v(e);if(!t)return;e.preventDefault();const s=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(t==="toggle-panel-nav"){void s?.toggleCollapsed();return}if(t==="close-panel-tools"){void n?.closeDrawer();return}if(t.startsWith("open-tool:")&&n){const e=t.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");const s=[this.el,e,t].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(x);if(t)t.style.removeProperty(w)};const i=l(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(s);n();return}const a=this.resolveViewportDimensions();const o=this.resolvePanelWidthPx(e);const h=C();const c=D(o);this.syncChromeLayoutVars(e,t,h,c);const p=P(i);const d=S({width:a.width,height:a.height});const f=r(i);for(const e of s){if(e===this.el){this.applyGradientVars(e,{[y]:p,[_]:d,[x]:h,[w]:c,[k]:f});continue}const t=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:p,[_]:d,[k]:f,[x]:t?null:h,[w]:t?c:null})}}render(){const e=this.chromeLayerActive();const t={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"44f9aed7809c500fc5eeb6d760b1c8ef387fd693",class:t},n("div",{key:"933ce38b8edc171bd85eca64af407f4e403b8310",class:"app-shell__row"},n("div",{key:"65a2d40975a0e7ac334906e79a3ccb09ea10add0",class:"app-shell__chrome","aria-hidden":"true"}),n("div",{key:"792e5e7a5fcd9eb05a22a9241b99642e6bb79ff8",class:"app-shell__panel"},n("slot",{key:"04cfbff63d431c39bd95c857edccf0d18bbfe1d0",name:"panel"})),n("div",{key:"2693ad93c70318fa2f956c0637c6e12acdf87a23",class:"app-shell__main"},n("div",{key:"cb770d5008b0541c66d1e6ee5f5743ae6984778b",class:"app-shell__bar"},n("slot",{key:"dfca2c0617ee5376876bdb721582d470621e708e",name:"bar"})),n("div",{key:"4e37b8b38244d6e754fffc3aeb355b3f601eac71",class:"app-shell__tools"},n("slot",{key:"2a0397b368ea5c670c99e85b7cb915a32a7f6526",name:"tools"})),n("div",{key:"cec11b739c1544d5b14848cca0a1eea63426908a",class:"app-shell__content"},n("slot",{key:"5c05c87ab6d7b40bbc3c393d00b2e58314cac39e"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return B()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(t(e))){customElements.define(t(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
2
2
  //# sourceMappingURL=ds-app-shell.js.map
package/dist/components/ds-app-shell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["TOOL_SHORTCUT_KEYS","k","a","s","m","n","isBareShellShortcutKey","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","buildShellRadialGradient","preset","DEFAULT_SHELL_GRADIENT_PRESET","buildShellRadialGradientForPreset","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradientPreset","shortcutsEnabled","resizeObserver","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","schedule","panel","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","normalizeShellGradientPreset","handleWindowKeyDown","action","preventDefault","tools","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","size","opacity","shellGradientPresetOpacity","isBar","tagName","render","chromeActive","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-shortcuts.ts","src/wc/nav/shell-gradient.ts","src/wc/nav/shell-chrome-metrics.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellShortcutAction =\n | 'toggle-panel-nav'\n | 'close-panel-tools'\n | `open-tool:${PanelToolsToolId}`;\n\nconst TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {\n k: 'search',\n a: 'agents',\n s: 'stacks',\n m: 'messages',\n n: 'activity',\n};\n\n/** Tool shortcut keys (K/A/S/M/N/?) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */\nexport function isBareShellShortcutKey(\n e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): boolean {\n return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;\n}\n\n/** Skip shell shortcuts while typing in an editable control. */\nexport function isEditableShortcutTarget(target: EventTarget | null): boolean {\n if (!target || typeof target !== 'object') return false;\n if (!('closest' in target) || typeof target.closest !== 'function') return false;\n\n const el = target as Element & { isContentEditable?: boolean };\n\n const editable = el.closest(\n 'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]',\n );\n if (editable) return true;\n\n const role = el.getAttribute('role');\n if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;\n\n return Boolean(el.isContentEditable);\n}\n\nfunction normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {\n if (e.key === '[' || e.code === 'BracketLeft') return '[';\n if (e.key === ']' || e.code === 'BracketRight') return ']';\n return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();\n}\n\n/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */\nexport function resolveShellShortcut(\n e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n if (\n (e.key === '?' || (e.code === 'Slash' && e.shiftKey)) &&\n !e.metaKey && !e.ctrlKey && !e.altKey\n ) {\n return 'open-tool:help';\n }\n if (!isBareShellShortcutKey(e)) return null;\n\n const key = normalizedShortcutKey(e);\n if (key === '[') return 'toggle-panel-nav';\n if (key === ']') return 'close-panel-tools';\n\n const toolId = TOOL_SHORTCUT_KEYS[key];\n if (toolId) return `open-tool:${toolId}`;\n\n return null;\n}\n","/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n buildShellRadialGradientForPreset,\n normalizeShellGradientPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n SHELL_GRADIENT_PRESETS,\n SHELL_GRADIENT_PRESET_LABELS,\n buildShellRadialGradientForPreset,\n buildShellRadialGradientFromStops,\n isShellGradientPreset,\n shellGradientPresetOpacity,\n shellGradientPresetRecipe,\n shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n return normalizeShellGradientPreset(preset) !== 'none';\n}\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image for the selected shell preset. */\nexport function shellGradientImage(\n preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n width: number;\n height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-app-shell` element box — the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n if (!w) return { width: 0, height: 0 };\n\n const visual = w.visualViewport;\n return {\n width: Math.round(visual?.width ?? w.innerWidth),\n height: Math.round(visual?.height ?? w.innerHeight),\n };\n}\n\nexport interface ShellGradientLayout {\n width: number;\n height: number;\n panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n if (typeof document === 'undefined') return 0;\n\n const probe = document.createElement('div');\n probe.style.cssText =\n 'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n cssVarName +\n ');';\n context.appendChild(probe);\n const width = probe.getBoundingClientRect().width;\n context.removeChild(probe);\n return width;\n}\n\nexport interface PanelNavWidthTokens {\n expandedPx: number;\n collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n return {\n expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n };\n}\n\nexport function isPanelNavCollapsed(\n panelNavHost: HTMLElement | null,\n navRoot: HTMLElement | null,\n): boolean {\n if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n tokens: PanelNavWidthTokens,\n collapsed: boolean,\n): number {\n return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n return shellGradientPositionBar(panelWidthPx);\n}\n",":host {\n display: block;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n --ds-shell-panel-tools-width: var(--dimension-panel-width-sm);\n}\n\n@media (min-width: 768px) and (max-width: 1199px) {\n :host {\n --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n }\n}\n\n.app-shell {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n font-family: var(--typography-font-family, system-ui);\n}\n\n:host(.app-shell--gradient) {\n --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n.app-shell__row {\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n height: 100%;\n position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.app-shell__chrome {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome {\n background-color: var(--_shell-chrome-bg);\n}\n\n:host(.app-shell--gradient) .app-shell__chrome::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n background-position: 0 0;\n background-attachment: fixed;\n z-index: 1;\n opacity: var(--ds-shell-gradient-opacity, 1);\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-repeat: no-repeat;\n}\n\n.app-shell__panel {\n flex: 0 0 auto;\n min-height: 0;\n height: 100%;\n position: relative;\n /* Above main so resize handle line can paint over the workspace edge */\n z-index: 2;\n}\n\n.app-shell__panel ::slotted(ds-panel-nav) {\n display: block;\n height: 100%;\n}\n\n.app-shell__main {\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-areas:\n 'bar tools'\n 'content tools';\n position: relative;\n z-index: 1;\n}\n\n.app-shell__bar {\n grid-area: bar;\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n display: block;\n}\n\n.app-shell__content {\n grid-area: content;\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n contain: layout;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n:host(.app-shell--gradient) .app-shell__content {\n position: relative;\n z-index: 1;\n background-color: var(--color-background-primary);\n}\n\n.app-shell__tools {\n grid-area: tools;\n flex: 0 0 auto;\n min-width: 0;\n min-height: 0;\n height: 100%;\n display: flex;\n position: relative;\n z-index: 0;\n overflow: hidden;\n}\n\n.app-shell__tools ::slotted(ds-panel-tools) {\n display: block;\n height: 100%;\n min-height: 0;\n}\n","import { Component, Prop, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n isEditableShortcutTarget,\n resolveShellShortcut,\n} from '../../nav/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n normalizeShellGradientPreset,\n type ShellGradientPreset,\n} from '../../nav/shell-gradient-presets';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionDepth,\n createRafCoalescer,\n readChromeTransitionSource,\n} from '../../nav/chrome-transition';\nimport {\n isPanelNavCollapsed,\n panelWidthPxFromTokens,\n readPanelNavWidthTokens,\n type PanelNavWidthTokens,\n} from '../../nav/shell-chrome-metrics';\nimport {\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_OPACITY_VAR,\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n SHELL_GRADIENT_SIZE_VAR,\n buildShellRadialGradient,\n readShellViewportDimensions,\n shellGradientPositionBar,\n shellGradientPositionPanel,\n shellGradientPresetOpacity,\n shellGradientSize,\n} from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-app-shell',\n styleUrl: 'AppShell.css',\n scoped: true,\n})\nexport class AppShell {\n /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n /**\n * Shell chrome wash preset. `none` renders solid chrome; the remaining\n * presets use token-based washes that adapt to the active color theme.\n */\n @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n DEFAULT_SHELL_GRADIENT_PRESET;\n\n /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N/? toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n @Element() el!: HTMLElement;\n\n private resizeObserver: ResizeObserver | null = null;\n private readonly panelNavTransition = new ChromeTransitionDepth();\n private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n private cachedViewportWidth = 0;\n private cachedViewportHeight = 0;\n private onWindowResize = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n private onVisualViewportChange = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n\n componentDidLoad() {\n this.syncSlottedNavStyle();\n this.connectMetricsObserver();\n this.connectViewportListeners();\n this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n requestAnimationFrame(() => {\n this.cachePanelWidthTokens();\n this.scheduleChromeSync();\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.disconnectViewportListeners();\n this.chromeSyncCoalescer.cancel();\n this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n @Watch('navStyle')\n @Watch('gradientPreset')\n onShellPropsChange() {\n this.syncSlottedNavStyle();\n this.scheduleChromeSync();\n }\n\n private onChromeTransitionStart = (event: Event) => {\n if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n this.panelNavTransition.enter();\n const viewport = readShellViewportDimensions();\n this.cachedViewportWidth = viewport.width;\n this.cachedViewportHeight = viewport.height;\n this.syncChrome();\n };\n\n private onChromeTransitionEnd = (event: Event) => {\n if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleChromeSync();\n }\n };\n\n /** Coalesce ResizeObserver bursts to one layout read per frame. */\n private scheduleChromeSync() {\n this.chromeSyncCoalescer.schedule();\n }\n\n private syncSlottedNavStyle() {\n const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n if (panel) {\n panel.setAttribute('nav-style', this.navStyle);\n panel.navStyle = this.navStyle;\n }\n if (bar) {\n bar.setAttribute('nav-style', this.navStyle);\n bar.navStyle = this.navStyle;\n }\n }\n\n private connectMetricsObserver() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n });\n this.resizeObserver.observe(this.el);\n const panelWrap = this.el.querySelector('.app-shell__panel');\n if (panelWrap) this.resizeObserver.observe(panelWrap);\n }\n\n private connectViewportListeners() {\n if (typeof window === 'undefined') return;\n\n window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n const visual = window.visualViewport;\n if (visual) {\n visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n }\n }\n\n private disconnectViewportListeners() {\n if (typeof window === 'undefined') return;\n\n window.removeEventListener('resize', this.onWindowResize);\n\n const visual = window.visualViewport;\n if (visual) {\n visual.removeEventListener('resize', this.onVisualViewportChange);\n visual.removeEventListener('scroll', this.onVisualViewportChange);\n }\n }\n\n private cachePanelWidthTokens() {\n const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n if (!navRoot) return;\n this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n }\n\n private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n const style = target.style;\n for (const [name, value] of Object.entries(vars)) {\n if (value === null) style.removeProperty(name);\n else style.setProperty(name, value);\n }\n }\n\n private clearGradientPaintVars(targets: HTMLElement[]) {\n const keys = [\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_SIZE_VAR,\n SHELL_GRADIENT_OPACITY_VAR,\n ];\n for (const target of targets) {\n for (const key of keys) target.style.removeProperty(key);\n }\n }\n\n /** Panel/bar wash offsets for scroll fades and badge rings. */\n private syncChromeLayoutVars(\n panel: HTMLElement | null,\n bar: HTMLElement | null,\n panelPosition: string,\n barPosition: string,\n ) {\n if (panel) {\n panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n }\n if (bar) {\n bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n }\n }\n\n private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n }\n\n const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;\n const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n if (measured > 0) return measured;\n\n if (this.panelWidthTokens.expandedPx > 0) {\n const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n }\n\n return 0;\n }\n\n /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n private resolveViewportDimensions(): { width: number; height: number } {\n if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n return {\n width: this.cachedViewportWidth,\n height: this.cachedViewportHeight,\n };\n }\n\n return readShellViewportDimensions();\n }\n\n private chromeLayerActive(): boolean {\n return normalizeShellGradientPreset(this.gradientPreset) !== 'none';\n }\n\n @Listen('keydown', { target: 'window', capture: true })\n handleWindowKeyDown(e: KeyboardEvent) {\n if (!this.shortcutsEnabled) return;\n if (isEditableShortcutTarget(e.target)) return;\n\n const action = resolveShellShortcut(e);\n if (!action) return;\n\n e.preventDefault();\n\n const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n const tools = this.el.querySelector('ds-panel-tools') as HTMLDsPanelToolsElement | null;\n\n if (action === 'toggle-panel-nav') {\n void panel?.toggleCollapsed();\n return;\n }\n\n if (action === 'close-panel-tools') {\n void tools?.closeDrawer();\n return;\n }\n\n if (action.startsWith('open-tool:') && tools) {\n const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n void tools.activateTool(toolId);\n }\n }\n\n private syncChrome() {\n const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n const clearLayoutVars = () => {\n if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n };\n\n const preset = normalizeShellGradientPreset(this.gradientPreset);\n if (preset === 'none') {\n this.clearGradientPaintVars(targets);\n clearLayoutVars();\n return;\n }\n\n const viewport = this.resolveViewportDimensions();\n const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n const panelPosition = shellGradientPositionPanel();\n const barPosition = shellGradientPositionBar(panelWidth);\n\n this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n const image = buildShellRadialGradient(preset);\n\n const size = shellGradientSize({\n width: viewport.width,\n height: viewport.height,\n });\n const opacity = shellGradientPresetOpacity(preset);\n\n for (const target of targets) {\n if (target === this.el) {\n this.applyGradientVars(target, {\n [SHELL_GRADIENT_IMAGE_VAR]: image,\n [SHELL_GRADIENT_SIZE_VAR]: size,\n [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n });\n continue;\n }\n\n const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n this.applyGradientVars(target, {\n [SHELL_GRADIENT_IMAGE_VAR]: image,\n [SHELL_GRADIENT_SIZE_VAR]: size,\n [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n });\n }\n }\n\n render() {\n const chromeActive = this.chromeLayerActive();\n const shellCls: Record<string, boolean> = {\n 'app-shell': true,\n 'app-shell--gradient': chromeActive,\n [`app-shell--${this.navStyle}`]: true,\n };\n\n return (\n <Host class={shellCls}>\n <div class=\"app-shell__row\">\n {chromeActive ? <div class=\"app-shell__chrome\" aria-hidden=\"true\" /> : null}\n <div class=\"app-shell__panel\">\n <slot name=\"panel\" />\n </div>\n <div class=\"app-shell__main\">\n <div class=\"app-shell__bar\">\n <slot name=\"bar\" />\n </div>\n <div class=\"app-shell__tools\">\n <slot name=\"tools\" />\n </div>\n <div class=\"app-shell__content\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["TOOL_SHORTCUT_KEYS","k","a","s","m","n","isBareShellShortcutKey","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","buildShellRadialGradient","preset","DEFAULT_SHELL_GRADIENT_PRESET","buildShellRadialGradientForPreset","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradientPreset","shortcutsEnabled","resizeObserver","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","schedule","panel","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","normalizeShellGradientPreset","handleWindowKeyDown","action","preventDefault","tools","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","size","opacity","shellGradientPresetOpacity","isBar","tagName","render","chromeActive","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-shortcuts.ts","src/wc/nav/shell-gradient.ts","src/wc/nav/shell-chrome-metrics.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellShortcutAction =\n | 'toggle-panel-nav'\n | 'close-panel-tools'\n | `open-tool:${PanelToolsToolId}`;\n\nconst TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {\n k: 'search',\n a: 'agents',\n s: 'stacks',\n m: 'messages',\n n: 'activity',\n};\n\n/** Tool shortcut keys (K/A/S/M/N/?) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */\nexport function isBareShellShortcutKey(\n e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): boolean {\n return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;\n}\n\n/** Skip shell shortcuts while typing in an editable control. */\nexport function isEditableShortcutTarget(target: EventTarget | null): boolean {\n if (!target || typeof target !== 'object') return false;\n if (!('closest' in target) || typeof target.closest !== 'function') return false;\n\n const el = target as Element & { isContentEditable?: boolean };\n\n const editable = el.closest(\n 'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]',\n );\n if (editable) return true;\n\n const role = el.getAttribute('role');\n if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;\n\n return Boolean(el.isContentEditable);\n}\n\nfunction normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {\n if (e.key === '[' || e.code === 'BracketLeft') return '[';\n if (e.key === ']' || e.code === 'BracketRight') return ']';\n return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();\n}\n\n/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */\nexport function resolveShellShortcut(\n e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n if (\n (e.key === '?' || (e.code === 'Slash' && e.shiftKey)) &&\n !e.metaKey && !e.ctrlKey && !e.altKey\n ) {\n return 'open-tool:help';\n }\n if (!isBareShellShortcutKey(e)) return null;\n\n const key = normalizedShortcutKey(e);\n if (key === '[') return 'toggle-panel-nav';\n if (key === ']') return 'close-panel-tools';\n\n const toolId = TOOL_SHORTCUT_KEYS[key];\n if (toolId) return `open-tool:${toolId}`;\n\n return null;\n}\n","/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n buildShellRadialGradientForPreset,\n normalizeShellGradientPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n SHELL_GRADIENT_PRESETS,\n SHELL_GRADIENT_PRESET_LABELS,\n buildShellRadialGradientForPreset,\n buildShellRadialGradientFromStops,\n isShellGradientPreset,\n shellGradientPresetOpacity,\n shellGradientPresetRecipe,\n shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n return normalizeShellGradientPreset(preset) !== 'none';\n}\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image for the selected shell preset. */\nexport function shellGradientImage(\n preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n width: number;\n height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-app-shell` element box — the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n if (!w) return { width: 0, height: 0 };\n\n const visual = w.visualViewport;\n return {\n width: Math.round(visual?.width ?? w.innerWidth),\n height: Math.round(visual?.height ?? w.innerHeight),\n };\n}\n\nexport interface ShellGradientLayout {\n width: number;\n height: number;\n panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n if (typeof document === 'undefined') return 0;\n\n const probe = document.createElement('div');\n probe.style.cssText =\n 'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n cssVarName +\n ');';\n context.appendChild(probe);\n const width = probe.getBoundingClientRect().width;\n context.removeChild(probe);\n return width;\n}\n\nexport interface PanelNavWidthTokens {\n expandedPx: number;\n collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n return {\n expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n };\n}\n\nexport function isPanelNavCollapsed(\n panelNavHost: HTMLElement | null,\n navRoot: HTMLElement | null,\n): boolean {\n if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n tokens: PanelNavWidthTokens,\n collapsed: boolean,\n): number {\n return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n return shellGradientPositionBar(panelWidthPx);\n}\n",":host {\n display: block;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n --ds-shell-panel-tools-width: var(--dimension-panel-width-sm);\n}\n\n@media (min-width: 768px) and (max-width: 1199px) {\n :host {\n --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n }\n}\n\n.app-shell {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n font-family: var(--typography-font-family, system-ui);\n}\n\n:host {\n --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n.app-shell__row {\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n height: 100%;\n position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.app-shell__chrome {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n background-color: var(--_shell-chrome-bg);\n}\n\n:host(.app-shell--gradient) .app-shell__chrome::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n background-position: 0 0;\n background-attachment: fixed;\n z-index: 1;\n opacity: var(--ds-shell-gradient-opacity, 1);\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-repeat: no-repeat;\n}\n\n.app-shell__panel {\n flex: 0 0 auto;\n min-height: 0;\n height: 100%;\n position: relative;\n /* Above main so resize handle line can paint over the workspace edge */\n z-index: 2;\n}\n\n.app-shell__panel ::slotted(ds-panel-nav) {\n display: block;\n height: 100%;\n}\n\n.app-shell__main {\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-areas:\n 'bar tools'\n 'content tools';\n position: relative;\n z-index: 1;\n}\n\n.app-shell__bar {\n grid-area: bar;\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n display: block;\n}\n\n.app-shell__content {\n grid-area: content;\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n contain: layout;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.app-shell__content {\n position: relative;\n z-index: 1;\n background-color: var(--color-background-primary);\n}\n\n.app-shell__tools {\n grid-area: tools;\n flex: 0 0 auto;\n min-width: 0;\n min-height: 0;\n height: 100%;\n display: flex;\n position: relative;\n z-index: 0;\n overflow: hidden;\n}\n\n.app-shell__tools ::slotted(ds-panel-tools) {\n display: block;\n height: 100%;\n min-height: 0;\n}\n","import { Component, Prop, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n isEditableShortcutTarget,\n resolveShellShortcut,\n} from '../../nav/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n DEFAULT_SHELL_GRADIENT_PRESET,\n normalizeShellGradientPreset,\n type ShellGradientPreset,\n} from '../../nav/shell-gradient-presets';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionDepth,\n createRafCoalescer,\n readChromeTransitionSource,\n} from '../../nav/chrome-transition';\nimport {\n isPanelNavCollapsed,\n panelWidthPxFromTokens,\n readPanelNavWidthTokens,\n type PanelNavWidthTokens,\n} from '../../nav/shell-chrome-metrics';\nimport {\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_OPACITY_VAR,\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n SHELL_GRADIENT_SIZE_VAR,\n buildShellRadialGradient,\n readShellViewportDimensions,\n shellGradientPositionBar,\n shellGradientPositionPanel,\n shellGradientPresetOpacity,\n shellGradientSize,\n} from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-app-shell',\n styleUrl: 'AppShell.css',\n scoped: true,\n})\nexport class AppShell {\n /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n /**\n * Shell chrome wash preset. `none` renders solid chrome; the remaining\n * presets use token-based washes that adapt to the active color theme.\n */\n @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n DEFAULT_SHELL_GRADIENT_PRESET;\n\n /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N/? toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n @Element() el!: HTMLElement;\n\n private resizeObserver: ResizeObserver | null = null;\n private readonly panelNavTransition = new ChromeTransitionDepth();\n private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n private cachedViewportWidth = 0;\n private cachedViewportHeight = 0;\n private onWindowResize = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n private onVisualViewportChange = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n\n componentDidLoad() {\n this.syncSlottedNavStyle();\n this.connectMetricsObserver();\n this.connectViewportListeners();\n this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n requestAnimationFrame(() => {\n this.cachePanelWidthTokens();\n this.scheduleChromeSync();\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.disconnectViewportListeners();\n this.chromeSyncCoalescer.cancel();\n this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n }\n\n @Watch('navStyle')\n @Watch('gradientPreset')\n onShellPropsChange() {\n this.syncSlottedNavStyle();\n this.scheduleChromeSync();\n }\n\n private onChromeTransitionStart = (event: Event) => {\n if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n this.panelNavTransition.enter();\n const viewport = readShellViewportDimensions();\n this.cachedViewportWidth = viewport.width;\n this.cachedViewportHeight = viewport.height;\n this.syncChrome();\n };\n\n private onChromeTransitionEnd = (event: Event) => {\n if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n this.panelNavTransition.exit();\n if (!this.panelNavTransition.isActive) {\n this.scheduleChromeSync();\n }\n };\n\n /** Coalesce ResizeObserver bursts to one layout read per frame. */\n private scheduleChromeSync() {\n this.chromeSyncCoalescer.schedule();\n }\n\n private syncSlottedNavStyle() {\n const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n if (panel) {\n panel.setAttribute('nav-style', this.navStyle);\n panel.navStyle = this.navStyle;\n }\n if (bar) {\n bar.setAttribute('nav-style', this.navStyle);\n bar.navStyle = this.navStyle;\n }\n }\n\n private connectMetricsObserver() {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n });\n this.resizeObserver.observe(this.el);\n const panelWrap = this.el.querySelector('.app-shell__panel');\n if (panelWrap) this.resizeObserver.observe(panelWrap);\n }\n\n private connectViewportListeners() {\n if (typeof window === 'undefined') return;\n\n window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n const visual = window.visualViewport;\n if (visual) {\n visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n }\n }\n\n private disconnectViewportListeners() {\n if (typeof window === 'undefined') return;\n\n window.removeEventListener('resize', this.onWindowResize);\n\n const visual = window.visualViewport;\n if (visual) {\n visual.removeEventListener('resize', this.onVisualViewportChange);\n visual.removeEventListener('scroll', this.onVisualViewportChange);\n }\n }\n\n private cachePanelWidthTokens() {\n const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n if (!navRoot) return;\n this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n }\n\n private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n const style = target.style;\n for (const [name, value] of Object.entries(vars)) {\n if (value === null) style.removeProperty(name);\n else style.setProperty(name, value);\n }\n }\n\n private clearGradientPaintVars(targets: HTMLElement[]) {\n const keys = [\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_SIZE_VAR,\n SHELL_GRADIENT_OPACITY_VAR,\n ];\n for (const target of targets) {\n for (const key of keys) target.style.removeProperty(key);\n }\n }\n\n /** Panel/bar wash offsets for scroll fades and badge rings. */\n private syncChromeLayoutVars(\n panel: HTMLElement | null,\n bar: HTMLElement | null,\n panelPosition: string,\n barPosition: string,\n ) {\n if (panel) {\n panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n }\n if (bar) {\n bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n }\n }\n\n private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n }\n\n const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;\n const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n if (measured > 0) return measured;\n\n if (this.panelWidthTokens.expandedPx > 0) {\n const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n }\n\n return 0;\n }\n\n /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n private resolveViewportDimensions(): { width: number; height: number } {\n if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n return {\n width: this.cachedViewportWidth,\n height: this.cachedViewportHeight,\n };\n }\n\n return readShellViewportDimensions();\n }\n\n private chromeLayerActive(): boolean {\n return normalizeShellGradientPreset(this.gradientPreset) !== 'none';\n }\n\n @Listen('keydown', { target: 'window', capture: true })\n handleWindowKeyDown(e: KeyboardEvent) {\n if (!this.shortcutsEnabled) return;\n if (isEditableShortcutTarget(e.target)) return;\n\n const action = resolveShellShortcut(e);\n if (!action) return;\n\n e.preventDefault();\n\n const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n const tools = this.el.querySelector('ds-panel-tools') as HTMLDsPanelToolsElement | null;\n\n if (action === 'toggle-panel-nav') {\n void panel?.toggleCollapsed();\n return;\n }\n\n if (action === 'close-panel-tools') {\n void tools?.closeDrawer();\n return;\n }\n\n if (action.startsWith('open-tool:') && tools) {\n const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n void tools.activateTool(toolId);\n }\n }\n\n private syncChrome() {\n const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n const clearLayoutVars = () => {\n if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n };\n\n const preset = normalizeShellGradientPreset(this.gradientPreset);\n if (preset === 'none') {\n this.clearGradientPaintVars(targets);\n clearLayoutVars();\n return;\n }\n\n const viewport = this.resolveViewportDimensions();\n const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n const panelPosition = shellGradientPositionPanel();\n const barPosition = shellGradientPositionBar(panelWidth);\n\n this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n const image = buildShellRadialGradient(preset);\n\n const size = shellGradientSize({\n width: viewport.width,\n height: viewport.height,\n });\n const opacity = shellGradientPresetOpacity(preset);\n\n for (const target of targets) {\n if (target === this.el) {\n this.applyGradientVars(target, {\n [SHELL_GRADIENT_IMAGE_VAR]: image,\n [SHELL_GRADIENT_SIZE_VAR]: size,\n [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n });\n continue;\n }\n\n const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n this.applyGradientVars(target, {\n [SHELL_GRADIENT_IMAGE_VAR]: image,\n [SHELL_GRADIENT_SIZE_VAR]: size,\n [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n });\n }\n }\n\n render() {\n const chromeActive = this.chromeLayerActive();\n const shellCls: Record<string, boolean> = {\n 'app-shell': true,\n 'app-shell--gradient': chromeActive,\n [`app-shell--${this.navStyle}`]: true,\n };\n\n return (\n <Host class={shellCls}>\n <div class=\"app-shell__row\">\n <div class=\"app-shell__chrome\" aria-hidden=\"true\" />\n <div class=\"app-shell__panel\">\n <slot name=\"panel\" />\n </div>\n <div class=\"app-shell__main\">\n <div class=\"app-shell__bar\">\n <slot name=\"bar\" />\n </div>\n <div class=\"app-shell__tools\">\n <slot name=\"tools\" />\n </div>\n <div class=\"app-shell__content\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/ds-bar-nav.js CHANGED
@@ -1,2 +1,2 @@
1
- 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 c}from"./p-BOQnc-M4.js";import{C as l,c as d,a as f,b as u,r as b,d as v}from"./p-BKhG2xrW.js";import{d as p}from"./p-cgo-rgl4.js";import{d as g}from"./p-DPxfMUfH.js";import{d as m}from"./p-9Qu1ls2y.js";import{d as y}from"./p-B-cWYMqs.js";import{d as _}from"./p-DkIbxCpi.js";import{d as w}from"./p-_OGE_E6L.js";import{d as C}from"./p-DhgDNluD.js";import{d as k}from"./p-CxOQaZ4f.js";import{d as x}from"./p-CWd8L7Fk.js";function T(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function E(s){return T(s,'[role="tablist"]')}function O(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,dot:n.dot,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function F(s,t){return O(P(s),t)}function M(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function D(s,t,i,e,n){if(s.length===0||t<=0)return 0;const r=j(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=j(s,t,e,n);if(i>a)break;o=t}return o}function S(s){let t=s.length;while(t>0&&a(s[t-1])){t-=1}return s.slice(0,t)}function P(s){let t=0;while(t<s.length&&a(s[t])){t+=1}return s.slice(t)}function j(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 H=()=>`.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-h:focus-visible,.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-h,.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-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.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-h,.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-h::after,.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.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-app-shell:not([gradient-preset='none']) .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-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const L=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.moreTabsLabel="More tabs";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 l;this.panelToolsTransition=new l;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=E(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=E(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=M(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=D(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const r=S(this.resolvedTabs.slice(0,n));const a=this.resolvedTabs.slice(r.length);this.setOverflowTabLayout(r,a);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}incomingTabs(){return this.tabsJson?h(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=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}=c(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=T(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:"779f5454e509ecf0ce09aa7dcb7a52aede6ce95f"},e("header",{key:"318e7181b777144e4ff0c07cf5a5a277cb65e74b",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:"74b12bb885612de55eb41b610d5e4443cb13e7c2",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:"6b2541e77d23bdd665e216ee7bcd60200679fc57",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:"493c52036a4baaf4e220a1a0539f40593115ddb2",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"875a186404d8db0a651b66ff4b1f03330cd709d1",class:"bar-nav__heading",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"0608ebbcb5e46c94e919576bde8727235a74a6d1",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"c1d3beaff2a343e8a303f9bb3a316cb5754c9c97",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 H()}},[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"],moreTabsLabel:[1,"more-tabs-label"],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}]}]);L.HOST_PROP_SYNC_BUDGET=8;L.INTRINSIC_WIDTH_RETRY_MAX=3;L.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;L.OVERFLOW_HYSTERESIS_PX=8;function V(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-switch","ds-tab-group-nav","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),L)}break;case"ds-badge":if(!customElements.get(r(s))){p()}break;case"ds-button-unfilled":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-switch":if(!customElements.get(r(s))){C()}break;case"ds-tab-group-nav":if(!customElements.get(r(s))){k()}break;case"ds-text":if(!customElements.get(r(s))){x()}break}}))}V();const W=L;const A=V;export{W as DsBarNav,A as defineCustomElement};
1
+ 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-BKhG2xrW.js";import{d as p}from"./p-cgo-rgl4.js";import{d as g}from"./p-DPxfMUfH.js";import{d as m}from"./p-9Qu1ls2y.js";import{d as y}from"./p-B5kfuVQz.js";import{d as w}from"./p-RBe9XqjU.js";import{d as _}from"./p-DHwtgzjP.js";import{d as C}from"./p-DhgDNluD.js";import{d as k}from"./p-CxOQaZ4f.js";import{d as x}from"./p-CWd8L7Fk.js";function T(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function F(s){return T(s,'[role="tablist"]')}function O(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,dot:n.dot,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function D(s,t){return O(S(s),t)}function E(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=j(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=j(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 j(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 H=()=>`.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-h:focus-visible,.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-h,.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-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.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-h,.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-h::after,.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.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-app-shell:not([gradient-preset='none']) .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-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const L=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.moreTabsLabel="More tabs";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=F(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=F(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=E(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=D(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=T(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:"3546d56abbb33fab405864fdaec9ff1a5ba808c4"},e("header",{key:"111095a616b4797bb401ea2e39fee035407f6f57",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:"e5d612caba599e01dc85ac697b27ad54279c4de2",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:"07825af59fdc74a031b547e07ed52c69178de9d1",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:"bc8831d51cd02870b284003208f97a6dd4f03bea",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"f841ba4e4334c9e42cf7e0b019d8273b8c5d8989",class:"bar-nav__heading",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"08da988f7dfdd59bf38e361bbc8dd21dc324372f",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"5d20f29c75456bcd3e0d39c3aed0a3ed42088a5a",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:D(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 H()}},[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"],moreTabsLabel:[1,"more-tabs-label"],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}]}]);L.HOST_PROP_SYNC_BUDGET=8;L.INTRINSIC_WIDTH_RETRY_MAX=3;L.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;L.OVERFLOW_HYSTERESIS_PX=8;function V(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-switch","ds-tab-group-nav","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),L)}break;case"ds-badge":if(!customElements.get(r(s))){p()}break;case"ds-button-unfilled":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))){w()}break;case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){_()}break;case"ds-switch":if(!customElements.get(r(s))){C()}break;case"ds-tab-group-nav":if(!customElements.get(r(s))){k()}break;case"ds-text":if(!customElements.get(r(s))){x()}break}}))}V();const z=L;const R=V;export{z as DsBarNav,R as defineCustomElement};
2
2
  //# sourceMappingURL=ds-bar-nav.js.map
package/dist/components/ds-chart-bar.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as t,H as a,h as r,a as s,t as e}from"./index.js";import{c as i}from"./p-CMv_7vFs.js";import{m as c,b as o,l as n}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.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-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.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 a{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 a=this.height-l.top-l.bottom;const e=c(this.data,(t=>t.value))??0;const h=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=n().domain([0,e||1]).range([a,0]).nice();const f=d.ticks(4);return r(s,{key:"06e4248267c46caa7248fb2fcf829d092bc819f7",class:"chart-bar"},r("svg",{key:"bedc0b0d322253b8e42c033a28c035f0f5725207",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(", ")},r("g",{key:"48d4b20c9a803bd443eddde9f1f754139bc4c191",transform:`translate(${l.left}, ${l.top})`},f.map((a=>r("g",{key:`grid-${a}`,transform:`translate(0, ${d(a)})`},r("line",{class:"chart-bar__gridline",x1:0,x2:t}),r("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},a)))),this.data.map(((t,s)=>{const e=h.bandwidth();const c=h(t.label)??0;const o=d(t.value);return r("g",{key:t.label},r("rect",{class:"chart-bar__bar",x:c,y:o,width:e,height:a-o,fill:t.color??i(s)}),r("text",{class:"chart-bar__axis-label",x:c+e/2,y:a+16,"text-anchor":"middle"},t.label))})))))}static get style(){return h()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2]}]);function f(){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}}))}f();const b=d;const m=f;export{b as DsChartBar,m as defineCustomElement};
1
+ import{p as t,H as a,h as r,a as s,t as e}from"./index.js";import{c as i}from"./p-CMv_7vFs.js";import{m as c,b as o,l as n}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.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-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.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 a{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 a=this.height-l.top-l.bottom;const e=c(this.data,(t=>t.value))??0;const h=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=n().domain([0,e||1]).range([a,0]).nice();const b=d.ticks(4);return r(s,{key:"dcba1c2ad99e98346b0e0f8aa0953dac31b614b7",class:"chart-bar"},r("svg",{key:"2aa29f61a611357b630a4e135df4b2779b083797",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(", ")},r("g",{key:"830f6dc6797588c5cb29ae7a4da5ec76d44fd9be",transform:`translate(${l.left}, ${l.top})`},b.map((a=>r("g",{key:`grid-${a}`,transform:`translate(0, ${d(a)})`},r("line",{class:"chart-bar__gridline",x1:0,x2:t}),r("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},a)))),this.data.map(((t,s)=>{const e=h.bandwidth();const c=h(t.label)??0;const o=d(t.value);return r("g",{key:t.label},r("rect",{class:"chart-bar__bar",x:c,y:o,width:e,height:a-o,fill:t.color??i(s)}),r("text",{class:"chart-bar__axis-label",x:c+e/2,y:a+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};
2
2
  //# sourceMappingURL=ds-chart-bar.js.map
package/dist/components/ds-chart-donut.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{T as a}from"./p-drBA73M_.js";import{r as c}from"./p-BWUTr_XN.js";import{f as h}from"./p-BBpASejH.js";import{w as u,c as l,a as f}from"./p-CrCGIx8s.js";function d(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const p=Math.abs;const y=Math.atan2;const g=Math.cos;const v=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 z=2*_;function k(t){return t>1?0:t<-1?_:Math.acos(t)}function $(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function A(t){return t.innerRadius}function C(t){return t.outerRadius}function S(t){return t.startAngle}function j(t){return t.endAngle}function B(t){return t&&t.padAngle}function R(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<M)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function L(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/x(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,g=(f+p)/2,m=(d+y)/2,b=p-f,M=y-d,_=b*b+M*M,w=s-r,z=f*y-p*d,k=(M<0?-1:1)*x(v(0,w*w*_-z*z)),$=(z*M-b*k)/_,A=(-z*b-M*k)/_,C=(z*M+b*k)/_,S=(-z*b+M*k)/_,j=$-g,B=A-m,R=C-g,L=S-m;if(j*j+B*B>R*R+L*L)$=C,A=S;return{cx:$,cy:A,x01:-u,y01:-l,x11:$*(s/w-1),y11:A*(s/w-1)}}function N(){var t=A,n=C,e=l(0),i=null,s=S,r=j,o=B,a=null,c=u(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-w,v=r.apply(this,arguments)-w,A=p(v-d),C=v>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>M))a.moveTo(0,0);else if(A>z-M){a.moveTo(f*g(d),f*b(d));a.arc(0,0,f,d,v,!C);if(l>M){a.moveTo(l*g(v),l*b(v));a.arc(0,0,l,v,d,C)}}else{var S=d,j=v,B=d,N=v,P=A,E=A,F=o.apply(this,arguments)/2,H=F>M&&(i?+i.apply(this,arguments):x(l*l+f*f)),O=m(p(f-l)/2,+e.apply(this,arguments)),T=O,D=O,V,G;if(H>M){var I=$(H/l*b(F)),U=$(H/f*b(F));if((P-=I*2)>M)I*=C?1:-1,B+=I,N-=I;else P=0,B=N=(d+v)/2;if((E-=U*2)>M)U*=C?1:-1,S+=U,j-=U;else E=0,S=j=(d+v)/2}var W=f*g(S),X=f*b(S),q=l*g(N),J=l*b(N);if(O>M){var K=f*g(j),Q=f*b(j),Y=l*g(B),Z=l*b(B),tt;if(A<_){if(tt=R(W,X,Y,Z,K,Q,q,J)){var nt=W-tt[0],et=X-tt[1],it=K-tt[0],st=Q-tt[1],rt=1/b(k((nt*it+et*st)/(x(nt*nt+et*et)*x(it*it+st*st)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);T=m(O,(l-ot)/(rt-1));D=m(O,(f-ot)/(rt+1))}else{T=D=0}}}if(!(E>M))a.moveTo(W,X);else if(D>M){V=L(Y,Z,W,X,f,D,C);G=L(K,Q,q,J,f,D,C);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(D<O)a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,f,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),!C);a.arc(G.cx,G.cy,D,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.moveTo(W,X),a.arc(0,0,f,S,j,!C);if(!(l>M)||!(P>M))a.lineTo(q,J);else if(T>M){V=L(q,J,K,Q,l,-T,C);G=L(W,X,Y,Z,l,-T,C);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(T<O)a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,l,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),C);a.arc(G.cx,G.cy,T,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.arc(0,0,l,N,B,C)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-_/2;return[g(i)*e,b(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:l(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:l(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:l(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:l(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:l(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function P(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function E(t){return t}function F(){var t=E,n=P,e=null,i=l(0),s=l(z),r=l(0);function o(o){var a,c=(o=f(o)).length,h,u,l=0,d=new Array(c),p=new Array(c),y=+i.apply(this,arguments),g=Math.min(z,Math.max(-z,s.apply(this,arguments)-y)),v,m=Math.min(Math.abs(g)/c,r.apply(this,arguments)),b=m*(g<0?-1:1),x;for(a=0;a<c;++a){if((x=p[d[a]=a]=+t(o[a],a,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(a=0,u=l?(g-c*b)/l:0;a<c;++a,y=v){h=d[a],x=p[h],v=y+(x>0?x*u:0)+b,p[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:v,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:l(+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?(i=typeof t==="function"?t:l(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),o):r};return o}const H=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.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-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-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-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const O=.25;const T=0;const D=.82;const V=128;const G=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=a.size200;this.cornerRadius=a.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=V;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return c(a.donutFillMin,V)}get fillMaxPx(){return c(a.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const i=n-e;const s=i*2*D;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??h(r,this.locale);if(this.valueTextEl){const t=d(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const u=this.centerCaption??"";if(this.captionTextEl&&u){const t=d(this.captionTextEl,u,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const r=c(this.cornerRadius,a.radius025);const u=n-e;const l=this.data.reduce(((t,n)=>t+n.value),0);const f=l<=0;const d=this.activeLabel??this.hoveredLabel;const p=N().innerRadius(u).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:F().value((t=>t.value)).sort(null)(this.data);const g=f?N().innerRadius(u).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const v=c(a.lineheightXl,32);const m=c(a.lineheightMd,20);const b=this.centerCaption?n-(T+m)/2:n;const x=n+(v+T)/2;const M=this.centerValue??h(l,this.locale);const _=this.centerCaption??"";const w=this.isFillMode;return i(s,{key:"303c99c5bd28996248f5df9fde4229702d045c04",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"c3a31ad5a48d1fe3cb4e8ab875a9b3c1a46dfe31",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"0d6b7d190ee5c5eadaa43f143c0eff9569b965a6",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t},i("g",{key:"413f862853f5886ed895826d69ac534ed81ef3c9",transform:`translate(${n}, ${n})`},f?i("path",{d:g??undefined,fill:"var(--color-background-faint-neutral)","aria-label":this.noDataLabel}):y.map(((t,n)=>{const e=this.data[n];const s=d!=null&&e.label!==d;return i("path",{key:e.label,d:p(t)??undefined,fill:e.color??o(n),opacity:s?O: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)})}))),i("text",{key:"ff03bfe7a80341a30ca9e2b37debf223b8de5793",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),_&&i("text",{key:"637ee8864206b3e8996956d895c42260a2351f83",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||_))))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return H()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],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],measuredSize:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){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),G)}break}}))}I();const U=G;const W=I;export{U as DsChartDonut,W as defineCustomElement};
1
+ import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{T as a}from"./p-drBA73M_.js";import{r as c}from"./p-BWUTr_XN.js";import{f as h}from"./p-BBpASejH.js";import{w as u,c as l,a as f}from"./p-CrCGIx8s.js";function d(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const p=Math.abs;const y=Math.atan2;const g=Math.cos;const v=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 z=2*_;function k(t){return t>1?0:t<-1?_:Math.acos(t)}function $(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function A(t){return t.innerRadius}function C(t){return t.outerRadius}function S(t){return t.startAngle}function j(t){return t.endAngle}function B(t){return t&&t.padAngle}function R(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<M)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function L(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/x(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,g=(f+p)/2,m=(d+y)/2,b=p-f,M=y-d,_=b*b+M*M,w=s-r,z=f*y-p*d,k=(M<0?-1:1)*x(v(0,w*w*_-z*z)),$=(z*M-b*k)/_,A=(-z*b-M*k)/_,C=(z*M+b*k)/_,S=(-z*b+M*k)/_,j=$-g,B=A-m,R=C-g,L=S-m;if(j*j+B*B>R*R+L*L)$=C,A=S;return{cx:$,cy:A,x01:-u,y01:-l,x11:$*(s/w-1),y11:A*(s/w-1)}}function N(){var t=A,n=C,e=l(0),i=null,s=S,r=j,o=B,a=null,c=u(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-w,v=r.apply(this,arguments)-w,A=p(v-d),C=v>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>M))a.moveTo(0,0);else if(A>z-M){a.moveTo(f*g(d),f*b(d));a.arc(0,0,f,d,v,!C);if(l>M){a.moveTo(l*g(v),l*b(v));a.arc(0,0,l,v,d,C)}}else{var S=d,j=v,B=d,N=v,P=A,E=A,F=o.apply(this,arguments)/2,H=F>M&&(i?+i.apply(this,arguments):x(l*l+f*f)),O=m(p(f-l)/2,+e.apply(this,arguments)),T=O,D=O,V,G;if(H>M){var I=$(H/l*b(F)),U=$(H/f*b(F));if((P-=I*2)>M)I*=C?1:-1,B+=I,N-=I;else P=0,B=N=(d+v)/2;if((E-=U*2)>M)U*=C?1:-1,S+=U,j-=U;else E=0,S=j=(d+v)/2}var W=f*g(S),X=f*b(S),q=l*g(N),J=l*b(N);if(O>M){var K=f*g(j),Q=f*b(j),Y=l*g(B),Z=l*b(B),tt;if(A<_){if(tt=R(W,X,Y,Z,K,Q,q,J)){var nt=W-tt[0],et=X-tt[1],it=K-tt[0],st=Q-tt[1],rt=1/b(k((nt*it+et*st)/(x(nt*nt+et*et)*x(it*it+st*st)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);T=m(O,(l-ot)/(rt-1));D=m(O,(f-ot)/(rt+1))}else{T=D=0}}}if(!(E>M))a.moveTo(W,X);else if(D>M){V=L(Y,Z,W,X,f,D,C);G=L(K,Q,q,J,f,D,C);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(D<O)a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,D,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,f,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),!C);a.arc(G.cx,G.cy,D,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.moveTo(W,X),a.arc(0,0,f,S,j,!C);if(!(l>M)||!(P>M))a.lineTo(q,J);else if(T>M){V=L(q,J,K,Q,l,-T,C);G=L(W,X,Y,Z,l,-T,C);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(T<O)a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(G.y01,G.x01),!C);else{a.arc(V.cx,V.cy,T,y(V.y01,V.x01),y(V.y11,V.x11),!C);a.arc(0,0,l,y(V.cy+V.y11,V.cx+V.x11),y(G.cy+G.y11,G.cx+G.x11),C);a.arc(G.cx,G.cy,T,y(G.y11,G.x11),y(G.y01,G.x01),!C)}}else a.arc(0,0,l,N,B,C)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-_/2;return[g(i)*e,b(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:l(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:l(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:l(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:l(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:l(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function P(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function E(t){return t}function F(){var t=E,n=P,e=null,i=l(0),s=l(z),r=l(0);function o(o){var a,c=(o=f(o)).length,h,u,l=0,d=new Array(c),p=new Array(c),y=+i.apply(this,arguments),g=Math.min(z,Math.max(-z,s.apply(this,arguments)-y)),v,m=Math.min(Math.abs(g)/c,r.apply(this,arguments)),b=m*(g<0?-1:1),x;for(a=0;a<c;++a){if((x=p[d[a]=a]=+t(o[a],a,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(a=0,u=l?(g-c*b)/l:0;a<c;++a,y=v){h=d[a],x=p[h],v=y+(x>0?x*u:0)+b,p[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:v,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:l(+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?(i=typeof t==="function"?t:l(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:l(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:l(+t),o):r};return o}const H=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.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-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-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-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const O=.25;const T=0;const D=.82;const V=128;const G=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=a.size200;this.cornerRadius=a.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=V;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return c(a.donutFillMin,V)}get fillMaxPx(){return c(a.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const i=n-e;const s=i*2*D;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??h(r,this.locale);if(this.valueTextEl){const t=d(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const u=this.centerCaption??"";if(this.captionTextEl&&u){const t=d(this.captionTextEl,u,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=c(this.thickness,a.size200);const r=c(this.cornerRadius,a.radius025);const u=n-e;const l=this.data.reduce(((t,n)=>t+n.value),0);const f=l<=0;const d=this.activeLabel??this.hoveredLabel;const p=N().innerRadius(u).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:F().value((t=>t.value)).sort(null)(this.data);const g=f?N().innerRadius(u).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const v=c(a.lineheightXl,32);const m=c(a.lineheightMd,20);const b=this.centerCaption?n-(T+m)/2:n;const x=n+(v+T)/2;const M=this.centerValue??h(l,this.locale);const _=this.centerCaption??"";const w=this.isFillMode;return i(s,{key:"03563f9c1762b35baa38735404e3d4e5e624393b",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"e1a000c0d79be9476e513bc0751417d4237e9489",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"1ccdce50b815ceedea23dcc27a1092578fe3dcfd",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t},i("g",{key:"13580371c3b36fc478199a3b5dd71977cbdd96e6",transform:`translate(${n}, ${n})`},f?i("path",{d:g??undefined,fill:"var(--color-background-faint-neutral)","aria-label":this.noDataLabel}):y.map(((t,n)=>{const e=this.data[n];const s=d!=null&&e.label!==d;return i("path",{key:e.label,d:p(t)??undefined,fill:e.color??o(n),opacity:s?O: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)})}))),i("text",{key:"a3b6b1df257fb93ca5faf26db1117f8a8501e5df",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),_&&i("text",{key:"f1cecad81413303ffb46cd2dbfc4b0a9a687d386",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||_))))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return H()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],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],measuredSize:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){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),G)}break}}))}I();const U=G;const W=I;export{U as DsChartDonut,W as defineCustomElement};
2
2
  //# sourceMappingURL=ds-chart-donut.js.map
package/dist/components/ds-chart-line.js CHANGED
@@ -1,2 +1,2 @@
1
- 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 a,p as c,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 y(t){return t[1]}function m(t,n){var i=h(true),s=null,e=d,r=null,a=l(c);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?y:h(n);function c(c){var o,l=(c=f(c)).length,h,u=false,d;if(s==null)r=e(d=a());for(o=0;o<=l;++o){if(!(o<l&&i(h=c[o],o,c))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,o,c),+n(h,o,c))}if(d)return r=null,d+""||null}c.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),c):t};c.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),c):n};c.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),c):i};c.curve=function(t){return arguments.length?(e=t,s!=null&&(r=e(s)),c):e};c.context=function(t){return arguments.length?(t==null?s=r=null:r=e(s=t),c):s};return c}const g=()=>`.sc-ds-chart-line-h{display:inline-block;font-family:var(--typography-font-family)}.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-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.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 b={top:16,right:16,bottom:24,left:32};const _=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-b.left-b.right;const n=this.height-b.top-b.bottom;const e=this.series.flatMap((t=>t.data));const l=a(e)??0;const h=c().domain(this.categories.map(((t,n)=>n))).range([0,t]);const f=o().domain([0,l||1]).range([n,0]).nice();const u=m().x(((t,n)=>h(n)??0)).y((t=>f(t)));const d=f.ticks(4);return i(s,{key:"2631545c8077b13c7298b12dc6e8e7c2d37ae5bf",class:"chart-line"},i("svg",{key:"fa3180e2d18793b96d96fff0fbc72795b011ddac",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:"b1777766e6bf1c1b230cf9f5c5a3519b626c9522",transform:`translate(${b.left}, ${b.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 g()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function x(){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),_)}break}}))}x();const k=_;const v=x;export{k as DsChartLine,v as defineCustomElement};
1
+ 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 a,p as o,l as c}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 y(t){return t[1]}function m(t,n){var i=h(true),s=null,e=d,r=null,a=l(o);t=typeof t==="function"?t:t===undefined?p:h(t);n=typeof n==="function"?n:n===undefined?y:h(n);function o(o){var c,l=(o=f(o)).length,h,u=false,d;if(s==null)r=e(d=a());for(c=0;c<=l;++c){if(!(c<l&&i(h=o[c],c,o))===u){if(u=!u)r.lineStart();else r.lineEnd()}if(u)r.point(+t(h,c,o),+n(h,c,o))}if(d)return r=null,d+""||null}o.x=function(n){return arguments.length?(t=typeof n==="function"?n:h(+n),o):t};o.y=function(t){return arguments.length?(n=typeof t==="function"?t:h(+t),o):n};o.defined=function(t){return arguments.length?(i=typeof t==="function"?t:h(!!t),o):i};o.curve=function(t){return arguments.length?(e=t,s!=null&&(r=e(s)),o):e};o.context=function(t){return arguments.length?(t==null?s=r=null:r=e(s=t),o):s};return o}const g=()=>`.sc-ds-chart-line-h{display:inline-block;font-family:var(--typography-font-family)}.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-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.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 b={top:16,right:16,bottom:24,left:32};const _=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-b.left-b.right;const n=this.height-b.top-b.bottom;const e=this.series.flatMap((t=>t.data));const l=a(e)??0;const h=o().domain(this.categories.map(((t,n)=>n))).range([0,t]);const f=c().domain([0,l||1]).range([n,0]).nice();const u=m().x(((t,n)=>h(n)??0)).y((t=>f(t)));const d=f.ticks(4);return i(s,{key:"912b0b24e324b199c61d6244a22053496c91be1b",class:"chart-line"},i("svg",{key:"4af4eebab006dd78661697f907870c6078fdb875",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:"d6b4fc7424a4e58c44b6c1dc057ac77162757c24",transform:`translate(${b.left}, ${b.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 g()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"]}]);function x(){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),_)}break}}))}x();const k=_;const v=x;export{k as DsChartLine,v as defineCustomElement};
2
2
  //# sourceMappingURL=ds-chart-line.js.map
package/dist/components/ds-checkbox.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as i,h as t,a as o,t as r}from"./index.js";import{d as c}from"./p-CWd8L7Fk.js";const a=()=>`.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:0.25;pointer-events:none;cursor:not-allowed}.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.box.sc-ds-checkbox{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color var(--effect-motion-short-2), border-color var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-bold)}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let n=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.internals=this.attachInternals();this.labelId=`ds-checkbox-label-${++n}`;this.checked=false;this.value="on";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.indeterminate=false;this.isInactive=false;this.initialChecked=false;this.formDisabled=false;this.handleActivate=()=>{if(this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}syncFormValue(){const e=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(!e&&this.checked?this.value:null);const s=this.required&&!e&&!this.checked;this.internals.setValidity(s?{valueMissing:true}:{},s?this.requiredMessage:"")}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked}render(){const e=this.isInactive||this.disabled||this.formDisabled;const s=this.checked||this.indeterminate;return t(o,{key:"4d1ba157b62ae0f9836ce3ba968239c815d51059",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":e?"true":undefined,"aria-labelledby":this.labelId,tabIndex:e?-1:0,class:{checkbox:true,"ds-control-inactive":e},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},t("span",{key:"0fb3b7cf03c2e93cfcacfcf9f2e4f400c232e70d",class:{box:true,"box--marked":s}},s&&t("span",{key:"58dbf3b1c547dd51244593f0449b1dec4e261db7",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),t("ds-text",{key:"bfba4b82d5a040284c0e8927672b9c1159f7ea56",class:"checkbox__label",as:"span",variant:"text-body-medium",textId:this.labelId},this.label))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-checkbox",{label:[1],checked:[1028],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],indeterminate:[4],isInactive:[4,"is-inactive"],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox","ds-text"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),d)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}h();const l=d;const b=h;export{l as DsCheckbox,b as defineCustomElement};
1
+ import{p as e,H as s,c as i,h as t,a as o,t as r}from"./index.js";import{d as c}from"./p-CWd8L7Fk.js";const a=()=>`.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:0.25;pointer-events:none;cursor:not-allowed}.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.box.sc-ds-checkbox{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color var(--effect-motion-short-2), border-color var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-bold)}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let n=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.internals=this.attachInternals();this.labelId=`ds-checkbox-label-${++n}`;this.checked=false;this.value="on";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.indeterminate=false;this.isInactive=false;this.initialChecked=false;this.formDisabled=false;this.handleActivate=()=>{if(this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}syncFormValue(){const e=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(!e&&this.checked?this.value:null);const s=this.required&&!e&&!this.checked;this.internals.setValidity(s?{valueMissing:true}:{},s?this.requiredMessage:"")}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked}render(){const e=this.isInactive||this.disabled||this.formDisabled;const s=this.checked||this.indeterminate;return t(o,{key:"7c65dbdb44dc129f5a62300bab0fb1d7d72e2eef",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":e?"true":undefined,"aria-labelledby":this.labelId,tabIndex:e?-1:0,class:{checkbox:true,"ds-control-inactive":e},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},t("span",{key:"e0c136f6aa4338aa14284872421808402ee67d85",class:{box:true,"box--marked":s}},s&&t("span",{key:"a69cc9a8fbeab02eab7bba4d7b2930f0fb75cc41",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),t("ds-text",{key:"df490de7c61087365c7e9542d68dbde0e43f858b",class:"checkbox__label",as:"span",variant:"text-body-medium",textId:this.labelId},this.label))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-checkbox",{label:[1],checked:[1028],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],indeterminate:[4],isInactive:[4,"is-inactive"],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox","ds-text"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),d)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}h();const l=d;const b=h;export{l as DsCheckbox,b as defineCustomElement};
2
2
  //# sourceMappingURL=ds-checkbox.js.map
package/dist/components/ds-field.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,h as t,a as d,t as c}from"./index.js";import{d as i}from"./p-CWd8L7Fk.js";const a=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}`;let l=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++l}`}render(){const e=this.fieldId||this.resolvedId;return t(d,{key:"502bc10f9ac6fc06a625d210f481862c8fe6d0ec"},t("div",{key:"29b210229c64c62c4c3400071ad02a02a08b9159",class:"field"},t("ds-text",{key:"633b26238d1a273da3cd94d798c2a51e05c0065b",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),t("slot",{key:"ed46dd91f3932841d548b2b0e1701ca077621d88"})))}static get style(){return a()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(c(e))){customElements.define(c(e),f)}break;case"ds-text":if(!customElements.get(c(e))){i()}break}}))}n();const o=f;const r=n;export{o as DsField,r as defineCustomElement};
1
+ import{p as e,H as s,h as t,a as d,t as i}from"./index.js";import{d as a}from"./p-CWd8L7Fk.js";const l=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}`;let c=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++c}`}render(){const e=this.fieldId||this.resolvedId;return t(d,{key:"351dda51f0097371e175309edd78e4186bbbc32e"},t("div",{key:"4a71213d01d28e92e18707c2bd68832fdd29862f",class:"field"},t("ds-text",{key:"1769ecb8723e22fbc61e07c2342d43047ffea2e8",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),t("slot",{key:"f0ae2aaf0b7de31e817280de0909a76450e490cd"})))}static get style(){return l()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(i(e))){customElements.define(i(e),f)}break;case"ds-text":if(!customElements.get(i(e))){a()}break}}))}n();const o=f;const r=n;export{o as DsField,r as defineCustomElement};
2
2
  //# sourceMappingURL=ds-field.js.map
package/dist/components/ds-menu.js CHANGED
@@ -1,2 +1,2 @@
1
- import{M as s,d as o}from"./p-B-cWYMqs.js";const t=s;const c=o;export{t as DsMenu,c as defineCustomElement};
1
+ import{M as o,d as s}from"./p-B5kfuVQz.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-menu.js.map