@ds-mo/ui 4.1.2 → 5.0.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-CHcS6Z4V.js";import{d as r}from"./p-B2J0Kelv.js";import{d}from"./p-9Qu1ls2y.js";import{d as c}from"./p-emacH2W5.js";import{d as p}from"./p-B_72yZ43.js";const h=["search","agents","messages","stacks","activity","help"];const f="search";const g="help";const u={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const b={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"?"};function m(e,t){if(t){return n(t,[])}return e??[]}function _(e){const t=new Map;for(const s of e){if(!t.has(s.id))t.set(s.id,s)}return h.flatMap((e=>{const s=t.get(e);return s?[s]:[]}))}function v(e){return e!==null&&h.includes(e)}function y(e,t,s){if(!s||e.some((e=>e.id===s))){return{open:t,activeTool:s,removedTool:""}}return{open:false,activeTool:"",removedTool:s}}function w(e,t){return!e&&t==="idle"}function x(e,t,s){if(e&&t===s){return{open:false,activeTool:s,selected:false}}return{open:true,activeTool:s,selected:true}}const k=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(     --ds-shell-panel-tools-width,     var(--dimension-panel-width-sm)   );--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell.sc-ds-panel-tools-h:not([gradient-preset='none']) .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell.sc-ds-panel-tools-h:not([gradient-preset='none']) .panel-tools__rail.sc-ds-panel-tools,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}ds-text.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools__body.sc-ds-panel-tools{opacity:0;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--open.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{opacity:1}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-footer.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:auto;padding:var(--dimension-space-100);box-sizing:border-box}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const T=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=s(this,"dsToolChange");this.dsChromeTransitionStart=s(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=s(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.storageKey="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const t=x(this.open,this.activeTool,e);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:e,selected:t.selected})};this.handleRailKeyDown=(e,t)=>{const s=this.orderedRailItems;if(!s.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(s[t].id);return}if(e.key==="ArrowDown"){if(t>=s.length-1)return;e.preventDefault();this.focusRailAt(t+1);return}if(e.key==="ArrowUp"){if(t<=0)return;e.preventDefault();this.focusRailAt(t-1)}}}get railItems(){return m(this.items,this.itemsJson)}get orderedRailItems(){const e=_(this.railItems);const t=e.find((e=>e.id===f));const s=e.find((e=>e.id===g));const o=e.filter((e=>e.id!==f&&e.id!==g));const a=[];if(t)a.push(t);a.push(...o);if(s)a.push(s);return a}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}componentWillLoad(){this.restoreLastActiveTool()}openChanged(e,t){if(this.readyForMotion&&t!==undefined&&t!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const e=localStorage.getItem(this.storageKey);if(v(e))this.activeTool=e}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const e=y(this.railItems,this.open,this.activeTool);if(!e.removedTool)return;this.clearPersistedTool();this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:e.removedTool,selected:false})}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return u[this.activeTool]??""}async activateTool(e){const t=this.railItems.find((t=>t.id===e));if(!t||t.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const t=this.orderedRailItems;if(!t.length)return;const s=Math.max(0,Math.min(e,t.length-1));if(s===this.rovingIndex)return;this.rovingIndex=s;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[s]?.focus({preventScroll:true})}renderRailAction(e,t){const s=e.ariaLabel??u[e.id];return o("ds-tooltip",{key:e.id,label:s,shortcutKey:b[e.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:t===this.rovingIndex?0:-1,"aria-label":s,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=t},onKeyDown:e=>this.handleRailKeyDown(e,t),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const t=this.orderedRailItems;const s=t.find((e=>e.id===f));const i=t.find((e=>e.id===g));const n=t.filter((e=>e.id!==f&&e.id!==g));const l=i?(s?1:0)+n.length:-1;const r=this.isDrawerPresent();const d=w(this.open,this.motion);return o(a,{key:"bc622c7d1a89640492a2a0b8af6a36cdd317bd6f",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":d},role:"complementary","aria-label":this.toolsLabel},o("div",{key:"3d8998d4092f3d7afd0f18e2ce7fb7f9a543ba24",class:"panel-tools__layout"},o("nav",{key:"14e8f172c024794110b3121b39463dad18f7f3ff",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},s?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(s,0)):null,o("div",{key:"d2fb3f4861d4e0dce409445321d3454782a1fefb",class:"panel-tools__rail-body"},n.map(((e,t)=>this.renderRailAction(e,s?t+1:t)))),i?o("div",{class:"panel-tools__rail-footer"},this.renderRailAction(i,l)):null),o("div",{key:"78791330056be1bbd85a0e7982e70dccfe1c2b84",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":r},"aria-hidden":r?null:"true",inert:r?undefined:true},o("div",{key:"c43059deb82ef2d5a47ae6af561e8f8b045462d3",class:"panel-tools__drawer-surface"},o("header",{key:"9ef751e7aa6a5dc960acede5d95a44b333b893f7",class:"panel-tools__header"},o("ds-text",{key:"429adbc38ffe20bf5574f398de845f6f53a65782",class:"panel-tools__title",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},e)),o("div",{key:"9a08e03155dc34c27e3029467491ff6884c8a749",class:"panel-tools__body"},o("div",{key:"832ce9f7ba05a9392a8efdef0f23e1ddd617ca20",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search")},hidden:!this.isViewActive("search")},o("slot",{key:"3044318c7efbc364bab85b5fe8142fa6e1801821",name:"search"})),o("div",{key:"5f37c7018619a268baf80c0b779c9a0dbb54ec61",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages")},hidden:!this.isViewActive("messages")},o("slot",{key:"91d8ef3c24d06b17805289aba4343ef85bd89644",name:"messages"})),o("div",{key:"f6eb9f300e92bdc577ba5c881e255825574969be",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks")},hidden:!this.isViewActive("stacks")},o("slot",{key:"1cd01901a4a168edb4ebd29afc99dcc2d16dc7ab",name:"stacks"})),o("div",{key:"c52cb74f160e3d52808e4ce02f07898016303fc3",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity")},hidden:!this.isViewActive("activity")},o("slot",{key:"2c196413b27bd9d46575527f3a2a11dc3801ded4",name:"activity"})),o("div",{key:"d508248557e9b1988138208206b0edf62258b2af",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents")},hidden:!this.isViewActive("agents")},o("slot",{key:"dcce07a3efe83c6e75bc1d430dfec10135318dee",name:"agents"})),o("div",{key:"709a131c1e6f61c0f5b07dc4b835bd6dbc03310f",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("help")},hidden:!this.isViewActive("help")},o("slot",{key:"163db81e6ba14dae41c5a8a2ada3977e0d4c6327",name:"help"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return k()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],storageKey:[1,"storage-key"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function z(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),T)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break;case"ds-text":if(!customElements.get(i(e))){c()}break;case"ds-tooltip":if(!customElements.get(i(e))){p()}break}}))}z();const C=T;const A=z;export{C as DsPanelTools,A as defineCustomElement};
+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-K6uLVQKX.js";import{d as r}from"./p-BX7jIHFD.js";import{d as c}from"./p-9Qu1ls2y.js";import{d}from"./p-CKjNw4Tl.js";import{d as p}from"./p-D-7A_rRS.js";const h=["search","agents","messages","stacks","activity","help"];const f="search";const g="help";const b={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const u={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"?"};function m(e,t){if(t){return n(t,[])}return e??[]}function _(e){const t=new Map;for(const s of e){if(!t.has(s.id))t.set(s.id,s)}return h.flatMap((e=>{const s=t.get(e);return s?[s]:[]}))}function v(e){return e!==null&&h.includes(e)}function y(e,t,s){if(!s||e.some((e=>e.id===s))){return{open:t,activeTool:s,removedTool:""}}return{open:false,activeTool:"",removedTool:s}}function w(e,t){return!e&&t==="idle"}function x(e,t,s){if(e&&t===s){return{open:false,activeTool:s,selected:false}}return{open:true,activeTool:s,selected:true}}const k=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(     --ds-shell-panel-tools-width,     var(--dimension-panel-width-sm)   );--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell.sc-ds-panel-tools-h:not([gradient-preset='none']) .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell.sc-ds-panel-tools-h:not([gradient-preset='none']) .panel-tools__rail.sc-ds-panel-tools,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}ds-text.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools__body.sc-ds-panel-tools{opacity:0;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{transition:opacity var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h ds-text.panel-tools__title.sc-ds-panel-tools,.panel-tools--open.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{opacity:1}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-footer.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:auto;padding:var(--dimension-space-100);box-sizing:border-box}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const T=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=s(this,"dsToolChange");this.dsChromeTransitionStart=s(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=s(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.storageKey="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const t=x(this.open,this.activeTool,e);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:e,selected:t.selected})};this.handleRailKeyDown=(e,t)=>{const s=this.orderedRailItems;if(!s.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(s[t].id);return}if(e.key==="ArrowDown"){if(t>=s.length-1)return;e.preventDefault();this.focusRailAt(t+1);return}if(e.key==="ArrowUp"){if(t<=0)return;e.preventDefault();this.focusRailAt(t-1)}}}get railItems(){return m(this.items,this.itemsJson)}get orderedRailItems(){const e=_(this.railItems);const t=e.find((e=>e.id===f));const s=e.find((e=>e.id===g));const o=e.filter((e=>e.id!==f&&e.id!==g));const a=[];if(t)a.push(t);a.push(...o);if(s)a.push(s);return a}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}componentWillLoad(){this.restoreLastActiveTool()}openChanged(e,t){if(this.readyForMotion&&t!==undefined&&t!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const e=localStorage.getItem(this.storageKey);if(v(e))this.activeTool=e}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const e=y(this.railItems,this.open,this.activeTool);if(!e.removedTool)return;this.clearPersistedTool();this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:e.removedTool,selected:false})}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return b[this.activeTool]??""}async activateTool(e){const t=this.railItems.find((t=>t.id===e));if(!t||t.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const t=this.orderedRailItems;if(!t.length)return;const s=Math.max(0,Math.min(e,t.length-1));if(s===this.rovingIndex)return;this.rovingIndex=s;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[s]?.focus({preventScroll:true})}renderRailAction(e,t){const s=e.ariaLabel??b[e.id];return o("ds-tooltip",{key:e.id,label:s,shortcutKey:u[e.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:t===this.rovingIndex?0:-1,"aria-label":s,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=t},onKeyDown:e=>this.handleRailKeyDown(e,t),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const t=this.orderedRailItems;const s=t.find((e=>e.id===f));const i=t.find((e=>e.id===g));const n=t.filter((e=>e.id!==f&&e.id!==g));const l=i?(s?1:0)+n.length:-1;const r=this.isDrawerPresent();const c=w(this.open,this.motion);return o(a,{key:"45a427a44127051a6eb49b71f36926e952e9fea2",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":c},role:"complementary","aria-label":this.toolsLabel},o("div",{key:"cc38b18d45676edd28e5c843658f9e46838838e5",class:"panel-tools__layout"},o("nav",{key:"695402ce7863b64e325c410321269e27b333124c",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},s?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(s,0)):null,o("div",{key:"b6b189e36980b048ce98267dc7218c3de579cf40",class:"panel-tools__rail-body"},n.map(((e,t)=>this.renderRailAction(e,s?t+1:t)))),i?o("div",{class:"panel-tools__rail-footer"},this.renderRailAction(i,l)):null),o("div",{key:"2b1494666c5515aa4976327ba4fc0bc0f3f44e80",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":r},"aria-hidden":r?null:"true",inert:r?undefined:true},o("div",{key:"376c7f0369f6ae8cc7cbc02fbb54507a69a891df",class:"panel-tools__drawer-surface"},o("header",{key:"e5d235c5fec7258d535112cebb76738ca0ecb618",class:"panel-tools__header"},o("ds-text",{key:"8e2780b986bbd4da7c57eb81b02160ee24c64bcd",class:"panel-tools__title",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},e)),o("div",{key:"82d1bd00c1ab8abdd1ca1a82340bcb52dc489f21",class:"panel-tools__body"},o("div",{key:"56122d80a50c692cbaa4cdf3b9df06d6de14075b",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search")},hidden:!this.isViewActive("search")},o("slot",{key:"cbb51667c98cba3dde81562f069551e965c2e8e9",name:"search"})),o("div",{key:"a9f7cf98275bdc7446809e683e49514f803ca7fe",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages")},hidden:!this.isViewActive("messages")},o("slot",{key:"b626620c8b63f646714bc0e25f809c0efc3da909",name:"messages"})),o("div",{key:"fc5bac9979e6c4333786ed1e3fc8af2d5e331aee",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks")},hidden:!this.isViewActive("stacks")},o("slot",{key:"68e9b6467411ea2c303812789475a5119e393b32",name:"stacks"})),o("div",{key:"e3d37d2f060a72526f98eefc0f732de0537ad9d9",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity")},hidden:!this.isViewActive("activity")},o("slot",{key:"2dcff8598b4461ce0f770bbe78fa34c52c3f9757",name:"activity"})),o("div",{key:"f48bb05212e657dc36aef97eeb8897cfb6c3fc92",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents")},hidden:!this.isViewActive("agents")},o("slot",{key:"72dc9bb8fdf4216f5604155035281f91d6f96503",name:"agents"})),o("div",{key:"74bbb52cb1b95864ff87cf103ec11dc4d8b065cd",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("help")},hidden:!this.isViewActive("help")},o("slot",{key:"df55f3f9fd5f0ad98eaac83f583ea24c07c1983d",name:"help"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return k()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],storageKey:[1,"storage-key"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function z(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),T)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){c()}break;case"ds-text":if(!customElements.get(i(e))){d()}break;case"ds-tooltip":if(!customElements.get(i(e))){p()}break}}))}z();const C=T;const A=z;export{C as DsPanelTools,A as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

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

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

package/dist/components/ds-select.js

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

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

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

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

@@ -1 +1 @@
-{"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","as","variant","emphasis","for","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          <ds-text as=\"label\" variant=\"text-body-small\" emphasis for={finalId}>\n            {this.label}\n          </ds-text>\n          <ds-text as=\"span\" variant=\"text-body-small\" emphasis>\n            {this.value}\n          </ds-text>\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":"iGAAA,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,CAkDnE,CA/CC,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,WAAAE,IAAA,2CAASE,GAAG,QAAQC,QAAQ,kBAAkBC,SAAQ,KAACC,IAAKT,GACzDlB,KAAK4B,OAERR,EAAA,WAAAE,IAAA,2CAASE,GAAG,OAAOC,QAAQ,kBAAkBC,SAAQ,MAClD1B,KAAKE,QAGVkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLM,MAAO,KACP,sBAAuB7B,KAAKM,WAC5B,gBAAiBO,IAAQ,GAE3BiB,MAAO,CAAE,eAAgBC,OAAOlB,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,2CACEU,KAAK,QACLC,GAAIf,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZgC,SAAUlC,KAAKM,WACfiB,MAAM,cAAa,iBACHvB,KAAKmC,UACrBC,QAASpC,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","as","variant","emphasis","for","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          <ds-text as=\"label\" variant=\"text-body-small\" emphasis for={finalId}>\n            {this.label}\n          </ds-text>\n          <ds-text as=\"span\" variant=\"text-body-small\" emphasis>\n            {this.value}\n          </ds-text>\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":"sGAAA,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,CAkDnE,CA/CC,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,WAAAE,IAAA,2CAASE,GAAG,QAAQC,QAAQ,kBAAkBC,SAAQ,KAACC,IAAKT,GACzDlB,KAAK4B,OAERR,EAAA,WAAAE,IAAA,2CAASE,GAAG,OAAOC,QAAQ,kBAAkBC,SAAQ,MAClD1B,KAAKE,QAGVkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLM,MAAO,KACP,sBAAuB7B,KAAKM,WAC5B,gBAAiBO,IAAQ,GAE3BiB,MAAO,CAAE,eAAgBC,OAAOlB,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,2CACEU,KAAK,QACLC,GAAIf,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZgC,SAAUlC,KAAKM,WACfiB,MAAM,cAAa,iBACHvB,KAAKmC,UACrBC,QAASpC,KAAKO,e","ignoreList":[]}

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

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

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

@@ -1,2 +1,2 @@
-import{p as o,H as r,c as t,h as i,a as n,t as e}from"./index.js";import{g as s,i as a}from"./p-BQq26pt9.js";import{d}from"./p-CHcS6Z4V.js";import{d as c}from"./p-emacH2W5.js";const l=()=>`.sc-ds-tab-group-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-tab-group: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-tab-group{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-tab-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group: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-tab-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group::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-tab-group-h,.ds-interaction-fill.sc-ds-tab-group{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-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before,.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before{z-index:1}.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::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-tab-group-h,.ds-interaction-fill--bordered.sc-ds-tab-group{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tab-group-h,.ds-interaction-fill--selected.sc-ds-tab-group{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tab-group-h>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill.sc-ds-tab-group>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill__content.sc-ds-tab-group{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-tab-group-h,.ds-interaction-fill--on-medium.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-bold.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-strong.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-always-dark.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-navigation.sc-ds-tab-group{--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-tab-group-h,.ds-control-inactive.sc-ds-tab-group{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:none;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width:var(--dimension-size-400);box-sizing:border-box;--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.tab--selected.sc-ds-tab-group:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;z-index:2;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;z-index:2;pointer-events:none}.on-medium.sc-ds-tab-group{--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group{--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch;padding:0}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const u=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value="";this.tabs=[];this.ariaLabel=null;this.orientation="horizontal"}get selectableTabs(){return s(this.tabs)}selectTab(o,r){this.value=o;this.dsChange.emit(o);if(r?.focus!==false){this.focusTab(o)}}focusTab(o){const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}onValueChange(o,r){if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const i=this.el.querySelector(`[data-tab-id="${o}"]`);if(i){i.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const i=t.length;for(let n=0;n<i;n++){const e=(o+r*(n+1)+i*(n+1))%i;if(!t[e]?.isInactive)return e}return o}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;const t=r.findIndex((o=>o.id===this.value));const i=this.orientation==="vertical";let n=null;if(!i){if(o.key==="ArrowRight"){n=this.findEnabled(t,1)}else if(o.key==="ArrowLeft"){n=this.findEnabled(t,-1)}}else{if(o.key==="ArrowDown"){n=this.findEnabled(t,1)}else if(o.key==="ArrowUp"){n=this.findEnabled(t,-1)}}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:r.length-1-o}if(n!==null){o.preventDefault();const t=r[n];this.selectTab(t.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();const r=this.orientation==="vertical";return i(n,{key:"1bf9c956e3437fbb6c1aa68bae15379bc1a0c453",class:"tab-group-host"},i("div",{key:"6a79ed8d0cb0b302103454d917f498d466292581",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((t,n)=>{if(a(t)){return i("div",{key:`divider-${n}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},i("div",{class:"tab-divider__line"}))}const e=t.id===this.value;return i("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":e,"ds-focus-ring-inset":true,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--on-medium":o==="on-medium","ds-interaction-fill--on-bold":o==="on-bold","ds-interaction-fill--on-strong":o==="on-strong","ds-interaction-fill--on-always-dark":o==="on-always-dark","ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-selected":e,"aria-disabled":t.isInactive?"true":undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:e?0:-1,onClick:()=>!t.isInactive&&this.selectTab(t.id)},i("span",{class:{tab__label:true,"tab__label--dot":!!t.dot}},i("ds-text",{as:"span",variant:"text-body-small",emphasis:e,color:"inherit"},t.label),t.dot&&i("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return l()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group","ds-badge","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(e(o))){customElements.define(e(o),u)}break;case"ds-badge":if(!customElements.get(e(o))){d()}break;case"ds-text":if(!customElements.get(e(o))){c()}break}}))}b();const g=u;const f=b;export{g as DsTabGroup,f as defineCustomElement};
+import{p as o,H as r,c as t,h as i,a as n,t as e}from"./index.js";import{g as s,i as a}from"./p-BQq26pt9.js";import{d}from"./p-K6uLVQKX.js";import{d as c}from"./p-CKjNw4Tl.js";const l=()=>`.sc-ds-tab-group-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-tab-group: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-tab-group{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-tab-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group: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-tab-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group::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-tab-group-h,.ds-interaction-fill.sc-ds-tab-group{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-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before,.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before{z-index:1}.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::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-tab-group-h,.ds-interaction-fill--bordered.sc-ds-tab-group{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tab-group-h,.ds-interaction-fill--selected.sc-ds-tab-group{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-tab-group-h>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill.sc-ds-tab-group>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill__content.sc-ds-tab-group{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-tab-group-h,.ds-interaction-fill--on-medium.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-bold.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-strong.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-always-dark.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-navigation.sc-ds-tab-group{--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-tab-group-h,.ds-control-inactive.sc-ds-tab-group{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-050);background-color:transparent;border:none;border-radius:var(--dimension-radius-half);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-300);min-width:var(--dimension-size-400);box-sizing:border-box;--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.tab--selected.sc-ds-tab-group:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;z-index:2;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;z-index:2;pointer-events:none}.on-medium.sc-ds-tab-group{--_dot-ring:var(--color-background-medium-neutral)}.on-bold.sc-ds-tab-group{--_dot-ring:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_dot-ring:var(--color-background-strong-neutral);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch;padding:0}.tab-divider--vertical.sc-ds-tab-group .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const u=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value="";this.tabs=[];this.ariaLabel=null;this.orientation="horizontal"}get selectableTabs(){return s(this.tabs)}selectTab(o,r){this.value=o;this.dsChange.emit(o);if(r?.focus!==false){this.focusTab(o)}}focusTab(o){const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}onValueChange(o,r){if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const i=this.el.querySelector(`[data-tab-id="${o}"]`);if(i){i.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const i=t.length;for(let n=0;n<i;n++){const e=(o+r*(n+1)+i*(n+1))%i;if(!t[e]?.isInactive)return e}return o}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;const t=r.findIndex((o=>o.id===this.value));const i=this.orientation==="vertical";let n=null;if(!i){if(o.key==="ArrowRight"){n=this.findEnabled(t,1)}else if(o.key==="ArrowLeft"){n=this.findEnabled(t,-1)}}else{if(o.key==="ArrowDown"){n=this.findEnabled(t,1)}else if(o.key==="ArrowUp"){n=this.findEnabled(t,-1)}}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:r.length-1-o}if(n!==null){o.preventDefault();const t=r[n];this.selectTab(t.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();const r=this.orientation==="vertical";return i(n,{key:"ac600137a67c545c2ff3ef65ce79cc6ebd70c5df",class:"tab-group-host"},i("div",{key:"281bd8e813297eb1ba4c074ce747ba4e17957aca",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((t,n)=>{if(a(t)){return i("div",{key:`divider-${n}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},i("div",{class:"tab-divider__line"}))}const e=t.id===this.value;return i("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":e,"ds-focus-ring-inset":true,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--on-medium":o==="on-medium","ds-interaction-fill--on-bold":o==="on-bold","ds-interaction-fill--on-strong":o==="on-strong","ds-interaction-fill--on-always-dark":o==="on-always-dark","ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-selected":e,"aria-disabled":t.isInactive?"true":undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:e?0:-1,onClick:()=>!t.isInactive&&this.selectTab(t.id)},i("span",{class:{tab__label:true,"tab__label--dot":!!t.dot}},i("ds-text",{as:"span",variant:"text-body-small",emphasis:e,color:"inherit"},t.label),t.dot&&i("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return l()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group","ds-badge","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(e(o))){customElements.define(e(o),u)}break;case"ds-badge":if(!customElements.get(e(o))){d()}break;case"ds-text":if(!customElements.get(e(o))){c()}break}}))}b();const g=u;const f=b;export{g as DsTabGroup,f as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map

package/dist/components/ds-table.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as a,a as r,t as i}from"./index.js";import{d as o}from"./p-emacH2W5.js";const n=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-background-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.skeleton.sc-ds-table{height:var(--typography-fontsize-md);width:60%;background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-050);animation:shimmer var(--effect-animation-duration-long-2) var(--effect-animation-easing-ease-in-out) infinite}@keyframes shimmer{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function d(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s,a){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return a.compare(String(e),String(t))*r}const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.loadingLabel="Loading";this.previousPageLabel="Previous";this.nextPageLabel="Next";this.pageStatusLabel="Page {page} of {total}";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,a)=>c(d(t,s),d(t,a),e.direction,new Intl.Collator(this.locale))))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:i}=this;const o=!i&&t.length===0;const n=this.selectedSet;const c=this.activeSort;const l=this.pageIndex!==undefined&&s>1;return a(r,{key:"670bd0eb966b11559596f9e807d6b104dcedc16f"},a("div",{key:"b367957920a44f2ce370b022e6a0fed02550214c",class:"table-wrapper","aria-busy":i||undefined},a("div",{key:"15eeba11ed1f66c487052e4dac418bd8f4e682de",class:"table-scroll"},a("div",{key:"c798eef7fd4143067a1f22119f605bbe3f7ec96c",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},a("div",{key:"827b3265b70a5386eee26a9e18ba9b76b81472d4",class:"header-row",role:"row"},e.map((e=>{const t=c?.columnId===e.id;const s=e.sortable?t?c.direction==="asc"?"ascending":"descending":"none":undefined;return a("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},a("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"secondary"},e.header),t&&a("span",{class:"sort-indicator","aria-hidden":"true"},c.direction==="asc"?"↑":"↓"))}))),i&&Array.from({length:5}).map(((t,s)=>a("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?this.loadingLabel:undefined},e.map((e=>a("div",{key:e.id,class:"cell",role:"cell"},a("div",{class:"skeleton"}))))))),o&&a("ds-text",{key:"2bd929dbea421487a37cc64caf5be1777f65f4b9",class:"empty-row",as:"p",variant:"text-body-medium",color:"secondary",style:{gridColumn:"1 / -1"}},this.emptyMessage),!i&&t.map(((t,s)=>{const r=n.has(s);return a("div",{key:s,class:{row:true,"row--selected":r,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?r:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>a("ds-text",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},as:"span",variant:"text-body-medium",lineTruncation:1,role:"cell"},String(d(e,t)??"")))))})))),l&&a("div",{key:"260449723910be2ef635e9183d9939fb2158571c",class:"table-pagination"},a("button",{key:"dce340a6669ed961f0eaa248e41ea6793d1eea29",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"275e54d71ec7f23e9443343b07f38abf0f4c03ff",as:"span",variant:"text-body-small"},this.previousPageLabel)),a("ds-text",{key:"83f34e70c0a341000bd1c47fa05ccfeb868257dd",as:"span",variant:"text-body-small",color:"secondary"},this.pageStatusLabel.replace("{page}",String(this.pageIndex+1)).replace("{total}",String(s))),a("button",{key:"9deb8171215c6653a42d59d8c262dbfa86f73834",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"e3454dccc3485f3fee42e5f0c0ec8a2b7393cf79",as:"span",variant:"text-body-small"},this.nextPageLabel)))))}static get style(){return n()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],loadingLabel:[1,"loading-label"],previousPageLabel:[1,"previous-page-label"],nextPageLabel:[1,"next-page-label"],pageStatusLabel:[1,"page-status-label"],locale:[1],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-table","ds-text"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(i(e))){customElements.define(i(e),l)}break;case"ds-text":if(!customElements.get(i(e))){o()}break}}))}b();const u=l;const h=b;export{u as DsTable,h as defineCustomElement};
+import{p as e,H as t,c as s,h as a,a as r,t as i}from"./index.js";import{d as o}from"./p-BeIuJQO9.js";import{d as n}from"./p-CKjNw4Tl.js";const d=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-translucent-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function l(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s,a){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return a.compare(String(e),String(t))*r}const b=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.loadingLabel="Loading";this.previousPageLabel="Previous";this.nextPageLabel="Next";this.pageStatusLabel="Page {page} of {total}";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,a)=>c(l(t,s),l(t,a),e.direction,new Intl.Collator(this.locale))))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:i}=this;const o=!i&&t.length===0;const n=this.selectedSet;const d=this.activeSort;const c=this.pageIndex!==undefined&&s>1;return a(r,{key:"ad7672998fa0dc6813baddc301d869d85f8ad361"},a("div",{key:"061d981229fb1f0afcc43f3bb3c6f334f73740f6",class:"table-wrapper","aria-busy":i||undefined},a("div",{key:"04701c4d8d7239c5fd3d5e7ea4af2f5be9a9702e",class:"table-scroll"},a("div",{key:"3faef7e102ac70b4d658e8436426c3afbc8739a7",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},a("div",{key:"c738a79b1f7b19b9cb69c1fca8377cb40e65474b",class:"header-row",role:"row"},e.map((e=>{const t=d?.columnId===e.id;const s=e.sortable?t?d.direction==="asc"?"ascending":"descending":"none":undefined;return a("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},a("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"secondary"},e.header),t&&a("span",{class:"sort-indicator","aria-hidden":"true"},d.direction==="asc"?"↑":"↓"))}))),i&&Array.from({length:5}).map(((t,s)=>a("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?this.loadingLabel:undefined},e.map((e=>a("div",{key:e.id,class:"cell",role:"cell"},a("ds-skeleton",{variant:"text",width:"60%"}))))))),o&&a("ds-text",{key:"a65d3efe761e7988b4e6aeeeeb7982594928dea2",class:"empty-row",as:"p",variant:"text-body-medium",color:"secondary",style:{gridColumn:"1 / -1"}},this.emptyMessage),!i&&t.map(((t,s)=>{const r=n.has(s);return a("div",{key:s,class:{row:true,"row--selected":r,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?r:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>a("ds-text",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},as:"span",variant:"text-body-medium",lineTruncation:1,role:"cell"},String(l(e,t)??"")))))})))),c&&a("div",{key:"17f90fa0fedd7b59354c5a11b14447aca7bea843",class:"table-pagination"},a("button",{key:"b728a6f34a89b1f5e95a99fadfeaf52dc58b50ff",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"a1bd7fa43a978438332ae9c1c37f8c31584cb2bd",as:"span",variant:"text-body-small"},this.previousPageLabel)),a("ds-text",{key:"eb612af325fa936a0f35d6434d36e9506fa6a0d9",as:"span",variant:"text-body-small",color:"secondary"},this.pageStatusLabel.replace("{page}",String(this.pageIndex+1)).replace("{total}",String(s))),a("button",{key:"0444a0e7a6c7a5fda2aa4d953815dbcd80f5b256",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},a("ds-text",{key:"7caa3ae47c92e6c50633c216c82cd304a681c78c",as:"span",variant:"text-body-small"},this.nextPageLabel)))))}static get style(){return d()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],loadingLabel:[1,"loading-label"],previousPageLabel:[1,"previous-page-label"],nextPageLabel:[1,"next-page-label"],pageStatusLabel:[1,"page-status-label"],locale:[1],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-table","ds-skeleton","ds-text"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(i(e))){customElements.define(i(e),b)}break;case"ds-skeleton":if(!customElements.get(i(e))){o()}break;case"ds-text":if(!customElements.get(i(e))){n()}break}}))}u();const h=b;const f=u;export{h as DsTable,f as defineCustomElement};
 //# sourceMappingURL=ds-table.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","collator","m","compare","String","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","loadingLabel","previousPageLabel","nextPageLabel","pageStatusLabel","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","Intl","Collator","locale","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","as","variant","emphasis","color","header","Array","from","_","i","gridColumn","rowIndex","isSelected","has","dsRowClick","cell","lineTruncation","type","disabled","dsPageChange","replace"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.table-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n  overflow-x: auto;\n  width: 100%;\n}\n\n.table {\n  display: grid;\n  width: 100%;\n  min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n  display: contents;\n}\n\n.header-cell {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.header-cell--sortable {\n  cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n  background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n  display: contents;\n}\n\n.row--clickable {\n  cursor: pointer;\n}\n\n.row:hover .cell {\n  background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n  background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n  background-color: var(--color-interaction-hover);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  min-height: var(--dimension-size-500);\n  background-color: var(--color-background-primary);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.align-center {\n  justify-content: center;\n  text-align: center;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-400);\n  background-color: var(--color-background-primary);\n}\n\n/* ─── Loading skeleton ──────────────────────────────────────────────────────── */\n\n.skeleton {\n  height: var(--typography-fontsize-md);\n  width: 60%;\n  background-color: var(--color-background-translucent);\n  border-radius: var(--dimension-radius-050);\n  animation: shimmer var(--effect-animation-duration-long-2) var(--effect-animation-easing-ease-in-out) infinite;\n}\n\n@keyframes shimmer {\n  0%   { opacity: 0.5; }\n  50%  { opacity: 1; }\n  100% { opacity: 0.5; }\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-100);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  background-color: var(--color-background-primary);\n}\n\n.page-button {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n  id: string;\n  header: string;\n  accessorKey?: string;\n  accessor?: (row: T) => unknown;\n  sortable?: boolean;\n  align?: 'left' | 'right' | 'center';\n  width?: string | number;\n  minWidth?: string | number;\n  hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n  if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n  if (col.accessor) return col.accessor(row);\n  return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection, collator: Intl.Collator): number {\n  const m = dir === 'asc' ? 1 : -1;\n  if (a == null && b == null) return 0;\n  if (a == null) return m;\n  if (b == null) return -m;\n  if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n  return collator.compare(String(a), String(b)) * m;\n}\n\n@Component({\n  tag: 'ds-table',\n  styleUrl: 'Table.css',\n  scoped: true,\n})\nexport class Table {\n  @Prop() columns: TableColumn[] = [];\n  @Prop() data: unknown[] = [];\n  @Prop() sortState: SortState | undefined;\n  @Prop() loading: boolean = false;\n  @Prop() emptyMessage: string = 'No results found.';\n  @Prop() loadingLabel: string = 'Loading';\n  @Prop() previousPageLabel: string = 'Previous';\n  @Prop() nextPageLabel: string = 'Next';\n  /** Use `{page}` and `{total}` placeholders. */\n  @Prop() pageStatusLabel: string = 'Page {page} of {total}';\n  @Prop() locale: string | undefined;\n  /** Comma-separated zero-based row indices that are selected. */\n  @Prop() selectedRows: string = '';\n  /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n  @Prop({ mutable: true }) pageIndex: number | undefined;\n  @Prop() pageSize: number = 20;\n\n  @State() private internalSort: SortState | undefined;\n\n  @Event() dsSort!: EventEmitter<{ columnId: string }>;\n  @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n  @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n  private get activeSort(): SortState | undefined {\n    return this.sortState ?? this.internalSort;\n  }\n\n  private get visibleCols(): TableColumn[] {\n    return this.columns.filter(c => !c.hide);\n  }\n\n  private get gridTemplate(): string {\n    return this.visibleCols.map(col => {\n      if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n      return 'minmax(120px, 1fr)';\n    }).join(' ');\n  }\n\n  private get sortedData(): unknown[] {\n    const sort = this.activeSort;\n    if (!sort) return this.data;\n    const col = this.columns.find(c => c.id === sort.columnId);\n    if (!col) return this.data;\n    return [...this.data].sort((a, b) =>\n      compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction, new Intl.Collator(this.locale))\n    );\n  }\n\n  private get pagedData(): unknown[] {\n    if (this.pageIndex === undefined) return this.sortedData;\n    const start = this.pageIndex * this.pageSize;\n    return this.sortedData.slice(start, start + this.pageSize);\n  }\n\n  private get totalPages(): number {\n    if (this.pageIndex === undefined) return 1;\n    return Math.ceil(this.sortedData.length / this.pageSize);\n  }\n\n  private get selectedSet(): Set<number> {\n    if (!this.selectedRows) return new Set();\n    return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n  }\n\n  private handleSort(columnId: string) {\n    this.dsSort.emit({ columnId });\n    // Toggle internal sort if consumer hasn't provided sortState\n    if (!this.sortState) {\n      const cur = this.internalSort;\n      this.internalSort = cur?.columnId === columnId\n        ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n        : { columnId, direction: 'asc' };\n    }\n  }\n\n  render() {\n    const { visibleCols, pagedData, totalPages, loading } = this;\n    const isEmpty = !loading && pagedData.length === 0;\n    const selectedSet = this.selectedSet;\n    const sort = this.activeSort;\n    const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n    return (\n      <Host>\n        <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n          <div class=\"table-scroll\">\n            <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n              {/* Header row */}\n              <div class=\"header-row\" role=\"row\">\n                {visibleCols.map(col => {\n                  const isSorted = sort?.columnId === col.id;\n                  const ariaSort = col.sortable\n                    ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n                    : undefined;\n                  return (\n                    <div\n                      key={col.id}\n                      class={{\n                        'header-cell': true,\n                        'header-cell--sortable': !!col.sortable,\n                        'align-right': col.align === 'right',\n                        'align-center': col.align === 'center',\n                      }}\n                      role=\"columnheader\"\n                      aria-sort={ariaSort}\n                      tabIndex={col.sortable ? 0 : undefined}\n                      onClick={() => col.sortable && this.handleSort(col.id)}\n                      onKeyDown={(e: KeyboardEvent) => {\n                        if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n                          e.preventDefault();\n                          this.handleSort(col.id);\n                        }\n                      }}\n                      style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n                    >\n                      <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"secondary\">\n                        {col.header}\n                      </ds-text>\n                      {isSorted && (\n                        <span class=\"sort-indicator\" aria-hidden=\"true\">\n                          {sort.direction === 'asc' ? '↑' : '↓'}\n                        </span>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n\n              {/* Loading skeleton */}\n              {loading && Array.from({ length: 5 }).map((_, i) => (\n                <div\n                  key={`sk-${i}`}\n                  class=\"row\"\n                  role={i === 0 ? 'status' : 'row'}\n                  aria-label={i === 0 ? this.loadingLabel : undefined}\n                >\n                  {visibleCols.map(col => (\n                    <div key={col.id} class=\"cell\" role=\"cell\">\n                      <div class=\"skeleton\" />\n                    </div>\n                  ))}\n                </div>\n              ))}\n\n              {/* Empty state */}\n              {isEmpty && (\n                <ds-text\n                  class=\"empty-row\"\n                  as=\"p\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  style={{ gridColumn: '1 / -1' }}\n                >\n                  {this.emptyMessage}\n                </ds-text>\n              )}\n\n              {/* Data rows */}\n              {!loading && pagedData.map((row, rowIndex) => {\n                const isSelected = selectedSet.has(rowIndex);\n                return (\n                  <div\n                    key={rowIndex}\n                    class={{\n                      'row': true,\n                      'row--selected': isSelected,\n                      'row--clickable': true,\n                    }}\n                    role=\"row\"\n                    tabIndex={0}\n                    aria-selected={this.selectedRows ? isSelected : undefined}\n                    onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        this.dsRowClick.emit({ row, rowIndex });\n                      }\n                    }}\n                  >\n                    {visibleCols.map(col => (\n                      <ds-text\n                        key={col.id}\n                        class={{\n                          'cell': true,\n                          'align-right': col.align === 'right',\n                          'align-center': col.align === 'center',\n                        }}\n                        as=\"span\"\n                        variant=\"text-body-medium\"\n                        lineTruncation={1}\n                        role=\"cell\"\n                      >\n                        {String(getCellValue(col, row) ?? '')}\n                      </ds-text>\n                    ))}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Built-in pagination */}\n          {hasPagination && (\n            <div class=\"table-pagination\">\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex === 0}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! - 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <ds-text as=\"span\" variant=\"text-body-small\">{this.previousPageLabel}</ds-text>\n              </button>\n              <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n                {this.pageStatusLabel\n                  .replace('{page}', String(this.pageIndex! + 1))\n                  .replace('{total}', String(totalPages))}\n              </ds-text>\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex! >= totalPages - 1}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! + 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <ds-text as=\"span\" variant=\"text-body-small\">{this.nextPageLabel}</ds-text>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAW,IAAM,u5GCqBvB,SAASC,EAAgBC,EAAqBC,GAC5C,GAAID,EAAIE,YAAa,OAAQD,EAAgCD,EAAIE,aACjE,GAAIF,EAAIG,SAAU,OAAOH,EAAIG,SAASF,GACtC,OAAOG,SACT,CAEA,SAASC,EAAcC,EAAYC,EAAYC,EAAoBC,GACjE,MAAMC,EAAIF,IAAQ,MAAQ,GAAI,EAC9B,GAAIF,GAAK,MAAQC,GAAK,KAAM,OAAO,EACnC,GAAID,GAAK,KAAM,OAAOI,EACtB,GAAIH,GAAK,KAAM,OAAQG,EACvB,UAAWJ,IAAM,iBAAmBC,IAAM,SAAU,OAAQD,EAAIC,GAAKG,EACrE,OAAOD,EAASE,QAAQC,OAAON,GAAIM,OAAOL,IAAMG,CAClD,C,MAOaG,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,uJAMUC,KAAAC,QAAyB,GACzBD,KAAAE,KAAkB,GAElBF,KAAAG,QAAmB,MACnBH,KAAAI,aAAuB,oBACvBJ,KAAAK,aAAuB,UACvBL,KAAAM,kBAA4B,WAC5BN,KAAAO,cAAwB,OAExBP,KAAAQ,gBAA0B,yBAG1BR,KAAAS,aAAuB,GAGvBT,KAAAU,SAAmB,EA+N5B,CAvNC,cAAYC,GACV,OAAOX,KAAKY,WAAaZ,KAAKa,Y,CAGhC,eAAYC,GACV,OAAOd,KAAKC,QAAQc,QAAOC,IAAMA,EAAEC,M,CAGrC,gBAAYC,GACV,OAAOlB,KAAKc,YAAYK,KAAIrC,IAC1B,GAAIA,EAAIsC,MAAO,cAActC,EAAIsC,QAAU,SAAW,GAAGtC,EAAIsC,UAAYtC,EAAIsC,MAC7E,MAAO,oBAAoB,IAC1BC,KAAK,I,CAGV,cAAYC,GACV,MAAMC,EAAOvB,KAAKW,WAClB,IAAKY,EAAM,OAAOvB,KAAKE,KACvB,MAAMpB,EAAMkB,KAAKC,QAAQuB,MAAKR,GAAKA,EAAES,KAAOF,EAAKG,WACjD,IAAK5C,EAAK,OAAOkB,KAAKE,KACtB,MAAO,IAAIF,KAAKE,MAAMqB,MAAK,CAACnC,EAAGC,IAC7BF,EAAcN,EAAaC,EAAKM,GAAIP,EAAaC,EAAKO,GAAIkC,EAAKI,UAAW,IAAIC,KAAKC,SAAS7B,KAAK8B,U,CAIrG,aAAYC,GACV,GAAI/B,KAAKgC,YAAc9C,UAAW,OAAOc,KAAKsB,WAC9C,MAAMW,EAAQjC,KAAKgC,UAAYhC,KAAKU,SACpC,OAAOV,KAAKsB,WAAWY,MAAMD,EAAOA,EAAQjC,KAAKU,S,CAGnD,cAAYyB,GACV,GAAInC,KAAKgC,YAAc9C,UAAW,OAAO,EACzC,OAAOkD,KAAKC,KAAKrC,KAAKsB,WAAWgB,OAAStC,KAAKU,S,CAGjD,eAAY6B,GACV,IAAKvC,KAAKS,aAAc,OAAO,IAAI+B,IACnC,OAAO,IAAIA,IAAIxC,KAAKS,aAAagC,MAAM,KAAKtB,IAAIuB,QAAQ3B,QAAO4B,IAAMC,MAAMD,K,CAGrE,UAAAE,CAAWnB,GACjB1B,KAAK8C,OAAOC,KAAK,CAAErB,aAEnB,IAAK1B,KAAKY,UAAW,CACnB,MAAMoC,EAAMhD,KAAKa,aACjBb,KAAKa,aAAemC,GAAKtB,WAAaA,EAClC,CAAEA,WAAUC,UAAWqB,EAAIrB,YAAc,MAAQ,OAAS,OAC1D,CAAED,WAAUC,UAAW,M,EAI/B,MAAAsB,GACE,MAAMnC,YAAEA,EAAWiB,UAAEA,EAASI,WAAEA,EAAUhC,QAAEA,GAAYH,KACxD,MAAMkD,GAAW/C,GAAW4B,EAAUO,SAAW,EACjD,MAAMC,EAAcvC,KAAKuC,YACzB,MAAMhB,EAAOvB,KAAKW,WAClB,MAAMwC,EAAgBnD,KAAKgC,YAAc9C,WAAaiD,EAAa,EAEnE,OACEiB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAe,YAAYpD,GAAWjB,WAC/CkE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,MAAO,CAAEC,oBAAqBzD,KAAKkB,cAAgBwC,KAAK,SAGzEN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aAAaG,KAAK,OAC1B5C,EAAYK,KAAIrC,IACf,MAAM6E,EAAWpC,GAAMG,WAAa5C,EAAI2C,GACxC,MAAMmC,EAAW9E,EAAI+E,SAChBF,EAAYpC,EAAKI,YAAc,MAAQ,YAAc,aAAgB,OACtEzC,UACJ,OACEkE,EAAA,OACEE,IAAKxE,EAAI2C,GACT8B,MAAO,CACL,cAAe,KACf,0BAA2BzE,EAAI+E,SAC/B,cAAe/E,EAAIgF,QAAU,QAC7B,eAAgBhF,EAAIgF,QAAU,UAEhCJ,KAAK,eAAc,YACRE,EACXG,SAAUjF,EAAI+E,SAAW,EAAI3E,UAC7B8E,QAAS,IAAMlF,EAAI+E,UAAY7D,KAAK6C,WAAW/D,EAAI2C,IACnDwC,UAAYC,IACV,GAAIpF,EAAI+E,WAAaK,EAAEZ,MAAQ,SAAWY,EAAEZ,MAAQ,KAAM,CACxDY,EAAEC,iBACFnE,KAAK6C,WAAW/D,EAAI2C,G,GAGxB+B,MAAO1E,EAAIsF,SAAW,CAAEA,gBAAiBtF,EAAIsF,WAAa,SAAW,GAAGtF,EAAIsF,aAAetF,EAAIsF,UAAuBlF,WAEtHkE,EAAA,WAASiB,GAAG,OAAOC,QAAQ,kBAAkBC,SAAQ,KAACC,MAAM,aACzD1F,EAAI2F,QAENd,GACCP,EAAA,QAAMG,MAAM,iBAAgB,cAAa,QACtChC,EAAKI,YAAc,MAAQ,IAAM,KAGlC,KAMXxB,GAAWuE,MAAMC,KAAK,CAAErC,OAAQ,IAAKnB,KAAI,CAACyD,EAAGC,IAC5CzB,EAAA,OACEE,IAAK,MAAMuB,IACXtB,MAAM,MACNG,KAAMmB,IAAM,EAAI,SAAW,MAAK,aACpBA,IAAM,EAAI7E,KAAKK,aAAenB,WAEzC4B,EAAYK,KAAIrC,GACfsE,EAAA,OAAKE,IAAKxE,EAAI2C,GAAI8B,MAAM,OAAOG,KAAK,QAClCN,EAAA,OAAKG,MAAM,mBAOlBL,GACCE,EAAA,WAAAE,IAAA,2CACEC,MAAM,YACNc,GAAG,IACHC,QAAQ,mBACRE,MAAM,YACNhB,MAAO,CAAEsB,WAAY,WAEpB9E,KAAKI,eAKRD,GAAW4B,EAAUZ,KAAI,CAACpC,EAAKgG,KAC/B,MAAMC,EAAazC,EAAY0C,IAAIF,GACnC,OACE3B,EAAA,OACEE,IAAKyB,EACLxB,MAAO,CACLxE,IAAO,KACP,gBAAiBiG,EACjB,iBAAkB,MAEpBtB,KAAK,MACLK,SAAU,EAAC,gBACI/D,KAAKS,aAAeuE,EAAa9F,UAChD8E,QAAS,IAAMhE,KAAKkF,WAAWnC,KAAK,CAAEhE,MAAKgG,aAC3Cd,UAAYC,IACV,GAAIA,EAAEZ,MAAQ,SAAWY,EAAEZ,MAAQ,IAAK,CACtCY,EAAEC,iBACFnE,KAAKkF,WAAWnC,KAAK,CAAEhE,MAAKgG,Y,IAI/BjE,EAAYK,KAAIrC,GACfsE,EAAA,WACEE,IAAKxE,EAAI2C,GACT8B,MAAO,CACL4B,KAAQ,KACR,cAAerG,EAAIgF,QAAU,QAC7B,eAAgBhF,EAAIgF,QAAU,UAEhCO,GAAG,OACHC,QAAQ,mBACRc,eAAgB,EAChB1B,KAAK,QAEJhE,OAAOb,EAAaC,EAAKC,IAAQ,OAGlC,MAOboE,GACCC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,UAAAE,IAAA,2CACE+B,KAAK,SACL9B,MAAM,cACN+B,SAAUtF,KAAKgC,YAAc,EAC7BgC,QAAS,KACPhE,KAAKgC,UAAYhC,KAAKgC,UAAa,EACnChC,KAAKuF,aAAaxC,KAAK,CAAEf,UAAWhC,KAAKgC,WAAY,GAGvDoB,EAAA,WAAAE,IAAA,2CAASe,GAAG,OAAOC,QAAQ,mBAAmBtE,KAAKM,oBAErD8C,EAAA,WAAAE,IAAA,2CAASe,GAAG,OAAOC,QAAQ,kBAAkBE,MAAM,aAChDxE,KAAKQ,gBACHgF,QAAQ,SAAU9F,OAAOM,KAAKgC,UAAa,IAC3CwD,QAAQ,UAAW9F,OAAOyC,KAE/BiB,EAAA,UAAAE,IAAA,2CACE+B,KAAK,SACL9B,MAAM,cACN+B,SAAUtF,KAAKgC,WAAcG,EAAa,EAC1C6B,QAAS,KACPhE,KAAKgC,UAAYhC,KAAKgC,UAAa,EACnChC,KAAKuF,aAAaxC,KAAK,CAAEf,UAAWhC,KAAKgC,WAAY,GAGvDoB,EAAA,WAAAE,IAAA,2CAASe,GAAG,OAAOC,QAAQ,mBAAmBtE,KAAKO,kB","ignoreList":[]}
+{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","collator","m","compare","String","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","loadingLabel","previousPageLabel","nextPageLabel","pageStatusLabel","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","Intl","Collator","locale","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","as","variant","emphasis","color","header","Array","from","_","i","gridColumn","rowIndex","isSelected","has","dsRowClick","cell","lineTruncation","type","disabled","dsPageChange","replace"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.table-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n  overflow-x: auto;\n  width: 100%;\n}\n\n.table {\n  display: grid;\n  width: 100%;\n  min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n  display: contents;\n}\n\n.header-cell {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.header-cell--sortable {\n  cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n  background-color: var(--color-translucent-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n  display: contents;\n}\n\n.row--clickable {\n  cursor: pointer;\n}\n\n.row:hover .cell {\n  background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n  background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n  background-color: var(--color-interaction-hover);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  min-height: var(--dimension-size-500);\n  background-color: var(--color-background-primary);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.align-center {\n  justify-content: center;\n  text-align: center;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-400);\n  background-color: var(--color-background-primary);\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-100);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  background-color: var(--color-background-primary);\n}\n\n.page-button {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n  id: string;\n  header: string;\n  accessorKey?: string;\n  accessor?: (row: T) => unknown;\n  sortable?: boolean;\n  align?: 'left' | 'right' | 'center';\n  width?: string | number;\n  minWidth?: string | number;\n  hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n  if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n  if (col.accessor) return col.accessor(row);\n  return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection, collator: Intl.Collator): number {\n  const m = dir === 'asc' ? 1 : -1;\n  if (a == null && b == null) return 0;\n  if (a == null) return m;\n  if (b == null) return -m;\n  if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n  return collator.compare(String(a), String(b)) * m;\n}\n\n@Component({\n  tag: 'ds-table',\n  styleUrl: 'Table.css',\n  scoped: true,\n})\nexport class Table {\n  @Prop() columns: TableColumn[] = [];\n  @Prop() data: unknown[] = [];\n  @Prop() sortState: SortState | undefined;\n  @Prop() loading: boolean = false;\n  @Prop() emptyMessage: string = 'No results found.';\n  @Prop() loadingLabel: string = 'Loading';\n  @Prop() previousPageLabel: string = 'Previous';\n  @Prop() nextPageLabel: string = 'Next';\n  /** Use `{page}` and `{total}` placeholders. */\n  @Prop() pageStatusLabel: string = 'Page {page} of {total}';\n  @Prop() locale: string | undefined;\n  /** Comma-separated zero-based row indices that are selected. */\n  @Prop() selectedRows: string = '';\n  /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n  @Prop({ mutable: true }) pageIndex: number | undefined;\n  @Prop() pageSize: number = 20;\n\n  @State() private internalSort: SortState | undefined;\n\n  @Event() dsSort!: EventEmitter<{ columnId: string }>;\n  @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n  @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n  private get activeSort(): SortState | undefined {\n    return this.sortState ?? this.internalSort;\n  }\n\n  private get visibleCols(): TableColumn[] {\n    return this.columns.filter(c => !c.hide);\n  }\n\n  private get gridTemplate(): string {\n    return this.visibleCols.map(col => {\n      if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n      return 'minmax(120px, 1fr)';\n    }).join(' ');\n  }\n\n  private get sortedData(): unknown[] {\n    const sort = this.activeSort;\n    if (!sort) return this.data;\n    const col = this.columns.find(c => c.id === sort.columnId);\n    if (!col) return this.data;\n    return [...this.data].sort((a, b) =>\n      compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction, new Intl.Collator(this.locale))\n    );\n  }\n\n  private get pagedData(): unknown[] {\n    if (this.pageIndex === undefined) return this.sortedData;\n    const start = this.pageIndex * this.pageSize;\n    return this.sortedData.slice(start, start + this.pageSize);\n  }\n\n  private get totalPages(): number {\n    if (this.pageIndex === undefined) return 1;\n    return Math.ceil(this.sortedData.length / this.pageSize);\n  }\n\n  private get selectedSet(): Set<number> {\n    if (!this.selectedRows) return new Set();\n    return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n  }\n\n  private handleSort(columnId: string) {\n    this.dsSort.emit({ columnId });\n    // Toggle internal sort if consumer hasn't provided sortState\n    if (!this.sortState) {\n      const cur = this.internalSort;\n      this.internalSort = cur?.columnId === columnId\n        ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n        : { columnId, direction: 'asc' };\n    }\n  }\n\n  render() {\n    const { visibleCols, pagedData, totalPages, loading } = this;\n    const isEmpty = !loading && pagedData.length === 0;\n    const selectedSet = this.selectedSet;\n    const sort = this.activeSort;\n    const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n    return (\n      <Host>\n        <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n          <div class=\"table-scroll\">\n            <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n              {/* Header row */}\n              <div class=\"header-row\" role=\"row\">\n                {visibleCols.map(col => {\n                  const isSorted = sort?.columnId === col.id;\n                  const ariaSort = col.sortable\n                    ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n                    : undefined;\n                  return (\n                    <div\n                      key={col.id}\n                      class={{\n                        'header-cell': true,\n                        'header-cell--sortable': !!col.sortable,\n                        'align-right': col.align === 'right',\n                        'align-center': col.align === 'center',\n                      }}\n                      role=\"columnheader\"\n                      aria-sort={ariaSort}\n                      tabIndex={col.sortable ? 0 : undefined}\n                      onClick={() => col.sortable && this.handleSort(col.id)}\n                      onKeyDown={(e: KeyboardEvent) => {\n                        if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n                          e.preventDefault();\n                          this.handleSort(col.id);\n                        }\n                      }}\n                      style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n                    >\n                      <ds-text as=\"span\" variant=\"text-body-small\" emphasis color=\"secondary\">\n                        {col.header}\n                      </ds-text>\n                      {isSorted && (\n                        <span class=\"sort-indicator\" aria-hidden=\"true\">\n                          {sort.direction === 'asc' ? '↑' : '↓'}\n                        </span>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n\n              {/* Loading skeleton */}\n              {loading && Array.from({ length: 5 }).map((_, i) => (\n                <div\n                  key={`sk-${i}`}\n                  class=\"row\"\n                  role={i === 0 ? 'status' : 'row'}\n                  aria-label={i === 0 ? this.loadingLabel : undefined}\n                >\n                  {visibleCols.map(col => (\n                    <div key={col.id} class=\"cell\" role=\"cell\">\n                      <ds-skeleton variant=\"text\" width=\"60%\" />\n                    </div>\n                  ))}\n                </div>\n              ))}\n\n              {/* Empty state */}\n              {isEmpty && (\n                <ds-text\n                  class=\"empty-row\"\n                  as=\"p\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  style={{ gridColumn: '1 / -1' }}\n                >\n                  {this.emptyMessage}\n                </ds-text>\n              )}\n\n              {/* Data rows */}\n              {!loading && pagedData.map((row, rowIndex) => {\n                const isSelected = selectedSet.has(rowIndex);\n                return (\n                  <div\n                    key={rowIndex}\n                    class={{\n                      'row': true,\n                      'row--selected': isSelected,\n                      'row--clickable': true,\n                    }}\n                    role=\"row\"\n                    tabIndex={0}\n                    aria-selected={this.selectedRows ? isSelected : undefined}\n                    onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        this.dsRowClick.emit({ row, rowIndex });\n                      }\n                    }}\n                  >\n                    {visibleCols.map(col => (\n                      <ds-text\n                        key={col.id}\n                        class={{\n                          'cell': true,\n                          'align-right': col.align === 'right',\n                          'align-center': col.align === 'center',\n                        }}\n                        as=\"span\"\n                        variant=\"text-body-medium\"\n                        lineTruncation={1}\n                        role=\"cell\"\n                      >\n                        {String(getCellValue(col, row) ?? '')}\n                      </ds-text>\n                    ))}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Built-in pagination */}\n          {hasPagination && (\n            <div class=\"table-pagination\">\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex === 0}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! - 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <ds-text as=\"span\" variant=\"text-body-small\">{this.previousPageLabel}</ds-text>\n              </button>\n              <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n                {this.pageStatusLabel\n                  .replace('{page}', String(this.pageIndex! + 1))\n                  .replace('{total}', String(totalPages))}\n              </ds-text>\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex! >= totalPages - 1}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! + 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <ds-text as=\"span\" variant=\"text-body-small\">{this.nextPageLabel}</ds-text>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}