@ds-mo/ui 2.8.0 → 2.10.0

package/dist/components/ds-input.js

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

package/dist/components/ds-loader.js

@@ -1,2 +1,2 @@
-import{L as o,d as s}from"./p-DgDSRPSP.js";const t=o;const p=s;export{t as DsLoader,p as defineCustomElement};
+import{p as s,H as e,h as t,t as i}from"./index.js";import{T as r}from"./p-jjfqrXnP.js";import{r as n}from"./p-BWUTr_XN.js";const o=()=>`:host{display:inline-flex;align-items:center;flex-shrink:0}.spinner{flex-shrink:0;animation:spin 0.75s linear infinite}.status{display:inline-flex;align-items:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;const a=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.size=r.iconographyMd}get sizePx(){return n(this.size,r.iconographyMd)}render(){const s=`${this.sizePx}px`;const e=t("svg",{style:{width:s,height:s},viewBox:"0 0 16 16",fill:"none",class:"spinner","aria-hidden":"true"},t("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor","stroke-width":"1","stroke-linecap":"round","stroke-dasharray":"23.6 7.9"}));if(!this.label)return e;return t("span",{role:"status","aria-live":"polite",class:"status"},e,t("span",{class:"visually-hidden"},this.label))}static get style(){return o()}},[1,"ds-loader",{size:[8],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const s=["ds-loader"];s.forEach((s=>{switch(s){case"ds-loader":if(!customElements.get(i(s))){customElements.define(i(s),a)}break}}))}l();const c=a;const d=l;export{c as DsLoader,d as defineCustomElement};
 //# sourceMappingURL=ds-loader.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}
+{"version":3,"names":["loaderCss","Loader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","TOKEN_DEFAULTS","iconographyMd","sizePx","resolveCssLengthPx","render","px","svg","h","style","width","height","viewBox","fill","class","cx","cy","r","stroke","label","role"],"sources":["src/wc/components/Loader/Loader.css?tag=ds-loader&encapsulation=shadow","src/wc/components/Loader/Loader.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.spinner {\n  flex-shrink: 0;\n  animation: spin 0.75s linear infinite;\n}\n\n.status {\n  display: inline-flex;\n  align-items: center;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\n\n@Component({\n  tag: 'ds-loader',\n  styleUrl: 'Loader.css',\n  shadow: true,\n})\nexport class Loader {\n  /** Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.). */\n  @Prop() size: number | string = TOKEN_DEFAULTS.iconographyMd;\n  /**\n   * Accessible label for standalone usage. Wraps the spinner in a live region\n   * and renders the label visually-hidden. Omit when the host element already\n   * conveys busy state via aria-busy.\n   */\n  @Prop() label: string | undefined;\n\n  private get sizePx(): number {\n    return resolveCssLengthPx(this.size, TOKEN_DEFAULTS.iconographyMd);\n  }\n\n  render() {\n    const px = `${this.sizePx}px`;\n    const svg = (\n      <svg\n        style={{ width: px, height: px }}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        class=\"spinner\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\" cy=\"8\" r=\"5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"23.6 7.9\"\n        />\n      </svg>\n    );\n\n    if (!this.label) return svg;\n\n    return (\n      <span role=\"status\" aria-live=\"polite\" class=\"status\">\n        {svg}\n        <span class=\"visually-hidden\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"],"mappings":"4HAAA,MAAMA,EAAY,IAAM,kY,MCQXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAOUC,KAAAC,KAAwBC,EAAeC,aAyChD,CAjCC,UAAYC,GACV,OAAOC,EAAmBL,KAAKC,KAAMC,EAAeC,c,CAGtD,MAAAG,GACE,MAAMC,EAAK,GAAGP,KAAKI,WACnB,MAAMI,EACJC,EAAA,OACEC,MAAO,CAAEC,MAAOJ,EAAIK,OAAQL,GAC5BM,QAAQ,YACRC,KAAK,OACLC,MAAM,UAAS,cACH,QAEZN,EAAA,UACEO,GAAG,IAAIC,GAAG,IAAIC,EAAE,IAChBC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,mBACL,cAKvB,IAAKnB,KAAKoB,MAAO,OAAOZ,EAExB,OACEC,EAAA,QAAMY,KAAK,SAAQ,YAAW,SAASN,MAAM,UAC1CP,EACDC,EAAA,QAAMM,MAAM,mBAAmBf,KAAKoB,O","ignoreList":[]}

package/dist/components/ds-menu.js

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-DDEAcGac.js";const c=o;const t=s;export{c as DsMenu,t as defineCustomElement};
+import{M as o,d as s}from"./p-CKCBqwIw.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
 //# sourceMappingURL=ds-menu.js.map

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as e,H as a,c as s,h as t,a as o,t as i}from"./index.js";import{r as d}from"./p-C1cBr-Ri.js";import{T as n}from"./p-BPMJx63I.js";const l=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const r={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const c=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let m=0;const f=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++m;this.titleId=`ds-modal-title-${m}`;this.subtitleId=`ds-modal-subtitle-${m}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const a=this.getFocusables(e);(a[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(c)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const a=this.el.querySelector(".modal-dialog");if(!a)return;const s=this.getFocusables(a);if(!s.length){e.preventDefault();a.focus();return}const t=s[0];const o=s[s.length-1];const i=document.activeElement;if(e.shiftKey){if(i===t||i===a||!a.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!a.contains(i)){e.preventDefault();t.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return r[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return d(n.motionShort3,n.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return t(o,{key:"d592a67f30fac4bdb376e7b804aae56ef4b8bb1d",style:{display:"contents"}},t("div",{key:"e9acbb8fe20f58a5ca55317e2a735b8c1736279d",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},t("div",{key:"1000306e14d62bdcba242c409d492f3180f57952",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},t("div",{key:"66271f1fecb099e64e2255ef1f1ead4771ec7ec8",class:"modal-header"},t("h2",{key:"b1d6aa652480aa9fdac2ba32b47310a641d86228",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&t("div",{key:"dd3de52c62517602d5f83a7b167ce7fdb9baf860",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),t("div",{key:"30149f7ad3bf2a6f1a27c55e31eb63caad2a6884",class:"modal-body"},t("slot",{key:"30195fa0eed79bc8963663c78c5bda93a03f348c"})),t("div",{key:"e55c5675ddd246034fb24a6778129aaf37bb1e5c",class:"modal-footer"},t("slot",{key:"d4fec541095407daf1cad1144f69f15f82003562",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),f)}break}}))}h();const u=f;const b=h;export{u as DsModal,b as defineCustomElement};
+import{p as e,H as s,c as t,h as a,a as o,t as i}from"./index.js";import{r as d}from"./p-C1cBr-Ri.js";import{T as n}from"./p-jjfqrXnP.js";const l=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const r={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const c=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let m=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=t(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++m;this.titleId=`ds-modal-title-${m}`;this.subtitleId=`ds-modal-subtitle-${m}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const s=this.getFocusables(e);(s[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(c)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const s=this.el.querySelector(".modal-dialog");if(!s)return;const t=this.getFocusables(s);if(!t.length){e.preventDefault();s.focus();return}const a=t[0];const o=t[t.length-1];const i=document.activeElement;if(e.shiftKey){if(i===a||i===s||!s.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!s.contains(i)){e.preventDefault();a.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return r[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return d(n.motionShort3,n.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return a(o,{key:"3b0fc312abfe314d8122c0fdca8f190b05c211ac",style:{display:"contents"}},a("div",{key:"72bae588639650bf63ab5a2d8ac123c5310db659",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},a("div",{key:"9626337658a4a50e72b3719e3a1007305c2daea4",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},a("div",{key:"62826ffb5363050101a4c092c245dff4f4d97602",class:"modal-header"},a("h2",{key:"6cd4d9433d195febfdcf6bf4fbbdf2837b571fbc",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&a("div",{key:"c577c290e1ebb983b797e2e2323e0a20e0d5fb21",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),a("div",{key:"a580808d0b28bee07bf73c6296f68fab5061fbdb",class:"modal-body"},a("slot",{key:"bc53fcf13c934977d176571e8fde44b3b1bfa1d2"})),a("div",{key:"9264a7e887d5972887d40242052ffd83518dbf1e",class:"modal-footer"},a("slot",{key:"487a19ee939c1a1d9d477fb65498db90d48b7609",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),f)}break}}))}h();const b=f;const u=h;export{b as DsModal,u as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as a,c as n,h as s,a as t,t as i}from"./index.js";import{d as o}from"./p-CiEc8Nwx.js";import{d as r}from"./p-BTndnbR_.js";import{d as l}from"./p-DqBCQRRd.js";import{d}from"./p-C9za7IDu.js";import{a as c}from"./p-BPMJx63I.js";const v={side:"right",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:c.space050};const p="data-nav-style";function h(e){if(e==="dashboard"||e==="settings")return e;return undefined}function f(e,a,n){const s=h(a);if(s)return s;const t=typeof document!=="undefined"?document.documentElement.getAttribute(p):null;const i=h(t);if(i)return i;return e}function u(e,a){return e!==a}function m(e,a){return e===a||e.startsWith(`${a}/`)}function g(e,a){if(!e)return"";let n="";let s=0;for(const t of a){if(!t.href)continue;if(m(e,t.href)&&t.href.length>s){n=t.id;s=t.href.length}}return n}function b(e){return e.reduce(((e,a)=>e+a.items.length),0)}function _(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function y(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function x(e,a){return b(e)===0&&b(_(a))>0}const k="ds-panel-nav-user-menu-anchor";const w=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const z=()=>`.sc-ds-panel-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-panel-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-panel-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-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-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-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_nav-focus)}ds-app-shell[gradient].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[gradient] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));top:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-icon-fg:var(--_nav-fg-secondary);--ds-button-unfilled-icon-fg-active:var(--_nav-fg-primary);--ds-button-unfilled-icon-hover-bg:var(--_nav-hover);--ds-button-unfilled-icon-pressed-bg:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const C=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return y(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=_(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=f(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const a=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const n=e?.getBoundingClientRect().width??0;if(Math.abs(n-a)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=g(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(u(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(x(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const a=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=a){const a=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return a[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-icon")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const a=this.getAllItems().length;const n=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=a){this.handleItemClick(n[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${k}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:v})}}handleRovingKeyDown(e,a){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(a);return}const n=this.getFooterRovingIndex();const s=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(a===s)return;if(a===n)t=s;else t=a+1;break;case"ArrowUp":if(a===0)return;if(a===s)t=n;else if(a===n)t=n-1;else t=a-1;break;case"ArrowRight":if(a===n)t=s;else return;break;case"ArrowLeft":if(a===s)t=n;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=s;break;default:return}if(t===undefined||t===a)return;e.preventDefault();this.focusRovingAt(t)}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a,menuPlacement:v})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const s=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",s);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=s;window.addEventListener("mousemove",n);window.addEventListener("mouseup",s)}renderNavItem(e,a,n){const t=e.id===this.effectiveActiveId;const i=a+1;const o=[s("span",{class:"panel-nav__item-icon"},s("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),s("span",{class:"panel-nav__item-label"},s("span",{class:"panel-nav__item-label-text"},s("ds-text",{as:"span",variant:t?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&s("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const r={class:{"panel-nav__item":true,"panel-nav__item--active":t,"ds-focus-ring-inset":true},"aria-current":t?"page":undefined,title:n?e.label:undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const l=this.routerMode==="anchor"&&e.href;return l?s("a",{...r,href:e.href},o):s("button",{...r,type:"button"},o)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":i,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return s(t,{key:"8b23d553e483cb1ba292a0c772e6fedb8989294b",style:{display:"block",position:"relative"}},s("nav",{key:"57079ba047c7268e7f5b3042416dbc58fff37486",class:l,"aria-label":a?"Dashboard navigation":"Settings navigation"},s("div",{key:"294462c9de6ef149d8e412769f414ab989f0bb7e",class:"panel-nav__header"},s("button",{key:"e5f7863e0a496a72736f152cb1b72f0b457f0568",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":i?"Expand navigation":"Collapse navigation","aria-expanded":i?"false":"true"},s("span",{key:"f7f364b7c180df165810cdaf860503b7fbfe910a",class:"panel-nav__header-logo","aria-hidden":"true"},s("svg",{key:"e6da4d17b193659f0e24af9755df2dc142ba9cc2",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},s("path",{key:"68a134b7d29f6742ef502c3f1746e9bd4d3a8645",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),s("span",{key:"2d3b9775118bc0b3d8c5cb1797d3c49b4f80fe1b",class:"panel-nav__header-toggle","aria-hidden":"true"},s("ds-icon",{key:"b4cc435527a73527a286a2d8c1ff7dbf43e73ff8",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),s("div",{key:"16905cbf63c054c126ee69dfbc7b16011c3a4dc5",class:{"panel-nav__body":true,"scroll-edge-fade":true,"scroll-edge-fade--bottom":true,"scroll-edge-fade--at-end":this.atBottom},onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((a=>s("div",{class:"panel-nav__group"},a.label&&s("span",{class:"panel-nav__group-label"},s("span",{class:"panel-nav__item-label-text"},s("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label))),a.items.map((a=>this.renderNavItem(a,e++,i))))))})()),s("div",{key:"6e5e87c5ffe0f61acd7ced05bed714b264f1c567",class:"panel-nav__footer"},s("ds-button-unfilled-icon",{key:"fc822269fd0ef9992ec21339641d97460d02ca09",class:"panel-nav__footer-btn",icon:a?"Gear":"Dashboard",activeFill:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}),s("button",{key:"2a83af162818584a7d5e07eb1fddce77dc2cc9e5",type:"button",id:k,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":i?`User: ${o}`:`User menu for ${o}`,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},s("span",{key:"aeebfcefa0089ddd69cf186c04eb0ae774d66a5f",class:"panel-nav__item-label panel-nav__footer-user-label"},s("span",{key:"e98f86985c9a609e8626e9f17681e762c7247ce9",class:"panel-nav__item-label-text"},s("ds-text",{key:"53a85049918335a1ae04119b602aaa0828b4a10a",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},o))),s("span",{key:"240062b9367bac0e1991cc53d4e1038c48b6f6e9",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},s("span",{key:"2fc021525bf2a5a510c1600b61618f061102cdb5",class:"panel-nav__footer-icon-expanded"},s("ds-icon",{key:"db4d4f636c6e559090ebc8cabc233dbb36ac07b4",name:"ChevronUpDown",size:"md",color:"inherit"})),s("span",{key:"452f3fa48754c3f86868ee30c141856f7067efbe",class:"panel-nav__footer-icon-collapsed"},s("ds-icon",{key:"317460bcab1f3b21b05049305a749adccbfb5901",name:"Circle",size:"md",color:"inherit"}),s("span",{key:"e89d8ea7f22f32438ad31b52910549fd5170c0c9",class:"panel-nav__user-initial"},s("ds-text",{key:"8ce7eb4696d09e713f4128b565127b8728f53899",as:"span",variant:"text-caption-emphasis",color:"inherit"},r))))))),!this.viewportNarrow&&s("div",{key:"62b7c73cfd08294358bf1decc3e14222296383f1",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return w()+z()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;function A(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled-icon","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),C)}break;case"ds-badge":if(!customElements.get(i(e))){o()}break;case"ds-button-unfilled-icon":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){l()}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}A();const I=C;const D=A;export{I as DsPanelNav,D as defineCustomElement};
+import{p as e,H as a,c as n,h as s,a as t,t as i}from"./index.js";import{d as o}from"./p-BOpHKDOG.js";import{d as r}from"./p-Dul5eGGE.js";import{d as l}from"./p-Cynjsv-P.js";import{d}from"./p-CJubWt1F.js";import{a as c}from"./p-jjfqrXnP.js";const v={side:"right",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:c.space050};const p="data-nav-style";function h(e){if(e==="dashboard"||e==="settings")return e;return undefined}function f(e,a,n){const s=h(a);if(s)return s;const t=typeof document!=="undefined"?document.documentElement.getAttribute(p):null;const i=h(t);if(i)return i;return e}function u(e,a){return e!==a}function m(e,a){return e===a||e.startsWith(`${a}/`)}function g(e,a){if(!e)return"";let n="";let s=0;for(const t of a){if(!t.href)continue;if(m(e,t.href)&&t.href.length>s){n=t.id;s=t.href.length}}return n}function b(e){return e.reduce(((e,a)=>e+a.items.length),0)}function _(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function y(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function x(e,a){return b(e)===0&&b(_(a))>0}const k="ds-panel-nav-user-menu-anchor";const w=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const z=()=>`.sc-ds-panel-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-panel-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-panel-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-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-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-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_nav-focus)}ds-app-shell[gradient].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[gradient] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));top:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-icon-fg:var(--_nav-fg-secondary);--ds-button-unfilled-icon-fg-active:var(--_nav-fg-primary);--ds-button-unfilled-icon-hover-bg:var(--_nav-hover);--ds-button-unfilled-icon-pressed-bg:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const C=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return y(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=_(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=f(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const a=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const n=e?.getBoundingClientRect().width??0;if(Math.abs(n-a)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=g(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(u(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(x(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const a=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=a){const a=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return a[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-icon")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const a=this.getAllItems().length;const n=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=a){this.handleItemClick(n[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${k}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:v})}}handleRovingKeyDown(e,a){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(a);return}const n=this.getFooterRovingIndex();const s=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(a===s)return;if(a===n)t=s;else t=a+1;break;case"ArrowUp":if(a===0)return;if(a===s)t=n;else if(a===n)t=n-1;else t=a-1;break;case"ArrowRight":if(a===n)t=s;else return;break;case"ArrowLeft":if(a===s)t=n;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=s;break;default:return}if(t===undefined||t===a)return;e.preventDefault();this.focusRovingAt(t)}checkScroll(){const e=this.el.querySelector(".panel-nav__body");if(!e)return;const a=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=a<2}handleBodyScroll(e){const a=e.target;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a,menuPlacement:v})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const s=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",s);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=s;window.addEventListener("mousemove",n);window.addEventListener("mouseup",s)}renderNavItem(e,a,n){const t=e.id===this.effectiveActiveId;const i=a+1;const o=[s("span",{class:"panel-nav__item-icon"},s("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),s("span",{class:"panel-nav__item-label"},s("span",{class:"panel-nav__item-label-text"},s("ds-text",{as:"span",variant:t?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&s("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const r={class:{"panel-nav__item":true,"panel-nav__item--active":t,"ds-focus-ring-inset":true},"aria-current":t?"page":undefined,title:n?e.label:undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const l=this.routerMode==="anchor"&&e.href;return l?s("a",{...r,href:e.href},o):s("button",{...r,type:"button"},o)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":i,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return s(t,{key:"fe14c2c9dee2e3f9b40692dea68b3b9fdb61d91d",style:{display:"block",position:"relative"}},s("nav",{key:"0131fe6dd0430d4214b2f14e38d1b3b4be5b9512",class:l,"aria-label":a?"Dashboard navigation":"Settings navigation"},s("div",{key:"84605cb8eeda4ed8e7f4a21621cb0c501e55da93",class:"panel-nav__header"},s("button",{key:"cf664df19691d4916d50773acc1d9c20d80944b5",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":i?"Expand navigation":"Collapse navigation","aria-expanded":i?"false":"true"},s("span",{key:"12405970fe277dbe0501e6e0a91a9a0fa0df5e7e",class:"panel-nav__header-logo","aria-hidden":"true"},s("svg",{key:"363ec4cff8b094aa2d49acf2f077ea88b9f0f42a",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},s("path",{key:"90d081831a358fc6ab6d1484dead95e25934b688",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),s("span",{key:"79d56aeae06fe5a2fb9da35c2ab103f88220aba6",class:"panel-nav__header-toggle","aria-hidden":"true"},s("ds-icon",{key:"88e2a50346adbe2240697ebcb14502507d8d1000",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),s("div",{key:"e606d0953a77598c1a3e68d51f29b52d59a0cd95",class:{"panel-nav__body":true,"scroll-edge-fade":true,"scroll-edge-fade--bottom":true,"scroll-edge-fade--at-end":this.atBottom},onScroll:e=>this.handleBodyScroll(e)},(()=>{let e=0;return this.parsedGroups.map((a=>s("div",{class:"panel-nav__group"},a.label&&s("span",{class:"panel-nav__group-label"},s("span",{class:"panel-nav__item-label-text"},s("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label))),a.items.map((a=>this.renderNavItem(a,e++,i))))))})()),s("div",{key:"bd6b7885457bb28e1796f2311ebcb99c147f34dc",class:"panel-nav__footer"},s("ds-button-unfilled-icon",{key:"bcb9a6ca7c803103ff6b5fe7a6f3f2903382ee69",class:"panel-nav__footer-btn",icon:a?"Gear":"Dashboard",activeFill:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}),s("button",{key:"8cd6b9e53e8691342da21b6e35a8f688fcec8643",type:"button",id:k,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":i?`User: ${o}`:`User menu for ${o}`,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},s("span",{key:"6da28c06bf886a1e10a48d0ca3e46e39d8ba9a68",class:"panel-nav__item-label panel-nav__footer-user-label"},s("span",{key:"3d4954d8ab30821874a31ad0e3773d7a7aae3469",class:"panel-nav__item-label-text"},s("ds-text",{key:"6757a3a9d10b2f08fdcf540afac0937e55e7556e",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},o))),s("span",{key:"c4a010b0dab60e3868c83809e2f33cd5dcf4f8db",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},s("span",{key:"16662e8449003e0541a552a9a50fc329cf20dc27",class:"panel-nav__footer-icon-expanded"},s("ds-icon",{key:"110a80de34a6bc5bdc4fc3903e4d2f57627e8c8c",name:"ChevronUpDown",size:"md",color:"inherit"})),s("span",{key:"dceedc4599e37518f796030dd1266d6c7c4e1e91",class:"panel-nav__footer-icon-collapsed"},s("ds-icon",{key:"6d78f340eb8d6fbe0e215a0944532bccf84141e8",name:"Circle",size:"md",color:"inherit"}),s("span",{key:"066a9343cac7cbf7278ecb53a0236172f5ff8500",class:"panel-nav__user-initial"},s("ds-text",{key:"30e327e626798ceb18cd767160108a6425397fe7",as:"span",variant:"text-caption-emphasis",color:"inherit"},r))))))),!this.viewportNarrow&&s("div",{key:"8c74e71061e1354a03ff8d1e9b61682bdace0519",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return w()+z()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);C.HOST_PROP_SYNC_BUDGET=8;function A(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled-icon","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),C)}break;case"ds-badge":if(!customElements.get(i(e))){o()}break;case"ds-button-unfilled-icon":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){l()}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}A();const I=C;const D=A;export{I as DsPanelNav,D as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,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-CiEc8Nwx.js";import{d as r}from"./p-BTndnbR_.js";import{d}from"./p-DqBCQRRd.js";const c="search";const h={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function p(e,t){if(t){return n(t,[])}return e??[]}function f(e,t){return!e&&t==="idle"}function u(e,t,s){if(e&&t===s){return{open:false,activeTool:s,selected:false}}return{open:true,activeTool:s,selected:true}}const m=()=>`.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 b=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=s(this,"dsToolChange");this.dsChromeTransitionStart=s(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=s(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 t=u(this.open,this.activeTool,e);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:e,selected:t.selected})};this.handleRailKeyDown=(e,t)=>{const s=this.orderedRailItems;if(!s.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(s[t].id);return}if(e.key==="ArrowDown"){if(t>=s.length-1)return;e.preventDefault();this.focusRailAt(t+1);return}if(e.key==="ArrowUp"){if(t<=0)return;e.preventDefault();this.focusRailAt(t-1)}}}get railItems(){return p(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const t=e.find((e=>e.id===c));const s=e.filter((e=>e.id!==c));return t?[t,...s]:s}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,t){if(this.readyForMotion&&t!==undefined&&t!==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 h[this.activeTool]??""}async activateTool(e){const t=this.railItems.find((t=>t.id===e));if(!t||t.inactive)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 t=this.orderedRailItems;if(!t.length)return;const s=Math.max(0,Math.min(e,t.length-1));if(s===this.rovingIndex)return;this.rovingIndex=s;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[s]?.focus({preventScroll:true})}renderRailAction(e,t){return o("ds-button-unfilled-icon",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,dot:e.dot??false,inactive:e.inactive,focusTabIndex:t===this.rovingIndex?0:-1,"aria-label":e.ariaLabel??h[e.id],pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=t},onKeyDown:e=>this.handleRailKeyDown(e,t),onDsClick:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const t=this.orderedRailItems;const s=t.find((e=>e.id===c));const a=t.filter((e=>e.id!==c));const n=this.isDrawerPresent();const l=f(this.open,this.motion);return o(i,{key:"3a03a7796177bc4c35679b0c1f0d59c168c6632f",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:"60a85f7995518fd8a2cea1da55c4ef19e71b7af1",class:"panel-tools__layout"},o("nav",{key:"45208e1bbc6d18ff012c2d043738844ecad423bd",class:"panel-tools__rail","aria-label":"Tool shortcuts"},s?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(s,0)):null,o("div",{key:"8ae84262aa3eca333ff44c7cced8dd3740e15c4b",class:"panel-tools__rail-body"},a.map(((e,t)=>this.renderRailAction(e,s?t+1:t))))),o("div",{key:"82d2d99f5a7a65f4773544049f5139bb6163b56d",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"9e805c5f27cdbfe0b56a57739a9a8f141c30fc96",class:"panel-tools__drawer-surface"},o("header",{key:"6ccfe2c7a8f79b06c12f5bcad3ccfc2a50e554aa",class:"panel-tools__header"},o("span",{key:"29e56d604f046126427087f49cbce7d8873c657c",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"c697a333561dba12fc112005773128428b93376d",class:"panel-tools__body"},o("div",{key:"cdadef06be4406f540ad2feedc4450b90924b0cc",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"cea999e30107bde89a49c45865eac64dcbe38bc6",name:"search"})),o("div",{key:"717e8dae8f494917ce6b8618d6229b7d298b3163",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"e20cb76f14c7c06be856a8456a8fbcdf5e3829d4",name:"messages"})),o("div",{key:"8f4a525710061e435d165ae781d62a18e3e145b7",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"1a98e5c768962759f1f95426deca712c24a119c5",name:"stacks"})),o("div",{key:"c1b72cf8129f72540c2889524e28171d92c54722",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"dffe6de0a5a0f8eb87a0a39752af8e08b322b389",name:"activity"})),o("div",{key:"50487f7253b7960b24037aeddf0e527b82487a73",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"73f3eb9a2509bd1041fced6e9e3bf060f6e84285",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 m()}},[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 g(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled-icon","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(a(e))){customElements.define(a(e),b)}break;case"ds-badge":if(!customElements.get(a(e))){l()}break;case"ds-button-unfilled-icon":if(!customElements.get(a(e))){r()}break;case"ds-icon":if(!customElements.get(a(e))){d()}break}}))}g();const _=b;const v=g;export{_ as DsPanelTools,v as defineCustomElement};
+import{p as e,H as t,c as s,h as o,a,t as i}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-BOpHKDOG.js";import{d as r}from"./p-Dul5eGGE.js";import{d}from"./p-Cynjsv-P.js";const c="search";const h={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function p(e,t){if(t){return n(t,[])}return e??[]}function f(e,t){return!e&&t==="idle"}function u(e,t,s){if(e&&t===s){return{open:false,activeTool:s,selected:false}}return{open:true,activeTool:s,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 m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=s(this,"dsToolChange");this.dsChromeTransitionStart=s(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=s(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 t=u(this.open,this.activeTool,e);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:e,selected:t.selected})};this.handleRailKeyDown=(e,t)=>{const s=this.orderedRailItems;if(!s.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(s[t].id);return}if(e.key==="ArrowDown"){if(t>=s.length-1)return;e.preventDefault();this.focusRailAt(t+1);return}if(e.key==="ArrowUp"){if(t<=0)return;e.preventDefault();this.focusRailAt(t-1)}}}get railItems(){return p(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const t=e.find((e=>e.id===c));const s=e.filter((e=>e.id!==c));return t?[t,...s]:s}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,t){if(this.readyForMotion&&t!==undefined&&t!==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 h[this.activeTool]??""}async activateTool(e){const t=this.railItems.find((t=>t.id===e));if(!t||t.inactive)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 t=this.orderedRailItems;if(!t.length)return;const s=Math.max(0,Math.min(e,t.length-1));if(s===this.rovingIndex)return;this.rovingIndex=s;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[s]?.focus({preventScroll:true})}renderRailAction(e,t){return o("ds-button-unfilled-icon",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,dot:e.dot??false,inactive:e.inactive,focusTabIndex:t===this.rovingIndex?0:-1,"aria-label":e.ariaLabel??h[e.id],pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=t},onKeyDown:e=>this.handleRailKeyDown(e,t),onDsClick:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const t=this.orderedRailItems;const s=t.find((e=>e.id===c));const i=t.filter((e=>e.id!==c));const n=this.isDrawerPresent();const l=f(this.open,this.motion);return o(a,{key:"74edf6db5de6e9f53a606a2e75b775925f45f1dc",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:"d8f61f1f841334dbc397a874a5d4a413687bfca9",class:"panel-tools__layout"},o("nav",{key:"a6607f5b5f13e2d13b9dffcbe9e1851ad29acc27",class:"panel-tools__rail","aria-label":"Tool shortcuts"},s?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(s,0)):null,o("div",{key:"af87e1bd8c116cccb0bdef0a1c907dedd8f723a3",class:"panel-tools__rail-body"},i.map(((e,t)=>this.renderRailAction(e,s?t+1:t))))),o("div",{key:"db5078a34bff92fe0919b7bf5c462ffeddd62ab6",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"4444327c0db436011c14e27d6bad1ba8f3e128ff",class:"panel-tools__drawer-surface"},o("header",{key:"1e326a0679e2bf847d6d3a967acc8caf00a06c08",class:"panel-tools__header"},o("span",{key:"e1a1585520580476796f5450e078d327ee95e11e",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"5efe662fa073732d08777974faaa91657b7f3a17",class:"panel-tools__body"},o("div",{key:"66948a9ad54a438266e52905e8541593c905d475",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"a80ecb3bf548a8325fd30cf5ff4eeed8521df151",name:"search"})),o("div",{key:"58dbb9b40a63e57694bcc7f509f8c147a6708382",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"226e56a9ff73fdd22844347cdf7e544a6db3f091",name:"messages"})),o("div",{key:"f2cb5d3d76325bf9e4a796395ba089f35a236038",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"630c1b568e0668f4e331e2adb95c44eaa8fd4bac",name:"stacks"})),o("div",{key:"2fbea523bc5960635dbffaaf6330e906043bbec4",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"ff3fef24b7453e831508fd02ff8dcd8ed771d3a5",name:"activity"})),o("div",{key:"00b6482448058e8c4946691b778829c98fd7608d",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"d31cb828170857ca62e4031a760244cf6b1f7d38",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 g(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled-icon","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),m)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled-icon":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break}}))}g();const v=m;const _=g;export{v as DsPanelTools,_ as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

package/dist/components/ds-panel-tools.js.map

@@ -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","inactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","h","class","icon","isActive","activeFill","dot","focusTabIndex","ariaLabel","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  inactive?: 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.inactive !== item.inactive ||\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.inactive) 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    return (\n      <ds-button-unfilled-icon\n        key={item.id}\n        class=\"panel-tools__rail-action\"\n        icon={item.icon}\n        isActive={this.isRailSelected(item.id)}\n        activeFill={false}\n        dot={item.dot ?? false}\n        inactive={item.inactive}\n        focusTabIndex={index === this.rovingIndex ? 0 : -1}\n        aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}\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    );\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":[]}
+{"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","inactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","h","class","icon","isActive","activeFill","dot","focusTabIndex","ariaLabel","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  inactive?: 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.inactive !== item.inactive ||\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.inactive) 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    return (\n      <ds-button-unfilled-icon\n        key={item.id}\n        class=\"panel-tools__rail-action\"\n        icon={item.icon}\n        isActive={this.isRailSelected(item.id)}\n        activeFill={false}\n        dot={item.dot ?? false}\n        inactive={item.inactive}\n        focusTabIndex={index === this.rovingIndex ? 0 : -1}\n        aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}\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    );\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":[]}

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

@@ -1,2 +1,2 @@
-import{p as r,H as i,c as e,h as o,a as s,t}from"./index.js";const a=()=>`.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-item--inactive.sc-ds-radio-group{cursor:not-allowed;opacity:0.5;pointer-events:none}.circle.sc-ds-radio-group{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:10px;height:10px;border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const n=r(class r extends i{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.options=[];this.value="";this.direction="vertical";this.inactive=false}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(r){const i=this.activeItems;if(!i.length)return;const e=i.find((r=>r===document.activeElement));if(!e)return;const o=i.indexOf(e);let s=-1;switch(r.key){case"ArrowDown":case"ArrowRight":r.preventDefault();s=(o+1)%i.length;break;case"ArrowUp":case"ArrowLeft":r.preventDefault();s=(o-1+i.length)%i.length;break;case"Home":r.preventDefault();s=0;break;case"End":r.preventDefault();s=i.length-1;break}if(s>=0){i[s].focus();const r=i[s].dataset["value"];if(r&&r!==this.value){this.value=r;this.dsChange.emit(r)}}}selectItem(r){if(this.inactive)return;if(r!==this.value){this.value=r;this.dsChange.emit(r)}}render(){const r=this.options.findIndex((r=>r.value===this.value));const i=this.options.findIndex((r=>!this.inactive&&!r.inactive));const e=r>=0&&!this.inactive&&!this.options[r]?.inactive?r:i;return o(s,{key:"c23763252611464f868e0d3ad8159cd371be06a5",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((r,i)=>{const s=this.inactive||!!r.inactive;const t=r.value===this.value;const a=s?-1:i===e?0:-1;return o("div",{key:r.value,role:"radio","aria-checked":String(t),"aria-disabled":s||undefined,tabIndex:a,"data-radio-item":true,"data-value":r.value,"data-inactive":s||undefined,class:{"radio-item":true,"radio-item--inactive":s},onClick:()=>!s&&this.selectItem(r.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!s){i.preventDefault();this.selectItem(r.value)}}},o("span",{class:{circle:true,"circle--checked":t}},t&&o("span",{class:"dot"})),o("span",{class:"text-body-medium radio-label"},r.label))})))}get el(){return this}static get style(){return a()}},[2,"ds-radio-group",{options:[16],value:[1025],direction:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]]]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-radio-group"];r.forEach((r=>{switch(r){case"ds-radio-group":if(!customElements.get(t(r))){customElements.define(t(r),n)}break}}))}d();const c=n;const l=d;export{c as DsRadioGroup,l as defineCustomElement};
+import{p as r,H as i,c as e,h as o,a,t as s}from"./index.js";const t=()=>`.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-item--inactive.sc-ds-radio-group{cursor:not-allowed;opacity:0.5;pointer-events:none}.circle.sc-ds-radio-group{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:10px;height:10px;border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const n=r(class r extends i{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.options=[];this.value="";this.direction="vertical";this.inactive=false}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(r){const i=this.activeItems;if(!i.length)return;const e=i.find((r=>r===document.activeElement));if(!e)return;const o=i.indexOf(e);let a=-1;switch(r.key){case"ArrowDown":case"ArrowRight":r.preventDefault();a=(o+1)%i.length;break;case"ArrowUp":case"ArrowLeft":r.preventDefault();a=(o-1+i.length)%i.length;break;case"Home":r.preventDefault();a=0;break;case"End":r.preventDefault();a=i.length-1;break}if(a>=0){i[a].focus();const r=i[a].dataset["value"];if(r&&r!==this.value){this.value=r;this.dsChange.emit(r)}}}selectItem(r){if(this.inactive)return;if(r!==this.value){this.value=r;this.dsChange.emit(r)}}render(){const r=this.options.findIndex((r=>r.value===this.value));const i=this.options.findIndex((r=>!this.inactive&&!r.inactive));const e=r>=0&&!this.inactive&&!this.options[r]?.inactive?r:i;return o(a,{key:"d4b9ef0c816ed43ca466a1072ddc0916ea64a5cf",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((r,i)=>{const a=this.inactive||!!r.inactive;const s=r.value===this.value;const t=a?-1:i===e?0:-1;return o("div",{key:r.value,role:"radio","aria-checked":String(s),"aria-disabled":a||undefined,tabIndex:t,"data-radio-item":true,"data-value":r.value,"data-inactive":a||undefined,class:{"radio-item":true,"radio-item--inactive":a},onClick:()=>!a&&this.selectItem(r.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!a){i.preventDefault();this.selectItem(r.value)}}},o("span",{class:{circle:true,"circle--checked":s}},s&&o("span",{class:"dot"})),o("span",{class:"text-body-medium radio-label"},r.label))})))}get el(){return this}static get style(){return t()}},[2,"ds-radio-group",{options:[16],value:[1025],direction:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]]]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-radio-group"];r.forEach((r=>{switch(r){case"ds-radio-group":if(!customElements.get(s(r))){customElements.define(s(r),n)}break}}))}d();const c=n;const l=d;export{c as DsRadioGroup,l as defineCustomElement};
 //# sourceMappingURL=ds-radio-group.js.map

package/dist/components/ds-scrollbar.js

@@ -1,2 +1,2 @@
-import{p as s,H as t,h as o,a as r,t as e}from"./index.js";const i=()=>`.sc-ds-scrollbar-h{display:contents}.scrollbar-container.sc-ds-scrollbar{position:relative;width:100%;height:100%;overflow:hidden}.scrollbar-content.sc-ds-scrollbar{width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.scrollbar-content.sc-ds-scrollbar::-webkit-scrollbar{display:none}.scrollbar-content.sc-ds-scrollbar:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.scrollbar-track.sc-ds-scrollbar{position:absolute;top:0;right:0;bottom:0;width:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb.sc-ds-scrollbar{position:absolute;right:0;width:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-track-h.sc-ds-scrollbar{position:absolute;left:0;right:0;bottom:0;height:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb-h.sc-ds-scrollbar{position:absolute;bottom:0;height:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb-h.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}`;const c=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.variant="default";this.showTrackOnHover=true;this.thumbHeight=0;this.thumbTop=0;this.thumbWidth=0;this.thumbLeft=0;this.isDragging=false;this.isDraggingH=false;this.isPointerInside=false;this.contentEl=null;this.resizeObserver=null;this.scrollHandler=null;this.dragStartY=0;this.dragStartScrollTop=0;this.dragStartX=0;this.dragStartScrollLeft=0}componentDidLoad(){this.contentEl=this.el.querySelector(".scrollbar-content");if(!this.contentEl)return;this.scrollHandler=()=>this.updateThumb();this.contentEl.addEventListener("scroll",this.scrollHandler);this.resizeObserver=new ResizeObserver((()=>this.updateThumb()));this.resizeObserver.observe(this.contentEl);window.addEventListener("resize",this.scrollHandler);this.updateThumb()}disconnectedCallback(){if(this.contentEl&&this.scrollHandler){this.contentEl.removeEventListener("scroll",this.scrollHandler)}if(this.scrollHandler){window.removeEventListener("resize",this.scrollHandler)}this.resizeObserver?.disconnect()}updateThumb(){const s=this.el.querySelector(".scrollbar-container");const t=this.contentEl;if(!s||!t)return;const o=s.clientHeight;const r=s.clientWidth;const e=t.scrollHeight;const i=t.scrollWidth;const c=t.scrollTop;const a=t.scrollLeft;if(e<=o){this.thumbHeight=0}else{const s=Math.max(20,o*(o/e));this.thumbHeight=s;this.thumbTop=c/(e-o)*(o-s)}if(i<=r){this.thumbWidth=0}else{const s=Math.max(20,r*(r/i));this.thumbWidth=s;this.thumbLeft=a/(i-r)*(r-s)}}handleThumbMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDragging=true;this.dragStartY=s.clientY;this.dragStartScrollTop=t.scrollTop;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientY-this.dragStartY;const e=t.scrollHeight-o.clientHeight;const i=e/(o.clientHeight-this.thumbHeight);t.scrollTop=Math.max(0,Math.min(e,this.dragStartScrollTop+r*i))};const e=()=>{this.isDragging=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}handleThumbHMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDraggingH=true;this.dragStartX=s.clientX;this.dragStartScrollLeft=t.scrollLeft;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientX-this.dragStartX;const e=t.scrollWidth-o.clientWidth;const i=e/(o.clientWidth-this.thumbWidth);t.scrollLeft=Math.max(0,Math.min(e,this.dragStartScrollLeft+r*i))};const e=()=>{this.isDraggingH=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}render(){const s=this.thumbHeight>0;const t=this.thumbWidth>0;const e=s||t;const i=this.showTrackOnHover&&(this.isPointerInside||this.isDragging||this.isDraggingH);return o(r,{key:"beca182068ffdd77932fd260cce7265862609635",style:{display:"contents"}},o("div",{key:"4efcac3cdbe14059b6753a40b8dc9f5f7265a59a",class:{"scrollbar-container":true,"scrollbar-container--thick":this.variant==="thick"},"data-show-track":i?"true":"false","data-dragging":this.isDragging||this.isDraggingH,onMouseEnter:()=>{if(this.showTrackOnHover)this.isPointerInside=true},onMouseLeave:()=>{this.isPointerInside=false}},o("div",{key:"ddd16b428dd2bc101777362e4dd00864a6f36fbb",class:"scrollbar-content",tabIndex:e?0:undefined},o("slot",{key:"5f9b162eb6a43d51239bc68a3af79f2ecef87d6b"})),s&&o("div",{key:"191dc607916e18409dd32a273df3d5cd0ca54102",class:"scrollbar-track","aria-hidden":"true"},o("div",{key:"50af00097d3b20e041577fdff0a2d45a7b322746",class:"scrollbar-thumb",style:{height:`${this.thumbHeight}px`,top:`${this.thumbTop}px`},onMouseDown:s=>this.handleThumbMouseDown(s)})),t&&o("div",{key:"c7e869cf826c2e00120849f5512c4a64f1eaf6e7",class:"scrollbar-track-h","aria-hidden":"true"},o("div",{key:"5b35ce1033a4aff67883d1b76ed0511279402a7b",class:"scrollbar-thumb-h",style:{width:`${this.thumbWidth}px`,left:`${this.thumbLeft}px`},onMouseDown:s=>this.handleThumbHMouseDown(s)}))))}get el(){return this}static get style(){return i()}},[262,"ds-scrollbar",{variant:[1],showTrackOnHover:[4,"show-track-on-hover"],thumbHeight:[32],thumbTop:[32],thumbWidth:[32],thumbLeft:[32],isDragging:[32],isDraggingH:[32],isPointerInside:[32]}]);function a(){if(typeof customElements==="undefined"){return}const s=["ds-scrollbar"];s.forEach((s=>{switch(s){case"ds-scrollbar":if(!customElements.get(e(s))){customElements.define(e(s),c)}break}}))}a();const n=c;const l=a;export{n as DsScrollbar,l as defineCustomElement};
+import{p as s,H as t,h as o,a as r,t as e}from"./index.js";const i=()=>`.sc-ds-scrollbar-h{display:contents}.scrollbar-container.sc-ds-scrollbar{position:relative;width:100%;height:100%;overflow:hidden}.scrollbar-content.sc-ds-scrollbar{width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.scrollbar-content.sc-ds-scrollbar::-webkit-scrollbar{display:none}.scrollbar-content.sc-ds-scrollbar:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.scrollbar-track.sc-ds-scrollbar{position:absolute;top:0;right:0;bottom:0;width:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb.sc-ds-scrollbar{position:absolute;right:0;width:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-track-h.sc-ds-scrollbar{position:absolute;left:0;right:0;bottom:0;height:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb-h.sc-ds-scrollbar{position:absolute;bottom:0;height:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb-h.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}`;const c=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.variant="default";this.showTrackOnHover=true;this.thumbHeight=0;this.thumbTop=0;this.thumbWidth=0;this.thumbLeft=0;this.isDragging=false;this.isDraggingH=false;this.isPointerInside=false;this.contentEl=null;this.resizeObserver=null;this.scrollHandler=null;this.dragStartY=0;this.dragStartScrollTop=0;this.dragStartX=0;this.dragStartScrollLeft=0}componentDidLoad(){this.contentEl=this.el.querySelector(".scrollbar-content");if(!this.contentEl)return;this.scrollHandler=()=>this.updateThumb();this.contentEl.addEventListener("scroll",this.scrollHandler);this.resizeObserver=new ResizeObserver((()=>this.updateThumb()));this.resizeObserver.observe(this.contentEl);window.addEventListener("resize",this.scrollHandler);this.updateThumb()}disconnectedCallback(){if(this.contentEl&&this.scrollHandler){this.contentEl.removeEventListener("scroll",this.scrollHandler)}if(this.scrollHandler){window.removeEventListener("resize",this.scrollHandler)}this.resizeObserver?.disconnect()}updateThumb(){const s=this.el.querySelector(".scrollbar-container");const t=this.contentEl;if(!s||!t)return;const o=s.clientHeight;const r=s.clientWidth;const e=t.scrollHeight;const i=t.scrollWidth;const c=t.scrollTop;const a=t.scrollLeft;if(e<=o){this.thumbHeight=0}else{const s=Math.max(20,o*(o/e));this.thumbHeight=s;this.thumbTop=c/(e-o)*(o-s)}if(i<=r){this.thumbWidth=0}else{const s=Math.max(20,r*(r/i));this.thumbWidth=s;this.thumbLeft=a/(i-r)*(r-s)}}handleThumbMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDragging=true;this.dragStartY=s.clientY;this.dragStartScrollTop=t.scrollTop;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientY-this.dragStartY;const e=t.scrollHeight-o.clientHeight;const i=e/(o.clientHeight-this.thumbHeight);t.scrollTop=Math.max(0,Math.min(e,this.dragStartScrollTop+r*i))};const e=()=>{this.isDragging=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}handleThumbHMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDraggingH=true;this.dragStartX=s.clientX;this.dragStartScrollLeft=t.scrollLeft;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientX-this.dragStartX;const e=t.scrollWidth-o.clientWidth;const i=e/(o.clientWidth-this.thumbWidth);t.scrollLeft=Math.max(0,Math.min(e,this.dragStartScrollLeft+r*i))};const e=()=>{this.isDraggingH=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}render(){const s=this.thumbHeight>0;const t=this.thumbWidth>0;const e=s||t;const i=this.showTrackOnHover&&(this.isPointerInside||this.isDragging||this.isDraggingH);return o(r,{key:"d5c9edeb3002080ea756dbcd2d9a4aaa37e91b7b",style:{display:"contents"}},o("div",{key:"780e6704ef08fd3547c4f1bab08a97c6f7d0f82f",class:{"scrollbar-container":true,"scrollbar-container--thick":this.variant==="thick"},"data-show-track":i?"true":"false","data-dragging":this.isDragging||this.isDraggingH,onMouseEnter:()=>{if(this.showTrackOnHover)this.isPointerInside=true},onMouseLeave:()=>{this.isPointerInside=false}},o("div",{key:"eb06dc40f2dc5797abb34cb37b2e5bc19d7dc465",class:"scrollbar-content",tabIndex:e?0:undefined},o("slot",{key:"de236e0181c94ce4a765c6196ad200ba7362daef"})),s&&o("div",{key:"f0991b9660b11da1cfeb3fb55c77d066a71308e5",class:"scrollbar-track","aria-hidden":"true"},o("div",{key:"f3904fc7f41e8c5a0b33310c58fc317e48ab3ac0",class:"scrollbar-thumb",style:{height:`${this.thumbHeight}px`,top:`${this.thumbTop}px`},onMouseDown:s=>this.handleThumbMouseDown(s)})),t&&o("div",{key:"f4ef39a4523680378d384f7d97ae62159c537db7",class:"scrollbar-track-h","aria-hidden":"true"},o("div",{key:"becfd9a938a93fce4711e88d05f060922ae3c44a",class:"scrollbar-thumb-h",style:{width:`${this.thumbWidth}px`,left:`${this.thumbLeft}px`},onMouseDown:s=>this.handleThumbHMouseDown(s)}))))}get el(){return this}static get style(){return i()}},[262,"ds-scrollbar",{variant:[1],showTrackOnHover:[4,"show-track-on-hover"],thumbHeight:[32],thumbTop:[32],thumbWidth:[32],thumbLeft:[32],isDragging:[32],isDraggingH:[32],isPointerInside:[32]}]);function a(){if(typeof customElements==="undefined"){return}const s=["ds-scrollbar"];s.forEach((s=>{switch(s){case"ds-scrollbar":if(!customElements.get(e(s))){customElements.define(e(s),c)}break}}))}a();const n=c;const l=a;export{n as DsScrollbar,l as defineCustomElement};
 //# sourceMappingURL=ds-scrollbar.js.map

package/dist/components/ds-select.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{d as a}from"./p-DDEAcGac.js";import{d as n}from"./p-B3ua1NkM.js";import{d as l}from"./p-DvBrQuie.js";const c=()=>`.select-host.sc-ds-select-h{display:inline-block;width:100%;position:relative}.inactive.sc-ds-select-h{opacity:0.5;pointer-events:none}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-075) 0 var(--dimension-space-100);border:none;border-radius:var(--dimension-radius-050);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);cursor:pointer;box-sizing:border-box;gap:var(--dimension-space-050);font-family:inherit;outline:none;--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.trigger.sc-ds-select:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.trigger.sc-ds-select:hover:not(:disabled){background-color:var(--_hover-bg)}.trigger.sc-ds-select:active:not(:disabled){background-color:var(--_pressed-bg)}.trigger--open.sc-ds-select{background-color:var(--_pressed-bg)}.trigger__label.sc-ds-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);color:var(--color-foreground-primary)}.trigger__label--placeholder.sc-ds-select{color:var(--color-foreground-secondary)}.trigger__chevron.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary);transition:transform var(--effect-motion-short-2)}.trigger--open.sc-ds-select .trigger__chevron.sc-ds-select{transform:rotate(180deg)}`;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select option";this.inactive=false;this.isOpen=false;this.triggerEl=null;this.menuEl=null}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",(e=>{const s=e.detail;if(s?.value!==undefined){this.value=String(s.value);this.dsChange.emit(this.value)}this.isOpen=false}));this.menuEl?.addEventListener("dsClose",(()=>{this.isOpen=false}))}onIsOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((e=>({label:e.label,value:e.value,isSelected:e.value===this.value})))}open(){if(this.inactive||!this.options.length)return;if(this.menuEl&&this.triggerEl){this.menuEl.menuWidth=`${this.triggerEl.offsetWidth}px`;this.menuEl.anchor=this.triggerEl}this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false}toggle(){if(this.isOpen){this.close()}else{this.open()}}handleKeyDown(e){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault();this.open();break}}else{if(e.key==="Escape"){e.preventDefault();this.close();this.triggerEl?.focus()}}}get selectedLabel(){const e=this.options.find((e=>e.value===this.value));return e?.label??""}get hasSelection(){return!!this.options.find((e=>e.value===this.value))}render(){const e=this.hasSelection?this.selectedLabel:this.placeholder;const s=!this.hasSelection;return i(r,{key:"47854c5a69705adc07ca601f31e262d3d8d74771",class:{"select-host":true,inactive:this.inactive}},i("button",{key:"2fa71b2e7bb4f890a37a130c6af50cb0cb05df81",ref:e=>{this.triggerEl=e??null},type:"button",class:{trigger:true,"trigger--open":this.isOpen},disabled:this.inactive,role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle()},i("span",{key:"4ce5d30c16af2dd2188d19dfc13d96b3d3bfbe6e",class:{trigger__label:true,"trigger__label--placeholder":s}},e),i("svg",{key:"8a942bde794824fb5b79565d4d297c7b3a42bed4",class:"trigger__chevron",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},i("path",{key:"b937494cd4d3bdf9924541d8f77db13fef11b8b6",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.25","stroke-linecap":"round","stroke-linejoin":"round"}))),i("ds-menu",{key:"d8f76d473fea216bac4db040441288b1da9cd87b",ref:e=>{this.menuEl=e??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 c()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),d)}break;case"ds-menu":if(!customElements.get(o(e))){a()}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){n()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){l()}break}}))}h();const g=d;const p=h;export{g as DsSelect,p as defineCustomElement};
+import{p as e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{d as n}from"./p-CKCBqwIw.js";import{d as a}from"./p-DnGr8qtq.js";import{d as l}from"./p-CDNVPM2x.js";const c=()=>`.select-host.sc-ds-select-h{display:inline-block;width:100%;position:relative}.inactive.sc-ds-select-h{opacity:0.5;pointer-events:none}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-075) 0 var(--dimension-space-100);border:none;border-radius:var(--dimension-radius-050);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);cursor:pointer;box-sizing:border-box;gap:var(--dimension-space-050);font-family:inherit;outline:none;--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.trigger.sc-ds-select:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.trigger.sc-ds-select:hover:not(:disabled){background-color:var(--_hover-bg)}.trigger.sc-ds-select:active:not(:disabled){background-color:var(--_pressed-bg)}.trigger--open.sc-ds-select{background-color:var(--_pressed-bg)}.trigger__label.sc-ds-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);color:var(--color-foreground-primary)}.trigger__label--placeholder.sc-ds-select{color:var(--color-foreground-secondary)}.trigger__chevron.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary);transition:transform var(--effect-motion-short-2)}.trigger--open.sc-ds-select .trigger__chevron.sc-ds-select{transform:rotate(180deg)}`;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select option";this.inactive=false;this.isOpen=false;this.triggerEl=null;this.menuEl=null}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",(e=>{const s=e.detail;if(s?.value!==undefined){this.value=String(s.value);this.dsChange.emit(this.value)}this.isOpen=false}));this.menuEl?.addEventListener("dsClose",(()=>{this.isOpen=false}))}onIsOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((e=>({label:e.label,value:e.value,isSelected:e.value===this.value})))}open(){if(this.inactive||!this.options.length)return;if(this.menuEl&&this.triggerEl){this.menuEl.menuWidth=`${this.triggerEl.offsetWidth}px`;this.menuEl.anchor=this.triggerEl}this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false}toggle(){if(this.isOpen){this.close()}else{this.open()}}handleKeyDown(e){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault();this.open();break}}else{if(e.key==="Escape"){e.preventDefault();this.close();this.triggerEl?.focus()}}}get selectedLabel(){const e=this.options.find((e=>e.value===this.value));return e?.label??""}get hasSelection(){return!!this.options.find((e=>e.value===this.value))}render(){const e=this.hasSelection?this.selectedLabel:this.placeholder;const s=!this.hasSelection;return i(r,{key:"2d3b41b47d390fcb84a03554e8367cf57cf0cc30",class:{"select-host":true,inactive:this.inactive}},i("button",{key:"48d7133bdd13c64ea694455f1717d3736aae4ff0",ref:e=>{this.triggerEl=e??null},type:"button",class:{trigger:true,"trigger--open":this.isOpen},disabled:this.inactive,role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle()},i("span",{key:"8dc70923e8ddb2e94b26f1ee6a76413c01e01663",class:{trigger__label:true,"trigger__label--placeholder":s}},e),i("svg",{key:"dfeb7f347d4462cc3b4f1c21274583e515c9f2a8",class:"trigger__chevron",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},i("path",{key:"b74ad8ff8c29b2d64e60d0e1db4cf8deac747771",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.25","stroke-linecap":"round","stroke-linejoin":"round"}))),i("ds-menu",{key:"8a3b5499fceb9589672a431d65d7833e24755174",ref:e=>{this.menuEl=e??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 c()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),d)}break;case"ds-menu":if(!customElements.get(o(e))){n()}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){l()}break}}))}h();const g=d;const p=h;export{g as DsSelect,p as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map

package/dist/components/ds-shell-gradient-picker.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-B3ua1NkM.js";const t=o;const a=s;export{t as DsShellGradientPicker,a as defineCustomElement};
+import{S as o,d as s}from"./p-DnGr8qtq.js";const t=o;const r=s;export{t as DsShellGradientPicker,r as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-picker.js.map

package/dist/components/ds-shell-gradient-swatch.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-DvBrQuie.js";const r=o;const t=s;export{r as DsShellGradientSwatch,t as defineCustomElement};
+import{S as o,d as s}from"./p-CDNVPM2x.js";const t=o;const p=s;export{t as DsShellGradientSwatch,p as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-swatch.js.map