@ds-mo/ui 3.3.0 → 4.1.0

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 i}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-DEgY_Lnb.js";import{d as r}from"./p-DHjjwgku.js";import{d}from"./p-9Qu1ls2y.js";import{d as c}from"./p-BOQRM49Q.js";import{d as p}from"./p-DI8rHm9u.js";const h=["search","agents","messages","stacks","activity","help"];const f="search";const g="help";const u={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 m(e,s){if(s){return n(s,[])}return e??[]}function _(e){const s=new Map;for(const t of e){if(!s.has(t.id))s.set(t.id,t)}return h.flatMap((e=>{const t=s.get(e);return t?[t]:[]}))}function v(e){return e!==null&&h.includes(e)}function y(e,s,t){if(!t||e.some((e=>e.id===t))){return{open:s,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function w(e,s){return!e&&s==="idle"}function x(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const k=()=>`.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.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}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.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}`;const T=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.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=x(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 m(this.items,this.itemsJson)}get orderedRailItems(){const e=_(this.railItems);const s=e.find((e=>e.id===f));const t=e.find((e=>e.id===g));const o=e.filter((e=>e.id!==f&&e.id!==g));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.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)}componentWillLoad(){this.restoreLastActiveTool()}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.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(v(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=y(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})}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 u[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??u[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===f));const i=s.find((e=>e.id===g));const n=s.filter((e=>e.id!==f&&e.id!==g));const l=i?(t?1:0)+n.length:-1;const r=this.isDrawerPresent();const d=w(this.open,this.motion);return o(a,{key:"bc622c7d1a89640492a2a0b8af6a36cdd317bd6f",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:"3d8998d4092f3d7afd0f18e2ce7fb7f9a543ba24",class:"panel-tools__layout"},o("nav",{key:"14e8f172c024794110b3121b39463dad18f7f3ff",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t,0)):null,o("div",{key:"d2fb3f4861d4e0dce409445321d3454782a1fefb",class:"panel-tools__rail-body"},n.map(((e,s)=>this.renderRailAction(e,t?s+1:s)))),i?o("div",{class:"panel-tools__rail-footer"},this.renderRailAction(i,l)):null),o("div",{key:"78791330056be1bbd85a0e7982e70dccfe1c2b84",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":r},"aria-hidden":r?null:"true",inert:r?undefined:true},o("div",{key:"c43059deb82ef2d5a47ae6af561e8f8b045462d3",class:"panel-tools__drawer-surface"},o("header",{key:"9ef751e7aa6a5dc960acede5d95a44b333b893f7",class:"panel-tools__header"},o("ds-text",{key:"429adbc38ffe20bf5574f398de845f6f53a65782",class:"panel-tools__title",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},e)),o("div",{key:"9a08e03155dc34c27e3029467491ff6884c8a749",class:"panel-tools__body"},o("div",{key:"832ce9f7ba05a9392a8efdef0f23e1ddd617ca20",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search")},hidden:!this.isViewActive("search")},o("slot",{key:"3044318c7efbc364bab85b5fe8142fa6e1801821",name:"search"})),o("div",{key:"5f37c7018619a268baf80c0b779c9a0dbb54ec61",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages")},hidden:!this.isViewActive("messages")},o("slot",{key:"91d8ef3c24d06b17805289aba4343ef85bd89644",name:"messages"})),o("div",{key:"f6eb9f300e92bdc577ba5c881e255825574969be",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks")},hidden:!this.isViewActive("stacks")},o("slot",{key:"1cd01901a4a168edb4ebd29afc99dcc2d16dc7ab",name:"stacks"})),o("div",{key:"c52cb74f160e3d52808e4ce02f07898016303fc3",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity")},hidden:!this.isViewActive("activity")},o("slot",{key:"2c196413b27bd9d46575527f3a2a11dc3801ded4",name:"activity"})),o("div",{key:"d508248557e9b1988138208206b0edf62258b2af",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents")},hidden:!this.isViewActive("agents")},o("slot",{key:"dcce07a3efe83c6e75bc1d430dfec10135318dee",name:"agents"})),o("div",{key:"709a131c1e6f61c0f5b07dc4b835bd6dbc03310f",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("help")},hidden:!this.isViewActive("help")},o("slot",{key:"163db81e6ba14dae41c5a8a2ada3977e0d4c6327",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 k()}},[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 z(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),T)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break;case"ds-text":if(!customElements.get(i(e))){c()}break;case"ds-tooltip":if(!customElements.get(i(e))){p()}break}}))}z();const C=T;const A=z;export{C as DsPanelTools,A as defineCustomElement};
+import{p as e,H as t,c as s,h as o,a,t as i}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-CHcS6Z4V.js";import{d as r}from"./p-DO7y9eZQ.js";import{d}from"./p-9Qu1ls2y.js";import{d as c}from"./p-emacH2W5.js";import{d as p}from"./p-D7SoZNpD.js";const h=["search","agents","messages","stacks","activity","help"];const f="search";const g="help";const u={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 m(e,t){if(t){return n(t,[])}return e??[]}function _(e){const t=new Map;for(const s of e){if(!t.has(s.id))t.set(s.id,s)}return h.flatMap((e=>{const s=t.get(e);return s?[s]:[]}))}function v(e){return e!==null&&h.includes(e)}function y(e,t,s){if(!s||e.some((e=>e.id===s))){return{open:t,activeTool:s,removedTool:""}}return{open:false,activeTool:"",removedTool:s}}function w(e,t){return!e&&t==="idle"}function x(e,t,s){if(e&&t===s){return{open:false,activeTool:s,selected:false}}return{open:true,activeTool:s,selected:true}}const k=()=>`.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.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.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}`;const T=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=s(this,"dsToolChange");this.dsChromeTransitionStart=s(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=s(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.storageKey="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const t=x(this.open,this.activeTool,e);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:e,selected:t.selected})};this.handleRailKeyDown=(e,t)=>{const s=this.orderedRailItems;if(!s.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(s[t].id);return}if(e.key==="ArrowDown"){if(t>=s.length-1)return;e.preventDefault();this.focusRailAt(t+1);return}if(e.key==="ArrowUp"){if(t<=0)return;e.preventDefault();this.focusRailAt(t-1)}}}get railItems(){return m(this.items,this.itemsJson)}get orderedRailItems(){const e=_(this.railItems);const t=e.find((e=>e.id===f));const s=e.find((e=>e.id===g));const o=e.filter((e=>e.id!==f&&e.id!==g));const a=[];if(t)a.push(t);a.push(...o);if(s)a.push(s);return a}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}componentWillLoad(){this.restoreLastActiveTool()}openChanged(e,t){if(this.readyForMotion&&t!==undefined&&t!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.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(v(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=y(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})}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 u[this.activeTool]??""}async activateTool(e){const t=this.railItems.find((t=>t.id===e));if(!t||t.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 t=this.orderedRailItems;if(!t.length)return;const s=Math.max(0,Math.min(e,t.length-1));if(s===this.rovingIndex)return;this.rovingIndex=s;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[s]?.focus({preventScroll:true})}renderRailAction(e,t){const s=e.ariaLabel??u[e.id];return o("ds-tooltip",{key:e.id,label:s,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:t===this.rovingIndex?0:-1,"aria-label":s,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=t},onKeyDown:e=>this.handleRailKeyDown(e,t),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const t=this.orderedRailItems;const s=t.find((e=>e.id===f));const i=t.find((e=>e.id===g));const n=t.filter((e=>e.id!==f&&e.id!==g));const l=i?(s?1:0)+n.length:-1;const r=this.isDrawerPresent();const d=w(this.open,this.motion);return o(a,{key:"bc622c7d1a89640492a2a0b8af6a36cdd317bd6f",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:"3d8998d4092f3d7afd0f18e2ce7fb7f9a543ba24",class:"panel-tools__layout"},o("nav",{key:"14e8f172c024794110b3121b39463dad18f7f3ff",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},s?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(s,0)):null,o("div",{key:"d2fb3f4861d4e0dce409445321d3454782a1fefb",class:"panel-tools__rail-body"},n.map(((e,t)=>this.renderRailAction(e,s?t+1:t)))),i?o("div",{class:"panel-tools__rail-footer"},this.renderRailAction(i,l)):null),o("div",{key:"78791330056be1bbd85a0e7982e70dccfe1c2b84",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":r},"aria-hidden":r?null:"true",inert:r?undefined:true},o("div",{key:"c43059deb82ef2d5a47ae6af561e8f8b045462d3",class:"panel-tools__drawer-surface"},o("header",{key:"9ef751e7aa6a5dc960acede5d95a44b333b893f7",class:"panel-tools__header"},o("ds-text",{key:"429adbc38ffe20bf5574f398de845f6f53a65782",class:"panel-tools__title",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},e)),o("div",{key:"9a08e03155dc34c27e3029467491ff6884c8a749",class:"panel-tools__body"},o("div",{key:"832ce9f7ba05a9392a8efdef0f23e1ddd617ca20",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search")},hidden:!this.isViewActive("search")},o("slot",{key:"3044318c7efbc364bab85b5fe8142fa6e1801821",name:"search"})),o("div",{key:"5f37c7018619a268baf80c0b779c9a0dbb54ec61",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages")},hidden:!this.isViewActive("messages")},o("slot",{key:"91d8ef3c24d06b17805289aba4343ef85bd89644",name:"messages"})),o("div",{key:"f6eb9f300e92bdc577ba5c881e255825574969be",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks")},hidden:!this.isViewActive("stacks")},o("slot",{key:"1cd01901a4a168edb4ebd29afc99dcc2d16dc7ab",name:"stacks"})),o("div",{key:"c52cb74f160e3d52808e4ce02f07898016303fc3",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity")},hidden:!this.isViewActive("activity")},o("slot",{key:"2c196413b27bd9d46575527f3a2a11dc3801ded4",name:"activity"})),o("div",{key:"d508248557e9b1988138208206b0edf62258b2af",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents")},hidden:!this.isViewActive("agents")},o("slot",{key:"dcce07a3efe83c6e75bc1d430dfec10135318dee",name:"agents"})),o("div",{key:"709a131c1e6f61c0f5b07dc4b835bd6dbc03310f",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("help")},hidden:!this.isViewActive("help")},o("slot",{key:"163db81e6ba14dae41c5a8a2ada3977e0d4c6327",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 k()}},[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 z(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),T)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break;case"ds-text":if(!customElements.get(i(e))){c()}break;case"ds-tooltip":if(!customElements.get(i(e))){p()}break}}))}z();const C=T;const A=z;export{C as DsPanelTools,A 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","panelToolsDrawerResting","motion","resolvePanelToolActivation","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","toolsLabel","toolShortcutsLabel","storageKey","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","footerItem","bodyItems","filter","ordered","push","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","componentWillLoad","restoreLastActiveTool","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","persistLastActiveTool","storageKeyChanged","componentDidLoad","itemsChanged","reconcileActiveTool","stored","localStorage","getItem","setItem","clearPersistedTool","removeItem","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","Math","max","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","map","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 {\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\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--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[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail {\n  background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  border-bottom: var(--_panel-tools-border);\n  color: var(--color-foreground-primary);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/*\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.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","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n  PANEL_TOOLS_FOOTER_TOOL_ID,\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsItems,\n  parsePanelToolsItems,\n  panelToolsDrawerResting,\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\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.motionEnableGeneration += 1;\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  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.motion = isOpen ? 'opening' : 'closing';\n      this.dsChromeTransitionStart.emit({\n        source: 'panel-tools',\n        phase: isOpen ? 'opening' : 'closing',\n      });\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.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 handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n    if (event.propertyName !== 'max-width') return;\n    this.motion = 'idle';\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  };\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.motion === 'closing';\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n    return (\n      <ds-tooltip\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","panelToolsDrawerResting","motion","resolvePanelToolActivation","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","toolsLabel","toolShortcutsLabel","storageKey","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","footerItem","bodyItems","filter","ordered","push","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","componentWillLoad","restoreLastActiveTool","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","persistLastActiveTool","storageKeyChanged","componentDidLoad","itemsChanged","reconcileActiveTool","stored","localStorage","getItem","setItem","clearPersistedTool","removeItem","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","Math","max","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","map","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 {\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\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--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.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","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n  PANEL_TOOLS_FOOTER_TOOL_ID,\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  PANEL_TOOLS_SHORTCUTS,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport {\n  isPanelToolsToolId,\n  orderPanelToolsItems,\n  parsePanelToolsItems,\n  panelToolsDrawerResting,\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\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.motionEnableGeneration += 1;\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  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.motion = isOpen ? 'opening' : 'closing';\n      this.dsChromeTransitionStart.emit({\n        source: 'panel-tools',\n        phase: isOpen ? 'opening' : 'closing',\n      });\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.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 handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n    if (event.propertyName !== 'max-width') return;\n    this.motion = 'idle';\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  };\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.motion === 'closing';\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n    return (\n      <ds-tooltip\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":[]}

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

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

package/dist/components/ds-select.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as i,h as t,a as o,t as n}from"./index.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as c}from"./p-DolYlDbY.js";import{d as a}from"./p-CTK82RIw.js";import{d}from"./p-Cp86p-11.js";import{d as l}from"./p-BOQRM49Q.js";import{r as h}from"./p-BWUTr_XN.js";import{C as f}from"./p-Cx-ywr1e.js";import{a as u}from"./p-8WTsyLQ9.js";import{c as v}from"./p-DuFm-ieS.js";const g=()=>`.sc-ds-select-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select,.trigger--open.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-select-fg)}`;const m={md:"md",sm:"sm",xs:"xs"};const b=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.ariaLabel=null;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.initialValue="";this.formDisabled=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncFormValue(){const s=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(s?null:this.value);const e=this.required&&!s&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(s){this.value=typeof s==="string"?s:""}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=h(u.space050,u.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||this.disabled||this.formDisabled||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=this.isInactive||this.disabled||this.formDisabled;const e=!this.hasSelection;const i=!e;const n=e?this.placeholder:this.selectedLabel;const r=f[this.size];const c=m[this.size];const a=`ds-control--${this.size}`;const d=!s&&this.activeFill&&(i||this.isOpen);return t(o,{key:"d1bb8d87c222cf87f2167a23974f9638a29b9e7c",class:{"select-host":true,"ds-control-inactive":s,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...v(this.width)}},t("button",{key:"e136da41be27359ed1a897132b99f89d4245cadd",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":d,"trigger--open":this.isOpen,"trigger--bordered":this.hasBorder,"trigger--placeholder":e,"trigger--has-value":i,[a]:true},disabled:s,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},t("ds-text",{key:"f1fda66a9838dd4930b9587d31297a7e19159062",class:"trigger__label ds-interaction-fill__content",as:"span",variant:r,color:"inherit",lineTruncation:1},n),t("span",{key:"2e71a62b22e9f7bf53d7fba2957af83c90b7558c",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},t("ds-icon",{key:"0ca4c47cc7c28fa655bd7c5ba42fbdecda3d4544",name:"ChevronDown",size:c,color:"inherit"}))),t("ds-menu",{key:"5f65cc822970abe74aa46754225e306af9a13aee",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0},{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return g()}},[66,"ds-select",{options:[16],value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0},{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-text"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),b)}break;case"ds-icon":if(!customElements.get(n(s))){r()}break;case"ds-menu":if(!customElements.get(n(s))){c()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){d()}break;case"ds-text":if(!customElements.get(n(s))){l()}break}}))}p();const w=b;const y=p;export{w as DsSelect,y as defineCustomElement};
+import{p as s,H as e,c as i,h as t,a as o,t as n}from"./index.js";import{d as r}from"./p-CHcS6Z4V.js";import{d as c}from"./p-9Qu1ls2y.js";import{d as a}from"./p-BzIYKUGO.js";import{d}from"./p-ORF34W29.js";import{d as l}from"./p-B4gGwfix.js";import{d as h}from"./p-emacH2W5.js";import{r as f}from"./p-BWUTr_XN.js";import{C as u}from"./p-Cx-ywr1e.js";import{T as g}from"./p-drBA73M_.js";import{c as v}from"./p-DuFm-ieS.js";const m=()=>`.sc-ds-select-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select,.trigger--open.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-select-fg)}`;const b={md:"md",sm:"sm",xs:"xs"};const p=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.ariaLabel=null;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.initialValue="";this.formDisabled=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncFormValue(){const s=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(s?null:this.value);const e=this.required&&!s&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(s){this.value=typeof s==="string"?s:""}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=f(g.space050,g.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||this.disabled||this.formDisabled||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=this.isInactive||this.disabled||this.formDisabled;const e=!this.hasSelection;const i=!e;const n=e?this.placeholder:this.selectedLabel;const r=u[this.size];const c=b[this.size];const a=`ds-control--${this.size}`;const d=!s&&this.activeFill&&(i||this.isOpen);return t(o,{key:"d1bb8d87c222cf87f2167a23974f9638a29b9e7c",class:{"select-host":true,"ds-control-inactive":s,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...v(this.width)}},t("button",{key:"e136da41be27359ed1a897132b99f89d4245cadd",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":d,"trigger--open":this.isOpen,"trigger--bordered":this.hasBorder,"trigger--placeholder":e,"trigger--has-value":i,[a]:true},disabled:s,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},t("ds-text",{key:"f1fda66a9838dd4930b9587d31297a7e19159062",class:"trigger__label ds-interaction-fill__content",as:"span",variant:r,color:"inherit",lineTruncation:1},n),t("span",{key:"2e71a62b22e9f7bf53d7fba2957af83c90b7558c",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},t("ds-icon",{key:"0ca4c47cc7c28fa655bd7c5ba42fbdecda3d4544",name:"ChevronDown",size:c,color:"inherit"}))),t("ds-menu",{key:"5f65cc822970abe74aa46754225e306af9a13aee",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0},{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return m()}},[66,"ds-select",{options:[16],value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0},{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function w(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-badge","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-text"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),p)}break;case"ds-badge":if(!customElements.get(n(s))){r()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-menu":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){d()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){l()}break;case"ds-text":if(!customElements.get(n(s))){h()}break}}))}w();const y=p;const k=w;export{y as DsSelect,k as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["selectCss","ICON_SIZE","md","sm","xs","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","required","requiredMessage","placeholder","size","width","isInactive","activeFill","hasBorder","ariaLabel","isOpen","triggerEl","menuEl","openWithFocusVisible","initialValue","formDisabled","handleMenuSelect","e","detail","undefined","String","dsChange","emit","close","handleMenuClose","componentWillLoad","syncFormValue","componentDidLoad","anchor","addEventListener","syncMenuItems","disconnectedCallback","removeEventListener","onIsOpenChange","open","initialFocusVisible","onOptionsChange","onValueChange","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","items","map","opt","label","isSelected","syncMenuLayout","sectionPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","triggerW","offsetWidth","menuWidth","minWidth","alignOffset","opts","focusVisible","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","find","o","hasSelection","some","render","showPlaceholder","hasValue","textVariant","CONTROL_TEXT_VARIANT","iconSize","density","showSelectedFill","h","Host","class","controlWidthClass","ref","el","type","trigger","role","ariaLabelledby","onClick","as","variant","color","lineTruncation","name","side","align"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["/* ==========================================================================\n   Select — unfilled-button chrome trigger + ds-menu dropdown.\n   Density via `.ds-control--md|sm|xs` (control-density.css).\n   ========================================================================== */\n\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  position: relative;\n  /* Idle = secondary. Selected/open: label → primary; chevron stays secondary. */\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n:host(.ds-control-width--hug) .trigger__label {\n  flex: 0 1 auto;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: pointer;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected`).\n     Selected/open: label → primary; chevron stays secondary. */\n}\n\n/* Inset stroke via interaction-fill ::after (same recipe as ButtonUnfilled). */\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--has-value .trigger__label,\n.trigger--open .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Always secondary — only the label promotes on selected/open. */\n  color: var(--ds-select-fg);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport type { MenuItemData } from '../Menu/menu-types';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nexport type SelectSize = 'md' | 'sm' | 'xs';\n\nexport type SelectWidth = ControlWidth;\n\n/** `ds-icon` size matching control-density icon metrics. */\nconst ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in\n * control-density sizes, with `ds-menu` for the option list.\n */\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Array of options. Set via JS property.\n   * @example el.options = [{ label: 'Apple', value: 'apple' }];\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /** Currently selected value. */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop({ reflect: true }) name: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) required: boolean = false;\n\n  @Prop() requiredMessage: string = 'This field is required.';\n\n  /** Placeholder shown when no value is selected. */\n  @Prop() placeholder: string = 'Select';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: SelectSize = 'md';\n\n  /** Width fit — fill the parent (default) or hug content. */\n  @Prop() width: SelectWidth = 'fill';\n\n  /** Disables interaction (25% opacity via ds-control-inactive). */\n  @Prop() isInactive: boolean = false;\n\n  /**\n   * When a value is selected, render the selected interaction fill (same recipe\n   * as unfilled-button `activeFill`). Default `true`. Pass `false` for\n   * foreground-only selection (primary label, no fill).\n   * Selected/open promotes the label to primary; chevron stays secondary.\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on (matches unfilled button). */\n  @Prop() hasBorder: boolean = true;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emits the selected value string. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private isOpen: boolean = false;\n\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  /** True when the open was keyboard-driven — menu shows initial focus ring. */\n  private openWithFocusVisible = false;\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n    }\n    this.menuEl?.addEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.addEventListener('dsClose', this.handleMenuClose);\n    this.syncMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.menuEl?.removeEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.removeEventListener('dsClose', this.handleMenuClose);\n  }\n\n  @Watch('isOpen')\n  onIsOpenChange(open: boolean) {\n    if (!this.menuEl) return;\n    this.menuEl.initialFocusVisible = open && this.openWithFocusVisible;\n    this.menuEl.open = open;\n  }\n\n  @Watch('options')\n  onOptionsChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private handleMenuSelect = (e: Event) => {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.value = String(detail.value);\n      this.dsChange.emit(this.value);\n    }\n    this.close();\n  };\n\n  private handleMenuClose = () => {\n    this.close();\n  };\n\n  private syncMenuItems() {\n    if (!this.menuEl) return;\n    this.menuEl.items = this.options.map(opt => ({\n      label: opt.label,\n      value: opt.value,\n      isSelected: opt.value === this.value,\n    }));\n  }\n\n  /**\n   * Size/place the menu so option labels line up with the select label.\n   * Menu section padding insets items; we expand min-width by that chrome and\n   * shift left by the same amount (`alignOffset`). Menu can grow wider than\n   * the field (left-bottom / `align=\"start\"`) when labels need more room.\n   */\n  private syncMenuLayout() {\n    if (!this.menuEl || !this.triggerEl) return;\n    const sectionPadPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n    const triggerW = this.triggerEl.offsetWidth;\n    // Prefer min-width over fixed width so long options can grow the menu.\n    this.menuEl.menuWidth = '';\n    this.menuEl.minWidth = `${triggerW + sectionPadPx * 2}px`;\n    this.menuEl.alignOffset = -sectionPadPx;\n    this.menuEl.anchor = this.triggerEl;\n  }\n\n  private open(opts: { focusVisible: boolean } = { focusVisible: false }) {\n    if (this.isInactive || this.disabled || this.formDisabled || !this.options.length) return;\n    this.openWithFocusVisible = opts.focusVisible;\n    this.syncMenuLayout();\n    this.syncMenuItems();\n    this.isOpen = true;\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.openWithFocusVisible = false;\n  }\n\n  private toggle(opts: { focusVisible: boolean }) {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open(opts);\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (document.activeElement !== this.triggerEl) return;\n\n    if (!this.isOpen) {\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          this.open({ focusVisible: true });\n          break;\n      }\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      this.triggerEl?.focus();\n    }\n  }\n\n  private get selectedLabel(): string {\n    return this.options.find(o => o.value === this.value)?.label ?? '';\n  }\n\n  private get hasSelection(): boolean {\n    return this.options.some(o => o.value === this.value);\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const hasValue = !showPlaceholder;\n    const label = showPlaceholder ? this.placeholder : this.selectedLabel;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const density = `ds-control--${this.size}`;\n    // Selected fill when a value is set (or while open), gated by `activeFill`.\n    const showSelectedFill =\n      !inactive && this.activeFill && (hasValue || this.isOpen);\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-control-inactive': inactive,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n      >\n        <button\n          ref={el => {\n            this.triggerEl = (el as HTMLButtonElement) ?? null;\n          }}\n          type=\"button\"\n          class={{\n            trigger: true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--selected': showSelectedFill,\n            'trigger--open': this.isOpen,\n            'trigger--bordered': this.hasBorder,\n            'trigger--placeholder': showPlaceholder,\n            'trigger--has-value': hasValue,\n            [density]: true,\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup=\"menu\"\n          aria-expanded={String(this.isOpen)}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          onClick={() => this.toggle({ focusVisible: false })}\n        >\n          <ds-text\n            class=\"trigger__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={textVariant}\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {label}\n          </ds-text>\n          <span class=\"trigger__chevron ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n          </span>\n        </button>\n        {/* bottom + start: left-aligned under the field; wider menus grow right. */}\n        <ds-menu\n          ref={el => {\n            this.menuEl = (el as HTMLDsMenuElement) ?? null;\n          }}\n          side=\"bottom\"\n          align=\"start\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["selectCss","ICON_SIZE","md","sm","xs","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","required","requiredMessage","placeholder","size","width","isInactive","activeFill","hasBorder","ariaLabel","isOpen","triggerEl","menuEl","openWithFocusVisible","initialValue","formDisabled","handleMenuSelect","e","detail","undefined","String","dsChange","emit","close","handleMenuClose","componentWillLoad","syncFormValue","componentDidLoad","anchor","addEventListener","syncMenuItems","disconnectedCallback","removeEventListener","onIsOpenChange","open","initialFocusVisible","onOptionsChange","onValueChange","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","items","map","opt","label","isSelected","syncMenuLayout","sectionPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","triggerW","offsetWidth","menuWidth","minWidth","alignOffset","opts","focusVisible","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","find","o","hasSelection","some","render","showPlaceholder","hasValue","textVariant","CONTROL_TEXT_VARIANT","iconSize","density","showSelectedFill","h","Host","class","controlWidthClass","ref","el","type","trigger","role","ariaLabelledby","onClick","as","variant","color","lineTruncation","name","side","align"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["/* ==========================================================================\n   Select — unfilled-button chrome trigger + ds-menu dropdown.\n   Density via `.ds-control--md|sm|xs` (control-density.css).\n   ========================================================================== */\n\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host(.select-host) {\n  display: inline-flex;\n  position: relative;\n  /* Idle = secondary. Selected/open: label → primary; chevron stays secondary. */\n  --ds-select-fg: var(--color-foreground-secondary);\n  --ds-select-fg-active: var(--color-foreground-primary);\n  --ds-select-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill) .trigger {\n  width: 100%;\n}\n\n:host(.ds-control-width--hug) .trigger__label {\n  flex: 0 1 auto;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-select-fg);\n  cursor: pointer;\n  font-family: inherit;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected`).\n     Selected/open: label → primary; chevron stays secondary. */\n}\n\n/* Inset stroke via interaction-fill ::after (same recipe as ButtonUnfilled). */\n.trigger--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-select-border);\n}\n\n.trigger--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n.trigger__label {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  color: inherit;\n  transition: color var(--effect-motion-short-2);\n}\n\n.trigger--has-value .trigger__label,\n.trigger--open .trigger__label {\n  color: var(--ds-select-fg-active);\n}\n\n.trigger__chevron {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Always secondary — only the label promotes on selected/open. */\n  color: var(--ds-select-fg);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  TOKEN_DEFAULTS,\n  type ControlWidth,\n} from '../../utils';\nimport type { MenuItemData } from '../Menu/menu-types';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nexport type SelectSize = 'md' | 'sm' | 'xs';\n\nexport type SelectWidth = ControlWidth;\n\n/** `ds-icon` size matching control-density icon metrics. */\nconst ICON_SIZE: Record<SelectSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in\n * control-density sizes, with `ds-menu` for the option list.\n */\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Array of options. Set via JS property.\n   * @example el.options = [{ label: 'Apple', value: 'apple' }];\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /** Currently selected value. */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop({ reflect: true }) name: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) required: boolean = false;\n\n  @Prop() requiredMessage: string = 'This field is required.';\n\n  /** Placeholder shown when no value is selected. */\n  @Prop() placeholder: string = 'Select';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: SelectSize = 'md';\n\n  /** Width fit — fill the parent (default) or hug content. */\n  @Prop() width: SelectWidth = 'fill';\n\n  /** Disables interaction (25% opacity via ds-control-inactive). */\n  @Prop() isInactive: boolean = false;\n\n  /**\n   * When a value is selected, render the selected interaction fill (same recipe\n   * as unfilled-button `activeFill`). Default `true`. Pass `false` for\n   * foreground-only selection (primary label, no fill).\n   * Selected/open promotes the label to primary; chevron stays secondary.\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on (matches unfilled button). */\n  @Prop() hasBorder: boolean = true;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emits the selected value string. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  @State() private isOpen: boolean = false;\n\n  private triggerEl: HTMLButtonElement | null = null;\n  private menuEl: HTMLDsMenuElement | null = null;\n  /** True when the open was keyboard-driven — menu shows initial focus ring. */\n  private openWithFocusVisible = false;\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n    }\n    this.menuEl?.addEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.addEventListener('dsClose', this.handleMenuClose);\n    this.syncMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.menuEl?.removeEventListener('dsSelect', this.handleMenuSelect);\n    this.menuEl?.removeEventListener('dsClose', this.handleMenuClose);\n  }\n\n  @Watch('isOpen')\n  onIsOpenChange(open: boolean) {\n    if (!this.menuEl) return;\n    this.menuEl.initialFocusVisible = open && this.openWithFocusVisible;\n    this.menuEl.open = open;\n  }\n\n  @Watch('options')\n  onOptionsChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private handleMenuSelect = (e: Event) => {\n    const detail = (e as CustomEvent<MenuItemData>).detail;\n    if (detail?.value !== undefined) {\n      this.value = String(detail.value);\n      this.dsChange.emit(this.value);\n    }\n    this.close();\n  };\n\n  private handleMenuClose = () => {\n    this.close();\n  };\n\n  private syncMenuItems() {\n    if (!this.menuEl) return;\n    this.menuEl.items = this.options.map(opt => ({\n      label: opt.label,\n      value: opt.value,\n      isSelected: opt.value === this.value,\n    }));\n  }\n\n  /**\n   * Size/place the menu so option labels line up with the select label.\n   * Menu section padding insets items; we expand min-width by that chrome and\n   * shift left by the same amount (`alignOffset`). Menu can grow wider than\n   * the field (left-bottom / `align=\"start\"`) when labels need more room.\n   */\n  private syncMenuLayout() {\n    if (!this.menuEl || !this.triggerEl) return;\n    const sectionPadPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n    const triggerW = this.triggerEl.offsetWidth;\n    // Prefer min-width over fixed width so long options can grow the menu.\n    this.menuEl.menuWidth = '';\n    this.menuEl.minWidth = `${triggerW + sectionPadPx * 2}px`;\n    this.menuEl.alignOffset = -sectionPadPx;\n    this.menuEl.anchor = this.triggerEl;\n  }\n\n  private open(opts: { focusVisible: boolean } = { focusVisible: false }) {\n    if (this.isInactive || this.disabled || this.formDisabled || !this.options.length) return;\n    this.openWithFocusVisible = opts.focusVisible;\n    this.syncMenuLayout();\n    this.syncMenuItems();\n    this.isOpen = true;\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.openWithFocusVisible = false;\n  }\n\n  private toggle(opts: { focusVisible: boolean }) {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open(opts);\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (document.activeElement !== this.triggerEl) return;\n\n    if (!this.isOpen) {\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowUp':\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          this.open({ focusVisible: true });\n          break;\n      }\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      this.close();\n      this.triggerEl?.focus();\n    }\n  }\n\n  private get selectedLabel(): string {\n    return this.options.find(o => o.value === this.value)?.label ?? '';\n  }\n\n  private get hasSelection(): boolean {\n    return this.options.some(o => o.value === this.value);\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const showPlaceholder = !this.hasSelection;\n    const hasValue = !showPlaceholder;\n    const label = showPlaceholder ? this.placeholder : this.selectedLabel;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const density = `ds-control--${this.size}`;\n    // Selected fill when a value is set (or while open), gated by `activeFill`.\n    const showSelectedFill =\n      !inactive && this.activeFill && (hasValue || this.isOpen);\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-control-inactive': inactive,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n      >\n        <button\n          ref={el => {\n            this.triggerEl = (el as HTMLButtonElement) ?? null;\n          }}\n          type=\"button\"\n          class={{\n            trigger: true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n            'ds-interaction-fill--selected': showSelectedFill,\n            'trigger--open': this.isOpen,\n            'trigger--bordered': this.hasBorder,\n            'trigger--placeholder': showPlaceholder,\n            'trigger--has-value': hasValue,\n            [density]: true,\n          }}\n          disabled={inactive}\n          role=\"combobox\"\n          aria-haspopup=\"menu\"\n          aria-expanded={String(this.isOpen)}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          onClick={() => this.toggle({ focusVisible: false })}\n        >\n          <ds-text\n            class=\"trigger__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={textVariant}\n            color=\"inherit\"\n            lineTruncation={1}\n          >\n            {label}\n          </ds-text>\n          <span class=\"trigger__chevron ds-interaction-fill__content\" aria-hidden=\"true\">\n            <ds-icon name=\"ChevronDown\" size={iconSize} color=\"inherit\" />\n          </span>\n        </button>\n        {/* bottom + start: left-aligned under the field; wider menus grow right. */}\n        <ds-menu\n          ref={el => {\n            this.menuEl = (el as HTMLDsMenuElement) ?? null;\n          }}\n          side=\"bottom\"\n          align=\"start\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

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

package/dist/components/ds-slider.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";import{d as n}from"./p-BOQRM49Q.js";const o=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let d=0;const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++d}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"2926d7f07588c6a7ee428be51c06791ca4206f19",class:"field"},t("div",{key:"0c01511bd79336abe046fd47cb12f7a3f409f38f",class:"label-row"},t("ds-text",{key:"b13472255c9e10c8fed5b8d09dc997fb6ed4a06a",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),t("ds-text",{key:"1b77f4c78ba97554b21f6d475f9cf1fdeeb31080",as:"span",variant:"text-body-small",emphasis:true},this.value)),t("div",{key:"5b76dd6a485cc5019dcf19207ddda997fd41938d",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"41a58e7afa2ff8fd21ef816debecb75d8545313f",class:"track-inner"},t("div",{key:"6c4940174d50e7a4da6577823fa7897e22729194",class:"fill-track"},t("div",{key:"122f2ae8c6fba18b29610cc1c9c7e2ef5ca49a57",class:"fill"})),t("div",{key:"0d6832746dfbe8e0849fcae7336066077c8b2dbd",class:"thumb"})),t("input",{key:"d04989e28393e3a13b40342b8bb2d8deb8dabf01",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return o()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-slider","ds-text"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){n()}break}}))}l();const b=c;const p=l;export{b as DsSlider,p as defineCustomElement};
+import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";import{d as n}from"./p-emacH2W5.js";const o=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let d=0;const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++d}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"2926d7f07588c6a7ee428be51c06791ca4206f19",class:"field"},t("div",{key:"0c01511bd79336abe046fd47cb12f7a3f409f38f",class:"label-row"},t("ds-text",{key:"b13472255c9e10c8fed5b8d09dc997fb6ed4a06a",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),t("ds-text",{key:"1b77f4c78ba97554b21f6d475f9cf1fdeeb31080",as:"span",variant:"text-body-small",emphasis:true},this.value)),t("div",{key:"5b76dd6a485cc5019dcf19207ddda997fd41938d",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"41a58e7afa2ff8fd21ef816debecb75d8545313f",class:"track-inner"},t("div",{key:"6c4940174d50e7a4da6577823fa7897e22729194",class:"fill-track"},t("div",{key:"122f2ae8c6fba18b29610cc1c9c7e2ef5ca49a57",class:"fill"})),t("div",{key:"0d6832746dfbe8e0849fcae7336066077c8b2dbd",class:"thumb"})),t("input",{key:"d04989e28393e3a13b40342b8bb2d8deb8dabf01",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return o()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-slider","ds-text"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){n()}break}}))}l();const b=c;const p=l;export{b as DsSlider,p as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

package/dist/components/ds-tab-group-nav.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-BFiaUYu7.js";const t=o;const a=s;export{t as DsTabGroupNav,a as defineCustomElement};
+import{T as s,d as o}from"./p-CfwQwstk.js";const t=s;const p=o;export{t as DsTabGroupNav,p as defineCustomElement};
 //# sourceMappingURL=ds-tab-group-nav.js.map