@ds-mo/ui 2.13.1 → 2.14.0

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/components/ds-bar-nav.js +1 -1
  3. package/dist/components/ds-chart-donut.js +1 -1
  4. package/dist/components/ds-menu.js +1 -1
  5. package/dist/components/ds-panel-tools.js +1 -1
  6. package/dist/components/ds-panel-tools.js.map +1 -1
  7. package/dist/components/ds-select.js +1 -1
  8. package/dist/components/ds-shell-gradient-picker.js +1 -1
  9. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  10. package/dist/components/ds-slider.js +1 -1
  11. package/dist/components/ds-toggle.js +1 -1
  12. package/dist/components/ds-tooltip-data-viz.js +1 -1
  13. package/dist/components/{p-CQmf2CeW.js → p-BAeKw2pj.js} +2 -2
  14. package/dist/components/{p-Be3PHv34.js → p-CYmVDfd_.js} +2 -2
  15. package/dist/components/{p-CwARVsZQ.js → p-Dlol7hPg.js} +2 -2
  16. package/dist/components/{p-CwARVsZQ.js.map → p-Dlol7hPg.js.map} +1 -1
  17. package/dist/components/{p-3FLHei19.js → p-XNHSe8Mg.js} +2 -2
  18. package/dist/types/components/PanelTools/PanelTools.d.ts +1 -1
  19. package/dist/types/components/PanelTools/index.d.ts +1 -1
  20. package/dist/types/components/PanelTools/panel-tools-types.d.ts +3 -1
  21. package/dist/types/components.d.ts +2 -2
  22. package/package.json +1 -1
  23. package/src/wc/components/PanelTools/PanelTools.tsx +33 -4
  24. package/src/wc/components/PanelTools/index.ts +1 -0
  25. package/src/wc/components/PanelTools/panel-tools-types.ts +12 -1
  26. package/src/wc/components.d.ts +2 -2
  27. /package/dist/components/{p-CQmf2CeW.js.map → p-BAeKw2pj.js.map} +0 -0
  28. /package/dist/components/{p-Be3PHv34.js.map → p-CYmVDfd_.js.map} +0 -0
  29. /package/dist/components/{p-3FLHei19.js.map → p-XNHSe8Mg.js.map} +0 -0
package/dist/.build-stamp CHANGED
@@ -1 +1 @@
1
- 1783650179193
1
+ 1783694226051
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 l}from"./p-BOQnc-M4.js";import{C as d,c,a as f,b as u,r as b,d as v}from"./p-BiM6QBTF.js";import{d as p}from"./p-EK1hOP19.js";import{d as g}from"./p-CuRjYmBk.js";import{d as m}from"./p-B82KZX9D.js";import{d as y}from"./p-CwARVsZQ.js";import{d as _}from"./p-Be3PHv34.js";import{d as w}from"./p-CQmf2CeW.js";import{d as C}from"./p-1m8r0wFg.js";function k(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function T(s){return k(s,'[role="tablist"]')}function x(s,t){const i=[];let e=[];for(const n of s){if(a(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function F(s,t){return x(S(s),t)}function O(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function M(s,t,i,e,n){if(s.length===0||t<=0)return 0;const r=E(s,s.length,e,n);if(r<=t)return s.length;const a=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=E(s,t,e,n);if(i>a)break;o=t}return o}function P(s){let t=s.length;while(t>0&&a(s[t-1])){t-=1}return s.slice(0,t)}function S(s){let t=0;while(t<s.length&&a(s[t])){t+=1}return s.slice(t)}function E(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const D=()=>`.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[gradient] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-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)}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const H=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new d;this.panelToolsTransition=new d;this.overflowCoalescer=c((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=v(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}digestTabsConfig(s){return s.map((s=>a(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(o(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){const s=T(this.probeTabGroupEl);return s?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=T(this.probeTabGroupEl);if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const r=i.reduce(((s,t)=>s+t),0);const a=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-r-a);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false}}}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=O(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=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=F(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=k(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}handleTabChange(s){this.selectTab(s.detail)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuOpen=true}handleTabRovingExit(s){if(s.detail!=="end"||!this.hasOverflowTabs)return;this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.()}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;void this.visibleTabGroupEl?.focusLastTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}render(){const s=this.basePath!==""&&this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const r=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"1d7377079df62e63352407525e34bdc7ddfbc6c1"},e("header",{key:"9108e6dedd37761511f26953d1d9b98589a72854",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:"7da92a7a574f5f8bd830190063668dd088e43a82",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:"ed0fbd01d7062506d3e6196b87f73b7dbc82ca5b",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:"bec0caa2665441cd2da45862e1e4ab6bfea62fa3",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("span",{key:"04f9af7692f793f633fdd81f6248a1283fd87a36",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"3fe0a58e2ad6622947c7088fe78bd1deb6d91e6e",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":"More tabs",onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"7f062543d89fb0102768360f4dc2f215f7c53fec",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:F(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return D()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);H.HOST_PROP_SYNC_BUDGET=8;H.INTRINSIC_WIDTH_RETRY_MAX=3;H.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;H.OVERFLOW_HYSTERESIS_PX=8;function j(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-tab-group-nav"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),H)}break;case"ds-badge":if(!customElements.get(r(s))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){g()}break;case"ds-icon":if(!customElements.get(r(s))){m()}break;case"ds-menu":if(!customElements.get(r(s))){y()}break;case"ds-shell-gradient-picker":if(!customElements.get(r(s))){_()}break;case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){w()}break;case"ds-tab-group-nav":if(!customElements.get(r(s))){C()}break}}))}j();const R=H;const V=j;export{R as DsBarNav,V 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 d,c,a as f,b as u,r as b,d as v}from"./p-BiM6QBTF.js";import{d as p}from"./p-EK1hOP19.js";import{d as g}from"./p-CuRjYmBk.js";import{d as m}from"./p-B82KZX9D.js";import{d as _}from"./p-Dlol7hPg.js";import{d as y}from"./p-CYmVDfd_.js";import{d as w}from"./p-BAeKw2pj.js";import{d as C}from"./p-1m8r0wFg.js";function k(s,t){if(!s)return null;const i=s.shadowRoot??s;return i.querySelector(t)}function T(s){return k(s,'[role="tablist"]')}function x(s,t){const i=[];let e=[];for(const n of s){if(a(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function F(s,t){return x(S(s),t)}function O(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function M(s,t,i,e,n){if(s.length===0||t<=0)return 0;const r=E(s,s.length,e,n);if(r<=t)return s.length;const a=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=E(s,t,e,n);if(i>a)break;o=t}return o}function P(s){let t=s.length;while(t>0&&a(s[t-1])){t-=1}return s.slice(0,t)}function S(s){let t=0;while(t<s.length&&a(s[t])){t+=1}return s.slice(t)}function E(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const D=()=>`.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell[gradient].sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav,ds-app-shell[gradient] .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav ds-tab-group-nav.sc-ds-bar-nav{width:max-content}.bar-nav__tabs-visible.sc-ds-bar-nav{width:100%;min-width:0}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--dimension-size-400);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-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)}.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);color:var(--_bar-nav-fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const j=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabGroupEl=null;this.probeTabGroupEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new d;this.panelToolsTransition=new d;this.overflowCoalescer=c((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=v(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=b(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}digestTabsConfig(s){return s.map((s=>a(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(o(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){const s=T(this.probeTabGroupEl);return s?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=T(this.probeTabGroupEl);if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const r=i.reduce(((s,t)=>s+t),0);const a=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-r-a);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false}}}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=O(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=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=F(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=k(this.visibleTabGroupEl,`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}handleTabChange(s){this.selectTab(s.detail)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuOpen=true}handleTabRovingExit(s){if(s.detail!=="end"||!this.hasOverflowTabs)return;this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.()}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;void this.visibleTabGroupEl?.focusLastTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}render(){const s=this.basePath!==""&&this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const r=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"1d7377079df62e63352407525e34bdc7ddfbc6c1"},e("header",{key:"9108e6dedd37761511f26953d1d9b98589a72854",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:"7da92a7a574f5f8bd830190063668dd088e43a82",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:"ed0fbd01d7062506d3e6196b87f73b7dbc82ca5b",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:"bec0caa2665441cd2da45862e1e4ab6bfea62fa3",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("span",{key:"04f9af7692f793f633fdd81f6248a1283fd87a36",class:"bar-nav__heading text-body-medium-emphasis"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"3fe0a58e2ad6622947c7088fe78bd1deb6d91e6e",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":"More tabs",onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"7f062543d89fb0102768360f4dc2f215f7c53fec",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:F(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:"var(--dimension-space-050)",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return D()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);j.HOST_PROP_SYNC_BUDGET=8;j.INTRINSIC_WIDTH_RETRY_MAX=3;j.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;j.OVERFLOW_HYSTERESIS_PX=8;function H(){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-tab-group-nav"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),j)}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))){_()}break;case"ds-shell-gradient-picker":if(!customElements.get(r(s))){y()}break;case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){w()}break;case"ds-tab-group-nav":if(!customElements.get(r(s))){C()}break}}))}H();const V=j;const A=H;export{V as DsBarNav,A as defineCustomElement};
2
2
  //# sourceMappingURL=ds-bar-nav.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{d as c}from"./p-CtwNUCnp.js";import{d as a}from"./p-3FLHei19.js";import{T as h}from"./p-B_g8X0eh.js";import{r as u}from"./p-BWUTr_XN.js";import{w as l,c as f,a as d}from"./p-CrCGIx8s.js";import{f as p}from"./p-DEpLlQZK.js";function v(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 y=Math.abs;const g=Math.atan2;const m=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const w=Math.sqrt;const _=1e-12;const z=Math.PI;const k=z/2;const $=2*z;function C(t){return t>1?0:t<-1?z:Math.acos(t)}function j(t){return t>=1?k:t<=-1?-k:Math.asin(t)}function S(t){return t.innerRadius}function A(t){return t.outerRadius}function E(t){return t.startAngle}function L(t){return t.endAngle}function N(t){return t&&t.padAngle}function R(t,n,e,i,s,r,o,c){var a=e-t,h=i-n,u=o-s,l=c-r,f=l*a-u*h;if(f*f<_)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*a,n+f*h]}function F(t,n,e,i,s,r,o){var c=t-e,a=n-i,h=(o?r:-r)/w(c*c+a*a),u=h*a,l=-h*c,f=t+u,d=n+l,p=e+u,v=i+l,y=(f+p)/2,g=(d+v)/2,m=p-f,x=v-d,M=m*m+x*x,_=s-r,z=f*v-p*d,k=(x<0?-1:1)*w(b(0,_*_*M-z*z)),$=(z*x-m*k)/M,C=(-z*m-x*k)/M,j=(z*x+m*k)/M,S=(-z*m+x*k)/M,A=$-y,E=C-g,L=j-y,N=S-g;if(A*A+E*E>L*L+N*N)$=j,C=S;return{cx:$,cy:C,x01:-u,y01:-l,x11:$*(s/_-1),y11:C*(s/_-1)}}function P(){var t=S,n=A,e=f(0),i=null,s=E,r=L,o=N,c=null,a=l(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-k,p=r.apply(this,arguments)-k,v=y(p-d),b=p>d;if(!c)c=h=a();if(f<l)u=f,f=l,l=u;if(!(f>_))c.moveTo(0,0);else if(v>$-_){c.moveTo(f*m(d),f*M(d));c.arc(0,0,f,d,p,!b);if(l>_){c.moveTo(l*m(p),l*M(p));c.arc(0,0,l,p,d,b)}}else{var S=d,A=p,E=d,L=p,N=v,P=v,T=o.apply(this,arguments)/2,B=T>_&&(i?+i.apply(this,arguments):w(l*l+f*f)),H=x(y(f-l)/2,+e.apply(this,arguments)),O=H,D=H,U,V;if(B>_){var X=j(B/l*M(T)),G=j(B/f*M(T));if((N-=X*2)>_)X*=b?1:-1,E+=X,L-=X;else N=0,E=L=(d+p)/2;if((P-=G*2)>_)G*=b?1:-1,S+=G,A-=G;else P=0,S=A=(d+p)/2}var I=f*m(S),K=f*M(S),Q=l*m(L),W=l*M(L);if(H>_){var Z=f*m(A),q=f*M(A),J=l*m(E),Y=l*M(E),tt;if(v<z){if(tt=R(I,K,J,Y,Z,q,Q,W)){var nt=I-tt[0],et=K-tt[1],it=Z-tt[0],st=q-tt[1],rt=1/M(C((nt*it+et*st)/(w(nt*nt+et*et)*w(it*it+st*st)))/2),ot=w(tt[0]*tt[0]+tt[1]*tt[1]);O=x(H,(l-ot)/(rt-1));D=x(H,(f-ot)/(rt+1))}else{O=D=0}}}if(!(P>_))c.moveTo(I,K);else if(D>_){U=F(J,Y,I,K,f,D,b);V=F(Z,q,Q,W,f,D,b);c.moveTo(U.cx+U.x01,U.cy+U.y01);if(D<H)c.arc(U.cx,U.cy,D,g(U.y01,U.x01),g(V.y01,V.x01),!b);else{c.arc(U.cx,U.cy,D,g(U.y01,U.x01),g(U.y11,U.x11),!b);c.arc(0,0,f,g(U.cy+U.y11,U.cx+U.x11),g(V.cy+V.y11,V.cx+V.x11),!b);c.arc(V.cx,V.cy,D,g(V.y11,V.x11),g(V.y01,V.x01),!b)}}else c.moveTo(I,K),c.arc(0,0,f,S,A,!b);if(!(l>_)||!(N>_))c.lineTo(Q,W);else if(O>_){U=F(Q,W,Z,q,l,-O,b);V=F(I,K,J,Y,l,-O,b);c.lineTo(U.cx+U.x01,U.cy+U.y01);if(O<H)c.arc(U.cx,U.cy,O,g(U.y01,U.x01),g(V.y01,V.x01),!b);else{c.arc(U.cx,U.cy,O,g(U.y01,U.x01),g(U.y11,U.x11),!b);c.arc(0,0,l,g(U.cy+U.y11,U.cx+U.x11),g(V.cy+V.y11,V.cx+V.x11),b);c.arc(V.cx,V.cy,O,g(V.y11,V.x11),g(V.y01,V.x01),!b)}}else c.arc(0,0,l,L,E,b)}c.closePath();if(h)return c=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-z/2;return[m(i)*e,M(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:f(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:f(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),h):o};h.context=function(t){return arguments.length?(c=t==null?null:t,h):c};return h}function T(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function B(t){return t}function H(){var t=B,n=T,e=null,i=f(0),s=f($),r=f(0);function o(o){var c,a=(o=d(o)).length,h,u,l=0,f=new Array(a),p=new Array(a),v=+i.apply(this,arguments),y=Math.min($,Math.max(-$,s.apply(this,arguments)-v)),g,m=Math.min(Math.abs(y)/a,r.apply(this,arguments)),b=m*(y<0?-1:1),x;for(c=0;c<a;++c){if((x=p[f[c]=c]=+t(o[c],c,o))>0){l+=x}}if(n!=null)f.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)f.sort((function(t,n){return e(o[t],o[n])}));for(c=0,u=l?(y-a*b)/l:0;c<a;++c,v=g){h=f[c],x=p[h],g=v+(x>0?x*u:0)+b,p[h]={data:o[h],index:c,value:x,startAngle:v,endAngle:g,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),o):r};return o}const O=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:inherit;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;overflow:visible}.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)}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-size:var(--typography-fontsize-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const D=.25;const U=0;const V=.82;const X=128;const G=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.tooltip=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=X;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,X)}get fillMaxPx(){return u(h.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,n){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t);if(!t){this.tooltip=null;return}this.updateTooltip(t,n)}handleSliceMove(t,n){if(this.hoveredLabel!==t.label)return;this.updateTooltip(t,n)}updateTooltip(t,n){const e=this.wrapperEl;if(!e)return;const i=this.resolvedSize;const s=e.getBoundingClientRect();const r=n?n.clientX-s.left:i/2;const o=n?n.clientY-s.top:i/2;this.tooltip={datum:t,x:r,y:o}}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const i=n-e;const s=i*2*V;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??p(r);if(this.valueTextEl){const t=v(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const c=this.centerCaption??"";if(this.captionTextEl&&c){const t=v(this.captionTextEl,c,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const r=u(this.cornerRadius,h.radius025);const c=n-e;const a=this.data.reduce(((t,n)=>t+n.value),0);const l=a<=0;const f=this.activeLabel??this.hoveredLabel;const d=P().innerRadius(c).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const v=l?[]:H().value((t=>t.value)).sort(null)(this.data);const y=l?P().innerRadius(c).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const g=u(h.lineheightXl,32);const m=u(h.lineheightMd,20);const b=this.centerCaption?n-(U+m)/2:n;const x=n+(g+U)/2;const M=this.centerValue??p(a);const w=this.centerCaption??"";const _=this.tooltip;const z=this.isFillMode;return i(s,{key:"5a5320669e95e72e4f00beb159615cc96be8aeba",class:{"chart-donut":true,"chart-donut--fill":z,"chart-donut--fixed":!z},style:!z?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"bcbe6630ffc84082cdee7933f43e275a64fad887",class:"chart-donut__wrapper",style:!z?{width:`${t}px`,height:`${t}px`}:undefined,ref:t=>{this.wrapperEl=t??undefined}},i("svg",{key:"14346edeb6ce3729e0c48479cef27fef6c36c88f",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t},i("g",{key:"0ed1f0e25a7df8e4ba7ce94001b3d78753d73251",transform:`translate(${n}, ${n})`},l?i("path",{d:y??undefined,fill:"var(--color-background-faint-neutral)","aria-label":"No data"}):v.map(((t,n)=>{const e=this.data[n];const s=f!=null&&e.label!==f;return i("path",{key:e.label,d:d(t)??undefined,fill:e.color??o(n),opacity:s?D:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:t=>this.handleHover(e,t),onMouseMove:t=>this.handleSliceMove(e,t),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),i("text",{key:"4646672d753380f033e61f4c5aa1e39b64c093fe",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),w&&i("text",{key:"64f63eb44b6260c5c8455395afd74cc3b00b5670",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||w)),_&&i("ds-tooltip-data-viz",{key:_.datum.label,label:_.datum.label,value:p(_.datum.value),x:_.x,y:_.y})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return O()}},[2,"ds-chart-donut",{data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],tooltip:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),G)}break;case"ds-text":if(!customElements.get(r(t))){c()}break;case"ds-tooltip-data-viz":if(!customElements.get(r(t))){a()}break}}))}I();const K=G;const Q=I;export{K as DsChartDonut,Q 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{d as c}from"./p-CtwNUCnp.js";import{d as a}from"./p-XNHSe8Mg.js";import{T as h}from"./p-B_g8X0eh.js";import{r as u}from"./p-BWUTr_XN.js";import{w as l,c as f,a as d}from"./p-CrCGIx8s.js";import{f as p}from"./p-DEpLlQZK.js";function v(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 y=Math.abs;const g=Math.atan2;const m=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const w=Math.sqrt;const _=1e-12;const z=Math.PI;const k=z/2;const $=2*z;function C(t){return t>1?0:t<-1?z:Math.acos(t)}function S(t){return t>=1?k:t<=-1?-k:Math.asin(t)}function j(t){return t.innerRadius}function A(t){return t.outerRadius}function E(t){return t.startAngle}function N(t){return t.endAngle}function R(t){return t&&t.padAngle}function L(t,n,e,i,s,r,o,c){var a=e-t,h=i-n,u=o-s,l=c-r,f=l*a-u*h;if(f*f<_)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*a,n+f*h]}function P(t,n,e,i,s,r,o){var c=t-e,a=n-i,h=(o?r:-r)/w(c*c+a*a),u=h*a,l=-h*c,f=t+u,d=n+l,p=e+u,v=i+l,y=(f+p)/2,g=(d+v)/2,m=p-f,x=v-d,M=m*m+x*x,_=s-r,z=f*v-p*d,k=(x<0?-1:1)*w(b(0,_*_*M-z*z)),$=(z*x-m*k)/M,C=(-z*m-x*k)/M,S=(z*x+m*k)/M,j=(-z*m+x*k)/M,A=$-y,E=C-g,N=S-y,R=j-g;if(A*A+E*E>N*N+R*R)$=S,C=j;return{cx:$,cy:C,x01:-u,y01:-l,x11:$*(s/_-1),y11:C*(s/_-1)}}function T(){var t=j,n=A,e=f(0),i=null,s=E,r=N,o=R,c=null,a=l(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-k,p=r.apply(this,arguments)-k,v=y(p-d),b=p>d;if(!c)c=h=a();if(f<l)u=f,f=l,l=u;if(!(f>_))c.moveTo(0,0);else if(v>$-_){c.moveTo(f*m(d),f*M(d));c.arc(0,0,f,d,p,!b);if(l>_){c.moveTo(l*m(p),l*M(p));c.arc(0,0,l,p,d,b)}}else{var j=d,A=p,E=d,N=p,R=v,T=v,B=o.apply(this,arguments)/2,F=B>_&&(i?+i.apply(this,arguments):w(l*l+f*f)),H=x(y(f-l)/2,+e.apply(this,arguments)),O=H,D=H,X,U;if(F>_){var V=S(F/l*M(B)),G=S(F/f*M(B));if((R-=V*2)>_)V*=b?1:-1,E+=V,N-=V;else R=0,E=N=(d+p)/2;if((T-=G*2)>_)G*=b?1:-1,j+=G,A-=G;else T=0,j=A=(d+p)/2}var I=f*m(j),K=f*M(j),Q=l*m(N),W=l*M(N);if(H>_){var Z=f*m(A),q=f*M(A),J=l*m(E),Y=l*M(E),tt;if(v<z){if(tt=L(I,K,J,Y,Z,q,Q,W)){var nt=I-tt[0],et=K-tt[1],it=Z-tt[0],st=q-tt[1],rt=1/M(C((nt*it+et*st)/(w(nt*nt+et*et)*w(it*it+st*st)))/2),ot=w(tt[0]*tt[0]+tt[1]*tt[1]);O=x(H,(l-ot)/(rt-1));D=x(H,(f-ot)/(rt+1))}else{O=D=0}}}if(!(T>_))c.moveTo(I,K);else if(D>_){X=P(J,Y,I,K,f,D,b);U=P(Z,q,Q,W,f,D,b);c.moveTo(X.cx+X.x01,X.cy+X.y01);if(D<H)c.arc(X.cx,X.cy,D,g(X.y01,X.x01),g(U.y01,U.x01),!b);else{c.arc(X.cx,X.cy,D,g(X.y01,X.x01),g(X.y11,X.x11),!b);c.arc(0,0,f,g(X.cy+X.y11,X.cx+X.x11),g(U.cy+U.y11,U.cx+U.x11),!b);c.arc(U.cx,U.cy,D,g(U.y11,U.x11),g(U.y01,U.x01),!b)}}else c.moveTo(I,K),c.arc(0,0,f,j,A,!b);if(!(l>_)||!(R>_))c.lineTo(Q,W);else if(O>_){X=P(Q,W,Z,q,l,-O,b);U=P(I,K,J,Y,l,-O,b);c.lineTo(X.cx+X.x01,X.cy+X.y01);if(O<H)c.arc(X.cx,X.cy,O,g(X.y01,X.x01),g(U.y01,U.x01),!b);else{c.arc(X.cx,X.cy,O,g(X.y01,X.x01),g(X.y11,X.x11),!b);c.arc(0,0,l,g(X.cy+X.y11,X.cx+X.x11),g(U.cy+U.y11,U.cx+U.x11),b);c.arc(U.cx,U.cy,O,g(U.y11,U.x11),g(U.y01,U.x01),!b)}}else c.arc(0,0,l,N,E,b)}c.closePath();if(h)return c=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-z/2;return[m(i)*e,M(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:f(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:f(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),h):o};h.context=function(t){return arguments.length?(c=t==null?null:t,h):c};return h}function B(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function F(t){return t}function H(){var t=F,n=B,e=null,i=f(0),s=f($),r=f(0);function o(o){var c,a=(o=d(o)).length,h,u,l=0,f=new Array(a),p=new Array(a),v=+i.apply(this,arguments),y=Math.min($,Math.max(-$,s.apply(this,arguments)-v)),g,m=Math.min(Math.abs(y)/a,r.apply(this,arguments)),b=m*(y<0?-1:1),x;for(c=0;c<a;++c){if((x=p[f[c]=c]=+t(o[c],c,o))>0){l+=x}}if(n!=null)f.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)f.sort((function(t,n){return e(o[t],o[n])}));for(c=0,u=l?(y-a*b)/l:0;c<a;++c,v=g){h=f[c],x=p[h],g=v+(x>0?x*u:0)+b,p[h]={data:o[h],index:c,value:x,startAngle:v,endAngle:g,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),o):r};return o}const O=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:inherit;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;overflow:visible}.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)}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-size:var(--typography-fontsize-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const D=.25;const X=0;const U=.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.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.tooltip=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 u(h.donutFillMin,V)}get fillMaxPx(){return u(h.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,n){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t);if(!t){this.tooltip=null;return}this.updateTooltip(t,n)}handleSliceMove(t,n){if(this.hoveredLabel!==t.label)return;this.updateTooltip(t,n)}updateTooltip(t,n){const e=this.wrapperEl;if(!e)return;const i=this.resolvedSize;const s=e.getBoundingClientRect();const r=n?n.clientX-s.left:i/2;const o=n?n.clientY-s.top:i/2;this.tooltip={datum:t,x:r,y:o}}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const i=n-e;const s=i*2*U;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??p(r);if(this.valueTextEl){const t=v(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const c=this.centerCaption??"";if(this.captionTextEl&&c){const t=v(this.captionTextEl,c,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const r=u(this.cornerRadius,h.radius025);const c=n-e;const a=this.data.reduce(((t,n)=>t+n.value),0);const l=a<=0;const f=this.activeLabel??this.hoveredLabel;const d=T().innerRadius(c).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const v=l?[]:H().value((t=>t.value)).sort(null)(this.data);const y=l?T().innerRadius(c).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const g=u(h.lineheightXl,32);const m=u(h.lineheightMd,20);const b=this.centerCaption?n-(X+m)/2:n;const x=n+(g+X)/2;const M=this.centerValue??p(a);const w=this.centerCaption??"";const _=this.tooltip;const z=this.isFillMode;return i(s,{key:"5a5320669e95e72e4f00beb159615cc96be8aeba",class:{"chart-donut":true,"chart-donut--fill":z,"chart-donut--fixed":!z},style:!z?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"bcbe6630ffc84082cdee7933f43e275a64fad887",class:"chart-donut__wrapper",style:!z?{width:`${t}px`,height:`${t}px`}:undefined,ref:t=>{this.wrapperEl=t??undefined}},i("svg",{key:"14346edeb6ce3729e0c48479cef27fef6c36c88f",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t},i("g",{key:"0ed1f0e25a7df8e4ba7ce94001b3d78753d73251",transform:`translate(${n}, ${n})`},l?i("path",{d:y??undefined,fill:"var(--color-background-faint-neutral)","aria-label":"No data"}):v.map(((t,n)=>{const e=this.data[n];const s=f!=null&&e.label!==f;return i("path",{key:e.label,d:d(t)??undefined,fill:e.color??o(n),opacity:s?D:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:t=>this.handleHover(e,t),onMouseMove:t=>this.handleSliceMove(e,t),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),i("text",{key:"4646672d753380f033e61f4c5aa1e39b64c093fe",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),w&&i("text",{key:"64f63eb44b6260c5c8455395afd74cc3b00b5670",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||w)),_&&i("ds-tooltip-data-viz",{key:_.datum.label,label:_.datum.label,value:p(_.datum.value),x:_.x,y:_.y})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return O()}},[2,"ds-chart-donut",{data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],tooltip:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32]},undefined,{size:[{onSizePropChange:0}]}]);function I(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),G)}break;case"ds-text":if(!customElements.get(r(t))){c()}break;case"ds-tooltip-data-viz":if(!customElements.get(r(t))){a()}break}}))}I();const K=G;const Q=I;export{K as DsChartDonut,Q as defineCustomElement};
2
2
  //# sourceMappingURL=ds-chart-donut.js.map
package/dist/components/ds-menu.js CHANGED
@@ -1,2 +1,2 @@
1
- import{M as s,d as o}from"./p-CwARVsZQ.js";const t=s;const p=o;export{t as DsMenu,p as defineCustomElement};
1
+ import{M as o,d as s}from"./p-Dlol7hPg.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-menu.js.map
package/dist/components/ds-panel-tools.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as t,h as o,a as i,t as a}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-EK1hOP19.js";import{d as r}from"./p-CuRjYmBk.js";import{d}from"./p-B82KZX9D.js";import{d as c}from"./p-CDHRJqea.js";const h="search";const p={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function f(e,s){if(s){return n(s,[])}return e??[]}function m(e,s){return!e&&s==="idle"}function u(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const b=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{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}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color: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)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color: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)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=u(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return f(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const s=e.find((e=>e.id===h));const t=e.filter((e=>e.id!==h));return s?[s,...t]:t}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return p[this.activeTool]??""}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){const t=e.ariaLabel??p[e.id];return o("ds-tooltip",{key:e.id,label:t,side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.orderedRailItems;const t=s.find((e=>e.id===h));const a=s.filter((e=>e.id!==h));const n=this.isDrawerPresent();const l=m(this.open,this.motion);return o(i,{key:"3d2ef377fa890a84ef0e913e375d425095815ce3",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":l},role:"complementary","aria-label":"Tools"},o("div",{key:"c067a6b972a8959c77e16248782d3b878cdbdcf8",class:"panel-tools__layout"},o("nav",{key:"1ddce6769574619296b7681c1ffdb23ffbca1a48",class:"panel-tools__rail","aria-label":"Tool shortcuts"},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t,0)):null,o("div",{key:"4d9eb84c906abce203cb9816f9508c7a014038d7",class:"panel-tools__rail-body"},a.map(((e,s)=>this.renderRailAction(e,t?s+1:s))))),o("div",{key:"3d00c3e2f2a231dde45947d30f73cdee92f44306",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"9accc3df7eed1a597c4ef30ee6c518540b3c6b3d",class:"panel-tools__drawer-surface"},o("header",{key:"6f1d13c16962fa4e031c5c8677343cb99a5156e9",class:"panel-tools__header"},o("span",{key:"4d181898366fb5234d840ddc491afc50bd83cd03",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"ee436cbace6d5e6fd961f2ba5b7066a949d638ee",class:"panel-tools__body"},o("div",{key:"2a23d5871290d6db98d2df05bd53207a91a4b358",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"067a45dc5b79990d68473fa3064c630b064d17b7",name:"search"})),o("div",{key:"b09766c3b26366d88a93be54ec453ec0e9ec2ed4",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"b40089d13f0467fd8d1d8a718f110b25e77f146f",name:"messages"})),o("div",{key:"3d709a1d529f73cb0d4b26b0fece7995aef4811d",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"ed124695c60940156767ca95bb2153bbcd8274d3",name:"stacks"})),o("div",{key:"1bfd84d1425452180b8e0c5662036ec45181e31e",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"a2ef35b1c8548ac00f7d1d91816e09516eee40f6",name:"activity"})),o("div",{key:"b040b2e781aa88e9a7e1023b1c5bcb950f294d99",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"6017d6b4f2c1ccd87f995a7932e525f52cf10dc5",name:"agents"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return b()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(a(e))){customElements.define(a(e),g)}break;case"ds-badge":if(!customElements.get(a(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){r()}break;case"ds-icon":if(!customElements.get(a(e))){d()}break;case"ds-tooltip":if(!customElements.get(a(e))){c()}break}}))}v();const _=g;const y=v;export{_ as DsPanelTools,y as defineCustomElement};
1
+ import{p as e,H as s,c as o,h as t,a,t as i}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-EK1hOP19.js";import{d as r}from"./p-CuRjYmBk.js";import{d}from"./p-B82KZX9D.js";import{d as c}from"./p-CDHRJqea.js";const p="search";const h="help";const f={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};function b(e,s){if(s){return n(s,[])}return e??[]}function m(e,s){return!e&&s==="idle"}function u(e,s,o){if(e&&s===o){return{open:false,activeTool:o,selected:false}}return{open:true,activeTool:o,selected:true}}const _=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{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}.panel-tools__title.sc-ds-panel-tools,.panel-tools__body.sc-ds-panel-tools{opacity:0;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__title.sc-ds-panel-tools,.panel-tools--open.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{opacity:1}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color: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)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color: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)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-footer.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:auto;padding:var(--dimension-space-100);box-sizing:border-box}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=o(this,"dsToolChange");this.dsChromeTransitionStart=o(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=o(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=u(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const o=this.orderedRailItems;if(!o.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(o[s].id);return}if(e.key==="ArrowDown"){if(s>=o.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return b(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const s=e.find((e=>e.id===p));const o=e.find((e=>e.id===h));const t=e.filter((e=>e.id!==p&&e.id!==h));const a=[];if(s)a.push(s);a.push(...t);if(o)a.push(o);return a}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return f[this.activeTool]??""}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const o=Math.max(0,Math.min(e,s.length-1));if(o===this.rovingIndex)return;this.rovingIndex=o;const t=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));t[o]?.focus({preventScroll:true})}renderRailAction(e,s){const o=e.ariaLabel??f[e.id];return t("ds-tooltip",{key:e.id,label:o,side:"left",size:"sm"},t("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":o,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.orderedRailItems;const o=s.find((e=>e.id===p));const i=s.find((e=>e.id===h));const n=s.filter((e=>e.id!==p&&e.id!==h));const l=i?(o?1:0)+n.length:-1;const r=this.isDrawerPresent();const d=m(this.open,this.motion);return t(a,{key:"e001dfa296e1631828eaeb947fd266390a8809f9",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":d},role:"complementary","aria-label":"Tools"},t("div",{key:"94d67d9c5ac39cb255c2e35aa35f31bfe9136c7a",class:"panel-tools__layout"},t("nav",{key:"b98c6ba96cbb70295b1354afc4cf9a92d607041c",class:"panel-tools__rail","aria-label":"Tool shortcuts"},o?t("div",{class:"panel-tools__rail-header"},this.renderRailAction(o,0)):null,t("div",{key:"75d6511bcfd97f21118858872aba039b87bcd906",class:"panel-tools__rail-body"},n.map(((e,s)=>this.renderRailAction(e,o?s+1:s)))),i?t("div",{class:"panel-tools__rail-footer"},this.renderRailAction(i,l)):null),t("div",{key:"06c84e785061a8b5c693fc5fc6485bfc08e84097",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":r},"aria-hidden":r?null:"true",inert:r?undefined:true},t("div",{key:"2b31265ad0cbfa2878b138d96ee548c1737074ad",class:"panel-tools__drawer-surface"},t("header",{key:"6fe15c685253818f27233e162f001d553d7f5f7f",class:"panel-tools__header"},t("span",{key:"16728f47a4327a9a7bd2eaaac4b60b93b046cff9",class:"panel-tools__title text-body-medium-emphasis"},e)),t("div",{key:"70af995d3023cc951e56fdf4571a98ba307f1fd0",class:"panel-tools__body"},t("div",{key:"2a38db247c7e37d50c70d66a6fd5d590470e17f9",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},t("slot",{key:"fc0e486c5a375c5e7950ae2e3bac11ca6c635728",name:"search"})),t("div",{key:"5d7b9d26514805af73767ee4abcc58be27080ec9",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},t("slot",{key:"c75ca74092028acd8362f8396b3dedb2c335f6ff",name:"messages"})),t("div",{key:"cdcc99abbd7d59b118c0f76f5a0c722081d11d8d",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},t("slot",{key:"4d093aab0fb7b336d351f929e41b95ad98ed6a13",name:"stacks"})),t("div",{key:"a30ad3ef1038b925ad9349cb37b7d5803a30beea",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},t("slot",{key:"0490d8e41ef454b6bc57f9885181e1c19d41b06e",name:"activity"})),t("div",{key:"f4ac0f2ff4964ed9c738c0e17ddbe4e3ba95d8f3",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},t("slot",{key:"73ab5d9d3db00835808cdee81a0b983682a59915",name:"agents"})),t("div",{key:"dceb5738575dae3278af7159b88f6315d8159758",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("help"),"text-body-medium":true},hidden:!this.isViewActive("help")},t("slot",{key:"4a77184d2c4b5ae18e1063c6f07998211e79ed9c",name:"help"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return _()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break;case"ds-tooltip":if(!customElements.get(i(e))){c()}break}}))}v();const y=g;const w=v;export{y as DsPanelTools,w as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-tools.js.map
package/dist/components/ds-panel-tools.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","resolvePanelToolActivation","activeTool","id","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","item","bodyItems","filter","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","label","ariaLabel","h","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n 'search',\n 'agents',\n 'messages',\n 'stacks',\n 'activity',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n search: 'Search',\n messages: 'Messages',\n stacks: 'Stacks',\n activity: 'Activity',\n agents: 'Agents',\n};\n\nexport interface PanelToolsItem {\n id: PanelToolsToolId;\n /** Icon name for <ds-icon>. */\n icon: string;\n /** Whether this rail button is currently pressed/active. */\n selected?: boolean;\n /** Show a notification dot. */\n dot?: boolean;\n isInactive?: boolean;\n ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n items: PanelToolsItem[],\n itemsJson: string,\n): PanelToolsItem[] {\n if (itemsJson) {\n return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n }\n return items ?? [];\n}\n\nexport function shouldResyncPanelToolsItems(\n prev: PanelToolsItem[],\n next: PanelToolsItem[],\n): boolean {\n if (prev.length !== next.length) return true;\n return next.some((item, index) => {\n const prior = prev[index];\n if (!prior) return true;\n return (\n prior.id !== item.id ||\n prior.icon !== item.icon ||\n prior.selected !== item.selected ||\n prior.dot !== item.dot ||\n prior.isInactive !== item.isInactive ||\n prior.ariaLabel !== item.ariaLabel\n );\n });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n return !open && motion === 'idle';\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n open: boolean,\n activeTool: PanelToolsToolId | '',\n id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n if (open && activeTool === id) {\n return { open: false, activeTool: id, selected: false };\n }\n return { open: true, activeTool: id, selected: true };\n}\n",":host {\n display: block;\n flex: 0 0 auto;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n --_panel-tools-rail-width: var(--dimension-size-600);\n --_panel-tools-drawer-width: var(--dimension-panel-width-sm);\n --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n --_panel-tools-surface-bg: var(--color-background-secondary);\n /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n display: flex;\n flex-direction: row-reverse;\n align-items: stretch;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n flex: 0 0 auto;\n max-width: 0;\n min-width: 0;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n box-sizing: border-box;\n transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — stays 400px while the clip frame opens/closes. */\n.panel-tools__drawer-surface {\n display: flex;\n flex-direction: column;\n width: var(--_panel-tools-drawer-width);\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--_panel-tools-surface-bg);\n}\n\n/* Shell-owned chrome (bg + wash) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail {\n background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n border-bottom: var(--_panel-tools-border);\n color: var(--color-foreground-primary);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.panel-tools__title {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.panel-tools__body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n content-visibility: auto;\n contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n display: none;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n padding: var(--dimension-space-200);\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n margin: 0;\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n flex: 0 0 var(--_panel-tools-rail-width);\n width: var(--_panel-tools-rail-width);\n min-width: var(--_panel-tools-rail-width);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n border-left: var(--_panel-tools-border);\n background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n display: none;\n}\n\n.panel-tools__rail-action {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: var(--dimension-size-400);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n PANEL_TOOLS_LABELS,\n PANEL_TOOLS_PRIMARY_TOOL_ID,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';\n\n@Component({\n tag: 'ds-panel-tools',\n styleUrl: 'PanelTools.css',\n scoped: true,\n})\nexport class PanelTools {\n @Element() el!: HTMLElement;\n\n /** When false, only the icon rail is shown. */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId | '' = '';\n\n /**\n * Rail items rendered in the right column.\n * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n */\n @Prop() items: PanelToolsItem[] = [];\n\n /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n\n /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n\n /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n /** Arms open vs close easing for the in-flight width transition. */\n @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n /** Suppresses width transition until the host has painted its initial open state. */\n @State() private readyForMotion = false;\n\n @State() private rovingIndex = 0;\n\n private motionEnableGeneration = 0;\n\n private get railItems(): PanelToolsItem[] {\n return parsePanelToolsItems(this.items, this.itemsJson);\n }\n\n private get orderedRailItems(): PanelToolsItem[] {\n const railItems = this.railItems;\n const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n return headerItem ? [headerItem, ...bodyItems] : bodyItems;\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n this.motionEnableGeneration += 1;\n }\n\n private deferMotionEnable() {\n if (this.readyForMotion) return;\n const generation = ++this.motionEnableGeneration;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n this.readyForMotion = true;\n });\n });\n }\n\n connectedCallback() {\n this.el.addEventListener('transitionend', this.handleTransitionEnd);\n }\n\n @Watch('open')\n openChanged(isOpen: boolean, wasOpen?: boolean) {\n if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n this.motion = isOpen ? 'opening' : 'closing';\n this.dsChromeTransitionStart.emit({\n source: 'panel-tools',\n phase: isOpen ? 'opening' : 'closing',\n });\n }\n this.deferMotionEnable();\n }\n\n @Watch('activeTool')\n activeToolChanged() {\n this.deferMotionEnable();\n }\n\n componentDidLoad() {\n this.deferMotionEnable();\n }\n\n @Watch('items')\n @Watch('itemsJson')\n itemsChanged() {\n this.rovingIndex = 0;\n this.deferMotionEnable();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n if (event.propertyName !== 'max-width') return;\n this.motion = 'idle';\n this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n };\n\n /** Rail selection follows `open` immediately — independent of the slide animation. */\n private isRailSelected(id: PanelToolsToolId): boolean {\n return this.open && this.activeTool === id;\n }\n\n /** Drawer body stays mounted while the clip frame animates closed. */\n private isDrawerPresent(): boolean {\n return this.open || this.motion === 'closing';\n }\n\n private isViewActive(id: PanelToolsToolId): boolean {\n return this.isDrawerPresent() && this.activeTool === id;\n }\n\n private headerLabel(): string {\n if (!this.isDrawerPresent() || !this.activeTool) return '';\n return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n }\n\n private handleToolChange = (id: PanelToolsToolId) => {\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n };\n\n /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n @Method()\n async activateTool(id: PanelToolsToolId) {\n const item = this.railItems.find(entry => entry.id === id);\n if (!item || item.isInactive) return;\n this.handleToolChange(id);\n }\n\n /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n @Method()\n async closeDrawer() {\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) {\n this.dsToolChange.emit({ id, selected: false });\n }\n }\n\n private focusRailAt(index: number) {\n const items = this.orderedRailItems;\n if (!items.length) return;\n const bounded = Math.max(0, Math.min(index, items.length - 1));\n if (bounded === this.rovingIndex) return;\n this.rovingIndex = bounded;\n const actions = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n );\n actions[bounded]?.focus({ preventScroll: true });\n }\n\n private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n const items = this.orderedRailItems;\n if (!items.length) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handleToolChange(items[index].id);\n return;\n }\n\n if (e.key === 'ArrowDown') {\n if (index >= items.length - 1) return;\n e.preventDefault();\n this.focusRailAt(index + 1);\n return;\n }\n\n if (e.key === 'ArrowUp') {\n if (index <= 0) return;\n e.preventDefault();\n this.focusRailAt(index - 1);\n }\n };\n\n private renderRailAction(item: PanelToolsItem, index: number) {\n const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n return (\n <ds-tooltip key={item.id} label={label} side=\"left\" size=\"sm\">\n <ds-button-unfilled variant=\"icon\"\n class=\"panel-tools__rail-action\"\n icon={item.icon}\n isActive={this.isRailSelected(item.id)}\n activeFill={false}\n hasBorder={false}\n dot={item.dot ?? false}\n isInactive={item.isInactive}\n focusTabIndex={index === this.rovingIndex ? 0 : -1}\n aria-label={label}\n pressed={this.isRailSelected(item.id)}\n onFocusin={() => { this.rovingIndex = index; }}\n onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n onDsClick={() => this.handleToolChange(item.id)}\n />\n </ds-tooltip>\n );\n }\n\n render() {\n const headerLabel = this.headerLabel();\n const orderedRailItems = this.orderedRailItems;\n const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n const showDrawerChrome = this.isDrawerPresent();\n const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n return (\n <Host\n class={{\n 'panel-tools': true,\n 'panel-tools--open': this.open,\n 'panel-tools--ready': this.readyForMotion,\n 'panel-tools--motion-opening': this.motion === 'opening',\n 'panel-tools--motion-closing': this.motion === 'closing',\n 'panel-tools--drawer-resting': drawerResting,\n }}\n role=\"complementary\"\n aria-label=\"Tools\"\n >\n <div class=\"panel-tools__layout\">\n <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n {headerItem ? (\n <div class=\"panel-tools__rail-header\">\n {this.renderRailAction(headerItem, 0)}\n </div>\n ) : null}\n <div class=\"panel-tools__rail-body\">\n {bodyItems.map((item, bodyIdx) =>\n this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n )}\n </div>\n </nav>\n\n <div\n class={{\n 'panel-tools__drawer': true,\n 'panel-tools__drawer--visible': showDrawerChrome,\n }}\n aria-hidden={showDrawerChrome ? null : 'true'}\n inert={showDrawerChrome ? undefined : true}\n >\n <div class=\"panel-tools__drawer-surface\">\n <header class=\"panel-tools__header\">\n <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\n </header>\n <div class=\"panel-tools__body\">\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('search'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('search')}\n >\n <slot name=\"search\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('messages'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('messages')}\n >\n <slot name=\"messages\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('stacks'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('stacks')}\n >\n <slot name=\"stacks\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('activity'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('activity')}\n >\n <slot name=\"activity\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('agents'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('agents')}\n >\n <slot name=\"agents\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_FOOTER_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","help","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","resolvePanelToolActivation","activeTool","id","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","item","footerItem","bodyItems","filter","ordered","push","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","label","ariaLabel","h","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","footerIndex","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId =\n | 'search'\n | 'agents'\n | 'messages'\n | 'stacks'\n | 'activity'\n | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n 'search',\n 'agents',\n 'messages',\n 'stacks',\n 'activity',\n 'help',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\n/** Rail footer slot — flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n search: 'Search',\n messages: 'Messages',\n stacks: 'Stacks',\n activity: 'Activity',\n agents: 'Agents',\n help: 'Help & Support',\n};\n\nexport interface PanelToolsItem {\n id: PanelToolsToolId;\n /** Icon name for <ds-icon>. */\n icon: string;\n /** Whether this rail button is currently pressed/active. */\n selected?: boolean;\n /** Show a notification dot. */\n dot?: boolean;\n isInactive?: boolean;\n ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n items: PanelToolsItem[],\n itemsJson: string,\n): PanelToolsItem[] {\n if (itemsJson) {\n return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n }\n return items ?? [];\n}\n\nexport function shouldResyncPanelToolsItems(\n prev: PanelToolsItem[],\n next: PanelToolsItem[],\n): boolean {\n if (prev.length !== next.length) return true;\n return next.some((item, index) => {\n const prior = prev[index];\n if (!prior) return true;\n return (\n prior.id !== item.id ||\n prior.icon !== item.icon ||\n prior.selected !== item.selected ||\n prior.dot !== item.dot ||\n prior.isInactive !== item.isInactive ||\n prior.ariaLabel !== item.ariaLabel\n );\n });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n return !open && motion === 'idle';\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n open: boolean,\n activeTool: PanelToolsToolId | '',\n id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n if (open && activeTool === id) {\n return { open: false, activeTool: id, selected: false };\n }\n return { open: true, activeTool: id, selected: true };\n}\n",":host {\n display: block;\n flex: 0 0 auto;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n --_panel-tools-rail-width: var(--dimension-size-600);\n --_panel-tools-drawer-width: var(--dimension-panel-width-sm);\n --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n --_panel-tools-surface-bg: var(--color-background-secondary);\n /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n display: flex;\n flex-direction: row-reverse;\n align-items: stretch;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n flex: 0 0 auto;\n max-width: 0;\n min-width: 0;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n box-sizing: border-box;\n transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — stays 400px while the clip frame opens/closes. */\n.panel-tools__drawer-surface {\n display: flex;\n flex-direction: column;\n width: var(--_panel-tools-drawer-width);\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--_panel-tools-surface-bg);\n}\n\n/* Shell-owned chrome (bg + wash) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail {\n background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n border-bottom: var(--_panel-tools-border);\n color: var(--color-foreground-primary);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.panel-tools__title {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/*\n * Fade title + slot body with the drawer slide (same dur/easing).\n * Header border stays opaque — only inner content opacity animates.\n */\n.panel-tools__title,\n.panel-tools__body {\n opacity: 0;\n transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__body {\n transition: opacity var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__body {\n transition: opacity var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__title,\n:host(.panel-tools--open) .panel-tools__body {\n opacity: 1;\n}\n\n.panel-tools__body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n content-visibility: auto;\n contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n display: none;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n padding: var(--dimension-space-200);\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n margin: 0;\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n flex: 0 0 var(--_panel-tools-rail-width);\n width: var(--_panel-tools-rail-width);\n min-width: var(--_panel-tools-rail-width);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n border-left: var(--_panel-tools-border);\n background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n display: none;\n}\n\n/* Flush to the bottom of the rail — mirrors Search header pin. */\n.panel-tools__rail-footer {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: auto;\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n}\n\n.panel-tools__rail-action {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: var(--dimension-size-400);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n PANEL_TOOLS_FOOTER_TOOL_ID,\n PANEL_TOOLS_LABELS,\n PANEL_TOOLS_PRIMARY_TOOL_ID,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';\n\n@Component({\n tag: 'ds-panel-tools',\n styleUrl: 'PanelTools.css',\n scoped: true,\n})\nexport class PanelTools {\n @Element() el!: HTMLElement;\n\n /** When false, only the icon rail is shown. */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId | '' = '';\n\n /**\n * Rail items rendered in the right column.\n * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n */\n @Prop() items: PanelToolsItem[] = [];\n\n /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n\n /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n\n /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n /** Arms open vs close easing for the in-flight width transition. */\n @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n /** Suppresses width transition until the host has painted its initial open state. */\n @State() private readyForMotion = false;\n\n @State() private rovingIndex = 0;\n\n private motionEnableGeneration = 0;\n\n private get railItems(): PanelToolsItem[] {\n return parsePanelToolsItems(this.items, this.itemsJson);\n }\n\n private get orderedRailItems(): PanelToolsItem[] {\n const railItems = this.railItems;\n const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n const bodyItems = railItems.filter(\n item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n );\n const ordered: PanelToolsItem[] = [];\n if (headerItem) ordered.push(headerItem);\n ordered.push(...bodyItems);\n if (footerItem) ordered.push(footerItem);\n return ordered;\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n this.motionEnableGeneration += 1;\n }\n\n private deferMotionEnable() {\n if (this.readyForMotion) return;\n const generation = ++this.motionEnableGeneration;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n this.readyForMotion = true;\n });\n });\n }\n\n connectedCallback() {\n this.el.addEventListener('transitionend', this.handleTransitionEnd);\n }\n\n @Watch('open')\n openChanged(isOpen: boolean, wasOpen?: boolean) {\n if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n this.motion = isOpen ? 'opening' : 'closing';\n this.dsChromeTransitionStart.emit({\n source: 'panel-tools',\n phase: isOpen ? 'opening' : 'closing',\n });\n }\n this.deferMotionEnable();\n }\n\n @Watch('activeTool')\n activeToolChanged() {\n this.deferMotionEnable();\n }\n\n componentDidLoad() {\n this.deferMotionEnable();\n }\n\n @Watch('items')\n @Watch('itemsJson')\n itemsChanged() {\n this.rovingIndex = 0;\n this.deferMotionEnable();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n if (event.propertyName !== 'max-width') return;\n this.motion = 'idle';\n this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n };\n\n /** Rail selection follows `open` immediately — independent of the slide animation. */\n private isRailSelected(id: PanelToolsToolId): boolean {\n return this.open && this.activeTool === id;\n }\n\n /** Drawer body stays mounted while the clip frame animates closed. */\n private isDrawerPresent(): boolean {\n return this.open || this.motion === 'closing';\n }\n\n private isViewActive(id: PanelToolsToolId): boolean {\n return this.isDrawerPresent() && this.activeTool === id;\n }\n\n private headerLabel(): string {\n if (!this.isDrawerPresent() || !this.activeTool) return '';\n return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n }\n\n private handleToolChange = (id: PanelToolsToolId) => {\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n };\n\n /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n @Method()\n async activateTool(id: PanelToolsToolId) {\n const item = this.railItems.find(entry => entry.id === id);\n if (!item || item.isInactive) return;\n this.handleToolChange(id);\n }\n\n /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n @Method()\n async closeDrawer() {\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) {\n this.dsToolChange.emit({ id, selected: false });\n }\n }\n\n private focusRailAt(index: number) {\n const items = this.orderedRailItems;\n if (!items.length) return;\n const bounded = Math.max(0, Math.min(index, items.length - 1));\n if (bounded === this.rovingIndex) return;\n this.rovingIndex = bounded;\n const actions = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n );\n actions[bounded]?.focus({ preventScroll: true });\n }\n\n private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n const items = this.orderedRailItems;\n if (!items.length) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handleToolChange(items[index].id);\n return;\n }\n\n if (e.key === 'ArrowDown') {\n if (index >= items.length - 1) return;\n e.preventDefault();\n this.focusRailAt(index + 1);\n return;\n }\n\n if (e.key === 'ArrowUp') {\n if (index <= 0) return;\n e.preventDefault();\n this.focusRailAt(index - 1);\n }\n };\n\n private renderRailAction(item: PanelToolsItem, index: number) {\n const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n return (\n <ds-tooltip key={item.id} label={label} side=\"left\" size=\"sm\">\n <ds-button-unfilled variant=\"icon\"\n class=\"panel-tools__rail-action\"\n icon={item.icon}\n isActive={this.isRailSelected(item.id)}\n activeFill={false}\n hasBorder={false}\n dot={item.dot ?? false}\n isInactive={item.isInactive}\n focusTabIndex={index === this.rovingIndex ? 0 : -1}\n aria-label={label}\n pressed={this.isRailSelected(item.id)}\n onFocusin={() => { this.rovingIndex = index; }}\n onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n onDsClick={() => this.handleToolChange(item.id)}\n />\n </ds-tooltip>\n );\n }\n\n render() {\n const headerLabel = this.headerLabel();\n const orderedRailItems = this.orderedRailItems;\n const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n const bodyItems = orderedRailItems.filter(\n item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n );\n const footerIndex = footerItem\n ? (headerItem ? 1 : 0) + bodyItems.length\n : -1;\n const showDrawerChrome = this.isDrawerPresent();\n const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n return (\n <Host\n class={{\n 'panel-tools': true,\n 'panel-tools--open': this.open,\n 'panel-tools--ready': this.readyForMotion,\n 'panel-tools--motion-opening': this.motion === 'opening',\n 'panel-tools--motion-closing': this.motion === 'closing',\n 'panel-tools--drawer-resting': drawerResting,\n }}\n role=\"complementary\"\n aria-label=\"Tools\"\n >\n <div class=\"panel-tools__layout\">\n <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n {headerItem ? (\n <div class=\"panel-tools__rail-header\">\n {this.renderRailAction(headerItem, 0)}\n </div>\n ) : null}\n <div class=\"panel-tools__rail-body\">\n {bodyItems.map((item, bodyIdx) =>\n this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n )}\n </div>\n {footerItem ? (\n <div class=\"panel-tools__rail-footer\">\n {this.renderRailAction(footerItem, footerIndex)}\n </div>\n ) : null}\n </nav>\n\n <div\n class={{\n 'panel-tools__drawer': true,\n 'panel-tools__drawer--visible': showDrawerChrome,\n }}\n aria-hidden={showDrawerChrome ? null : 'true'}\n inert={showDrawerChrome ? undefined : true}\n >\n <div class=\"panel-tools__drawer-surface\">\n <header class=\"panel-tools__header\">\n <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\n </header>\n <div class=\"panel-tools__body\">\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('search'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('search')}\n >\n <slot name=\"search\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('messages'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('messages')}\n >\n <slot name=\"messages\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('stacks'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('stacks')}\n >\n <slot name=\"stacks\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('activity'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('activity')}\n >\n <slot name=\"activity\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('agents'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('agents')}\n >\n <slot name=\"agents\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('help'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('help')}\n >\n <slot name=\"help\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/ds-select.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as s,H as e,c as t,h as i,a as o,t as n}from"./index.js";import{c as r}from"./p-DuFm-ieS.js";import{d as c}from"./p-B82KZX9D.js";import{d}from"./p-CwARVsZQ.js";import{d as a}from"./p-Be3PHv34.js";import{d as l}from"./p-CQmf2CeW.js";import{r as h}from"./p-BWUTr_XN.js";import{T as f}from"./p-B_g8X0eh.js";const u=()=>`.sc-ds-select-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-select: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-select{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-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select: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-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select,.trigger--open.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-select-fg)}`;const v={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const g={md:"md",sm:"sm",xs:"xs"};const b=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=h(f.space050,f.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=!this.hasSelection;const e=!s;const t=s?this.placeholder:this.selectedLabel;const n=v[this.size];const c=g[this.size];const d=`ds-control--${this.size}`;const a=!this.isInactive&&this.activeFill&&(e||this.isOpen);return i(o,{key:"a06918c7052a6241b8789ba0948a184cdfbb4dc6",class:{"select-host":true,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...r(this.width)}},i("button",{key:"116cbb302bdb23cb70c1045afdd0b82731bad140",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":a,"trigger--open":this.isOpen,"trigger--bordered":this.hasBorder,"trigger--placeholder":s,"trigger--has-value":e,[d]:true},disabled:this.isInactive,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},i("span",{key:"b5a2568df8c887e1d2d9161b87bb9624b257cf7d",class:{trigger__label:true,[n]:true,"ds-interaction-fill__content":true}},t),i("span",{key:"05ec47e26a1e04795e6651be92efdaf45567e342",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"8abe52054c5748370699ed24f30b11a7ba318f52",name:"ChevronDown",size:c,color:"inherit"}))),i("ds-menu",{key:"14daa31a7d0f14672e930346823ad5db35dfe92c",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return u()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),b)}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-menu":if(!customElements.get(n(s))){d()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){l()}break}}))}p();const m=b;const w=p;export{m as DsSelect,w as defineCustomElement};
1
+ import{p as s,H as e,c as t,h as i,a as o,t as n}from"./index.js";import{c as r}from"./p-DuFm-ieS.js";import{d as c}from"./p-B82KZX9D.js";import{d}from"./p-Dlol7hPg.js";import{d as a}from"./p-CYmVDfd_.js";import{d as l}from"./p-BAeKw2pj.js";import{r as h}from"./p-BWUTr_XN.js";import{T as f}from"./p-B_g8X0eh.js";const u=()=>`.sc-ds-select-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-select: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-select{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-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select: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-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select,.trigger--open.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-select-fg)}`;const v={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const g={md:"md",sm:"sm",xs:"xs"};const b=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=h(f.space050,f.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=!this.hasSelection;const e=!s;const t=s?this.placeholder:this.selectedLabel;const n=v[this.size];const c=g[this.size];const d=`ds-control--${this.size}`;const a=!this.isInactive&&this.activeFill&&(e||this.isOpen);return i(o,{key:"a06918c7052a6241b8789ba0948a184cdfbb4dc6",class:{"select-host":true,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...r(this.width)}},i("button",{key:"116cbb302bdb23cb70c1045afdd0b82731bad140",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":a,"trigger--open":this.isOpen,"trigger--bordered":this.hasBorder,"trigger--placeholder":s,"trigger--has-value":e,[d]:true},disabled:this.isInactive,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},i("span",{key:"b5a2568df8c887e1d2d9161b87bb9624b257cf7d",class:{trigger__label:true,[n]:true,"ds-interaction-fill__content":true}},t),i("span",{key:"05ec47e26a1e04795e6651be92efdaf45567e342",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"8abe52054c5748370699ed24f30b11a7ba318f52",name:"ChevronDown",size:c,color:"inherit"}))),i("ds-menu",{key:"14daa31a7d0f14672e930346823ad5db35dfe92c",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return u()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),b)}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-menu":if(!customElements.get(n(s))){d()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){l()}break}}))}p();const m=b;const w=p;export{m as DsSelect,w as defineCustomElement};
2
2
  //# sourceMappingURL=ds-select.js.map
package/dist/components/ds-shell-gradient-picker.js CHANGED
@@ -1,2 +1,2 @@
1
- import{S as o,d as s}from"./p-Be3PHv34.js";const t=o;const p=s;export{t as DsShellGradientPicker,p as defineCustomElement};
1
+ import{S as o,d as s}from"./p-CYmVDfd_.js";const t=o;const m=s;export{t as DsShellGradientPicker,m as defineCustomElement};
2
2
  //# sourceMappingURL=ds-shell-gradient-picker.js.map
package/dist/components/ds-shell-gradient-swatch.js CHANGED
@@ -1,2 +1,2 @@
1
- import{S as o,d as s}from"./p-CQmf2CeW.js";const t=o;const m=s;export{t as DsShellGradientSwatch,m as defineCustomElement};
1
+ import{S as o,d as s}from"./p-BAeKw2pj.js";const p=o;const t=s;export{p as DsShellGradientSwatch,t as defineCustomElement};
2
2
  //# sourceMappingURL=ds-shell-gradient-swatch.js.map
package/dist/components/ds-slider.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"ec075eb676a4264118e4ebadc08bc614faed3386",class:"field"},t("div",{key:"2ce888dccb62a7f64521c950651a858d8f569e29",class:"label-row"},t("label",{key:"dd1c796f68b0d3cceb9d1ac6e1a735e80ea3dbe5",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"de8fae6d14c002b45ee8fe0ec36c4375fab49ac0",class:"text-body-small-emphasis"},this.value)),t("div",{key:"a2c6daa831ffd8759cd67e279d5201dbaabe63e0",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"88d81cb963a78f88cdde87737e263b86fab94db0",class:"track-inner"},t("div",{key:"da1067152e33b506ca6dd1d4563482a122cf9c0f",class:"fill-track"},t("div",{key:"36625843c6cc17eb81659890e01310eb80138937",class:"fill"})),t("div",{key:"0a880aa687ea29acaad437cd89397cbc2a793ada",class:"thumb"})),t("input",{key:"d17e422848c1306f6f9a06274bbf081c0dc14355",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
1
+ import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"b18b29340e76bab7ffbc0fd8e50458530eddbe8b",class:"field"},t("div",{key:"f21c3d2b2214131c1f186244efcf09b5871af664",class:"label-row"},t("label",{key:"e6d9388a996eff6f993c5da20fa634be8c236e88",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"7e60fa751d9143d45adf120afef6ec66ba08d65a",class:"text-body-small-emphasis"},this.value)),t("div",{key:"234602dcc8c10060071d66938f72e88f70fc17aa",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"eb93b85f1e131488e92bb17ee4c4aaa3d34da9fc",class:"track-inner"},t("div",{key:"b087a28b98488960a3715890eb2ffe5309e90f91",class:"fill-track"},t("div",{key:"3c7dc9a778601c533c6f3a0ed2aa16dfeb490e93",class:"fill"})),t("div",{key:"a0a783761da82741439a37e90b6f661226a46789",class:"thumb"})),t("input",{key:"b99fe154c75e310480b8ce5e2f6e9184ceed1458",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
2
2
  //# sourceMappingURL=ds-slider.js.map
package/dist/components/ds-toggle.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as t,H as e,c as o,h as n,a as s,t as i}from"./index.js";const r=()=>`:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.ds-control-inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.ds-control-inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.isInactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return n(s,{key:"e9cb9b65264fe41c07360e06b7567093a19a5f6d",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.isInactive||undefined,tabIndex:this.isInactive?-1:0,class:{toggle:true,checked:this.checked,"ds-control-inactive":this.isInactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("span",{key:"1065d275c94e8af64e0905c84ae29f9ab2f1a447",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],isInactive:[4,"is-inactive"]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(i(t))){customElements.define(i(t),a)}break}}))}c();const d=a;const l=c;export{d as DsToggle,l as defineCustomElement};
1
+ import{p as t,H as e,c as o,h as n,a as s,t as i}from"./index.js";const r=()=>`:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.ds-control-inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.ds-control-inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.isInactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return n(s,{key:"b729fc6fcfa69e9761c2d412802fd6228c0d6511",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.isInactive||undefined,tabIndex:this.isInactive?-1:0,class:{toggle:true,checked:this.checked,"ds-control-inactive":this.isInactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("span",{key:"3d8b5cd8b8d57653a279b5627aa2dbd476f9e427",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],isInactive:[4,"is-inactive"]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(i(t))){customElements.define(i(t),a)}break}}))}c();const d=a;const l=c;export{d as DsToggle,l as defineCustomElement};
2
2
  //# sourceMappingURL=ds-toggle.js.map
package/dist/components/ds-tooltip-data-viz.js CHANGED
@@ -1,2 +1,2 @@
1
- import{T as o,d as s}from"./p-3FLHei19.js";const t=o;const p=s;export{t as DsTooltipDataViz,p as defineCustomElement};
1
+ import{T as o,d as s}from"./p-XNHSe8Mg.js";const t=o;const p=s;export{t as DsTooltipDataViz,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-tooltip-data-viz.js.map
package/dist/components/{p-CQmf2CeW.js → p-BAeKw2pj.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,a as c,b as l,c as d}from"./p-Bz3jyrDV.js";const o=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch: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-shell-gradient-swatch{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-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc( var(--dimension-stroke-width-025) + var(--dimension-space-025) );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion), background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion), transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion), transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"5080c0250ef990549343305085a1c8bd7d74aa10"},a("button",{key:"2772d7d0e7d224c46b972f32458ac3d03b79aeaa",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"3bdadd7ba236da0602a19db8933c37b544b85216",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"01e0fcc678090f6bf623c9d7410a00eb39aee86e",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"5db33a5d536797514bf3d71d98fa5ed9db8c1f5e",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"2f7e77fcc56b2f986ef434d6bab6ea6d8ae4d724",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"8d569b6fad549cfdcff063eb70a7bf4f00e2d42c",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
2
- //# sourceMappingURL=p-CQmf2CeW.js.map
1
+ import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,a as c,b as l,c as d}from"./p-Bz3jyrDV.js";const o=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch: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-shell-gradient-swatch{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-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc( var(--dimension-stroke-width-025) + var(--dimension-space-025) );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion), right var(--_swatch-select-motion), bottom var(--_swatch-select-motion), left var(--_swatch-select-motion), background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion), transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion), transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"fa7ca80e52696c8015cb394c1ac893101cae32ef"},a("button",{key:"c1822d03928817a7df1a41b9cbad384af22da34a",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"cfb65947bea286b30bfce3283e14aa9d3d663d45",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"2b71f81ad5ace582e421e6e097f1cbfcb1738619",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"ac55a44f4d3507084bffcdf842cdef9fce23ffb7",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"670b4907259680e86bfad3a0911e8c0eae6d7f14",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"d3f7ebc3f370da233a55cc946c9c57808c769f42",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
2
+ //# sourceMappingURL=p-BAeKw2pj.js.map
package/dist/components/{p-Be3PHv34.js → p-CYmVDfd_.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d}from"./p-CQmf2CeW.js";import{D as n,S as l}from"./p-Bz3jyrDV.js";const c=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}.shell-gradient-picker.sc-ds-shell-gradient-picker{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.shell-gradient-picker__divider.sc-ds-shell-gradient-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}`;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.value=n;this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}renderSwatch(e){return t("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return t(r,{key:"af9d6c01fead555e3abd51b73e39861f6f6ed9d7"},t("div",{key:"16ec6654b6ab75716b083ebd25b324e781f61f1b",class:"shell-gradient-picker",role:"radiogroup","aria-label":"Shell gradient theme"},this.renderSwatch("none"),t("div",{key:"e2f7db2b2e1ca076a697e3bc42432bfe4a906552",class:"shell-gradient-picker__divider","aria-hidden":"true"}),l.map((e=>this.renderSwatch(e)))))}static get style(){return c()}},[2,"ds-shell-gradient-picker",{value:[1537]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-shell-gradient-picker":if(!customElements.get(a(e))){customElements.define(a(e),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(e))){d()}break}}))}o();export{h as S,o as d};
2
- //# sourceMappingURL=p-Be3PHv34.js.map
1
+ import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d}from"./p-BAeKw2pj.js";import{D as n,S as l}from"./p-Bz3jyrDV.js";const c=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}.shell-gradient-picker.sc-ds-shell-gradient-picker{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.shell-gradient-picker__divider.sc-ds-shell-gradient-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}`;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.value=n;this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}renderSwatch(e){return t("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return t(r,{key:"87863ebd1f989f5c33526519589f7fc3bb3b6f97"},t("div",{key:"fd01030b57a260e4774da6e9b97a75882358814f",class:"shell-gradient-picker",role:"radiogroup","aria-label":"Shell gradient theme"},this.renderSwatch("none"),t("div",{key:"6ea6c2d7e6ddbf0a2b36a6ff2062811117192378",class:"shell-gradient-picker__divider","aria-hidden":"true"}),l.map((e=>this.renderSwatch(e)))))}static get style(){return c()}},[2,"ds-shell-gradient-picker",{value:[1537]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-shell-gradient-picker":if(!customElements.get(a(e))){customElements.define(a(e),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(e))){d()}break}}))}o();export{h as S,o as d};
2
+ //# sourceMappingURL=p-CYmVDfd_.js.map
package/dist/components/{p-CwARVsZQ.js → p-Dlol7hPg.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{p as e,H as i,c as n,h as s,a as t,t as o}from"./index.js";import{d as r}from"./p-Be3PHv34.js";import{d as a}from"./p-CQmf2CeW.js";import{a as d,T as c}from"./p-B_g8X0eh.js";import{r as l}from"./p-BWUTr_XN.js";import{r as u}from"./p-C1cBr-Ri.js";function h(e){const{anchorRect:i,popupWidth:n,popupHeight:s,side:t,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:l}=e;let u=0;let h=0;switch(t){case"top":h=i.top-s-r;u=o==="start"?i.left+a:o==="end"?i.right-n+a:i.left+i.width/2-n/2+a;break;case"bottom":h=i.bottom+r;u=o==="start"?i.left+a:o==="end"?i.right-n+a:i.left+i.width/2-n/2+a;break;case"left":u=i.left-n-r;h=o==="start"?i.top+a:o==="end"?i.bottom-s+a:i.top+i.height/2-s/2+a;break;case"right":u=i.right+r;h=o==="start"?i.top+a:o==="end"?i.bottom-s+a:i.top+i.height/2-s/2+a;break}return{x:Math.min(Math.max(u,d),c-n-d),y:Math.min(Math.max(h,d),l-s-d)}}function m(e){return"variant"in e&&e.variant==="gradient-picker"}const f=()=>`.sc-ds-menu-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-menu: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-menu{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-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu: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-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-menu-h,.ds-interaction-fill.sc-ds-menu{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.menu-item.sc-ds-menu:has(.menu-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const g=8;const v=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=n(this,"dsClose");this.dsSelect=n(this,"dsSelect");this.dsGradientSelect=n(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=d.space050;this.alignOffset=0;this.initialFocusVisible=false;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(e){if(e){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return l(c.space050,c.space050)}get sideOffsetPx(){return l(this.sideOffset,c.space050)}get alignOffsetPx(){return l(this.alignOffset,0)}get popupFallbackWidthPx(){return l(c.menuWidthXs,c.menuWidthXs)}get popupFallbackHeightPx(){return l(c.menuFallbackHeight,c.menuFallbackHeight)}get closeAnimationMs(){return u(c.motionShort2,c.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>m(e)?[]:e.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let i=g;const n=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;e?.();return}if(i>0){i-=1;this.positionRetryRaf=requestAnimationFrame(n)}};this.positionRetryRaf=requestAnimationFrame(n)}calculatePosition(){const e=this.resolvedAnchor;if(!e)return false;const i=this.el.querySelector(".menu-popup");if(!i)return false;this.pos=h({anchorRect:e.getBoundingClientRect(),popupWidth:i.offsetWidth||this.popupFallbackWidthPx,popupHeight:i.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const e=this.flatItems;const i=e.findIndex((e=>e.isSelected&&!e.isInactive));const n=e.findIndex((e=>!e.isInactive));this.focusedIndex=i>=0?i:n>=0?n:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const i=e.target;const n=this.el.querySelector(".menu-popup");const s=this.resolvedAnchor;if(n?.contains(i)||s?.contains(i))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(e){if(!this.shouldRender||this.closing)return;const i=this.flatItems;const n=i.map(((e,i)=>({it:e,i}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!n.length)return;const s=n.indexOf(this.focusedIndex);const t=s<0?0:s;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(t+1)%n.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(t-1+n.length)%n.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[n.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const i=this.el.querySelectorAll(".menu-item");i[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e)}handleGradientSelect(e){this.dsGradientSelect.emit(e)}render(){if(!this.shouldRender)return s(t,{style:{display:"contents"}});const e=this.activeSections;let i=0;const n={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)n["width"]=this.menuWidth;if(this.minWidth)n["min-width"]=this.minWidth;return s(t,{style:{display:"contents"}},s("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:n,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((n,t)=>s("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<e.length-1,"menu-section--gradient-picker":m(n)},role:n.header?"group":undefined,"aria-label":n.header},n.header&&s("div",{class:"section-header ds-control--md","aria-hidden":"true"},s("span",{class:"text-body-small-emphasis section-label"},n.header)),m(n)?s("ds-shell-gradient-picker",{value:n.value,onDsChange:e=>{e.stopPropagation();this.handleGradientSelect(e.detail)}}):n.items.map((e=>{const n=i++;const t=this.focusedIndex===n;return s("button",{key:n,type:"button",class:{"menu-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":!!e.isSelected&&!e.isInactive,"menu-item--selected":!!e.isSelected,"ds-control-inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":t},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=n}},s("div",{class:"menu-item__content ds-interaction-fill__content"},s("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&s("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&s("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue,"ds-interaction-fill__content":true},"aria-hidden":"true"},s("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return f()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),v)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){a()}break}}))}p();export{v as M,p as d};
2
- //# sourceMappingURL=p-CwARVsZQ.js.map
1
+ import{p as i,H as e,c as n,h as s,a as t,t as o}from"./index.js";import{d as r}from"./p-CYmVDfd_.js";import{d as a}from"./p-BAeKw2pj.js";import{a as d,T as c}from"./p-B_g8X0eh.js";import{r as l}from"./p-BWUTr_XN.js";import{r as u}from"./p-C1cBr-Ri.js";function h(i){const{anchorRect:e,popupWidth:n,popupHeight:s,side:t,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:l}=i;let u=0;let h=0;switch(t){case"top":h=e.top-s-r;u=o==="start"?e.left+a:o==="end"?e.right-n+a:e.left+e.width/2-n/2+a;break;case"bottom":h=e.bottom+r;u=o==="start"?e.left+a:o==="end"?e.right-n+a:e.left+e.width/2-n/2+a;break;case"left":u=e.left-n-r;h=o==="start"?e.top+a:o==="end"?e.bottom-s+a:e.top+e.height/2-s/2+a;break;case"right":u=e.right+r;h=o==="start"?e.top+a:o==="end"?e.bottom-s+a:e.top+e.height/2-s/2+a;break}return{x:Math.min(Math.max(u,d),c-n-d),y:Math.min(Math.max(h,d),l-s-d)}}function m(i){return"variant"in i&&i.variant==="gradient-picker"}const f=()=>`.sc-ds-menu-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-menu: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-menu{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-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu: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-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-menu-h,.ds-interaction-fill.sc-ds-menu{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.menu-item.sc-ds-menu:has(.menu-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const g=8;const v=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsClose=n(this,"dsClose");this.dsSelect=n(this,"dsSelect");this.dsGradientSelect=n(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=d.space050;this.alignOffset=0;this.initialFocusVisible=false;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(i){if(i){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return l(c.space050,c.space050)}get sideOffsetPx(){return l(this.sideOffset,c.space050)}get alignOffsetPx(){return l(this.alignOffset,0)}get popupFallbackWidthPx(){return l(c.menuWidthXs,c.menuWidthXs)}get popupFallbackHeightPx(){return l(c.menuFallbackHeight,c.menuFallbackHeight)}get closeAnimationMs(){return u(c.motionShort2,c.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((i=>m(i)?[]:i.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(i){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let e=g;const n=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;i?.();return}if(e>0){e-=1;this.positionRetryRaf=requestAnimationFrame(n)}};this.positionRetryRaf=requestAnimationFrame(n)}calculatePosition(){const i=this.resolvedAnchor;if(!i)return false;const e=this.el.querySelector(".menu-popup");if(!e)return false;this.pos=h({anchorRect:i.getBoundingClientRect(),popupWidth:e.offsetWidth||this.popupFallbackWidthPx,popupHeight:e.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const i=this.flatItems;const e=i.findIndex((i=>i.isSelected&&!i.isInactive));const n=i.findIndex((i=>!i.isInactive));this.focusedIndex=e>=0?e:n>=0?n:0;requestAnimationFrame((()=>{const i=this.el.querySelectorAll(".menu-item");i[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=i=>{const e=i.target;const n=this.el.querySelector(".menu-popup");const s=this.resolvedAnchor;if(n?.contains(e)||s?.contains(e))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(i){if(!this.shouldRender||this.closing)return;const e=this.flatItems;const n=e.map(((i,e)=>({it:i,i:e}))).filter((({it:i})=>!i.isInactive)).map((({i})=>i));if(!n.length)return;const s=n.indexOf(this.focusedIndex);const t=s<0?0:s;switch(i.key){case"ArrowDown":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(t+1)%n.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(t-1+n.length)%n.length];this.focusItem(this.focusedIndex);break;case"Home":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[0];this.focusItem(this.focusedIndex);break;case"End":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[n.length-1];this.focusItem(this.focusedIndex);break;case"Escape":i.preventDefault();this.close();break;case"Tab":i.preventDefault();this.close();break}}focusItem(i){const e=this.el.querySelectorAll(".menu-item");e[i]?.focus()}handleItemClick(i){if(i.isInactive)return;this.dsSelect.emit(i)}handleGradientSelect(i){this.dsGradientSelect.emit(i)}render(){if(!this.shouldRender)return s(t,{style:{display:"contents"}});const i=this.activeSections;let e=0;const n={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)n["width"]=this.menuWidth;if(this.minWidth)n["min-width"]=this.minWidth;return s(t,{style:{display:"contents"}},s("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:n,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},i.map(((n,t)=>s("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<i.length-1,"menu-section--gradient-picker":m(n)},role:n.header?"group":undefined,"aria-label":n.header},n.header&&s("div",{class:"section-header ds-control--md","aria-hidden":"true"},s("span",{class:"text-body-small-emphasis section-label"},n.header)),m(n)?s("ds-shell-gradient-picker",{value:n.value,onDsChange:i=>{i.stopPropagation();this.handleGradientSelect(i.detail)}}):n.items.map((i=>{const n=e++;const t=this.focusedIndex===n;return s("button",{key:n,type:"button",class:{"menu-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!i.isInactive,"ds-interaction-fill--selected":!!i.isSelected&&!i.isInactive,"menu-item--selected":!!i.isSelected,"ds-control-inactive":!!i.isInactive,"menu-item--destructive":!!i.isDestructive,"menu-item--focused":t},role:"menuitem","aria-current":i.isSelected?"true":undefined,disabled:i.isInactive,tabIndex:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(i),onFocus:()=>{this.focusedIndex=n}},s("div",{class:"menu-item__content ds-interaction-fill__content"},s("span",{class:i.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},i.label),i.subtext&&s("span",{class:"text-body-small menu-item__subtext"},i.subtext)),i.showToggle&&s("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!i.toggleValue,"ds-interaction-fill__content":true},"aria-hidden":"true"},s("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return f()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const i=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];i.forEach((i=>{switch(i){case"ds-menu":if(!customElements.get(o(i))){customElements.define(o(i),v)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(i))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(i))){a()}break}}))}p();export{v as M,p as d};
2
+ //# sourceMappingURL=p-Dlol7hPg.js.map
package/dist/components/{p-CwARVsZQ.js.map → p-Dlol7hPg.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["computeMenuPosition","input","anchorRect","a","popupWidth","pw","popupHeight","ph","side","align","sideOffsetPx","alignOffsetPx","viewportPadPx","vpPad","viewportWidth","viewportHeight","x","y","top","left","right","width","bottom","height","Math","min","max","isMenuGradientPickerSection","section","variant","menuCss","POSITION_RETRY_BUDGET","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","shouldRender","closing","pos","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","setTimeout","closeAnimationMs","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveCssTimeMs","motionShort2","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","popup","el","querySelector","getBoundingClientRect","offsetWidth","offsetHeight","window","innerWidth","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","handleGradientSelect","preset","dsGradientSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","si","header","undefined","value","onDsChange","detail","isFocused","type","isDestructive","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["export type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuPositionInput {\n anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;\n popupWidth: number;\n popupHeight: number;\n side: MenuSide;\n align: MenuAlign;\n sideOffsetPx: number;\n alignOffsetPx: number;\n viewportPadPx: number;\n viewportWidth: number;\n viewportHeight: number;\n}\n\n/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */\nexport function computeMenuPosition(input: MenuPositionInput): { x: number; y: number } {\n const {\n anchorRect: a,\n popupWidth: pw,\n popupHeight: ph,\n side,\n align,\n sideOffsetPx,\n alignOffsetPx,\n viewportPadPx: vpPad,\n viewportWidth,\n viewportHeight,\n } = input;\n\n let x = 0;\n let y = 0;\n\n switch (side) {\n case 'top':\n y = a.top - ph - sideOffsetPx;\n x =\n align === 'start'\n ? a.left + alignOffsetPx\n : align === 'end'\n ? a.right - pw + alignOffsetPx\n : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n break;\n case 'bottom':\n y = a.bottom + sideOffsetPx;\n x =\n align === 'start'\n ? a.left + alignOffsetPx\n : align === 'end'\n ? a.right - pw + alignOffsetPx\n : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n break;\n case 'left':\n x = a.left - pw - sideOffsetPx;\n y =\n align === 'start'\n ? a.top + alignOffsetPx\n : align === 'end'\n ? a.bottom - ph + alignOffsetPx\n : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n break;\n case 'right':\n x = a.right + sideOffsetPx;\n y =\n align === 'start'\n ? a.top + alignOffsetPx\n : align === 'end'\n ? a.bottom - ph + alignOffsetPx\n : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n break;\n }\n\n return {\n x: Math.min(Math.max(x, vpPad), viewportWidth - pw - vpPad),\n y: Math.min(Math.max(y, vpPad), viewportHeight - ph - vpPad),\n };\n}\n","import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n PANEL_NAV_USER_MENU_PLACEMENT,\n type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n showToggle?: boolean;\n toggleValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n header?: string;\n items: MenuItemData[];\n}\n\nexport interface MenuGradientPickerSection {\n header?: string;\n variant: 'gradient-picker';\n value: ShellGradientPreset;\n}\n\nexport type MenuSection = MenuItemsSection | MenuGradientPickerSection;\n\nexport function isMenuGradientPickerSection(\n section: MenuSection,\n): section is MenuGradientPickerSection {\n return 'variant' in section && section.variant === 'gradient-picker';\n}\n\nexport type { ShellGradientPreset };\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n\n/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: var(--dimension-menu-width-xs);\n max-width: var(--dimension-panel-width-lg);\n overflow: hidden;\n background-color: var(--color-background-primary);\n border-radius: var(--dimension-radius-075);\n /* Split elevation: shadow on shell, inset highlight on ::after (combined token clips with overflow:hidden). */\n box-shadow: var(--effect-shadow-elevated-floating);\n animation: menuFadeIn var(--effect-motion-short-2) forwards;\n backface-visibility: hidden;\n will-change: transform;\n}\n\n.menu-popup::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--effect-highlight-elevated-floating);\n}\n\n.menu-popup--closing {\n animation: menuFadeOut var(--effect-motion-short-2) forwards;\n}\n\n@keyframes menuFadeIn {\n from { opacity: 0; transform: inherit scale(0.97); }\n to { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\n.menu-section {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-050);\n}\n\n.menu-section--divided {\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n.section-header {\n display: flex;\n align-items: center;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n -webkit-user-select: none;\n user-select: none;\n}\n\n.section-label {\n display: inline-flex;\n align-items: center;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n/* ── Items (md control-density + interaction-fill + inset focus) ─────────── */\n\n.menu-item {\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n width: 100%;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n box-sizing: border-box;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n background: transparent;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n text-align: left;\n color: inherit;\n /* Hover/press/selected: `.ds-interaction-fill` (+ `--selected`). */\n}\n\n/* Subtext rows grow past the density height. */\n.menu-item:has(.menu-item__subtext) {\n height: auto;\n min-height: var(--ds-control-height, var(--dimension-size-400));\n padding-block: var(--ds-control-padding-inline, var(--dimension-space-075));\n align-items: flex-start;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.menu-item--destructive .menu-item__label {\n color: var(--color-foreground-bold-negative) !important;\n}\n\n.menu-item__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--dimension-space-025);\n min-width: 0;\n}\n\n.menu-item__label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-secondary);\n}\n\n.menu-item:has(.menu-item__subtext) .menu-item__label,\n.menu-item--selected .menu-item__label {\n color: var(--color-foreground-primary);\n}\n\n.menu-item__subtext {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-secondary);\n line-height: 1.4;\n}\n\n/* ── Toggle suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__toggle {\n position: relative;\n flex-shrink: 0;\n width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n height: var(--dimension-size-250);\n border-radius: var(--dimension-radius-125);\n background-color: var(--color-background-translucent);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on {\n background-color: var(--color-background-medium-brand);\n}\n\n.menu-item__toggle-thumb {\n position: absolute;\n top: var(--dimension-space-025);\n left: var(--dimension-space-025);\n width: var(--dimension-size-200);\n height: var(--dimension-size-200);\n border-radius: 50%;\n background-color: var(--color-foreground-on-bold-background-primary);\n transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { isMenuGradientPickerSection } from './menu-types';\nimport type { ShellGradientPreset } from '../../nav/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\n\n@Component({\n tag: 'ds-menu',\n styleUrl: 'Menu.css',\n scoped: true,\n})\nexport class Menu {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() items: MenuItemData[] = [];\n @Prop() sections: MenuSection[] = [];\n @Prop() side: MenuSide = 'bottom';\n @Prop() align: MenuAlign = 'start';\n /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n @Prop() menuWidth: string | undefined;\n @Prop() minWidth: string | undefined;\n /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n @Prop() anchor: HTMLElement | undefined;\n /** ID of the external trigger element for positioning */\n @Prop() anchorId: string | undefined;\n /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n @Prop() initialFocusVisible: boolean = false;\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n @State() private focusedIndex: number = 0;\n @State() private positionReady: boolean = false;\n @State() private focusRingVisible: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\n /** Emitted when a `gradient-picker` section swatch is chosen. */\n @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n\n private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n private scrollResizeHandler: (() => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private itemEls: HTMLElement[] = [];\n private positionRetryRaf: number | null = null;\n private listenersReady = false;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.cancelPositionRetry();\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.teardownListeners();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.listenersReady = false;\n this.focusRingVisible = this.initialFocusVisible;\n this.listenersReady = true;\n this.setupListeners();\n this.schedulePositionUpdate(() => {\n this.focusInitialItem();\n });\n } else if (this.shouldRender) {\n this.cancelPositionRetry();\n this.closing = true;\n this.teardownListeners();\n this.listenersReady = false;\n this.closeTimer = setTimeout(() => {\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }, this.closeAnimationMs);\n }\n }\n\n @Watch('anchor')\n @Watch('anchorId')\n onAnchorChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n onPositionPropsChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get popupFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeightPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get closeAnimationMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get resolvedAnchor(): HTMLElement | null {\n if (this.anchor) return this.anchor;\n if (this.anchorId) return document.getElementById(this.anchorId);\n return null;\n }\n\n private get activeSections(): MenuSection[] {\n if (this.sections.length > 0) return this.sections;\n if (this.items.length > 0) return [{ items: this.items }];\n return [];\n }\n\n private get flatItems(): MenuItemData[] {\n return this.activeSections.flatMap(section =>\n isMenuGradientPickerSection(section) ? [] : section.items,\n );\n }\n\n private cancelPositionRetry() {\n if (this.positionRetryRaf !== null) {\n cancelAnimationFrame(this.positionRetryRaf);\n this.positionRetryRaf = null;\n }\n }\n\n /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n private schedulePositionUpdate(onReady?: () => void) {\n if (!this.open) return;\n\n this.cancelPositionRetry();\n this.positionReady = false;\n\n let remaining = POSITION_RETRY_BUDGET;\n\n const attempt = () => {\n this.positionRetryRaf = null;\n if (!this.open) return;\n\n if (this.calculatePosition()) {\n this.positionReady = true;\n onReady?.();\n return;\n }\n\n if (remaining > 0) {\n remaining -= 1;\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n };\n\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n\n /** @returns `true` when anchor and popup were found and `pos` was updated. */\n private calculatePosition(): boolean {\n const anchorEl = this.resolvedAnchor;\n if (!anchorEl) return false;\n const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n if (!popup) return false;\n\n this.pos = computeMenuPosition({\n anchorRect: anchorEl.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: this.alignOffsetPx,\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n return true;\n }\n\n /** Focus the selected item when present, otherwise the first enabled item. */\n private focusInitialItem() {\n const flat = this.flatItems;\n const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n this.focusedIndex = selectedIdx >= 0\n ? selectedIdx\n : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);\n\n requestAnimationFrame(() => {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[this.focusedIndex]?.focus();\n });\n }\n\n private setupListeners() {\n this.clickOutsideHandler = (e: MouseEvent) => {\n const t = e.target as Node;\n const popup = this.el.querySelector('.menu-popup');\n const anchorEl = this.resolvedAnchor;\n if (popup?.contains(t) || anchorEl?.contains(t)) return;\n this.close();\n };\n\n this.scrollResizeHandler = () => {\n if (this.shouldRender && !this.closing) this.calculatePosition();\n };\n\n document.addEventListener('mousedown', this.clickOutsideHandler, true);\n window.addEventListener('scroll', this.scrollResizeHandler, true);\n window.addEventListener('resize', this.scrollResizeHandler);\n }\n\n private teardownListeners() {\n if (this.clickOutsideHandler) {\n document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n this.clickOutsideHandler = null;\n }\n if (this.scrollResizeHandler) {\n window.removeEventListener('scroll', this.scrollResizeHandler, true);\n window.removeEventListener('resize', this.scrollResizeHandler);\n this.scrollResizeHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close() {\n this.resolvedAnchor?.focus();\n this.dsClose.emit();\n this.open = false;\n this.onOpenChange(false);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n const flat = this.flatItems;\n const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n if (!enabled.length) return;\n\n const cur = enabled.indexOf(this.focusedIndex);\n const safe = cur < 0 ? 0 : cur;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'Home':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[enabled.length - 1];\n this.focusItem(this.focusedIndex);\n break;\n case 'Escape':\n e.preventDefault();\n this.close();\n break;\n case 'Tab':\n e.preventDefault();\n this.close();\n break;\n }\n }\n\n private focusItem(idx: number) {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[idx]?.focus();\n }\n\n private handleItemClick(item: MenuItemData) {\n if (item.isInactive) return;\n this.dsSelect.emit(item);\n }\n\n private handleGradientSelect(preset: ShellGradientPreset) {\n this.dsGradientSelect.emit(preset);\n }\n\n render() {\n if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n const sections = this.activeSections;\n let flatIdx = 0;\n\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n style={popupStyle}\n role=\"menu\"\n aria-label=\"Menu\"\n aria-orientation=\"vertical\"\n >\n {sections.map((section, si) => (\n <div\n key={si}\n class={{\n 'menu-section': true,\n 'menu-section--divided': si < sections.length - 1,\n 'menu-section--gradient-picker': isMenuGradientPickerSection(section),\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <div class=\"section-header ds-control--md\" aria-hidden=\"true\">\n <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n </div>\n )}\n {isMenuGradientPickerSection(section) ? (\n <ds-shell-gradient-picker\n value={section.value}\n onDsChange={(e: CustomEvent<ShellGradientPreset>) => {\n e.stopPropagation();\n this.handleGradientSelect(e.detail);\n }}\n />\n ) : (\n section.items.map(item => {\n const idx = flatIdx++;\n const isFocused = this.focusedIndex === idx;\n return (\n <button\n key={idx}\n type=\"button\"\n class={{\n 'menu-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n 'menu-item--selected': !!item.isSelected,\n 'ds-control-inactive': !!item.isInactive,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n }}\n role=\"menuitem\"\n aria-current={item.isSelected ? 'true' : undefined}\n disabled={item.isInactive}\n tabIndex={isFocused ? 0 : -1}\n onMouseDown={() => { this.focusRingVisible = false; }}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => { this.focusedIndex = idx; }}\n >\n <div class=\"menu-item__content ds-interaction-fill__content\">\n <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n {item.label}\n </span>\n {item.subtext && (\n <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n )}\n </div>\n {item.showToggle && (\n <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue, 'ds-interaction-fill__content': true }} aria-hidden=\"true\">\n <div class=\"menu-item__toggle-thumb\" />\n </div>\n )}\n </button>\n );\n }))}\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["computeMenuPosition","input","anchorRect","a","popupWidth","pw","popupHeight","ph","side","align","sideOffsetPx","alignOffsetPx","viewportPadPx","vpPad","viewportWidth","viewportHeight","x","y","top","left","right","width","bottom","height","Math","min","max","isMenuGradientPickerSection","section","variant","menuCss","POSITION_RETRY_BUDGET","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","shouldRender","closing","pos","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","setTimeout","closeAnimationMs","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveCssTimeMs","motionShort2","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","popup","el","querySelector","getBoundingClientRect","offsetWidth","offsetHeight","window","innerWidth","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","handleGradientSelect","preset","dsGradientSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","si","header","undefined","value","onDsChange","detail","isFocused","type","isDestructive","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["export type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuPositionInput {\n anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;\n popupWidth: number;\n popupHeight: number;\n side: MenuSide;\n align: MenuAlign;\n sideOffsetPx: number;\n alignOffsetPx: number;\n viewportPadPx: number;\n viewportWidth: number;\n viewportHeight: number;\n}\n\n/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */\nexport function computeMenuPosition(input: MenuPositionInput): { x: number; y: number } {\n const {\n anchorRect: a,\n popupWidth: pw,\n popupHeight: ph,\n side,\n align,\n sideOffsetPx,\n alignOffsetPx,\n viewportPadPx: vpPad,\n viewportWidth,\n viewportHeight,\n } = input;\n\n let x = 0;\n let y = 0;\n\n switch (side) {\n case 'top':\n y = a.top - ph - sideOffsetPx;\n x =\n align === 'start'\n ? a.left + alignOffsetPx\n : align === 'end'\n ? a.right - pw + alignOffsetPx\n : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n break;\n case 'bottom':\n y = a.bottom + sideOffsetPx;\n x =\n align === 'start'\n ? a.left + alignOffsetPx\n : align === 'end'\n ? a.right - pw + alignOffsetPx\n : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n break;\n case 'left':\n x = a.left - pw - sideOffsetPx;\n y =\n align === 'start'\n ? a.top + alignOffsetPx\n : align === 'end'\n ? a.bottom - ph + alignOffsetPx\n : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n break;\n case 'right':\n x = a.right + sideOffsetPx;\n y =\n align === 'start'\n ? a.top + alignOffsetPx\n : align === 'end'\n ? a.bottom - ph + alignOffsetPx\n : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n break;\n }\n\n return {\n x: Math.min(Math.max(x, vpPad), viewportWidth - pw - vpPad),\n y: Math.min(Math.max(y, vpPad), viewportHeight - ph - vpPad),\n };\n}\n","import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n PANEL_NAV_USER_MENU_PLACEMENT,\n type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n label: string;\n value?: string;\n subtext?: string;\n isSelected?: boolean;\n isInactive?: boolean;\n isDestructive?: boolean;\n showToggle?: boolean;\n toggleValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n header?: string;\n items: MenuItemData[];\n}\n\nexport interface MenuGradientPickerSection {\n header?: string;\n variant: 'gradient-picker';\n value: ShellGradientPreset;\n}\n\nexport type MenuSection = MenuItemsSection | MenuGradientPickerSection;\n\nexport function isMenuGradientPickerSection(\n section: MenuSection,\n): section is MenuGradientPickerSection {\n return 'variant' in section && section.variant === 'gradient-picker';\n}\n\nexport type { ShellGradientPreset };\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n\n/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n min-width: var(--dimension-menu-width-xs);\n max-width: var(--dimension-panel-width-lg);\n overflow: hidden;\n background-color: var(--color-background-primary);\n border-radius: var(--dimension-radius-075);\n /* Split elevation: shadow on shell, inset highlight on ::after (combined token clips with overflow:hidden). */\n box-shadow: var(--effect-shadow-elevated-floating);\n animation: menuFadeIn var(--effect-motion-short-2) forwards;\n backface-visibility: hidden;\n will-change: transform;\n}\n\n.menu-popup::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: var(--effect-highlight-elevated-floating);\n}\n\n.menu-popup--closing {\n animation: menuFadeOut var(--effect-motion-short-2) forwards;\n}\n\n@keyframes menuFadeIn {\n from { opacity: 0; transform: inherit scale(0.97); }\n to { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\n.menu-section {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-050);\n}\n\n.menu-section--divided {\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n.section-header {\n display: flex;\n align-items: center;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n -webkit-user-select: none;\n user-select: none;\n}\n\n.section-label {\n display: inline-flex;\n align-items: center;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n/* ── Items (md control-density + interaction-fill + inset focus) ─────────── */\n\n.menu-item {\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n width: 100%;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n box-sizing: border-box;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n background: transparent;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n text-align: left;\n color: inherit;\n /* Hover/press/selected: `.ds-interaction-fill` (+ `--selected`). */\n}\n\n/* Subtext rows grow past the density height. */\n.menu-item:has(.menu-item__subtext) {\n height: auto;\n min-height: var(--ds-control-height, var(--dimension-size-400));\n padding-block: var(--ds-control-padding-inline, var(--dimension-space-075));\n align-items: flex-start;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.menu-item--destructive .menu-item__label {\n color: var(--color-foreground-bold-negative) !important;\n}\n\n.menu-item__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--dimension-space-025);\n min-width: 0;\n}\n\n.menu-item__label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-secondary);\n}\n\n.menu-item:has(.menu-item__subtext) .menu-item__label,\n.menu-item--selected .menu-item__label {\n color: var(--color-foreground-primary);\n}\n\n.menu-item__subtext {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-secondary);\n line-height: 1.4;\n}\n\n/* ── Toggle suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__toggle {\n position: relative;\n flex-shrink: 0;\n width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n height: var(--dimension-size-250);\n border-radius: var(--dimension-radius-125);\n background-color: var(--color-background-translucent);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on {\n background-color: var(--color-background-medium-brand);\n}\n\n.menu-item__toggle-thumb {\n position: absolute;\n top: var(--dimension-space-025);\n left: var(--dimension-space-025);\n width: var(--dimension-size-200);\n height: var(--dimension-size-200);\n border-radius: 50%;\n background-color: var(--color-foreground-on-bold-background-primary);\n transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { isMenuGradientPickerSection } from './menu-types';\nimport type { ShellGradientPreset } from '../../nav/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\n\n@Component({\n tag: 'ds-menu',\n styleUrl: 'Menu.css',\n scoped: true,\n})\nexport class Menu {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() items: MenuItemData[] = [];\n @Prop() sections: MenuSection[] = [];\n @Prop() side: MenuSide = 'bottom';\n @Prop() align: MenuAlign = 'start';\n /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n @Prop() menuWidth: string | undefined;\n @Prop() minWidth: string | undefined;\n /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n @Prop() anchor: HTMLElement | undefined;\n /** ID of the external trigger element for positioning */\n @Prop() anchorId: string | undefined;\n /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n @Prop() initialFocusVisible: boolean = false;\n\n @State() private shouldRender: boolean = false;\n @State() private closing: boolean = false;\n @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n @State() private focusedIndex: number = 0;\n @State() private positionReady: boolean = false;\n @State() private focusRingVisible: boolean = false;\n\n @Event() dsClose!: EventEmitter<void>;\n @Event() dsSelect!: EventEmitter<MenuItemData>;\n /** Emitted when a `gradient-picker` section swatch is chosen. */\n @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n\n private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n private scrollResizeHandler: (() => void) | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private itemEls: HTMLElement[] = [];\n private positionRetryRaf: number | null = null;\n private listenersReady = false;\n\n componentDidLoad() {\n if (this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.cancelPositionRetry();\n this.teardownListeners();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (isOpen) {\n this.teardownListeners();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.listenersReady = false;\n this.focusRingVisible = this.initialFocusVisible;\n this.listenersReady = true;\n this.setupListeners();\n this.schedulePositionUpdate(() => {\n this.focusInitialItem();\n });\n } else if (this.shouldRender) {\n this.cancelPositionRetry();\n this.closing = true;\n this.teardownListeners();\n this.listenersReady = false;\n this.closeTimer = setTimeout(() => {\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }, this.closeAnimationMs);\n }\n }\n\n @Watch('anchor')\n @Watch('anchorId')\n onAnchorChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n onPositionPropsChange() {\n if (this.open) this.schedulePositionUpdate();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get popupFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeightPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get closeAnimationMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get resolvedAnchor(): HTMLElement | null {\n if (this.anchor) return this.anchor;\n if (this.anchorId) return document.getElementById(this.anchorId);\n return null;\n }\n\n private get activeSections(): MenuSection[] {\n if (this.sections.length > 0) return this.sections;\n if (this.items.length > 0) return [{ items: this.items }];\n return [];\n }\n\n private get flatItems(): MenuItemData[] {\n return this.activeSections.flatMap(section =>\n isMenuGradientPickerSection(section) ? [] : section.items,\n );\n }\n\n private cancelPositionRetry() {\n if (this.positionRetryRaf !== null) {\n cancelAnimationFrame(this.positionRetryRaf);\n this.positionRetryRaf = null;\n }\n }\n\n /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n private schedulePositionUpdate(onReady?: () => void) {\n if (!this.open) return;\n\n this.cancelPositionRetry();\n this.positionReady = false;\n\n let remaining = POSITION_RETRY_BUDGET;\n\n const attempt = () => {\n this.positionRetryRaf = null;\n if (!this.open) return;\n\n if (this.calculatePosition()) {\n this.positionReady = true;\n onReady?.();\n return;\n }\n\n if (remaining > 0) {\n remaining -= 1;\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n };\n\n this.positionRetryRaf = requestAnimationFrame(attempt);\n }\n\n /** @returns `true` when anchor and popup were found and `pos` was updated. */\n private calculatePosition(): boolean {\n const anchorEl = this.resolvedAnchor;\n if (!anchorEl) return false;\n const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n if (!popup) return false;\n\n this.pos = computeMenuPosition({\n anchorRect: anchorEl.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n side: this.side,\n align: this.align,\n sideOffsetPx: this.sideOffsetPx,\n alignOffsetPx: this.alignOffsetPx,\n viewportPadPx: this.viewportPadPx,\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n });\n return true;\n }\n\n /** Focus the selected item when present, otherwise the first enabled item. */\n private focusInitialItem() {\n const flat = this.flatItems;\n const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n this.focusedIndex = selectedIdx >= 0\n ? selectedIdx\n : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);\n\n requestAnimationFrame(() => {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[this.focusedIndex]?.focus();\n });\n }\n\n private setupListeners() {\n this.clickOutsideHandler = (e: MouseEvent) => {\n const t = e.target as Node;\n const popup = this.el.querySelector('.menu-popup');\n const anchorEl = this.resolvedAnchor;\n if (popup?.contains(t) || anchorEl?.contains(t)) return;\n this.close();\n };\n\n this.scrollResizeHandler = () => {\n if (this.shouldRender && !this.closing) this.calculatePosition();\n };\n\n document.addEventListener('mousedown', this.clickOutsideHandler, true);\n window.addEventListener('scroll', this.scrollResizeHandler, true);\n window.addEventListener('resize', this.scrollResizeHandler);\n }\n\n private teardownListeners() {\n if (this.clickOutsideHandler) {\n document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n this.clickOutsideHandler = null;\n }\n if (this.scrollResizeHandler) {\n window.removeEventListener('scroll', this.scrollResizeHandler, true);\n window.removeEventListener('resize', this.scrollResizeHandler);\n this.scrollResizeHandler = null;\n }\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private close() {\n this.resolvedAnchor?.focus();\n this.dsClose.emit();\n this.open = false;\n this.onOpenChange(false);\n }\n\n @Listen('keydown')\n handleKeyDown(e: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n const flat = this.flatItems;\n const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n if (!enabled.length) return;\n\n const cur = enabled.indexOf(this.focusedIndex);\n const safe = cur < 0 ? 0 : cur;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe + 1) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'ArrowUp':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n this.focusItem(this.focusedIndex);\n break;\n case 'Home':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[0];\n this.focusItem(this.focusedIndex);\n break;\n case 'End':\n e.preventDefault(); e.stopPropagation();\n this.focusRingVisible = true;\n this.focusedIndex = enabled[enabled.length - 1];\n this.focusItem(this.focusedIndex);\n break;\n case 'Escape':\n e.preventDefault();\n this.close();\n break;\n case 'Tab':\n e.preventDefault();\n this.close();\n break;\n }\n }\n\n private focusItem(idx: number) {\n const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n btns[idx]?.focus();\n }\n\n private handleItemClick(item: MenuItemData) {\n if (item.isInactive) return;\n this.dsSelect.emit(item);\n }\n\n private handleGradientSelect(preset: ShellGradientPreset) {\n this.dsGradientSelect.emit(preset);\n }\n\n render() {\n if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n const sections = this.activeSections;\n let flatIdx = 0;\n\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n style={popupStyle}\n role=\"menu\"\n aria-label=\"Menu\"\n aria-orientation=\"vertical\"\n >\n {sections.map((section, si) => (\n <div\n key={si}\n class={{\n 'menu-section': true,\n 'menu-section--divided': si < sections.length - 1,\n 'menu-section--gradient-picker': isMenuGradientPickerSection(section),\n }}\n role={section.header ? 'group' : undefined}\n aria-label={section.header}\n >\n {section.header && (\n <div class=\"section-header ds-control--md\" aria-hidden=\"true\">\n <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n </div>\n )}\n {isMenuGradientPickerSection(section) ? (\n <ds-shell-gradient-picker\n value={section.value}\n onDsChange={(e: CustomEvent<ShellGradientPreset>) => {\n e.stopPropagation();\n this.handleGradientSelect(e.detail);\n }}\n />\n ) : (\n section.items.map(item => {\n const idx = flatIdx++;\n const isFocused = this.focusedIndex === idx;\n return (\n <button\n key={idx}\n type=\"button\"\n class={{\n 'menu-item': true,\n 'ds-control--md': true,\n 'ds-focus-ring-inset': true,\n 'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n 'ds-interaction-fill': !item.isInactive,\n 'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n 'menu-item--selected': !!item.isSelected,\n 'ds-control-inactive': !!item.isInactive,\n 'menu-item--destructive': !!item.isDestructive,\n 'menu-item--focused': isFocused,\n }}\n role=\"menuitem\"\n aria-current={item.isSelected ? 'true' : undefined}\n disabled={item.isInactive}\n tabIndex={isFocused ? 0 : -1}\n onMouseDown={() => { this.focusRingVisible = false; }}\n onClick={() => this.handleItemClick(item)}\n onFocus={() => { this.focusedIndex = idx; }}\n >\n <div class=\"menu-item__content ds-interaction-fill__content\">\n <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n {item.label}\n </span>\n {item.subtext && (\n <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n )}\n </div>\n {item.showToggle && (\n <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue, 'ds-interaction-fill__content': true }} aria-hidden=\"true\">\n <div class=\"menu-item__toggle-thumb\" />\n </div>\n )}\n </button>\n );\n }))}\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/{p-3FLHei19.js → p-XNHSe8Mg.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{p as t,H as i,h as o,a as s,t as a}from"./index.js";import{d as e}from"./p-CtwNUCnp.js";import{T as n}from"./p-B_g8X0eh.js";import{r as d}from"./p-C1cBr-Ri.js";const r=()=>`.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.sc-ds-tooltip-data-viz-h{position:absolute;z-index:var(--dimension-z-index-tooltip);display:block;box-sizing:border-box;background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards}.tooltip-data-viz__item.sc-ds-tooltip-data-viz{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--dimension-space-025);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-data-viz__label.sc-ds-tooltip-data-viz,.tooltip-data-viz__value.sc-ds-tooltip-data-viz{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));line-height:var(--typography-lineheight-md)}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}`;const c=12;const l=8;const p=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=n.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return d(this.delay,n.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const t=this.showDelayMs;if(t<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),t)}calculatePlacement(){const t=this.el.getBoundingClientRect();if(!t.width||!t.height)return;const i=t.right>window.innerWidth-l?"left":"right";const o=t.bottom>window.innerHeight-l?"top":"bottom";if(i!==this.side)this.side=i;if(o!==this.align)this.align=o}render(){const t=this.side==="right"?`${c}px`:`calc(-100% - ${c}px)`;const i=this.align==="bottom"?`${c}px`:`calc(-100% - ${c}px)`;return o(s,{key:"06233152937562e477fa04f4151683ab24f8c89b",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${i})`}},o("div",{key:"d5c1ba43e1209e50c74ac45aaa34ac25d331e5e1",class:"tooltip-data-viz__item ds-control--md"},o("span",{key:"1561bfb05835ba6faf5501a1700acf56f7b2468b",class:"tooltip-data-viz__label"},o("ds-text",{key:"2ed44657c21814e4921679263cb1ba49d7357e7c",as:"span",variant:"text-body-medium",color:"var(--color-foreground-on-translucent-background-secondary)"},this.label)),o("span",{key:"deeefe07b3942991c9845dea61129a4cfc6e90e9",class:"tooltip-data-viz__value"},o("ds-text",{key:"d95181dbc54d1883f1f0687ca7204a67651a2ac9",as:"span",variant:"text-body-medium-emphasis",color:"var(--color-foreground-on-translucent-background-primary)"},this.value))))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return r()}},[2,"ds-tooltip-data-viz",{value:[8],label:[1],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip-data-viz","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip-data-viz":if(!customElements.get(a(t))){customElements.define(a(t),p)}break;case"ds-text":if(!customElements.get(a(t))){e()}break}}))}h();export{p as T,h as d};
2
- //# sourceMappingURL=p-3FLHei19.js.map
1
+ import{p as t,H as i,h as o,a as s,t as a}from"./index.js";import{d as e}from"./p-CtwNUCnp.js";import{T as n}from"./p-B_g8X0eh.js";import{r as d}from"./p-C1cBr-Ri.js";const r=()=>`.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.sc-ds-tooltip-data-viz-h{position:absolute;z-index:var(--dimension-z-index-tooltip);display:block;box-sizing:border-box;background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards}.tooltip-data-viz__item.sc-ds-tooltip-data-viz{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--dimension-space-025);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-data-viz__label.sc-ds-tooltip-data-viz,.tooltip-data-viz__value.sc-ds-tooltip-data-viz{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));line-height:var(--typography-lineheight-md)}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}`;const l=12;const c=8;const p=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=n.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return d(this.delay,n.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const t=this.showDelayMs;if(t<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),t)}calculatePlacement(){const t=this.el.getBoundingClientRect();if(!t.width||!t.height)return;const i=t.right>window.innerWidth-c?"left":"right";const o=t.bottom>window.innerHeight-c?"top":"bottom";if(i!==this.side)this.side=i;if(o!==this.align)this.align=o}render(){const t=this.side==="right"?`${l}px`:`calc(-100% - ${l}px)`;const i=this.align==="bottom"?`${l}px`:`calc(-100% - ${l}px)`;return o(s,{key:"413424c88116e81fdb8a1ced4e418f0879f5df3f",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${i})`}},o("div",{key:"e5fec7e435be1bdaf470d78275def92daf9e8e46",class:"tooltip-data-viz__item ds-control--md"},o("span",{key:"7f0b0dc4b11f173955718507ef241bd08c29c03d",class:"tooltip-data-viz__label"},o("ds-text",{key:"0b7393cce704ae6b7446419a75b86511f6d5483f",as:"span",variant:"text-body-medium",color:"var(--color-foreground-on-translucent-background-secondary)"},this.label)),o("span",{key:"b2e4ca42a348fda68ab33b6aaea712809adcd979",class:"tooltip-data-viz__value"},o("ds-text",{key:"5b89b7ee01693aa5f13958f5f9468029fb29e75d",as:"span",variant:"text-body-medium-emphasis",color:"var(--color-foreground-on-translucent-background-primary)"},this.value))))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return r()}},[2,"ds-tooltip-data-viz",{value:[8],label:[1],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip-data-viz","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip-data-viz":if(!customElements.get(a(t))){customElements.define(a(t),p)}break;case"ds-text":if(!customElements.get(a(t))){e()}break}}))}h();export{p as T,h as d};
2
+ //# sourceMappingURL=p-XNHSe8Mg.js.map
package/dist/types/components/PanelTools/PanelTools.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare class PanelTools {
5
5
  el: HTMLElement;
6
6
  /** When false, only the icon rail is shown. */
7
7
  open: boolean;
8
- /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */
8
+ /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */
9
9
  activeTool: PanelToolsToolId | '';
10
10
  /**
11
11
  * Rail items rendered in the right column.
package/dist/types/components/PanelTools/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
2
- export { PANEL_TOOLS_LABELS, PANEL_TOOLS_PRIMARY_TOOL_ID, PANEL_TOOLS_TOOL_IDS, } from './panel-tools-types';
2
+ export { PANEL_TOOLS_FOOTER_TOOL_ID, PANEL_TOOLS_LABELS, PANEL_TOOLS_PRIMARY_TOOL_ID, PANEL_TOOLS_TOOL_IDS, } from './panel-tools-types';
3
3
  //# sourceMappingURL=index.d.ts.map
package/dist/types/components/PanelTools/panel-tools-types.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  /** Tool ids for the `ds-panel-tools` rail and drawer views. */
2
- export type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';
2
+ export type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity' | 'help';
3
3
  export declare const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[];
4
4
  /** Rail header slot — mirrors panel-nav M logo row. */
5
5
  export declare const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId;
6
+ /** Rail footer slot — flush to the bottom of the tools column. */
7
+ export declare const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId;
6
8
  export declare const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string>;
7
9
  export interface PanelToolsItem {
8
10
  id: PanelToolsToolId;
package/dist/types/components.d.ts CHANGED
@@ -793,7 +793,7 @@ export namespace Components {
793
793
  */
794
794
  "activateTool": (id: PanelToolsToolId) => Promise<void>;
795
795
  /**
796
- * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
796
+ * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
797
797
  * @default ''
798
798
  */
799
799
  "activeTool": PanelToolsToolId | '';
@@ -2677,7 +2677,7 @@ declare namespace LocalJSX {
2677
2677
  }
2678
2678
  interface DsPanelTools {
2679
2679
  /**
2680
- * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
2680
+ * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
2681
2681
  * @default ''
2682
2682
  */
2683
2683
  "activeTool"?: PanelToolsToolId | '';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/ui",
3
- "version": "2.13.1",
3
+ "version": "2.14.0",
4
4
  "description": "CompoMo — composable web components styled with TokoMo design tokens",
5
5
  "keywords": [
6
6
  "web-components",
package/src/wc/components/PanelTools/PanelTools.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';
2
2
  import type { ChromeTransitionDetail } from '../../nav/chrome-transition';
3
3
  import {
4
+ PANEL_TOOLS_FOOTER_TOOL_ID,
4
5
  PANEL_TOOLS_LABELS,
5
6
  PANEL_TOOLS_PRIMARY_TOOL_ID,
6
7
  type PanelToolsItem,
@@ -19,7 +20,7 @@ export class PanelTools {
19
20
  /** When false, only the icon rail is shown. */
20
21
  @Prop({ mutable: true, reflect: true }) open: boolean = false;
21
22
 
22
- /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */
23
+ /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */
23
24
  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })
24
25
  activeTool: PanelToolsToolId | '' = '';
25
26
 
@@ -62,8 +63,15 @@ export class PanelTools {
62
63
  private get orderedRailItems(): PanelToolsItem[] {
63
64
  const railItems = this.railItems;
64
65
  const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
65
- const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
66
- return headerItem ? [headerItem, ...bodyItems] : bodyItems;
66
+ const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);
67
+ const bodyItems = railItems.filter(
68
+ item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,
69
+ );
70
+ const ordered: PanelToolsItem[] = [];
71
+ if (headerItem) ordered.push(headerItem);
72
+ ordered.push(...bodyItems);
73
+ if (footerItem) ordered.push(footerItem);
74
+ return ordered;
67
75
  }
68
76
 
69
77
  disconnectedCallback() {
@@ -230,7 +238,13 @@ export class PanelTools {
230
238
  const headerLabel = this.headerLabel();
231
239
  const orderedRailItems = this.orderedRailItems;
232
240
  const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
233
- const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
241
+ const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);
242
+ const bodyItems = orderedRailItems.filter(
243
+ item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,
244
+ );
245
+ const footerIndex = footerItem
246
+ ? (headerItem ? 1 : 0) + bodyItems.length
247
+ : -1;
234
248
  const showDrawerChrome = this.isDrawerPresent();
235
249
  const drawerResting = panelToolsDrawerResting(this.open, this.motion);
236
250
 
@@ -259,6 +273,11 @@ export class PanelTools {
259
273
  this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),
260
274
  )}
261
275
  </div>
276
+ {footerItem ? (
277
+ <div class="panel-tools__rail-footer">
278
+ {this.renderRailAction(footerItem, footerIndex)}
279
+ </div>
280
+ ) : null}
262
281
  </nav>
263
282
 
264
283
  <div
@@ -324,6 +343,16 @@ export class PanelTools {
324
343
  >
325
344
  <slot name="agents" />
326
345
  </div>
346
+ <div
347
+ class={{
348
+ 'panel-tools__view': true,
349
+ 'panel-tools__view--active': this.isViewActive('help'),
350
+ 'text-body-medium': true,
351
+ }}
352
+ hidden={!this.isViewActive('help')}
353
+ >
354
+ <slot name="help" />
355
+ </div>
327
356
  </div>
328
357
  </div>
329
358
  </div>
package/src/wc/components/PanelTools/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
2
2
  export {
3
+ PANEL_TOOLS_FOOTER_TOOL_ID,
3
4
  PANEL_TOOLS_LABELS,
4
5
  PANEL_TOOLS_PRIMARY_TOOL_ID,
5
6
  PANEL_TOOLS_TOOL_IDS,
package/src/wc/components/PanelTools/panel-tools-types.ts CHANGED
@@ -1,5 +1,11 @@
1
1
  /** Tool ids for the `ds-panel-tools` rail and drawer views. */
2
- export type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';
2
+ export type PanelToolsToolId =
3
+ | 'search'
4
+ | 'agents'
5
+ | 'messages'
6
+ | 'stacks'
7
+ | 'activity'
8
+ | 'help';
3
9
 
4
10
  export const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [
5
11
  'search',
@@ -7,17 +13,22 @@ export const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [
7
13
  'messages',
8
14
  'stacks',
9
15
  'activity',
16
+ 'help',
10
17
  ];
11
18
 
12
19
  /** Rail header slot — mirrors panel-nav M logo row. */
13
20
  export const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';
14
21
 
22
+ /** Rail footer slot — flush to the bottom of the tools column. */
23
+ export const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';
24
+
15
25
  export const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {
16
26
  search: 'Search',
17
27
  messages: 'Messages',
18
28
  stacks: 'Stacks',
19
29
  activity: 'Activity',
20
30
  agents: 'Agents',
31
+ help: 'Help & Support',
21
32
  };
22
33
 
23
34
  export interface PanelToolsItem {
package/src/wc/components.d.ts CHANGED
@@ -793,7 +793,7 @@ export namespace Components {
793
793
  */
794
794
  "activateTool": (id: PanelToolsToolId) => Promise<void>;
795
795
  /**
796
- * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
796
+ * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
797
797
  * @default ''
798
798
  */
799
799
  "activeTool": PanelToolsToolId | '';
@@ -2677,7 +2677,7 @@ declare namespace LocalJSX {
2677
2677
  }
2678
2678
  interface DsPanelTools {
2679
2679
  /**
2680
- * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
2680
+ * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
2681
2681
  * @default ''
2682
2682
  */
2683
2683
  "activeTool"?: PanelToolsToolId | '';