@ds-mo/ui 9.1.0 → 9.2.1

package/dist/components/ds-panel-tool-search.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["panelToolSearchCss","PanelToolSearch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","ariaLabel","isInactive","showFilter","filterAriaLabel","filterTriggerId","filterExpanded","filterActive","handleChange","dsChange","emit","componentDidRender","input","el","querySelector","setFocus","focus","focusFilterTrigger","trigger","render","h","Host","key","class","ChoiceSearch","controls","disabled","inputRef","undefined","clearLabel","onValueChange","onClear","dsClear","onKeyDown","orientation","length","id","variant","icon","size","haspopup","filterControls","expanded","isActive","activeFill","hasBorder","onDsChange","event","stopPropagation","onDsClick","dsFilterToggle","detail"],"sources":["src/wc/components/PanelToolSearch/PanelToolSearch.css?tag=ds-panel-tool-search&encapsulation=scoped","src/wc/components/PanelToolSearch/PanelToolSearch.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/search-control.css';\n@import '../../utils/typography.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  width: 100%;\n  height: 100%;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.select-search::after {\n  display: none;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n  tag: 'ds-panel-tool-search',\n  styleUrl: 'PanelToolSearch.css',\n  scoped: true,\n})\nexport class PanelToolSearch {\n  @Element() el!: HTMLElement;\n\n  /** Current search query. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Search guidance shown while the query is empty. */\n  @Prop() placeholder: string = 'Search';\n  /** Accessible name for the search field. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n  /** Optional ID of the results region filtered by this search. */\n  @Prop() controls: string | undefined;\n  /** Prevents search interaction while keeping the row visible. */\n  @Prop() isInactive: boolean = false;\n  /** Show the optional trailing filter-menu trigger. */\n  @Prop() showFilter: boolean = false;\n  /** Accessible name for the filter-menu trigger. */\n  @Prop() filterAriaLabel: string = 'Filter';\n  /** Stable id placed on the filter trigger for ds-menu anchoring. */\n  @Prop() filterTriggerId: string = '';\n  /** Id of the menu controlled by the filter trigger. */\n  @Prop() filterControls: string | undefined;\n  /** Whether the controlled filter menu is open. */\n  @Prop() filterExpanded: boolean = false;\n  /** Promote the trigger foreground when one or more filters are applied. */\n  @Prop() filterActive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n  @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n  componentDidRender() {\n    const input = this.el.querySelector('input');\n    if (input && input.value !== this.value) input.value = this.value;\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  @Method()\n  async focusFilterTrigger() {\n    const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await trigger?.setFocus?.();\n  }\n\n  private handleChange = (value: string) => {\n    this.value = value;\n    this.dsChange.emit(value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-tool-search\">\n          <ChoiceSearch\n            value={this.value}\n            placeholder={this.placeholder}\n            ariaLabel={this.ariaLabel}\n            controls={this.controls}\n            disabled={this.isInactive}\n            inputRef={() => undefined}\n            clearLabel=\"Clear\"\n            onValueChange={this.handleChange}\n            onClear={() => this.dsClear.emit()}\n            onKeyDown={() => undefined}\n          />\n          {this.showFilter ? (\n            <div class=\"panel-tool-search__filter-group\">\n              <ds-divider\n                class=\"panel-tool-search__divider\"\n                orientation=\"vertical\"\n                length=\"var(--dimension-size-200)\"\n              />\n              <ds-button-unfilled\n                id={this.filterTriggerId || undefined}\n                class=\"panel-tool-search__filter\"\n                variant=\"icon\"\n                icon=\"Filters\"\n                size=\"md\"\n                aria-label={this.filterAriaLabel}\n                haspopup=\"menu\"\n                controls={this.filterControls}\n                expanded={this.filterExpanded}\n                isActive={this.filterActive}\n                isInactive={this.isInactive}\n                activeFill={false}\n                hasBorder={false}\n                onDsChange={(event: CustomEvent<boolean>) => {\n                  event.stopPropagation();\n                }}\n                onDsClick={(event: CustomEvent<MouseEvent>) => {\n                  event.stopPropagation();\n                  this.dsFilterToggle.emit(event.detail);\n                }}\n              />\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yTAAA,MAAMA,EAAqB,IAAM,isS,MCiBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,yJAS2BC,KAAAC,MAAgB,GAEjCD,KAAAE,YAAsB,SAEKF,KAAAG,UAAoB,SAI/CH,KAAAI,WAAsB,MAEtBJ,KAAAK,WAAsB,MAEtBL,KAAAM,gBAA0B,SAE1BN,KAAAO,gBAA0B,GAI1BP,KAAAQ,eAA0B,MAE1BR,KAAAS,aAAwB,MAwBxBT,KAAAU,aAAgBT,IACtBD,KAAKC,MAAQA,EACbD,KAAKW,SAASC,KAAKX,EAAM,CAsD5B,CA1EC,kBAAAY,GACE,MAAMC,EAAQd,KAAKe,GAAGC,cAAc,SACpC,GAAIF,GAASA,EAAMb,QAAUD,KAAKC,MAAOa,EAAMb,MAAQD,KAAKC,K,CAI9D,cAAMgB,GACJjB,KAAKe,GAAGC,cAAc,UAAUE,O,CAIlC,wBAAMC,GACJ,MAAMC,EAAUpB,KAAKe,GAAGC,cAAc,sDAGhCI,GAASH,a,CAQjB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAACI,EAAY,CAAAF,IAAA,2CACXvB,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAClBC,UAAWH,KAAKG,UAChBwB,SAAU3B,KAAK2B,SACfC,SAAU5B,KAAKI,WACfyB,SAAU,IAAMC,UAChBC,WAAW,QACXC,cAAehC,KAAKU,aACpBuB,QAAS,IAAMjC,KAAKkC,QAAQtB,OAC5BuB,UAAW,IAAML,YAElB9B,KAAKK,WACJiB,EAAA,OAAKG,MAAM,mCACTH,EAAA,cACEG,MAAM,6BACNW,YAAY,WACZC,OAAO,8BAETf,EAAA,sBACEgB,GAAItC,KAAKO,iBAAmBuB,UAC5BL,MAAM,4BACNc,QAAQ,OACRC,KAAK,UACLC,KAAK,KAAI,aACGzC,KAAKM,gBACjBoC,SAAS,OACTf,SAAU3B,KAAK2C,eACfC,SAAU5C,KAAKQ,eACfqC,SAAU7C,KAAKS,aACfL,WAAYJ,KAAKI,WACjB0C,WAAY,MACZC,UAAW,MACXC,WAAaC,IACXA,EAAMC,iBAAiB,EAEzBC,UAAYF,IACVA,EAAMC,kBACNlD,KAAKoD,eAAexC,KAAKqC,EAAMI,OAAO,KAI1C,M","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as o,a,t as n}from"./index.js";import{p as i}from"./p-BOQnc-M4.js";import{p as l}from"./p-BHtg1fh3.js";import{d as r}from"./p-BbV68F23.js";import{d}from"./p-DyZj3k9S.js";import{d as c}from"./p-CXF8yd-g.js";import{d as p}from"./p-Cpr3K41-.js";import{d as h}from"./p-CbS_WWs2.js";import{d as f}from"./p-KRGBGTu5.js";const u=["search","agents","messages","stacks","activity","help"];const m="search";const _="help";const g={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const b={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"?"};function v(e,s){if(s){return i(s,[])}return e??[]}function y(e){const s=new Map;for(const t of e){if(!s.has(t.id))s.set(t.id,t)}return u.flatMap((e=>{const t=s.get(e);return t?[t]:[]}))}function w(e){return e!==null&&u.includes(e)}function x(e,s,t){if(!t||e.some((e=>e.id===t))){return{open:s,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function k(e){const s=e.transitionProperty.split(",").map((e=>e.trim()));const t=e.transitionDuration.split(",").map((e=>l(e.trim(),0)));const o=e.transitionDelay.split(",").map((e=>l(e.trim(),0)));return s.reduce(((e,s,a)=>{if(s!=="all"&&s!=="max-width")return e;const n=t[a%t.length]??0;const i=o[a%o.length]??0;return Math.max(e,n+i,0)}),0)}function T(e,s){return!e&&s==="idle"}function C(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const z=()=>`.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(     --ds-shell-panel-tools-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.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-out, ease)}.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.sc-ds-panel-tools-h:not([gradient-preset='none']) .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell.sc-ds-panel-tools-h:not([gradient-preset='none']) .panel-tools__rail.sc-ds-panel-tools,ds-app-shell:not([gradient-preset='none']) .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}ds-text.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}ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools__body.sc-ds-panel-tools{opacity:0;transition:none}.panel-tools--ready.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in-out, ease)}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--open.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{opacity:1}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-footer.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:auto;padding:var(--dimension-space-100);box-sizing:border-box}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}@media (prefers-reduced-motion: reduce){.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:none}}`;const A=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.storageKey="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}this.finishDrawerTransition()};this.handleToolChange=e=>{const s=C(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return v(this.items,this.itemsJson)}get orderedRailItems(){const e=y(this.railItems);const s=e.find((e=>e.id===m));const t=e.find((e=>e.id===_));const o=e.filter((e=>e.id!==m&&e.id!==_));const a=[];if(s)a.push(s);a.push(...o);if(t)a.push(t);return a}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.clearTransitionCompletion();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);this.el.addEventListener("transitioncancel",this.handleTransitionEnd)}componentWillLoad(){this.restoreLastActiveTool()}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.startDrawerTransition(e?"opening":"closing")}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const e=localStorage.getItem(this.storageKey);if(w(e))this.activeTool=e}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const e=x(this.railItems,this.open,this.activeTool);if(!e.removedTool)return;this.clearPersistedTool();this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:e.removedTool,selected:false})}startDrawerTransition(e){const s=this.el.querySelector(".panel-tools__drawer");const t=s?.getBoundingClientRect().width??0;if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=e;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e});const o=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.transitionGeneration||this.motion!==e)return;if(!s){this.finishDrawerTransition();return}const a=s.getBoundingClientRect().width;if(Math.abs(a-t)<1){this.finishDrawerTransition();return}const n=k(getComputedStyle(s));if(n<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),n)}))}))}finishDrawerTransition(){const e=this.motion!=="idle";this.clearTransitionCompletion();if(!e)return;this.ignoreReplacementTerminal=false;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}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 g[this.activeTool]??""}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){const t=e.ariaLabel??g[e.id];return o("ds-tooltip",{key:e.id,label:t,shortcutKey:b[e.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.orderedRailItems;const t=s.find((e=>e.id===m));const n=s.find((e=>e.id===_));const i=s.filter((e=>e.id!==m&&e.id!==_));const l=n?(t?1:0)+i.length:-1;const r=this.isDrawerPresent();const d=T(this.open,this.motion);return o(a,{key:"9eae336d2614632466a06f0c590a7a33c448d393",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":d},role:"complementary","aria-label":this.toolsLabel},o("div",{key:"95eb4d5d1cebf0712f3731317d8b37f663420b41",class:"panel-tools__layout"},o("nav",{key:"31f2ab3f310823a5e37300352954ab435b8ede1a",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t,0)):null,o("div",{key:"468f58c4cdaa88f85ccdaa63d4531122780709c8",class:"panel-tools__rail-body"},i.map(((e,s)=>this.renderRailAction(e,t?s+1:s)))),n?o("div",{class:"panel-tools__rail-footer"},this.renderRailAction(n,l)):null),o("div",{key:"3805fb599b0923b1901014979065d6848fab63b0",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":r},"aria-hidden":r?null:"true",inert:r?undefined:true},o("div",{key:"ac7fe8d40967d026dc9aca56cff63227c323ed8a",class:"panel-tools__drawer-surface"},o("header",{key:"4c80eee5690139cc1d0b834e0e5ba43ec04361a8",class:"panel-tools__header"},o("ds-text",{key:"02aba7be72c295f7193ba385c2eb68846b1eda52",class:"panel-tools__title",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},e)),o("div",{key:"d89d5092706e91ad39222074c940716dc9329613",class:"panel-tools__body"},o("div",{key:"18f5be1c993f89011375768fd0158c07461e430b",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search")},hidden:!this.isViewActive("search")},o("slot",{key:"bfeacc22f47a0cc14d901fff03acf59c3a91c861",name:"search"})),o("div",{key:"8b19b59dbbfcb847a8b261422a70a6262c94cd42",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages")},hidden:!this.isViewActive("messages")},o("slot",{key:"7b27f95090b1e98ba36f9cc26ad64144fe90f622",name:"messages"})),o("div",{key:"e69696cb2dc1a7109dcdd64540f2bbe1ee0811f5",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks")},hidden:!this.isViewActive("stacks")},o("slot",{key:"883f11d7d304c002bbbb1988c9605f8fbad0439a",name:"stacks"})),o("div",{key:"78436de00a59ecd3bdd766510bf4316068350db3",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity")},hidden:!this.isViewActive("activity")},o("slot",{key:"d4b18d09c0dc3ddbb68a7d207e93b4d36c18d74d",name:"activity"})),o("div",{key:"c14f12018da011485c7d4210998d0da77b8ce330",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents")},hidden:!this.isViewActive("agents")},o("slot",{key:"6e43bb9c0e79a3b33046137be13f5581c2f5a238",name:"agents"})),o("div",{key:"179468298cb7d6b2c6254359dbce9c0ef726caa2",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("help")},hidden:!this.isViewActive("help")},o("slot",{key:"c721c37ff9263573f7640d32ebaf0698c3692339",name:"help"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return z()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],storageKey:[1,"storage-key"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(n(e))){customElements.define(n(e),A)}break;case"ds-badge":if(!customElements.get(n(e))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){d()}break;case"ds-icon":if(!customElements.get(n(e))){c()}break;case"ds-loader":if(!customElements.get(n(e))){p()}break;case"ds-text":if(!customElements.get(n(e))){h()}break;case"ds-tooltip":if(!customElements.get(n(e))){f()}break}}))}j();const S=A;const E=j;export{S as DsPanelTools,E as defineCustomElement};
+import{p as e,H as s,c as t,h as o,a as i,t as n}from"./index.js";import{p as a}from"./p-BOQnc-M4.js";import{p as l}from"./p-BHtg1fh3.js";import{d as r}from"./p-CiwdnKKp.js";import{d}from"./p-Dst-OliP.js";import{d as c}from"./p-CBYuvZKM.js";import{d as h}from"./p-Cpr3K41-.js";import{d as p}from"./p-BHpWYKtP.js";import{d as f}from"./p-BSOZXagj.js";import{d as u}from"./p-BO6C8abO.js";const m=["search","agents","messages","stacks","activity","help"];const g="search";const v="help";const _={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const b={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"?"};function w(e,s){if(s){return a(s,[])}return e??[]}function y(e){const s=new Map;for(const t of e){if(!s.has(t.id))s.set(t.id,t)}return m.flatMap((e=>{const t=s.get(e);return t?[t]:[]}))}function x(e){return e!==null&&m.includes(e)}function k(e,s,t){if(!t||e.some((e=>e.id===t))){return{open:s,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function C(e){const s=e.transitionProperty.split(",").map((e=>e.trim()));const t=e.transitionDuration.split(",").map((e=>l(e.trim(),0)));const o=e.transitionDelay.split(",").map((e=>l(e.trim(),0)));return s.reduce(((e,s,i)=>{if(s!=="all"&&s!=="max-width")return e;const n=t[i%t.length]??0;const a=o[i%o.length]??0;return Math.max(e,n+a,0)}),0)}function T(e,s){return!e&&s==="idle"}function A(e,s,t){if(t==="closing")return e<=.5;if(t==="opening")return s>0&&e>=s-.5;return true}function z(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const S=()=>`.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.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(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_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.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-out, ease)}.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:transparent}.panel-tools__full-views.sc-ds-panel-tools,.panel-tools__full-view.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view.sc-ds-panel-tools{height:100%}.panel-tools__full-view.sc-ds-panel-tools{display:none}.panel-tools__full-view--active.sc-ds-panel-tools{display:block}[presentation='fullscreen'].sc-ds-panel-tools-h{height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{display:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:100vw;transition:none;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer--visible.sc-ds-panel-tools{border-left:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools{background-color:transparent;width:100vw}.panel-tools--presentation-snap.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}.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:transparent}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-footer.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:auto;padding:var(--dimension-space-100);box-sizing:border-box}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}}`;const j=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.presentation="drawer";this.fullscreenHeaderMode="shared";this.activeTool="";this.items=[];this.itemsJson="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.headers={};this.headersJson="";this.storageKey="";this.motion="idle";this.drawerSurfaceRetained=false;this.readyForMotion=false;this.presentationMotionSuppressed=false;this.rovingIndex=0;this.fullViewToolIds=[];this.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=e=>{const s=e.detail;if(!this.activeTool||!s?.id)return;e.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:s.id})};this.handleTransitionEnd=e=>{const s=this.el.querySelector(".panel-tools__drawer");if(e.target!==s)return;if(e.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(e.type==="transitioncancel")return;if(s&&!this.drawerTransitionAtTerminal(s,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=e=>{const s=z(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return w(this.items,this.itemsJson)}get orderedRailItems(){const e=y(this.railItems);const s=e.find((e=>e.id===g));const t=e.find((e=>e.id===v));const o=e.filter((e=>e.id!==g&&e.id!==v));const i=[];if(s)i.push(s);i.push(...o);if(t)i.push(t);return i}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.el.removeEventListener("dsAction",this.handleComposedHeaderAction);this.clearTransitionCompletion();this.motionEnableGeneration+=1;this.fullViewObserver?.disconnect();this.fullViewObserver=null}presentationChanged(e,t){if(e===t)return;const o=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(e==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof s?document.activeElement:null;this.open=true}else if(t==="fullscreen"){const e=this.focusBeforeFullscreen;const s=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(e?.isConnected){e.focus({preventScroll:true})}const t=e?document.activeElement===e||e.contains(document.activeElement):false;if(!t&&s)await this.focusHeaderAction(s);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:e})}handleFullscreenEscape(e){if(this.presentation!=="fullscreen"||e.key!=="Escape")return;e.preventDefault();e.stopPropagation();this.presentation="drawer"}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);this.el.addEventListener("transitioncancel",this.handleTransitionEnd);this.el.addEventListener("dsAction",this.handleComposedHeaderAction)}componentWillLoad(){this.restoreLastActiveTool();this.drawerSurfaceRetained=this.open}openChanged(e,s){if(e)this.drawerSurfaceRetained=true;if(this.readyForMotion&&s!==undefined&&s!==e){this.startDrawerTransition(e?"opening":"closing")}else if(!e){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const e=localStorage.getItem(this.storageKey);if(x(e))this.activeTool=e}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const e=k(this.railItems,this.open,this.activeTool);if(!e.removedTool)return;this.clearPersistedTool();this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:e.removedTool,selected:false})}startDrawerTransition(e){const s=this.el.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=e;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e});const t=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.transitionGeneration||this.motion!==e)return;if(!s){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(s,e)){this.finishDrawerTransition();return}const o=C(getComputedStyle(s));if(o<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),o)}))}))}drawerTransitionAtTerminal(e,s){const t=e.getBoundingClientRect().width;const o=e.querySelector(".panel-tools__drawer-surface");const i=o?.getBoundingClientRect().width??0;return A(t,i,s)}finishDrawerTransition(){const e=this.motion;const s=e!=="idle";this.clearTransitionCompletion();if(!s)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(e==="closing"&&!this.open){this.drawerSurfaceRetained=false}this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}hasFullView(e){return this.fullViewToolIds.includes(e)}syncFullViewTools(){const e=["search","messages","stacks","activity","agents","help"];const s=e.filter((e=>Boolean(this.el.querySelector(`[slot="${e}-view"]`))));if(s.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=s}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return _[this.activeTool]??""}resolvedHeaders(){if(Object.keys(this.headers).length)return this.headers;if(!this.headersJson.trim())return{};try{const e=JSON.parse(this.headersJson);return e&&typeof e==="object"&&!Array.isArray(e)?e:{}}catch{return{}}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}async focusHeaderAction(e){const s=this.el.querySelector(`[data-header-action-id="${CSS.escape(e)}"]`);await(s?.setFocus?.())}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){const t=e.ariaLabel??_[e.id];return o("ds-tooltip",{key:e.id,label:t,shortcutKey:b[e.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.activeHeader();const t=s.title?.trim()||e;const n=s.actions??[];const a=this.orderedRailItems;const l=a.find((e=>e.id===g));const r=a.find((e=>e.id===v));const d=a.filter((e=>e.id!==g&&e.id!==v));const c=r?(l?1:0)+d.length:-1;const h=this.isDrawerPresent();const p=T(this.open,this.motion);const f=Boolean(h&&this.activeTool&&this.hasFullView(this.activeTool));const u=["search","messages","stacks","activity","agents","help"];return o(i,{key:"35b05dd1b26e7305bbc98078e33d2884adae5c53",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":p,"panel-tools--fullscreen":this.presentation==="fullscreen","panel-tools--presentation-snap":this.presentationMotionSuppressed},role:this.presentation==="fullscreen"?"dialog":"complementary","aria-modal":this.presentation==="fullscreen"?"true":undefined,"aria-label":this.toolsLabel},o("div",{key:"8dffdedaf7cbe6d36af423da01cdc635b9f80a19",class:"panel-tools__layout"},o("nav",{key:"6fa3613d670f98007e84a06fa91f6b1dc60f8d5b",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},l?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(l,0)):null,o("div",{key:"ee7de9480aefa76021f091256c14b28230d6af0c",class:"panel-tools__rail-body"},d.map(((e,s)=>this.renderRailAction(e,l?s+1:s)))),r?o("div",{class:"panel-tools__rail-footer"},this.renderRailAction(r,c)):null),o("div",{key:"f4357997b0189740bfcaf0dafbfa5e081410999f",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":h},"aria-hidden":h?null:"true",inert:h?undefined:true},o("div",{key:"d5ea635f71abf05a4089fad07b3286a4d6fb9ae0",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?o("ds-panel-tool-header",{class:"panel-tools__header",heading:t,showBack:s.showBack??false,backIcon:s.backIcon||"ChevronLeft",backAriaLabel:s.backAriaLabel||"Back",showMenu:false,ref:e=>{const s=e;if(s)s.actions=n},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,o("div",{key:"4e0c987c947b9381cd988d3de7b6ff11eec83a74",class:"panel-tools__body",hidden:f},u.map((e=>{const s=this.isViewActive(e);return o("div",{class:{"panel-tools__view":true,"panel-tools__view--active":s},hidden:!s},o("slot",{name:e}))}))),o("div",{key:"6108f7fd96f32c1021da81bccf3a4cc03b915410",class:"panel-tools__full-views",hidden:!f},u.map((e=>o("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(e)&&this.hasFullView(e)},hidden:!(this.isViewActive(e)&&this.hasFullView(e))},o("slot",{name:`${e}-view`})))))))))}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return S()}},[262,"ds-panel-tools",{open:[1540],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],headers:[16],headersJson:[1,"headers-json"],storageKey:[1,"storage-key"],motion:[32],drawerSurfaceRetained:[32],readyForMotion:[32],presentationMotionSuppressed:[32],rovingIndex:[32],fullViewToolIds:[32],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},[[10,"keydown","handleFullscreenEscape"]],{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function E(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(n(e))){customElements.define(n(e),j)}break;case"ds-badge":if(!customElements.get(n(e))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){d()}break;case"ds-icon":if(!customElements.get(n(e))){c()}break;case"ds-loader":if(!customElements.get(n(e))){h()}break;case"ds-panel-tool-header":if(!customElements.get(n(e))){p()}break;case"ds-text":if(!customElements.get(n(e))){f()}break;case"ds-tooltip":if(!customElements.get(n(e))){u()}break}}))}E();const F=j;const K=E;export{F as DsPanelTools,K as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["PANEL_TOOLS_TOOL_IDS","PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_FOOTER_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","help","PANEL_TOOLS_SHORTCUTS","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","orderPanelToolsItems","firstById","Map","item","has","id","set","flatMap","get","isPanelToolsToolId","value","includes","reconcilePanelToolsAvailability","open","activeTool","some","removedTool","panelToolsDrawerTransitionMs","style","properties","transitionProperty","split","map","trim","durations","transitionDuration","parseCssTimeMs","delays","transitionDelay","reduce","max","property","index","duration","length","delay","Math","panelToolsDrawerResting","motion","resolvePanelToolActivation","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","toolsLabel","toolShortcutsLabel","storageKey","readyForMotion","rovingIndex","motionEnableGeneration","transitionGeneration","transitionFallbackTimer","ignoreReplacementTerminal","handleTransitionEnd","event","target","el","querySelector","propertyName","finishDrawerTransition","handleToolChange","next","dsToolChange","emit","handleRailKeyDown","e","orderedRailItems","key","preventDefault","focusRailAt","railItems","headerItem","find","footerItem","bodyItems","filter","ordered","push","disconnectedCallback","removeEventListener","clearTransitionCompletion","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","componentWillLoad","restoreLastActiveTool","openChanged","isOpen","wasOpen","undefined","startDrawerTransition","activeToolChanged","persistLastActiveTool","storageKeyChanged","componentDidLoad","itemsChanged","reconcileActiveTool","stored","localStorage","getItem","setItem","clearPersistedTool","removeItem","phase","drawer","widthBefore","getBoundingClientRect","width","dsChromeTransitionStart","source","widthAfter","abs","fallbackMs","getComputedStyle","window","setTimeout","wasTransitioning","dsChromeTransitionEnd","clearTimeout","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","label","ariaLabel","h","shortcutKey","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","footerIndex","showDrawerChrome","drawerResting","Host","role","bodyIdx","inert","as","emphasis","color","wrap","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId =\n  | 'search'\n  | 'agents'\n  | 'messages'\n  | 'stacks'\n  | 'activity'\n  | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n  'help',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\n/** Rail footer slot — flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n  help: 'Help & Support',\n};\n\nexport const PANEL_TOOLS_SHORTCUTS: Partial<Record<PanelToolsToolId, string>> = {\n  search: 'K',\n  agents: 'A',\n  messages: 'M',\n  stacks: 'S',\n  activity: 'N',\n  help: '?',\n};\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport { parseCssTimeMs } from '../../utils/resolve-css-time-ms';\nimport {\n  PANEL_TOOLS_TOOL_IDS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} 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 orderPanelToolsItems(items: PanelToolsItem[]): PanelToolsItem[] {\n  const firstById = new Map<PanelToolsToolId, PanelToolsItem>();\n  for (const item of items) {\n    if (!firstById.has(item.id)) firstById.set(item.id, item);\n  }\n  return PANEL_TOOLS_TOOL_IDS.flatMap(id => {\n    const item = firstById.get(id);\n    return item ? [item] : [];\n  });\n}\n\nexport function isPanelToolsToolId(value: string | null): value is PanelToolsToolId {\n  return value !== null && PANEL_TOOLS_TOOL_IDS.includes(value as PanelToolsToolId);\n}\n\nexport function reconcilePanelToolsAvailability(\n  items: PanelToolsItem[],\n  open: boolean,\n  activeTool: PanelToolsToolId | '',\n): { open: boolean; activeTool: PanelToolsToolId | ''; removedTool: PanelToolsToolId | '' } {\n  if (!activeTool || items.some(item => item.id === activeTool)) {\n    return { open, activeTool, removedTool: '' };\n  }\n  return { open: false, activeTool: '', removedTool: activeTool };\n}\n\nexport function shouldResyncPanelToolsItems(\n  prev: PanelToolsItem[],\n  next: PanelToolsItem[],\n): boolean {\n  if (prev.length !== next.length) return true;\n  return next.some((item, index) => {\n    const prior = prev[index];\n    if (!prior) return true;\n    return (\n      prior.id !== item.id ||\n      prior.icon !== item.icon ||\n      prior.selected !== item.selected ||\n      prior.dot !== item.dot ||\n      prior.isInactive !== item.isInactive ||\n      prior.ariaLabel !== item.ariaLabel\n    );\n  });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\nexport interface PanelToolsTransitionStyle {\n  transitionProperty: string;\n  transitionDuration: string;\n  transitionDelay: string;\n}\n\n/** Maximum computed time for the drawer's max-width transition, including delay. */\nexport function panelToolsDrawerTransitionMs(style: PanelToolsTransitionStyle): number {\n  const properties = style.transitionProperty.split(',').map(item => item.trim());\n  const durations = style.transitionDuration.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n  const delays = style.transitionDelay.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n\n  return properties.reduce((max, property, index) => {\n    if (property !== 'all' && property !== 'max-width') return max;\n    const duration = durations[index % durations.length] ?? 0;\n    const delay = delays[index % delays.length] ?? 0;\n    return Math.max(max, duration + delay, 0);\n  }, 0);\n}\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(\n    --ds-shell-panel-tools-width,\n    var(--dimension-panel-width-sm)\n  );\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__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in-out, ease);\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 — AppShell supplies 400px desktop / 300px tablet tokens. */\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:not([gradient-preset='none'])) .panel-tools__drawer-surface,\n:host-context(ds-app-shell:not([gradient-preset='none'])) .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/*\n * Drawer title — match rail action height (size-400) and BarNav heading inset.\n * Use `ds-text.` so scoped specificity beats Text's `:host(.ds-text--inline-box)`\n * (class-only `.panel-tools__title` ties and loses when Text CSS loads later).\n */\nds-text.panel-tools__title {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/*\n * Fade title + slot body with the drawer slide (same dur/easing).\n * Header border stays opaque — only inner content opacity animates.\n */\nds-text.panel-tools__title,\n.panel-tools__body {\n  opacity: 0;\n  transition: none;\n}\n\n:host(.panel-tools--ready) ds-text.panel-tools__title,\n:host(.panel-tools--ready) .panel-tools__body {\n  transition: opacity var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in-out, ease);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) ds-text.panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__body {\n  transition: opacity var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) ds-text.panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__body {\n  transition: opacity var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) ds-text.panel-tools__title,\n:host(.panel-tools--open) .panel-tools__body {\n  opacity: 1;\n}\n\n.panel-tools__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n  display: none;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  padding: var(--dimension-space-200);\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n  margin: 0;\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n  display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n  flex: 0 0 var(--_panel-tools-rail-width);\n  width: var(--_panel-tools-rail-width);\n  min-width: var(--_panel-tools-rail-width);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  border-left: var(--_panel-tools-border);\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n  display: none;\n}\n\n/* Flush to the bottom of the rail — mirrors Search header pin. */\n.panel-tools__rail-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: auto;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n.panel-tools__rail-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--dimension-size-400);\n  flex-shrink: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer,\n  :host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer,\n  :host(.panel-tools--ready.panel-tools--motion-opening) ds-text.panel-tools__title,\n  :host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__body,\n  :host(.panel-tools--ready.panel-tools--motion-closing) ds-text.panel-tools__title,\n  :host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__body {\n    transition: none;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport {\n  PANEL_TOOLS_FOOTER_TOOL_ID,\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsItems,\n  parsePanelToolsItems,\n  panelToolsDrawerResting,\n  panelToolsDrawerTransitionMs,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  scoped: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: 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  private transitionGeneration = 0;\n  private transitionFallbackTimer: number | null = null;\n  /** Ignores the old transition's terminal event when reversing direction. */\n  private ignoreReplacementTerminal = false;\n\n  private get railItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    const railItems = orderPanelToolsItems(this.railItems);\n    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n    const bodyItems = railItems.filter(\n      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n    );\n    const ordered: PanelToolsItem[] = [];\n    if (headerItem) ordered.push(headerItem);\n    ordered.push(...bodyItems);\n    if (footerItem) ordered.push(footerItem);\n    return ordered;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.el.removeEventListener('transitioncancel', this.handleTransitionEnd);\n    this.clearTransitionCompletion();\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    this.el.addEventListener('transitioncancel', this.handleTransitionEnd);\n  }\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.startDrawerTransition(isOpen ? 'opening' : 'closing');\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch { /* localStorage unavailable */ }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try { localStorage.setItem(this.storageKey, this.activeTool); } catch { /* unavailable */ }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try { localStorage.removeItem(this.storageKey); } catch { /* unavailable */ }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private startDrawerTransition(phase: 'opening' | 'closing') {\n    const drawer = this.el.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    const widthBefore = drawer?.getBoundingClientRect().width ?? 0;\n    if (this.motion !== 'idle') {\n      this.finishDrawerTransition();\n      this.ignoreReplacementTerminal = true;\n    }\n    this.motion = phase;\n    this.dsChromeTransitionStart.emit({ source: 'panel-tools', phase });\n    const generation = ++this.transitionGeneration;\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.transitionGeneration || this.motion !== phase) return;\n        if (!drawer) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const widthAfter = drawer.getBoundingClientRect().width;\n        if (Math.abs(widthAfter - widthBefore) < 1) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const fallbackMs = panelToolsDrawerTransitionMs(getComputedStyle(drawer));\n        if (fallbackMs <= 0) {\n          this.finishDrawerTransition();\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishDrawerTransition();\n        }, fallbackMs);\n      });\n    });\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    if (this.ignoreReplacementTerminal) {\n      this.ignoreReplacementTerminal = false;\n      return;\n    }\n    this.finishDrawerTransition();\n  };\n\n  private finishDrawerTransition() {\n    const wasTransitioning = this.motion !== 'idle';\n    this.clearTransitionCompletion();\n    if (!wasTransitioning) return;\n    this.ignoreReplacementTerminal = false;\n    this.motion = 'idle';\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  }\n\n  private clearTransitionCompletion() {\n    this.transitionGeneration += 1;\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\n  }\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.motion === 'closing';\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={PANEL_TOOLS_SHORTCUTS[item.id]}\n        side=\"left\"\n        size=\"sm\"\n      >\n        <ds-button-unfilled variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => { this.rovingIndex = index; }}\n          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const orderedRailItems = this.orderedRailItems;\n    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n    const bodyItems = orderedRailItems.filter(\n      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n    );\n    const footerIndex = footerItem\n      ? (headerItem ? 1 : 0) + bodyItems.length\n      : -1;\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n        }}\n        role=\"complementary\"\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerItem ? (\n              <div class=\"panel-tools__rail-header\">\n                {this.renderRailAction(headerItem, 0)}\n              </div>\n            ) : null}\n            <div class=\"panel-tools__rail-body\">\n              {bodyItems.map((item, bodyIdx) =>\n                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n              )}\n            </div>\n            {footerItem ? (\n              <div class=\"panel-tools__rail-footer\">\n                {this.renderRailAction(footerItem, footerIndex)}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              <header class=\"panel-tools__header\">\n                <ds-text\n                  class=\"panel-tools__title\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  emphasis\n                  color=\"primary\"\n                  wrap=\"nowrap\"\n                >\n                  {headerLabel}\n                </ds-text>\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                  }}\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                  }}\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                  }}\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                  }}\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                  }}\n                  hidden={!this.isViewActive('agents')}\n                >\n                  <slot name=\"agents\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('help'),\n                  }}\n                  hidden={!this.isViewActive('help')}\n                >\n                  <slot name=\"help\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["PANEL_TOOLS_TOOL_IDS","PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_FOOTER_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","help","PANEL_TOOLS_SHORTCUTS","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","orderPanelToolsItems","firstById","Map","item","has","id","set","flatMap","get","isPanelToolsToolId","value","includes","reconcilePanelToolsAvailability","open","activeTool","some","removedTool","panelToolsDrawerTransitionMs","style","properties","transitionProperty","split","map","trim","durations","transitionDuration","parseCssTimeMs","delays","transitionDelay","reduce","max","property","index","duration","length","delay","Math","panelToolsDrawerResting","motion","panelToolsDrawerAtTerminal","width","targetWidth","resolvePanelToolActivation","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","presentation","fullscreenHeaderMode","toolsLabel","toolShortcutsLabel","headers","headersJson","storageKey","drawerSurfaceRetained","readyForMotion","presentationMotionSuppressed","rovingIndex","fullViewToolIds","motionEnableGeneration","presentationMotionGeneration","transitionGeneration","transitionFallbackTimer","ignoreReplacementTerminal","focusBeforeFullscreen","fullViewObserver","handleComposedHeaderAction","event","detail","stopPropagation","dsHeaderAction","emit","tool","handleTransitionEnd","drawer","el","querySelector","target","propertyName","type","drawerTransitionAtTerminal","finishDrawerTransition","handleToolChange","next","dsToolChange","handleRailKeyDown","e","orderedRailItems","key","preventDefault","focusRailAt","railItems","headerItem","find","footerItem","bodyItems","filter","ordered","push","disconnectedCallback","removeEventListener","clearTransitionCompletion","disconnect","presentationChanged","previous","presentationGeneration","requestAnimationFrame","document","activeElement","fallbackActionId","activeHeader","actions","async","isConnected","focus","preventScroll","focusRestored","contains","focusHeaderAction","dsPresentationChange","handleFullscreenEscape","deferMotionEnable","generation","connectedCallback","addEventListener","componentWillLoad","restoreLastActiveTool","openChanged","isOpen","wasOpen","undefined","startDrawerTransition","activeToolChanged","persistLastActiveTool","storageKeyChanged","componentDidLoad","syncFullViewTools","MutationObserver","observe","childList","attributes","attributeFilter","itemsChanged","reconcileActiveTool","stored","localStorage","getItem","setItem","clearPersistedTool","removeItem","phase","dsChromeTransitionStart","source","fallbackMs","getComputedStyle","window","setTimeout","getBoundingClientRect","surface","completedPhase","wasTransitioning","dsChromeTransitionEnd","clearTimeout","isRailSelected","isDrawerPresent","isViewActive","hasFullView","ids","Boolean","join","headerLabel","resolvedHeaders","Object","keys","parsed","JSON","parse","Array","isArray","activateTool","entry","isInactive","closeDrawer","action","CSS","escape","setFocus","bounded","min","from","querySelectorAll","renderRailAction","label","ariaLabel","h","shortcutKey","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","header","headerTitle","title","headerActions","footerIndex","showDrawerChrome","drawerResting","activeFullView","toolIds","Host","role","bodyIdx","inert","heading","showBack","backIcon","backAriaLabel","showMenu","ref","element","toolHeader","onDsBack","dsHeaderBack","hidden","active","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' | 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n  'help',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\n/** Rail footer slot — flush to the bottom of the tools column. */\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n  help: 'Help & Support',\n};\n\nexport const PANEL_TOOLS_SHORTCUTS: Partial<Record<PanelToolsToolId, string>> = {\n  search: 'K',\n  agents: 'A',\n  messages: 'M',\n  stacks: 'S',\n  activity: 'N',\n  help: '?',\n};\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n\nexport interface PanelToolsHeaderAction {\n  id: string;\n  icon: string;\n  ariaLabel: string;\n  triggerId?: string;\n  controls?: string;\n  expanded?: boolean;\n  haspopup?: 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';\n  pressed?: boolean;\n  isInactive?: boolean;\n}\n\nexport interface PanelToolsHeaderConfig {\n  title?: string;\n  showBack?: boolean;\n  backIcon?: string;\n  backAriaLabel?: string;\n  actions?: PanelToolsHeaderAction[];\n}\n\n/** Per-tool header state. The application replaces the object when a tool changes depth or actions. */\nexport type PanelToolsHeaders = Partial<Record<PanelToolsToolId, PanelToolsHeaderConfig>>;\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport { parseCssTimeMs } from '../../utils/resolve-css-time-ms';\nimport {\n  PANEL_TOOLS_TOOL_IDS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\n\nexport function parsePanelToolsItems(items: PanelToolsItem[], itemsJson: string): PanelToolsItem[] {\n  if (itemsJson) {\n    return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n  }\n  return items ?? [];\n}\n\nexport function orderPanelToolsItems(items: PanelToolsItem[]): PanelToolsItem[] {\n  const firstById = new Map<PanelToolsToolId, PanelToolsItem>();\n  for (const item of items) {\n    if (!firstById.has(item.id)) firstById.set(item.id, item);\n  }\n  return PANEL_TOOLS_TOOL_IDS.flatMap(id => {\n    const item = firstById.get(id);\n    return item ? [item] : [];\n  });\n}\n\nexport function isPanelToolsToolId(value: string | null): value is PanelToolsToolId {\n  return value !== null && PANEL_TOOLS_TOOL_IDS.includes(value as PanelToolsToolId);\n}\n\nexport function reconcilePanelToolsAvailability(\n  items: PanelToolsItem[],\n  open: boolean,\n  activeTool: PanelToolsToolId | ''\n): { open: boolean; activeTool: PanelToolsToolId | ''; removedTool: PanelToolsToolId | '' } {\n  if (!activeTool || items.some(item => item.id === activeTool)) {\n    return { open, activeTool, removedTool: '' };\n  }\n  return { open: false, activeTool: '', removedTool: activeTool };\n}\n\nexport function shouldResyncPanelToolsItems(\n  prev: PanelToolsItem[],\n  next: PanelToolsItem[]\n): boolean {\n  if (prev.length !== next.length) return true;\n  return next.some((item, index) => {\n    const prior = prev[index];\n    if (!prior) return true;\n    return (\n      prior.id !== item.id ||\n      prior.icon !== item.icon ||\n      prior.selected !== item.selected ||\n      prior.dot !== item.dot ||\n      prior.isInactive !== item.isInactive ||\n      prior.ariaLabel !== item.ariaLabel\n    );\n  });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\nexport interface PanelToolsTransitionStyle {\n  transitionProperty: string;\n  transitionDuration: string;\n  transitionDelay: string;\n}\n\n/** Maximum computed time for the drawer's max-width transition, including delay. */\nexport function panelToolsDrawerTransitionMs(style: PanelToolsTransitionStyle): number {\n  const properties = style.transitionProperty.split(',').map(item => item.trim());\n  const durations = style.transitionDuration.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n  const delays = style.transitionDelay.split(',').map(item => parseCssTimeMs(item.trim(), 0));\n\n  return properties.reduce((max, property, index) => {\n    if (property !== 'all' && property !== 'max-width') return max;\n    const duration = durations[index % durations.length] ?? 0;\n    const delay = delays[index % delays.length] ?? 0;\n    return Math.max(max, duration + delay, 0);\n  }, 0);\n}\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/** True only when the animated clip has reached the terminal width for its motion phase. */\nexport function panelToolsDrawerAtTerminal(\n  width: number,\n  targetWidth: number,\n  motion: PanelToolsMotion\n): boolean {\n  if (motion === 'closing') return width <= 0.5;\n  if (motion === 'opening') return targetWidth > 0 && width >= targetWidth - 0.5;\n  return true;\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","@import '../../utils/control-density.css';\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(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));\n  --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\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__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in-out, ease);\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 — AppShell supplies the standard 300px tools width. */\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: transparent;\n}\n\n.panel-tools__full-views,\n.panel-tools__full-view {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.panel-tools__full-view {\n  height: 100%;\n}\n\n.panel-tools__full-view {\n  display: none;\n}\n.panel-tools__full-view--active {\n  display: block;\n}\n\n:host([presentation='fullscreen']) {\n  height: 100vh;\n  inset: 0;\n  position: fixed;\n  width: 100vw;\n  z-index: var(--dimension-z-index-modal);\n}\n\n:host([presentation='fullscreen']) .panel-tools__rail {\n  display: none;\n}\n:host([presentation='fullscreen']) .panel-tools__drawer {\n  max-width: 100vw;\n  transition: none;\n  width: 100vw;\n}\n:host([presentation='fullscreen']) .panel-tools__drawer--visible {\n  border-left: none;\n}\n:host([presentation='fullscreen']) .panel-tools__drawer-surface {\n  background-color: transparent;\n  width: 100vw;\n}\n\n:host(.panel-tools--presentation-snap) .panel-tools__drawer {\n  transition: none;\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: transparent;\n}\n\n.panel-tools__rail-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n  display: none;\n}\n\n/* Flush to the bottom of the rail — mirrors Search header pin. */\n.panel-tools__rail-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: auto;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n.panel-tools__rail-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--ds-control-height);\n  flex-shrink: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer,\n  :host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  Method,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../shell/chrome-transition';\nimport {\n  PANEL_TOOLS_FOOTER_TOOL_ID,\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsHeaderAction,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsItems,\n  panelToolsDrawerAtTerminal,\n  parsePanelToolsItems,\n  panelToolsDrawerResting,\n  panelToolsDrawerTransitionMs,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} 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  /** Drawer presentation or viewport-covering presentation for the active tool. */\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n\n  /** Let a fullscreen product supply independent master/detail headers inside its view. */\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n\n  /** Active header state per tool. Replace the object when title, depth, or actions change. */\n  @Prop() headers: PanelToolsHeaders = {};\n\n  /** JSON fallback for `headers`. The `headers` property takes precedence when non-empty. */\n  @Prop({ attribute: 'headers-json' }) headersJson: string = '';\n\n  /**\n   * Optional localStorage key for the last active tool. The drawer always starts\n   * closed; only the tool identity is restored for continuity within this browser.\n   */\n  @Prop({ attribute: 'storage-key' }) storageKey: 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  /** Emitted when fullscreen changes, including Escape-initiated exits. */\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n\n  /** Requests navigation to the active tool's parent view. */\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n\n  /** Requests one application-owned action from the active tool header. */\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\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  /** Keeps header and slotted content painted until the closing clip transition completes. */\n  @State() private drawerSurfaceRetained = false;\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  /** Fullscreen presentation changes snap without borrowing drawer width motion. */\n  @State() private presentationMotionSuppressed = false;\n\n  @State() private rovingIndex = 0;\n  @State() private fullViewToolIds: PanelToolsToolId[] = [];\n\n  private motionEnableGeneration = 0;\n  private presentationMotionGeneration = 0;\n  private transitionGeneration = 0;\n  private transitionFallbackTimer: number | null = null;\n  /** Ignores the old transition's terminal event when reversing direction. */\n  private ignoreReplacementTerminal = false;\n  private focusBeforeFullscreen: HTMLElement | null = null;\n  private fullViewObserver: MutationObserver | null = null;\n\n  private get railItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    const railItems = orderPanelToolsItems(this.railItems);\n    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n    const bodyItems = railItems.filter(\n      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID\n    );\n    const ordered: PanelToolsItem[] = [];\n    if (headerItem) ordered.push(headerItem);\n    ordered.push(...bodyItems);\n    if (footerItem) ordered.push(footerItem);\n    return ordered;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.el.removeEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.removeEventListener('dsAction', this.handleComposedHeaderAction);\n    this.clearTransitionCompletion();\n    this.motionEnableGeneration += 1;\n    this.fullViewObserver?.disconnect();\n    this.fullViewObserver = null;\n  }\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous?: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n    const presentationGeneration = ++this.presentationMotionGeneration;\n    this.presentationMotionSuppressed = true;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (presentationGeneration !== this.presentationMotionGeneration) return;\n        this.presentationMotionSuppressed = false;\n      });\n    });\n    if (next === 'fullscreen') {\n      this.focusBeforeFullscreen =\n        document.activeElement instanceof HTMLElement ? document.activeElement : null;\n      this.open = true;\n    } else if (previous === 'fullscreen') {\n      const focusBeforeFullscreen = this.focusBeforeFullscreen;\n      const fallbackActionId = this.activeHeader().actions?.[0]?.id;\n      requestAnimationFrame(async () => {\n        if (focusBeforeFullscreen?.isConnected) {\n          focusBeforeFullscreen.focus({ preventScroll: true });\n        }\n        const focusRestored = focusBeforeFullscreen\n          ? document.activeElement === focusBeforeFullscreen ||\n            focusBeforeFullscreen.contains(document.activeElement)\n          : false;\n        if (!focusRestored && fallbackActionId) await this.focusHeaderAction(fallbackActionId);\n        this.focusBeforeFullscreen = null;\n      });\n    }\n    this.dsPresentationChange.emit({ presentation: next });\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleFullscreenEscape(event: KeyboardEvent) {\n    if (this.presentation !== 'fullscreen' || event.key !== 'Escape') return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.presentation = 'drawer';\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    this.el.addEventListener('transitioncancel', this.handleTransitionEnd);\n    this.el.addEventListener('dsAction', this.handleComposedHeaderAction);\n  }\n\n  private handleComposedHeaderAction = (event: Event) => {\n    const detail = (event as CustomEvent<{ id?: string }>).detail;\n    if (!this.activeTool || !detail?.id) return;\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool: this.activeTool, id: detail.id });\n  };\n\n  componentWillLoad() {\n    this.restoreLastActiveTool();\n    this.drawerSurfaceRetained = this.open;\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (isOpen) this.drawerSurfaceRetained = true;\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.startDrawerTransition(isOpen ? 'opening' : 'closing');\n    } else if (!isOpen) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.persistLastActiveTool();\n    this.deferMotionEnable();\n  }\n\n  @Watch('storageKey')\n  storageKeyChanged() {\n    this.restoreLastActiveTool();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n    this.syncFullViewTools();\n    this.fullViewObserver = new MutationObserver(() => this.syncFullViewTools());\n    this.fullViewObserver.observe(this.el, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.reconcileActiveTool();\n    this.deferMotionEnable();\n  }\n\n  private restoreLastActiveTool() {\n    if (!this.storageKey || this.activeTool) return;\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      if (isPanelToolsToolId(stored)) this.activeTool = stored;\n    } catch {\n      /* localStorage unavailable */\n    }\n  }\n\n  private persistLastActiveTool() {\n    if (!this.storageKey || !this.activeTool) return;\n    try {\n      localStorage.setItem(this.storageKey, this.activeTool);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private clearPersistedTool() {\n    if (!this.storageKey) return;\n    try {\n      localStorage.removeItem(this.storageKey);\n    } catch {\n      /* unavailable */\n    }\n  }\n\n  private reconcileActiveTool() {\n    const next = reconcilePanelToolsAvailability(this.railItems, this.open, this.activeTool);\n    if (!next.removedTool) return;\n    this.clearPersistedTool();\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id: next.removedTool, selected: false });\n  }\n\n  private startDrawerTransition(phase: 'opening' | 'closing') {\n    const drawer = this.el.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (this.motion !== 'idle') {\n      this.finishDrawerTransition();\n      this.ignoreReplacementTerminal = true;\n    }\n    this.motion = phase;\n    this.dsChromeTransitionStart.emit({ source: 'panel-tools', phase });\n    const generation = ++this.transitionGeneration;\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (generation !== this.transitionGeneration || this.motion !== phase) return;\n        if (!drawer) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        if (this.drawerTransitionAtTerminal(drawer, phase)) {\n          this.finishDrawerTransition();\n          return;\n        }\n\n        const fallbackMs = panelToolsDrawerTransitionMs(getComputedStyle(drawer));\n        if (fallbackMs <= 0) {\n          this.finishDrawerTransition();\n          return;\n        }\n        this.transitionFallbackTimer = window.setTimeout(() => {\n          this.finishDrawerTransition();\n        }, fallbackMs);\n      });\n    });\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const drawer = this.el.querySelector('.panel-tools__drawer') as HTMLElement | null;\n    if (event.target !== drawer) return;\n    if (event.propertyName !== 'max-width') return;\n    if (this.ignoreReplacementTerminal) {\n      this.ignoreReplacementTerminal = false;\n      return;\n    }\n    // Changing from the neutral transition recipe to the direction-specific\n    // easing can cancel the transition that the reflected `open` class began.\n    // The replacement transition and its watchdog still own completion; ending\n    // motion here would hide the fixed-width tool surface while it is visible.\n    if (event.type === 'transitioncancel') return;\n    if (drawer && !this.drawerTransitionAtTerminal(drawer, this.motion)) return;\n    this.finishDrawerTransition();\n  };\n\n  private drawerTransitionAtTerminal(\n    drawer: HTMLElement,\n    phase: 'opening' | 'closing' | 'idle'\n  ): boolean {\n    const width = drawer.getBoundingClientRect().width;\n    const surface = drawer.querySelector('.panel-tools__drawer-surface') as HTMLElement | null;\n    const targetWidth = surface?.getBoundingClientRect().width ?? 0;\n    return panelToolsDrawerAtTerminal(width, targetWidth, phase);\n  }\n\n  private finishDrawerTransition() {\n    const completedPhase = this.motion;\n    const wasTransitioning = completedPhase !== 'idle';\n    this.clearTransitionCompletion();\n    if (!wasTransitioning) return;\n    this.ignoreReplacementTerminal = false;\n    this.motion = 'idle';\n    if (completedPhase === 'closing' && !this.open) {\n      this.drawerSurfaceRetained = false;\n    }\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  }\n\n  private clearTransitionCompletion() {\n    this.transitionGeneration += 1;\n    if (this.transitionFallbackTimer !== null) {\n      window.clearTimeout(this.transitionFallbackTimer);\n      this.transitionFallbackTimer = null;\n    }\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.drawerSurfaceRetained;\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private hasFullView(id: PanelToolsToolId): boolean {\n    return this.fullViewToolIds.includes(id);\n  }\n\n  private syncFullViewTools() {\n    const ids: PanelToolsToolId[] = ['search', 'messages', 'stacks', 'activity', 'agents', 'help'];\n    const next = ids.filter(id => Boolean(this.el.querySelector(`[slot=\"${id}-view\"]`)));\n    if (next.join('|') !== this.fullViewToolIds.join('|')) this.fullViewToolIds = next;\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 resolvedHeaders(): PanelToolsHeaders {\n    if (Object.keys(this.headers).length) return this.headers;\n    if (!this.headersJson.trim()) return {};\n    try {\n      const parsed = JSON.parse(this.headersJson);\n      return parsed && typeof parsed === 'object' && !Array.isArray(parsed)\n        ? (parsed as PanelToolsHeaders)\n        : {};\n    } catch {\n      return {};\n    }\n  }\n\n  private activeHeader(): PanelToolsHeaderConfig {\n    if (!this.activeTool) return {};\n    return this.resolvedHeaders()[this.activeTool] ?? {};\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  /** Focus an active tool-header action by its application-owned id. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon')\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n    return (\n      <ds-tooltip\n        key={item.id}\n        label={label}\n        shortcutKey={PANEL_TOOLS_SHORTCUTS[item.id]}\n        side=\"left\"\n        size=\"sm\"\n      >\n        <ds-button-unfilled\n          variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => {\n            this.rovingIndex = index;\n          }}\n          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const header = this.activeHeader();\n    const headerTitle = header.title?.trim() || headerLabel;\n    const headerActions = header.actions ?? [];\n    const orderedRailItems = this.orderedRailItems;\n    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n    const bodyItems = orderedRailItems.filter(\n      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID\n    );\n    const footerIndex = footerItem ? (headerItem ? 1 : 0) + bodyItems.length : -1;\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n    const activeFullView = Boolean(\n      showDrawerChrome && this.activeTool && this.hasFullView(this.activeTool)\n    );\n    const toolIds: PanelToolsToolId[] = [\n      'search',\n      'messages',\n      'stacks',\n      'activity',\n      'agents',\n      'help',\n    ];\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          'panel-tools--fullscreen': this.presentation === 'fullscreen',\n          'panel-tools--presentation-snap': this.presentationMotionSuppressed,\n        }}\n        role={this.presentation === 'fullscreen' ? 'dialog' : 'complementary'}\n        aria-modal={this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={this.toolsLabel}\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label={this.toolShortcutsLabel}>\n            {headerItem ? (\n              <div class=\"panel-tools__rail-header\">{this.renderRailAction(headerItem, 0)}</div>\n            ) : null}\n            <div class=\"panel-tools__rail-body\">\n              {bodyItems.map((item, bodyIdx) =>\n                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx)\n              )}\n            </div>\n            {footerItem ? (\n              <div class=\"panel-tools__rail-footer\">\n                {this.renderRailAction(footerItem, footerIndex)}\n              </div>\n            ) : null}\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              {this.presentation !== 'fullscreen' || this.fullscreenHeaderMode === 'shared' ? (\n                <ds-panel-tool-header\n                  class=\"panel-tools__header\"\n                  heading={headerTitle}\n                  showBack={header.showBack ?? false}\n                  backIcon={header.backIcon || 'ChevronLeft'}\n                  backAriaLabel={header.backAriaLabel || 'Back'}\n                  showMenu={false}\n                  ref={element => {\n                    const toolHeader = element as\n                      | (HTMLDsPanelToolHeaderElement & {\n                          actions: PanelToolsHeaderAction[];\n                        })\n                      | undefined;\n                    if (toolHeader) toolHeader.actions = headerActions;\n                  }}\n                  onDsBack={() => {\n                    if (this.activeTool) this.dsHeaderBack.emit({ tool: this.activeTool });\n                  }}\n                />\n              ) : null}\n              <div class=\"panel-tools__body\" hidden={activeFullView}>\n                {toolIds.map(id => {\n                  const active = this.isViewActive(id);\n                  return (\n                    <div\n                      class={{\n                        'panel-tools__view': true,\n                        'panel-tools__view--active': active,\n                      }}\n                      hidden={!active}\n                    >\n                      <slot name={id} />\n                    </div>\n                  );\n                })}\n              </div>\n              <div class=\"panel-tools__full-views\" hidden={!activeFullView}>\n                {toolIds.map(id => (\n                  <div\n                    class={{\n                      'panel-tools__full-view': true,\n                      'panel-tools__full-view--active':\n                        this.isViewActive(id) && this.hasFullView(id),\n                    }}\n                    hidden={!(this.isViewActive(id) && this.hasFullView(id))}\n                  >\n                    <slot name={`${id}-view`} />\n                  </div>\n                ))}\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.js

@@ -1,2 +1,2 @@
-import{p as i,H as o,c as r,h as s,a as n,t}from"./index.js";import{d as e}from"./p-CbS_WWs2.js";const a=()=>`.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.sc-ds-radio-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-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio: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-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{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-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio: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-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:pointer;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const o=this.required&&!i&&this.value.length===0;this.internals.setValidity(o?{valueMissing:true}:{},o?this.requiredMessage:"")}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let n=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();n=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();n=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();n=0;break;case"End":i.preventDefault();n=o.length-1;break}if(n>=0){o[n].focus();const i=o[n].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&this.value.length===0;const r=this.options.findIndex((i=>i.value===this.value));const t=this.options.findIndex((o=>!i&&!o.isInactive));const e=r>=0&&!i&&!this.options[r]?.isInactive?r:t;return s(n,{key:"1aa529c5e7d5766719c77fa93fd9961fe0484956",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((o,r)=>{const n=i||!!o.isInactive;const t=o.value===this.value;const a=n?-1:r===e?0:-1;return s("div",{key:o.value,role:"radio","aria-checked":String(t),"aria-disabled":n?"true":undefined,tabIndex:a,"data-radio-item":true,"data-value":o.value,"data-inactive":n||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":n,"ds-focus-ring-inset":!n,"ds-interaction-fill":!n},onClick:()=>!n&&this.selectItem(o.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!n){i.preventDefault();this.selectItem(o.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":t}},t&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:d[this.size]},o.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function l(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(t(i))){customElements.define(t(i),c)}break;case"ds-text":if(!customElements.get(t(i))){e()}break}}))}l();const v=c;const f=l;export{v as DsRadio,f as defineCustomElement};
+import{p as i,H as o,c as r,h as s,a as n,t}from"./index.js";import{d as e}from"./p-BSOZXagj.js";const a=()=>`.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.sc-ds-radio-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-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio: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-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{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-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio: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-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-radio-h,.ds-interaction-fill.sc-ds-radio{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:pointer;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const o=this.required&&!i&&this.value.length===0;this.internals.setValidity(o?{valueMissing:true}:{},o?this.requiredMessage:"")}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let n=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();n=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();n=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();n=0;break;case"End":i.preventDefault();n=o.length-1;break}if(n>=0){o[n].focus();const i=o[n].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&this.value.length===0;const r=this.options.findIndex((i=>i.value===this.value));const t=this.options.findIndex((o=>!i&&!o.isInactive));const e=r>=0&&!i&&!this.options[r]?.isInactive?r:t;return s(n,{key:"b80f899dd2f2c37c94107b0030ef12357d982729",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((o,r)=>{const n=i||!!o.isInactive;const t=o.value===this.value;const a=n?-1:r===e?0:-1;return s("div",{key:o.value,role:"radio","aria-checked":String(t),"aria-disabled":n?"true":undefined,tabIndex:a,"data-radio-item":true,"data-value":o.value,"data-inactive":n||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":n,"ds-focus-ring-inset":!n,"ds-interaction-fill":!n},onClick:()=>!n&&this.selectItem(o.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!n){i.preventDefault();this.selectItem(o.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":t}},t&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:d[this.size]},o.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function l(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(t(i))){customElements.define(t(i),c)}break;case"ds-text":if(!customElements.get(t(i))){e()}break}}))}l();const v=c;const f=l;export{v as DsRadio,f as defineCustomElement};
 //# sourceMappingURL=ds-radio.js.map