@ds-mo/ui 2.11.2 → 2.13.0

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

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as o,a,t as i}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-EK1hOP19.js";import{d as r}from"./p-BSFgy5r6.js";import{d}from"./p-8Nt92j1-.js";const c="search";const h={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function p(e,t){if(t){return n(t,[])}return e??[]}function f(e,t){return!e&&t==="idle"}function b(e,t,s){if(e&&t===s){return{open:false,activeTool:s,selected:false}}return{open:true,activeTool:s,selected:true}}const u=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=s(this,"dsToolChange");this.dsChromeTransitionStart=s(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=s(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const t=b(this.open,this.activeTool,e);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:e,selected:t.selected})};this.handleRailKeyDown=(e,t)=>{const s=this.orderedRailItems;if(!s.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(s[t].id);return}if(e.key==="ArrowDown"){if(t>=s.length-1)return;e.preventDefault();this.focusRailAt(t+1);return}if(e.key==="ArrowUp"){if(t<=0)return;e.preventDefault();this.focusRailAt(t-1)}}}get railItems(){return p(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const t=e.find((e=>e.id===c));const s=e.filter((e=>e.id!==c));return t?[t,...s]:s}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,t){if(this.readyForMotion&&t!==undefined&&t!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return h[this.activeTool]??""}async activateTool(e){const t=this.railItems.find((t=>t.id===e));if(!t||t.inactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const t=this.orderedRailItems;if(!t.length)return;const s=Math.max(0,Math.min(e,t.length-1));if(s===this.rovingIndex)return;this.rovingIndex=s;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[s]?.focus({preventScroll:true})}renderRailAction(e,t){return o("ds-button-unfilled-icon",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,dot:e.dot??false,inactive:e.inactive,focusTabIndex:t===this.rovingIndex?0:-1,"aria-label":e.ariaLabel??h[e.id],pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=t},onKeyDown:e=>this.handleRailKeyDown(e,t),onDsClick:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const t=this.orderedRailItems;const s=t.find((e=>e.id===c));const i=t.filter((e=>e.id!==c));const n=this.isDrawerPresent();const l=f(this.open,this.motion);return o(a,{key:"99038bdb2a703f8f91d256f9ec29400ece33019b",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":l},role:"complementary","aria-label":"Tools"},o("div",{key:"a9c2e58c2ac770ffeb102ea7cfc217a2f163408a",class:"panel-tools__layout"},o("nav",{key:"6fe1ae3269dfb5d06aec898a6388d316bc6a6317",class:"panel-tools__rail","aria-label":"Tool shortcuts"},s?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(s,0)):null,o("div",{key:"5f7acd3dfd1e90799e929319916d8a4dbd121dba",class:"panel-tools__rail-body"},i.map(((e,t)=>this.renderRailAction(e,s?t+1:t))))),o("div",{key:"e36eecb0a800168b163a3a856c5fb12ab7076b1a",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"bb61a22b7c20910a1b3d65fd4f5d4453ce0ce1a2",class:"panel-tools__drawer-surface"},o("header",{key:"9446ee5476b0903fc8260731ca828e527352ec82",class:"panel-tools__header"},o("span",{key:"84221b301411ba95b39bc38c4d1934460289f56f",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"3d021b22082db0f2fd4aae00ce428708adaf3524",class:"panel-tools__body"},o("div",{key:"84a209ae09b72a8c5ec2749f20ea33f93ba21d76",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"a06f7c36ce1f27ed95a98b6b3cdc3463108bea5c",name:"search"})),o("div",{key:"87456d90cd3384025e11b16f91fbbd5215710847",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"6d120440dec715105a5b46af221aa9adb050f7b3",name:"messages"})),o("div",{key:"3598e1b90a6f74bbef6950e3adb87f3375df82ce",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"96bc6cb41a457abcd48004aa8861c4e982749988",name:"stacks"})),o("div",{key:"a45d71ab8d5237352f45ccb51e24876fb12c5d8f",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"8216915104056493c29ef5b446b56639e2d014ac",name:"activity"})),o("div",{key:"de801cef019aab6f201c3bf002f5274c546f5fdd",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"6677ddd025c2a0ad25369b6dceb429af59e18366",name:"agents"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return u()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled-icon","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),m)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled-icon":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break}}))}g();const v=m;const _=g;export{v as DsPanelTools,_ as defineCustomElement};
+import{p as e,H as s,c as t,h as o,a as i,t as a}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-EK1hOP19.js";import{d as r}from"./p-CuRjYmBk.js";import{d}from"./p-B82KZX9D.js";import{d as c}from"./p-DohXlNCJ.js";const h="search";const p={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function f(e,s){if(s){return n(s,[])}return e??[]}function m(e,s){return!e&&s==="idle"}function u(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const b=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=u(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return f(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const s=e.find((e=>e.id===h));const t=e.filter((e=>e.id!==h));return s?[s,...t]:t}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return p[this.activeTool]??""}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){const t=e.ariaLabel??p[e.id];return o("ds-tooltip",{key:e.id,label:t,side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.orderedRailItems;const t=s.find((e=>e.id===h));const a=s.filter((e=>e.id!==h));const n=this.isDrawerPresent();const l=m(this.open,this.motion);return o(i,{key:"3d2ef377fa890a84ef0e913e375d425095815ce3",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":l},role:"complementary","aria-label":"Tools"},o("div",{key:"c067a6b972a8959c77e16248782d3b878cdbdcf8",class:"panel-tools__layout"},o("nav",{key:"1ddce6769574619296b7681c1ffdb23ffbca1a48",class:"panel-tools__rail","aria-label":"Tool shortcuts"},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t,0)):null,o("div",{key:"4d9eb84c906abce203cb9816f9508c7a014038d7",class:"panel-tools__rail-body"},a.map(((e,s)=>this.renderRailAction(e,t?s+1:s))))),o("div",{key:"3d00c3e2f2a231dde45947d30f73cdee92f44306",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"9accc3df7eed1a597c4ef30ee6c518540b3c6b3d",class:"panel-tools__drawer-surface"},o("header",{key:"6f1d13c16962fa4e031c5c8677343cb99a5156e9",class:"panel-tools__header"},o("span",{key:"4d181898366fb5234d840ddc491afc50bd83cd03",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"ee436cbace6d5e6fd961f2ba5b7066a949d638ee",class:"panel-tools__body"},o("div",{key:"2a23d5871290d6db98d2df05bd53207a91a4b358",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"067a45dc5b79990d68473fa3064c630b064d17b7",name:"search"})),o("div",{key:"b09766c3b26366d88a93be54ec453ec0e9ec2ed4",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"b40089d13f0467fd8d1d8a718f110b25e77f146f",name:"messages"})),o("div",{key:"3d709a1d529f73cb0d4b26b0fece7995aef4811d",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"ed124695c60940156767ca95bb2153bbcd8274d3",name:"stacks"})),o("div",{key:"1bfd84d1425452180b8e0c5662036ec45181e31e",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"a2ef35b1c8548ac00f7d1d91816e09516eee40f6",name:"activity"})),o("div",{key:"b040b2e781aa88e9a7e1023b1c5bcb950f294d99",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"6017d6b4f2c1ccd87f995a7932e525f52cf10dc5",name:"agents"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return b()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(a(e))){customElements.define(a(e),g)}break;case"ds-badge":if(!customElements.get(a(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){r()}break;case"ds-icon":if(!customElements.get(a(e))){d()}break;case"ds-tooltip":if(!customElements.get(a(e))){c()}break}}))}v();const _=g;const y=v;export{_ as DsPanelTools,y as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","resolvePanelToolActivation","activeTool","id","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","item","bodyItems","filter","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","inactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","h","class","icon","isActive","activeFill","dot","focusTabIndex","ariaLabel","pressed","onFocusin","onKeyDown","onDsClick","render","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n};\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  inactive?: boolean;\n  ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n  items: PanelToolsItem[],\n  itemsJson: string,\n): PanelToolsItem[] {\n  if (itemsJson) {\n    return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n  }\n  return items ?? [];\n}\n\nexport function shouldResyncPanelToolsItems(\n  prev: PanelToolsItem[],\n  next: PanelToolsItem[],\n): boolean {\n  if (prev.length !== next.length) return true;\n  return next.some((item, index) => {\n    const prior = prev[index];\n    if (!prior) return true;\n    return (\n      prior.id !== item.id ||\n      prior.icon !== item.icon ||\n      prior.selected !== item.selected ||\n      prior.dot !== item.dot ||\n      prior.inactive !== item.inactive ||\n      prior.ariaLabel !== item.ariaLabel\n    );\n  });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n  return !open && motion === 'idle';\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n  open: boolean,\n  activeTool: PanelToolsToolId | '',\n  id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n  if (open && activeTool === id) {\n    return { open: false, activeTool: id, selected: false };\n  }\n  return { open: true, activeTool: id, selected: true };\n}\n",":host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  --_panel-tools-rail-width: var(--dimension-size-600);\n  --_panel-tools-drawer-width: var(--dimension-panel-width-sm);\n  --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n  --_panel-tools-surface-bg: var(--color-background-secondary);\n  /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n  --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: stretch;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n  flex: 0 0 auto;\n  max-width: 0;\n  min-width: 0;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n  transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n  max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n  border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — stays 400px while the clip frame opens/closes. */\n.panel-tools__drawer-surface {\n  display: flex;\n  flex-direction: column;\n  width: var(--_panel-tools-drawer-width);\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n/* Shell-owned chrome (bg + wash) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail {\n  background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  border-bottom: var(--_panel-tools-border);\n  color: var(--color-foreground-primary);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tools__title {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-tools__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n  display: none;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  padding: var(--dimension-space-200);\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n  margin: 0;\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n  display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n  flex: 0 0 var(--_panel-tools-rail-width);\n  width: var(--_panel-tools-rail-width);\n  min-width: var(--_panel-tools-rail-width);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  border-left: var(--_panel-tools-border);\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n  display: none;\n}\n\n.panel-tools__rail-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--dimension-size-400);\n  flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  scoped: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  @State() private rovingIndex = 0;\n\n  private motionEnableGeneration = 0;\n\n  private get railItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    const railItems = this.railItems;\n    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n    return headerItem ? [headerItem, ...bodyItems] : bodyItems;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.motionEnableGeneration += 1;\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.motion = isOpen ? 'opening' : 'closing';\n      this.dsChromeTransitionStart.emit({\n        source: 'panel-tools',\n        phase: isOpen ? 'opening' : 'closing',\n      });\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.deferMotionEnable();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.deferMotionEnable();\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n    if (event.propertyName !== 'max-width') return;\n    this.motion = 'idle';\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  };\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.motion === 'closing';\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.inactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    return (\n      <ds-button-unfilled-icon\n        key={item.id}\n        class=\"panel-tools__rail-action\"\n        icon={item.icon}\n        isActive={this.isRailSelected(item.id)}\n        activeFill={false}\n        dot={item.dot ?? false}\n        inactive={item.inactive}\n        focusTabIndex={index === this.rovingIndex ? 0 : -1}\n        aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}\n        pressed={this.isRailSelected(item.id)}\n        onFocusin={() => { this.rovingIndex = index; }}\n        onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n        onDsClick={() => this.handleToolChange(item.id)}\n      />\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const orderedRailItems = this.orderedRailItems;\n    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n        }}\n        role=\"complementary\"\n        aria-label=\"Tools\"\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n            {headerItem ? (\n              <div class=\"panel-tools__rail-header\">\n                {this.renderRailAction(headerItem, 0)}\n              </div>\n            ) : null}\n            <div class=\"panel-tools__rail-body\">\n              {bodyItems.map((item, bodyIdx) =>\n                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n              )}\n            </div>\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              <header class=\"panel-tools__header\">\n                <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\n              </header>\n              <div class=\"panel-tools__body\">\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('search'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('search')}\n                >\n                  <slot name=\"search\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('messages'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('messages')}\n                >\n                  <slot name=\"messages\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('stacks'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('stacks')}\n                >\n                  <slot name=\"stacks\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('activity'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('activity')}\n                >\n                  <slot name=\"activity\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('agents'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('agents')}\n                >\n                  <slot name=\"agents\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","resolvePanelToolActivation","activeTool","id","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","item","bodyItems","filter","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","label","ariaLabel","h","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n  'search',\n  'agents',\n  'messages',\n  'stacks',\n  'activity',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n  search: 'Search',\n  messages: 'Messages',\n  stacks: 'Stacks',\n  activity: 'Activity',\n  agents: 'Agents',\n};\n\nexport interface PanelToolsItem {\n  id: PanelToolsToolId;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this rail button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  isInactive?: boolean;\n  ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n  items: PanelToolsItem[],\n  itemsJson: string,\n): PanelToolsItem[] {\n  if (itemsJson) {\n    return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n  }\n  return items ?? [];\n}\n\nexport function shouldResyncPanelToolsItems(\n  prev: PanelToolsItem[],\n  next: PanelToolsItem[],\n): boolean {\n  if (prev.length !== next.length) return true;\n  return next.some((item, index) => {\n    const prior = prev[index];\n    if (!prior) return true;\n    return (\n      prior.id !== item.id ||\n      prior.icon !== item.icon ||\n      prior.selected !== item.selected ||\n      prior.dot !== item.dot ||\n      prior.isInactive !== item.isInactive ||\n      prior.ariaLabel !== item.ariaLabel\n    );\n  });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n  return !open && motion === 'idle';\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n  open: boolean,\n  activeTool: PanelToolsToolId | '',\n  id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n  if (open && activeTool === id) {\n    return { open: false, activeTool: id, selected: false };\n  }\n  return { open: true, activeTool: id, selected: true };\n}\n",":host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  --_panel-tools-rail-width: var(--dimension-size-600);\n  --_panel-tools-drawer-width: var(--dimension-panel-width-sm);\n  --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n  --_panel-tools-surface-bg: var(--color-background-secondary);\n  /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n  --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: stretch;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n  flex: 0 0 auto;\n  max-width: 0;\n  min-width: 0;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n  transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n  transition: max-width var(--_panel-tools-expand-dur)\n    var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n  max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n  border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — stays 400px while the clip frame opens/closes. */\n.panel-tools__drawer-surface {\n  display: flex;\n  flex-direction: column;\n  width: var(--_panel-tools-drawer-width);\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n/* Shell-owned chrome (bg + wash) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail {\n  background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  border-bottom: var(--_panel-tools-border);\n  color: var(--color-foreground-primary);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tools__title {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-tools__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n  display: none;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  padding: var(--dimension-space-200);\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n  margin: 0;\n  color: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n  display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n  flex: 0 0 var(--_panel-tools-rail-width);\n  width: var(--_panel-tools-rail-width);\n  min-width: var(--_panel-tools-rail-width);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  border-left: var(--_panel-tools-border);\n  background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n  display: none;\n}\n\n.panel-tools__rail-action {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--dimension-size-400);\n  flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n  PANEL_TOOLS_LABELS,\n  PANEL_TOOLS_PRIMARY_TOOL_ID,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';\n\n@Component({\n  tag: 'ds-panel-tools',\n  styleUrl: 'PanelTools.css',\n  scoped: true,\n})\nexport class PanelTools {\n  @Element() el!: HTMLElement;\n\n  /** When false, only the icon rail is shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n\n  /**\n   * Rail items rendered in the right column.\n   * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n   */\n  @Prop() items: PanelToolsItem[] = [];\n\n  /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n  @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n\n  /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n\n  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n  @Event({ bubbles: true, composed: true })\n  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n  /** Arms open vs close easing for the in-flight width transition. */\n  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n  /** Suppresses width transition until the host has painted its initial open state. */\n  @State() private readyForMotion = false;\n\n  @State() private rovingIndex = 0;\n\n  private motionEnableGeneration = 0;\n\n  private get railItems(): PanelToolsItem[] {\n    return parsePanelToolsItems(this.items, this.itemsJson);\n  }\n\n  private get orderedRailItems(): PanelToolsItem[] {\n    const railItems = this.railItems;\n    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n    return headerItem ? [headerItem, ...bodyItems] : bodyItems;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n    this.motionEnableGeneration += 1;\n  }\n\n  private deferMotionEnable() {\n    if (this.readyForMotion) return;\n    const generation = ++this.motionEnableGeneration;\n    requestAnimationFrame(() => {\n      if (generation !== this.motionEnableGeneration) return;\n      requestAnimationFrame(() => {\n        if (generation !== this.motionEnableGeneration) return;\n        this.readyForMotion = true;\n      });\n    });\n  }\n\n  connectedCallback() {\n    this.el.addEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  @Watch('open')\n  openChanged(isOpen: boolean, wasOpen?: boolean) {\n    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n      this.motion = isOpen ? 'opening' : 'closing';\n      this.dsChromeTransitionStart.emit({\n        source: 'panel-tools',\n        phase: isOpen ? 'opening' : 'closing',\n      });\n    }\n    this.deferMotionEnable();\n  }\n\n  @Watch('activeTool')\n  activeToolChanged() {\n    this.deferMotionEnable();\n  }\n\n  componentDidLoad() {\n    this.deferMotionEnable();\n  }\n\n  @Watch('items')\n  @Watch('itemsJson')\n  itemsChanged() {\n    this.rovingIndex = 0;\n    this.deferMotionEnable();\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n    if (event.propertyName !== 'max-width') return;\n    this.motion = 'idle';\n    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n  };\n\n  /** Rail selection follows `open` immediately — independent of the slide animation. */\n  private isRailSelected(id: PanelToolsToolId): boolean {\n    return this.open && this.activeTool === id;\n  }\n\n  /** Drawer body stays mounted while the clip frame animates closed. */\n  private isDrawerPresent(): boolean {\n    return this.open || this.motion === 'closing';\n  }\n\n  private isViewActive(id: PanelToolsToolId): boolean {\n    return this.isDrawerPresent() && this.activeTool === id;\n  }\n\n  private headerLabel(): string {\n    if (!this.isDrawerPresent() || !this.activeTool) return '';\n    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n  }\n\n  private handleToolChange = (id: PanelToolsToolId) => {\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  };\n\n  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    const item = this.railItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    this.handleToolChange(id);\n  }\n\n  /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n  @Method()\n  async closeDrawer() {\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) {\n      this.dsToolChange.emit({ id, selected: false });\n    }\n  }\n\n  private focusRailAt(index: number) {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n    const bounded = Math.max(0, Math.min(index, items.length - 1));\n    if (bounded === this.rovingIndex) return;\n    this.rovingIndex = bounded;\n    const actions = Array.from(\n      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n    );\n    actions[bounded]?.focus({ preventScroll: true });\n  }\n\n  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n    const items = this.orderedRailItems;\n    if (!items.length) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleToolChange(items[index].id);\n      return;\n    }\n\n    if (e.key === 'ArrowDown') {\n      if (index >= items.length - 1) return;\n      e.preventDefault();\n      this.focusRailAt(index + 1);\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (index <= 0) return;\n      e.preventDefault();\n      this.focusRailAt(index - 1);\n    }\n  };\n\n  private renderRailAction(item: PanelToolsItem, index: number) {\n    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n    return (\n      <ds-tooltip key={item.id} label={label} side=\"left\" size=\"sm\">\n        <ds-button-unfilled variant=\"icon\"\n          class=\"panel-tools__rail-action\"\n          icon={item.icon}\n          isActive={this.isRailSelected(item.id)}\n          activeFill={false}\n          hasBorder={false}\n          dot={item.dot ?? false}\n          isInactive={item.isInactive}\n          focusTabIndex={index === this.rovingIndex ? 0 : -1}\n          aria-label={label}\n          pressed={this.isRailSelected(item.id)}\n          onFocusin={() => { this.rovingIndex = index; }}\n          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n          onDsClick={() => this.handleToolChange(item.id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const headerLabel = this.headerLabel();\n    const orderedRailItems = this.orderedRailItems;\n    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n    const showDrawerChrome = this.isDrawerPresent();\n    const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n    return (\n      <Host\n        class={{\n          'panel-tools': true,\n          'panel-tools--open': this.open,\n          'panel-tools--ready': this.readyForMotion,\n          'panel-tools--motion-opening': this.motion === 'opening',\n          'panel-tools--motion-closing': this.motion === 'closing',\n          'panel-tools--drawer-resting': drawerResting,\n        }}\n        role=\"complementary\"\n        aria-label=\"Tools\"\n      >\n        <div class=\"panel-tools__layout\">\n          <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n            {headerItem ? (\n              <div class=\"panel-tools__rail-header\">\n                {this.renderRailAction(headerItem, 0)}\n              </div>\n            ) : null}\n            <div class=\"panel-tools__rail-body\">\n              {bodyItems.map((item, bodyIdx) =>\n                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n              )}\n            </div>\n          </nav>\n\n          <div\n            class={{\n              'panel-tools__drawer': true,\n              'panel-tools__drawer--visible': showDrawerChrome,\n            }}\n            aria-hidden={showDrawerChrome ? null : 'true'}\n            inert={showDrawerChrome ? undefined : true}\n          >\n            <div class=\"panel-tools__drawer-surface\">\n              <header class=\"panel-tools__header\">\n                <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\n              </header>\n              <div class=\"panel-tools__body\">\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('search'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('search')}\n                >\n                  <slot name=\"search\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('messages'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('messages')}\n                >\n                  <slot name=\"messages\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('stacks'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('stacks')}\n                >\n                  <slot name=\"stacks\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('activity'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('activity')}\n                >\n                  <slot name=\"activity\" />\n                </div>\n                <div\n                  class={{\n                    'panel-tools__view': true,\n                    'panel-tools__view--active': this.isViewActive('agents'),\n                    'text-body-medium': true,\n                  }}\n                  hidden={!this.isViewActive('agents')}\n                >\n                  <slot name=\"agents\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["radioGroupCss","RadioGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","direction","inactive","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","length","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","selectedIdx","findIndex","o","firstActiveIdx","focusableIdx","h","Host","role","ariaLabel","ariaLabelledby","class","group","map","opt","i","isItemInactive","isChecked","tabIdx","String","undefined","tabIndex","onClick","onKeyDown","circle","label"],"sources":["src/wc/components/RadioGroup/RadioGroup.css?tag=ds-radio-group&encapsulation=scoped","src/wc/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n.group--horizontal {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n/* ── Radio item ──────────────────────────────────────────────────────────── */\n\n.radio-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--dimension-radius-075);\n  transition: background-color var(--effect-motion-short-2);\n  outline: none;\n}\n\n.radio-item:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.radio-item:active {\n  background-color: var(--color-interaction-pressed);\n}\n\n.radio-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.radio-item--inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* ── Circle indicator ────────────────────────────────────────────────────── */\n\n.circle {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  border: 1.5px solid var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-half);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  transition: all var(--effect-motion-short-2);\n}\n\n.circle--checked {\n  border-color: var(--color-foreground-primary);\n}\n\n.dot {\n  width: 10px;\n  height: 10px;\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-primary);\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.radio-label {\n  flex: 1;\n  min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  inactive?: boolean;\n}\n\n@Component({\n  tag: 'ds-radio-group',\n  styleUrl: 'RadioGroup.css',\n  scoped: true,\n})\nexport class RadioGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop() options: RadioOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() inactive: boolean = false;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.inactive) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const selectedIdx = this.options.findIndex(o => o.value === this.value);\n    const firstActiveIdx = this.options.findIndex(o => !this.inactive && !o.inactive);\n    const focusableIdx = selectedIdx >= 0 && !this.inactive && !this.options[selectedIdx]?.inactive\n      ? selectedIdx\n      : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((opt, i) => {\n          const isItemInactive = this.inactive || !!opt.inactive;\n          const isChecked = opt.value === this.value;\n          const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);\n\n          return (\n            <div\n              key={opt.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive || undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={opt.value}\n              data-inactive={isItemInactive || undefined}\n              class={{ 'radio-item': true, 'radio-item--inactive': isItemInactive }}\n              onClick={() => !isItemInactive && this.selectItem(opt.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(opt.value);\n                }\n              }}\n            >\n              <span class={{ circle: true, 'circle--checked': isChecked }}>\n                {isChecked && <span class=\"dot\" />}\n              </span>\n              <span class=\"text-body-medium radio-label\">{opt.label}</span>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAgB,IAAM,28C,MCafC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,6EAQUC,KAAAC,QAAyB,GACRD,KAAAE,MAAgB,GACjCF,KAAAG,UAAuC,WACvCH,KAAAI,SAAoB,KA4G7B,CAtGC,eAAYC,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,0C,CAI1D,aAAAC,CAAcC,GACZ,MAAMC,EAAQZ,KAAKK,YACnB,IAAKO,EAAMC,OAAQ,OAEnB,MAAMC,EAAUF,EAAMG,MAAKC,GAAQA,IAASC,SAASC,gBACrD,IAAKJ,EAAS,OAEd,MAAMK,EAAMP,EAAMQ,QAAQN,GAC1B,IAAIO,GAAO,EAEX,OAAQV,EAAEW,KACR,IAAK,YACL,IAAK,aACHX,EAAEY,iBACFF,GAAQF,EAAM,GAAKP,EAAMC,OACzB,MACF,IAAK,UACL,IAAK,YACHF,EAAEY,iBACFF,GAAQF,EAAM,EAAIP,EAAMC,QAAUD,EAAMC,OACxC,MACF,IAAK,OACHF,EAAEY,iBACFF,EAAO,EACP,MACF,IAAK,MACHV,EAAEY,iBACFF,EAAOT,EAAMC,OAAS,EACtB,MAGJ,GAAIQ,GAAQ,EAAG,CACbT,EAAMS,GAAMG,QACZ,MAAMC,EAAYb,EAAMS,GAAMK,QAAQ,SACtC,GAAID,GAAaA,IAAczB,KAAKE,MAAO,CACzCF,KAAKE,MAAQuB,EACbzB,KAAK2B,SAASC,KAAKH,E,GAKjB,UAAAI,CAAWC,GACjB,GAAI9B,KAAKI,SAAU,OACnB,GAAI0B,IAAa9B,KAAKE,MAAO,CAC3BF,KAAKE,MAAQ4B,EACb9B,KAAK2B,SAASC,KAAKE,E,EAIvB,MAAAC,GACE,MAAMC,EAAchC,KAAKC,QAAQgC,WAAUC,GAAKA,EAAEhC,QAAUF,KAAKE,QACjE,MAAMiC,EAAiBnC,KAAKC,QAAQgC,WAAUC,IAAMlC,KAAKI,WAAa8B,EAAE9B,WACxE,MAAMgC,EAAeJ,GAAe,IAAMhC,KAAKI,WAAaJ,KAAKC,QAAQ+B,IAAc5B,SACnF4B,EACAG,EAEJ,OACEE,EAACC,EAAI,CAAAhB,IAAA,2CACHiB,KAAK,aAAY,aACLvC,KAAKwC,UAAS,kBACTxC,KAAKyC,eACtBC,MAAO,CAAEC,MAAO,KAAM,oBAAqB3C,KAAKG,YAAc,eAE7DH,KAAKC,QAAQ2C,KAAI,CAACC,EAAKC,KACtB,MAAMC,EAAiB/C,KAAKI,YAAcyC,EAAIzC,SAC9C,MAAM4C,EAAYH,EAAI3C,QAAUF,KAAKE,MACrC,MAAM+C,EAASF,GAAiB,EAAMD,IAAMV,EAAe,GAAI,EAE/D,OACEC,EAAA,OACEf,IAAKuB,EAAI3C,MACTqC,KAAK,QAAO,eACEW,OAAOF,GAAU,gBAChBD,GAAkBI,UACjCC,SAAUH,EAAM,oCAEJJ,EAAI3C,MAAK,gBACN6C,GAAkBI,UACjCT,MAAO,CAAE,aAAc,KAAM,uBAAwBK,GACrDM,QAAS,KAAON,GAAkB/C,KAAK6B,WAAWgB,EAAI3C,OACtDoD,UAAY3C,IACV,IAAKA,EAAEW,MAAQ,KAAOX,EAAEW,MAAQ,WAAayB,EAAgB,CAC3DpC,EAAEY,iBACFvB,KAAK6B,WAAWgB,EAAI3C,M,IAIxBmC,EAAA,QAAMK,MAAO,CAAEa,OAAQ,KAAM,kBAAmBP,IAC7CA,GAAaX,EAAA,QAAMK,MAAM,SAE5BL,EAAA,QAAMK,MAAM,gCAAgCG,EAAIW,OAC5C,I","ignoreList":[]}
+{"version":3,"names":["radioGroupCss","RadioGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","direction","isInactive","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","length","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","selectedIdx","findIndex","o","firstActiveIdx","focusableIdx","h","Host","role","ariaLabel","ariaLabelledby","class","group","map","opt","i","isItemInactive","isChecked","tabIdx","String","undefined","tabIndex","onClick","onKeyDown","circle","label"],"sources":["src/wc/components/RadioGroup/RadioGroup.css?tag=ds-radio-group&encapsulation=scoped","src/wc/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n.group--horizontal {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n/* ── Radio item ──────────────────────────────────────────────────────────── */\n\n.radio-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--dimension-radius-075);\n  transition: background-color var(--effect-motion-short-2);\n  outline: none;\n}\n\n.radio-item:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.radio-item:active {\n  background-color: var(--color-interaction-pressed);\n}\n\n.radio-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* ── Circle indicator ────────────────────────────────────────────────────── */\n\n.circle {\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  flex-shrink: 0;\n  border: var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-half);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  transition: all var(--effect-motion-short-2);\n}\n\n.circle--checked {\n  border-color: var(--color-foreground-primary);\n}\n\n.dot {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-primary);\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.radio-label {\n  flex: 1;\n  min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  isInactive?: boolean;\n}\n\n@Component({\n  tag: 'ds-radio-group',\n  styleUrl: 'RadioGroup.css',\n  scoped: true,\n})\nexport class RadioGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop() options: RadioOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() isInactive: boolean = false;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.isInactive) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const selectedIdx = this.options.findIndex(o => o.value === this.value);\n    const firstActiveIdx = this.options.findIndex(o => !this.isInactive && !o.isInactive);\n    const focusableIdx = selectedIdx >= 0 && !this.isInactive && !this.options[selectedIdx]?.isInactive\n      ? selectedIdx\n      : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((opt, i) => {\n          const isItemInactive = this.isInactive || !!opt.isInactive;\n          const isChecked = opt.value === this.value;\n          const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);\n\n          return (\n            <div\n              key={opt.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive || undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={opt.value}\n              data-inactive={isItemInactive || undefined}\n              class={{ 'radio-item': true, 'ds-control-inactive': isItemInactive }}\n              onClick={() => !isItemInactive && this.selectItem(opt.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(opt.value);\n                }\n              }}\n            >\n              <span class={{ circle: true, 'circle--checked': isChecked }}>\n                {isChecked && <span class=\"dot\" />}\n              </span>\n              <span class=\"text-body-medium radio-label\">{opt.label}</span>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAgB,IAAM,gnD,MCafC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,6EAQUC,KAAAC,QAAyB,GACRD,KAAAE,MAAgB,GACjCF,KAAAG,UAAuC,WACvCH,KAAAI,WAAsB,KA4G/B,CAtGC,eAAYC,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,0C,CAI1D,aAAAC,CAAcC,GACZ,MAAMC,EAAQZ,KAAKK,YACnB,IAAKO,EAAMC,OAAQ,OAEnB,MAAMC,EAAUF,EAAMG,MAAKC,GAAQA,IAASC,SAASC,gBACrD,IAAKJ,EAAS,OAEd,MAAMK,EAAMP,EAAMQ,QAAQN,GAC1B,IAAIO,GAAO,EAEX,OAAQV,EAAEW,KACR,IAAK,YACL,IAAK,aACHX,EAAEY,iBACFF,GAAQF,EAAM,GAAKP,EAAMC,OACzB,MACF,IAAK,UACL,IAAK,YACHF,EAAEY,iBACFF,GAAQF,EAAM,EAAIP,EAAMC,QAAUD,EAAMC,OACxC,MACF,IAAK,OACHF,EAAEY,iBACFF,EAAO,EACP,MACF,IAAK,MACHV,EAAEY,iBACFF,EAAOT,EAAMC,OAAS,EACtB,MAGJ,GAAIQ,GAAQ,EAAG,CACbT,EAAMS,GAAMG,QACZ,MAAMC,EAAYb,EAAMS,GAAMK,QAAQ,SACtC,GAAID,GAAaA,IAAczB,KAAKE,MAAO,CACzCF,KAAKE,MAAQuB,EACbzB,KAAK2B,SAASC,KAAKH,E,GAKjB,UAAAI,CAAWC,GACjB,GAAI9B,KAAKI,WAAY,OACrB,GAAI0B,IAAa9B,KAAKE,MAAO,CAC3BF,KAAKE,MAAQ4B,EACb9B,KAAK2B,SAASC,KAAKE,E,EAIvB,MAAAC,GACE,MAAMC,EAAchC,KAAKC,QAAQgC,WAAUC,GAAKA,EAAEhC,QAAUF,KAAKE,QACjE,MAAMiC,EAAiBnC,KAAKC,QAAQgC,WAAUC,IAAMlC,KAAKI,aAAe8B,EAAE9B,aAC1E,MAAMgC,EAAeJ,GAAe,IAAMhC,KAAKI,aAAeJ,KAAKC,QAAQ+B,IAAc5B,WACrF4B,EACAG,EAEJ,OACEE,EAACC,EAAI,CAAAhB,IAAA,2CACHiB,KAAK,aAAY,aACLvC,KAAKwC,UAAS,kBACTxC,KAAKyC,eACtBC,MAAO,CAAEC,MAAO,KAAM,oBAAqB3C,KAAKG,YAAc,eAE7DH,KAAKC,QAAQ2C,KAAI,CAACC,EAAKC,KACtB,MAAMC,EAAiB/C,KAAKI,cAAgByC,EAAIzC,WAChD,MAAM4C,EAAYH,EAAI3C,QAAUF,KAAKE,MACrC,MAAM+C,EAASF,GAAiB,EAAMD,IAAMV,EAAe,GAAI,EAE/D,OACEC,EAAA,OACEf,IAAKuB,EAAI3C,MACTqC,KAAK,QAAO,eACEW,OAAOF,GAAU,gBAChBD,GAAkBI,UACjCC,SAAUH,EAAM,oCAEJJ,EAAI3C,MAAK,gBACN6C,GAAkBI,UACjCT,MAAO,CAAE,aAAc,KAAM,sBAAuBK,GACpDM,QAAS,KAAON,GAAkB/C,KAAK6B,WAAWgB,EAAI3C,OACtDoD,UAAY3C,IACV,IAAKA,EAAEW,MAAQ,KAAOX,EAAEW,MAAQ,WAAayB,EAAgB,CAC3DpC,EAAEY,iBACFvB,KAAK6B,WAAWgB,EAAI3C,M,IAIxBmC,EAAA,QAAMK,MAAO,CAAEa,OAAQ,KAAM,kBAAmBP,IAC7CA,GAAaX,EAAA,QAAMK,MAAM,SAE5BL,EAAA,QAAMK,MAAM,gCAAgCG,EAAIW,OAC5C,I","ignoreList":[]}

package/dist/components/ds-select.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as i,a as r,t as o}from"./index.js";import{d as a}from"./p-CpNIQXz6.js";import{d as n}from"./p-DdFUTZ3y.js";import{d as c}from"./p-ChVwCVHy.js";const l=()=>`.select-host.sc-ds-select-h{display:inline-block;width:100%;position:relative}.inactive.sc-ds-select-h{opacity:0.5;pointer-events:none}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-075) 0 var(--dimension-space-100);border:none;border-radius:var(--dimension-radius-050);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);cursor:pointer;box-sizing:border-box;gap:var(--dimension-space-050);font-family:inherit;outline:none;--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.trigger.sc-ds-select:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.trigger.sc-ds-select:hover:not(:disabled){background-color:var(--_hover-bg)}.trigger.sc-ds-select:active:not(:disabled){background-color:var(--_pressed-bg)}.trigger--open.sc-ds-select{background-color:var(--_pressed-bg)}.trigger__label.sc-ds-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);color:var(--color-foreground-primary)}.trigger__label--placeholder.sc-ds-select{color:var(--color-foreground-secondary)}.trigger__chevron.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary);transition:transform var(--effect-motion-short-2)}.trigger--open.sc-ds-select .trigger__chevron.sc-ds-select{transform:rotate(180deg)}`;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select option";this.inactive=false;this.isOpen=false;this.triggerEl=null;this.menuEl=null}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",(e=>{const s=e.detail;if(s?.value!==undefined){this.value=String(s.value);this.dsChange.emit(this.value)}this.isOpen=false}));this.menuEl?.addEventListener("dsClose",(()=>{this.isOpen=false}))}onIsOpenChange(e){if(this.menuEl){this.menuEl.open=e}}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((e=>({label:e.label,value:e.value,isSelected:e.value===this.value})))}open(){if(this.inactive||!this.options.length)return;if(this.menuEl&&this.triggerEl){this.menuEl.menuWidth=`${this.triggerEl.offsetWidth}px`;this.menuEl.anchor=this.triggerEl}this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false}toggle(){if(this.isOpen){this.close()}else{this.open()}}handleKeyDown(e){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault();this.open();break}}else{if(e.key==="Escape"){e.preventDefault();this.close();this.triggerEl?.focus()}}}get selectedLabel(){const e=this.options.find((e=>e.value===this.value));return e?.label??""}get hasSelection(){return!!this.options.find((e=>e.value===this.value))}render(){const e=this.hasSelection?this.selectedLabel:this.placeholder;const s=!this.hasSelection;return i(r,{key:"3f539cccbdf00749a68a9e513e5e4d8ef0fcaeb9",class:{"select-host":true,inactive:this.inactive}},i("button",{key:"5ba9b0a950d5a3717fa0de7172441c82fce336fb",ref:e=>{this.triggerEl=e??null},type:"button",class:{trigger:true,"trigger--open":this.isOpen},disabled:this.inactive,role:"combobox","aria-haspopup":"listbox","aria-expanded":this.isOpen,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle()},i("span",{key:"89a51d1b4ec69757d1c8df470529c1db98ec1d04",class:{trigger__label:true,"trigger__label--placeholder":s}},e),i("svg",{key:"587d0a8c205456a6dc0868a945471f84f7cac78d",class:"trigger__chevron",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},i("path",{key:"df7a531aaca2fcccd6064d0a1cbaf547794eabf9",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.25","stroke-linecap":"round","stroke-linejoin":"round"}))),i("ds-menu",{key:"e41da5785c44ed248dce51c607b4d697a73a1ec1",ref:e=>{this.menuEl=e??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return l()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(o(e))){customElements.define(o(e),d)}break;case"ds-menu":if(!customElements.get(o(e))){a()}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){n()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){c()}break}}))}h();const g=d;const p=h;export{g as DsSelect,p as defineCustomElement};
+import{p as s,H as e,c as t,h as i,a as o,t as n}from"./index.js";import{c as r}from"./p-DuFm-ieS.js";import{d as c}from"./p-B82KZX9D.js";import{d}from"./p-CwARVsZQ.js";import{d as a}from"./p-Be3PHv34.js";import{d as l}from"./p-CQmf2CeW.js";import{r as h}from"./p-BWUTr_XN.js";import{T as f}from"./p-B_g8X0eh.js";const u=()=>`.sc-ds-select-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select,.trigger--open.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-select-fg)}`;const v={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const g={md:"md",sm:"sm",xs:"xs"};const b=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=h(f.space050,f.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=!this.hasSelection;const e=!s;const t=s?this.placeholder:this.selectedLabel;const n=v[this.size];const c=g[this.size];const d=`ds-control--${this.size}`;const a=!this.isInactive&&this.activeFill&&(e||this.isOpen);return i(o,{key:"a06918c7052a6241b8789ba0948a184cdfbb4dc6",class:{"select-host":true,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...r(this.width)}},i("button",{key:"116cbb302bdb23cb70c1045afdd0b82731bad140",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":a,"trigger--open":this.isOpen,"trigger--bordered":this.hasBorder,"trigger--placeholder":s,"trigger--has-value":e,[d]:true},disabled:this.isInactive,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},i("span",{key:"b5a2568df8c887e1d2d9161b87bb9624b257cf7d",class:{trigger__label:true,[n]:true,"ds-interaction-fill__content":true}},t),i("span",{key:"05ec47e26a1e04795e6651be92efdaf45567e342",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"8abe52054c5748370699ed24f30b11a7ba318f52",name:"ChevronDown",size:c,color:"inherit"}))),i("ds-menu",{key:"14daa31a7d0f14672e930346823ad5db35dfe92c",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return u()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),b)}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-menu":if(!customElements.get(n(s))){d()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){l()}break}}))}p();const m=b;const w=p;export{m as DsSelect,w as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["selectCss","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","placeholder","inactive","isOpen","triggerEl","menuEl","componentDidLoad","anchor","addEventListener","e","detail","undefined","String","dsChange","emit","onIsOpenChange","open","onOptionsChange","syncMenuItems","onValueChange","items","map","opt","label","isSelected","length","menuWidth","offsetWidth","close","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","found","find","o","hasSelection","render","showPlaceholder","h","Host","class","ref","el","type","trigger","disabled","role","ariaLabel","ariaLabelledby","onClick","trigger__label","width","height","viewBox","fill","d","stroke","side","align"],"sources":["src/wc/components/Select/Select.css?tag=ds-select&encapsulation=scoped","src/wc/components/Select/Select.tsx"],"sourcesContent":["/* ==========================================================================\n   Select — combobox-pattern select using ds-menu for the dropdown.\n   ========================================================================== */\n\n:host(.select-host) {\n  display: inline-block;\n  width: 100%;\n  position: relative;\n}\n\n:host(.inactive) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* ── Trigger button ──────────────────────────────────────────────────────── */\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-075) 0 var(--dimension-space-100);\n  border: none;\n  border-radius: var(--dimension-radius-050);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  cursor: pointer;\n  box-sizing: border-box;\n  gap: var(--dimension-space-050);\n  font-family: inherit;\n  outline: none;\n\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.trigger:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--_hover-bg);\n}\n\n.trigger:active:not(:disabled) {\n  background-color: var(--_pressed-bg);\n}\n\n.trigger--open {\n  background-color: var(--_pressed-bg);\n}\n\n/* ── Trigger label ───────────────────────────────────────────────────────── */\n\n.trigger__label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  color: var(--color-foreground-primary);\n}\n\n.trigger__label--placeholder {\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Chevron icon ────────────────────────────────────────────────────────── */\n\n.trigger__chevron {\n  flex-shrink: 0;\n  color: var(--color-foreground-secondary);\n  transition: transform var(--effect-motion-short-2);\n}\n\n.trigger--open .trigger__chevron {\n  transform: rotate(180deg);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\n@Component({\n  tag: 'ds-select',\n  styleUrl: 'Select.css',\n  scoped: true,\n})\nexport class Select {\n  @Element() el!: HTMLElement;\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  /** Placeholder shown when no value is selected. */\n  @Prop() placeholder: string = 'Select option';\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\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\n  componentDidLoad() {\n    // Wire up the menu anchor to the trigger button\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.anchor = this.triggerEl;\n    }\n    // Listen for menu selection events\n    this.menuEl?.addEventListener('dsSelect', (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.isOpen = false;\n    });\n    // Listen for menu close event\n    this.menuEl?.addEventListener('dsClose', () => {\n      this.isOpen = false;\n    });\n  }\n\n  @Watch('isOpen')\n  onIsOpenChange(open: boolean) {\n    if (this.menuEl) {\n      this.menuEl.open = open;\n    }\n  }\n\n  @Watch('options')\n  onOptionsChange() {\n    this.syncMenuItems();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.syncMenuItems();\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  private open() {\n    if (this.inactive || !this.options.length) return;\n    // Sync menu width to trigger width\n    if (this.menuEl && this.triggerEl) {\n      this.menuEl.menuWidth = `${this.triggerEl.offsetWidth}px`;\n      this.menuEl.anchor = this.triggerEl;\n    }\n    this.syncMenuItems();\n    this.isOpen = true;\n  }\n\n  private close() {\n    this.isOpen = false;\n  }\n\n  private toggle() {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    // Only handle keydown on the trigger button\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();\n          break;\n      }\n    } else {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        this.close();\n        this.triggerEl?.focus();\n      }\n    }\n  }\n\n  private get selectedLabel(): string {\n    const found = this.options.find(o => o.value === this.value);\n    return found?.label ?? '';\n  }\n\n  private get hasSelection(): boolean {\n    return !!this.options.find(o => o.value === this.value);\n  }\n\n  render() {\n    const label = this.hasSelection ? this.selectedLabel : this.placeholder;\n    const showPlaceholder = !this.hasSelection;\n\n    return (\n      <Host class={{ 'select-host': true, inactive: this.inactive }}>\n        <button\n          ref={el => {\n            this.triggerEl = (el as HTMLButtonElement) ?? null;\n          }}\n          type=\"button\"\n          class={{ trigger: true, 'trigger--open': this.isOpen }}\n          disabled={this.inactive}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={this.isOpen}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          onClick={() => this.toggle()}\n        >\n          <span class={{ 'trigger__label': true, 'trigger__label--placeholder': showPlaceholder }}>\n            {label}\n          </span>\n          <svg\n            class=\"trigger__chevron\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M4 6L8 10L12 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.25\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\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","TEXT_VARIANT","md","sm","xs","ICON_SIZE","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","placeholder","size","width","isInactive","activeFill","hasBorder","isOpen","triggerEl","menuEl","openWithFocusVisible","handleMenuSelect","e","detail","undefined","String","dsChange","emit","close","handleMenuClose","componentDidLoad","anchor","addEventListener","syncMenuItems","disconnectedCallback","removeEventListener","onIsOpenChange","open","initialFocusVisible","onOptionsChange","onValueChange","items","map","opt","label","isSelected","syncMenuLayout","sectionPadPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","triggerW","offsetWidth","menuWidth","minWidth","alignOffset","opts","focusVisible","length","toggle","handleKeyDown","document","activeElement","key","preventDefault","focus","selectedLabel","find","o","hasSelection","some","render","showPlaceholder","hasValue","textVariant","iconSize","density","showSelectedFill","h","Host","class","controlWidthClass","ref","el","type","trigger","disabled","role","ariaLabel","ariaLabelledby","onClick","trigger__label","name","color","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  /* Don't use line-height: 0 here — overflow:hidden would clip the glyphs. */\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 { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { controlWidthClass, type ControlWidth } from '../../utils/control-width';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } 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/** Regular (non-emphasis) type per density — selects stay visually lighter than buttons. */\nconst TEXT_VARIANT: Record<SelectSize, string> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\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})\nexport class Select {\n  @Element() el!: HTMLElement;\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  /** 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 | undefined;\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\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  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.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 showPlaceholder = !this.hasSelection;\n    const hasValue = !showPlaceholder;\n    const label = showPlaceholder ? this.placeholder : this.selectedLabel;\n    const textVariant = 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      !this.isInactive && this.activeFill && (hasValue || this.isOpen);\n\n    return (\n      <Host\n        class={{\n          'select-host': true,\n          'ds-control-inactive': this.isInactive,\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={this.isInactive}\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          <span\n            class={{\n              'trigger__label': true,\n              [textVariant]: true,\n              'ds-interaction-fill__content': true,\n            }}\n          >\n            {label}\n          </span>\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-DdFUTZ3y.js";const t=o;const p=s;export{t as DsShellGradientPicker,p as defineCustomElement};
+import{S as o,d as s}from"./p-Be3PHv34.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 s}from"./p-ChVwCVHy.js";const t=o;const p=s;export{t as DsShellGradientSwatch,p as defineCustomElement};
+import{S as o,d as s}from"./p-CQmf2CeW.js";const t=o;const m=s;export{t as DsShellGradientSwatch,m as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-swatch.js.map

package/dist/components/ds-skeleton.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,a as i,t as r}from"./index.js";const n=()=>`:host{display:block}:host(.skeleton),.skeleton{background-color:var(--color-background-secondary);position:relative;overflow:hidden}:host(.text),.text{height:14px;border-radius:var(--dimension-radius-050);width:100%}:host(.circular){width:40px;height:40px;border-radius:var(--dimension-radius-half)}:host(.rectangular),.rectangular{width:100%;height:80px;border-radius:var(--dimension-radius-075)}.text-group{display:flex;flex-direction:column;gap:var(--dimension-space-075)}:host(.animate),.animate{overflow:hidden;position:relative}:host(.animate)::after,.animate::after{content:'';position:absolute;inset:0;background:linear-gradient(     90deg,     transparent 0%,     var(--color-interaction-hover) 50%,     transparent 100%   );animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.lines=1;this.shimmer=true}get widthCss(){const t=this.width;if(t==null)return undefined;return typeof t==="number"?`${t}px`:t}get heightCss(){const t=this.height;if(t==null)return undefined;return typeof t==="number"?`${t}px`:t}render(){if(this.variant==="text"&&this.lines>1){return s(i,{"aria-hidden":"true",style:{width:this.widthCss}},s("div",{class:"text-group"},Array.from({length:this.lines},((t,e)=>s("div",{class:{skeleton:true,text:true,animate:this.shimmer},style:{width:e===this.lines-1?"60%":"100%",height:this.heightCss}})))))}return s(i,{"aria-hidden":"true",class:{skeleton:true,[this.variant]:true,animate:this.shimmer},style:{width:this.widthCss,height:this.heightCss}})}static get style(){return n()}},[1,"ds-skeleton",{variant:[1],width:[8],height:[8],lines:[2],shimmer:[4]}]);function o(){if(typeof customElements==="undefined"){return}const t=["ds-skeleton"];t.forEach((t=>{switch(t){case"ds-skeleton":if(!customElements.get(r(t))){customElements.define(r(t),a)}break}}))}o();const h=a;const d=o;export{h as DsSkeleton,d as defineCustomElement};
+import{p as t,H as e,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{display:block}:host(.skeleton),.skeleton{background-color:var(--color-background-secondary);position:relative;overflow:hidden}:host(.text),.text{height:var(--typography-fontsize-md);border-radius:var(--dimension-radius-050);width:100%}:host(.circular){width:var(--dimension-size-500);height:var(--dimension-size-500);border-radius:var(--dimension-radius-half)}:host(.rectangular),.rectangular{width:100%;height:var(--dimension-size-800, 80px);border-radius:var(--dimension-radius-075)}.text-group{display:flex;flex-direction:column;gap:var(--dimension-space-075)}:host(.animate),.animate{overflow:hidden;position:relative}:host(.animate)::after,.animate::after{content:'';position:absolute;inset:0;background:linear-gradient(     90deg,     transparent 0%,     var(--color-interaction-hover) 50%,     transparent 100%   );animation:shimmer var(--effect-animation-duration-long-2) var(--effect-animation-easing-ease-in-out) infinite}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.lines=1;this.shimmer=true}get widthCss(){const t=this.width;if(t==null)return undefined;return typeof t==="number"?`${t}px`:t}get heightCss(){const t=this.height;if(t==null)return undefined;return typeof t==="number"?`${t}px`:t}render(){if(this.variant==="text"&&this.lines>1){return i(s,{"aria-hidden":"true",style:{width:this.widthCss}},i("div",{class:"text-group"},Array.from({length:this.lines},((t,e)=>i("div",{class:{skeleton:true,text:true,animate:this.shimmer},style:{width:e===this.lines-1?"60%":"100%",height:this.heightCss}})))))}return i(s,{"aria-hidden":"true",class:{skeleton:true,[this.variant]:true,animate:this.shimmer},style:{width:this.widthCss,height:this.heightCss}})}static get style(){return r()}},[1,"ds-skeleton",{variant:[1],width:[8],height:[8],lines:[2],shimmer:[4]}]);function o(){if(typeof customElements==="undefined"){return}const t=["ds-skeleton"];t.forEach((t=>{switch(t){case"ds-skeleton":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}o();const h=a;const d=o;export{h as DsSkeleton,d as defineCustomElement};
 //# sourceMappingURL=ds-skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["skeletonCss","Skeleton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","lines","shimmer","widthCss","v","width","undefined","heightCss","height","render","h","Host","style","class","Array","from","length","_","lineIdx","skeleton","text","animate"],"sources":["src/wc/components/Skeleton/Skeleton.css?tag=ds-skeleton&encapsulation=shadow","src/wc/components/Skeleton/Skeleton.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host(.skeleton),\n.skeleton {\n  background-color: var(--color-background-secondary);\n  position: relative;\n  overflow: hidden;\n}\n\n/* ── Variants ───────────────────────────────────────────────────────────── */\n\n:host(.text),\n.text {\n  height: 14px;\n  border-radius: var(--dimension-radius-050);\n  width: 100%;\n}\n\n:host(.circular) {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.rectangular),\n.rectangular {\n  width: 100%;\n  height: 80px;\n  border-radius: var(--dimension-radius-075);\n}\n\n/* ── Text group ─────────────────────────────────────────────────────────── */\n\n.text-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-075);\n}\n\n/* ── Shimmer ────────────────────────────────────────────────────────────── */\n\n:host(.animate),\n.animate {\n  overflow: hidden;\n  position: relative;\n}\n\n:host(.animate)::after,\n.animate::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--color-interaction-hover) 50%,\n    transparent 100%\n  );\n  animation: shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes shimmer {\n  0%   { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SkeletonVariant = 'text' | 'circular' | 'rectangular';\n\n@Component({\n  tag: 'ds-skeleton',\n  styleUrl: 'Skeleton.css',\n  shadow: true,\n})\nexport class Skeleton {\n  @Prop() variant: SkeletonVariant = 'text';\n  /** Width as a CSS value string (e.g. '200px', '100%') or number (px). */\n  @Prop() width: string | number | undefined;\n  /** Height as a CSS value string or number (px). */\n  @Prop() height: string | number | undefined;\n  /** Number of text lines. Only used when variant is 'text'. */\n  @Prop() lines: number = 1;\n  /** Whether to show the shimmer animation. */\n  @Prop() shimmer: boolean = true;\n\n  private get widthCss() {\n    const v = this.width;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  private get heightCss() {\n    const v = this.height;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  render() {\n    if (this.variant === 'text' && this.lines > 1) {\n      return (\n        <Host aria-hidden=\"true\" style={{ width: this.widthCss }}>\n          <div class=\"text-group\">\n            {Array.from({ length: this.lines }, (_, lineIdx) => (\n              <div\n                class={{ skeleton: true, text: true, animate: this.shimmer }}\n                style={{\n                  width: lineIdx === this.lines - 1 ? '60%' : '100%',\n                  height: this.heightCss,\n                }}\n              />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          skeleton: true,\n          [this.variant]: true,\n          animate: this.shimmer,\n        }}\n        style={{ width: this.widthCss, height: this.heightCss }}\n      />\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAc,IAAM,g2B,MCSbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,kEAMUC,KAAAC,QAA2B,OAM3BD,KAAAE,MAAgB,EAEhBF,KAAAG,QAAmB,IA6C5B,CA3CC,YAAYC,GACV,MAAMC,EAAIL,KAAKM,MACf,GAAID,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,aAAYG,GACV,MAAMH,EAAIL,KAAKS,OACf,GAAIJ,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,MAAAK,GACE,GAAIV,KAAKC,UAAY,QAAUD,KAAKE,MAAQ,EAAG,CAC7C,OACES,EAACC,EAAI,eAAa,OAAOC,MAAO,CAAEP,MAAON,KAAKI,WAC5CO,EAAA,OAAKG,MAAM,cACRC,MAAMC,KAAK,CAAEC,OAAQjB,KAAKE,QAAS,CAACgB,EAAGC,IACtCR,EAAA,OACEG,MAAO,CAAEM,SAAU,KAAMC,KAAM,KAAMC,QAAStB,KAAKG,SACnDU,MAAO,CACLP,MAAOa,IAAYnB,KAAKE,MAAQ,EAAI,MAAQ,OAC5CO,OAAQT,KAAKQ,gB,CAS3B,OACEG,EAACC,EAAI,eACS,OACZE,MAAO,CACLM,SAAU,KACV,CAACpB,KAAKC,SAAU,KAChBqB,QAAStB,KAAKG,SAEhBU,MAAO,CAAEP,MAAON,KAAKI,SAAUK,OAAQT,KAAKQ,Y","ignoreList":[]}
+{"version":3,"names":["skeletonCss","Skeleton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","lines","shimmer","widthCss","v","width","undefined","heightCss","height","render","h","Host","style","class","Array","from","length","_","lineIdx","skeleton","text","animate"],"sources":["src/wc/components/Skeleton/Skeleton.css?tag=ds-skeleton&encapsulation=shadow","src/wc/components/Skeleton/Skeleton.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host(.skeleton),\n.skeleton {\n  background-color: var(--color-background-secondary);\n  position: relative;\n  overflow: hidden;\n}\n\n/* ── Variants ───────────────────────────────────────────────────────────── */\n\n:host(.text),\n.text {\n  height: var(--typography-fontsize-md);\n  border-radius: var(--dimension-radius-050);\n  width: 100%;\n}\n\n:host(.circular) {\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.rectangular),\n.rectangular {\n  width: 100%;\n  height: var(--dimension-size-800, 80px);\n  border-radius: var(--dimension-radius-075);\n}\n\n/* ── Text group ─────────────────────────────────────────────────────────── */\n\n.text-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-075);\n}\n\n/* ── Shimmer ────────────────────────────────────────────────────────────── */\n\n:host(.animate),\n.animate {\n  overflow: hidden;\n  position: relative;\n}\n\n:host(.animate)::after,\n.animate::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--color-interaction-hover) 50%,\n    transparent 100%\n  );\n  animation: shimmer var(--effect-animation-duration-long-2) var(--effect-animation-easing-ease-in-out) infinite;\n}\n\n@keyframes shimmer {\n  0%   { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SkeletonVariant = 'text' | 'circular' | 'rectangular';\n\n@Component({\n  tag: 'ds-skeleton',\n  styleUrl: 'Skeleton.css',\n  shadow: true,\n})\nexport class Skeleton {\n  @Prop() variant: SkeletonVariant = 'text';\n  /** Width as a CSS value string (e.g. '200px', '100%') or number (px). */\n  @Prop() width: string | number | undefined;\n  /** Height as a CSS value string or number (px). */\n  @Prop() height: string | number | undefined;\n  /** Number of text lines. Only used when variant is 'text'. */\n  @Prop() lines: number = 1;\n  /** Whether to show the shimmer animation. */\n  @Prop() shimmer: boolean = true;\n\n  private get widthCss() {\n    const v = this.width;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  private get heightCss() {\n    const v = this.height;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  render() {\n    if (this.variant === 'text' && this.lines > 1) {\n      return (\n        <Host aria-hidden=\"true\" style={{ width: this.widthCss }}>\n          <div class=\"text-group\">\n            {Array.from({ length: this.lines }, (_, lineIdx) => (\n              <div\n                class={{ skeleton: true, text: true, animate: this.shimmer }}\n                style={{\n                  width: lineIdx === this.lines - 1 ? '60%' : '100%',\n                  height: this.heightCss,\n                }}\n              />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          skeleton: true,\n          [this.variant]: true,\n          animate: this.shimmer,\n        }}\n        style={{ width: this.widthCss, height: this.heightCss }}\n      />\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAc,IAAM,ggC,MCSbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,kEAMUC,KAAAC,QAA2B,OAM3BD,KAAAE,MAAgB,EAEhBF,KAAAG,QAAmB,IA6C5B,CA3CC,YAAYC,GACV,MAAMC,EAAIL,KAAKM,MACf,GAAID,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,aAAYG,GACV,MAAMH,EAAIL,KAAKS,OACf,GAAIJ,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,MAAAK,GACE,GAAIV,KAAKC,UAAY,QAAUD,KAAKE,MAAQ,EAAG,CAC7C,OACES,EAACC,EAAI,eAAa,OAAOC,MAAO,CAAEP,MAAON,KAAKI,WAC5CO,EAAA,OAAKG,MAAM,cACRC,MAAMC,KAAK,CAAEC,OAAQjB,KAAKE,QAAS,CAACgB,EAAGC,IACtCR,EAAA,OACEG,MAAO,CAAEM,SAAU,KAAMC,KAAM,KAAMC,QAAStB,KAAKG,SACnDU,MAAO,CACLP,MAAOa,IAAYnB,KAAKE,MAAQ,EAAI,MAAQ,OAC5CO,OAAQT,KAAKQ,gB,CAS3B,OACEG,EAACC,EAAI,eACS,OACZE,MAAO,CACLM,SAAU,KACV,CAACpB,KAAKC,SAAU,KAChBqB,QAAStB,KAAKG,SAEhBU,MAAO,CAAEP,MAAON,KAAKI,SAAUK,OAAQT,KAAKQ,Y","ignoreList":[]}

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";const n=()=>`.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 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--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--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=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:"75c8794c2e99eb28c229f695888338159eaac47c",class:"field"},t("div",{key:"5f600c4d19e5a27881ff5b606e8e56033c27c803",class:"label-row"},t("label",{key:"a7087a684bb5cc5a0463cc6ce260f8d9021199e0",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"8933a2f311042822883a11c2c2188fb746f74c02",class:"text-body-small-emphasis"},this.value)),t("div",{key:"1917d0b100c3315428167097bc98658d916b34d2",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"73aa63959a3e44601ac544c12a7f7bc2094b5ce3",class:"track-inner"},t("div",{key:"04afa6d8e2e589536bca1ad61183dae2c373a9e7",class:"fill-track"},t("div",{key:"c9239f86c4ec5e4e0321f1ad6f5d218336f40dcb",class:"fill"})),t("div",{key:"ed3104c18ecd840c8494b7f568b39fb30ea067f1",class:"thumb"})),t("input",{key:"0f062cc837842f1677fa8d549d112e0bdb4bcaa6",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),c)}break}}))}d();const l=c;const b=d;export{l as DsSlider,b as defineCustomElement};
+import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"ec075eb676a4264118e4ebadc08bc614faed3386",class:"field"},t("div",{key:"2ce888dccb62a7f64521c950651a858d8f569e29",class:"label-row"},t("label",{key:"dd1c796f68b0d3cceb9d1ac6e1a735e80ea3dbe5",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"de8fae6d14c002b45ee8fe0ec36c4375fab49ac0",class:"text-body-small-emphasis"},this.value)),t("div",{key:"a2c6daa831ffd8759cd67e279d5201dbaabe63e0",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"88d81cb963a78f88cdde87737e263b86fab94db0",class:"track-inner"},t("div",{key:"da1067152e33b506ca6dd1d4563482a122cf9c0f",class:"fill-track"},t("div",{key:"36625843c6cc17eb81659890e01310eb80138937",class:"fill"})),t("div",{key:"0a880aa687ea29acaad437cd89397cbc2a793ada",class:"thumb"})),t("input",{key:"d17e422848c1306f6f9a06274bbf081c0dc14355",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","inactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","htmlFor","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n}\n\n.track-inner {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: 0;\n  bottom: var(--dimension-space-025);\n  left: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.fill {\n  position: absolute;\n  left: var(--dimension-space-025);\n  top: 0;\n  bottom: 0;\n  width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n  background-color: var(--color-background-bold-brand);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  pointer-events: none;\n}\n\n.track--at-min .fill {\n  opacity: 0;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n  width: var(--dimension-size-150);\n  padding: var(--dimension-space-025);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.thumb::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: transparent;\n  border-radius: var(--dimension-radius-050);\n  transition: background-color 100ms ease;\n}\n\n.track:hover:not(.track--inactive) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.track--inactive) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  z-index: 3;\n}\n\n.range-input:disabled {\n  cursor: not-allowed;\n}\n\n.range-input:hover {\n  cursor: grab;\n}\n\n.range-input:active {\n  cursor: grabbing;\n}\n\n.track--inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.track:focus-within .track-inner {\n  box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n})\nexport class Slider {\n  private generatedId = `ds-slider-${++idCounter}`;\n\n  @Prop() value: number = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() label!: string;\n  @Prop() inactive: boolean = false;\n  @Prop() valueText: string | undefined;\n  /** Associates with an external <label>. Defaults to an auto-generated ID. */\n  @Prop() inputId: string | undefined;\n\n  @Event() dsChange!: EventEmitter<number>;\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private get pct() {\n    const range = this.max - this.min;\n    return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n  }\n\n  render() {\n    const finalId = this.inputId ?? this.generatedId;\n    const pct = this.pct;\n\n    return (\n      <Host class=\"field\">\n        <div class=\"label-row\">\n          <label class=\"text-body-small-emphasis\" htmlFor={finalId}>{this.label}</label>\n          <span class=\"text-body-small-emphasis\">{this.value}</span>\n        </div>\n        <div\n          class={{ track: true, 'track--inactive': this.inactive, 'track--at-min': pct === 0 }}\n          style={{ '--slider-pct': String(pct) } as Record<string, string>}\n        >\n          <div class=\"track-inner\">\n            <div class=\"fill-track\"><div class=\"fill\" /></div>\n            <div class=\"thumb\" />\n          </div>\n          <input\n            type=\"range\"\n            id={finalId}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            disabled={this.inactive}\n            class=\"range-input\"\n            aria-valuetext={this.valueText}\n            onInput={this.handleInput}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAY,IAAM,wqFCExB,IAAIC,EAAY,E,MAOHC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6EAMUC,KAAAC,YAAc,eAAeP,IAE7BM,KAAAE,MAAgB,EAChBF,KAAAG,IAAc,EACdH,KAAAI,IAAc,IACdJ,KAAAK,KAAe,EAEfL,KAAAM,SAAoB,MAOpBN,KAAAO,YAAeC,IACrBR,KAAKS,SAASC,KAAKC,OAAQH,EAAEI,OAA4BV,OAAO,CA0CnE,CAvCC,OAAYW,GACV,MAAMC,EAAQd,KAAKI,IAAMJ,KAAKG,IAC9B,OAAOW,IAAU,EAAI,EAAIC,KAAKC,OAAQhB,KAAKE,MAAQF,KAAKG,KAAOW,EAAS,I,CAG1E,MAAAG,GACE,MAAMC,EAAUlB,KAAKmB,SAAWnB,KAAKC,YACrC,MAAMY,EAAMb,KAAKa,IAEjB,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,SACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,2BAA2BC,QAASN,GAAUlB,KAAKyB,OAChEL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,4BAA4BvB,KAAKE,QAE/CkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAEG,MAAO,KAAM,kBAAmB1B,KAAKM,SAAU,gBAAiBO,IAAQ,GACjFc,MAAO,CAAE,eAAgBC,OAAOf,KAEhCO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAaH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACnCH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAEbH,EAAA,SAAAE,IAAA,2CACEO,KAAK,QACLC,GAAIZ,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZ6B,SAAU/B,KAAKM,SACfiB,MAAM,cAAa,iBACHvB,KAAKgC,UACrBC,QAASjC,KAAKO,e","ignoreList":[]}
+{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","isInactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","htmlFor","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n}\n\n.track-inner {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: 0;\n  bottom: var(--dimension-space-025);\n  left: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.fill {\n  position: absolute;\n  left: var(--dimension-space-025);\n  top: 0;\n  bottom: 0;\n  width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n  background-color: var(--color-background-bold-brand);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  pointer-events: none;\n}\n\n.track--at-min .fill {\n  opacity: 0;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n  width: var(--dimension-size-150);\n  padding: var(--dimension-space-025);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.thumb::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: transparent;\n  border-radius: var(--dimension-radius-050);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.track:hover:not(.ds-control-inactive) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.ds-control-inactive) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  z-index: 3;\n}\n\n.range-input:disabled {\n  cursor: not-allowed;\n}\n\n.range-input:hover {\n  cursor: grab;\n}\n\n.range-input:active {\n  cursor: grabbing;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity) on `.track`. */\n\n.track:focus-within .track-inner {\n  box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n})\nexport class Slider {\n  private generatedId = `ds-slider-${++idCounter}`;\n\n  @Prop() value: number = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() label!: string;\n  @Prop() isInactive: boolean = false;\n  @Prop() valueText: string | undefined;\n  /** Associates with an external <label>. Defaults to an auto-generated ID. */\n  @Prop() inputId: string | undefined;\n\n  @Event() dsChange!: EventEmitter<number>;\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private get pct() {\n    const range = this.max - this.min;\n    return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n  }\n\n  render() {\n    const finalId = this.inputId ?? this.generatedId;\n    const pct = this.pct;\n\n    return (\n      <Host class=\"field\">\n        <div class=\"label-row\">\n          <label class=\"text-body-small-emphasis\" htmlFor={finalId}>{this.label}</label>\n          <span class=\"text-body-small-emphasis\">{this.value}</span>\n        </div>\n        <div\n          class={{\n            track: true,\n            'ds-control-inactive': this.isInactive,\n            'track--at-min': pct === 0,\n          }}\n          style={{ '--slider-pct': String(pct) } as Record<string, string>}\n        >\n          <div class=\"track-inner\">\n            <div class=\"fill-track\"><div class=\"fill\" /></div>\n            <div class=\"thumb\" />\n          </div>\n          <input\n            type=\"range\"\n            id={finalId}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            disabled={this.isInactive}\n            class=\"range-input\"\n            aria-valuetext={this.valueText}\n            onInput={this.handleInput}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAY,IAAM,+vFCExB,IAAIC,EAAY,E,MAOHC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6EAMUC,KAAAC,YAAc,eAAeP,IAE7BM,KAAAE,MAAgB,EAChBF,KAAAG,IAAc,EACdH,KAAAI,IAAc,IACdJ,KAAAK,KAAe,EAEfL,KAAAM,WAAsB,MAOtBN,KAAAO,YAAeC,IACrBR,KAAKS,SAASC,KAAKC,OAAQH,EAAEI,OAA4BV,OAAO,CA8CnE,CA3CC,OAAYW,GACV,MAAMC,EAAQd,KAAKI,IAAMJ,KAAKG,IAC9B,OAAOW,IAAU,EAAI,EAAIC,KAAKC,OAAQhB,KAAKE,MAAQF,KAAKG,KAAOW,EAAS,I,CAG1E,MAAAG,GACE,MAAMC,EAAUlB,KAAKmB,SAAWnB,KAAKC,YACrC,MAAMY,EAAMb,KAAKa,IAEjB,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,SACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,2BAA2BC,QAASN,GAAUlB,KAAKyB,OAChEL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,4BAA4BvB,KAAKE,QAE/CkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLG,MAAO,KACP,sBAAuB1B,KAAKM,WAC5B,gBAAiBO,IAAQ,GAE3Bc,MAAO,CAAE,eAAgBC,OAAOf,KAEhCO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAaH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACnCH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAEbH,EAAA,SAAAE,IAAA,2CACEO,KAAK,QACLC,GAAIZ,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZ6B,SAAU/B,KAAKM,WACfiB,MAAM,cAAa,iBACHvB,KAAKgC,UACrBC,QAASjC,KAAKO,e","ignoreList":[]}

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

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