@evotecit/canopyx 0.3.16 → 0.3.18

package/CanopyX.Html/Assets/canopyx-ui-stepper.css

@@ -0,0 +1,174 @@
+@layer hfx.components{
+.cx-stepper-host{display:grid;gap:var(--hfx-space-4,1rem);}
+.cx-stepper{
+display:flex;
+align-items:start;
+list-style:none;
+margin:0;
+padding:0;
+gap:var(--hfx-space-4,1rem);
+}
+.cx-step{
+flex:1 1 0;
+position:relative;
+display:grid;
+grid-template-columns:minmax(0,1fr);
+align-content:start;
+justify-items:start;
+gap:var(--hfx-space-1,0.25rem);
+min-inline-size:0;
+color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));
+}
+.cx-step:not(:last-child)::after{
+content:'';
+position:absolute;
+inset-block-start:calc(var(--hfx-step-marker,28px) / 2);
+inset-inline-start:calc(var(--hfx-step-marker,28px) + var(--hfx-space-2,0.5rem));
+inset-inline-end:0;
+block-size:var(--hfx-indicator-width,2px);
+background:var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));
+}
+.cx-step-btn{
+display:grid;
+justify-items:start;
+align-content:start;
+gap:var(--hfx-space-1,0.25rem);
+border:0;
+padding:0;
+background:transparent;
+color:inherit;
+font:inherit;
+text-align:start;
+inline-size:100%;
+cursor:pointer;
+}
+.cx-step-marker{
+box-sizing:border-box;
+display:inline-flex;
+align-items:center;
+justify-content:center;
+inline-size:var(--hfx-step-marker,28px);
+block-size:var(--hfx-step-marker,28px);
+border:var(--hfx-indicator-width,2px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));
+border-radius:50%;
+background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));
+color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));
+font-size:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem));
+font-weight:var(--hfx-weight-semibold,600);
+line-height:1;
+}
+.cx-step-label{font-size:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem));font-weight:var(--hfx-weight-semibold,600);}
+.cx-step-desc,.cx-step-position,.cx-step-state{
+font-size:var(--hfx-type-caption-size,0.75rem);
+line-height:var(--hfx-type-caption-line,1.35);
+color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));
+}
+.cx-step[aria-current="step"]{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-step[aria-current="step"] .cx-step-marker{
+border-color:var(--hfx-color-accent-indicator,light-dark(#11776f,#37c9b8));
+color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));
+box-shadow:0 0 0 var(--hfx-space-1,0.25rem) var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));
+}
+.cx-step[data-state="done"]{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-step[data-state="done"] .cx-step-marker{
+background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));
+border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));
+color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));
+}
+.cx-step[data-state="done"]::after{background:var(--hfx-color-accent-indicator,light-dark(#11776f,#37c9b8));}
+.cx-step-btn:hover .cx-step-marker{box-shadow:0 0 0 var(--hfx-space-1,0.25rem) var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-step[data-state="error"],.cx-step[data-state="error"] .cx-step-desc{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
+.cx-step[data-state="error"] .cx-step-marker{
+background:var(--hfx-color-status-bad-bg,light-dark(#f9e4e4,#3c272a));
+border-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));
+color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));
+}
+.cx-step[data-state="skipped"] .cx-step-marker{border-style:dashed;}
+.cx-step[data-state="disabled"]{color:var(--hfx-color-text-disabled,light-dark(#a3a8b0,#5a5f68));}
+.cx-step[data-state="disabled"] .cx-step-marker{
+background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));
+border-color:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
+color:var(--hfx-color-text-disabled,light-dark(#a3a8b0,#5a5f68));
+}
+.cx-step[data-state="disabled"]::after{background:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-step-panel{min-inline-size:0;}
+.cx-step-print-state{display:none;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--hfx-type-caption-size,0.75rem);line-height:var(--hfx-type-caption-line,1.35);}
+.cx-step-print-marker{display:none;}
+.cx-step-panel > h3{margin-block:0 var(--hfx-space-3,0.75rem);font-size:var(--hfx-type-heading-size,0.9375rem);font-weight:var(--hfx-weight-semibold,600);}
+.cx-stepper-footer{
+display:flex;
+align-items:center;
+justify-content:end;
+flex-wrap:wrap;
+gap:var(--hfx-space-2,0.5rem);
+padding-block-start:var(--hfx-space-3,0.75rem);
+border-block-start:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
+}
+.cx-step-position{margin-inline-end:auto;}
+.cx-stepper-footer button,.cx-stepper-phone-back{
+min-block-size:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));
+padding:var(--hfx-space-1,0.25rem) var(--hfx-control-padding-x,calc(14px - var(--cx-compact,0) * 4px));
+border:var(--hfx-border-width,1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));
+border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));
+background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));
+color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));
+font-family:var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);
+font-size:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem));
+font-weight:var(--hfx-weight-medium,500);
+line-height:var(--hfx-type-body-line,1.5);
+cursor:pointer;
+}
+.cx-stepper-footer button:hover,.cx-stepper-phone-back:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-stepper-footer :is([data-cx-stepper-action="next"],[data-cx-stepper-action="finish"]){
+background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));
+border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));
+color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));
+}
+.cx-stepper-footer :is([data-cx-stepper-action="next"],[data-cx-stepper-action="finish"]):hover{background:var(--hfx-color-accent-hover,light-dark(#0d6760,#4dd9c8));}
+.cx-stepper-footer :is([data-cx-stepper-action="skip"],[data-cx-stepper-action="save-draft"]){background:transparent;border-color:transparent;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
+.cx-stepper-footer :is([data-cx-stepper-action="skip"],[data-cx-stepper-action="save-draft"]):hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-stepper-host[data-layout="vertical"][data-vertical="side"]:not([data-phone="true"]){grid-template-columns:auto minmax(0,1fr);}
+.cx-stepper--vertical{flex-direction:column;align-items:stretch;}
+.cx-stepper-host[data-layout="vertical"][data-vertical="side"]:not([data-phone="true"]) > .cx-stepper{grid-column:1;grid-row:1 / span 3;}
+.cx-stepper-host[data-layout="vertical"][data-vertical="side"]:not([data-phone="true"]) > :is(.cx-step-panel,.cx-stepper-footer){grid-column:2;}
+.cx-stepper--vertical > .cx-step{grid-template-columns:var(--hfx-step-marker,28px) minmax(0,1fr);column-gap:var(--hfx-space-3,0.75rem);}
+.cx-stepper--vertical > .cx-step > .cx-step-btn{grid-column:1 / -1;grid-template-columns:var(--hfx-step-marker,28px) minmax(0,1fr);column-gap:var(--hfx-space-3,0.75rem);}
+.cx-stepper--vertical .cx-step-marker{grid-column:1;grid-row:1 / span 2;}
+.cx-stepper--vertical :is(.cx-step-label,.cx-step-desc){grid-column:2;}
+.cx-stepper--vertical > .cx-step:not(:last-child)::after{
+inset-inline-start:calc(var(--hfx-step-marker,28px) / 2);
+inset-block-start:calc(var(--hfx-step-marker,28px) + var(--hfx-space-2,0.5rem));
+inset-block-end:calc(-1 * var(--hfx-space-2,0.5rem));
+inset-inline-end:auto;
+inline-size:var(--hfx-indicator-width,2px);
+block-size:auto;
+}
+.cx-stepper--vertical .cx-step-panel{grid-column:2;padding-block:var(--hfx-space-3,0.75rem);}
+.cx-stepper-phone{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--hfx-space-2,0.5rem);}
+.cx-stepper-phone > :only-child{grid-column:1 / -1;}
+.cx-stepper-phone-back[hidden] + [data-hfx-part="picker"]{grid-column:1 / -1;}
+.cx-stepper-progress{grid-column:1 / -1;block-size:var(--hfx-space-1,0.25rem);border-radius:var(--hfx-radius-pill,999px);background:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));overflow:hidden;}
+.cx-stepper-progress > span{display:block;block-size:100%;background:var(--hfx-color-accent-indicator,light-dark(#11776f,#37c9b8));border-radius:inherit;}
+.cx-stepper-host[data-phone="true"]{grid-template-columns:minmax(0,1fr);}
+.cx-stepper-host[data-phone="true"] > :is(.cx-step-panel,.cx-stepper-footer){grid-column:1;}
+.cx-stepper-host[data-phone="true"] .cx-stepper-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
+.cx-stepper-host[data-phone="true"] .cx-step-position{grid-column:1 / -1;}
+.cx-stepper-host[data-phone="true"] .cx-stepper-footer [data-cx-stepper-action="back"]{grid-column:1;}
+.cx-stepper-host[data-phone="true"] .cx-stepper-footer :is([data-cx-stepper-action="next"],[data-cx-stepper-action="finish"]){grid-column:2;}
+.cx-stepper-host[data-mode="report"] > :is(.cx-stepper,.cx-stepper-footer,.cx-stepper-phone){display:none;}
+@media (forced-colors: active){
+.cx-step-marker{border-color:currentColor;}
+.cx-step[aria-current="step"] .cx-step-marker{outline:var(--hfx-indicator-width,2px) solid currentColor;outline-offset:var(--hfx-focus-offset,2px);}
+}
+@media print{
+.cx-stepper-host{display:block;}
+.cx-stepper-host[data-mode="interactive"] > :is(.cx-stepper,.cx-stepper-footer,.cx-stepper-phone,[aria-live]){display:none;}
+.cx-stepper-host[data-mode="interactive"] .cx-step-panel{display:block;break-inside:avoid;}
+.cx-stepper-host[data-mode="interactive"] .cx-step-print-state{display:block;}
+.cx-stepper-host[data-mode="interactive"] .cx-step-print-marker{display:inline-flex;margin-inline-end:var(--hfx-space-2,0.5rem);}
+.cx-stepper-host[data-mode="interactive"] .cx-stepper--vertical{display:block;}
+.cx-stepper--vertical > .cx-step{display:block;break-inside:avoid;}
+.cx-stepper--vertical > .cx-step > :not(.cx-step-panel){display:none;}
+.cx-stepper--vertical > .cx-step::after{display:none;}
+}
+}

package/CanopyX.Html/Assets/canopyx-ui-stepper.js

@@ -0,0 +1,48 @@
+(function(global){"use strict";const installed=new WeakSet();const part={version:"89aeb7d73c4b8160",requires:["ui-navigation"],install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;UI_IMPL.stepper=(root,options={},signal)=>{const n=UI_TOOLS.navigation,life=n.scope(signal),labels=UI_TOOLS.labels(options.labels);const mode=options.mode||root.dataset.mode||'interactive';const linear=options.linear??root.dataset.linear!=='false';let items=n.records(root,'stepper',options);let current=n.resolve(items,options.selectedIndex??options.selected)||items.find(item=>item.element.hasAttribute('aria-current'))||items.find(item=>!item.disabled);if(current?.disabled)current=items.find(item=>!item.disabled);let destroyed=false,completed=false,view,finishSelection;root.dataset.mode=mode;const states=new Map(items.map(item=>[item.id,item.state==='current'?'upcoming':item.state]));const visited=new Set(items.filter(item=>item.visited||item.index<(current?.index??0)||['done','error','skipped'].includes(item.state)).map(item=>item.id));if(current)visited.add(current.id);function syncRecords(){items.forEach(item=>{item.state=item===current&&!completed&&states.get(item.id)!=='error'?'current':states.get(item.id);item.visited=visited.has(item.id)});return current}
+function getState(){syncRecords();return{selected:current?.id??null,finished:completed,steps:items.map(item=>({id:item.id,state:item.state,current:item===current,visited:item.visited,optional:item.optional}))}}
+function allowed(item){return!!item&&!item.disabled&&(!linear||item===current||visited.has(item.id)||['done','error','skipped'].includes(states.get(item.id)))}
+if(mode!=='interactive')return{select:async()=>false,getSelected:()=>current?.id??null,refresh(){},destroy(){life.abort()},preparePrint:async()=>{},next:async()=>false,back:async()=>false,skip:async()=>false,finish:async()=>false,setStepState(){return false},getState,ready:Promise.resolve()};const errors=UI_TOOLS.stepperErrors(root,labels);const deferred=n.deferred(root,'stepper',options,life,id=>select(id,'retry'));function render(focus=false){syncRecords();root.dataset.finished=String(completed);view?.update(items,current,states,visited,allowed,focus)}
+function adjacent(direction){for(let index=(current?.index??0)+ direction;index>=0&&index<items.length;index +=direction){if(!items[index].disabled)return items[index]}
+return null}
+const selection=n.selection(root,'stepper',options,life,syncRecords,async(from,to,loadSignal,live,source)=>{if(from!==to){deferred.leave(from);if(source==='next'||source==='skip'){states.set(from.id,source==='skip'?'skipped':'done');errors.clear(from)}
+if(options.resetForwardOnBack&&to.index<from.index){items.filter(item=>item.index>to.index).forEach(item=>{if(states.get(item.id)!=='disabled')states.set(item.id,'upcoming');visited.delete(item.id);errors.clear(item)})}}
+current=to;visited.add(to.id);completed=false;render(from!==to);if(from!==to)UI_TOOLS.emit(root,'stepper','change',{from,to,state:getState()});await deferred.load(to,loadSignal,live);if(live())render()});async function validate(item,validationSignal,live){syncRecords();const result=await options.validate?.(item,validationSignal);if(!live())return false;if(result===false||Array.isArray(result)&&result.length){states.set(item.id,'error');errors.show(item,Array.isArray(result)?result:[labels.stateDetails]);render();errors.focus(item);return false}
+errors.clear(item);return true}
+function select(value,source='api'){if(destroyed)return Promise.resolve(false);finishSelection?.cancel();const target=n.resolve(items,value);if(!allowed(target)&&source!=='next'&&source!=='skip'){selection.cancel();return Promise.resolve(false)}
+if(target===current&&source!=='retry'){selection.cancel();return Promise.resolve(true)}
+return selection.request(target,async(from,to,requestSignal,live)=>{if(source==='next'&&!await validate(from,requestSignal,live))return false;return true},source)}
+async function move(source){const to=adjacent(1);if(!to)return source==='skip'?Promise.resolve(false):finish();return select(to.id,source)}
+const next=()=>move('next');const back=()=>{const target=adjacent(-1);return target?select(target.id,'back'):Promise.resolve(false)};const skip=()=>current?.optional?move('skip'):Promise.resolve(false);finishSelection=n.selection(root,'stepper',options,life,syncRecords,async(from,to,finishSignal,live)=>{if(!live())return;states.set(to.id,'done');completed=true;render();UI_TOOLS.emit(root,'stepper','finish',{step:to,state:getState(),signal:finishSignal});options.onFinish?.(getState())});async function finish(){if(destroyed||!current||adjacent(1))return false;selection.cancel();if(completed)return false;return finishSelection.request(current,(from,to,requestSignal,live)=>validate(to,requestSignal,live),'finish')}
+function setStepState(value,state){const item=n.resolve(items,value);if(!item||!['upcoming','current','done','error','skipped','disabled'].includes(state)||state==='skipped'&&!item.optional||state==='current'&&item!==current||state==='disabled'&&item===current)return false;selection.cancel();finishSelection.cancel();completed=false;item.disabled=state==='disabled';states.set(item.id,state==='current'?'upcoming':state);if(['done','error','skipped'].includes(state))visited.add(item.id);render();return true}
+function refresh(){if(destroyed)return;selection.cancel();finishSelection.cancel();const selected=current?.id;items=n.records(root,'stepper',options);items.forEach(item=>{if(!states.has(item.id))states.set(item.id,item.state==='current'?'upcoming':item.state)});current=n.resolve(items,selected)||items.find(item=>!item.disabled);if(current)visited.add(current.id);render()}
+root.addEventListener('click',event=>{const action=event.target.closest('[data-cx-stepper-action]');if(action&&action.closest('[data-cx-stepper]')===root){if(action.getAttribute('aria-disabled')==='true')return;const actions={next,back,skip,finish,'save-draft':()=>{UI_TOOLS.emit(root,'stepper','savedraft',{state:getState()});options.onSaveDraft?.(getState())}};actions[action.dataset.cxStepperAction]?.();return}
+const button=event.target.closest('.cx-step-btn');if(button&&button.closest('[data-cx-stepper]')===root)select(button.closest('[data-step-id]').dataset.stepId,'user')},{signal:life.signal});view=UI_TOOLS.stepperView(root,options,labels,life,id=>select(id,'picker'),back,errors.count);function destroy(){if(destroyed)return;destroyed=true;life.abort();view.destroy();deferred.destroy();errors.destroy();root.removeAttribute('data-cx-ready');items.forEach(item=>{if(item.panel)item.panel.hidden=false})}
+root.dataset.cxReady='true';render();const ready=current?select(current.id,'retry'):Promise.resolve(false);signal?.addEventListener('abort',destroy,{once:true});return{select,getSelected:()=>current?.id??null,refresh,destroy,next,back,skip,finish,setStepState,getState,ready,preparePrint:()=>deferred.preparePrint()}};UI_TOOLS.stepperErrors=(root,labels)=>{const alerts=new Map(),fields=new Map();function clear(item){const entry=alerts.get(item?.id);if(!entry)return;for(const field of fields.get(item.id)||[]){const ids=(field.getAttribute('aria-describedby')||'').split(/\s+/).filter(id => id && id !== entry.element.id);
+if(ids.length)field.setAttribute('aria-describedby',ids.join(' '));else field.removeAttribute('aria-describedby')}
+entry.element.remove();alerts.delete(item.id);fields.delete(item.id)}
+function show(item,messages){clear(item);if(!item.panel)return;const alert=h('div','cx-step-errors');alert.setAttribute('role','alert');alert.tabIndex=-1;alert.id=item.panel.id+'-validation';const heading=h('p');setText(heading,messages.length===1?labels.stepperIssue:fill(labels.stepperIssues,{count:messages.length}));const list=h('ul');for(const message of messages){const entry=h('li');setText(entry,message);list.append(entry)}
+alert.append(heading,list);item.panel.prepend(alert);const invalid=Array.from(item.panel.querySelectorAll('[aria-invalid="true"],input:invalid,select:invalid,textarea:invalid'));for(const field of invalid){const ids=new Set((field.getAttribute('aria-describedby')||'').split(/\s+/).filter(Boolean));
+ids.add(alert.id);field.setAttribute('aria-describedby',Array.from(ids).join(' '))}
+alerts.set(item.id,{element:alert,count:messages.length});fields.set(item.id,invalid)}
+return{show,clear,focus:item=>alerts.get(item.id)?.element.focus(),count:item=>alerts.get(item.id)?.count||0,destroy(){for(const id of Array.from(alerts.keys()))clear({id})}}};UI_TOOLS.stepperView=(root,options,labels,life,select,back,issueCount)=>{const n=UI_TOOLS.navigation,header=n.owned(root,'ol.cx-stepper')[0];const footer=n.owned(root,'.cx-stepper-footer')[0];const live=n.owned(root,'[aria-live="polite"]')[0];const originalButtons=new Map(n.owned(root,'[data-cx-stepper-action]').map(el=>[el.dataset.cxStepperAction,el.textContent]));const footerData=footer?.dataset||{};const actionLabel=(action,key,fallback)=>options[key]??footerData[key]??originalButtons.get(action)??fallback;const phone=h('div','cx-stepper-phone');const backButton=n.button(labels.stepperBack,'cx-stepper-phone-back');backButton.dataset.cxStepperAction='back';backButton.setAttribute('aria-label',labels.stepperBack);setText(backButton,'\u2039');const picker=UI_TOOLS.picker(root,{lead:'',items:[],selected:null,onSelect:select});const progress=h('div','cx-stepper-progress'),bar=h('span');progress.setAttribute('role','progressbar');progress.setAttribute('aria-label',labels.stepperAllSteps);progress.setAttribute('aria-valuemin','0');progress.setAttribute('aria-valuemax','100');progress.append(bar);phone.append(backButton,picker.element,progress);header?.before(phone);const home=new Map(),descriptions=new Map(),inserted=new Set(),printStates=new Map(),printMarkers=new Map();let items=[],current,states,visited,allowed,narrow=false;const placement=options.vertical??root.dataset.vertical;const vertical=options.vertical!=null?!!options.vertical
+:header?.classList.contains('cx-stepper--vertical')||root.dataset.layout==='vertical'||placement==='inline';header?.classList.toggle('cx-stepper--vertical',!!vertical);root.dataset.layout=vertical?'vertical':'horizontal';root.dataset.vertical=placement==='inline'?'inline':'side';function status(item){const state=states.get(item.id),count=issueCount(item);if(state==='error')return count>1?fill(labels.stepperIssues,{count}):labels.stepperIssue;if(state==='done')return labels.stepperCompleted;if(state==='skipped')return labels.stepperSkipped;return item.optional?labels.stepperOptional:''}
+function step(item){const el=item.element,state=item.state,enabled=item!==current&&allowed(item);el.dataset.state=state;el.dataset.visited=String(item.visited);if(item===current)el.setAttribute('aria-current','step');else el.removeAttribute('aria-current');if(item.disabled)el.setAttribute('aria-disabled','true');else el.removeAttribute('aria-disabled');let button=el.querySelector(':scope > .cx-step-btn');if(enabled&&!button){button=n.button('','cx-step-btn');Array.from(el.childNodes).filter(child=>child!==item.panel).forEach(child=>button.append(child));el.prepend(button)}else if(!enabled&&button){button.replaceWith(...button.childNodes);button=null}
+if(button){button.dataset.cxStep=String(item.index);if(item.panel)button.setAttribute('aria-controls',item.panel.id)}
+const marker=el.querySelector('.cx-step-marker');if(marker)setText(marker,state==='done'?'\u2713':state==='error'?'!':state==='skipped'?'\u2013':item.index+1);let description=el.querySelector('.cx-step-desc');if(!descriptions.has(el))descriptions.set(el,description?.textContent||'');const text=status(item)||descriptions.get(el);if(!description&&text){description=h('span','cx-step-desc');(button||el).append(description);inserted.add(description)}
+if(description)setText(description,text);let accessible=el.querySelector('.cx-visually-hidden');if(!accessible){accessible=h('span','cx-visually-hidden');(button||el).append(accessible);inserted.add(accessible)}
+setText(accessible,', '+n.position(labels,'stepperStepOf',item.index,items.length)+(text?', '+text:''));if(item.panel){if(!printStates.has(item.panel)){const line=h('p','cx-step-print-state');line.dataset.hfxPart='step-state';const heading=item.panel.querySelector('[data-hfx-part="title"],h3');if(heading)heading.after(line);else item.panel.prepend(line);printStates.set(item.panel,line);inserted.add(line)}
+setText(printStates.get(item.panel),status(item));const heading=item.panel.querySelector('[data-hfx-part="title"],h3');if(heading&&!printMarkers.has(item.panel)){const marker=h('span','cx-step-marker cx-step-print-marker');marker.setAttribute('aria-hidden','true');heading.prepend(marker);printMarkers.set(item.panel,marker);inserted.add(marker)}
+const printMarker=printMarkers.get(item.panel);if(printMarker)setText(printMarker,states.get(item.id)==='done'?'\u2713':states.get(item.id)==='error'?'!':states.get(item.id)==='skipped'?'\u2013':item.index+1);item.panel.hidden=item!==current;if(item.panel.dataset.state!=='loading')item.panel.dataset.state=state;if(vertical&&root.dataset.vertical==='inline'&&!narrow&&item.panel.parentElement!==el){if(!home.has(item.panel)){const anchor=document.createComment('step panel');item.panel.before(anchor);home.set(item.panel,anchor)}
+el.append(item.panel)}else if((!vertical||root.dataset.vertical!=='inline'||narrow)&&home.has(item.panel))home.get(item.panel).after(item.panel)}}
+function footerAction(action,visible,label){if(!footer)return;let button=footer.querySelector('[data-cx-stepper-action="'+action+'"]');if(!button&&visible){button=n.button(label,'');button.dataset.cxStepperAction=action;footer.append(button);inserted.add(button)}
+if(button){button.hidden=!visible;setText(button,label)}}
+function update(nextItems=items,selected=current,nextStates=states,nextVisited=visited,canSelect=allowed,focus=false){if(life.signal.aborted)return;const active=document.activeElement,ownedFocus=UI_TOOLS.owns(root,active);const navigationFocus=UI_TOOLS.owns(phone,active)||header?.contains(active)&&!items.some(item=>item.panel?.contains(active));items=nextItems;current=selected;states=nextStates;visited=nextVisited;allowed=canSelect;items.forEach(step);phone.hidden=!narrow;if(header)header.hidden=narrow;if(!current)return;const position=n.position(labels,'stepperStepOf',current.index,items.length);picker.update({lead:position,selected:current.id,items:n.pickerItems(items.map(item=>({...item,icon:states.get(item.id)==='done'?'\u2713':states.get(item.id)==='error'?'!':String(item.index+1),badge:status(item)||undefined})),current.id,item=>!allowed(item))});backButton.hidden=!items.some(item=>item.index<current.index&&!item.disabled);const percentage=(current.index+1)/ items.length * 100;
+bar.style.inlineSize=percentage+'%';progress.setAttribute('aria-valuenow',String(Math.round(percentage)));progress.setAttribute('aria-valuetext',position);const footerPosition=footer?.querySelector('.cx-step-position');if(footerPosition)setText(footerPosition,position);const last=!items.some(item=>item.index>current.index&&!item.disabled);const saveDraft=options.saveDraftLabel!==undefined?options.saveDraftLabel!=null
+:!!options.onSaveDraft||footerData.saveDraftEnabled==='true'||originalButtons.has('save-draft');const skip=options.skip??(options.skipLabel!==undefined?options.skipLabel!=null:footerData.skipEnabled!=='false');footerAction('save-draft',saveDraft,actionLabel('save-draft','saveDraftLabel',labels.stepperSaveDraft));footerAction('skip',current.optional&&skip,actionLabel('skip','skipLabel',labels.stepperSkip));footerAction('back',items.some(item=>item.index<current.index&&!item.disabled),actionLabel('back','backLabel',labels.stepperBack));footerAction('next',!last,actionLabel('next','nextLabel',labels.stepperNext));footerAction('finish',last,actionLabel('finish','finishLabel',labels.stepperFinish));for(const action of['save-draft','skip','back','next','finish']){const button=footer?.querySelector('[data-cx-stepper-action="'+action+'"]');if(button)footer.append(button)}
+if(focus){const heading=current.panel?.querySelector('[data-hfx-part="title"],h1,h2,h3');if(heading){heading.tabIndex=-1;heading.focus()}
+if(live)setText(live,position+': '+current.label)}else if(ownedFocus&&(document.activeElement!==active||!active.checkVisibility())){if(active.isConnected&&active.checkVisibility())active.focus({preventScroll:true});else if(navigationFocus){const target=narrow?picker.element.querySelector('button')
+:current.panel?.querySelector('[data-hfx-part="title"],h1,h2,h3')||header?.querySelector('.cx-step-btn');if(target){if(target.tagName!=='BUTTON')target.tabIndex=-1;target.focus({preventScroll:true})}}}}
+UI_TOOLS.observe(root,width=>{const measured=typeof width==='number'?width:root.getBoundingClientRect().width;narrow=measured<640;root.dataset.phone=String(narrow);if(states)update()},life.signal);function destroy(){for(const[panel,anchor]of home){anchor.after(panel);anchor.remove()}
+for(const[el,text]of descriptions){const desc=el.querySelector('.cx-step-desc');if(desc)setText(desc,text)}
+inserted.forEach(el=>el.remove());picker.destroy();phone.remove();if(header)header.hidden=false;root.removeAttribute('data-finished');delete root.dataset.phone}
+return{update,destroy}};installed.add(context.UI_IMPL)}};(global.CanopyXParts||=[]).push(["ui-stepper",part])})(typeof window!=="undefined"?window:globalThis);

package/CanopyX.Html/Assets/canopyx-ui-tabs.css

@@ -0,0 +1,153 @@
+@layer hfx.components{
+.cx-tabs{
+--cx-tabs-motion-duration-fast:var(--hfx-motion-duration-fast,120ms);
+--cx-tabs-motion-duration-base:var(--hfx-motion-duration-base,200ms);
+--cx-tabs-motion-easing:var(--hfx-motion-easing-standard,cubic-bezier(.2,0,0,1));
+--cx-tabs-motion-distance:var(--hfx-space-2,0.5rem);
+display:grid;
+grid-template-columns:minmax(0,1fr) auto;
+align-items:start;
+column-gap:var(--hfx-space-1,0.25rem);
+}
+.cx-tablist{
+display:flex;
+position:relative;
+align-items:center;
+gap:var(--hfx-space-1,0.25rem);
+min-inline-size:0;
+overflow:auto;
+scrollbar-width:none;
+border-block-end:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
+}
+.cx-tablist::-webkit-scrollbar{display:none;}
+.cx-tab{
+display:inline-flex;
+align-items:center;
+justify-content:center;
+flex:0 0 auto;
+position:relative;
+gap:var(--hfx-space-2,0.5rem);
+min-block-size:var(--hfx-tab-height,calc(40px - var(--cx-compact,0) * 4px));
+padding:0 var(--hfx-space-3,0.75rem);
+border:0;
+background:transparent;
+color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));
+font-family:var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);
+font-size:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem));
+font-weight:var(--hfx-weight-medium,500);
+line-height:var(--hfx-type-body-line,1.5);
+cursor:pointer;
+white-space:nowrap;
+}
+.cx-tab:hover:not([aria-disabled="true"]){color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-tab:active:not([aria-disabled="true"]){background:var(--hfx-color-active,light-dark(#ebebec,#2e3034));}
+.cx-tab[aria-selected="true"]{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-weight:var(--hfx-weight-semibold,600);}
+.cx-tab[aria-disabled="true"]{color:var(--hfx-color-text-disabled,light-dark(#a3a8b0,#5a5f68));cursor:default;}
+.cx-tab:focus-visible{outline-offset:calc(-1 * var(--hfx-focus-width,2px));}
+.cx-tab-icon{inline-size:var(--hfx-icon-md,16px);block-size:var(--hfx-icon-md,16px);}
+.cx-tab-badge{
+display:inline-flex;
+align-items:center;
+min-block-size:var(--hfx-icon-md,16px);
+padding-inline:var(--hfx-space-1,0.25rem);
+border-radius:var(--hfx-radius-badge,var(--hfx-radius-sm,4px));
+color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));
+background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));
+font-size:var(--hfx-type-caption-size,0.75rem);
+line-height:var(--hfx-type-caption-line,1.35);
+font-weight:var(--hfx-weight-medium,500);
+}
+.cx-tabs-indicator{
+inline-size:var(--cx-tabs-indicator-size);
+inset-inline-start:var(--cx-tabs-indicator-start);
+position:absolute;
+inset-block-end:0;
+block-size:var(--hfx-indicator-width,2px);
+background:var(--hfx-color-accent-indicator,light-dark(#11776f,#37c9b8));
+pointer-events:none;
+transition:inset-inline-start var(--hfx-motion-duration-base,200ms) var(--hfx-motion-easing-standard,cubic-bezier(.2,0,0,1)),inline-size var(--hfx-motion-duration-base,200ms) var(--hfx-motion-easing-standard,cubic-bezier(.2,0,0,1));
+}
+.cx-tabs--pills > .cx-tablist,.cx-tabs--segmented > .cx-tablist{border:0;}
+:is(.cx-tabs--pills,.cx-tabs--segmented) > .cx-tablist > .cx-tab{
+min-block-size:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));
+border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));
+}
+.cx-tabs--pills > .cx-tablist > .cx-tab[aria-selected="true"]{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
+.cx-tabs--segmented > .cx-tablist{
+background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));
+padding:var(--hfx-space-0-5,2px);
+border:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
+border-radius:calc(var(--hfx-radius-control,var(--hfx-radius-md,6px)) + var(--hfx-space-0-5,2px));
+overflow:visible;
+}
+.cx-tabs--segmented > .cx-tablist > .cx-tab{flex:1 1 0;min-inline-size:0;white-space:normal;}
+.cx-tabs--segmented > .cx-tablist > .cx-tab[aria-selected="true"]{
+background:var(--hfx-color-surface-raised,light-dark(#ffffff,#1e2126));
+box-shadow:var(--hfx-elevation-1,0 1px 2px rgba(22,24,28,.06)),0 0 0 var(--hfx-border-width,1px) var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
+}
+:is(.cx-tabs--pills,.cx-tabs--segmented,.cx-tabs--vertical) > .cx-tablist > .cx-tabs-indicator{display:none;}
+.cx-tabs--vertical{grid-template-columns:auto minmax(0,1fr);}
+.cx-tabs--vertical > .cx-tablist{
+flex-direction:column;
+align-items:stretch;
+grid-column:1;
+grid-row:1 / span 3;
+border-block-end:0;
+border-inline-end:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
+}
+.cx-tabs--vertical > .cx-tablist > .cx-tab{min-block-size:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));justify-content:start;}
+.cx-tabs--vertical .cx-tab-badge{margin-inline-start:auto;}
+.cx-tabs--vertical > .cx-tablist > .cx-tab[aria-selected="true"]{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
+.cx-tabs--vertical > .cx-tablist > .cx-tab[aria-selected="true"]::before{
+content:'';
+position:absolute;
+inset-inline-start:0;
+inset-block:var(--hfx-space-2,0.5rem);
+inline-size:var(--hfx-indicator-width,2px);
+background:var(--hfx-color-accent-indicator,light-dark(#11776f,#37c9b8));
+}
+.cx-tabs[data-overflow="wrap"] > .cx-tablist{flex-wrap:wrap;overflow:visible;}
+.cx-tabs[data-overflow="menu"] > .cx-tablist{overflow:hidden;}
+.cx-tabs-tools{display:flex;gap:var(--hfx-space-1,0.25rem);grid-column:2;grid-row:1;}
+:is(.cx-tabs-scroll,.cx-tabs-play){
+min-block-size:var(--hfx-control-height-sm,calc(28px - var(--cx-compact,0) * 4px));
+padding:var(--hfx-space-1,0.25rem) var(--hfx-space-2,0.5rem);
+border:0;
+border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));
+color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));
+background:transparent;
+font:inherit;
+cursor:pointer;
+}
+:is(.cx-tabs-scroll,.cx-tabs-play):hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-tabs-play{grid-column:2;display:inline-flex;align-items:center;gap:var(--hfx-space-2,0.5rem);border:var(--hfx-border-width,1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
+.cx-tabs-play::before{content:'\25b6' / '';}
+.cx-tabs-play[data-state="playing"]::before{content:'\23f8' / '';}
+.cx-tabs-play:disabled{color:var(--hfx-color-text-disabled,light-dark(#a3a8b0,#5a5f68));cursor:default;}
+.cx-tabpanel{grid-column:1 / -1;min-inline-size:0;padding-block:var(--hfx-space-4,1rem);}
+.cx-tabs--vertical > .cx-tabpanel{grid-column:2;grid-row:1 / span 3;padding-inline-start:var(--hfx-space-4,1rem);}
+.cx-tabs[data-cx-ready] > .cx-tabpanel > .cx-tabpanel-heading{display:none;}
+.cx-tabs-position{grid-column:1 / -1;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--hfx-type-caption-size,0.75rem);line-height:var(--hfx-type-caption-line,1.35);margin-block:var(--hfx-space-1,0.25rem);}
+.cx-tabs-phone-picker{grid-column:1 / -1;inline-size:100%;}
+.cx-tabs[data-phone="true"]{grid-template-columns:minmax(0,1fr);}
+.cx-tabs[data-phone="true"] > .cx-tabs-tools{grid-column:1;grid-row:auto;justify-content:end;}
+.cx-tabs[data-phone="true"] > .cx-tabpanel{grid-column:1;grid-row:auto;padding-inline:0;}
+.cx-tabs[data-scroll-start="true"] > .cx-tablist{mask-image:linear-gradient(to right,transparent,currentColor var(--hfx-space-4,1rem),currentColor);}
+.cx-tabs[data-scroll-end="true"] > .cx-tablist{mask-image:linear-gradient(to left,transparent,currentColor var(--hfx-space-4,1rem),currentColor);}
+.cx-tabs:dir(rtl)[data-scroll-start="true"] > .cx-tablist{mask-image:linear-gradient(to left,transparent,currentColor var(--hfx-space-4,1rem),currentColor);}
+.cx-tabs:dir(rtl)[data-scroll-end="true"] > .cx-tablist{mask-image:linear-gradient(to right,transparent,currentColor var(--hfx-space-4,1rem),currentColor);}
+.cx-tabs[data-scroll-start="true"][data-scroll-end="true"] > .cx-tablist{mask-image:linear-gradient(to right,transparent,currentColor var(--hfx-space-4,1rem),currentColor calc(100% - var(--hfx-space-4,1rem)),transparent);}
+@media (prefers-reduced-motion: reduce){.cx-tabs-indicator{transition:none;}}
+@media (forced-colors: active){
+.cx-tab[aria-selected="true"]{outline:var(--hfx-indicator-width,2px) solid currentColor;outline-offset:calc(-1 * var(--hfx-indicator-width,2px));}
+.cx-tabs-indicator{background:currentColor;}
+}
+@media print{
+.cx-tabs{display:block;}
+.cx-tabs > :is(.cx-tablist,.cx-tabs-tools,.cx-tabs-phone-picker,.cx-tabs-position,.cx-tabs-play){display:none;}
+.cx-tabs[data-print="all"] > .cx-tabpanel{display:block;}
+.cx-tabs[data-print="selected"] > .cx-tabpanel[hidden]{display:none;}
+.cx-tabs[data-cx-ready] > .cx-tabpanel > .cx-tabpanel-heading{display:block;}
+.cx-tabpanel{break-inside:avoid;}
+}
+}

package/CanopyX.Html/Assets/canopyx-ui-tabs.js

@@ -0,0 +1,47 @@
+(function(global){"use strict";const installed=new WeakSet();const part={version:"96f562187c7e0732",requires:["ui-navigation"],install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;UI_IMPL.tabs=(root,options={},signal)=>{const n=UI_TOOLS.navigation,life=n.scope(signal),labels=UI_TOOLS.labels(options.labels);const list=n.owned(root,'[role="tablist"]')[0];let items=[],current,layout,auto,destroyed=false;const style=options.style||['vertical','segmented','pills'].find(s=>root.classList.contains('cx-tabs--'+s))||'underline';for(const variant of['underline','pills','segmented','vertical'])root.classList.toggle('cx-tabs--'+variant,variant===style);root.classList.add('cx-tabs');const effectiveStyle=style==='segmented'&&n.owned(root,'[role="tab"]').length>5?'pills':style;if(effectiveStyle!==style){root.classList.replace('cx-tabs--segmented','cx-tabs--pills');if(options.debug===true)console.warn('[CanopyX] tabs: segmented supports 2–5 options; rendering as pills')}
+root.dataset.overflow=options.overflow||root.dataset.overflow||'scroll';if(root.dataset.overflow==='wrap'&&effectiveStyle!=='pills')root.dataset.overflow='scroll';root.dataset.collapse=options.collapse||root.dataset.collapse||(effectiveStyle==='segmented'?'none':'picker');root.dataset.print=options.print||root.dataset.print||'all';root.dataset.transition=options.transition||'none';list?.setAttribute('aria-orientation',effectiveStyle==='vertical'?'vertical':'horizontal');const deferred=n.deferred(root,'tabs',options,life,id=>select(id));function render(){for(const item of items){const selected=item===current;item.element.setAttribute('aria-selected',String(selected));item.element.tabIndex=selected?0:-1;item.element.dataset.state=item.disabled?'disabled':selected?'selected':'';if(item.panel){item.panel.hidden=!selected;item.panel.dataset.state=selected?'selected':'';n.panelTabStop(item.panel)}}
+layout?.update(items,current)}
+const selection=n.selection(root,'tabs',options,life,()=>current,async(from,to,loadSignal,live)=>{if(from!==to)deferred.leave(from);current=to;render();if(options.hash&&root.id)writeHash(to.id);if(from!==to)UI_TOOLS.emit(root,'tabs','change',{from,to});const loaded=await deferred.load(to,loadSignal,live);if(live()&&loaded)animate(to,from);if(live())layout?.update(items,current)});function select(value,source='api'){if(destroyed)return Promise.resolve(false);if(source!=='auto'&&source!=='initial')auto?.stop();const target=n.resolve(items,value);if(!target||target.disabled){selection.cancel();return Promise.resolve(false)}
+if(target===current&&!deferred.isDeferred(target)){selection.cancel();return Promise.resolve(true)}
+return selection.request(target,undefined,source)}
+function animate(to,from){if(!to.panel||root.dataset.transition==='none'||matchMedia('(prefers-reduced-motion: reduce)').matches)return;to.panel.getAnimations().forEach(animation=>animation.cancel());const css=getComputedStyle(root),slide=root.dataset.transition==='slide';const duration=css.getPropertyValue('--cx-tabs-motion-duration-' +(slide?'base':'fast')).trim();const ms=parseFloat(duration)*(duration.endsWith('ms')?1:1000);const distance=css.getPropertyValue('--cx-tabs-motion-distance').trim();const easing=css.getPropertyValue('--cx-tabs-motion-easing').trim();const sign=(to.index>=(from?.index??0)?1:-1)*(css.direction==='rtl'?-1:1);to.panel.animate([{opacity:0,transform:slide?'translateX(calc('+distance+' * '+sign+'))':'none'},{opacity:1,transform:'none'}],{duration:ms||0,easing})}
+function hashId(){try{return new URLSearchParams(location.hash.slice(1)).get(root.id)}catch{return null}}
+function writeHash(id){const params=new URLSearchParams(location.hash.slice(1));params.set(root.id,id);const hash='#'+params.toString();if(hash!==location.hash)history[options.hashHistory==='push'?'pushState':'replaceState'](null,'',hash)}
+function refresh(){if(destroyed)return;selection.cancel();const id=current?.id;items=n.records(root,'tabs',options);current=items.find(item=>item.id===id&&!item.disabled)||items.find(item=>!item.disabled&&item.element.getAttribute('aria-selected')==='true')||items.find(item=>!item.disabled);render();auto?.reset()}
+root.addEventListener('click',event=>{const tab=event.target.closest('[role="tab"]');if(tab&&items.some(item=>item.element===tab))select(tab.dataset.tabId,'user')},{signal:life.signal});list?.addEventListener('keydown',event=>{const index=items.findIndex(item=>item.element===event.target);if(index<0)return;const visible=items.filter(item=>!item.element.hidden),position=visible.indexOf(items[index]);const vertical=list.getAttribute('aria-orientation')==='vertical';const rtl=getComputedStyle(root).direction==='rtl';const forward=vertical?'ArrowDown':rtl?'ArrowLeft':'ArrowRight';const back=vertical?'ArrowUp':rtl?'ArrowRight':'ArrowLeft';let target;if(event.key===forward||event.key===back)target=visible[(position +(event.key===forward?1:-1)+ visible.length)%visible.length];if(event.key==='Home')target=visible[0];if(event.key==='End')target=visible[visible.length-1];if(target){event.preventDefault();items.forEach(item=>{item.element.tabIndex=item===target?0:-1});target.element.focus();target.element.scrollIntoView({block:'nearest',inline:'nearest'});const activation=options.activation||root.dataset.activation;const manual=activation==='manual'||activation!=='automatic'&&(options.beforeChange||items.some(deferred.isDeferred));if(!manual&&!target.disabled)select(target.id,'user')}else if(event.key==='Enter'||event.key===' '){event.preventDefault();select(items[index].id,'user')}},{signal:life.signal});list?.addEventListener('focusout',event=>{if(!list.contains(event.relatedTarget))items.forEach(item=>{item.element.tabIndex=item===current?0:-1})},{signal:life.signal});let touch;root.addEventListener('pointerdown',event=>{if(event.pointerType==='touch'&&root.dataset.phone==='true'&&event.target.closest('.cx-tabpanel')&&
+!event.target.closest('a[href],button,input,select,textarea,[contenteditable="true"]')&&!getSelection()?.toString())touch={x:event.clientX,y:event.clientY,id:event.pointerId}},{signal:life.signal});root.addEventListener('pointerup',event=>{const start=touch;touch=null;if(!start||start.id!==event.pointerId)return;const dx=event.clientX-start.x,dy=event.clientY-start.y;if(Math.abs(dx)<48||Math.abs(dx)<=Math.abs(dy))return;const direction=(dx<0?1:-1)*(getComputedStyle(root).direction==='rtl'?-1:1);const target=items.slice().filter(item=>!item.disabled);const next=target[target.indexOf(current)+ direction];if(next)select(next.id,'user')},{signal:life.signal});root.addEventListener('pointercancel',()=>{touch=null},{signal:life.signal});if(options.hash)window.addEventListener('hashchange',()=>{const target=n.resolve(items,hashId());if(target&&target!==current)select(target.id,'hash')},{signal:life.signal});function destroy(){if(destroyed)return;destroyed=true;life.abort();auto?.destroy();layout?.destroy();deferred.destroy();root.removeAttribute('data-cx-ready');items.forEach(item=>{item.element.hidden=false;item.element.removeAttribute('aria-busy');if(item.panel){item.panel.hidden=false;item.panel.removeAttribute('aria-busy');item.panel.getAnimations().forEach(a=>a.cancel())}})}
+refresh();layout=UI_TOOLS.tabsLayout(root,list,options,labels,life,id=>select(id,'user'));root.dataset.cxReady='true';render();const requested=options.hash&&n.resolve(items,hashId())||n.resolve(items,options.selectedIndex??options.selected);const initial=requested&&!requested.disabled?requested:current;if(options.hash&&root.id&&initial===current&&current)writeHash(current.id);const ready=select(initial?.id,'initial');auto=UI_TOOLS.tabsAuto(root,list,options,labels,life,()=>({items,current}),id=>select(id,'auto'),()=>selection.cancel(),ready);signal?.addEventListener('abort',destroy,{once:true});return{select,getSelected:()=>current?.id??null,refresh,preparePrint:()=>deferred.preparePrint(),destroy,ready}};UI_TOOLS.tabsLayout=(root,list,options,labels,life,select)=>{const n=UI_TOOLS.navigation;const phone=UI_TOOLS.picker(root,{lead:labels.tabsSection,items:[],selected:null,onSelect:select});phone.element.classList.add('cx-tabs-phone-picker');const position=h('div','cx-tabs-position');position.setAttribute('aria-live','polite');const tools=h('div','cx-tabs-tools');const previous=n.button(labels.tabsScrollPrevious,'cx-tabs-scroll cx-tabs-scroll--previous');const next=n.button(labels.tabsScrollNext,'cx-tabs-scroll cx-tabs-scroll--next');for(const el of[previous,next]){el.setAttribute('aria-label',el.textContent);el.setAttribute('aria-hidden','true');el.tabIndex=-1}
+setText(previous,'‹');setText(next,'›');const more=UI_TOOLS.picker(root,{lead:'',items:[],selected:null,onSelect:select});more.element.classList.add('cx-tabs-more');tools.append(previous,next,more.element);list?.before(phone.element,position);list?.after(tools);const indicator=h('span','cx-tabs-indicator');indicator.setAttribute('aria-hidden','true');list?.append(indicator);let items=[],current,narrow=false,updating=false,frame;function scroll(direction){const rtl=getComputedStyle(root).direction==='rtl'?-1:1;list?.scrollBy({left:direction*list.clientWidth*rtl,behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'instant':'smooth'})}
+previous.addEventListener('click',()=>scroll(-1),{signal:life.signal});next.addEventListener('click',()=>scroll(1),{signal:life.signal});function edges(){if(!list)return;const scrollable=root.dataset.overflow==='scroll'&&!narrow;const tabs=items.filter(item=>!item.element.hidden);const bounds=list.getBoundingClientRect(),rtl=getComputedStyle(root).direction==='rtl';const first=tabs[0]?.element.getBoundingClientRect(),last=tabs.at(-1)?.element.getBoundingClientRect();const before=!!first&&(rtl?first.right>bounds.right+1:first.left<bounds.left-1);const after=!!last&&(rtl?last.left<bounds.left-1:last.right>bounds.right+1);previous.hidden=!scrollable||!before;next.hidden=!scrollable||!after;root.dataset.scrollStart=String(scrollable&&before);root.dataset.scrollEnd=String(scrollable&&after)}
+function update(nextItems=items,selected=current,reveal=false){if(updating||life.signal.aborted||!list)return;updating=true;items=nextItems;current=selected;const focus=document.activeElement,fromMore=UI_TOOLS.owns(more.element,focus);const fromList=list.contains(focus)||fromMore,fromPicker=UI_TOOLS.owns(phone.element,focus);const choiceId=fromMore||fromPicker?focus.closest('[data-item-id]')?.dataset.itemId:null;const focusedItem=items.find(item=>item.element.contains(focus)||item.id===choiceId);const model=n.pickerItems(items,current?.id);const measure=list.cloneNode(true);measure.hidden=false;measure.inert=true;measure.removeAttribute('id');measure.setAttribute('aria-hidden','true');measure.style.cssText='position:absolute;visibility:hidden;display:flex;flex-flow:row nowrap;inline-size:max-content;max-inline-size:none;';const measuredTabs=[...measure.querySelectorAll('[role="tab"]')];measuredTabs.forEach(tab=>{tab.hidden=false;tab.removeAttribute('id')});root.append(measure);const gap=parseFloat(getComputedStyle(list).gap)||0;const widths=measuredTabs.map(tab=>tab.getBoundingClientRect().width+gap);measure.remove();const total=Math.max(0,widths.reduce((sum,value)=>sum+value,0)- gap);const play=tools.querySelector('.cx-tabs-play');const available=Math.max(0,root.clientWidth -(play?play.getBoundingClientRect().width+gap:0));function measureMore(selected){more.update({lead:selected?fill(labels.tabsMoreSelected,{label:''}).trim():labels.tabsMore,items:model,selected:selected?.id??null});const clone=more.element.cloneNode(true);clone.hidden=false;clone.inert=true;clone.style.cssText='position:absolute;visibility:hidden;inline-size:max-content;';root.append(clone);const width=clone.getBoundingClientRect().width;clone.remove();return width}
+let moreWidth=measureMore(null);const selectedEnd=widths.slice(0,items.indexOf(current)+ 1).reduce((sum,value)=>sum+value,0)- gap;if(root.dataset.overflow==='menu'&&total>available&&selectedEnd>available-moreWidth-gap)
+moreWidth=measureMore(current);const minimum=root.dataset.overflow==='menu'&&items.length>3
+?Math.min(total,widths.slice(0,3).reduce((sum,value)=>sum+value,0)+ moreWidth):total;narrow=root.dataset.collapse==='picker'&&available<minimum +(narrow?8:0);root.dataset.phone=String(narrow);phone.update({lead:labels.tabsSection,items:model,selected:current?.id});phone.element.hidden=!narrow;position.hidden=!narrow;list.hidden=narrow;tools.hidden=narrow&&!tools.querySelector('.cx-tabs-play');setText(position,n.position(labels,'tabsPosition',current?.index??0,items.length));items.forEach(item=>{item.element.hidden=false});more.element.hidden=true;if(!narrow&&root.dataset.overflow==='menu'){if(widths.reduce((sum,value)=>sum+value,0)- gap>available){more.element.hidden=false;const budget=Math.max(0,available-moreWidth-gap);let used=0;const hidden=items.filter((item,index)=>{used +=widths[index];item.element.hidden=used-gap>budget;return item.element.hidden});const selectedHidden=hidden.includes(current);more.update({lead:selectedHidden?fill(labels.tabsMoreSelected,{label:''}).trim():labels.tabsMore,items:n.pickerItems(hidden,current?.id),selected:selectedHidden?current.id:null});more.element.dataset.state=selectedHidden?'selected':''}}
+if(!narrow&&!current?.element.hidden&&root.dataset.overflow==='scroll'&&reveal){current?.element.scrollIntoView({block:'nearest',inline:'nearest'})}
+if(!narrow&&current&&!current.element.hidden){const tab=current.element,css=getComputedStyle(tab);const inset=parseFloat(css.paddingInlineStart)||0;indicator.style.setProperty('--cx-tabs-indicator-size',Math.max(0,tab.offsetWidth-inset*2)+ 'px');indicator.style.setProperty('--cx-tabs-indicator-start',(getComputedStyle(root).direction==='rtl'
+?list.scrollWidth-tab.offsetLeft-tab.offsetWidth+inset:tab.offsetLeft+inset)+ 'px');indicator.hidden=false}else indicator.hidden=true;edges();updating=false;if((fromList||fromPicker)&&!focus.checkVisibility()){const choice=focusedItem||current;const target=narrow?phone.element.querySelector('button')
+:choice&&!choice.element.hidden?choice.element
+:!more.element.hidden?more.element.querySelector('button')
+:items.find(item=>!item.element.hidden)?.element;target?.focus({preventScroll:true})}}
+list?.addEventListener('scroll',edges,{signal:life.signal,passive:true});const resize=()=>{cancelAnimationFrame(frame);frame=requestAnimationFrame(()=>update())};UI_TOOLS.observe(root,resize,life.signal);document.fonts?.ready.then(()=>{if(!life.signal.aborted)resize()});document.fonts?.addEventListener('loadingdone',resize,{signal:life.signal});function destroy(){cancelAnimationFrame(frame);phone.destroy();more.destroy();phone.element.remove();position.remove();tools.remove();indicator.remove();if(list)list.hidden=false;for(const key of['phone','scrollStart','scrollEnd'])delete root.dataset[key]}
+return{update:(nextItems,selected)=>update(nextItems,selected,selected!==current),destroy}};UI_TOOLS.tabsAuto=(root,list,options,labels,life,read,select,cancel,ready)=>{const config=options.autoProgress===undefined
+?root.dataset.autoProgressInterval===undefined?null:{interval:Number(root.dataset.autoProgressInterval),pauseOnHover:root.dataset.autoProgressPauseOnHover!=='false',pauseOnFocus:root.dataset.autoProgressPauseOnFocus!=='false'}:options.autoProgress;const idle={stop(){},reset(){},destroy(){}};if(!config||!Number.isFinite(config.interval)||config.interval<=0||life.signal.aborted)return idle;const n=UI_TOOLS.navigation,control=n.button(labels.tabsPause,'cx-tabs-play');const media=matchMedia('(prefers-reduced-motion: reduce)');let reduced=media.matches,paused=reduced,hovered=config.pauseOnHover!==false&&root.matches(':hover');let focused=config.pauseOnFocus!==false&&root.contains(document.activeElement);let started=false,pending=false,destroyed=false,generation=0;let elapsed=0,previous=null,frame=null;const tools=n.owned(root,'.cx-tabs-tools')[0];if(tools)tools.append(control);else list?.after(control);function paint(){const label=paused||media.matches?labels.tabsPlay:labels.tabsPause;if(control.textContent!==label)setText(control,label);if(control.getAttribute('aria-label')!==label)control.setAttribute('aria-label',label);control.dataset.state=paused||media.matches?'paused':'playing';control.disabled=media.matches;if(media.matches){control.setAttribute('title',labels.tabsMotionDisabled);control.setAttribute('aria-description',labels.tabsMotionDisabled)}else{control.removeAttribute('title');control.removeAttribute('aria-description')}}
+function blocked(){return destroyed||life.signal.aborted||!started||paused||media.matches||hovered||focused||document.hidden||pending}
+function schedule(){if(frame==null&&!blocked())frame=requestAnimationFrame(tick)}
+function sync(){if(pending&&(hovered||focused||document.hidden))cancelPending();previous=null;if(blocked()){cancelAnimationFrame(frame);frame=null}
+else schedule();paint()}
+function cancelPending(){generation++;if(pending){pending=false;cancel()}}
+async function advance(){const{items,current}=read(),enabled=items.filter(item=>!item.disabled);const next=enabled[(enabled.indexOf(current)+ 1)%enabled.length];if(!next||next===current){stop();return}
+const ticket=++generation;pending=true;previous=null;let changed=false;try{changed=await select(next.id)}
+finally{if(ticket===generation&&!destroyed&&!life.signal.aborted){pending=false;elapsed=0;if(!changed)paused=true;sync()}}}
+function tick(now){frame=null;if(media.matches!==reduced){motionChanged();return}
+if(blocked()){previous=null;return}
+if(previous!=null)elapsed +=now-previous;previous=now;paint();if(elapsed>=config.interval){elapsed=0;void advance()}
+else schedule()}
+control.addEventListener('click',()=>{if(media.matches||destroyed)return;if(!paused)stop();else{paused=false;elapsed=0;sync()}},{signal:life.signal});if(config.pauseOnHover!==false){root.addEventListener('pointerenter',()=>{hovered=true;sync()},{signal:life.signal});root.addEventListener('pointerleave',()=>{hovered=false;sync()},{signal:life.signal})}
+if(config.pauseOnFocus!==false){root.addEventListener('focusin',()=>{focused=true;sync()},{signal:life.signal});root.addEventListener('focusout',event=>{focused=root.contains(event.relatedTarget);sync()},{signal:life.signal})}
+document.addEventListener('visibilitychange',sync,{signal:life.signal});function motionChanged(){if(media.matches===reduced)return;reduced=media.matches;if(reduced)stop();else sync()}
+media.addEventListener('change',motionChanged,{signal:life.signal});function stop(){cancelPending();paused=true;elapsed=0;sync()}
+function reset(){cancelPending();elapsed=0;sync()}
+function destroy(){if(destroyed)return;destroyed=true;cancelPending();cancelAnimationFrame(frame);frame=null;control.remove()}
+life.signal.addEventListener('abort',destroy,{once:true});Promise.resolve(ready).then(()=>{if(!destroyed&&!life.signal.aborted){started=true;sync()}},()=>{if(!destroyed&&!life.signal.aborted)stop()});paint();return{stop,reset,destroy}};installed.add(context.UI_IMPL)}};(global.CanopyXParts||=[]).push(["ui-tabs",part])})(typeof window!=="undefined"?window:globalThis);

package/CanopyX.Html/Assets/canopyx-values.css

@@ -0,0 +1,5 @@
+.cx-show-as-fields{display:grid;gap:var(--hfx-space-3,0.75rem);padding:0;}
+.cx-text-dialog pre:not([hidden]) + .cx-show-as-fields{margin-top:var(--hfx-space-3,0.75rem);}
+.cx-show-as-field{display:grid;gap:var(--hfx-space-1-5,6px);min-width:0;}
+.cx-show-as-field select{width:100%;min-width:0;max-width:100%;}
+.cx-aggregate-caption{display:block;font-size:calc(var(--hfx-type-caption-size,0.75rem)*.9167);line-height:var(--hfx-type-caption-line-height,1.35);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

package/CanopyX.Html/Assets/canopyx-values.js

@@ -0,0 +1,13 @@
+(function(global){"use strict";const installed=new WeakSet();const part={version:"0d7006b0f7bfca10",install(context){if(installed.has(context.GRID_SHOW_AS))return;const{DataGrid,GRID_SHOW_AS,GRID_SHOW_AS_MODES,h,setText,gridFreeze,reportingAggregateParts,reportingAggregateName,gridButton}=context;function showAsValues(values,mode,grand=null,parent=null,rowTotals,columnTotals){if(!Array.isArray(values)||values.length>10000||values.some(value=>value!==null&&!Number.isFinite(value))||!GRID_SHOW_AS_MODES.includes(mode)||
+rowTotals&&rowTotals.length!==values.length||columnTotals&&columnTotals.length!==values.length)throw new Error("CanopyX: invalid aggregate display inputs.");const ranks=new Map();if(mode==="rank")values.filter(value=>value!==null).sort((a,b)=>b-a).forEach((value,index)=>{if(!ranks.has(value))ranks.set(value,index+1)});let running=0;return values.map((value,index)=>{if(value===null)return null;const divide=denominator=>denominator!==null&&denominator!==undefined&&denominator!==0?value / denominator : null;
+let result;switch(mode){case "percentGrandTotal":result=divide(grand);break;case "percentParent":result=divide(parent);break;case "percentRow":result=divide(rowTotals?.[index]);break;case "percentColumn":result=divide(columnTotals?.[index]);break;case "runningTotal":running +=value;result=running;break;case "rank":result=ranks.get(value);break;case "difference":result=!index||values[index-1]===null?null:value-values[index-1];break;case "percentChange":result=!index||values[index-1]===null||values[index-1]===0?null:(value-values[index-1])/ values[index - 1]; break;
+default:result=value}
+return result===null||!Number.isFinite(result)?null:result})}
+const showAsPercent=mode=>["percentGrandTotal","percentParent","percentRow","percentColumn","percentChange"].includes(mode);const showAsFormat=mode=>showAsPercent(mode)?"0.00%":mode==="rank"?"0":"0.00";Object.assign(GRID_SHOW_AS,{evaluate:showAsValues,percent:showAsPercent,numberFormat:showAsFormat});function showAsSummary(grid,summary){grid.aggregateDisplayCache||=new WeakMap();const cached=grid.aggregateDisplayCache.get(summary);if(cached)return cached;const aggregates=grid.view.reporting.aggregates||[],modes=grid.aggregateShowAs||{},byValues=new WeakMap();const modeOf=aggregate=>modes[aggregate.id]??aggregate.showAs??"value";const value=(number,mode)=>Object.freeze({value:number,mode,numberFormat:showAsFormat(mode)});const totals=Object.create(null),groups=Object.create(null);for(const aggregate of aggregates){const raw=summary.aggregates[aggregate.id],mode=modeOf(aggregate);totals[aggregate.id]=value(showAsValues([raw],mode,raw,raw)[0],mode)}
+byValues.set(summary.aggregates,totals);const walk=(siblings,parent)=>{const display=siblings.map(()=>Object.create(null));for(const aggregate of aggregates){const mode=modeOf(aggregate),values=showAsValues(siblings.map(group=>group.aggregates[aggregate.id]),mode,summary.aggregates[aggregate.id],parent[aggregate.id]);values.forEach((number,index)=>{display[index][aggregate.id]=value(number,mode)})}
+siblings.forEach((group,index)=>{groups[group.key]=display[index];byValues.set(group.aggregates,display[index]);walk(group.groups||[],group.aggregates)})};walk(summary.groups,summary.aggregates);const result=gridFreeze({totals,groups}),entry={result,byValues};grid.aggregateDisplayCache.set(summary,entry);return entry}
+function showAsEntry(grid,values,aggregate){for(const summary of[grid.summary,grid.summaryCandidate?.result]){if(!summary)continue;const entry=showAsSummary(grid,summary).byValues.get(values)?.[aggregate.id];if(entry)return entry}
+return{value:values[aggregate.id],mode:"value",numberFormat:"0.00"}}
+Object.assign(GRID_SHOW_AS,{summary:showAsSummary,entry:showAsEntry});DataGrid.prototype.openAggregateMenu=function(column,aggregates,values,button,text){const controls=h("form","cx-show-as-fields"),choices=[];for(const aggregate of aggregates){const label=h("label","cx-show-as-field"),name=h("span"),select=h("select","cx-input");setText(name,reportingAggregateName(this,aggregate));select.setAttribute("aria-label",aggregate.label+": "+this.labels.gridShowAs);for(const mode of GRID_SHOW_AS_MODES.filter(mode=>!["percentRow","percentColumn"].includes(mode))){const option=h("option");option.value=mode;setText(option,this.labels["gridShowAs"+mode[0].toUpperCase()+ mode.slice(1)]);select.append(option)}
+select.value=this.aggregateShowAs?.[aggregate.id]??aggregate.showAs??"value";choices.push([aggregate.id,select]);label.append(name,select);controls.append(label)}
+const apply=gridButton(this.labels.gridApply,()=>{});apply.type="submit";apply.dataset.variant="primary";controls.append(apply);controls.addEventListener("submit",async event=>{event.preventDefault();for(const[id,select]of choices)await this.setAggregateShowAs(id,select.value);this.reportingText?._cxOverlay.close()});this.showReportingText(column,text??reportingAggregateParts(this,column,aggregates,values).title,button,undefined,false,controls)};installed.add(context.GRID_SHOW_AS)}};(global.CanopyXParts||=[]).push(["values",part])})(typeof window!=="undefined"?window:globalThis);

package/CanopyX.Html/Assets/canopyx-view-intents.css

@@ -0,0 +1,12 @@
+body .cx-host.cx-view-intent-preview{height:auto;min-width:0;margin-top:var(--hfx-space-3,0.75rem);padding:var(--hfx-space-3,0.75rem);border:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-view-intent-preview h3{margin:0 0 var(--hfx-space-2,0.5rem);font-size:inherit;font-weight:var(--hfx-weight-semibold,600);}
+.cx-view-intent-preview .cx-grid-query-chips{display:flex;flex-wrap:wrap;gap:var(--hfx-space-1-5,6px);margin-bottom:var(--hfx-space-3,0.75rem);}
+.cx-view-intent-preview .cx-grid-chip{display:inline-block;max-width:100%;height:auto;padding:var(--hfx-space-1,0.25rem) var(--hfx-space-2,0.5rem);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));white-space:normal;overflow-wrap:anywhere;}
+.cx-view-intent-actions{display:flex;flex-wrap:wrap;gap:var(--hfx-space-2,0.5rem);}
+.cx-view-intent-preview [role=status]{margin:var(--hfx-space-2,0.5rem) 0 0;overflow-wrap:anywhere;}
+.cx-view-intent-preview [role=status]:empty{display:none;}
+@media print{.cx-view-intent-preview{display:none !important;}}
+@media (forced-colors:active){
+.cx-view-intent-preview .cx-grid-chip{border:var(--hfx-border-width,1px) solid CanvasText;}
+.cx-view-intent-actions [data-variant="primary"]{background:Highlight;color:HighlightText;border:var(--hfx-border-width,1px) solid Highlight;forced-color-adjust:none;}
+}